Custom add (#889)

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss

@@ -1,16 +1,17 @@
 .timeContainer {
   display: grid;
   grid-template-areas:
-    'ind clk clk btn'
-    '... sta fin btn';
+    'indicators timer  addtime'
+    'status     status addtime';
   grid-template-rows: 1fr auto;
-  grid-template-columns: 1.25rem 1fr 1fr 5rem;
+  grid-template-columns: 1.25rem 1fr 6.5rem;
   gap: $element-inner-spacing;
-  justify-items: start;
 }
 
+// ---------> INDICATORS
+
 .indicators {
-  grid-area: ind;
+  grid-area: indicators;
   width: 100%;
   height: 100%;
   display: flex;
@@ -18,72 +19,46 @@
   justify-content: space-evenly;
 }
 
-.indRoll,
-.indDelay,
-.indNegative {
+.indicatorRoll,
+.indicatorDelay,
+.indicatorNegative {
   background-color: $black-10;
 }
 
-.indRoll,
-.indRollActive,
-.indDelay,
-.indDelayActive {
+.indicatorRoll,
+.indicatorDelay {
   margin: 0 auto;
-  border-radius: 6px;
-  width: 12px;
-  height: 12px;
+  border-radius: 5px;
+  width: 10px;
+  height: 10px;
 }
 
-.indRollActive {
+.indicatorRoll[data-active='true'] {
   background-color: $ontime-roll;
 }
 
-.indNegative,
-.indNegativeActive {
-  margin: 0 auto;
-  width: 90%;
-  height: 0.25rem;
-}
-
-.indNegativeActive {
-  background-color: $playback-negative;
-}
-
-.indDelayActive {
+.indicatorDelay[data-active='true'] {
   background-color: $ontime-delay;
 }
 
-.btn {
-  grid-area: btn;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  width: 100%;
-  gap: $element-inner-spacing;
+.indicatorNegative {
+  margin: 0 auto;
+  width: 90%;
+  height: 0.25rem;
+
+  &[data-active='true'] {
+    background-color: $playback-negative;
+  }
 }
 
-.minus {
-  grid-area: min;
-  display: flex;
-  flex-direction: column;
-}
+// ---------> LABELS
 
-.start,
-.finish,
-.roll {
+.status {
+  grid-area: status;
   height: 1.5rem;
-}
-
-.start {
-  grid-area: sta;
-}
-
-.finish {
-  grid-area: fin;
-}
-
-.roll {
-  grid-area: 2 / 2 / 2 / 4 ;
+  display: flex;
+  gap: $section-spacing;
+  margin-left: 1.5rem;
 }
 
 .tag {

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -1,10 +1,9 @@
+import { PropsWithChildren } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import { Playback } from 'ontime-types';
 import { dayInMs, millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils';
 
-import { setPlayback, useTimer } from '../../../../common/hooks/useSocket';
-import { tooltipDelayMid } from '../../../../ontimeConfig';
-import TapButton from '../tap-button/TapButton';
+import { useTimer } from '../../../../common/hooks/useSocket';
 import TimerDisplay from '../timer-display/TimerDisplay';
 
 import style from './PlaybackTimer.module.scss';
@@ -13,8 +12,30 @@ interface PlaybackTimerProps {
   playback: Playback;
 }
 
-export default function PlaybackTimer(props: PlaybackTimerProps) {
-  const { playback } = props;
+function resolveAddedTimeLabel(addedTime: number) {
+  function resolveClosestUnit(ms: number) {
+    if (ms < 6000) {
+      return `${millisToSeconds(ms)} seconds`;
+    } else if (ms < 12000) {
+      return '1 minute';
+    } else {
+      return `${millisToMinutes(ms)} minutes`;
+    }
+  }
+
+  if (addedTime > 0) {
+    return `Added ${resolveClosestUnit(addedTime)}`;
+  }
+
+  if (addedTime < 0) {
+    return `Removed ${resolveClosestUnit(addedTime)}`;
+  }
+
+  return '';
+}
+
+export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProps>) {
+  const { playback, children } = props;
   const timer = useTimer();
 
   const started = millisToString(timer.startedAt);
@@ -22,88 +43,43 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
   const finish = millisToString(expectedFinish);
 
   const isRolling = playback === Playback.Roll;
-  const isStopped = playback === Playback.Stop;
   const isWaiting = timer.secondaryTimer !== null && timer.secondaryTimer > 0 && timer.current === null;
-  const disableButtons = isStopped || isRolling;
   const isOvertime = timer.current !== null && timer.current < 0;
   const hasAddedTime = Boolean(timer.addedTime);
 
   const rollLabel = isRolling ? 'Roll mode active' : '';
 
-  const resolveAddedTimeLabel = () => {
-    function resolveClosestUnit(ms: number) {
-      if (ms < 6000) {
-        return `${millisToSeconds(ms)} seconds`;
-      } else if (ms < 12000) {
-        return '1 minute';
-      } else {
-        return `${millisToMinutes(ms)} minutes`;
-      }
-    }
-
-    if (timer.addedTime > 0) {
-      return `Added ${resolveClosestUnit(timer.addedTime)}`;
-    }
-
-    if (timer.addedTime < 0) {
-      return `Removed ${resolveClosestUnit(timer.addedTime)}`;
-    }
-
-    return '';
-  };
-
-  const addedTimeLabel = resolveAddedTimeLabel();
+  const addedTimeLabel = resolveAddedTimeLabel(timer.addedTime);
 
   return (
     <div className={style.timeContainer}>
       <div className={style.indicators}>
         <Tooltip label={rollLabel}>
-          <div className={isRolling ? style.indRollActive : style.indRoll} />
+          <div className={style.indicatorRoll} data-active={isRolling} />
         </Tooltip>
-        <div className={isOvertime ? style.indNegativeActive : style.indNegative} />
+        <div className={style.indicatorNegative} data-active={isOvertime} />
         <Tooltip label={addedTimeLabel}>
-          <div className={hasAddedTime ? style.indDelayActive : style.indDelay} />
+          <div className={style.indicatorDelay} data-active={hasAddedTime} />
         </Tooltip>
       </div>
       <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
-      {isWaiting ? (
-        <div className={style.roll}>
+      <div className={style.status}>
+        {isWaiting ? (
           <span className={style.rolltag}>Roll: Countdown to start</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}>Expect end</span>
-            <span className={style.time}>{finish}</span>
-          </div>
-        </>
-      )}
-      <div className={style.btn}>
-        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.addTime(-60)} disabled={disableButtons} aspect='square'>
-            -1
-          </TapButton>
-        </Tooltip>
-        <Tooltip label='Add 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.addTime(60)} disabled={disableButtons} aspect='square'>
-            +1
-          </TapButton>
-        </Tooltip>
-        <Tooltip label='Remove 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.addTime(-5 * 60)} disabled={disableButtons} aspect='square'>
-            -5
-          </TapButton>
-        </Tooltip>
-        <Tooltip label='Add 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.addTime(+5 * 60)} disabled={disableButtons} aspect='square'>
-            +5
-          </TapButton>
-        </Tooltip>
+        ) : (
+          <>
+            <span className={style.start}>
+              <span className={style.tag}>Started at</span>
+              <span className={style.time}>{started}</span>
+            </span>
+            <span className={style.finish}>
+              <span className={style.tag}>Expect end</span>
+              <span className={style.time}>{finish}</span>
+            </span>
+          </>
+        )}
       </div>
+      {children}
     </div>
   );
 }