improvements

- stage manager sees timer with negative values
- time up only shows if timer has been running
- use spacebar to toggle navbar
- pip shows times with delays
improve iterate

client/src/common/components/nav/NavLogo.jsx

@@ -1,7 +1,8 @@
 import { Link, Redirect } from 'react-router-dom';
 import { Image } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import tinykeys from 'tinykeys';
 import navlogo from '../../../assets/images/logos/LOGO-72.png';
 import style from './NavLogo.module.css';
 
@@ -12,6 +13,18 @@ export default function NavLogo() {
     setShowNav(!showNav);
   };
 
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    let unsubscribe = tinykeys(window, {
+      Space: () => {
+        setShowNav((s) => !s);
+      },
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
   return (
     <motion.div
       initial={{ opacity: 0.5 }}

client/src/features/viewers/ViewWrapper.jsx

@@ -215,16 +215,13 @@ const withSocket = (Component) => {
     /***  --------------------------------  ***/
     /******************************************/
 
+    // inject info:
     // is timer finished
-    let finished = timer.currentSeconds <= 0;
+    // get clock string
-
-    // get clock
-    let clock = stringFromMillis(timer.clock);
-
     const timeManager = {
       ...timer,
-      finished: finished,
+      finished: timer.running <= 0 && timer.startedAt,
-      clock: clock,
+      clock: stringFromMillis(timer.clock),
       playstate: playback,
     };
 

client/src/features/viewers/backstage/StageManager.jsx

@@ -24,14 +24,14 @@ export default function StageManager(props) {
 
     // Add running delay
     let delay = 0;
-    events.forEach((e) => {
+    for (const e of events) {
       if (e.type === 'block') delay = 0;
       else if (e.type === 'delay') delay = delay + e.duration;
       else if (e.type === 'event' && delay > 0) {
         e.timeStart += delay;
         e.timeEnd += delay;
       }
-    });
+    }
 
     // filter just events
     let filtered = events.filter((e) => e.type === 'event');
@@ -41,10 +41,8 @@ export default function StageManager(props) {
 
   // Format messages
   const showPubl = publ.text !== '' && publ.visible;
-  const stageTimer =
+  let stageTimer = formatDisplay(Math.abs(time.running), true);
-    time.currentSeconds != null && !isNaN(time.currentSeconds)
+  if (time.running < 0) stageTimer = '-' + stageTimer;
-      ? formatDisplay(time.currentSeconds, true)
-      : '';
 
   // motion
   const titleVariants = {

client/src/features/viewers/presenter/PresenterView.jsx

@@ -14,6 +14,8 @@ export default function PresenterView(props) {
     document.title = 'ontime - Speaker Screen';
   }, []);
 
+  
+
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playstate === 'start';
 

client/src/features/viewers/production/Pip.jsx

@@ -11,7 +11,9 @@ export default function Pip(props) {
   const { time, backstageEvents, selectedId, general } = props;
   const [size, setSize] = useState('');
   const ref = useRef(null);
+  const [filteredEvents, setFilteredEvents] = useState(null);
 
+  // calculcate pip size
   useEffect(() => {
     const h = ref.current.clientHeight;
     const w = ref.current.clientWidth;
@@ -23,6 +25,29 @@ export default function Pip(props) {
     document.title = 'ontime - Pip';
   }, []);
 
+  // calculate delays if any
+  useEffect(() => {
+    if (backstageEvents == null) return;
+
+    let events = [...backstageEvents];
+
+    // Add running delay
+    let delay = 0;
+    for (const e of events) {
+      if (e.type === 'block') delay = 0;
+      else if (e.type === 'delay') delay = delay + e.duration;
+      else if (e.type === 'event' && delay > 0) {
+        e.timeStart += delay;
+        e.timeEnd += delay;
+      }
+    }
+
+    // filter just events
+    let filtered = events.filter((e) => e.type === 'event');
+
+    setFilteredEvents(filtered);
+  }, [backstageEvents]);
+
   // Format messages
   const showInfo =
     general.backstageInfo !== '' && general.backstageInfo != null;
@@ -43,7 +68,7 @@ export default function Pip(props) {
         <div className={style.entriesContainer}>
           <Paginator
             selectedId={selectedId}
-            events={backstageEvents}
+            events={filteredEvents}
             limit={15}
             time={20}
           />