From e299ca2cd621ec328c4a3dd057744fe3c2917900 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Mon, 28 Aug 2023 22:16:09 +0200
Subject: [PATCH] feat: operator view

---
 .../components/playback-icon/PlaybackIcon.tsx |  5 ++--
 .../operator-event/OperatorEvent.module.scss  |  4 ++--
 .../operator/status-bar/StatusBar.module.scss | 23 ++++++++++++++++---
 .../operator/status-bar/StatusBar.tsx         | 14 +++++++----
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/common/components/playback-icon/PlaybackIcon.tsx b/apps/client/src/common/components/playback-icon/PlaybackIcon.tsx
index 7813e94f4..7a2886c3c 100644
--- a/apps/client/src/common/components/playback-icon/PlaybackIcon.tsx
+++ b/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>
   );
 }
diff --git a/apps/client/src/features/operator/operator-event/OperatorEvent.module.scss b/apps/client/src/features/operator/operator-event/OperatorEvent.module.scss
index e0b90604b..da879f742 100644
--- a/apps/client/src/features/operator/operator-event/OperatorEvent.module.scss
+++ b/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;
diff --git a/apps/client/src/features/operator/status-bar/StatusBar.module.scss b/apps/client/src/features/operator/status-bar/StatusBar.module.scss
index f0e5a2be3..7eb5f072a 100644
--- a/apps/client/src/features/operator/status-bar/StatusBar.module.scss
+++ b/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;
+  }
 }
diff --git a/apps/client/src/features/operator/status-bar/StatusBar.tsx b/apps/client/src/features/operator/status-bar/StatusBar.tsx
index 7d0ac0ffd..8c7975026 100644
--- a/apps/client/src/features/operator/status-bar/StatusBar.tsx
+++ b/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}>
-          <span className={styles.label}>Time to end</span>
-          <span className={styles.timer}>{getTimeEnd()}</span>
-        </div>
+        {!isMobile && (
+          <div className={styles.column}>
+            <span className={styles.label}>Last end</span>
+            <span className={styles.timer}>{getTimeEnd()}</span>
+          </div>
+        )}
         <div className={styles.column}>
           <span className={styles.label}>Elapsed time</span>
           <span className={styles.timer}>{elapsedTime}</span>