diff --git a/package.json b/package.json
index ac77489..a81798b 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
"react-app-polyfill": "^1.0.4",
"react-beautiful-dnd": "^12.1.1",
"react-beforeunload": "^2.1.0",
- "react-contextmenu": "^2.13.0",
+ "react-contexify": "^4.1.1",
"react-dev-utils": "^9.1.0",
"react-dnd": "^9.4.0",
"react-dnd-html5-backend": "^9.4.0",
diff --git a/src/App.scss b/src/App.scss
index 1ca2ba0..18ae0b8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -207,3 +207,7 @@ $number-of-channels: 3;
}
}
}
+
+.react-contexify__item__content svg {
+ margin: 4px 0.6em 0 0;
+}
diff --git a/src/api.ts b/src/api.ts
index f66a941..d38c398 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -77,19 +77,19 @@ interface Album {
// TODO
}
-interface TimeslotItemBase {
+export interface TimeslotItemBase {
timeslotitemid: string;
channel: number;
weight: number;
title: string;
length: string;
- trackid: number;
clean: boolean;
cue: number;
}
-interface TimeslotItemCentral {
+export interface TimeslotItemCentral {
type: "central";
+ trackid: number;
artist: string;
intro: number;
outro: number;
@@ -104,10 +104,8 @@ export interface AuxItem {
title: string | number;
managedid: number;
length: string;
- trackid: number;
expirydate: boolean | string;
expired: boolean;
- recordid: string;
auxid: string;
}
diff --git a/src/mixer/state.ts b/src/mixer/state.ts
index 48c95b7..3d18357 100644
--- a/src/mixer/state.ts
+++ b/src/mixer/state.ts
@@ -614,7 +614,7 @@ const attemptTracklist = (player: number): AppThunk => async (
const state = getState().mixer.players[player];
if (
state.loadedItem &&
- "album" in state.loadedItem &&
+ state.loadedItem.type === "central" &&
audioEngine.players[player]?.isPlaying
) {
//track
diff --git a/src/showplanner/AutoPlayoutModal.tsx b/src/showplanner/AutoPlayoutModal.tsx
new file mode 100644
index 0000000..f676ab9
--- /dev/null
+++ b/src/showplanner/AutoPlayoutModal.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { FaTimes, FaPlayCircle } from "react-icons/fa";
+import Modal from "react-modal";
+import { Button } from "reactstrap";
+
+interface AutoPlayoutProps {
+ isOpen: boolean;
+ close: () => any;
+}
+
+export function AutoPlayoutModal(props: AutoPlayoutProps) {
+ return (
+
+
+
+
+ URY Automatic Playout
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/showplanner/Item.tsx b/src/showplanner/Item.tsx
index c651346..e7efef5 100644
--- a/src/showplanner/Item.tsx
+++ b/src/showplanner/Item.tsx
@@ -1,15 +1,16 @@
import React, { memo } from "react";
-import { PlanItem, itemId } from "./state";
+import { PlanItem, itemId, isTrack, isAux } from "./state";
import { Track, AuxItem } from "../api";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../rootReducer";
import * as MixerState from "../mixer/state";
import { Draggable } from "react-beautiful-dnd";
-import { ContextMenuTrigger } from "react-contextmenu";
+import { contextMenu } from "react-contexify";
import "./item.scss";
export const TS_ITEM_MENU_ID = "SongMenu";
+export const TS_ITEM_AUX_ID = "AuxMenu";
export const Item = memo(function Item({
item: x,
@@ -22,7 +23,6 @@ export const Item = memo(function Item({
}) {
const dispatch = useDispatch();
const id = itemId(x);
- const isReal = "timeslotitemid" in x;
const isGhost = "ghostid" in x;
const loadedItem = useSelector(
@@ -45,6 +45,31 @@ export const Item = memo(function Item({
}
}
+ function openContextMenu(e: React.MouseEvent) {
+ e.preventDefault();
+ if (isTrack(x)) {
+ contextMenu.show({
+ id: TS_ITEM_MENU_ID,
+ event: e,
+ props: {
+ id,
+ trackid: x.trackid,
+ title: x.title,
+ artist: x.artist,
+ },
+ });
+ } else if (isAux(x)) {
+ contextMenu.show({
+ id: TS_ITEM_MENU_ID,
+ event: e,
+ props: {
+ id,
+ title: x.title,
+ },
+ });
+ }
+ }
+
function generateTooltipData() {
let data = ["Title: " + x.title.toString()];
@@ -78,33 +103,29 @@ export const Item = memo(function Item({
`${column >= 0 && isLoaded ? " active" : ""}`
}
onClick={triggerClick}
+ onContextMenu={openContextMenu}
{...provided.draggableProps}
{...provided.dragHandleProps}
data-tip={generateTooltipData()}
data-for="track-hover-tooltip"
>
- ({ id })}
+
+
+ {x.title.toString()}
+ {"artist" in x && x.artist !== "" && " - " + x.artist}
+
-
-
- {x.title.toString()}
- {"artist" in x && x.artist !== "" && " - " + x.artist}
-
- Explicit
-
- {showDebug && (
-
- {itemId(x)} {"channel" in x && x.channel + "/" + x.weight}
-
- )}
-
+ Explicit
+
+ {showDebug && (
+
+ {itemId(x)} {"channel" in x && x.channel + "/" + x.weight}
+
+ )}
)}
diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx
index c38e71f..a979b18 100644
--- a/src/showplanner/index.tsx
+++ b/src/showplanner/index.tsx
@@ -1,5 +1,6 @@
import React, { useState, useReducer, useEffect } from "react";
-import { ContextMenu, MenuItem } from "react-contextmenu";
+import { Menu, Item as CtxMenuItem } from "react-contexify";
+import "react-contexify/dist/ReactContexify.min.css";
import { useBeforeunload } from "react-beforeunload";
import {
FaBookOpen,
@@ -8,12 +9,14 @@ import {
FaMicrophone,
FaTrash,
FaUpload,
+ FaPlayCircle,
FaCircleNotch,
+ FaPencilAlt,
} from "react-icons/fa";
import { VUMeter } from "../optionsMenu/helpers/VUMeter";
import Stopwatch from "react-stopwatch";
-import { TimeslotItem } from "../api";
+import { MYRADIO_NON_API_BASE, TimeslotItem } from "../api";
import appLogo from "../assets/images/webstudio.svg";
import {
@@ -54,6 +57,7 @@ import { CombinedNavAlertBar } from "../navbar";
import { OptionsMenu } from "../optionsMenu";
import { WelcomeModal } from "./WelcomeModal";
import { PisModal } from "./PISModal";
+import { AutoPlayoutModal } from "./AutoPlayoutModal";
import { LibraryUploadModal } from "./LibraryUploadModal";
import { ImporterModal } from "./ImporterModal";
import "./channel.scss";
@@ -92,6 +96,7 @@ function LibraryColumn() {
(state: RootState) => state.showplan
);
+ const [autoPlayoutModal, setAutoPlayoutModal] = useState(false);
const [showLibraryUploadModal, setShowLibraryModal] = useState(false);
const [showImporterModal, setShowImporterModal] = useState(false);
@@ -101,6 +106,10 @@ function LibraryColumn() {
return (
<>
+ setAutoPlayoutModal(false)}
+ />
setShowLibraryModal(false)}
@@ -115,6 +124,16 @@ function LibraryColumn() {
Libraries
+