fix(ui): give the preview a fixed shape and top-align the buttons beside it

The stage was stretched to whatever height the panel had free via a 1fr grid
row, so its size varied with how much vertical room the editor happened to
leave rather than staying predictable. It now keeps a 16:9 box sized from
its own width - the same ratio the embedded timer's font-size estimate
already assumes - so cqw and cqh agree and the min() cap in PipTimer stays
meaningful only for the pip window, which is still freely resizable.

The button column no longer stretches or centers against that height either:
align-items: start on the group top-aligns both the stage and the buttons
when they sit side by side.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra

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

@@ -22,10 +22,14 @@ export const useRundownEditor = createSelector((state: RuntimeStore) => ({
   nextEventId: state.eventNext?.id ?? null,
 }));
 
-export const useTimerViewControl = createSelector((state: RuntimeStore) => ({
+export const useScreenControl = createSelector((state: RuntimeStore) => ({
   blackout: state.message.timer.blackout,
   blink: state.message.timer.blink,
-  secondarySource: state.message.timer.secondarySource,
+  isScreenModified:
+    state.message.timer.visible ||
+    state.message.timer.blink ||
+    state.message.timer.blackout ||
+    state.message.timer.secondarySource !== null,
 }));
 
 export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
@@ -33,17 +37,12 @@ export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
   visible: state.message.timer.visible,
 }));
 
-export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
+export const useSecondaryMessageInput = createSelector((state: RuntimeStore) => ({
   text: state.message.secondary,
-  visible: state.message.timer.secondarySource === 'secondary',
+  source: state.message.timer.secondarySource,
 }));
 
-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),
+export const useTimerStatus = createSelector((state: RuntimeStore) => ({
   timerType: state.eventNow?.timerType ?? null,
   countToEnd: state.eventNow?.countToEnd ?? false,
 }));
@@ -52,10 +51,16 @@ 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 }),
-  timerBlink: (payload: boolean) => sendSocket('message', { timer: { blink: payload } }),
-  timerBlackout: (payload: boolean) => sendSocket('message', { timer: { blackout: 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 } }),
   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,14 +2,12 @@
   display: grid;
   grid-template-columns: 1fr auto;
   gap: $element-spacing;
-  margin-top: $element-inner-spacing;
-}
 
-.label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-
-  &.active {
-    color: $action-text-color;
+  &.withSource {
+    grid-template-columns: auto 1fr auto;
   }
 }
+
+.label.active {
+  color: $action-text-color;
+}

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

@@ -1,5 +1,6 @@
-import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { PropsWithChildren, ReactNode, 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';
 
@@ -9,12 +10,15 @@ 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, children } = props;
+  const { label, placeholder, text, visible, changeHandler, sourcePicker, children } = props;
 
   const [value, setValue] = useState(text);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -43,10 +47,11 @@ export default function InputRow(props: PropsWithChildren<InputRowProps>) {
 
   return (
     <div>
-      <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
+      <Editor.Label className={cx([style.label, visible && style.active])} htmlFor={label}>
         {label}
-      </label>
-      <div className={style.inputItems}>
+      </Editor.Label>
+      <div className={cx([style.inputItems, sourcePicker && style.withSource])}>
+        {sourcePicker}
         <Input id={label} ref={inputRef} value={value} onChange={handleInputChange} placeholder={placeholder} />
         {children}
       </div>

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

@@ -0,0 +1,17 @@
+/* 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,18 +1,22 @@
+import { SecondarySource } from 'ontime-types';
 import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
 
 import IconButton from '../../../common/components/buttons/IconButton';
-import {
-  setMessage,
-  useExternalMessageInput as useSecondaryMessageInput,
-  useTimerMessageInput,
-} from '../../../common/hooks/useSocket';
+import Select from '../../../common/components/select/Select';
+import { setMessage, useSecondaryMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
 import InputRow from './InputRow';
-import TimerControlsPreview from './TimerViewControl';
+import ScreenControl from './ScreenControl';
+import TimerPreview from './TimerPreview';
+
+import style from './MessageControl.module.scss';
 
 export default function MessageControl() {
   return (
     <>
-      <TimerControlsPreview />
+      <div className={style.screenGroup}>
+        <TimerPreview />
+        <ScreenControl />
+      </div>
       <TimerMessageInput />
       <SecondaryInput />
     </>
@@ -24,7 +28,7 @@ function TimerMessageInput() {
 
   return (
     <InputRow
-      label='Timer Message'
+      label='Timer message'
       placeholder='Message shown fullscreen in stage timer'
       text={text}
       visible={visible}
@@ -32,6 +36,7 @@ function TimerMessageInput() {
     >
       <IconButton
         aria-label='Toggle timer message visibility'
+        aria-pressed={visible}
         onClick={() => setMessage.timerVisible(!visible)}
         variant={visible ? 'primary' : 'subtle'}
       >
@@ -41,31 +46,46 @@ 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, visible } = useSecondaryMessageInput();
-
-  const toggleSecondary = () => {
-    if (visible) {
-      setMessage.timerSecondarySource(null);
-    } else {
-      setMessage.timerSecondarySource('secondary');
-    }
-  };
+  const { text, source } = useSecondaryMessageInput();
+  const isShowingSecondaryLine = source !== null;
+  const selectedSource = source ?? 'aux1';
 
   return (
     <InputRow
-      label='Secondary Message'
+      label='Secondary'
       placeholder='Message shown as secondary text in stage timer'
       text={text}
-      visible={visible}
+      visible={source === 'secondary'}
       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 message visibility'
-        onClick={toggleSecondary}
-        variant={visible ? 'primary' : 'subtle'}
+        aria-label='Toggle secondary visibility'
+        aria-pressed={isShowingSecondaryLine}
+        onClick={() => setMessage.timerSecondarySource(isShowingSecondaryLine ? null : selectedSource)}
+        variant={isShowingSecondaryLine ? 'primary' : 'subtle'}
+        data-testid='toggle secondary'
       >
-        {visible ? <IoEye /> : <IoEyeOffOutline />}
+        {isShowingSecondaryLine ? <IoEye /> : <IoEyeOffOutline />}
       </IconButton>
     </InputRow>
   );

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

@@ -1,8 +1,21 @@
 .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,6 +5,7 @@ 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';
 
@@ -16,7 +17,10 @@ function MessageControlExport() {
 
   return (
     <ProtectRoute permission='editor'>
-      <Editor.Panel className={style.growPanel} data-testid='panel-messages-control'>
+      <Editor.Panel
+        className={cx([style.growPanel, isExtracted && style.extractedPanel])}
+        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

@@ -0,0 +1,14 @@
+.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

@@ -0,0 +1,40 @@
+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,49 +1,26 @@
-.preview {
-  background-color: $ui-black;
-  display: grid;
-  place-content: center;
-  text-align: center;
-  position: relative;
-}
-
-.mainContent {
-  font-size: 1rem;
-  font-weight: 600;
+/* 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%;
-  color: var(--override-colour, $ui-white);
-
-  &[data-phase='pending'] {
-    color: $ontime-roll;
-  }
-  &[data-phase='overtime'] {
-    color: $playback-negative;
-  }
-  &[data-phase='none'] {
-    opacity: $opacity-disabled;
-  }
+  aspect-ratio: 16 / 9;
+  min-width: 0;
+  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;
 }
 
-.secondaryContent {
-  border-top: 1px solid $white-7;
-}
-
-.blackout {
-  display: none;
-}
-
-.eventStatus {
+/* editor chrome sits above the blackout and message overlays, so it stays reachable and readable */
+.stageChrome {
   position: absolute;
-  left: 0;
-  margin: 0.5rem 0.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
+  inset: 0;
+  z-index: calc($zindex-floating + 2);
+  pointer-events: none;
 
-.statusIcon {
-  color: $gray-1000;
-
-  &[data-active='true'] {
-    color: $active-indicator;
+  > * {
+    pointer-events: auto;
   }
 }

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

@@ -1,110 +1,21 @@
-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.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 className={style.stage}>
+      <PipTimer viewSettings={data} />
+      <div className={style.stageChrome}>
+        <TimerStatus />
+        <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
       </div>
     </div>
   );

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

@@ -0,0 +1,17 @@
+.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

@@ -0,0 +1,58 @@
+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

@@ -1,11 +0,0 @@
-.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

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

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

@@ -41,9 +41,10 @@ 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: false,
+    removeLeadingZero: true,
   });
 
   const currentAux = (() => {
@@ -63,23 +64,27 @@ 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='timer-container'>
+      <div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
         <div
           className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
-          style={{ fontSize: `${timerFontSize}vw` }}
+          style={{ fontSize: timerFontRule }}
           data-phase={time.phase}
         >
           {display}

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

@@ -195,25 +195,6 @@
     font-weight: 600;
   }
 
-  /* =================== SOUND PROMPT ===================*/
-  .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,7 +8,6 @@ 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';
@@ -31,7 +30,6 @@ import {
   getTotalTime,
 } from './timer.utils';
 import { TimerData, useTimerData } from './useTimerData';
-import { useTimerSound } from './useTimerSound';
 
 import './Timer.scss';
 
@@ -68,7 +66,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
     freezeOvertime,
     freezeMessage,
     hidePhase,
-    endSound,
     font,
     keyColour,
     timerColour,
@@ -78,8 +75,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
   const { getLocalizedString } = useTranslation();
   const localisedMinutes = getLocalizedString('common.minutes');
 
-  const { showPrompt } = useTimerSound(time.phase, endSound);
-
   // gather modifiers
   const viewTimerType = timerType ?? timerTypeNow;
   const showOverlay = getShowMessage(message.timer);
@@ -161,8 +156,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
 
       <ViewParamsEditor target={OntimeView.Timer} viewOptions={timerOptions} />
 
-      {showPrompt && <EnableSoundPrompt />}
-
       <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
 
       {!hideMessage && (
@@ -234,19 +227,3 @@ function TimerAutoTickingClock({ clockFormat }: { clockFormat: MaybeString }) {
     </div>
   );
 }
-
-/**
- * Nudges the user to interact with the screen so that the browser allows audio playback
- * Any interaction arms the sound, so this is a hint rather than a control
- * It is tied to mouse movement since that does not itself grant playback permission,
- * which keeps the hint off screen unless somebody is at the machine to act on it
- */
-function EnableSoundPrompt() {
-  const isUserActive = useFadeOutOnInactivity(true);
-
-  return (
-    <div className={cx(['sound-prompt', !isUserActive && 'sound-prompt--hidden'])} aria-live='polite'>
-      Tap the screen to enable sound
-    </div>
-  );
-}

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

@@ -1,34 +0,0 @@
-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

@@ -76,14 +76,6 @@ 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: 'boolean',
-          defaultValue: false,
-        },
       ],
     },
     {
@@ -201,7 +193,6 @@ type TimerOptions = {
   freezeOvertime: boolean;
   freezeMessage: string;
   hidePhase: boolean;
-  endSound: boolean;
   font?: string;
   keyColour?: string;
   timerColour?: string;
@@ -236,7 +227,6 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
     freezeOvertime: isStringBoolean(getValue('freezeOvertime')),
     freezeMessage: getValue('freezeMessage') ?? '',
     hidePhase: isStringBoolean(getValue('hidePhase')),
-    endSound: isStringBoolean(getValue('endSound')),
 
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),

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

@@ -189,18 +189,3 @@ 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

@@ -1,77 +0,0 @@
-import { TimerPhase } from 'ontime-types';
-import { useEffect, useRef, useState } from 'react';
-
-import buzzer from '../../assets/sounds/buzzer.mp3';
-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, enabled: boolean): { showPrompt: boolean } {
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const previousPhaseRef = useRef<TimerPhase | null>(null);
-  const [isArmed, setIsArmed] = useState(false);
-
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-
-    audioRef.current = new Audio(buzzer);
-
-    return () => {
-      audioRef.current?.pause();
-      audioRef.current = null;
-      setIsArmed(false);
-    };
-  }, [enabled]);
-
-  useEffect(() => {
-    if (!enabled || isArmed) {
-      return;
-    }
-
-    const controller = new AbortController();
-    const prime = () => {
-      audioRef.current
-        ?.play()
-        .then(() => {
-          if (!audioRef.current) return;
-          audioRef.current.pause();
-          audioRef.current.currentTime = 0;
-          setIsArmed(true);
-        })
-        .catch(() => {
-          // playback is still blocked, a later interaction will try again
-        });
-    };
-
-    document.addEventListener('pointerdown', prime, { capture: true, signal: controller.signal });
-    document.addEventListener('keydown', prime, { capture: true, signal: controller.signal });
-
-    return () => {
-      controller.abort();
-    };
-  }, [enabled, isArmed]);
-
-  useEffect(() => {
-    const previousPhase = previousPhaseRef.current;
-    previousPhaseRef.current = phase;
-
-    if (!enabled || !shouldPlayEndSound(previousPhase, phase)) {
-      return;
-    }
-
-    audioRef.current?.play().catch(() => {
-      // the screen has not been interacted with, the view shows a prompt for it
-    });
-  }, [enabled, phase]);
-
-  return { showPrompt: enabled && !isArmed };
-}

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

@@ -0,0 +1,226 @@
+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();
+  });
+});

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

@@ -19,3 +19,29 @@ 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',
+  );
+});