docs(llm): request for useeffect documentation

apps/client/src/common/hooks/useSocket.ts

@@ -22,14 +22,10 @@ export const useRundownEditor = createSelector((state: RuntimeStore) => ({
   nextEventId: state.eventNext?.id ?? null,
 }));
 
-export const useScreenControl = createSelector((state: RuntimeStore) => ({
+export const useTimerViewControl = createSelector((state: RuntimeStore) => ({
   blackout: state.message.timer.blackout,
   blink: state.message.timer.blink,
-  isScreenModified:
-    state.message.timer.visible ||
-    state.message.timer.blink ||
-    state.message.timer.blackout ||
-    state.message.timer.secondarySource !== null,
+  secondarySource: state.message.timer.secondarySource,
 }));
 
 export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
@@ -37,12 +33,17 @@ export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
   visible: state.message.timer.visible,
 }));
 
-export const useSecondaryMessageInput = createSelector((state: RuntimeStore) => ({
+export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
   text: state.message.secondary,
-  source: state.message.timer.secondarySource,
+  visible: state.message.timer.secondarySource === 'secondary',
 }));
 
-export const useTimerStatus = createSelector((state: RuntimeStore) => ({
+export const useMessagePreview = createSelector((state: RuntimeStore) => ({
+  blink: state.message.timer.blink,
+  blackout: state.message.timer.blackout,
+  phase: state.timer.phase,
+  secondarySource: state.message.timer.secondarySource,
+  showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
   timerType: state.eventNow?.timerType ?? null,
   countToEnd: state.eventNow?.countToEnd ?? false,
 }));
@@ -51,16 +52,10 @@ export const setMessage = {
   timerText: (payload: string) => sendSocket('message', { timer: { text: payload } }),
   timerVisible: (payload: boolean) => sendSocket('message', { timer: { visible: payload } }),
   secondaryMessage: (payload: string) => sendSocket('message', { secondary: payload }),
-  // blink and blackout are mutually exclusive stage states, so turning one on turns the other off
-  timerBlink: (payload: boolean) =>
-    sendSocket('message', payload ? { timer: { blink: true, blackout: false } } : { timer: { blink: false } }),
-  timerBlackout: (payload: boolean) =>
-    sendSocket('message', payload ? { timer: { blackout: true, blink: false } } : { timer: { blackout: false } }),
+  timerBlink: (payload: boolean) => sendSocket('message', { timer: { blink: payload } }),
+  timerBlackout: (payload: boolean) => sendSocket('message', { timer: { blackout: payload } }),
   timerSecondarySource: (payload: TimerMessage['secondarySource']) =>
     sendSocket('message', { timer: { secondarySource: payload } }),
-  /** returns the stage to a plain timer, keeping whatever the operator has typed */
-  clearScreen: () =>
-    sendSocket('message', { timer: { visible: false, blink: false, blackout: false, secondarySource: null } }),
 };
 
 export const usePlaybackControl = createSelector((state: RuntimeStore) => ({

apps/client/src/features/control/message/InputRow.module.scss

@@ -2,12 +2,14 @@
   display: grid;
   grid-template-columns: 1fr auto;
   gap: $element-spacing;
+  margin-top: $element-inner-spacing;
+}
 
-  &.withSource {
-    grid-template-columns: auto 1fr auto;
+.label {
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+
+  &.active {
+    color: $action-text-color;
   }
 }
-
-.label.active {
-  color: $action-text-color;
-}

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

@@ -1,6 +1,5 @@
-import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
+import { PropsWithChildren, useEffect, useRef, useState } from 'react';
 
-import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import Input from '../../../common/components/input/input/Input';
 import { cx } from '../../../common/utils/styleUtils';
 
@@ -10,15 +9,12 @@ interface InputRowProps {
   label: string;
   placeholder: string;
   text: string;
-  /** whether this text is currently on the audience screen */
   visible: boolean;
   changeHandler: (newValue: string) => void;
-  /** control which picks where the text is shown, rendered before the input */
-  sourcePicker?: ReactNode;
 }
 
 export default function InputRow(props: PropsWithChildren<InputRowProps>) {
-  const { label, placeholder, text, visible, changeHandler, sourcePicker, children } = props;
+  const { label, placeholder, text, visible, changeHandler, children } = props;
 
   const [value, setValue] = useState(text);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -47,11 +43,10 @@ export default function InputRow(props: PropsWithChildren<InputRowProps>) {
 
   return (
     <div>
-      <Editor.Label className={cx([style.label, visible && style.active])} htmlFor={label}>
+      <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
         {label}
-      </Editor.Label>
-      <div className={cx([style.inputItems, sourcePicker && style.withSource])}>
-        {sourcePicker}
+      </label>
+      <div className={style.inputItems}>
         <Input id={label} ref={inputRef} value={value} onChange={handleInputChange} placeholder={placeholder} />
         {children}
       </div>

apps/client/src/features/control/message/MessageControl.module.scss

@@ -1,17 +0,0 @@
-/* the screen state buttons belong with the preview they act on, not with the message inputs.
-   buttons sit in a column to the right of the stage by default; once the container narrows
-   too far for that (e.g. an extracted window resized narrow), they drop into a row below it.
-   the group is sized by its content, not stretched - the preview keeps a fixed shape rather
-   than growing to whatever height the panel happens to have free */
-.screenGroup {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: start;
-  gap: $element-spacing;
-}
-
-@container (max-width: 22rem) {
-  .screenGroup {
-    grid-template-columns: 1fr;
-  }
-}

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

@@ -1,22 +1,18 @@
-import { SecondarySource } from 'ontime-types';
 import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
 
 import IconButton from '../../../common/components/buttons/IconButton';
-import Select from '../../../common/components/select/Select';
-import { setMessage, useSecondaryMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
+import {
+  setMessage,
+  useExternalMessageInput as useSecondaryMessageInput,
+  useTimerMessageInput,
+} from '../../../common/hooks/useSocket';
 import InputRow from './InputRow';
-import ScreenControl from './ScreenControl';
-import TimerPreview from './TimerPreview';
-
-import style from './MessageControl.module.scss';
+import TimerControlsPreview from './TimerViewControl';
 
 export default function MessageControl() {
   return (
     <>
-      <div className={style.screenGroup}>
-        <TimerPreview />
-        <ScreenControl />
-      </div>
+      <TimerControlsPreview />
       <TimerMessageInput />
       <SecondaryInput />
     </>
@@ -28,7 +24,7 @@ function TimerMessageInput() {
 
   return (
     <InputRow
-      label='Timer message'
+      label='Timer Message'
       placeholder='Message shown fullscreen in stage timer'
       text={text}
       visible={visible}
@@ -36,7 +32,6 @@ function TimerMessageInput() {
     >
       <IconButton
         aria-label='Toggle timer message visibility'
-        aria-pressed={visible}
         onClick={() => setMessage.timerVisible(!visible)}
         variant={visible ? 'primary' : 'subtle'}
       >
@@ -46,46 +41,31 @@ function TimerMessageInput() {
   );
 }
 
-/**
- * The secondary line of the stage timer shows one of the aux timers or the secondary message.
- * The select owns which one, the eye owns whether the line is shown at all.
- */
 function SecondaryInput() {
-  const { text, source } = useSecondaryMessageInput();
-  const isShowingSecondaryLine = source !== null;
-  const selectedSource = source ?? 'aux1';
+  const { text, visible } = useSecondaryMessageInput();
+
+  const toggleSecondary = () => {
+    if (visible) {
+      setMessage.timerSecondarySource(null);
+    } else {
+      setMessage.timerSecondarySource('secondary');
+    }
+  };
 
   return (
     <InputRow
-      label='Secondary'
+      label='Secondary Message'
       placeholder='Message shown as secondary text in stage timer'
       text={text}
-      visible={source === 'secondary'}
+      visible={visible}
       changeHandler={(newValue) => setMessage.secondaryMessage(newValue)}
-      sourcePicker={
-        <Select
-          value={selectedSource}
-          options={[
-            { value: 'aux1', label: 'Aux 1' },
-            { value: 'aux2', label: 'Aux 2' },
-            { value: 'aux3', label: 'Aux 3' },
-            { value: 'secondary', label: 'Message' },
-          ]}
-          onValueChange={(value: SecondarySource | null) => {
-            if (value === null) return;
-            setMessage.timerSecondarySource(value);
-          }}
-        />
-      }
     >
       <IconButton
-        aria-label='Toggle secondary visibility'
-        aria-pressed={isShowingSecondaryLine}
-        onClick={() => setMessage.timerSecondarySource(isShowingSecondaryLine ? null : selectedSource)}
-        variant={isShowingSecondaryLine ? 'primary' : 'subtle'}
-        data-testid='toggle secondary'
+        aria-label='Toggle secondary message visibility'
+        onClick={toggleSecondary}
+        variant={visible ? 'primary' : 'subtle'}
       >
-        {isShowingSecondaryLine ? <IoEye /> : <IoEyeOffOutline />}
+        {visible ? <IoEye /> : <IoEyeOffOutline />}
       </IconButton>
     </InputRow>
   );

apps/client/src/features/control/message/MessageControlExport.module.scss

@@ -1,21 +1,8 @@
 .growPanel {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-/* the extracted route has no flex parent to grow into */
-.extractedPanel {
-  height: 100%;
 }
 
 .contentLayout {
-  flex: 1;
-  min-height: 0;
-  container-type: inline-size;
-
   display: flex;
   flex-direction: column;
   gap: $section-spacing;

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

@@ -5,7 +5,6 @@ import ErrorBoundary from '../../../common/components/error-boundary/ErrorBounda
 import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
 import { handleLinks } from '../../../common/utils/linkUtils';
-import { cx } from '../../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../../externals';
 import MessageControl from './MessageControl';
 
@@ -17,10 +16,7 @@ function MessageControlExport() {
 
   return (
     <ProtectRoute permission='editor'>
-      <Editor.Panel
-        className={cx([style.growPanel, isExtracted && style.extractedPanel])}
-        data-testid='panel-messages-control'
-      >
+      <Editor.Panel className={style.growPanel} data-testid='panel-messages-control'>
         {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('messagecontrol', event)} />}
         {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
 

apps/client/src/features/control/message/ScreenControl.module.scss

@@ -1,14 +0,0 @@
-.screenControl {
-  display: grid;
-  grid-auto-flow: row;
-  gap: $element-spacing;
-  width: 8rem;
-}
-
-@container (max-width: 22rem) {
-  .screenControl {
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-    width: 100%;
-  }
-}

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

@@ -1,40 +0,0 @@
-import Button from '../../../common/components/buttons/Button';
-import { setMessage, useScreenControl } from '../../../common/hooks/useSocket';
-
-import style from './ScreenControl.module.scss';
-
-export default function ScreenControl() {
-  const { blackout, blink, isScreenModified } = useScreenControl();
-
-  return (
-    <div className={style.screenControl}>
-      <Button
-        variant={blink ? 'primary' : 'subtle'}
-        aria-pressed={blink}
-        fluid
-        onClick={() => setMessage.timerBlink(!blink)}
-        data-testid='toggle timer blink'
-      >
-        Blink
-      </Button>
-      <Button
-        variant={blackout ? 'destructive' : 'subtle'}
-        aria-pressed={blackout}
-        fluid
-        onClick={() => setMessage.timerBlackout(!blackout)}
-        data-testid='toggle timer blackout'
-      >
-        Blackout
-      </Button>
-      <Button
-        variant='subtle'
-        fluid
-        disabled={!isScreenModified}
-        onClick={() => setMessage.clearScreen()}
-        data-testid='clear screen'
-      >
-        Clear screen
-      </Button>
-    </div>
-  );
-}

apps/client/src/features/control/message/TimerPreview.module.scss

@@ -1,26 +1,49 @@
-/* fixed shape, not stretched to whatever height the panel has free - it fills the
-   available width and keeps a 16:9 proportion, which is also what the font size
-   estimate in the embedded timer assumes */
-.stage {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  min-width: 0;
+.preview {
+  background-color: $ui-black;
+  display: grid;
+  place-content: center;
+  text-align: center;
   position: relative;
-  /* a query container so that the embedded timer scales to the preview, not to the viewport */
-  container-type: size;
-  contain: paint;
-  overflow: hidden;
-  border-radius: $component-border-radius-md;
 }
 
-/* editor chrome sits above the blackout and message overlays, so it stays reachable and readable */
-.stageChrome {
-  position: absolute;
-  inset: 0;
-  z-index: calc($zindex-floating + 2);
-  pointer-events: none;
+.mainContent {
+  font-size: 1rem;
+  font-weight: 600;
+  width: 100%;
+  color: var(--override-colour, $ui-white);
 
-  > * {
-    pointer-events: auto;
+  &[data-phase='pending'] {
+    color: $ontime-roll;
+  }
+  &[data-phase='overtime'] {
+    color: $playback-negative;
+  }
+  &[data-phase='none'] {
+    opacity: $opacity-disabled;
+  }
+}
+
+.secondaryContent {
+  border-top: 1px solid $white-7;
+}
+
+.blackout {
+  display: none;
+}
+
+.eventStatus {
+  position: absolute;
+  left: 0;
+  margin: 0.5rem 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.statusIcon {
+  color: $gray-1000;
+
+  &[data-active='true'] {
+    color: $active-indicator;
   }
 }

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

@@ -1,21 +1,110 @@
+import { TimerPhase, TimerType } from 'ontime-types';
+import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
+import { LuArrowDownToLine } from 'react-icons/lu';
+
 import { CornerWithPip } from '../../../common/components/editor-utils/EditorUtils';
+import Tooltip from '../../../common/components/tooltip/Tooltip';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
+import { useMessagePreview } from '../../../common/hooks/useSocket';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
 import PipRoot from '../../../views/editor/pip-timer/PipRoot';
-import { PipTimer } from '../../../views/editor/pip-timer/PipTimer';
-import TimerStatus from './TimerStatus';
 
 import style from './TimerPreview.module.scss';
 
+const secondarySourceLabels: Record<string, string> = {
+  aux1: 'Aux 1',
+  aux2: 'Aux 2',
+  aux3: 'Aux 3',
+  secondary: 'Secondary message',
+};
+
 export default function TimerPreview() {
+  const { blink, blackout, countToEnd, phase, secondarySource, showTimerMessage, timerType } = useMessagePreview();
   const { data } = useViewSettings();
 
+  const main = (() => {
+    if (showTimerMessage) return 'Message';
+    if (timerType === TimerType.None) return timerPlaceholder;
+    if (phase === TimerPhase.Pending) return 'Standby to start';
+    if (phase === TimerPhase.Overtime) return 'Timer Overtime';
+    if (timerType === TimerType.Clock) return 'Clock';
+    if (countToEnd) return 'Count to End';
+    return 'Timer';
+  })();
+
+  const secondary = (() => {
+    // message is a fullscreen overlay or secondary is not active
+    if (showTimerMessage || !secondarySource) return null;
+
+    // we need to check aux first since it takes priority
+    return secondarySourceLabels[secondarySource];
+  })();
+
+  const overrideColour = (() => {
+    // override fallback colours from starter project
+    if (phase === TimerPhase.Warning) return data.warningColor ?? '#ffa528';
+    if (phase === TimerPhase.Danger) return data.dangerColor ?? '#ff7300';
+    return data.normalColor ?? '#FFFC';
+  })();
+
+  const showColourOverride = main == 'Timer';
+  const contentClasses = cx([blink && style.blink, blackout && style.blackout]);
+
   return (
-    <div className={style.stage}>
-      <PipTimer viewSettings={data} />
-      <div className={style.stageChrome}>
-        <TimerStatus />
-        <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
+    <div className={style.preview}>
+      <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
+      <div className={contentClasses}>
+        <div
+          className={style.mainContent}
+          data-phase={showColourOverride && phase}
+          style={showColourOverride ? { '--override-colour': overrideColour } : {}}
+        >
+          {main}
+        </div>
+        {secondary !== null && <div className={style.secondaryContent}>{secondary}</div>}
+      </div>
+      <div className={style.eventStatus}>
+        <Tooltip
+          text='Time type: Count down'
+          render={<span />}
+          className={style.statusIcon}
+          data-active={timerType === TimerType.CountDown}
+        >
+          <IoArrowDown />
+        </Tooltip>
+        <Tooltip
+          text='Time type: Count up'
+          render={<span />}
+          className={style.statusIcon}
+          data-active={timerType === TimerType.CountUp}
+        >
+          <IoArrowUp />
+        </Tooltip>
+        <Tooltip
+          text='Time type: Clock'
+          render={<span />}
+          className={style.statusIcon}
+          data-active={timerType === TimerType.Clock}
+        >
+          <IoTime />
+        </Tooltip>
+        <Tooltip
+          text='Time type: None'
+          render={<span />}
+          className={style.statusIcon}
+          data-active={timerType === TimerType.None}
+        >
+          <IoBan />
+        </Tooltip>
+        <Tooltip
+          text={countToEnd ? 'Count to end' : 'Count duration'}
+          render={<span />}
+          className={style.statusIcon}
+          data-active={countToEnd}
+        >
+          <LuArrowDownToLine />
+        </Tooltip>
       </div>
     </div>
   );

apps/client/src/features/control/message/TimerStatus.module.scss

@@ -1,17 +0,0 @@
-.timerStatus {
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 0.5rem 0.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.statusIcon {
-  color: $gray-1000;
-
-  &[data-active='true'] {
-    color: $active-indicator;
-  }
-}

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

@@ -1,58 +0,0 @@
-import { TimerType } from 'ontime-types';
-import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
-import { LuArrowDownToLine } from 'react-icons/lu';
-
-import Tooltip from '../../../common/components/tooltip/Tooltip';
-import { useTimerStatus } from '../../../common/hooks/useSocket';
-
-import style from './TimerStatus.module.scss';
-
-/** Read only summary of how the loaded event drives the stage timer */
-export default function TimerStatus() {
-  const { countToEnd, timerType } = useTimerStatus();
-
-  return (
-    <div className={style.timerStatus}>
-      <Tooltip
-        text='Time type: Count down'
-        render={<span />}
-        className={style.statusIcon}
-        data-active={timerType === TimerType.CountDown}
-      >
-        <IoArrowDown />
-      </Tooltip>
-      <Tooltip
-        text='Time type: Count up'
-        render={<span />}
-        className={style.statusIcon}
-        data-active={timerType === TimerType.CountUp}
-      >
-        <IoArrowUp />
-      </Tooltip>
-      <Tooltip
-        text='Time type: Clock'
-        render={<span />}
-        className={style.statusIcon}
-        data-active={timerType === TimerType.Clock}
-      >
-        <IoTime />
-      </Tooltip>
-      <Tooltip
-        text='Time type: None'
-        render={<span />}
-        className={style.statusIcon}
-        data-active={timerType === TimerType.None}
-      >
-        <IoBan />
-      </Tooltip>
-      <Tooltip
-        text={countToEnd ? 'Count to end' : 'Count duration'}
-        render={<span />}
-        className={style.statusIcon}
-        data-active={countToEnd}
-      >
-        <LuArrowDownToLine />
-      </Tooltip>
-    </div>
-  );
-}

apps/client/src/features/control/message/TimerViewControl.module.scss

@@ -0,0 +1,11 @@
+.previewContainer {
+  display: grid;
+  gap: $element-spacing;
+  grid-template-columns: 3fr 2fr;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: $element-spacing;
+}

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

@@ -0,0 +1,92 @@
+import { SecondarySource } from 'ontime-types';
+import { useEffect, useState } from 'react';
+
+import Button from '../../../common/components/buttons/Button';
+import * as Editor from '../../../common/components/editor-utils/EditorUtils';
+import Select from '../../../common/components/select/Select';
+import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
+import TimerPreview from './TimerPreview';
+
+import style from './TimerViewControl.module.scss';
+
+export default function TimerControlsPreview() {
+  const { blackout, blink } = useTimerViewControl();
+
+  return (
+    <div className={style.previewContainer}>
+      <TimerPreview />
+      <div className={style.options}>
+        <SecondarySourceControl />
+
+        <Editor.Separator orientation='horizontal' />
+
+        <Button
+          variant={blink ? 'primary' : 'subtle'}
+          fluid
+          onClick={() => setMessage.timerBlink(!blink)}
+          data-testid='toggle timer blink'
+        >
+          Blink
+        </Button>
+        <Button
+          variant={blackout ? 'primary' : 'subtle'}
+          fluid
+          onClick={() => setMessage.timerBlackout(!blackout)}
+          data-testid='toggle timer blackout'
+        >
+          Blackout screen
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function SecondarySourceControl() {
+  const { secondarySource } = useTimerViewControl();
+  const [value, setValue] = useState<SecondarySource>('aux1');
+
+  // sync secondary source with external changes
+  useEffect(() => {
+    if (secondarySource !== null) {
+      setValue(secondarySource);
+    }
+  }, [secondarySource]);
+
+  const toggleSecondary = () => {
+    if (secondarySource === value) {
+      setMessage.timerSecondarySource(null);
+    } else {
+      setMessage.timerSecondarySource(value);
+    }
+  };
+
+  return (
+    <>
+      <Select
+        value={value}
+        options={[
+          { value: 'aux1', label: 'Aux 1' },
+          { value: 'aux2', label: 'Aux 2' },
+          { value: 'aux3', label: 'Aux 3' },
+          { value: 'secondary', label: 'Secondary message' },
+        ]}
+        onValueChange={(value: SecondarySource | null) => {
+          if (value === null) return;
+          // we can only update the remote if it is enabled
+          if (secondarySource !== null) {
+            setMessage.timerSecondarySource(value);
+          }
+          setValue(value);
+        }}
+      />
+      <Button
+        variant={secondarySource !== null ? 'primary' : 'subtle'}
+        fluid
+        onClick={toggleSecondary}
+        data-testid='toggle secondary'
+      >
+        Show secondary
+      </Button>
+    </>
+  );
+}

apps/client/src/views/editor/pip-timer/PipTimer.scss

@@ -6,9 +6,8 @@
   padding: 0;
   box-sizing: border-box; /* reset */
   overflow: hidden;
-  width: 100%;
-  height: 100%; /* fill the pip window or the editor preview frame */
-  position: relative; /* anchor for the blackout and message overlays */
+  width: 100%; /* restrict the page width to viewport */
+  height: 100vh;
   transition: opacity 0.5s ease-in-out;
 
   font-family: $viewer-font-family;
@@ -20,8 +19,8 @@
   flex-direction: column;
 
   &--finished {
-    outline: clamp(4px, 1cqw, 16px) solid $timer-finished-color;
-    outline-offset: calc(clamp(4px, 1cqw, 16px) * -1);
+    outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
+    outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
     transition: $viewer-transition-time;
   }
 
@@ -108,24 +107,10 @@
 
   /* =================== OVERLAY ===================*/
 
-  .blackout {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    background-color: #000;
-    opacity: 0;
-    transition: opacity $viewer-transition-time;
-
-    &--active {
-      z-index: calc($zindex-floating + 1);
-      opacity: 1;
-    }
-  }
-
   .message-overlay {
-    position: absolute;
+    position: fixed;
     inset: 0;
-    padding: 2cqw;
+    padding: 2vw;
     background: $viewer-background-color;
     opacity: 0;
     transition: opacity $viewer-transition-time;

apps/client/src/views/editor/pip-timer/PipTimer.tsx

@@ -41,10 +41,9 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
   // gather timer data
   const totalTime = getTotalTime(time.duration, time.addedTime);
   const stageTimer = getTimerByType(false, timerTypeNow, clock, time, timerTypeNow);
-  // match the defaults of the timer view, which is what the preview is standing in for
   const display = getFormattedTimer(stageTimer, timerTypeNow, 'min', {
     removeSeconds: false,
-    removeLeadingZero: true,
+    removeLeadingZero: false,
   });
 
   const currentAux = (() => {
@@ -64,27 +63,23 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
 
   // gather presentation styles
   const resolvedTimerColour = getTimerColour(viewSettings, undefined, showWarning, showDanger);
-  // the estimate is tuned for a 16:9 screen, so cap it by height for containers wider than that
   const timerFontSize = getEstimatedFontSize(display, secondaryContent);
-  const timerFontRule = `min(${timerFontSize}cqw, ${((timerFontSize * 16) / 9).toFixed(2)}cqh)`;
   const userStyles = {
     ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
   };
 
   return (
     <div className={cx(['pip-timer', showFinished && 'pip-timer--finished'])} style={userStyles}>
-      <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
-
       <div className={cx(['message-overlay', showOverlay && 'message-overlay--active'])}>
         <FitText mode='multi' min={12} max={256} className={cx(['message', message.timer.blink && 'blink'])}>
           {message.timer.text}
         </FitText>
       </div>
 
-      <div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
+      <div className='timer-container'>
         <div
           className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
-          style={{ fontSize: timerFontRule }}
+          style={{ fontSize: `${timerFontSize}vw` }}
           data-phase={time.phase}
         >
           {display}

apps/client/src/views/timer/Timer.scss

@@ -195,6 +195,24 @@
     font-weight: 600;
   }
 
+  .sound-prompt {
+    position: absolute;
+    bottom: $view-block-padding;
+    left: $view-inline-padding;
+    padding: 0.5em 0.75em;
+    border-radius: $element-border-radius;
+    background-color: $viewer-card-bg-color;
+    color: $viewer-secondary-color;
+    font-size: $timer-label-size;
+    text-transform: uppercase;
+    pointer-events: none;
+    transition: opacity $viewer-transition-time;
+
+    &--hidden {
+      opacity: 0;
+    }
+  }
+
   /* =================== LOGO ===================*/
   .logo {
     position: absolute;

apps/client/src/views/timer/Timer.tsx

@@ -8,6 +8,7 @@ import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
+import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import { useTimerSocket } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { cx } from '../../common/utils/styleUtils';
@@ -30,6 +31,7 @@ import {
   getTotalTime,
 } from './timer.utils';
 import { TimerData, useTimerData } from './useTimerData';
+import { useTimerSound } from './useTimerSound';
 
 import './Timer.scss';
 
@@ -66,6 +68,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
     freezeOvertime,
     freezeMessage,
     hidePhase,
+    endSound,
     font,
     keyColour,
     timerColour,
@@ -75,6 +78,8 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
   const { getLocalizedString } = useTranslation();
   const localisedMinutes = getLocalizedString('common.minutes');
 
+  const showSoundPrompt = useTimerSound(time.phase, endSound);
+
   // gather modifiers
   const viewTimerType = timerType ?? timerTypeNow;
   const showOverlay = getShowMessage(message.timer);
@@ -156,6 +161,8 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
 
       <ViewParamsEditor target={OntimeView.Timer} viewOptions={timerOptions} />
 
+      {showSoundPrompt && <SoundPermissionPrompt />}
+
       <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
 
       {!hideMessage && (
@@ -227,3 +234,13 @@ function TimerAutoTickingClock({ clockFormat }: { clockFormat: MaybeString }) {
     </div>
   );
 }
+
+function SoundPermissionPrompt() {
+  const isUserActive = useFadeOutOnInactivity(true);
+
+  return (
+    <div className={cx(['sound-prompt', !isUserActive && 'sound-prompt--hidden'])} aria-live='polite'>
+      Interact with the page (click/tap or press any key) to enable sound
+    </div>
+  );
+}

apps/client/src/views/timer/__tests__/timer.utils.test.ts

@@ -0,0 +1,34 @@
+import { TimerPhase } from 'ontime-types';
+
+import { shouldPlayEndSound } from '../timer.utils';
+
+describe('shouldPlayEndSound()', () => {
+  test.each([TimerPhase.Default, TimerPhase.Warning, TimerPhase.Danger])(
+    'sounds when a running timer goes into overtime from %s',
+    (previousPhase) => {
+      expect(shouldPlayEndSound(previousPhase, TimerPhase.Overtime)).toBe(true);
+    },
+  );
+
+  it('stays silent on the first phase we see, a client could be joining mid-overtime', () => {
+    expect(shouldPlayEndSound(null, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('stays silent when the phase was reset, a reload during overtime starts from none', () => {
+    expect(shouldPlayEndSound(TimerPhase.None, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('stays silent for a roll timer waiting to start', () => {
+    expect(shouldPlayEndSound(TimerPhase.Pending, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('sounds once, not on every update while in overtime', () => {
+    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.Overtime)).toBe(false);
+  });
+
+  it('stays silent on phases which are not the end of the timer', () => {
+    expect(shouldPlayEndSound(TimerPhase.Default, TimerPhase.Warning)).toBe(false);
+    expect(shouldPlayEndSound(TimerPhase.Warning, TimerPhase.Danger)).toBe(false);
+    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.None)).toBe(false);
+  });
+});

apps/client/src/views/timer/timer.options.ts

@@ -16,6 +16,7 @@ import { ViewOption } from '../../common/components/view-params-editor/viewParam
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean, makeColourString } from '../common/viewUtils';
+import { endSoundOptions, isEndSound, type EndSound } from './timer.sound';
 
 // manually match the properties of TimerType excluding the None
 const timerDisplayOptions: SelectOption[] = [
@@ -76,6 +77,15 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           type: 'boolean',
           defaultValue: false,
         },
+        {
+          id: 'endSound',
+          title: 'Play sound on timer end',
+          description:
+            'Plays a sound in this screen when the timer reaches zero. The screen must be interacted with once before it can play',
+          type: 'option',
+          values: endSoundOptions,
+          defaultValue: 'none',
+        },
       ],
     },
     {
@@ -193,6 +203,7 @@ type TimerOptions = {
   freezeOvertime: boolean;
   freezeMessage: string;
   hidePhase: boolean;
+  endSound: EndSound;
   font?: string;
   keyColour?: string;
   timerColour?: string;
@@ -208,6 +219,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
 
   // Get timerType from either source
   const timerType = validateTimerType(getValue('timerType'), TimerType.None);
+  const endSoundValue = getValue('endSound');
 
   return {
     hideClock: isStringBoolean(getValue('hideClock')),
@@ -227,6 +239,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
     freezeOvertime: isStringBoolean(getValue('freezeOvertime')),
     freezeMessage: getValue('freezeMessage') ?? '',
     hidePhase: isStringBoolean(getValue('hidePhase')),
+    endSound: isEndSound(endSoundValue) ? endSoundValue : 'none',
 
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),

apps/client/src/views/timer/timer.sound.ts

@@ -0,0 +1,20 @@
+import arpeggio from '../../assets/sounds/arpeggio.wav';
+import bell from '../../assets/sounds/bell.wav';
+import chime from '../../assets/sounds/chime.wav';
+import type { SelectOption } from '../../common/components/select/Select';
+
+// synthesised tones bundled with the app, no external source or licence to track
+export const endSoundSources = { chime, bell, arpeggio } as const;
+
+export type EndSound = 'none' | keyof typeof endSoundSources;
+
+export const endSoundOptions: SelectOption[] = [
+  { value: 'none', label: 'None' },
+  { value: 'chime', label: 'Chime' },
+  { value: 'bell', label: 'Bell' },
+  { value: 'arpeggio', label: 'Arpeggio' },
+];
+
+export function isEndSound(value: string | null): value is EndSound {
+  return value === 'none' || value === 'chime' || value === 'bell' || value === 'arpeggio';
+}

apps/client/src/views/timer/timer.utils.ts

@@ -189,3 +189,18 @@ export function getCardData(
     nextSecondary,
   };
 }
+
+/**
+ * Whether the end of timer sound should play for a given phase transition
+ * We only sound the transition into overtime from a phase that was already counting,
+ * which keeps a client that connects or reloads mid-overtime silent
+ */
+export function shouldPlayEndSound(previousPhase: TimerPhase | null, phase: TimerPhase): boolean {
+  if (phase !== TimerPhase.Overtime) {
+    return false;
+  }
+
+  return (
+    previousPhase === TimerPhase.Default || previousPhase === TimerPhase.Warning || previousPhase === TimerPhase.Danger
+  );
+}

apps/client/src/views/timer/useTimerSound.ts

@@ -0,0 +1,99 @@
+import { TimerPhase } from 'ontime-types';
+import { useEffect, useRef, useState } from 'react';
+
+import { endSoundSources, type EndSound } from './timer.sound';
+import { shouldPlayEndSound } from './timer.utils';
+
+/**
+ * Plays a sound when the timer reaches its end
+ *
+ * Browsers reject playback until the document has been interacted with, and that permission
+ * is lost on every page load. Since a timer screen is typically left unattended, we prime the
+ * audio element on the first interaction and let the view prompt for one if it never comes.
+ * Safari grants the permission per element, so priming has to call play() on this element from
+ * inside the event handler, it is not enough to know that an interaction happened.
+ */
+export function useTimerSound(phase: TimerPhase, sound: EndSound): boolean {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const previousPhaseRef = useRef<TimerPhase | null>(null);
+  const [isArmed, setIsArmed] = useState(false);
+
+  const enabled = sound !== 'none';
+
+  // Create and clean up the audio element; changing sounds requires re-arming it in Safari.
+  useEffect(() => {
+    setIsArmed(false);
+
+    if (sound === 'none') {
+      return;
+    }
+
+    const audio = new Audio(endSoundSources[sound]);
+    audioRef.current = audio;
+
+    return () => {
+      audio.pause();
+      audioRef.current = null;
+    };
+  }, [sound]);
+
+  // Listen for user interaction until muted playback succeeds and arms the selected audio element.
+  useEffect(() => {
+    if (!enabled || isArmed) {
+      return;
+    }
+
+    const controller = new AbortController();
+    const prime = () => {
+      const audio = audioRef.current;
+      if (!audio) {
+        return;
+      }
+
+      const wasMuted = audio.muted;
+      audio.muted = true;
+      audio
+        .play()
+        .then(() => {
+          if (audioRef.current !== audio) {
+            return;
+          }
+          audio.pause();
+          audio.currentTime = 0;
+          setIsArmed(true);
+        })
+        .catch(() => {
+          // playback is still blocked, a later interaction will try again
+        })
+        .finally(() => {
+          audio.muted = wasMuted;
+        });
+    };
+
+    document.addEventListener('pointerdown', prime, { capture: true, signal: controller.signal });
+    document.addEventListener('keydown', prime, { capture: true, signal: controller.signal });
+
+    return () => {
+      controller.abort();
+    };
+  }, [enabled, isArmed]);
+
+  // Track phase transitions and play only when a running timer enters overtime.
+  useEffect(() => {
+    const previousPhase = previousPhaseRef.current;
+    previousPhaseRef.current = phase;
+
+    if (!enabled || !shouldPlayEndSound(previousPhase, phase)) {
+      return;
+    }
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    audio.currentTime = 0;
+    audio.play().catch(() => {
+      // the screen has not been interacted with, the view shows a prompt for it
+    });
+  }, [enabled, phase]);
+
+  return enabled && !isArmed;
+}

apps/server/src/services/runtime-service/__tests__/runtime.utils.test.ts

@@ -1,226 +0,0 @@
-import { Offset, OffsetMode, Playback, TimerPhase, TimerState, TimerType } from 'ontime-types';
-
-import { makeOntimeEvent, makeRundown } from '../../../api-data/rundown/__mocks__/rundown.mocks.js';
-import {
-  findNextPlayableId,
-  findNextPlayableWithCue,
-  findPreviousPlayableId,
-  getEventAtIndex,
-  getShouldClockUpdate,
-  getShouldOffsetUpdate,
-  getShouldTimerUpdate,
-  isNewSecond,
-} from '../runtime.utils.js';
-
-describe('isNewSecond()', () => {
-  it('is false while the value moves within the same second', () => {
-    // count down rounds up, so both resolve to second 2
-    expect(isNewSecond(1500, 1200)).toBe(false);
-  });
-
-  it('is true once the value crosses a second boundary', () => {
-    expect(isNewSecond(1001, 1000)).toBe(true);
-  });
-
-  it('rounds according to the given direction', () => {
-    // 1200 -> ceil 2 / floor 1, 1800 -> ceil 2 / floor 1
-    expect(isNewSecond(1200, 1800, TimerType.CountDown)).toBe(false);
-    expect(isNewSecond(1200, 1800, TimerType.CountUp)).toBe(false);
-    // 1200 -> ceil 2 / floor 1, 2200 -> ceil 3 / floor 2
-    expect(isNewSecond(1200, 2200, TimerType.CountDown)).toBe(true);
-    expect(isNewSecond(1200, 2200, TimerType.CountUp)).toBe(true);
-  });
-
-  it('treats null and undefined as second zero', () => {
-    expect(isNewSecond(undefined, null)).toBe(false);
-    expect(isNewSecond(null, 0)).toBe(false);
-    expect(isNewSecond(undefined, 500)).toBe(true);
-  });
-});
-
-describe('getShouldClockUpdate()', () => {
-  it('is false within the same second and true across the boundary', () => {
-    expect(getShouldClockUpdate(1000, 1999)).toBe(false);
-    expect(getShouldClockUpdate(1000, 2000)).toBe(true);
-  });
-});
-
-describe('getShouldTimerUpdate()', () => {
-  const baseTimer: TimerState = {
-    addedTime: 0,
-    current: 10000,
-    duration: 10000,
-    elapsed: 0,
-    expectedFinish: 10000,
-    phase: TimerPhase.Default,
-    playback: Playback.Play,
-    secondaryTimer: null,
-    startedAt: 0,
-  };
-
-  it('always updates when there is no previous state', () => {
-    expect(getShouldTimerUpdate(undefined, baseTimer)).toBe(true);
-  });
-
-  it('does not update while the timer ticks within the same second', () => {
-    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, current: 9500 })).toBe(false);
-  });
-
-  it('updates when the timer crosses a second', () => {
-    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, current: 8999 })).toBe(true);
-  });
-
-  it('updates when the secondary timer crosses a second', () => {
-    const previous = { ...baseTimer, secondaryTimer: 2000 };
-    // counting down rounds up, so 1999 is still second 2
-    expect(getShouldTimerUpdate(previous, { ...previous, secondaryTimer: 1999 })).toBe(false);
-    expect(getShouldTimerUpdate(previous, { ...previous, secondaryTimer: 1000 })).toBe(true);
-  });
-
-  it.each([
-    ['addedTime', { addedTime: 1 }],
-    ['duration', { duration: 1 }],
-    ['phase', { phase: TimerPhase.Warning }],
-    ['playback', { playback: Playback.Pause }],
-    ['startedAt', { startedAt: 1 }],
-  ])('updates immediately when %s changes', (_label, patch) => {
-    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, ...patch })).toBe(true);
-  });
-
-  it.each([
-    ['elapsed', { elapsed: 1 }],
-    ['expectedFinish', { expectedFinish: 1 }],
-  ])('does not update on %s alone, since it is derived', (_label, patch) => {
-    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, ...patch })).toBe(false);
-  });
-});
-
-describe('getShouldOffsetUpdate()', () => {
-  const baseOffset: Offset = {
-    absolute: 0,
-    relative: 0,
-    mode: OffsetMode.Absolute,
-    expectedGroupEnd: null,
-    expectedRundownEnd: null,
-    expectedFlagStart: null,
-  };
-
-  it('always updates when there is no previous state', () => {
-    expect(getShouldOffsetUpdate(undefined, baseOffset, false)).toBe(true);
-  });
-
-  it('updates on a mode change even when no dependency ticked', () => {
-    expect(getShouldOffsetUpdate(baseOffset, { ...baseOffset, mode: OffsetMode.Relative }, false)).toBe(true);
-  });
-
-  it('holds back value changes until a dependency ticks', () => {
-    const next = { ...baseOffset, absolute: 1000 };
-    expect(getShouldOffsetUpdate(baseOffset, next, false)).toBe(false);
-    expect(getShouldOffsetUpdate(baseOffset, next, true)).toBe(true);
-  });
-
-  it('does not update when a dependency ticked but nothing changed', () => {
-    expect(getShouldOffsetUpdate(baseOffset, { ...baseOffset }, true)).toBe(false);
-  });
-});
-
-describe('findPreviousPlayableId()', () => {
-  const order = ['1', '2', '3'];
-
-  it('returns undefined when there is nothing to play', () => {
-    expect(findPreviousPlayableId([])).toBeUndefined();
-  });
-
-  it('returns the first event when nothing is loaded', () => {
-    expect(findPreviousPlayableId(order)).toBe('1');
-  });
-
-  it('returns the preceding event', () => {
-    expect(findPreviousPlayableId(order, '3')).toBe('2');
-  });
-
-  it('stays on the first event when already at the top', () => {
-    expect(findPreviousPlayableId(order, '1')).toBe('1');
-  });
-
-  it('falls back to the first event when the loaded id is unknown', () => {
-    expect(findPreviousPlayableId(order, 'not-in-rundown')).toBe('1');
-  });
-});
-
-describe('findNextPlayableId()', () => {
-  const order = ['1', '2', '3'];
-
-  it('returns undefined when there is nothing to play', () => {
-    expect(findNextPlayableId([])).toBeUndefined();
-  });
-
-  it('returns the first event when nothing is loaded', () => {
-    expect(findNextPlayableId(order)).toBe('1');
-  });
-
-  it('returns the following event', () => {
-    expect(findNextPlayableId(order, '1')).toBe('2');
-  });
-
-  it('wraps to the first event from the last', () => {
-    expect(findNextPlayableId(order, '3')).toBe('1');
-  });
-
-  it('falls back to the first event when the loaded id is unknown', () => {
-    expect(findNextPlayableId(order, 'not-in-rundown')).toBe('1');
-  });
-});
-
-describe('findNextPlayableWithCue()', () => {
-  const rundown = makeRundown({
-    order: ['1', '2', '3', '4'],
-    entries: {
-      '1': makeOntimeEvent({ id: '1', cue: 'a' }),
-      '2': makeOntimeEvent({ id: '2', cue: 'b' }),
-      '3': makeOntimeEvent({ id: '3', cue: 'b', skip: true }),
-      '4': makeOntimeEvent({ id: '4', cue: 'b' }),
-    },
-  });
-  const order = ['1', '2', '3', '4'];
-
-  it('finds the next event with the given cue', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'b')?.id).toBe('2');
-  });
-
-  it('skips events which are not playable', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'b', 2)?.id).toBe('4');
-  });
-
-  it('wraps around to the start of the rundown', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'a', 2)?.id).toBe('1');
-  });
-
-  it('excludes the current event unless allowCurrent is set', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'b', 1)?.id).toBe('4');
-    expect(findNextPlayableWithCue(rundown, order, 'b', 1, true)?.id).toBe('2');
-  });
-
-  it('returns undefined when no event carries the cue', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'missing')).toBeUndefined();
-  });
-});
-
-describe('getEventAtIndex()', () => {
-  const rundown = makeRundown({
-    order: ['1', '2'],
-    entries: {
-      '1': makeOntimeEvent({ id: '1' }),
-      '2': makeOntimeEvent({ id: '2' }),
-    },
-  });
-
-  it('returns the event at the given index', () => {
-    expect(getEventAtIndex(rundown, ['1', '2'], 1)?.id).toBe('2');
-  });
-
-  it('returns undefined when the index is out of range', () => {
-    expect(getEventAtIndex(rundown, ['1', '2'], 5)).toBeUndefined();
-    expect(getEventAtIndex(rundown, [], 0)).toBeUndefined();
-  });
-});

docs/agent-guides/code-quality.md

@@ -36,6 +36,10 @@ Remove comments that:
 
 Update adjacent comments with code. Stale comments are defects.
 
+Add a short comment immediately above every React `useEffect` describing the external synchronization or lifecycle
+responsibility it owns. Explain non-obvious reasons or constraints when they matter; for files with multiple effects, a
+brief responsibility label is useful even when the mechanics are straightforward.
+
 ## Naming and types
 
 - Prefer Ontime terms over vague `data`, `result`, `item`.

e2e/tests/features/201-message-control.spec.ts

@@ -19,29 +19,3 @@ test('message control sends messages to screens', async ({ context }) => {
 
   await expect(featurePage.getByText('TIME NOW')).toBeVisible();
 });
-
-test('message control drives the stage screen state', async ({ context }) => {
-  const editorPage = await context.newPage();
-  const featurePage = await context.newPage();
-
-  await editorPage.goto('/messagecontrol');
-  await featurePage.goto('/timer');
-  await featurePage.waitForLoadState('load', { timeout: 5000 });
-
-  // the secondary line defaults to an aux timer, the select is what puts our text on screen
-  await editorPage.getByPlaceholder('Message shown as secondary text in stage timer').fill('testing secondary');
-  await editorPage.getByRole('combobox').click();
-  await editorPage.getByRole('option', { name: 'Message' }).click();
-  await expect(featurePage.getByText('testing secondary')).toBeVisible();
-
-  await editorPage.getByTestId('toggle timer blackout').click();
-  await expect(featurePage.locator('.blackout')).toHaveClass(/blackout--active/);
-
-  // clearing returns the screen to normal, but keeps what the operator typed
-  await editorPage.getByTestId('clear screen').click();
-  await expect(featurePage.locator('.blackout')).not.toHaveClass(/blackout--active/);
-  await expect(featurePage.getByText('testing secondary')).toHaveCount(0);
-  await expect(editorPage.getByPlaceholder('Message shown as secondary text in stage timer')).toHaveValue(
-    'testing secondary',
-  );
-});