Merge pull request #17 from cpvalente/fix/roll

Fix/roll

client/src/features/control/PlaybackButtons.jsx

@@ -30,17 +30,24 @@ 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')} />
+      <PrevIconBtn
-      <NextIconBtn clickhandler={() => playbackControl('next')} />
+        clickhandler={() => playbackControl('previous')}
+        disabled={playback === 'roll'}
+      />
+      <NextIconBtn
+        clickhandler={() => playbackControl('next')}
+        disabled={playback === 'roll'}
+      />
       <ReloadIconButton
         clickhandler={() => playbackControl('reload')}
         disabled={!selectedId}
@@ -60,6 +67,7 @@ const PlaybackButtons = (props) => {
         playbackControl={props.playbackControl}
       />
       <Transport
+        playback={playback}
         selectedId={selectedId}
         playbackControl={props.playbackControl}
       />

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,
     });
   };
 

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;

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
   );
 };
 
@@ -19,6 +21,7 @@ const PlaybackTimer = (props) => {
   const finish = stringFromMillis(timer.expectedFinish, true);
   const isNegative = timer.running < 0;
   const isRolling = playback === 'roll';
+  const isWaiting = timer.secondary > 0 && timer.running == null;
 
   const incrementProps = {
     size: 'sm',
@@ -32,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} />
+          <Countdown
-        </div>
+            time={isWaiting ? timer.secondary : timer.running}
-        <div className={style.start}>
+            small
-          <span className={style.tag}>Started at </span>
+            negative={isNegative}
-          <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>
+        {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}

client/src/features/info/Info.jsx

@@ -20,6 +20,8 @@ export default function Info() {
   const [selected, setSelected] = useState('No events');
   const logData = [];
 
+  console.log(`titles`, titles);
+
   // handle incoming messages
   useEffect(() => {
     if (socket == null) return;

server/src/classes/EventTimer.js

@@ -242,10 +242,6 @@ export class EventTimer extends Timer {
       } else {
         // look for event if none is loaded
         if (this.current <= 0 || this.secondaryTimer <= 0) this.rollLoad();
-
-        // count to next event
-        // TODO: replace with proper counter
-        if (this.secondaryTimer != null) this.secondaryTimer -= 1000;
       }
     }
 
@@ -946,8 +942,12 @@ export class EventTimer extends Timer {
 
   rollLoad() {
     const now = this._getCurrentTime();
-    this._resetTimers(true);
+
-    this._resetSelection();
+    // maybe roll has already been loaded
+    if (this.secondaryTimer == null) {
+      this._resetTimers(true);
+      this._resetSelection();
+    }
 
     let foundNow = null;
     let nextIndex = null;
@@ -988,16 +988,20 @@ export class EventTimer extends Timer {
     }
 
     // nothing to play next, unload
-    if (!foundNow && !nextIndex) {
+    if (foundNow == null && nextIndex == null) {
       this.unload();
+      console.log('Roll: no events found');
       return;
     }
 
-    if (nextIndex) {
+    if (nextIndex != null) {
       // load titles
-      this._loadThisTitles(nextIndex, 'next');
+      const e = this._eventlist[nextIndex];
+      this._loadThisTitles(e, 'next');
 
-      if (!foundNow) {
+      if (foundNow == null) {
+        if (this.secondaryTimer == null)
+          console.log('Roll: waiting for event start');
         // timer counts to nextStart
         this.secondaryTimer = nextStart;
       }

server/src/controllers/playbackController.js

@@ -7,6 +7,7 @@ export const pbGet = async (req, res) => {
 // Create controller for GET request to '/playback/start'
 // Starts timer object
 export const pbStart = async (req, res) => {
+  console.log('Calling start');
   global.timer.start();
   res.sendStatus(200);
 };
@@ -14,6 +15,7 @@ export const pbStart = async (req, res) => {
 // Create controller for GET request to '/playback/pause'
 // Pauses timer object
 export const pbPause = async (req, res) => {
+  console.log('Calling pause');
   global.timer.pause();
   res.sendStatus(200);
 };
@@ -21,6 +23,7 @@ export const pbPause = async (req, res) => {
 // Create controller for GET request to '/playback/stop'
 // Stops timer object
 export const pbStop = async (req, res) => {
+  console.log('Calling stop');
   global.timer.stop();
   res.sendStatus(200);
 };
@@ -28,6 +31,7 @@ export const pbStop = async (req, res) => {
 // Create controller for GET request to '/playback/roll'
 // Sets timer object to roll mode
 export const pbRoll = async (req, res) => {
+  console.log('Calling roll');
   global.timer.roll();
   res.sendStatus(501);
 };
@@ -35,6 +39,7 @@ export const pbRoll = async (req, res) => {
 // Create controller for GET request to '/playback/previous'
 // Sets timer object to roll mode
 export const pbPrevious = async (req, res) => {
+  console.log('Calling previous');
   global.timer.previous();
   res.sendStatus(200);
 };
@@ -42,6 +47,7 @@ export const pbPrevious = async (req, res) => {
 // Create controller for GET request to '/playback/next'
 // Sets timer object to roll mode
 export const pbNext = async (req, res) => {
+  console.log('Calling next');
   global.timer.next();
   res.sendStatus(200);
 };
@@ -49,8 +55,8 @@ export const pbNext = async (req, res) => {
 // Create controller for GET request to '/playback/unload'
 // Unloads any events
 export const pbUnload = async (req, res) => {
+  console.log('Calling unload');
   global.timer.unload();
-  console.log('debug: unload called');
 
   res.sendStatus(200);
 };
@@ -58,7 +64,7 @@ export const pbUnload = async (req, res) => {
 // Create controller for GET request to '/playback/reload'
 // Reloads current event
 export const pbReload = async (req, res) => {
+  console.log('Calling reload');
   global.timer.reload();
-  console.log('debug: reload called');
   res.sendStatus(200);
 };