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] 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"