Merge pull request #18 from cpvalente/chore/cleanup

Chore/cleanup
cpvalente · Oct 29, 2021 · dca7533 · dca7533
2 parents d03424d + 8fcf339
commit dca7533
Show file tree

Hide file tree

Showing 58 changed files with 1,870 additions and 1,218 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,7 +29,7 @@ TODO.md
 # working stuff
 _SS/
 .vscode/launch.json
-db.json
 .eslintrc.json
-db.json
 db backup.json
+server/src/data/db.json
+server/src/models/db.json
diff --git a/client/package.json b/client/package.json
@@ -3,27 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^1.4.1",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@chakra-ui/react": "^1.6.10",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
-    "date-fns": "^2.20.1",
     "framer-motion": "^4.1.6",
     "jotai": "^0.16.5",
     "react": "^17.0.1",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.1",
     "react-fast-compare": "^3.2.0",
-    "react-icons": "^4.2.0",
-    "react-qr-code": "^1.1.1",
+    "react-icons": "^4.3.1",
+    "react-qr-code": "^2.0.2",
     "react-query": "^3.13.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "socket.io-client": "^4.0.1",
+    "socket.io-client": "^4.3.2",
     "tinykeys": "^1.1.2",
     "typeface-open-sans": "^1.1.13",
     "web-vitals": "^1.0.1"

diff --git a/client/public/index.html b/client/public/index.html
@@ -5,14 +5,21 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#121212" />
-    <meta
-      name="onsite"
-      content="onsite - event timer manager"
-    />
+    <meta name="onsite" content="onsite - event timer manager" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/client/src/App.css b/client/src/App.css
@@ -14,3 +14,7 @@ html,
   user-select: none;
   -webkit-app-region: drag;
 }
+
+option {
+  color: black;
+}
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,9 +1,10 @@
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, useEffect } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import './App.css';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import SocketProvider from 'app/context/socketContext';
 import withSocket from 'features/viewers/ViewWrapper';
+import tinykeys from 'tinykeys';
 
 const Editor = lazy(() => import('features/editors/Editor'));
 const PresenterView = lazy(() =>
@@ -36,6 +37,22 @@ const SLowerThird = withSocket(Lower);
 const SPip = withSocket(Pip);
 
 function App() {
+  useEffect(() => {
+    let unsubscribe = tinykeys(window, {
+      'Alt+t': () => {
+        // if we are in electron
+        if (window.process?.type === undefined) return;
+        if (window.process.type === 'renderer') {
+          // ask to see debug
+          window.ipcRenderer.send('set-window', 'show-dev');
+        }
+      },
+    });
+    return () => {
+      unsubscribe();
+    };
+  });
+
   return (
     <SocketProvider>
       <QueryClientProvider client={queryClient}>
@@ -45,6 +62,7 @@ function App() {
               <Route exact path='/' component={SSpeaker} />
               <Route exact path='/sm' component={SStageManager} />
               <Route exact path='/speaker' component={SSpeaker} />
+              <Route exact path='/stage' component={SSpeaker} />
               <Route exact path='/speakersimple' component={SSpeakerSimple} />
               <Route exact path='/editor' component={Editor} />
               <Route exact path='/public' component={SPublic} />

diff --git a/client/src/app/api/ontimeApi.js b/client/src/app/api/ontimeApi.js
@@ -3,21 +3,30 @@ import { ontimeURL } from './apiConstants';
 
 export const ontimePlaceholderInfo = {
   networkInterfaces: [],
+  version: '',
+  serverPort: 4001,
+  oscInPort: '',
+  oscOutPort: '',
+  oscOutIP: '',
 };
 
 export const getInfo = async () => {
   const res = await axios.get(ontimeURL + '/info');
   return res.data;
 };
 
+export const postInfo = async (data) => {
+  const res = await axios.post(ontimeURL + '/info', data);
+  return res;
+};
+
 export const downloadEvents = async () => {
   await axios({
     url: ontimeURL + '/db',
     method: 'GET',
     responseType: 'blob', // important
   }).then((response) => {
     let headerLine = response.headers['Content-Disposition'];
-    console.log(response);
     let filename = 'events.json';
 
     // try and get the filename from the response

diff --git a/client/src/common/components/buttons/AddIconBtn.jsx b/client/src/common/components/buttons/AddIconBtn.jsx
@@ -7,9 +7,11 @@ export default function AddIconBtn(props) {
     <IconButton
       size={props.size || 'xs'}
       icon={<FiPlus />}
-      colorScheme='blue'
-      onClick={clickhandler}
+      _expanded={{ bg: 'orange.300', color: 'white' }}
       _focus={{ boxShadow: 'none' }}
+      backgroundColor={'orange.200'}
+      color={'orange.500'}
+      onClick={clickhandler}
       {...rest}
     />
   );

diff --git a/client/src/common/components/buttons/UnloadIconBtn.jsx b/client/src/common/components/buttons/UnloadIconBtn.jsx
@@ -1,11 +1,11 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiCornerLeftUp } from 'react-icons/fi';
+import { FiXOctagon } from 'react-icons/fi';
 
 export default function UnloadIconBtn(props) {
   const { clickhandler, ...rest } = props;
   return (
     <IconButton
-      icon={<FiCornerLeftUp />}
+      icon={<FiXOctagon />}
       colorScheme='whiteAlpha'
       backgroundColor='#ffffff05'
       variant='outline'

diff --git a/client/src/common/components/views/Paginator.jsx b/client/src/common/components/views/Paginator.jsx
@@ -7,7 +7,6 @@ export default function Paginator(props) {
   const { events, selectedId } = props;
   const LIMIT_PER_PAGE = props.limit || 8;
   const SCROLL_TIME = props.time * 1000 || 10000;
-  const SCROLL_PAST = false;
   const [numEvents, setNumEvents] = useState(0);
   const [page, setPage] = useState([]);
   const [pages, setPages] = useState(0);

diff --git a/client/src/common/components/views/Paginator.module.css b/client/src/common/components/views/Paginator.module.css
@@ -37,6 +37,10 @@
 
 .entryTitle {
   align-self: center;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .entryPast,

diff --git a/client/src/features/control/PlaybackButtons.jsx b/client/src/features/control/PlaybackButtons.jsx
@@ -30,22 +30,29 @@ const Playback = ({ playback, selectedId, playbackControl }) => {
       />
       <RollIconBtn
         active={playback === 'roll'}
+        disabled={playback === 'roll'}
         clickhandler={() => playbackControl('roll')}
       />
     </div>
   );
 };
 
-const Transport = ({ selectedId, playbackControl }) => {
+const Transport = ({ playback, selectedId, playbackControl }) => {
   return (
     <div className={style.playbackContainer}>
-      <PrevIconBtn clickhandler={() => playbackControl('previous')} />
-      <NextIconBtn clickhandler={() => playbackControl('next')} />
-      <UnloadIconBtn clickhandler={() => playbackControl('unload')} />
+      <PrevIconBtn
+        clickhandler={() => playbackControl('previous')}
+        disabled={playback === 'roll'}
+      />
+      <NextIconBtn
+        clickhandler={() => playbackControl('next')}
+        disabled={playback === 'roll'}
+      />
       <ReloadIconButton
         clickhandler={() => playbackControl('reload')}
         disabled={!selectedId}
       />
+      <UnloadIconBtn clickhandler={() => playbackControl('unload')} />
     </div>
   );
 };
@@ -60,6 +67,7 @@ const PlaybackButtons = (props) => {
         playbackControl={props.playbackControl}
       />
       <Transport
+        playback={playback}
         selectedId={selectedId}
         playbackControl={props.playbackControl}
       />

diff --git a/client/src/features/control/PlaybackControl.jsx b/client/src/features/control/PlaybackControl.jsx
@@ -12,6 +12,7 @@ export default function PlaybackControl() {
     running: null,
     startedAt: null,
     expectedFinish: null,
+    secondary: null,
   });
   const [selectedId, setSelectedId] = useState(null);
 
@@ -20,6 +21,7 @@ export default function PlaybackControl() {
       running: null,
       startedAt: null,
       expectedFinish: null,
+      secondary: null,
     });
   };
 

diff --git a/client/src/features/control/PlaybackControl.module.css b/client/src/features/control/PlaybackControl.module.css
@@ -105,6 +105,11 @@
   font-size: 0.9em;
 }
 
+.rolltag {
+  color: #2b6cb0;
+  font-size: 0.9em;
+}
+
 .playbackContainer {
   display: flex;
   justify-content: space-evenly;

diff --git a/client/src/features/control/PlaybackTimer.jsx b/client/src/features/control/PlaybackTimer.jsx
@@ -1,6 +1,7 @@
 import style from './PlaybackControl.module.css';
 import Countdown from 'common/components/countdown/Countdown';
 import { stringFromMillis } from 'common/dateConfig';
+import { Tooltip } from '@chakra-ui/react';
 import { Button } from '@chakra-ui/button';
 import { memo } from 'react';
 
@@ -9,7 +10,8 @@ const areEqual = (prevProps, nextProps) => {
     prevProps.timer.running === nextProps.timer.running &&
     prevProps.timer.expectedFinish === nextProps.timer.expectedFinish &&
     prevProps.timer.startedAt === nextProps.timer.startedAt &&
-    prevProps.playback === nextProps.playback
+    prevProps.playback === nextProps.playback &&
+    prevProps.timer.secondary === nextProps.timer.secondary
   );
 };
 
@@ -18,8 +20,8 @@ const PlaybackTimer = (props) => {
   const started = stringFromMillis(timer.startedAt, true);
   const finish = stringFromMillis(timer.expectedFinish, true);
   const isNegative = timer.running < 0;
-  const isDelayed = false;
   const isRolling = playback === 'roll';
+  const isWaiting = timer.secondary > 0 && timer.running == null;
 
   const incrementProps = {
     size: 'sm',
@@ -33,23 +35,38 @@ const PlaybackTimer = (props) => {
     <>
       <div className={style.timeContainer}>
         <div className={style.indicators}>
-          <div className={isRolling ? style.indRollActive : style.indRoll} />
+          <Tooltip label='Roll mode active'>
+            <div className={isRolling ? style.indRollActive : style.indRoll} />
+          </Tooltip>
           <div
             className={isNegative ? style.indNegativeActive : style.indNegative}
           />
           <div className={style.indDelay} />
         </div>
         <div className={style.timer}>
-          <Countdown time={timer?.running} small negative={isNegative} />
-        </div>
-        <div className={style.start}>
-          <span className={style.tag}>Started at </span>
-          <span className={style.time}>{started}</span>
-        </div>
-        <div className={style.finish}>
-          <span className={style.tag}>Finish at </span>
-          <span className={style.time}>{finish}</span>
+          <Countdown
+            time={isWaiting ? timer.secondary : timer.running}
+            small
+            negative={isNegative}
+          />
         </div>
+        {isWaiting ? (
+          <div className={style.start}>
+            <span className={style.rolltag}>Roll: Countdown to start</span>
+            <span className={style.time}>{''}</span>
+          </div>
+        ) : (
+          <>
+            <div className={style.start}>
+              <span className={style.tag}>Started at </span>
+              <span className={style.time}>{started}</span>
+            </div>
+            <div className={style.finish}>
+              <span className={style.tag}>Finish at </span>
+              <span className={style.time}>{finish}</span>
+            </div>
+          </>
+        )}
         <div className={style.btn}>
           <Button
             {...incrementProps}

diff --git a/client/src/features/editors/Editor.module.css b/client/src/features/editors/Editor.module.css
@@ -114,7 +114,7 @@ h1 {
 }
 
 .content {
-  padding-top: 1.5em;
+  padding-top: 0.5em;
 }
 
 .cornerButtonContainer {

diff --git a/client/src/features/editors/list/ActionButtons.jsx b/client/src/features/editors/list/ActionButtons.jsx
@@ -28,22 +28,22 @@ export default function ActionButtons(props) {
           onClick={() => actionHandler('event')}
           isDisabled={!showAdd}
         >
-          Event next
+          Add Event after
         </MenuItem>
 
         <MenuItem
           icon={<FiClock />}
           onClick={() => actionHandler('delay')}
           isDisabled={!showDelay}
         >
-          Delay next
+          Add Delay after
         </MenuItem>
         <MenuItem
           icon={<FiMinusCircle />}
           onClick={() => actionHandler('block')}
           isDisabled={!showBlock}
         >
-          Block next
+          Add Block after
         </MenuItem>
       </MenuList>
     </Menu>