feat: timer overview shows waiting timer

apps/client/src/features/control/playback/PlaybackControl.tsx

@@ -1,5 +1,3 @@
-import { Playback } from 'ontime-types';
-
 import { usePlaybackControl } from '../../../common/hooks/useSocket';
 
 import AddTime from './add-time/AddTime';
@@ -14,7 +12,7 @@ export default function PlaybackControl() {
 
   return (
     <div className={style.mainContainer}>
-      <PlaybackTimer playback={data.playback as Playback}>
+      <PlaybackTimer>
         <AddTime playback={data.playback} />
       </PlaybackTimer>
       <PlaybackButtons

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

@@ -11,10 +11,6 @@ import TimerDisplay from '../timer-display/TimerDisplay';
 
 import style from './PlaybackTimer.module.scss';
 
-interface PlaybackTimerProps {
-  playback: Playback;
-}
-
 function resolveAddedTimeLabel(addedTime: number) {
   if (addedTime > 0) {
     return `Added ${formatDuration(addedTime, false)}`;
@@ -27,11 +23,10 @@ function resolveAddedTimeLabel(addedTime: number) {
   return '';
 }
 
-export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProps>) {
-  const { playback, children } = props;
+export default function PlaybackTimer({ children }: PropsWithChildren) {
   const timer = useTimer();
 
-  const isRolling = playback === Playback.Roll;
+  const isRolling = timer.playback === Playback.Roll;
   const isWaiting = timer.phase === TimerPhase.Pending;
   const isOvertime = timer.phase === TimerPhase.Overtime;
   const hasAddedTime = Boolean(timer.addedTime);
@@ -52,7 +47,7 @@ export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProp
         {isWaiting ? (
           <span className={style.rolltag}>Roll: Countdown to start</span>
         ) : (
-          <RunningStatus startedAt={timer.startedAt} expectedFinish={timer.expectedFinish} playback={playback} />
+          <RunningStatus startedAt={timer.startedAt} expectedFinish={timer.expectedFinish} playback={timer.playback} />
         )}
       </div>
       {children}
@@ -65,9 +60,7 @@ interface RunningStatusProps {
   expectedFinish: MaybeNumber;
   playback: Playback;
 }
-function RunningStatus(props: RunningStatusProps) {
-  const { startedAt, expectedFinish, playback } = props;
-
+function RunningStatus({ startedAt, expectedFinish, playback }: RunningStatusProps) {
   if (playback === Playback.Stop) {
     return <StoppedStatus />;
   }