Add Library Upload. Closes #143.

src/App.scss

@@ -79,3 +79,10 @@ $number-of-channels: 3;
     }
   }
 }
+
+#uploadIframe {
+  width: 100%;
+  max-height: 600px;
+  height: 60vh;
+  box-sizing: content-box;
+}

src/showplanner/LibraryUploadModal.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { FaTimes, FaUpload } from "react-icons/fa";
+import Modal from "react-modal";
+import { Button } from "reactstrap";
+
+interface LibraryUploadProps {
+  isOpen: boolean;
+  close: () => any;
+}
+
+export function LibraryUploadModal(props: LibraryUploadProps) {
+  return (
+    <Modal isOpen={props.isOpen} onRequestClose={props.close}>
+      <div>
+        <h1 className="d-inline"><FaUpload className="mx-2" size={30} />Upload to Library</h1>
+        <Button onClick={props.close} className="float-right pt-1" color="primary">
+          <FaTimes />
+        </Button>
+      </div>
+      <hr />
+      <iframe
+        id="uploadIframe"
+        src="https://ury.org.uk/myradio/NIPSWeb/manage_library/"
+        frameBorder="0"
+        title="Upload to Library"
+      >
+      </iframe>
+      <div>
+
+      </div>
+    </Modal>
+  );
+}

src/showplanner/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useReducer, useEffect } from "react";
 import { ContextMenu, MenuItem } from "react-contextmenu";
 import { useBeforeunload } from "react-beforeunload";
-import { FaAlignJustify, FaBookOpen, FaMicrophone } from "react-icons/fa";
+import { FaAlignJustify, FaBookOpen, FaMicrophone, FaUpload } from "react-icons/fa";
 import { VUMeter } from "../optionsMenu/helpers/VUMeter";
 
 import { TimeslotItem } from "../api";
@@ -41,7 +41,9 @@ import { CombinedNavAlertBar } from "../navbar";
 import { OptionsMenu } from "../optionsMenu";
 import { WelcomeModal } from "./WelcomeModal";
 import { PisModal } from "./PISModal";
+import { LibraryUploadModal } from "./LibraryUploadModal";
 import "./channel.scss";
+import { Button } from "reactstrap";
 
 function Channel({ id, data }: { id: number; data: PlanItem[] }) {
   return (
@@ -75,16 +77,30 @@ function LibraryColumn() {
     (state: RootState) => state.showplan
   );
 
+  const [showLibraryUploadModal, setShowLibraryModal] = useState(false);
+
   useEffect(() => {
     dispatch(getPlaylists());
   }, [dispatch]);
 
   return (
+    <>
+    <LibraryUploadModal
+      isOpen={showLibraryUploadModal}
+      close={() => setShowLibraryModal(false)}
+    />
     <div className="library-column">
-      <h2>
+      <div className="mr-2 my-1">
-        <FaBookOpen className="mx-2" size={28} />
+        <h2 className="d-inline">
-        Libraries
+          <FaBookOpen className="mx-2" size={28} />
-      </h2>
+          Libraries
+        </h2>
+        <Button className="ml-1 float-right" color="primary" title="Upload to Library">
+          <FaUpload
+            onClick={() => setShowLibraryModal(true)}
+          />
+        </Button>
+      </div>
       <div className="px-2">
         <select
           className="form-control"
@@ -126,6 +142,7 @@ function LibraryColumn() {
         Select a library to search.
       </span>
     </div>
+    </>
   );
 }