diff --git a/src/App.scss b/src/App.scss index 57dbdca..77ba8a4 100644 --- a/src/App.scss +++ b/src/App.scss @@ -79,3 +79,10 @@ $number-of-channels: 3; } } } + +#uploadIframe { + width: 100%; + max-height: 600px; + height: 60vh; + box-sizing: content-box; +} diff --git a/src/showplanner/LibraryUploadModal.tsx b/src/showplanner/LibraryUploadModal.tsx new file mode 100644 index 0000000..13000d0 --- /dev/null +++ b/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 ( + + + Upload to Library + + + + + + + + + + + + ); +} diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx index bacb975..0ffa016 100644 --- a/src/showplanner/index.tsx +++ b/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 ( + <> + setShowLibraryModal(false)} + /> - - - Libraries - + + + + Libraries + + + setShowLibraryModal(true)} + /> + + + > ); }