From 4a1599d2f5cc514731beca4207e83c9475f688e3 Mon Sep 17 00:00:00 2001
From: michael-grace <michael.dp.grace@outlook.com>
Date: Sun, 18 Oct 2020 22:41:33 +0100
Subject: [PATCH 1/5] add autoplayout selector

---
 src/showplanner/AutoPlayoutModal.tsx | 37 ++++++++++++++++++++++++++++
 src/showplanner/index.tsx            | 17 +++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/showplanner/AutoPlayoutModal.tsx

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 (
+    <Modal isOpen={props.isOpen} onRequestClose={props.close}>
+      <div>
+        <h1 className="d-inline">
+          <FaPlayCircle className="mx-2" size={30} />
+          URY Automatic Playout
+        </h1>
+        <Button
+          onClick={props.close}
+          className="float-right pt-1"
+          color="primary"
+        >
+          <FaTimes />
+        </Button>
+      </div>
+      <hr />
+      <iframe
+        id="uploadIframe"
+        src={process.env.REACT_APP_MYRADIO_NONAPI_BASE + "/NIPSWeb/playout/"}
+        frameBorder="0"
+        title="URY Automatic Playout"
+      ></iframe>
+      <div></div>
+    </Modal>
+  );
+}
diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx
index 426c541..09bf3ac 100644
--- a/src/showplanner/index.tsx
+++ b/src/showplanner/index.tsx
@@ -8,6 +8,7 @@ import {
   FaMicrophone,
   FaTrash,
   FaUpload,
+  FaPlayCircle,
 } from "react-icons/fa";
 import { VUMeter } from "../optionsMenu/helpers/VUMeter";
 import Stopwatch from "react-stopwatch";
@@ -50,6 +51,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";
@@ -88,6 +90,7 @@ function LibraryColumn() {
     (state: RootState) => state.showplan
   );
 
+  const [autoPlayoutModal, setAutoPlayoutModal] = useState(false);
   const [showLibraryUploadModal, setShowLibraryModal] = useState(false);
   const [showImporterModal, setShowImporterModal] = useState(false);
 
@@ -97,6 +100,10 @@ function LibraryColumn() {
 
   return (
     <>
+      <AutoPlayoutModal
+        isOpen={autoPlayoutModal}
+        close={() => setAutoPlayoutModal(false)}
+      />
       <LibraryUploadModal
         isOpen={showLibraryUploadModal}
         close={() => setShowLibraryModal(false)}
@@ -111,6 +118,16 @@ function LibraryColumn() {
             <FaBookOpen className="mx-2" size={28} />
             Libraries
           </h2>
+          <Button
+            className="mr-1"
+            color="primary"
+            title="Auto Playout"
+            size="sm"
+            outline={true}
+            onClick={() => setAutoPlayoutModal(true)}
+          >
+            <FaPlayCircle /> Auto Playout
+          </Button>
           <Button
             className="mr-1"
             color="primary"

From feccb3155e525c5e7732e1c27b44088de61bf0d2 Mon Sep 17 00:00:00 2001
From: Marks Polakovs <marks@markspolakovs.me>
Date: Mon, 9 Nov 2020 14:30:50 +0000
Subject: [PATCH 2/5] Migrate react-contextmenu to react-contexify

---
 package.json              |  2 +-
 src/api.ts                |  4 +--
 src/showplanner/Item.tsx  | 68 +++++++++++++++++++++++++--------------
 src/showplanner/index.tsx | 32 ++++++++++--------
 src/showplanner/state.ts  | 10 ++++++
 yarn.lock                 | 14 ++++----
 6 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/package.json b/package.json
index 68c0020..fe2e1ce 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/api.ts b/src/api.ts
index f66a941..851bec4 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -77,7 +77,7 @@ interface Album {
   // TODO
 }
 
-interface TimeslotItemBase {
+export interface TimeslotItemBase {
   timeslotitemid: string;
   channel: number;
   weight: number;
@@ -88,7 +88,7 @@ interface TimeslotItemBase {
   cue: number;
 }
 
-interface TimeslotItemCentral {
+export interface TimeslotItemCentral {
   type: "central";
   artist: string;
   intro: number;
diff --git a/src/showplanner/Item.tsx b/src/showplanner/Item.tsx
index c0242ba..527d4f4 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 playerState = useSelector((state: RootState) =>
@@ -44,6 +44,30 @@ export const Item = memo(function Item({
     }
   }
 
+  function openContextMenu(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    e.preventDefault();
+    if (isTrack(x)) {
+      contextMenu.show({
+        id: TS_ITEM_MENU_ID,
+        event: e,
+        props: {
+          id,
+          title: x.title,
+          artist: x.artist,
+        },
+      });
+    } else if (isAux(x)) {
+      contextMenu.show({
+        id: TS_ITEM_MENU_ID,
+        event: e,
+        props: {
+          id,
+          title: x.title,
+        },
+      });
+    }
+  }
+
   return (
     <Draggable
       draggableId={id}
@@ -69,31 +93,27 @@ export const Item = memo(function Item({
             }`
           }
           onClick={triggerClick}
+          onContextMenu={openContextMenu}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
         >
-          <ContextMenuTrigger
-            id={isReal ? TS_ITEM_MENU_ID : ""}
-            collect={() => ({ id })}
+          <span className={"icon " + x.type} />
+          &nbsp;
+          {x.title.toString()}
+          {"artist" in x && x.artist !== "" && " - " + x.artist}
+          <small
+            className={
+              "border rounded border-danger text-danger p-1 m-1" +
+              ("clean" in x && x.clean === false ? "" : " d-none")
+            }
           >
-            <span className={"icon " + x.type} />
-            &nbsp;
-            {x.title.toString()}
-            {"artist" in x && x.artist !== "" && " - " + x.artist}
-            <small
-              className={
-                "border rounded border-danger text-danger p-1 m-1" +
-                ("clean" in x && x.clean === false ? "" : " d-none")
-              }
-            >
-              Explicit
-            </small>
-            {showDebug && (
-              <code>
-                {itemId(x)} {"channel" in x && x.channel + "/" + x.weight}
-              </code>
-            )}
-          </ContextMenuTrigger>
+            Explicit
+          </small>
+          {showDebug && (
+            <code>
+              {itemId(x)} {"channel" in x && x.channel + "/" + x.weight}
+            </code>
+          )}
         </div>
       )}
     </Draggable>
diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx
index e120db2..a673c18 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,
@@ -379,13 +380,6 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
     }
   }
 
-  async function onCtxRemoveClick(e: any, data: { id: string }) {
-    dispatch(removeItem(timeslotId, data.id));
-  }
-  async function onCtxUnPlayedClick(e: any, data: { id: string }) {
-    dispatch(setItemPlayed({ itemId: data.id, played: false }));
-  }
-
   // Add support for reloading the show plan from the iFrames.
   // There is a similar listener in showplanner/ImporterModal.tsx to handle closing the iframe.
   useEffect(() => {
@@ -440,14 +434,24 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
           </div>
         </DragDropContext>
       </div>
-      <ContextMenu id={TS_ITEM_MENU_ID}>
-        <MenuItem onClick={onCtxRemoveClick}>
+      <Menu id={TS_ITEM_MENU_ID}>
+        <CtxMenuItem
+          onClick={(args) =>
+            dispatch(removeItem(timeslotId, (args.props as any).id))
+          }
+        >
           <FaTrash /> Remove
-        </MenuItem>
-        <MenuItem onClick={onCtxUnPlayedClick}>
+        </CtxMenuItem>
+        <CtxMenuItem
+          onClick={(args) =>
+            dispatch(
+              setItemPlayed({ itemId: (args.props as any).id, played: false })
+            )
+          }
+        >
           <FaCircleNotch /> Mark Unplayed
-        </MenuItem>
-      </ContextMenu>
+        </CtxMenuItem>
+      </Menu>
       <OptionsMenu />
       <WelcomeModal
         isOpen={showWelcomeModal}
diff --git a/src/showplanner/state.ts b/src/showplanner/state.ts
index 8b9b8fb..762def6 100644
--- a/src/showplanner/state.ts
+++ b/src/showplanner/state.ts
@@ -47,6 +47,16 @@ export function itemId(
   throw new Error("Can't get id of unknown item.");
 }
 
+export function isTrack(
+  item: PlanItem | Track | AuxItem
+): item is (api.TimeslotItemBase & api.TimeslotItemCentral) | Track {
+  return "trackid" in item;
+}
+
+export function isAux(item: PlanItem | Track | AuxItem): item is AuxItem {
+  return "auxid" in item;
+}
+
 interface ShowplanState {
   planLoading: boolean;
   planLoadError: string | null;
diff --git a/yarn.lock b/yarn.lock
index 71155b1..1d95290 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3299,7 +3299,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.3, classnames@^2.2.5:
+classnames@^2.2.3, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -10100,13 +10100,13 @@ react-beforeunload@^2.1.0:
   dependencies:
     prop-types "^15.7.2"
 
-react-contextmenu@^2.13.0:
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/react-contextmenu/-/react-contextmenu-2.13.0.tgz#dabaea63124e30c85f1b4245c095b7045d013459"
-  integrity sha512-hhFuJX4di0zGV7H7pXPn42U70OZbGpQD+PxcdmKStNT5mebSjI+inhOuFESDmDbqVsN/f99hI5/nw95oXTVRXQ==
+react-contexify@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-contexify/-/react-contexify-4.1.1.tgz#f5eba1ad82a923c033c91d0abcea1da0a71ebaa1"
+  integrity sha512-WJeRI4ohHEOmNiH0xb62a/eV+5ae168FB7H6pfbeEVJkf0UN7D5H99l6b89poc2LHKN1gOimFjREyY8quGVsXA==
   dependencies:
-    classnames "^2.2.5"
-    object-assign "^4.1.0"
+    classnames "^2.2.6"
+    prop-types "^15.6.2"
 
 react-dev-utils@^10.2.1:
   version "10.2.1"

From a25a0d45c0e8002930f9eb323a9770967a128e20 Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Mon, 25 Jan 2021 00:47:14 +0000
Subject: [PATCH 3/5] Fix some types

---
 src/api.ts               | 4 +---
 src/mixer/state.ts       | 2 +-
 src/showplanner/state.ts | 8 ++++++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index 851bec4..d38c398 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -83,13 +83,13 @@ export interface TimeslotItemBase {
   weight: number;
   title: string;
   length: string;
-  trackid: number;
   clean: boolean;
   cue: number;
 }
 
 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 a98dc47..7c46756 100644
--- a/src/mixer/state.ts
+++ b/src/mixer/state.ts
@@ -549,7 +549,7 @@ export const play = (player: number): AppThunk => async (
   }
   audioEngine.players[player]?.play();
 
-  if (state.loadedItem && "album" in state.loadedItem) {
+  if (state.loadedItem && state.loadedItem.type === "central") {
     //track
     console.log("potentially tracklisting", state.loadedItem);
     if (getState().mixer.players[player].tracklistItemID === -1) {
diff --git a/src/showplanner/state.ts b/src/showplanner/state.ts
index 762def6..40f8bdc 100644
--- a/src/showplanner/state.ts
+++ b/src/showplanner/state.ts
@@ -50,7 +50,7 @@ export function itemId(
 export function isTrack(
   item: PlanItem | Track | AuxItem
 ): item is (api.TimeslotItemBase & api.TimeslotItemCentral) | Track {
-  return "trackid" in item;
+  return item.type === "central";
 }
 
 export function isAux(item: PlanItem | Track | AuxItem): item is AuxItem {
@@ -424,7 +424,11 @@ export const addItem = (
     const idForServer =
       newItemData.type === "central"
         ? `${newItemData.album.recordid}-${newItemData.trackid}`
-        : `ManagedDB-${newItemData.managedid}`;
+        : "managedid" in newItemData
+        ? `ManagedDB-${newItemData.managedid}`
+        : null;
+
+    if (!idForServer) return; // Something went very wrong
 
     dispatch(showplan.actions.insertGhost(ghost));
     ops.push({

From 62f55ec241c0892c4878c307befac581b0ab3587 Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Mon, 25 Jan 2021 00:47:37 +0000
Subject: [PATCH 4/5] Add right click for editing tracks.

---
 src/showplanner/Item.tsx  |  1 +
 src/showplanner/index.tsx | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/showplanner/Item.tsx b/src/showplanner/Item.tsx
index 527d4f4..5b8e9b5 100644
--- a/src/showplanner/Item.tsx
+++ b/src/showplanner/Item.tsx
@@ -52,6 +52,7 @@ export const Item = memo(function Item({
         event: e,
         props: {
           id,
+          trackid: x.trackid,
           title: x.title,
           artist: x.artist,
         },
diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx
index a673c18..c42843f 100644
--- a/src/showplanner/index.tsx
+++ b/src/showplanner/index.tsx
@@ -10,11 +10,12 @@ import {
   FaTrash,
   FaUpload,
   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 {
@@ -451,6 +452,21 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
         >
           <FaCircleNotch /> Mark Unplayed
         </CtxMenuItem>
+        <CtxMenuItem
+          onClick={(args) => {
+            if ("trackid" in (args.props as any)) {
+              window.open(
+                MYRADIO_NON_API_BASE +
+                  "/Library/editTrack?trackid=" +
+                  (args.props as any).trackid
+              );
+            } else {
+              alert("Sorry, editing tracks is only possible right now.");
+            }
+          }}
+        >
+          <FaPencilAlt /> Edit Item
+        </CtxMenuItem>
       </Menu>
       <OptionsMenu />
       <WelcomeModal

From bca3006c0ef0cc4d8035a4ef1d396699d9adc8c4 Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Mon, 25 Jan 2021 00:52:09 +0000
Subject: [PATCH 5/5] Fix context menu padding.

---
 src/App.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/App.scss b/src/App.scss
index 20c33c6..eae3db8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -189,3 +189,7 @@ $number-of-channels: 3;
     max-width: 100%;
   }
 }
+
+.react-contexify__item__content svg {
+  margin: 4px 0.6em 0 0;
+}