feat: show progress in op and cuesheet (#605)

apps/client/src/features/operator/follow-button/FollowButton.module.scss

@@ -2,9 +2,11 @@
 @use '../../../../src/theme/v2Styles' as *;
 
 .followButton {
-  position: relative;
-  bottom: 12rem;
-  margin: 0 auto;
+  position: fixed;
+  bottom: 1.5rem;
+  bottom: calc(1.5rem + env(safe-area-inset-bottom));
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 1;
 
   display: flex;

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -15,16 +15,19 @@
   background-color: $gray-1350;
   z-index: 2;
 
-  padding: 0.5rem 1rem;
   border-bottom: 1px solid $white-10;
   box-shadow: $large-top-drawer-shadow;
+}
 
+.timers {
   display: grid;
+  padding: 0.5rem 1rem;
   grid-template-areas:
     "playback timer1B timer2B timer3B";
   grid-template-columns: 1fr auto auto auto;
   column-gap: 1.5rem;
   align-items: center;
+
 }
 
 .playbackIcon {
@@ -83,7 +86,7 @@
 
 // tablet
 @media (min-width: $min-tablet) {
-  .statusBar {
+  .timers {
     grid-template-areas:
     "playback timer1B timer2A timer3A"
     "title    title   timer2B timer3B";
@@ -103,3 +106,7 @@
     display: flex;
   }
 }
+
+.progressOverride {
+  border-radius: 0;
+}

apps/client/src/features/operator/status-bar/StatusBar.tsx

@@ -1,11 +1,9 @@
-import { useMemo } from 'react';
 import { Playback } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
 
-import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
-import { useTimer } from '../../../common/hooks/useSocket';
-import { cx } from '../../../common/utils/styleUtils';
-import { formatTime } from '../../../common/utils/time';
+import useViewSettings from '../../../common/hooks-query/useViewSettings';
+
+import StatusBarProgress from './StatusBarProgress';
+import StatusBarTimers from './StatusBarTimers';
 
 import styles from './StatusBar.module.scss';
 
@@ -22,73 +20,20 @@ interface StatusBarProps {
 export default function StatusBar(props: StatusBarProps) {
   const { projectTitle, playback, selectedEventId, firstStart, firstId, lastEnd, lastId } = props;
 
-  const timer = useTimer();
-
-  const getTimeStart = () => {
-    if (firstStart === undefined) {
-      return '...';
-    }
-
-    if (selectedEventId) {
-      if (firstId === selectedEventId) {
-        return millisToString(timer.expectedFinish);
-      }
-    }
-    return millisToString(firstStart);
-  };
-
-  const getTimeEnd = () => {
-    if (lastEnd === undefined) {
-      return '...';
-    }
-
-    if (selectedEventId) {
-      if (lastId === selectedEventId) {
-        return millisToString(timer.expectedFinish);
-      }
-    }
-    return millisToString(lastEnd);
-  };
-
-  // use user defined format
-  const timeNow = formatTime(timer.clock, {
-    showSeconds: true,
-  });
-
-  const runningTime = millisToString(timer.current);
-  const elapsedTime = millisToString(timer.elapsed);
-
-  const PlaybackIconComponent = useMemo(() => {
-    const isPlaying = playback === Playback.Play || playback === Playback.Roll;
-    const classes = cx([styles.playbackIcon, isPlaying ? styles.active : null]);
-    return <PlaybackIcon state={playback} skipTooltip className={classes} />;
-  }, [playback]);
+  const { data } = useViewSettings();
 
   return (
     <div className={styles.statusBar}>
-      {PlaybackIconComponent}
-      <div className={styles.timeNow}>
-        <span className={styles.label}>Time now</span>
-        <span className={styles.timer}>{timeNow}</span>
-      </div>
-      <div className={styles.elapsedTime}>
-        <span className={styles.label}>Elapsed time</span>
-        <span className={styles.timer}>{elapsedTime}</span>
-      </div>
-      <div className={styles.runningTime}>
-        <span className={styles.label}>Running timer</span>
-        <span className={styles.timer}>{runningTime}</span>
-      </div>
-
-      <span className={styles.title}>{projectTitle}</span>
-      <div className={styles.startTime}>
-        <span className={styles.label}>Scheduled start</span>
-        <span className={styles.timer}>{getTimeStart()}</span>
-      </div>
-      <div className={styles.endTime}>
-        <span className={styles.label}>Scheduled end</span>
-        <span className={styles.timer}>{getTimeEnd()}</span>
-      </div>
+      <StatusBarTimers
+        projectTitle={projectTitle}
+        playback={playback}
+        selectedEventId={selectedEventId}
+        firstStart={firstStart}
+        firstId={firstId}
+        lastEnd={lastEnd}
+        lastId={lastId}
+      />
+      {data && <StatusBarProgress viewSettings={data} />}
     </div>
   );
 }

apps/client/src/features/operator/status-bar/StatusBarProgress.tsx

@@ -0,0 +1,30 @@
+import { ViewSettings } from 'ontime-types';
+
+import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
+import { useTimer } from '../../../common/hooks/useSocket';
+
+import styles from './StatusBar.module.scss';
+
+interface StatusBarProgressProps {
+  viewSettings: ViewSettings;
+}
+
+export default function StatusBarProgress(props: StatusBarProgressProps) {
+  const { viewSettings } = props;
+
+  const timer = useTimer();
+  const totalTime = (timer.duration ?? 0) + (timer.addedTime ?? 0);
+
+  return (
+    <MultiPartProgressBar
+      now={timer.current}
+      complete={totalTime}
+      normalColor={viewSettings.normalColor}
+      warning={viewSettings.warningThreshold}
+      warningColor={viewSettings.warningColor}
+      danger={viewSettings.dangerThreshold}
+      dangerColor={viewSettings.dangerColor}
+      className={styles.progressOverride}
+    />
+  );
+}

apps/client/src/features/operator/status-bar/StatusBarTimers.tsx

@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import { Playback } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+
+import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
+import { useTimer } from '../../../common/hooks/useSocket';
+import { cx } from '../../../common/utils/styleUtils';
+import { formatTime } from '../../../common/utils/time';
+
+import styles from './StatusBar.module.scss';
+
+interface StatusBarTimersProps {
+  projectTitle: string;
+  playback: Playback;
+  selectedEventId: string | null;
+  firstStart?: number;
+  firstId?: string;
+  lastEnd?: number;
+  lastId?: string;
+}
+
+export default function StatusBarTimers(props: StatusBarTimersProps) {
+  const { projectTitle, playback, selectedEventId, firstStart, firstId, lastEnd, lastId } = props;
+
+  const timer = useTimer();
+
+  const getTimeStart = () => {
+    if (firstStart === undefined) {
+      return '...';
+    }
+
+    if (selectedEventId) {
+      if (firstId === selectedEventId) {
+        return millisToString(timer.expectedFinish);
+      }
+    }
+    return millisToString(firstStart);
+  };
+
+  const getTimeEnd = () => {
+    if (lastEnd === undefined) {
+      return '...';
+    }
+
+    if (selectedEventId) {
+      if (lastId === selectedEventId) {
+        return millisToString(timer.expectedFinish);
+      }
+    }
+    return millisToString(lastEnd);
+  };
+
+  const PlaybackIconComponent = useMemo(() => {
+    const isPlaying = playback === Playback.Play || playback === Playback.Roll;
+    const classes = cx([styles.playbackIcon, isPlaying ? styles.active : null]);
+    return <PlaybackIcon state={playback} skipTooltip className={classes} />;
+  }, [playback]);
+
+  // use user defined format
+  const timeNow = formatTime(timer.clock, {
+    showSeconds: true,
+  });
+
+  const runningTime = millisToString(timer.current);
+  const elapsedTime = millisToString(timer.elapsed);
+
+  return (
+    <div className={styles.timers}>
+      {PlaybackIconComponent}
+      <div className={styles.timeNow}>
+        <span className={styles.label}>Time now</span>
+        <span className={styles.timer}>{timeNow}</span>
+      </div>
+      <div className={styles.elapsedTime}>
+        <span className={styles.label}>Elapsed time</span>
+        <span className={styles.timer}>{elapsedTime}</span>
+      </div>
+      <div className={styles.runningTime}>
+        <span className={styles.label}>Running timer</span>
+        <span className={styles.timer}>{runningTime}</span>
+      </div>
+
+      <span className={styles.title}>{projectTitle}</span>
+      <div className={styles.startTime}>
+        <span className={styles.label}>Scheduled start</span>
+        <span className={styles.timer}>{getTimeStart()}</span>
+      </div>
+      <div className={styles.endTime}>
+        <span className={styles.label}>Scheduled end</span>
+        <span className={styles.timer}>{getTimeEnd()}</span>
+      </div>
+    </div>
+  );
+}