V3 feedback (#866)

* refactor: rename settings panel

* style: typo

* style: fix blackout position

* fix: offset time in time-to-end

* refactor: operator is protected

* style: tweaks to pincode

* refactor: close params editor on submit

* refactor: same navigation in all pages

* refactor: use cached response

.eslintrc

@@ -19,6 +19,7 @@
   "rules": {
     "no-useless-concat": "warn",
     "prefer-template": "warn",
+    "no-throw-literal": "error",
     "no-console": [
       "warn",
       {

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -45,8 +45,8 @@ $button-size: 3rem;
 
 .link {
   @include action-link;
-  justify-content: space-between;
   padding: 0.75rem 1.5rem;
+  gap: 0.5rem;
 
   &:hover {
     background-color: $menu-hover-bg;
@@ -69,7 +69,7 @@ $button-size: 3rem;
 }
 
 .linkIcon {
-  display: inline-block;
+  margin-left: auto;
   transform: rotate(45deg);
 }
 

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -1,16 +1,43 @@
-import { memo, PropsWithChildren, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { useFullscreen } from '@mantine/hooks';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoContract } from '@react-icons/all-files/io5/IoContract';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
+import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
+import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
+import { useViewOptionsStore } from '../../stores/viewOptions';
+import { isKeyEnter } from '../../utils/keyEvent';
+
+import RenameClientModal from './rename-client-modal/RenameClientModal';
+
+import style from './NavigationMenu.module.scss';
 
 interface NavigationMenuProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
-function NavigationMenu(props: PropsWithChildren<NavigationMenuProps>) {
+function NavigationMenu(props: NavigationMenuProps) {
-  const { children, isOpen, onClose } = props;
+  const { isOpen, onClose } = props;
+
+  const { isOpen: isRenameOpen, onOpen: onRenameOpen, onClose: onRenameClose } = useDisclosure();
+
+  const { fullscreen, toggle } = useFullscreen();
+  const { toggleMirror } = useViewOptionsStore();
 
   const menuRef = useRef<HTMLDivElement | null>(null);
 
@@ -18,6 +45,7 @@ function NavigationMenu(props: PropsWithChildren<NavigationMenuProps>) {
 
   return createPortal(
     <div id='navigation-menu-portal' ref={menuRef}>
+      <RenameClientModal isOpen={isRenameOpen} onClose={onRenameClose} />
       <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
         <DrawerOverlay />
         <DrawerContent>
@@ -25,7 +53,81 @@ function NavigationMenu(props: PropsWithChildren<NavigationMenuProps>) {
             <DrawerCloseButton size='lg' />
             Ontime
           </DrawerHeader>
-          <DrawerBody padding={0}>{children}</DrawerBody>
+          <DrawerBody padding={0}>
+            <div className={style.buttonsContainer}>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={toggle}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && toggle();
+                }}
+              >
+                Toggle Fullscreen
+                {fullscreen ? <IoContract /> : <IoExpand />}
+              </div>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={() => toggleMirror()}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && toggleMirror();
+                }}
+              >
+                Flip Screen
+                <IoSwapVertical />
+              </div>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={onRenameOpen}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && onRenameOpen();
+                }}
+              >
+                Rename Client
+              </div>
+            </div>
+            <hr className={style.separator} />
+            <Link
+              to='/editor'
+              className={`${style.link} ${location.pathname === '/editor' ? style.current : ''}`}
+              tabIndex={0}
+            >
+              <IoLockClosedOutline />
+              Editor
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <Link
+              to='/cuesheet'
+              className={`${style.link} ${location.pathname === '/cuesheet' ? style.current : ''}`}
+              tabIndex={0}
+            >
+              <IoLockClosedOutline />
+              Cuesheet
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <Link to='/op' className={`${style.link} ${location.pathname === '/op' ? style.current : ''}`} tabIndex={0}>
+              <IoLockClosedOutline />
+              Operator
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <hr className={style.separator} />
+            {navigatorConstants.map((route) => (
+              <Link
+                key={route.url}
+                to={route.url}
+                className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
+                tabIndex={0}
+              >
+                {route.label}
+                <IoArrowUp className={style.linkIcon} />
+              </Link>
+            ))}
+          </DrawerBody>
         </DrawerContent>
       </Drawer>
     </div>,

apps/client/src/common/components/navigation-menu/ProductionNavigationMenu.tsx

@@ -1,19 +1,7 @@
 import { memo } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { useDisclosure } from '@chakra-ui/react';
-import { useFullscreen } from '@mantine/hooks';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-import { IoContract } from '@react-icons/all-files/io5/IoContract';
-import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 
-import { navigatorConstants } from '../../../viewerConfig';
-import { isKeyEnter } from '../../utils/keyEvent';
-
-import RenameClientModal from './rename-client-modal/RenameClientModal';
 import NavigationMenu from './NavigationMenu';
 
-import style from './NavigationMenu.module.scss';
-
 interface ProductionNavigationMenuProps {
   isMenuOpen: boolean;
   onMenuClose: () => void;
@@ -21,73 +9,8 @@ interface ProductionNavigationMenuProps {
 
 function ProductionNavigationMenu(props: ProductionNavigationMenuProps) {
   const { isMenuOpen, onMenuClose } = props;
-  const location = useLocation();
-  const { fullscreen, toggle } = useFullscreen();
-  const { isOpen, onOpen, onClose } = useDisclosure();
 
-  return (
+  return <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />;
-    <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose}>
-      <RenameClientModal isOpen={isOpen} onClose={onClose} />
-      <div className={style.buttonsContainer}>
-        <div
-          className={style.link}
-          tabIndex={0}
-          role='button'
-          onClick={toggle}
-          onKeyDown={(event) => {
-            isKeyEnter(event) && toggle();
-          }}
-        >
-          Toggle Fullscreen
-          {fullscreen ? <IoContract /> : <IoExpand />}
-        </div>
-        <div
-          className={style.link}
-          tabIndex={0}
-          role='button'
-          onClick={onOpen}
-          onKeyDown={(event) => {
-            isKeyEnter(event) && onOpen();
-          }}
-        >
-          Rename Client
-        </div>
-      </div>
-      <hr className={style.separator} />
-      <Link
-        to='/editor'
-        className={`${style.link} ${location.pathname === '/editor' ? style.current : ''}`}
-        tabIndex={0}
-      >
-        Editor
-        <IoArrowUp className={style.linkIcon} />
-      </Link>
-      <Link
-        to='/cuesheet'
-        className={`${style.link} ${location.pathname === '/cuesheet' ? style.current : ''}`}
-        tabIndex={0}
-      >
-        Cuesheet
-        <IoArrowUp className={style.linkIcon} />
-      </Link>
-      <Link to='/op' className={`${style.link} ${location.pathname === '/op' ? style.current : ''}`} tabIndex={0}>
-        Operator
-        <IoArrowUp className={style.linkIcon} />
-      </Link>
-      <hr className={style.separator} />
-      {navigatorConstants.map((route) => (
-        <Link
-          key={route.url}
-          to={route.url}
-          className={`${style.link} ${route.url === location.pathname ? style.current : ''}`}
-          tabIndex={0}
-        >
-          {route.label}
-          <IoArrowUp className={style.linkIcon} />
-        </Link>
-      ))}
-    </NavigationMenu>
-  );
 }
 
 export default memo(ProductionNavigationMenu);

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -1,28 +1,12 @@
 import { memo, useCallback } from 'react';
-import { Link, useLocation, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useDisclosure } from '@chakra-ui/react';
-import { useFullscreen } from '@mantine/hooks';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-import { IoContract } from '@react-icons/all-files/io5/IoContract';
-import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
-import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
-import { navigatorConstants } from '../../../viewerConfig';
-import { useViewOptionsStore } from '../../stores/viewOptions';
-import { isKeyEnter } from '../../utils/keyEvent';
-
-import RenameClientModal from './rename-client-modal/RenameClientModal';
 import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
 
-import style from './NavigationMenu.module.scss';
-
 function ViewNavigationMenu() {
-  const location = useLocation();
-  const { fullscreen, toggle } = useFullscreen();
-  const { toggleMirror } = useViewOptionsStore();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { isOpen: isRenameOpen, onOpen: onRenameOpen, onClose: onRenameClose } = useDisclosure();
   const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
 
   const showEditFormDrawer = useCallback(() => {
@@ -35,58 +19,7 @@ function ViewNavigationMenu() {
   return (
     <>
       <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
-      <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose}>
+      <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />
-        <RenameClientModal isOpen={isRenameOpen} onClose={onRenameClose} />
-        <div className={style.buttonsContainer}>
-          <div
-            className={style.link}
-            tabIndex={0}
-            role='button'
-            onClick={toggle}
-            onKeyDown={(event) => {
-              isKeyEnter(event) && toggle();
-            }}
-          >
-            Toggle Fullscreen
-            {fullscreen ? <IoContract /> : <IoExpand />}
-          </div>
-          <div
-            className={style.link}
-            tabIndex={0}
-            role='button'
-            onClick={() => toggleMirror()}
-            onKeyDown={(event) => {
-              isKeyEnter(event) && toggleMirror();
-            }}
-          >
-            Flip Screen
-            <IoSwapVertical />
-          </div>
-          <div
-            className={style.link}
-            tabIndex={0}
-            role='button'
-            onClick={onRenameOpen}
-            onKeyDown={(event) => {
-              isKeyEnter(event) && onRenameOpen();
-            }}
-          >
-            Rename Client
-          </div>
-        </div>
-        <hr className={style.separator} />
-        {navigatorConstants.map((route) => (
-          <Link
-            key={route.url}
-            to={route.url}
-            className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
-            tabIndex={0}
-          >
-            {route.label}
-            <IoArrowUp className={style.linkIcon} />
-          </Link>
-        ))}
-      </NavigationMenu>
     </>
   );
 }

apps/client/src/common/components/protect-route/PinPage.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { HStack, IconButton, PinInput, PinInputField } from '@chakra-ui/react';
+import { IconButton, PinInput, PinInputField } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 
 import style from './ProtectRoute.module.scss';
@@ -39,8 +39,8 @@ export default function PinPage(props: PinPageProps) {
 
   return (
     <div className={style.container}>
-      {`Ontime ${permission || ''}`}
+      {`Ontime ${permission}`}
-      <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
+      <div className={failed ? style.pin__failed : style.pin}>
         <PinInput
           type='alphanumeric'
           size='lg'
@@ -57,8 +57,15 @@ export default function PinPage(props: PinPageProps) {
           <PinInputField />
           <PinInputField />
         </PinInput>
-        <IconButton aria-label='Enter' size='lg' isRound icon={<IoCheckmark />} onClick={validate} />
+        <IconButton
-      </HStack>
+          variant='ontime-filled'
+          aria-label='Enter'
+          size='lg'
+          isRound
+          icon={<IoCheckmark />}
+          onClick={validate}
+        />
+      </div>
     </div>
   );
 }

apps/client/src/common/components/protect-route/ProtectRoute.module.scss

@@ -1,27 +1,31 @@
 .container {
-  display: grid;
+  display: flex;
-  place-content: center;
+  flex-direction: column;
-  height: 100vh;
+  align-items: center;
-  padding-bottom: 30vh;
+  padding-top: 25vh;
 
-  background: $bg-container-l1;
   color: $ontime-color;
-  font-family: $ontime-font-family;
   font-weight: 200;
-  text-align: center;
+  font-size: 3rem;
-  font-size: 3vw;
 }
 
 .pin,
 .pin__failed {
-  padding: 20px;
+  display: flex;
+  gap: 0.125em;
+  padding-block: 0.5em;
 
   input {
-    border-radius: 50%;
+    border-radius: 99px;
+    border-color: $gray-500;
+
+    &:hover {
+      border-color: $blue-500;
+    }
   }
 
   button {
-    margin-left: 20px;
+    margin-left: 1em;
   }
 }
 
@@ -33,9 +37,9 @@
 
 @keyframes colourFade {
   from {
-    background: $action-blue;
+    background: $red-500;
   }
   to {
-    background: rgba($action-blue, 0);
+    background: rgba($red-500, 0);
   }
 }

apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss

@@ -1,14 +1,9 @@
 .drawerFooter {
   display: flex;
-  justify-content: start;
+  justify-content: end;
   gap: $section-spacing;
 
-  button[type='reset'] {
+  button {
-    padding: 0 2em;
-    margin-right: auto;
-  }
-
-  button[type='submit'] {
     padding: 0 2em;
   }
 }
@@ -16,6 +11,9 @@
 .label {
   font-size: $inner-section-text-size;
   color: $label-gray;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem
 }
 
 .columnSection {

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -52,15 +52,16 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
     }
   }, [searchParams, onOpen]);
 
-  const onCloseWithoutSaving = () => {
+  const handleClose = () => {
-    onClose();
-
     searchParams.delete('edit');
     setSearchParams(searchParams);
+
+    onClose();
   };
 
   const resetParams = () => {
     setSearchParams();
+    onClose();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -69,10 +70,12 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
     setSearchParams(newSearchParams);
+
+    handleClose();
   };
 
   return (
-    <Drawer isOpen={isOpen} placement='right' onClose={onCloseWithoutSaving} variant='ontime' size='lg'>
+    <Drawer isOpen={isOpen} placement='right' onClose={handleClose} variant='ontime' size='lg'>
       <DrawerOverlay />
       <DrawerContent>
         <DrawerHeader>
@@ -96,10 +99,7 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
 
         <DrawerFooter className={style.drawerFooter}>
           <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
-            Reset
+            Reset to default
-          </Button>
-          <Button variant='ontime-subtle' onClick={onCloseWithoutSaving}>
-            Cancel
           </Button>
           <Button variant='ontime-filled' form='edit-params-form' type='submit'>
             Save

apps/client/src/common/hooks-query/useCustomFields.ts

@@ -11,7 +11,7 @@ export default function useCustomFields() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: CUSTOM_FIELDS,
     queryFn: getCustomFields,
-    placeholderData: placeholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchInterval,

apps/client/src/common/hooks-query/useHttpSettings.ts

@@ -11,14 +11,13 @@ export function useHttpSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: HTTP_SETTINGS,
     queryFn: getHTTP,
-    placeholderData: httpPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt: number) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
     networkMode: 'always',
   });
 
-  // we need to jump through some hoops because of the type op port
   return { data: data ?? httpPlaceholder, status, isFetching, isError, refetch };
 }
 

apps/client/src/common/hooks-query/useInfo.ts

@@ -10,7 +10,7 @@ export default function useInfo() {
   const { data, status, isError, refetch, isFetching } = useQuery<GetInfo>({
     queryKey: APP_INFO,
     queryFn: getInfo,
-    placeholderData: ontimePlaceholderInfo,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

apps/client/src/common/hooks-query/useOscSettings.ts

@@ -11,7 +11,7 @@ export default function useOscSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: OSC_SETTINGS,
     queryFn: getOSC,
-    placeholderData: oscPlaceholderSettings,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt: number) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

apps/client/src/common/hooks-query/useProjectData.ts

@@ -9,7 +9,7 @@ export default function useProjectData() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: PROJECT_DATA,
     queryFn: getProjectData,
-    placeholderData: projectDataPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

apps/client/src/common/hooks-query/useProjectList.ts

@@ -14,7 +14,7 @@ export function useProjectList() {
   const { data, status, refetch } = useQuery({
     queryKey: PROJECT_LIST,
     queryFn: getProjects,
-    placeholderData: placeholderProjectList,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt: number) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

apps/client/src/common/hooks-query/useRundown.ts

@@ -13,7 +13,7 @@ export default function useRundown() {
   const { data, status, isError, refetch, isFetching } = useQuery<RundownCached>({
     queryKey: RUNDOWN,
     queryFn: fetchNormalisedRundown,
-    placeholderData: cachedRundownPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchInterval,

apps/client/src/common/hooks-query/useSettings.ts

@@ -10,7 +10,7 @@ export default function useSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: APP_SETTINGS,
     queryFn: getSettings,
-    placeholderData: ontimePlaceholderSettings,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

apps/client/src/common/hooks-query/useUrlPresets.ts

@@ -8,7 +8,7 @@ export default function useUrlPresets() {
   const { data, status, isError, refetch } = useQuery({
     queryKey: URL_PRESETS,
     queryFn: getUrlPresets,
-    placeholderData: [],
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

apps/client/src/common/hooks-query/useViewSettings.ts

@@ -9,12 +9,12 @@ export default function useViewSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: VIEW_SETTINGS,
     queryFn: getView,
-    placeholderData: viewsSettingsPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch, isFetching };
+  return { data: data ?? viewsSettingsPlaceholder, status, isError, refetch, isFetching };
 }

apps/client/src/features/app-settings/panel/general-panel/GeneralPanel.tsx

@@ -13,7 +13,7 @@ export default function GeneralPanel({ location }: PanelBaseProps) {
 
   return (
     <>
-      <Panel.Header>Settings</Panel.Header>
+      <Panel.Header>App Settings</Panel.Header>
       <div ref={manageRef}>
         <GeneralPanelForm />
       </div>

apps/client/src/features/app-settings/settingsStore.ts

@@ -15,7 +15,7 @@ export const settingPanels: Readonly<SettingsOption[]> = [
   },
   {
     id: 'general',
-    label: 'General',
+    label: 'App Settings',
     secondary: [
       { id: 'general__manage', label: 'Manage Ontime settings' },
       { id: 'general__view', label: 'View settings' },
@@ -59,6 +59,7 @@ export const settingPanels: Readonly<SettingsOption[]> = [
 ] as const;
 
 export type SettingsOptionId = (typeof settingPanels)[number]['id'];
+
 export interface PanelBaseProps {
   location?: string;
 }

apps/client/src/features/control/message/MessageControl.tsx

@@ -52,7 +52,7 @@ export default function MessageControl() {
           onClick={() => setMessage.timerBlink(!blink)}
           data-testid='toggle timer blink'
         >
-          Blink message
+          Blink
         </Button>
         <Button
           size='sm'
@@ -66,7 +66,7 @@ export default function MessageControl() {
         </Button>
       </div>
       <InputRow
-        label='External Message (readonly)'
+        label='External Message (read only)'
         placeholder={enDash}
         readonly
         text={message.external.text || ''}

apps/client/src/features/operator/OperatorExport.tsx

@@ -4,6 +4,7 @@ import { useDisclosure } from '@chakra-ui/react';
 
 import FloatingNavigation from '../../common/components/navigation-menu/FloatingNavigation';
 import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
+import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
 
 import Operator from './Operator';
 
@@ -19,10 +20,10 @@ export default function OperatorExport() {
   const toggleMenu = isOpen ? onClose : onOpen;
 
   return (
-    <>
+    <ProtectRoute permission='operator'>
       <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
       <ProductionNavigationMenu isMenuOpen={isOpen} onMenuClose={onClose} />
       <Operator />
-    </>
+    </ProtectRoute>
   );
 }

apps/client/src/features/viewers/timer/Timer.scss

@@ -32,6 +32,8 @@
 
   .blackout {
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100vw;
     height: 100vh;
     background-color: #000;

apps/server/src/services/__tests__/timerUtils.test.ts

@@ -1664,7 +1664,7 @@ describe('getRuntimeOffset()', () => {
         expectedEnd: 81600000, // 22:40:00
       },
       timer: {
-        addedTime: 0,
+        addedTime: -200000,
         current: -400000,
         duration: 3600000,
         elapsed: 4000000,
@@ -1678,7 +1678,7 @@ describe('getRuntimeOffset()', () => {
     } as RuntimeState;
 
     const offset = getRuntimeOffset(state);
-    expect(offset).toBe(-400000);
+    expect(offset).toBe(400000); // <--- offset is always the overtime
   });
 
   it('handles time-to-end started after the end time', () => {
@@ -1732,7 +1732,8 @@ describe('getRuntimeOffset()', () => {
     const updateCurrent = getCurrent(state);
     state.timer.current = updateCurrent;
     const offset = getRuntimeOffset(state);
-    expect(offset).toBe(81000000 - 82000000); // <-- planned end - now
+    expect(millisToString(offset)).toBe('00:16:40');
+    expect(offset).toBe(82000000 - 81000000); // <-- now - planned end
   });
 });
 

apps/server/src/services/timerUtils.ts

@@ -313,7 +313,7 @@ export function getRuntimeOffset(state: RuntimeState): MaybeNumber {
     return clock - timeStart;
   }
 
-  const overtime = Math.min(current, 0);
+  const overtime = Math.abs(Math.min(current, 0));
   // in time-to-end, offset is overtime
   if (timerType === TimerType.TimeToEnd) {
     return overtime;
@@ -322,7 +322,7 @@ export function getRuntimeOffset(state: RuntimeState): MaybeNumber {
   const startOffset = startedAt - timeStart;
   const pausedTime = state._timer.pausedAt === null ? 0 : clock - state._timer.pausedAt;
 
-  return startOffset + addedTime + pausedTime + Math.abs(overtime);
+  return startOffset + addedTime + pausedTime + overtime;
 }
 
 /**

e2e/tests/features/206-url-preset.spec.ts

@@ -5,7 +5,7 @@ test('URL preset feature, it should redirect to given URL', async ({ page }) =>
 
   // open settings
   await page.getByRole('button', { name: 'Toggle settings' }).click();
-  await page.getByRole('button', { name: 'General' }).click();
+  await page.getByRole('button', { name: 'App Settings' }).click();
 
   // create preset
   await page.getByTestId('url-preset-form').scrollIntoViewIfNeeded();