feat: operator view

apps/client/src/common/components/playback-icon/PlaybackIcon.tsx

@@ -8,10 +8,11 @@ import { tooltipDelayFast } from '../../../ontimeConfig';
 
 interface PlaybackIconProps {
   state: Playback;
+  className?: string;
 }
 
 export default function PlaybackIcon(props: PlaybackIconProps) {
-  const { state } = props;
+  const { state, className } = props;
 
   // if timer is Pause or Armed
   let label = 'Timer Paused';
@@ -30,7 +31,7 @@ export default function PlaybackIcon(props: PlaybackIconProps) {
 
   return (
     <Tooltip openDelay={tooltipDelayFast} label={label} shouldWrapChildren>
-      <Icon />
+      <Icon className={className} />
     </Tooltip>
   );
 }

apps/client/src/features/operator/operator-event/OperatorEvent.module.scss

@@ -22,7 +22,7 @@
 
   .title {
     font-size: 1.5rem;
-    letter-spacing: 0.02px;
+    letter-spacing: 0.5px;
   }
 
   .cue {
@@ -52,7 +52,7 @@
   font-weight: 500;
   color: $orange-500;
 
-  letter-spacing: 0.02px;
+  letter-spacing: 0.5px;
   height: fit-content;
 
   transition-property: height;

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

@@ -8,13 +8,19 @@
   background-color: $gray-1350;
   z-index: 2;
 
-  padding: 0.5rem;
+  padding: 0.5rem 1rem;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   border-top: 1px solid $white-10;
   box-shadow: $large-bottom-drawer-shadow;
 }
 
+.playbackIcon {
+  font-size: 2rem;
+  color: $gray-700;
+}
+
 .column {
   display: flex;
   flex-direction: column;
@@ -25,10 +31,21 @@
 .clock {
   display: flex;
   gap: 1.5rem;
-  margin-right: 1rem;
 }
 
 .label {
   font-size: 0.75rem;
-  color: gray;
+  color: $gray-700;
+}
+
+.timer {
+  letter-spacing: 0.5px;
+}
+
+// tablet
+@media (min-width: $min-tablet) {
+  .clock {
+    display: flex;
+    gap: 1.5rem;
+  }
 }

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

@@ -2,6 +2,7 @@ import { OntimeEvent, Playback } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
+import useMediaQuery from '../../../common/context/useMediaQuery';
 import { useTimer } from '../../../common/hooks/useSocket';
 import { formatTime } from '../../../common/utils/time';
 
@@ -17,6 +18,7 @@ export default function StatusBar({
   selectedEventId: string | null;
 }) {
   const timer = useTimer();
+  const isMobile = useMediaQuery('(max-width: 450px)');
 
   const getTimeEnd = () => {
     if (lastEvent === null) {
@@ -37,16 +39,18 @@ export default function StatusBar({
 
   return (
     <div className={styles.statusBar}>
-      <PlaybackIcon state={playback} />
+      <PlaybackIcon state={playback} className={styles.playbackIcon} />
       <div className={styles.clock}>
         <div className={styles.column}>
           <span className={styles.label}>Time now</span>
           <span className={styles.timer}>{timeNow}</span>
         </div>
-        <div className={styles.column}>
+        {!isMobile && (
-          <span className={styles.label}>Time to end</span>
+          <div className={styles.column}>
-          <span className={styles.timer}>{getTimeEnd()}</span>
+            <span className={styles.label}>Last end</span>
-        </div>
+            <span className={styles.timer}>{getTimeEnd()}</span>
+          </div>
+        )}
         <div className={styles.column}>
           <span className={styles.label}>Elapsed time</span>
           <span className={styles.timer}>{elapsedTime}</span>