style: improve visibility of roll mode

- display message when waiting
- add tooltips
- block non necessary buttons when rolling

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')} />
-      <NextIconBtn clickhandler={() => playbackControl('next')} />
+      <PrevIconBtn
+        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} />
-        </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}