refactor: operator design review

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

@@ -1,110 +1,56 @@
-@mixin column {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
 .statusBar {
   position: sticky;
   top: 0;
   width: 100%;
-  background-color: $gray-1350;
   z-index: 2;
 
+  background-color: $gray-1350;
   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;
+  padding-block: 0.75rem 0.5rem;
+  padding-inline: 1rem;
 
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: '. timers clock';
 }
 
-.playbackIcon {
-  grid-area: playback;
-  font-size: 2rem;
-  color: $gray-700;
-
-  &.active {
-    color: $ui-white;
-  }
+.runningTimer {
+  grid-area: timers;
+  display: flex;
+  flex-direction: column;
+  justify-self: center;
+  color: $muted-gray;
 }
 
 .timeNow {
-  grid-area: timer1B;
-  @include column;
-}
-
-.elapsedTime {
-  grid-area: timer2B;
-  @include column;
-}
-
-.runningTime {
-  grid-area: timer3B;
-  @include column;
-}
-
-.title {
-  grid-area: title;
-  font-size: 1.25rem;
-  padding-left: 0.25rem;
-  display: none;
-  line-height: 1.25em;
-}
-
-.startTime {
-  grid-area: timer2A;
-  @include column;
-  display: none;
-}
-
-.endTime {
-  grid-area: timer3A;
-  @include column;
-  display: none;
+  grid-area: clock;
+  display: flex;
+  flex-direction: column;
+  justify-self: right;
 }
 
 .label {
-  font-size: 0.75rem;
+  font-size: calc(1rem - 2px);
   color: $gray-700;
+  line-height: 0.9em;
 }
 
 .timer {
+  font-size: 1.5rem;
   letter-spacing: 0.5px;
+  line-height: 1.5;
 }
 
-// tablet
-@media (min-width: $min-tablet) {
-  .timers {
-    grid-template-areas:
-    "playback timer1B timer2A timer3A"
-    "title    title   timer2B timer3B";
-    row-gap: 0.25rem;
-    column-gap: 2rem;
-  }
-
-  .title {
-    display: block;
-  }
-
-  .startTime {
-    display: flex;
-  }
-
-  .endTime {
-    display: flex;
-  }
+.active {
+  color: $ui-white;
 }
 
 .progressOverride {
+  grid-area: bar;
   height: 1rem;
   --progress-bar-br: 0;
 }

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

@@ -1,5 +1,3 @@
-import { Playback } from 'ontime-types';
-
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
 
 import StatusBarProgress from './StatusBarProgress';
@@ -7,32 +5,12 @@ import StatusBarTimers from './StatusBarTimers';
 
 import styles from './StatusBar.module.scss';
 
-interface StatusBarProps {
-  projectTitle: string;
-  playback: Playback;
-  selectedEventId: string | null;
-  firstStart?: number;
-  firstId?: string;
-  lastEnd?: number;
-  lastId?: string;
-}
-
-export default function StatusBar(props: StatusBarProps) {
-  const { projectTitle, playback, selectedEventId, firstStart, firstId, lastEnd, lastId } = props;
-
+export default function StatusBar() {
   const { data } = useViewSettings();
 
   return (
     <div className={styles.statusBar}>
-      <StatusBarTimers
-        projectTitle={projectTitle}
-        playback={playback}
-        selectedEventId={selectedEventId}
-        firstStart={firstStart}
-        firstId={firstId}
-        lastEnd={lastEnd}
-        lastId={lastId}
-      />
+      <StatusBarTimers />
       {data && <StatusBarProgress viewSettings={data} />}
     </div>
   );

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

@@ -9,8 +9,7 @@ interface StatusBarProgressProps {
   viewSettings: ViewSettings;
 }
 
-export default function StatusBarProgress(props: StatusBarProgressProps) {
-  const { viewSettings } = props;
+export default function StatusBarProgress({ viewSettings }: StatusBarProgressProps) {
   const { current, duration, timeWarning, timeDanger } = useProgressData();
 
   return (

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

@@ -1,7 +1,5 @@
-import { useMemo } from 'react';
-import { MaybeNumber, Playback } from 'ontime-types';
+import { isPlaybackActive } from 'ontime-utils';
 
-import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
 import { useClock, useTimer } from '../../../common/hooks/useSocket';
 import { cx } from '../../../common/utils/styleUtils';
 import ClockTime from '../../viewers/common/clock-time/ClockTime';
@@ -9,79 +7,27 @@ import RunningTime from '../../viewers/common/running-time/RunningTime';
 
 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;
-
+export default function StatusBarTimers() {
   const timer = useTimer();
   const { clock } = useClock();
 
-  const getTimeStart = (): MaybeNumber => {
-    if (firstStart === undefined) {
-      return null;
-    }
-
-    if (selectedEventId) {
-      if (firstId === selectedEventId) {
-        return timer.expectedFinish;
-      }
-    }
-    return firstStart;
-  };
-
-  const getTimeEnd = (): MaybeNumber => {
-    if (lastEnd === undefined) {
-      return null;
-    }
-
-    if (selectedEventId) {
-      if (lastId === selectedEventId) {
-        return timer.expectedFinish;
-      }
-    }
-    return 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]);
+  const playbackActive = isPlaybackActive(timer.playback);
 
   return (
     <div className={styles.timers}>
-      {PlaybackIconComponent}
+      <div className={styles.runningTimer}>
+        <span className={styles.label}>Running timer</span>
+        <RunningTime
+          className={cx([styles.timer, playbackActive && styles.active])}
+          value={timer.current}
+          hideLeadingZero
+        />
+      </div>
+
       <div className={styles.timeNow}>
         <span className={styles.label}>Time now</span>
         <ClockTime className={styles.timer} value={clock} />
       </div>
-      <div className={styles.elapsedTime}>
-        <span className={styles.label}>Elapsed time</span>
-        <RunningTime className={styles.timer} value={timer.elapsed} />
-      </div>
-      <div className={styles.runningTime}>
-        <span className={styles.label}>Running timer</span>
-        <RunningTime className={styles.timer} value={timer.current} />
-      </div>
-
-      <span className={styles.title}>{projectTitle}</span>
-      <div className={styles.startTime}>
-        <span className={styles.label}>Scheduled start</span>
-        <ClockTime className={styles.timer} value={getTimeStart()} />
-      </div>
-      <div className={styles.endTime}>
-        <span className={styles.label}>Scheduled end</span>
-        <ClockTime className={styles.timer} value={getTimeEnd()} />
-      </div>
     </div>
   );
 }