many hotfixes (#465)

* style: disable menu bar in run mode

* fix: external devices in dev mode

* fix: add missing elements to translations

* ux: improve translation strings

* refactor: improve typing

* style: blink on event change

* refactor: param options is object

---------

Co-authored-by: Hannes Rüger <hannesrueger@gmx.de>

apps/client/src/features/menu/MenuBar.tsx

@@ -107,6 +107,7 @@ const MenuBar = (props: MenuBarProps) => {
       <div className={style.gap} />
       <TooltipActionBtn
         {...buttonStyle}
+        isDisabled={appMode === AppMode.Run}
         icon={<IoColorWand />}
         className={isQuickStartOpen ? style.open : ''}
         clickHandler={onQuickStartOpen}
@@ -115,6 +116,7 @@ const MenuBar = (props: MenuBarProps) => {
       />
       <TooltipActionBtn
         {...buttonStyle}
+        isDisabled={appMode === AppMode.Run}
         icon={<IoPushOutline />}
         className={isUploadOpen ? style.open : ''}
         clickHandler={onUploadOpen}
@@ -125,6 +127,7 @@ const MenuBar = (props: MenuBarProps) => {
       <TooltipActionBtn
         {...buttonStyle}
         icon={<IoSaveOutline />}
+        isDisabled={appMode === AppMode.Run}
         clickHandler={downloadRundown}
         tooltip='Export project file'
         aria-label='Export project file'
@@ -154,6 +157,7 @@ const MenuBar = (props: MenuBarProps) => {
       <div className={style.gap} />
       <TooltipActionBtn
         {...buttonStyle}
+        isDisabled={appMode === AppMode.Run}
         icon={isIntegrationOpen ? <IoExtensionPuzzle /> : <IoExtensionPuzzleOutline />}
         className={isIntegrationOpen ? style.open : ''}
         clickHandler={onIntegrationOpen}
@@ -163,6 +167,7 @@ const MenuBar = (props: MenuBarProps) => {
       />
       <TooltipActionBtn
         {...buttonStyle}
+        isDisabled={appMode === AppMode.Run}
         icon={<IoSettingsOutline />}
         className={isSettingsOpen ? style.open : ''}
         clickHandler={onSettingsOpen}

apps/client/src/features/viewers/backstage/Backstage.scss

@@ -1,4 +1,5 @@
 @use '../../../theme/viewerDefs' as *;
+@use '../../../theme/v2Styles' as *;
 
 .backstage {
   margin: 0;
@@ -86,6 +87,10 @@
     background-color: var(--card-background-color-override, $viewer-card-bg-color);
     padding: 16px 24px;
     border-radius: 8px;
+
+    &.blink {
+      animation: blink 0.5s ease-in-out 3;
+    }
   }
 
   .timer-group {
@@ -119,7 +124,7 @@
     grid-area: schedule;
     overflow: hidden;
     height: 100%;
-    margin-left: clamp(16px, 5vw, 64px);;
+    margin-left: clamp(16px, 5vw, 64px);
   }
 
   .schedule-nav-container {
@@ -143,9 +148,20 @@
     }
 
     .qr {
-      margin-left: clamp(16px, 5vw, 64px);;
+      margin-left: clamp(16px, 5vw, 64px);
       padding: 4px;
       background-color: white;
     }
   }
 }
+
+/* =================== AMIMATION ===================*/
+
+@keyframes blink {
+  0% {
+    background-color: var(--card-background-color-blink-override, $playback-start);
+  }
+  20% {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+  }
+}

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
 import { EventData, Message, OntimeEvent, ViewSettings } from 'ontime-types';
@@ -43,12 +43,24 @@ export default function Backstage(props: BackstageProps) {
   const { isMirrored, publ, title, time, backstageEvents, selectedId, general, viewSettings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
+  const [blinkClass, setBlinkClass] = useState(false);
 
   // Set window title
   useEffect(() => {
     document.title = 'ontime - Backstage Screen';
   }, []);
 
+  // blink on change
+  useEffect(() => {
+    setBlinkClass(false);
+
+    const timer = setTimeout(() => {
+      setBlinkClass(true);
+    }, 10);
+
+    return () => clearTimeout(timer);
+  }, [selectedId]);
+
   // defer rendering until we load stylesheets
   if (!shouldRender) {
     return null;
@@ -57,7 +69,9 @@ export default function Backstage(props: BackstageProps) {
   const clock = formatTime(time.clock, formatOptions);
   const startedAt = formatTime(time.startedAt, formatOptions);
   const isNegative = (time.current ?? 0) < 0;
-  const expectedFinish = isNegative ? 'In overtime' : formatTime(time.expectedFinish, formatOptions);
+  const expectedFinish = isNegative
+    ? getLocalizedString('countdown.overtime')
+    : formatTime(time.expectedFinish, formatOptions);
 
   const qrSize = Math.max(window.innerWidth / 15, 128);
   const filteredEvents = getEventsWithDelay(backstageEvents);
@@ -99,7 +113,7 @@ export default function Backstage(props: BackstageProps) {
         <AnimatePresence>
           {title.showNow && (
             <motion.div
-              className='event now'
+              className={`event now ${blinkClass ? 'blink' : ''}`}
               key='now'
               variants={titleVariants}
               initial='hidden'