feat: option to select all events for countdown

* chore: cleanup leftover console log

* chore: prevent error in client tsconfig

.dockerignore

@@ -16,7 +16,8 @@
 
 # Ignore build folders
 node_modules
-dist
+**/node_modules
+**/dist
 
 # Ignore default volumes created by running docker compose up
 ontime-db

DEVELOPMENT.md

@@ -99,3 +99,16 @@ Other useful commands
 
 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`
+
+## CONTRIBUTION GUIDELINES
+
+If you want to propose changes to the codebase, please reach out before opening a Pull Request.
+
+For new PRs, please follow the following checklist:
+* [ ] You have updated and ran unit locally and they are passing. Unit tests are generally created for all utility functions and business logic 
+* [ ] You have ran code formatting and linting in all your changes
+* [ ] The branch is clean and the commits are meaningfully separated and contain descriptive messages
+* [ ] The PR body contains description and motivation for the changes
+
+After this checklist is complete, you can request a review from one of the maintainers to get feedback and approval on the changes. \
+We will review as soon as possible

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@getontime/cli",
-    "version": "4.0.0-alpha.6",
+    "version": "4.0.0-beta.3",
     "author": "Carlos Valente",
     "description": "Time keeping for live events",
     "repository": "https://github.com/cpvalente/ontime",

apps/client/package.json

@@ -1,23 +1,23 @@
 {
   "name": "ontime-ui",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.3",
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.2",
+    "@base-ui-components/react": "1.0.0-beta.3",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource/open-sans": "^5.0.28",
+    "@fontsource/open-sans": "^5.2.6",
-    "@mantine/hooks": "^8.2.4",
+    "@mantine/hooks": "^8.2.8",
     "@sentry/react": "^10.2.0",
     "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.84.1",
+    "@tanstack/react-query": "^5.85.9",
-    "@tanstack/react-query-devtools": "^5.84.1",
+    "@tanstack/react-query-devtools": "^5.85.9",
     "@tanstack/react-table": "^8.21.3",
     "autosize": "^6.0.1",
     "axios": "^1.11.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "csv-stringify": "^6.6.0",
     "prismjs": "^1.30.0",
     "react": "^19.1.1",
@@ -27,11 +27,11 @@
     "react-hook-form": "^7.62.0",
     "react-icons": "5.5.0",
     "react-qr-code": "^2.0.18",
-    "react-router": "^7.8.0",
+    "react-router": "^7.8.2",
     "react-simple-code-editor": "^0.14.1",
     "react-virtuoso": "^4.14.0",
     "web-vitals": "^5.1.0",
-    "zustand": "^5.0.7"
+    "zustand": "^5.0.8"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -64,8 +64,8 @@
     "@sentry/vite-plugin": "^2.16.1",
     "@tanstack/eslint-plugin-query": "^5.8.4",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.6",
+    "@types/react-dom": "^19.1.9",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
     "@vitejs/plugin-react": "4.5.1",

apps/client/src/common/components/client-modal/RedirectClientModal.tsx

@@ -33,7 +33,13 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
     if (newPath === '/' || newPath === currentPath) {
       return;
     }
-    setRedirect({ target: id, redirect: newPath });
+
+    if (newPath.startsWith('preset-')) {
+      setRedirect({ target: id, redirect: newPath.slice(7) });
+    } else {
+      setRedirect({ target: id, redirect: newPath });
+    }
+
     onClose();
   };
 
@@ -45,7 +51,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
       label: view.label,
     })),
     ...enabledPresets.map((preset) => ({
-      value: preset.search,
+      value: `preset-${preset.alias}`,
       label: `URL Preset: ${preset.alias}`,
     })),
   ];
@@ -61,32 +67,11 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
         <>
           <Info>
             Remotely redirect the client to a different URL. <br />
-            Either by selecting a URL Preset or entering a custom path.
+            Either by entering a custom path or selecting a URL Preset.
             <br />
             <br />
             <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
           </Info>
-          <div>
-            <span className={style.label}>Select View or URL Preset</span>
-            <div className={style.textEntry}>
-              <Select
-                fluid
-                options={viewOptions}
-                defaultValue={viewOptions[0].value}
-                onValueChange={(value) => setSelected(value)}
-                disabled={enabledPresets.length === 0}
-              />
-              <Button
-                variant='primary'
-                aria-label='Redirect to preset'
-                className={style.redirect}
-                disabled={enabledPresets.length === 0 || selected === '/'}
-                onClick={() => handleRedirect(selected)}
-              >
-                Redirect <IoArrowForward />
-              </Button>
-            </div>
-          </div>
           <div className={style.inlineEntry}>
             <span className={style.label}>Enter custom path</span>
             <label className={style.textEntry}>
@@ -100,9 +85,34 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
               className={style.redirect}
               onClick={() => handleRedirect(path)}
             >
-              Redirect <IoArrowForward />
+              Redirect
+              <IoArrowForward />
             </Button>
           </div>
+          <div>
+            <span className={style.label}>Select View or URL Preset</span>
+            <div className={style.inlineEntry}>
+              <label className={style.textEntry}>
+                {origin}
+                <Select
+                  fluid
+                  options={viewOptions}
+                  defaultValue={viewOptions[0].value}
+                  onValueChange={(value) => setSelected(value)}
+                  disabled={enabledPresets.length === 0}
+                />
+              </label>
+              <Button
+                variant='primary'
+                aria-label='Redirect to preset'
+                className={style.redirect}
+                disabled={enabledPresets.length === 0 || selected === '/'}
+                onClick={() => handleRedirect(selected)}
+              >
+                Redirect <IoArrowForward />
+              </Button>
+            </div>
+          </div>
         </>
       }
     />

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

@@ -11,9 +11,11 @@
 }
 
 .pin {
+  margin-top: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
 
   input {
     font-size: 4rem;

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

@@ -39,7 +39,14 @@ export default function ParamInput({ paramField }: ParamInputProps) {
   }
 
   if (type === 'multi-option') {
-    return <MultiOption paramField={paramField} />;
+    const optionFromParams = searchParams.getAll(id);
+
+    return (
+      <MultiOption
+        paramField={paramField}
+        options={optionFromParams.length ? optionFromParams : paramField.defaultValue ?? ['']}
+      />
+    );
   }
 
   if (type === 'boolean') {
@@ -74,19 +81,17 @@ export default function ParamInput({ paramField }: ParamInputProps) {
 
 interface EditFormMultiOptionProps {
   paramField: ParamField & { type: 'multi-option' };
+  options: string[];
 }
 
-function MultiOption({ paramField }: EditFormMultiOptionProps) {
+function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
-  const [searchParams] = useSearchParams();
+  const { id, values } = paramField;
-  const { id, values, defaultValue = [''] } = paramField;
+  const [paramState, setParamState] = useState<string[]>(options);
-
-  const optionFromParams = searchParams.getAll(id);
-  const [paramState, setParamState] = useState<string[]>(optionFromParams.length ? optionFromParams : defaultValue);
 
+  // synchronise options
   useEffect(() => {
-    const params = searchParams.getAll(id);
+    setParamState(options);
-    setParamState(params.length ? params : defaultValue);
+  }, [options]);
-  }, [searchParams, id, defaultValue]);
 
   const toggleValue = (value: string, checked: boolean) => {
     if (checked) {

apps/client/src/common/components/view-params-editor/viewParams.utils.ts

@@ -56,13 +56,18 @@ export function makeCustomFieldSelectOptions(customFields: CustomFields, filterI
 /**
  * Creates data for a select element that displays project custom data
  */
-export function makeProjectDataOptions(projectData: ProjectData): SelectOption[] {
+export function makeProjectDataOptions(
-  return projectData.custom.map((entry, index) => {
+  projectData: ProjectData,
+  additionalOptions: SelectOption[] = [],
+): SelectOption[] {
+  const generatedOptions = projectData.custom.map((entry, index) => {
     return {
       value: `${index}-${entry.title}`,
       label: entry.title,
     };
   });
+
+  return [...additionalOptions, ...generatedOptions];
 }
 
 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };

apps/client/src/common/hooks/useFadeOutOnInactivity.tsx

@@ -23,6 +23,9 @@ export const useFadeOutOnInactivity = (initialState = false) => {
 
     const throttledShowMenu = throttle(setShowMenuTrue, 1000);
 
+    // we call the function on mount, to make sure the menu is hidden
+    throttledShowMenu();
+
     document.addEventListener('mousemove', throttledShowMenu);
     document.addEventListener('keydown', throttledShowMenu);
 

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

@@ -1,6 +1,5 @@
-import { RefObject, useCallback, useEffect, useRef } from 'react';
+import { RefObject, useCallback, useEffect } from 'react';
-
+import { MaybeString } from 'ontime-types';
-import { useSelectedEventId } from './useSocket';
 
 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
   componentRef: RefObject<ComponentRef>,
@@ -18,37 +17,26 @@ function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends H
   scrollRef.current.scrollTo({ top, behavior: 'smooth' });
 }
 
-function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: RefObject<ComponentRef>,
-  scrollRef: RefObject<ScrollRef>,
-  topOffset: number,
-) {
-  if (!componentRef.current || !scrollRef.current) {
-    return;
-  }
-
-  const componentRect = componentRef.current.getBoundingClientRect();
-  const scrollRect = scrollRef.current.getBoundingClientRect();
-  const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - topOffset;
-
-  // maintain current x scroll position
-  scrollRef.current.scrollTo(scrollRef.current.scrollLeft, top);
-}
-
 interface UseFollowComponentProps {
   followRef: RefObject<HTMLElement | null>;
   scrollRef: RefObject<HTMLElement | null>;
   doFollow: boolean;
   topOffset?: number;
   setScrollFlag?: (newValue: boolean) => void;
+  followTrigger?: MaybeString; // this would be an entry id or null
 }
 
-export default function useFollowComponent(props: UseFollowComponentProps) {
+export default function useFollowComponent({
-  const { followRef, scrollRef, doFollow, topOffset = 100, setScrollFlag } = props;
+  followRef,
-
+  scrollRef,
-  // when cursor moves, view should follow
+  doFollow,
+  topOffset = 100,
+  setScrollFlag,
+  followTrigger,
+}: UseFollowComponentProps) {
+  // when trigger moves, view should follow
   useEffect(() => {
-    if (!doFollow) {
+    if (!doFollow || !followTrigger) {
       return;
     }
 
@@ -60,16 +48,14 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
         setScrollFlag?.(false);
       });
     }
-
+  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
-    // eslint-disable-next-line -- the prompt seems incorrect
-  }, [followRef?.current, scrollRef?.current]);
 
   const scrollToRefComponent = useCallback(
     (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
-      if (componentRef.current && containerRef.current) {
+      if (componentRef && containerRef) {
         // @ts-expect-error -- we know this are not null
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        scrollToComponent(componentRef!, scrollRef!, offset);
+        scrollToComponent(componentRef!, containerRef!, offset);
       }
     },
     [followRef, scrollRef, topOffset],
@@ -77,32 +63,3 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
 
   return scrollToRefComponent;
 }
-
-export function useFollowSelected(doFollow: boolean, topOffset = 100) {
-  const selectedEvenId = useSelectedEventId();
-
-  const selectedRef = useRef<HTMLTableRowElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!doFollow) {
-      return;
-    }
-
-    if (selectedEvenId && selectedRef.current && scrollRef.current) {
-      // Use requestAnimationFrame to ensure the component is fully loaded
-      window.requestAnimationFrame(() => {
-        snapToComponent(
-          { current: selectedRef.current } as RefObject<HTMLElement>,
-          { current: scrollRef.current } as RefObject<HTMLElement>,
-          topOffset,
-        );
-      });
-    }
-  }, [doFollow, selectedEvenId, topOffset]);
-
-  return {
-    selectedRef,
-    scrollRef,
-  };
-}

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

@@ -10,7 +10,9 @@ const createSelector =
 
 export const setClientRemote = {
   setIdentify: (payload: { target: string; identify: boolean }) => sendSocket('client', payload),
-  setRedirect: (payload: { target: string; redirect: string }) => sendSocket('client', payload),
+  setRedirect: (payload: { target: string; redirect: string }) => {
+    sendSocket('client', payload);
+  },
   setClientName: (payload: { target: string; rename: string }) => sendSocket('client', payload),
 };
 

apps/client/src/common/models/View.types.ts

@@ -1,19 +0,0 @@
-export type OverridableOptions = {
-  keyColour?: string;
-  textColour?: string;
-  textBackground?: string;
-  font?: string;
-  size?: number;
-  justifyContent?: 'start' | 'center' | 'end';
-  alignItems?: 'start' | 'center' | 'end';
-  left?: string;
-  top?: string;
-  hideNav?: boolean;
-  hideOvertime?: boolean;
-  hideMessagesOverlay?: boolean;
-  hideEndMessage?: boolean;
-  language?: string;
-  showProgressBar?: boolean;
-  hideTimerSeconds?: boolean;
-  removeLeadingZeros?: boolean;
-};

apps/client/src/common/utils/__tests__/rundownMetadata.test.ts

@@ -173,7 +173,7 @@ describe('initRundownMetadata()', () => {
       isPast: false,
       isNextDay: false,
       totalGap: 10,
-      isLinkedToLoaded: false,
+      isLinkedToLoaded: true,
       isLoaded: true,
       groupId: 'group',
       groupColour: 'red',

apps/client/src/common/utils/rundownMetadata.ts

@@ -125,6 +125,7 @@ function processEntry(
   if (entry.id === selectedEventId) {
     processedData.isLoaded = true;
     processedData.isPast = false;
+    processedData.isLinkedToLoaded = true;
   }
 
   if (isOntimeGroup(entry)) {
@@ -158,7 +159,8 @@ function processEntry(
            * a) find an unlinked event
            * b) find a countToEnd event
            */
-          processedData.isLinkedToLoaded = entry.linkStart && !processedData.previousEvent?.countToEnd;
+          processedData.isLinkedToLoaded =
+            entry.linkStart && !processedData.previousEvent?.countToEnd && processedData.isLinkedToLoaded;
         }
 
         if (isNewLatest(entry, processedData.latestEvent)) {

apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss

@@ -15,3 +15,7 @@
   cursor: text  ;
   user-select: text;
 }
+
+.self {
+  background-color: $blue-1100;
+}

apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx

@@ -8,6 +8,7 @@ import { RenameClientModal } from '../../../../../common/components/client-modal
 import Tag from '../../../../../common/components/tag/Tag';
 import { setClientRemote } from '../../../../../common/hooks/useSocket';
 import { useClientStore } from '../../../../../common/stores/clientStore';
+import { cx } from '../../../../../common/utils/styleUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import style from './ClientControlPanel.module.scss';
@@ -71,13 +72,13 @@ export default function ClientList() {
               const { identify, name, path } = client;
               const isCurrent = id === key;
               return (
-                <tr key={key}>
+                <tr key={key} className={cx([isCurrent && style.self])}>
                   <Panel.InlineElements relation='inner' as='td'>
                     {isCurrent && <Tag>SELF</Tag>}
                     {name}
                   </Panel.InlineElements>
                   <td className={style.copiable}>{path}</td>
-                  <Panel.InlineElements relation='inner'>
+                  <Panel.InlineElements relation='inner' as='td'>
                     <Button
                       size='small'
                       className={`${identify ? style.blink : ''}`}

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

@@ -49,6 +49,7 @@ export default function Operator() {
     scrollRef,
     doFollow: !lockAutoScroll,
     topOffset: selectedOffset,
+    followTrigger: selectedEventId,
   });
 
   useWindowTitle('Operator');
@@ -181,7 +182,7 @@ export default function Operator() {
                   const { isPast, isSelected, isLinkedToLoaded, totalGap } = process(nestedEntry);
 
                   // hide past events (if setting) and skipped events
-                  if (hidePast && isPast) {
+                  if ((hidePast && isPast) || nestedEntry.skip) {
                     return null;
                   }
 

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

@@ -13,6 +13,7 @@ import { isStringBoolean } from '../viewers/common/viewUtils';
 
 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
   const fieldOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
     { value: 'title', label: 'Title' },
     { value: 'note', label: 'Note' },
   ]);
@@ -38,7 +39,7 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
           description: 'Field to be shown in the second line of text',
           type: 'option',
           values: fieldOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
         {
           id: 'subscribe',

apps/client/src/features/overview/composite/TimeElements.tsx

@@ -179,8 +179,9 @@ export function OffsetOverview() {
 
 export function ClockOverview({ className }: { className?: string }) {
   const { clock } = useClock();
+  const formattedClock = formatTime(clock);
 
-  return <TimeColumn label='Time now' value={formattedTime(clock)} className={className} />;
+  return <TimeColumn label='Time now' value={formattedClock} className={className} />;
 }
 
 export function TimerOverview({ className }: { className?: string }) {

apps/client/src/features/rundown/Rundown.tsx

@@ -82,7 +82,12 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
 
   const cursorRef = useRef<HTMLDivElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
-  useFollowComponent({ followRef: cursorRef, scrollRef, doFollow: editorMode === AppMode.Run });
+  useFollowComponent({
+    followRef: cursorRef,
+    scrollRef,
+    doFollow: true,
+    followTrigger: editorMode === AppMode.Edit ? cursor : featureData?.selectedEventId,
+  });
 
   // DND KIT
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
@@ -312,7 +317,7 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
     setMetadata(rundownMetadata);
   }, [order, entries, rundownMetadata]);
 
-  // in run mode, we follow selection
+  // in run mode, we follow the playback selection and open groups as needed
   useEffect(() => {
     if (editorMode !== AppMode.Run || !featureData?.selectedEventId) {
       return;

apps/client/src/features/rundown/RundownExport.module.scss

@@ -28,20 +28,22 @@
   padding-inline: 0;
   box-shadow: $box-shadow-right;
 
-  flex: 1 2 auto; /* flex-grow: 1, flex-shrink: 2, flex-basis: auto */
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
   min-width: 38rem;
-  max-width: 60rem;
+  max-width: none;
+  width: 0;
 }
 
 .side {
   max-height: 100%;
-  max-width: 45rem;
   margin: 0.5rem 0;
   padding: 1rem;
   padding-right: 0;
   background-color: $gray-1325;
   border-radius: 0 8px 8px 0;
 
-  flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
-  max-width: 45rem;
+  // width is locked to swatch picker elements
+  min-width: calc(15 * 2rem + 13 * 0.5rem);
+  width: 0;
 }

apps/client/src/features/rundown/rundown.utils.ts

@@ -41,9 +41,9 @@ export function canDrop(
   order?: 'after' | 'before',
   isTargetCollapsed?: boolean,
 ): boolean {
-  // this would mean inserting a group inside another
+  // inserting before would mean adding a group inside another
   if (targetType === 'end-group') {
-    return false;
+    return order === 'after';
   }
 
   // this means swapping places with another group

apps/client/src/features/sharing/GenerateLinkFormExport.tsx

@@ -29,7 +29,7 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
       { value: OntimeView.Timer, label: 'Timer' },
       { value: OntimeView.Cuesheet, label: 'Cuesheet' },
       { value: OntimeView.Operator, label: 'Operator' },
-      { value: '', label: 'Companion' },
+      { value: '<<companion>>', label: 'Companion' },
       ...urlPresetData.map((preset) => ({
         value: `preset-${preset.alias}`,
         label: `URL Preset: ${preset.alias}`,

apps/client/src/sentry.config.ts

@@ -64,7 +64,7 @@ export const initializeSentry = () => {
       /NetworkError/i,
       /The operation couldn't be completed/i,
     ],
-    denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i],
+    denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i, /external\//i],
     beforeSend(event) {
       // Drop errors that happen during known data-unavailable states
       const error = event.exception?.values?.[0]?.value;

apps/client/src/translation/languages/de.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langDe: TranslationObject = {
   'common.expected_finish': 'Erwartetes Ende',
   'common.minutes': 'min',
+  'common.seconds': 'sek',
   'common.now': 'Jetzt',
   'common.next': 'Nächste',
   'common.scheduled_start': 'Geplanter beginn',
@@ -15,6 +16,7 @@ export const langDe: TranslationObject = {
   'common.no_data': 'Keine Daten',
   'countdown.ended': 'Veranstaltung endete um',
   'countdown.running': 'Veranstaltung läuft',
+  'countdown.loaded': 'Veranstaltung geladen',
   'countdown.select_event': 'Wählen Sie eine Veranstaltung aus, um sie zu verfolgen',
   'countdown.to_start': 'Zeit bis zum Start',
   'countdown.waiting': 'Warten auf den Veranstaltungsbeginn',

apps/client/src/translation/languages/es.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langEs: TranslationObject = {
   'common.expected_finish': 'Finalización esperada',
   'common.minutes': 'min',
+  'common.seconds': 'sec',
   'common.now': 'Ahora',
   'common.next': 'Siguiente',
   'common.scheduled_start': 'Inicio programado',
@@ -15,6 +16,7 @@ export const langEs: TranslationObject = {
   'common.no_data': 'Sin datos',
   'countdown.ended': 'Evento finalizado a las',
   'countdown.running': 'Evento en curso',
+  'countdown.loaded': 'Evento está cargado', //TODO: check translation
   'countdown.select_event': 'Seleccionar un evento para seguir',
   'countdown.to_start': 'Tiempo para comenzar',
   'countdown.waiting': 'Esperando el inicio del evento',

apps/client/src/translation/languages/fr.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langFr: TranslationObject = {
   'common.expected_finish': 'Fin estimée à',
   'common.minutes': 'min',
+  'common.seconds': 'sec',
   'common.now': 'Maintenant',
   'common.next': 'A suivre',
   'common.scheduled_start': 'Début prévu',
@@ -15,6 +16,7 @@ export const langFr: TranslationObject = {
   'common.no_data': 'Aucune donnée',
   'countdown.ended': 'Évènement terminé à',
   'countdown.running': 'Évènement en cours',
+  'countdown.loaded': 'Évènement chargé',
   'countdown.select_event': 'Sélectionnez un évènement à suivre',
   'countdown.to_start': 'Évènement commence dans',
   'countdown.waiting': 'En attente du début de l’évènement',

apps/client/src/translation/languages/it.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langIt: TranslationObject = {
   'common.expected_finish': 'Fine Prevista',
   'common.minutes': 'min',
+  'common.seconds': 'sec',
   'common.now': 'Adesso',
   'common.next': 'Prossimo',
   'common.scheduled_start': 'Inizio programmato',
@@ -15,6 +16,7 @@ export const langIt: TranslationObject = {
   'common.no_data': 'Nessun dato disponibile',
   'countdown.ended': 'Evento finito alle',
   'countdown.running': 'Evento in corso',
+  'countdown.loaded': 'Evento caricato', //TODO: check translation
   'countdown.select_event': 'Seleziona un evento da seguire',
   'countdown.to_start': 'Tempo alla partenza',
   'countdown.waiting': "In attesa dell'inizio dell'evento",

apps/client/src/translation/languages/pt.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langPt: TranslationObject = {
   'common.expected_finish': 'Término esperado',
   'common.minutes': 'min',
+  'common.seconds': 'sec',
   'common.now': 'Agora',
   'common.next': 'Próximo',
   'common.scheduled_start': 'Início programado',
@@ -15,6 +16,7 @@ export const langPt: TranslationObject = {
   'common.no_data': 'Sem dados',
   'countdown.ended': 'Evento encerrado às',
   'countdown.running': 'Evento em andamento',
+  'countdown.loaded': 'Evento carregado', //TODO: check translation
   'countdown.select_event': 'Selecione um evento para acompanhar',
   'countdown.to_start': 'Tempo para iniciar',
   'countdown.waiting': 'Aguardando o início do evento',

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

@@ -17,8 +17,11 @@ export const getBackstageOptions = (
   customFields: CustomFields,
   projectData: ProjectData,
 ): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, [{ value: 'note', label: 'Note' }]);
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
-  const projectDataOptions = makeProjectDataOptions(projectData);
+    { value: 'none', label: 'None' },
+    { value: 'note', label: 'Note' },
+  ]);
+  const projectDataOptions = makeProjectDataOptions(projectData, [{ value: 'none', label: 'None' }]);
 
   return [
     { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
@@ -32,7 +35,7 @@ export const getBackstageOptions = (
           description: 'Select the data source for auxiliary text shown in now and next cards',
           type: 'option',
           values: secondaryOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
       ],
     },
@@ -47,7 +50,7 @@ export const getBackstageOptions = (
           description: 'Select a project data source to show in the view',
           type: 'option',
           values: projectDataOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
       ],
     },

apps/client/src/views/countdown/Countdown.scss

@@ -118,7 +118,11 @@ $item-height: 3.5rem;
   }
 
   .sub--live {
-    background-color: $green-700;
+    background-color: $active-green;
+  }
+
+  .sub--armed {
+    background-color: $gray-1325;
   }
 
   .sub__binder {
@@ -140,12 +144,16 @@ $item-height: 3.5rem;
     color: $delay-color;
   }
 
+  .sub__schedule--strike {
+    text-decoration: line-through;
+  }
+
   .sub__schedule--over {
-    color: $playback-over
+    color: $playback-over;
   }
 
   .sub__schedule--under {
-    color: $playback-under
+    color: $playback-under;
   }
 
   .sub__title {

apps/client/src/views/countdown/Countdown.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
-import { EntryId, isOntimeEvent, isPlayableEvent, OntimeEvent, OntimeView } from 'ontime-types';
+import { isOntimeEvent, isPlayableEvent, OntimeEvent, OntimeView } from 'ontime-types';
 
 import Button from '../../common/components/buttons/Button';
 import Empty from '../../common/components/state/Empty';
@@ -9,13 +9,14 @@ import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useClock } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { formatTime, getDefaultFormat } from '../../common/utils/time';
 import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../common/loader/Loader';
 
 import { getCountdownOptions, useCountdownOptions } from './countdown.options';
-import { getOrderedSubscriptions } from './countdown.utils';
+import { CountdownSubscription, getOrderedSubscriptions } from './countdown.utils';
 import CountdownSelect from './CountdownSelect';
 import CountdownSubscriptions from './CountdownSubscriptions';
 import SingleEventCountdown from './SingleEventCountdown';
@@ -39,14 +40,14 @@ export default function CountdownLoader() {
   return <Countdown {...data} />;
 }
 
-function Countdown({ customFields, events, projectData, isMirrored, settings }: CountdownData) {
+function Countdown({ customFields, rundownData, projectData, isMirrored, settings }: CountdownData) {
   const { getLocalizedString } = useTranslation();
   const { subscriptions } = useCountdownOptions();
 
   const [editMode, setEditMode] = useState(false);
 
   // gather rundown data
-  const playableEvents = events.filter((event) => isOntimeEvent(event) && isPlayableEvent(event));
+  const playableEvents = rundownData.filter((entry) => isOntimeEvent(entry) && isPlayableEvent(entry));
 
   // gather presentation data
   const hasEvents = playableEvents.length > 0;
@@ -58,6 +59,8 @@ function Countdown({ customFields, events, projectData, isMirrored, settings }:
     [defaultFormat, customFields, subscriptions],
   );
 
+  console.log(subscriptions)
+
   return (
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
       <ViewParamsEditor target={OntimeView.Countdown} viewOptions={countdownOptions} />
@@ -85,8 +88,8 @@ function Countdown({ customFields, events, projectData, isMirrored, settings }:
 }
 
 interface CountdownContentsProps {
-  playableEvents: OntimeEvent[];
+  playableEvents: ExtendedEntry<OntimeEvent>[];
-  subscriptions: EntryId[];
+  subscriptions: CountdownSubscription;
   goToEditMode: () => void;
 }
 

apps/client/src/views/countdown/CountdownSelect.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { IoArrowBack, IoClose, IoSaveOutline } from 'react-icons/io5';
+import { IoArrowBack, IoClose, IoSaveOutline, IoAlbumsOutline } from 'react-icons/io5';
 import { useNavigate } from 'react-router';
 import { EntryId, OntimeEvent } from 'ontime-types';
 
@@ -7,18 +7,19 @@ import Button from '../../common/components/buttons/Button';
 import { cx } from '../../common/utils/styleUtils';
 import ClockTime from '../../features/viewers/common/clock-time/ClockTime';
 
-import { makeSubscriptionsUrl } from './countdown.utils';
+import { CountdownSubscription, makeSubscriptionsUrl } from './countdown.utils';
 
 import './Countdown.scss';
 
 interface CountdownSelectProps {
   events: OntimeEvent[];
-  subscriptions: EntryId[];
+  subscriptions: CountdownSubscription;
   disableEdit: () => void;
 }
 
 export default function CountdownSelect({ events, subscriptions, disableEdit }: CountdownSelectProps) {
-  const [selected, setSelected] = useState<EntryId[]>(subscriptions);
+  const maybeAllSubscriptions: EntryId[] = subscriptions === 'all' ? events.map((event) => event.id) : subscriptions;
+  const [selected, setSelected] = useState<EntryId[]>(maybeAllSubscriptions);
   const navigate = useNavigate();
 
   /**
@@ -47,6 +48,18 @@ export default function CountdownSelect({ events, subscriptions, disableEdit }:
     navigate(url.search.toString());
   };
 
+  /**
+   * Creates a URL with all
+   * and navigates to it
+   */
+  const applyAll = () => {
+    // we remove events that no longer exist to avoid stale subscriptions
+    const url = makeSubscriptionsUrl(window.location.href, 'all');
+    disableEdit();
+    setSelected([]);
+    navigate(url.search.toString());
+  };
+
   // make a copy of the selected array for quick lookup
   const selectedIds = new Set(selected);
 
@@ -86,6 +99,10 @@ export default function CountdownSelect({ events, subscriptions, disableEdit }:
         <Button variant='subtle' size='xlarge' onClick={disableEdit}>
           <IoArrowBack /> Go back
         </Button>
+        <Button variant='subtle' size='xlarge' onClick={applyAll}>
+          {/* TODO: icon ??? */}
+          <IoAlbumsOutline /> Use All
+        </Button>
         <Button variant='subtle' size='xlarge' onClick={() => setSelected([])} disabled={selected.length === 0}>
           <IoClose /> Clear
         </Button>

apps/client/src/views/countdown/CountdownSubscriptions.tsx

@@ -1,32 +1,37 @@
 import { useEffect, useRef, useState } from 'react';
 import { IoPencil } from 'react-icons/io5';
-import { EntryId, OntimeEvent } from 'ontime-types';
+import { MaybeNumber, OntimeEvent } from 'ontime-types';
+import { dayInMs } from 'ontime-utils';
 
 import Button from '../../common/components/buttons/Button';
 import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
-import {
+import { useExpectedStartData, usePlayback, useSelectedEventId } from '../../common/hooks/useSocket';
-  useCountdownSocket,
+import useReport from '../../common/hooks-query/useReport';
-  useCurrentDay,
-  usePlayback,
-  useRuntimeOffset,
-  useSelectedEventId,
-} from '../../common/hooks/useSocket';
 import { getOffsetState } from '../../common/utils/offset';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
 import FollowButton from '../../features/operator/follow-button/FollowButton';
 import ClockTime from '../../features/viewers/common/clock-time/ClockTime';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
 import { getPropertyValue } from '../../features/viewers/common/viewUtils';
-import { useTranslation } from '../../translation/TranslationProvider';
 
 import { useCountdownOptions } from './countdown.options';
-import { getIsLive, getSubscriptionDisplayData, sanitiseTitle, timerProgress } from './countdown.utils';
+import {
+  CountdownEvent,
+  extendEventData,
+  getIsLive,
+  isOutsideRange,
+  preferredFormat12,
+  preferredFormat24,
+  useSubscriptionDisplayData,
+} from './countdown.utils';
 
 import './Countdown.scss';
 
 interface CountdownSubscriptionsProps {
-  subscribedEvents: OntimeEvent[];
+  subscribedEvents: ExtendedEntry<OntimeEvent>[];
   goToEditMode: () => void;
 }
 
@@ -36,6 +41,9 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
   const { selectedEventId } = useSelectedEventId();
   const showFab = useFadeOutOnInactivity(true);
 
+  const { data: reportData } = useReport();
+  const { offset, currentDay, actualStart, plannedStart, mode } = useExpectedStartData();
+
   const timeoutId = useRef<NodeJS.Timeout | null>(null);
   const [lockAutoScroll, setLockAutoScroll] = useState(false);
   const selectedRef = useRef<HTMLDivElement | null>(null);
@@ -45,6 +53,7 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
     scrollRef,
     doFollow: !lockAutoScroll,
     topOffset: 0,
+    followTrigger: selectedEventId,
   });
 
   // reset scroll if nothing is selected
@@ -92,23 +101,19 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
       {subscribedEvents.map((event) => {
         const secondaryData = getPropertyValue(event, secondarySource);
         const isLive = getIsLive(event.id, selectedEventId, playback);
-
+        const isArmed = !isLive && event.id === selectedEventId;
+        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
+        const title = event.title.length ? event.title : ' '; // insert utf-8 empty space to avoid the line collapsing
         return (
-          <div key={event.id} ref={isLive ? selectedRef : undefined} className={cx(['sub', isLive && 'sub--live'])}>
+          <div
+            key={event.id}
+            ref={isLive ? selectedRef : undefined}
+            className={cx(['sub', isLive && 'sub--live', isArmed && 'sub--armed'])}
+          >
             <div className='sub__binder' style={{ '--user-color': event.colour }} />
-            <div className={cx(['sub__schedule', event.delay > 0 && 'sub__schedule--delayed'])}>
+            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
-              {showExpected ? (
+            <SubscriptionStatus event={countdownEvent} />
-                <ExpectedSchedule timeStart={event.timeStart} timeEnd={event.timeEnd} delay={event.delay} />
+            <div className={cx(['sub__title', !event.title && 'subdued'])}>{title}</div>
-              ) : (
-                <>
-                  <ClockTime value={event.timeStart + event.delay} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
-                  →
-                  <ClockTime value={event.timeEnd + event.delay} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
-                </>
-              )}
-            </div>
-            <SubscriptionStatus key={event.id} event={event} selectedEventId={selectedEventId} />
-            <div className={cx(['sub__title', !event.title && 'subdued'])}>{sanitiseTitle(event.title)}</div>
             {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
           </div>
         );
@@ -123,63 +128,82 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
   );
 }
 
-interface ExpectedScheduleProps {
+type ScheduleTimeProps = {
-  timeStart: number;
+  event: CountdownEvent;
-  timeEnd: number;
+  showExpected: boolean;
-  delay: number;
+};
-}
+//TODO: consider relative mode
-function ExpectedSchedule(props: ExpectedScheduleProps) {
+export function ScheduleTime(props: ScheduleTimeProps) {
-  const { timeStart, timeEnd, delay } = props;
+  const { event, showExpected } = props;
+  const { timeStart, duration, delay, expectedStart, countToEnd } = event;
 
-  const { offset } = useRuntimeOffset();
+  const plannedStart = timeStart + delay + event.dayOffset * dayInMs;
 
-  // offset is negative if we are ahead
+  // only show new exacted value if outside  range of the planned value
-  const expectedOffset = offset - delay;
+  const isExpectedValueShow = showExpected && isOutsideRange(plannedStart, expectedStart);
-  const expectedState = getOffsetState(expectedOffset);
+
+  const plannedStateClass = isExpectedValueShow ? 'sub__schedule--strike' : delay !== 0 ? 'sub__schedule--delayed' : '';
+
+  const expectedStateClass = `sub__schedule--${getOffsetState(expectedStart - plannedStart)}`;
+  const plannedEnd = plannedStart + duration + delay;
+  const expectedEnd = countToEnd ? Math.max(expectedStart + duration, plannedEnd) : expectedStart + duration;
+  const expectedEndClass = `sub__schedule--${getOffsetState(expectedEnd - plannedEnd)}`;
 
   return (
-    <>
+    <div className='sub__schedule'>
       <ClockTime
-        value={timeStart - expectedOffset}
+        value={plannedStart}
-        className={`sub__schedule--${expectedState}`}
+        preferredFormat12={preferredFormat12}
-        preferredFormat12='h:mm'
+        preferredFormat24={preferredFormat24}
-        preferredFormat24='HH:mm'
+        className={plannedStateClass}
       />
-      →
+      {!isExpectedValueShow && (
-      <ClockTime value={timeEnd - expectedOffset} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+        <>
-    </>
+          →
+          <ClockTime
+            value={plannedEnd}
+            preferredFormat12={preferredFormat12}
+            preferredFormat24={preferredFormat24}
+            className={plannedStateClass}
+          />
+        </>
+      )}
+      {isExpectedValueShow && (
+        <>
+          <ClockTime
+            value={expectedStart}
+            className={expectedStateClass}
+            preferredFormat12={preferredFormat12}
+            preferredFormat24={preferredFormat24}
+          />
+          →
+          <ClockTime
+            value={expectedEnd}
+            className={expectedEndClass}
+            preferredFormat12={preferredFormat12}
+            preferredFormat24={preferredFormat24}
+          />
+        </>
+      )}
+    </div>
   );
 }
 
 interface SubscriptionStatusProps {
-  event: OntimeEvent;
+  event: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number };
-  selectedEventId: EntryId | null;
 }
 
-function SubscriptionStatus({ event, selectedEventId }: SubscriptionStatusProps) {
+function SubscriptionStatus({ event }: SubscriptionStatusProps) {
-  const { getLocalizedString } = useTranslation();
+  const { status, statusDisplay, timeDisplay } = useSubscriptionDisplayData(event);
-  const { currentDay } = useCurrentDay();
-  const { offset } = useRuntimeOffset();
-  const { showExpected } = useCountdownOptions();
-  const { playback, current, clock } = useCountdownSocket();
-
-  // TODO: use reporter values as in the event block chip
-  const { status, timer } = getSubscriptionDisplayData(
-    current,
-    playback,
-    clock,
-    event,
-    selectedEventId,
-    offset,
-    currentDay,
-    getLocalizedString('common.minutes'),
-    showExpected,
-  );
 
   return (
     <>
-      <div className='sub__status'>{getLocalizedString(timerProgress[status])}</div>
+      <div className='sub__status'>{statusDisplay}</div>
-      <div className='sub__timer'>{timer}</div>
+      {status === 'done' ? (
+        <SuperscriptTime className='sub__timer' time={timeDisplay} />
+      ) : (
+        <div className='sub__timer'>{timeDisplay}</div>
+      )}
     </>
   );
 }

apps/client/src/views/countdown/SingleEventCountdown.scss

@@ -1,11 +1,10 @@
 @use '@/theme/viewerDefs' as *;
 
 .single-container {
-  height: 100%;
+  margin-top: 7.5vh;
-  margin-top: 5vh;
   display: flex;
   flex-direction: column;
-  gap: $view-element-gap;
+  gap: 5rem;
 }
 
 .event__title {
@@ -13,13 +12,25 @@
   padding: $view-card-padding;
   border-radius: $element-border-radius;
   font-size: clamp(40px, 4.5vw, 80px);
-  line-height: 1.1em;
+  line-height: 1.1;
   text-align: center;
+  border-left: 0.25em solid;
+  border-color: var(--card-background-color-override, $viewer-card-bg-color);
+
+  .secondary {
+    text-align: left;
+    font-size: $title-font-size;
+  }
+
+  .sub__schedule {
+    color: inherit;
+    font-size: $base-font-size;
+  }
 }
 
 .event__status {
   color: var(--secondary-color-override, $viewer-secondary-color);
-  font-size: clamp(2rem, 3.5vw, 3.5rem);
+  font-size: $header-font-size;
   font-weight: 600;
   text-transform: uppercase;
 }

apps/client/src/views/countdown/SingleEventCountdown.tsx

@@ -1,29 +1,57 @@
 import { IoPencil } from 'react-icons/io5';
-import { OntimeEvent } from 'ontime-types';
+import { MaybeNumber, OntimeEvent } from 'ontime-types';
+import { getExpectedStart } from 'ontime-utils';
 
 import Button from '../../common/components/buttons/Button';
 import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
-import { useCountdownSocket, useCurrentDay, useRuntimeOffset, useSelectedEventId } from '../../common/hooks/useSocket';
+import { useExpectedStartData } from '../../common/hooks/useSocket';
+import useReport from '../../common/hooks-query/useReport';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
-import { useTranslation } from '../../translation/TranslationProvider';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
+import { getPropertyValue } from '../../features/viewers/common/viewUtils';
 
 import { useCountdownOptions } from './countdown.options';
-import { getSubscriptionDisplayData, timerProgress } from './countdown.utils';
+import { useSubscriptionDisplayData } from './countdown.utils';
+import { ScheduleTime } from './CountdownSubscriptions';
 
 import './SingleEventCountdown.scss';
 
 interface SingleEventCountdownProps {
-  subscribedEvent: OntimeEvent;
+  subscribedEvent: ExtendedEntry<OntimeEvent>;
   goToEditMode: () => void;
 }
 
 export default function SingleEventCountdown({ subscribedEvent, goToEditMode }: SingleEventCountdownProps) {
+  const { secondarySource, showExpected } = useCountdownOptions();
   const showFab = useFadeOutOnInactivity(true);
+  const { data: reportData } = useReport();
+
+  const { offset, currentDay, actualStart, plannedStart, mode } = useExpectedStartData();
+  const { totalGap, isLinkedToLoaded } = subscribedEvent;
+  const expectedStart = getExpectedStart(subscribedEvent, {
+    currentDay,
+    totalGap,
+    actualStart,
+    plannedStart,
+    isLinkedToLoaded,
+    offset,
+    mode,
+  });
+
+  const { endedAt } = reportData[subscribedEvent.id] ?? { endedAt: null };
+  const countdownEvent = { ...subscribedEvent, expectedStart, endedAt };
+  const title = subscribedEvent.title.length ? subscribedEvent.title : ' '; // insert utf-8 empty space to avoid the line collapsing
+  const secondaryData = getPropertyValue(subscribedEvent, secondarySource);
 
   return (
     <div className='single-container' data-testid='countdown-event'>
-      <SubscriptionStatus event={subscribedEvent} />
+      <SubscriptionStatus event={countdownEvent} />
-      <div className='event__title'>{subscribedEvent.title}</div>
+      <div className='event__title' style={{ borderColor: countdownEvent.colour }}>
+        <ScheduleTime event={countdownEvent} showExpected={showExpected} />
+        {title}
+        {secondaryData && <div className='secondary'>{secondaryData}</div>}
+      </div>
       <div className={cx(['fab-container', !showFab && 'fab-container--hidden'])}>
         <Button variant='primary' size='xlarge' onClick={goToEditMode}>
           <IoPencil /> Edit
@@ -34,34 +62,20 @@ export default function SingleEventCountdown({ subscribedEvent, goToEditMode }:
 }
 
 interface SubscriptionStatusProps {
-  event: OntimeEvent;
+  event: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number };
 }
 
 function SubscriptionStatus({ event }: SubscriptionStatusProps) {
-  const { getLocalizedString } = useTranslation();
+  const { status, statusDisplay, timeDisplay } = useSubscriptionDisplayData(event);
-  const { selectedEventId } = useSelectedEventId();
-  const { currentDay } = useCurrentDay();
-  const { offset } = useRuntimeOffset();
-  const { showExpected } = useCountdownOptions();
-  const { playback, current, clock } = useCountdownSocket();
-
-  // TODO: use reporter values as in the event block chip
-  const { status, timer } = getSubscriptionDisplayData(
-    current,
-    playback,
-    clock,
-    event,
-    selectedEventId,
-    offset,
-    currentDay,
-    getLocalizedString('common.minutes'),
-    showExpected,
-  );
 
   return (
     <>
-      <div className='event__status'>{getLocalizedString(timerProgress[status])}</div>
+      <div className='event__status'>{statusDisplay}</div>
-      <div className='event__timer'>{timer}</div>
+      {status === 'done' ? (
+        <SuperscriptTime className='event__timer' time={timeDisplay} />
+      ) : (
+        <div className='event__timer'>{timeDisplay}</div>
+      )}
     </>
   );
 }

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

@@ -8,13 +8,17 @@ 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 } from '../../features/viewers/common/viewUtils';
+import { CountdownSubscription } from './countdown.utils';
 
 export const getCountdownOptions = (
   timeFormat: string,
   customFields: CustomFields,
-  persistedSubscriptions: EntryId[],
+  persistedSubscriptions: CountdownSubscription,
 ): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, [{ value: 'note', label: 'Note' }]);
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
+    { value: 'note', label: 'Note' },
+  ]);
 
   return [
     { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
@@ -28,7 +32,7 @@ export const getCountdownOptions = (
           description: 'Select the data source for auxiliary text shown in the card',
           type: 'option',
           values: secondaryOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
       ],
     },
@@ -52,7 +56,7 @@ export const getCountdownOptions = (
           id: 'sub',
           title: 'Event subscription',
           description: 'The events to follow',
-          values: persistedSubscriptions,
+          values: persistedSubscriptions === 'all' ? ['all'] : persistedSubscriptions,
           type: 'persist',
         },
       ],
@@ -61,7 +65,7 @@ export const getCountdownOptions = (
 };
 
 type CountdownOptions = {
-  subscriptions: EntryId[];
+  subscriptions: CountdownSubscription;
   secondarySource: keyof OntimeEvent | null;
   showExpected: boolean;
 };
@@ -82,8 +86,10 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
     return searchParams.getAll(key) as EntryId[];
   };
 
+  const subscriptions = getArrayValues('sub');
+
   return {
-    subscriptions: getArrayValues('sub'),
+    subscriptions: subscriptions.at(0) === 'all' ? 'all' : subscriptions,
     secondarySource: getValue('secondary-src') as keyof OntimeEvent | null,
     showExpected: isStringBoolean(getValue('showExpected')),
   };

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

@@ -1,8 +1,11 @@
-import { EntryId, MaybeNumber, OntimeEvent, Playback, TimerType } from 'ontime-types';
+import { EntryId, MaybeNumber, OffsetMode, OntimeEntry, OntimeEvent, OntimeReport, Playback } from 'ontime-types';
-import { dayInMs } from 'ontime-utils';
+import { getExpectedStart, MILLIS_PER_MINUTE, removeSeconds } from 'ontime-utils';
 
-import { getFormattedTimer } from '../../features/viewers/common/viewUtils';
+import { useCountdownSocket } from '../../common/hooks/useSocket';
-import type { TranslationKey } from '../../translation/TranslationProvider';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
+import { timerPlaceholderMin } from '../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../common/utils/time';
+import { type TranslationKey, useTranslation } from '../../translation/TranslationProvider';
 
 /**
  * Parses string as a title
@@ -11,6 +14,11 @@ export function sanitiseTitle(title: string | null) {
   return title ?? '{no title}';
 }
 
+export type CountdownSubscription = EntryId[] | 'all';
+
+export const preferredFormat12 = 'h:mm a';
+export const preferredFormat24 = 'HH:mm';
+
 /**
  * Whether the current event is live
  */
@@ -18,144 +26,103 @@ export function getIsLive(currentId: EntryId, selectedId: EntryId | null, playba
   return currentId === selectedId && playback !== Playback.Armed;
 }
 
-const subscriptionTimerDisplayOptions = {
+export type ProgressStatus = 'future' | 'due' | 'live' | 'done' | 'pending' | 'loaded';
-  removeSeconds: true,
+type TimerMessage = Record<ProgressStatus, TranslationKey>;
-  removeLeadingZero: true,
-} as const;
-
-const subscriptionScheduledTimeDisplayOptions = {
-  removeSeconds: true,
-  removeLeadingZero: false,
-} as const;
-
-type TimerMessage = Record<string, TranslationKey>;
-export type ProgressStatus = 'future' | 'due' | 'live' | 'done';
 
 export const timerProgress: TimerMessage = {
   future: 'countdown.to_start',
   due: 'timeline.due',
-  live: 'timeline.live',
+  live: 'countdown.running',
+  pending: 'countdown.waiting',
+  loaded: 'countdown.loaded',
   done: 'countdown.ended',
 };
 
+export function getFormattedTime(
+  value: MaybeNumber,
+  status: ProgressStatus,
+  minText: string,
+  secText: string,
+  dueText: string,
+) {
+  if (value === null) return timerPlaceholderMin;
+  if (status === 'future' || status === 'live') {
+    if (value <= 0) return dueText.toUpperCase();
+    return formatDuration(value, value > MILLIS_PER_MINUTE * 2)
+      .replace('m', `${minText} `)
+      .replace('s', secText);
+  }
+  return removeSeconds(formatTime(value));
+}
+
 /**
  * Returns a parsed timer and relevant status message
  * Handles events in different days but disregards whether an event has actually played
- * TODO: get data from reporter and check if the event has played
- * TODO: get timer data granularly
  */
-export function getSubscriptionDisplayData(
+export function useSubscriptionDisplayData(
-  current: MaybeNumber,
+  subscribedEvent: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number },
-  playback: Playback,
+): { status: ProgressStatus; statusDisplay: string; timeDisplay: string } {
-  clock: number,
+  const { playback, current, clock } = useCountdownSocket();
-  subscribedEvent: OntimeEvent,
+  const { getLocalizedString } = useTranslation();
-  selectedId: EntryId | null,
-  offset: number,
-  currentDay: number,
-  minutesString: string,
-  showExpected = false,
-): { status: ProgressStatus; timer: string } {
-  const offsetAndDelay = showExpected ? offset + subscribedEvent.delay : 0;
 
-  if (selectedId === subscribedEvent.id) {
+  const bigDuration = (value: number) => {
-    // 1. An event that is loaded but not running is {'due': <countdown | overtime>}
+    if (value <= 0) return getLocalizedString('countdown.overtime').toUpperCase();
+    return formatDuration(value, value > MILLIS_PER_MINUTE * 2)
+      .replace('m', `${getLocalizedString('common.minutes')} `)
+      .replace('s', getLocalizedString('common.seconds'));
+  };
+
+  if (subscribedEvent.isLoaded) {
     if (playback === Playback.Armed) {
-      // if we are following the event, but it is not running, we show the scheduled start
       return {
-        status: 'due',
+        status: 'loaded',
-        timer: getFormattedTimer(
+        statusDisplay: getLocalizedString(timerProgress['loaded']),
-          subscribedEvent.timeStart + offsetAndDelay,
+        timeDisplay: bigDuration(subscribedEvent.duration),
-          TimerType.CountDown,
-          minutesString,
-          subscriptionScheduledTimeDisplayOptions,
-        ),
       };
     }
 
-    // 2. An event with a time-to-start lower than 0 is {'due': <countdown | scheduledStart>}, show the running timer
     return {
       status: 'live',
-      timer: getFormattedTimer(current, TimerType.CountDown, minutesString, subscriptionTimerDisplayOptions),
+      statusDisplay: getLocalizedString(timerProgress['live']),
+      timeDisplay: bigDuration(current ?? 0),
     };
   }
 
-  /**
+  if (playback === Playback.Stop || playback === Playback.Armed) {
-   * If the running timer is not the one we are following
-   * we can be in future, due or have ended
-   */
-
-  // 3. event is the day after, we show a countdown to start
-  if (subscribedEvent.dayOffset > currentDay) {
-    const dayOffset = (subscribedEvent.dayOffset - currentDay) * dayInMs;
     return {
-      status: 'future',
+      status: 'pending',
-      timer: getFormattedTimer(
+      statusDisplay: getLocalizedString(timerProgress['pending']),
-        subscribedEvent.timeStart + dayOffset - clock - offsetAndDelay,
+      timeDisplay: ' ',
-        TimerType.CountDown,
-        minutesString,
-        subscriptionTimerDisplayOptions,
-      ),
     };
   }
 
-  // 4. event is the before after, show the scheduled end
+  if (subscribedEvent.isPast) {
-  // TODO: get the time from the reporter
-  if (subscribedEvent.dayOffset < currentDay) {
     return {
       status: 'done',
-      timer: getFormattedTimer(
+      statusDisplay: getLocalizedString(timerProgress['done']),
-        subscribedEvent.timeEnd,
+      timeDisplay: formatTime(subscribedEvent.endedAt, { format12: preferredFormat12, format24: preferredFormat24 }),
-        TimerType.CountDown,
-        minutesString,
-        subscriptionScheduledTimeDisplayOptions,
-      ),
     };
   }
 
-  // 5. if event is in future, we count to the scheduled start
+  if (subscribedEvent.expectedStart - clock <= 0) {
-  // TODO: get time until
-  if (clock < subscribedEvent.timeStart) {
     return {
-      status: 'future',
+      status: 'due',
-      timer: getFormattedTimer(
+      statusDisplay: getLocalizedString(timerProgress['future']), // We use future here on purpose for the look of it
-        subscribedEvent.timeStart - clock - offsetAndDelay,
+      timeDisplay: getLocalizedString(timerProgress['due']).toUpperCase(),
-        TimerType.CountDown,
-        minutesString,
-        subscriptionTimerDisplayOptions,
-      ),
     };
   }
 
-  // 6. if event has ended, we show the scheduled end
-  // TODO: get the time from the reporter
-  if (clock > subscribedEvent.timeEnd) {
-    return {
-      status: 'done',
-      timer: getFormattedTimer(
-        subscribedEvent.timeEnd,
-        TimerType.CountDown,
-        minutesString,
-        subscriptionScheduledTimeDisplayOptions,
-      ),
-    };
-  }
-
-  // the event here has to be due, we show the countdown the expected start time
   return {
-    status: 'due',
+    status: 'future',
-    timer: getFormattedTimer(
+    statusDisplay: getLocalizedString(timerProgress['future']),
-      subscribedEvent.timeStart + offsetAndDelay,
+    timeDisplay: bigDuration(subscribedEvent.expectedStart - clock),
-      TimerType.CountDown,
-      minutesString,
-      subscriptionScheduledTimeDisplayOptions,
-    ),
   };
 }
 
 /**
  * Adds a set of subscriptions to the URL parameters
  */
-export function makeSubscriptionsUrl(urlRef: string, subscriptions: EntryId[]) {
+export function makeSubscriptionsUrl(urlRef: string, subscriptions: CountdownSubscription) {
   const url = new URL(urlRef);
   const newParams = new URLSearchParams();
 
@@ -166,10 +133,14 @@ export function makeSubscriptionsUrl(urlRef: string, subscriptions: EntryId[]) {
     }
   }
 
-  // add new subscriptions
+  if (subscriptions === 'all') {
-  subscriptions.forEach((id) => {
+    newParams.append('sub', 'all');
-    newParams.append('sub', id);
+  } else {
-  });
+    // add new subscriptions
+    subscriptions.forEach((id) => {
+      newParams.append('sub', id);
+    });
+  }
 
   url.search = newParams.toString();
 
@@ -181,34 +152,39 @@ export function makeSubscriptionsUrl(urlRef: string, subscriptions: EntryId[]) {
  * Since the original array is already ordered, we simply filter out the events
  * which are not in the subscriptions list.
  */
-export function getOrderedSubscriptions(subscriptions: EntryId[], playableEvents: OntimeEvent[]): OntimeEvent[] {
+export function getOrderedSubscriptions<T extends OntimeEntry>(
+  subscriptions: CountdownSubscription,
+  playableEvents: T[],
+): T[] {
+  if (subscriptions === 'all') return playableEvents;
   return playableEvents.filter((event) => subscriptions.includes(event.id));
 }
 
-/**
+export function isOutsideRange(a: number, b: number): boolean {
- * Checks through the rundown whether the current event is linked to the loaded event
+  return Math.abs(a - b) > MILLIS_PER_MINUTE;
- */
+}
-export function isLinkedToLoadedEvent(events: OntimeEvent[], loadedId: EntryId | null, currentId: EntryId): boolean {
+
-  // if nothing is loaded, we return true to simplify the logic
+export type CountdownEvent = ExtendedEntry<OntimeEvent> & { expectedStart: number; endedAt: MaybeNumber };
-  if (!loadedId) {
+
-    return true;
+export function extendEventData(
-  }
+  event: ExtendedEntry<OntimeEvent>,
-
+  currentDay: number,
-  const loadedIndex = events.findIndex((event) => event.id === loadedId);
+  actualStart: MaybeNumber,
-  if (loadedIndex === -1) {
+  plannedStart: MaybeNumber,
-    return true;
+  offset: number,
-  }
+  mode: OffsetMode,
-
+  reportData: OntimeReport,
-  for (let i = loadedIndex; i < events.length; i++) {
+): CountdownEvent {
-    const event = events[i];
+  const { totalGap, isLinkedToLoaded } = event;
-    if (event.id === currentId) {
+  const expectedStart = getExpectedStart(event, {
-      return true;
+    currentDay,
-    }
+    totalGap,
-
+    actualStart,
-    if (event.linkStart === null) {
+    plannedStart,
-      return false;
+    isLinkedToLoaded,
-    }
+    offset,
-  }
+    mode,
-
+  });
-  return true;
+  const { endedAt } = reportData[event.id] ?? { endedAt: null };
+  return { ...event, expectedStart, endedAt };
 }

apps/client/src/views/countdown/useCountdownData.ts

@@ -2,14 +2,15 @@ import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useFlatRundown } from '../../common/hooks-query/useRundown';
+import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { aggregateQueryStatus, ViewData } from '../utils/viewLoader.utils';
 
 export interface CountdownData {
   customFields: CustomFields;
-  events: OntimeEntry[];
+  rundownData: ExtendedEntry<OntimeEntry>[];
   projectData: ProjectData;
   isMirrored: boolean;
   settings: Settings;
@@ -20,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundown();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -28,7 +29,7 @@ export function useCountdownData(): ViewData<CountdownData> {
   return {
     data: {
       customFields,
-      events: rundownData,
+      rundownData,
       projectData,
       isMirrored,
       settings,

apps/client/src/views/cuesheet/cuesheet-dnd/CuesheetDnd.tsx

@@ -11,14 +11,14 @@ import {
 import { ColumnDef } from '@tanstack/react-table';
 
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
-import useColumnManager from '../cuesheet-table/useColumnManager';
+import { useColumnOrder } from '../cuesheet-table/useColumnManager';
 
 interface CuesheetDndProps {
   columns: ColumnDef<ExtendedEntry>[];
 }
 
 export default function CuesheetDnd({ columns, children }: PropsWithChildren<CuesheetDndProps>) {
-  const { columnOrder, saveColumnOrder } = useColumnManager(columns);
+  const { columnOrder, saveColumnOrder } = useColumnOrder(columns);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -13,14 +13,14 @@ import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../cuesheet.options';
 
-import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
+import { CuesheetHeader, SortableCuesheetHeader } from './cuesheet-table-elements/CuesheetHeader';
 import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
 import GroupRow from './cuesheet-table-elements/GroupRow';
 import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
 import CuesheetTableMenu from './cuesheet-table-menu/CuesheetTableMenu';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
-import useColumnManager from './useColumnManager';
+import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';
 
 import style from './CuesheetTable.module.scss';
 
@@ -79,8 +79,9 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
     [cuesheetMode, data, hideIndexColumn, hideTableSeconds, showDelayedTimes, updateEntry, updateTimer],
   );
 
-  const { columnVisibility, columnOrder, columnSizing, resetColumnOrder, setColumnVisibility, setColumnSizing } =
+  const { columnOrder, resetColumnOrder } = useColumnOrder(columns);
-    useColumnManager(columns);
+  const { columnSizing, setColumnSizing } = useColumnSizes();
+  const { columnVisibility, setColumnVisibility } = useColumnVisibility();
 
   const table = useReactTable({
     data,
@@ -167,7 +168,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
               />
             );
           },
-          TableRow: ({ item: _item, ...virtuosoProps }) => {
+          TableRow: ({ item: _item, style: injectedStyles, ...virtuosoProps }) => {
             // eslint-disable-next-line react/destructuring-assignment
             const rowIndex = virtuosoProps['data-index'];
             const row = rows[rowIndex];
@@ -183,13 +184,16 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                   rowId={row.id}
                   rowIndex={row.index}
                   table={table}
+                  injectedStyles={injectedStyles}
                   {...virtuosoProps}
                 />
               );
             }
 
             if (isOntimeDelay(entry)) {
-              return <DelayRow key={key} duration={entry.duration} {...virtuosoProps} />;
+              return (
+                <DelayRow key={key} duration={entry.duration} injectedStyles={injectedStyles} {...virtuosoProps} />
+              );
             }
 
             if (isOntimeMilestone(entry)) {
@@ -204,6 +208,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                   rowId={row.id}
                   rowIndex={rowIndex}
                   table={table}
+                  injectedStyles={injectedStyles}
                   {...virtuosoProps}
                 />
               );
@@ -225,6 +230,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                 rowId={row.id}
                 rowIndex={rowIndex}
                 table={table}
+                injectedStyles={injectedStyles}
                 {...virtuosoProps}
               />
             );
@@ -232,11 +238,14 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
           TableHead: (virtuosoProps) => <thead className={style.tableHeader} {...virtuosoProps} />,
         }}
         fixedHeaderContent={() => {
-          return table
+          return table.getHeaderGroups().map((headerGroup) => {
-            .getHeaderGroups()
+            const HeaderComponent = table.getState().columnSizingInfo.isResizingColumn
-            .map((headerGroup) => (
+              ? CuesheetHeader
-              <CuesheetHeader key={headerGroup.id} cuesheetMode={cuesheetMode} headerGroup={headerGroup} />
+              : SortableCuesheetHeader;
-            ));
+
+            // if the table is being resized, we render non-sortable headers to avoid performance issues
+            return <HeaderComponent key={headerGroup.id} cuesheetMode={cuesheetMode} headerGroup={headerGroup} />;
+          });
         }}
       />
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx

@@ -7,7 +7,7 @@ import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
 
-import { SortableCell } from './SortableCell';
+import { Draggable, SortableCell, TableCell } from './SortableCell';
 
 import style from '../CuesheetTable.module.scss';
 
@@ -16,8 +16,9 @@ interface CuesheetHeaderProps {
   cuesheetMode: AppMode;
 }
 
-export default function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHeaderProps) {
+export function SortableCuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHeaderProps) {
   const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
+
   return (
     <tr key={headerGroup.id}>
       {cuesheetMode === AppMode.Edit && <th className={style.actionColumn} tabIndex={-1} />}
@@ -43,8 +44,10 @@ export default function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHe
           return (
             <SortableCell
               key={header.column.columnDef.id}
-              header={header}
+              columnId={header.column.id}
+              colSpan={header.colSpan}
               injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
+              draggable={<Draggable header={header} />}
             >
               {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
             </SortableCell>
@@ -54,3 +57,43 @@ export default function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHe
     </tr>
   );
 }
+
+export function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHeaderProps) {
+  const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
+
+  return (
+    <tr key={headerGroup.id}>
+      {cuesheetMode === AppMode.Edit && <th className={style.actionColumn} tabIndex={-1} />}
+      {!hideIndexColumn && (
+        <th className={style.indexColumn} tabIndex={-1}>
+          #
+        </th>
+      )}
+      {headerGroup.headers.map((header) => {
+        const customBackground = header.column.columnDef.meta?.colour;
+        const canWrite = header.column.columnDef.meta?.canWrite;
+
+        const customStyles: CSSProperties = {
+          opacity: canWrite ? 1 : 0.6,
+        };
+        if (customBackground) {
+          const customColour = getAccessibleColour(customBackground);
+          customStyles.backgroundColor = customColour.backgroundColor;
+          customStyles.color = customColour.color;
+        }
+
+        return (
+          <TableCell
+            key={header.column.columnDef.id}
+            columnId={header.column.id}
+            colSpan={header.colSpan}
+            injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
+            draggable={<Draggable header={header} />}
+          >
+            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+          </TableCell>
+        );
+      })}
+    </tr>
+  );
+}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 
 import { millisToDelayString } from '../../../../common/utils/dateConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
@@ -7,9 +7,10 @@ import style from './DelayRow.module.scss';
 
 interface DelayRowProps {
   duration: number;
+  injectedStyles?: CSSProperties;
 }
 
-function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
+function DelayRow({ duration, injectedStyles, ...virtuosoProps }: DelayRowProps) {
   const hideDelays = usePersistedCuesheetOptions((state) => state.hideDelays);
 
   if (hideDelays || duration === 0) {
@@ -19,7 +20,7 @@ function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
   const delayTime = millisToDelayString(duration, 'expanded');
 
   return (
-    <tr className={style.delayRow} data-testid='cuesheet-delay' {...virtuosoProps}>
+    <tr className={style.delayRow} data-testid='cuesheet-delay' style={injectedStyles} {...virtuosoProps}>
       <td tabIndex={0}>{delayTime}</td>
     </tr>
   );

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { CSSProperties, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
@@ -26,6 +26,7 @@ interface EventRowProps {
   parent: EntryId | null;
   rowIndex: number;
   table: Table<ExtendedEntry<OntimeEntry>>;
+  injectedStyles?: CSSProperties;
 }
 
 export default function EventRow({
@@ -42,6 +43,7 @@ export default function EventRow({
   parent,
   rowIndex,
   table,
+  injectedStyles,
   ...virtuosoProps
 }: EventRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -81,6 +83,7 @@ export default function EventRow({
         parent && style.hasParent,
       ])}
       style={{
+        ...injectedStyles,
         opacity: `${isPast ? '0.2' : '1'}`,
         '--user-bg': groupColour ?? 'transparent',
       }}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.module.scss

@@ -4,3 +4,7 @@
   padding-top: 0.25em;
   width: 100%;
 }
+
+.multiline {
+  white-space: break-spaces;
+}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.tsx

@@ -2,6 +2,10 @@ import { PropsWithChildren } from 'react';
 
 import style from './GhostedText.module.scss';
 
-export default function GhostedText({ children }: PropsWithChildren) {
+interface GhostedTextProps {
-  return <div className={style.ghostedText}>{children}</div>;
+  multiline?: boolean;
+}
+
+export default function GhostedText({ children, multiline }: PropsWithChildren<GhostedTextProps>) {
+  return <div className={`${style.ghostedText} ${multiline ? style.multiline : ''}`}>{children}</div>;
 }

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.tsx

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
@@ -15,9 +16,18 @@ interface GroupRowProps {
   rowId: string;
   rowIndex: number;
   table: Table<ExtendedEntry>;
+  injectedStyles?: CSSProperties;
 }
 
-export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...virtuosoProps }: GroupRowProps) {
+export default function GroupRow({
+  groupId,
+  colour,
+  rowId,
+  rowIndex,
+  table,
+  injectedStyles,
+  ...virtuosoProps
+}: GroupRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
     cuesheetMode: AppMode.Edit,
     hideIndexColumn: false,
@@ -26,7 +36,12 @@ export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...v
   const openMenu = useCuesheetTableMenu((store) => store.openMenu);
 
   return (
-    <tr className={style.groupRow} style={{ '--user-bg': colour }} data-testid='cuesheet-group' {...virtuosoProps}>
+    <tr
+      className={style.groupRow}
+      style={{ ...injectedStyles, '--user-bg': colour }}
+      data-testid='cuesheet-group'
+      {...virtuosoProps}
+    >
       {cuesheetMode === AppMode.Edit && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
@@ -20,6 +21,7 @@ interface MilestoneRowProps {
   rowId: string;
   rowIndex: number;
   table: Table<ExtendedEntry>;
+  injectedStyles?: CSSProperties;
 }
 
 export default function MilestoneRow({
@@ -31,6 +33,7 @@ export default function MilestoneRow({
   rowId,
   rowIndex,
   table,
+  injectedStyles,
   ...virtuosoProps
 }: MilestoneRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -56,6 +59,7 @@ export default function MilestoneRow({
     <tr
       className={cx([style.milestoneRow, Boolean(parentBgColour) && style.hasParent])}
       style={{
+        ...injectedStyles,
         opacity: `${isPast ? '0.2' : '1'}`,
         '--user-bg': parentBgColour ?? 'transparent',
       }}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SortableCell.tsx

@@ -8,16 +8,16 @@ import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import style from '../CuesheetTable.module.scss';
 
 interface SortableCellProps {
-  header: Header<ExtendedEntry, unknown>;
+  columnId: string;
+  colSpan: number;
   injectedStyles: CSSProperties;
   children: ReactNode;
+  draggable: ReactNode;
 }
 
-export function SortableCell({ header, injectedStyles, children }: SortableCellProps) {
+export function SortableCell({ columnId, colSpan, injectedStyles, children, draggable }: SortableCellProps) {
-  const { column, colSpan } = header;
-
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: column.id,
+    id: columnId,
   });
 
   // build drag styles
@@ -34,12 +34,31 @@ export function SortableCell({ header, injectedStyles, children }: SortableCellP
       <div {...attributes} {...listeners}>
         {children}
       </div>
-      <div
+      {draggable}
-        onDoubleClick={() => header.column.resetSize()}
-        onMouseDown={header.getResizeHandler()}
-        onTouchStart={header.getResizeHandler()}
-        className={style.resizer}
-      />
     </th>
   );
 }
+
+export function TableCell({ colSpan, injectedStyles, children, draggable }: SortableCellProps) {
+  return (
+    <th style={injectedStyles} colSpan={colSpan} tabIndex={-1}>
+      <div>{children}</div>
+      {draggable}
+    </th>
+  );
+}
+
+interface DraggableProps {
+  header: Header<ExtendedEntry, unknown>;
+}
+
+export function Draggable({ header }: DraggableProps) {
+  return (
+    <div
+      onDoubleClick={() => header.column.resetSize()}
+      onMouseDown={header.getResizeHandler()}
+      onTouchStart={header.getResizeHandler()}
+      className={style.resizer}
+    />
+  );
+}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx

@@ -143,7 +143,7 @@ function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, u
 
   const canWrite = column.columnDef.meta?.canWrite;
   if (!canWrite) {
-    return <GhostedText>{initialValue}</GhostedText>;
+    return <GhostedText multiline>{initialValue}</GhostedText>;
   }
 
   return <MultiLineCell initialValue={initialValue as string} handleUpdate={update} />;

apps/client/src/views/cuesheet/cuesheet-table/useColumnManager.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocalStorage } from '@mantine/hooks';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
 
 import { debounce } from '../../../common/utils/debounce';
 import { makeStageKey } from '../../../common/utils/localStorage';
@@ -14,17 +14,8 @@ const saveSizesToStorage = debounce((sizes: Record<string, number>) => {
   localStorage.setItem(tableSizesKey, JSON.stringify(sizes));
 }, 500);
 
-export default function useColumnManager(columns: ColumnDef<ExtendedEntry>[]) {
+export function useColumnSizes() {
-  const [columnVisibility, setColumnVisibility] = useLocalStorage({
+  const [columnSizing, setColumnSizingState] = useState<Record<string, number>>(() => {
-    key: tableHiddenKey,
-    defaultValue: {},
-  });
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
-    key: tableOrderKey,
-    defaultValue: columns.map((col) => col.id as string),
-  });
-
-  const [columnSizing, setColumnSizingState] = useState(() => {
     try {
       const stored = localStorage.getItem(tableSizesKey);
       return stored ? JSON.parse(stored) : {};
@@ -38,10 +29,22 @@ export default function useColumnManager(columns: ColumnDef<ExtendedEntry>[]) {
     saveSizesToStorage(columnSizing);
   }, [columnSizing]);
 
-  const setColumnSizing = useCallback((sizes: typeof columnSizing) => {
+  const setColumnSizing = useCallback((sizesOrUpdater: Updater<ColumnSizingState>) => {
-    setColumnSizingState(sizes);
+    setColumnSizingState(sizesOrUpdater);
   }, []);
 
+  return {
+    columnSizing,
+    setColumnSizing,
+  };
+}
+
+export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[]) {
+  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
+    key: tableOrderKey,
+    defaultValue: columns.map((col) => col.id as string),
+  });
+
   // update column order if columns change
   useEffect(() => {
     const newColumns = columns.map((col) => col.id as string);
@@ -55,12 +58,20 @@ export default function useColumnManager(columns: ColumnDef<ExtendedEntry>[]) {
   }, [columns, saveColumnOrder]);
 
   return {
-    columnVisibility,
     columnOrder,
-    columnSizing,
-    resetColumnOrder,
-    setColumnVisibility,
     saveColumnOrder,
-    setColumnSizing,
+    resetColumnOrder,
+  };
+}
+
+export function useColumnVisibility() {
+  const [columnVisibility, setColumnVisibility] = useLocalStorage({
+    key: tableHiddenKey,
+    defaultValue: {},
+  });
+
+  return {
+    columnVisibility,
+    setColumnVisibility,
   };
 }

apps/client/src/views/editor/finder/Finder.module.scss

@@ -66,4 +66,5 @@
 .scrollContainer {
   max-height: 70vh;
   overflow: auto;
+  padding-top: 1rem;
 }

apps/client/src/views/editor/finder/Finder.tsx

@@ -71,8 +71,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
               results.map((entry, index) => {
                 const isSelected = selected === index;
                 const displayIndex = entry.type === SupportedEntry.Event ? entry.eventIndex : '-';
-                const displayCue = entry.type === SupportedEntry.Event ? entry.cue : '';
+                const displayCue = 'cue' in entry ? entry.cue : '';
-                const colour = entry.type === SupportedEntry.Event ? entry.colour : '';
 
                 return (
                   <li
@@ -83,7 +82,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
                     onClick={submit}
                   >
                     <div className={style.data}>
-                      <div className={style.index} style={{ '--color': colour }}>
+                      <div className={style.index} style={{ '--color': entry.colour }}>
                         {displayIndex}
                       </div>
                       <div className={style.cue}>{displayCue}</div>
@@ -99,7 +98,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
       footerElements={
         <div className={style.footer}>
           Use the keywords <span className={style.em}>cue</span>, <span className={style.em}>index</span> or
-          <span className={style.em}>title</span> to filter search
+          <span className={style.em}>title</span> to filter search.
         </div>
       }
     />

apps/client/src/views/editor/finder/useFinder.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { useSessionStorage } from '@mantine/hooks';
-import { EntryId, isOntimeEvent, isOntimeGroup, MaybeString, SupportedEntry } from 'ontime-types';
+import { EntryId, isOntimeEvent, isOntimeGroup, isOntimeMilestone, MaybeString, SupportedEntry } from 'ontime-types';
 
 import { useFlatRundown } from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -9,14 +9,15 @@ const maxResults = 12;
 
 type FilterableGroup = {
   type: SupportedEntry.Group;
-  id: string;
+  id: EntryId;
   index: number;
   title: string;
+  colour: string;
 };
 
 type FilterableEvent = {
   type: SupportedEntry.Event;
-  id: string;
+  id: EntryId;
   index: number;
   eventIndex: number;
   title: string;
@@ -25,7 +26,17 @@ type FilterableEvent = {
   parent: MaybeString;
 };
 
-type FilterableEntry = FilterableGroup | FilterableEvent;
+type FilterableMilestone = {
+  type: SupportedEntry.Milestone;
+  id: EntryId;
+  index: number;
+  title: string;
+  cue: string;
+  colour: string;
+  parent: MaybeString;
+};
+
+type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;
 
 export default function useFinder() {
   const { data, rundownId } = useFlatRundown();
@@ -59,7 +70,7 @@ export default function useFinder() {
       lastSearchString.current = searchValue;
 
       if (searchValue.startsWith('index ')) {
-        const searchString = searchValue.replace('index ', '').trim();
+        const searchString = searchValue.slice('index '.length).trim();
         const { results, error } = searchByIndex(searchString);
         setResults(results);
         setError(error);
@@ -67,14 +78,14 @@ export default function useFinder() {
       }
 
       if (searchValue.startsWith('cue ')) {
-        const searchString = searchValue.replace('cue ', '').trim();
+        const searchString = searchValue.slice('cue '.length).trim();
         const { results, error } = searchByCue(searchString);
         setResults(results);
         setError(error);
         return;
       }
 
-      const searchString = searchValue.replace('title ', '').trim();
+      const searchString = searchValue.startsWith('title ') ? searchValue.slice('title '.length).trim() : searchValue;
       const { results, error } = searchByTitle(searchString);
       setResults(results);
       setError(error);
@@ -162,33 +173,46 @@ export default function useFinder() {
             break;
           }
 
-          const event = data[i];
+          const entry = data[i];
-          if (isOntimeEvent(event)) {
+          if (isOntimeEvent(entry)) {
-            if (event.title.toLowerCase().includes(searchString)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
               remaining--;
               results.push({
                 type: SupportedEntry.Event,
-                id: event.id,
+                id: entry.id,
                 index: i,
                 eventIndex,
-                title: event.title,
+                title: entry.title,
-                cue: event.cue,
+                cue: entry.cue,
-                colour: event.colour,
+                colour: entry.colour,
-                parent: event.parent,
+                parent: entry.parent,
               } satisfies FilterableEvent);
             }
             eventIndex++;
-          }
+          } else if (isOntimeGroup(entry)) {
-          if (isOntimeGroup(event)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
-            if (event.title.toLowerCase().includes(searchString)) {
               remaining--;
               results.push({
                 type: SupportedEntry.Group,
-                id: event.id,
+                id: entry.id,
                 index: i,
-                title: event.title,
+                title: entry.title,
+                colour: entry.colour,
               } satisfies FilterableGroup);
             }
+          } else if (isOntimeMilestone(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Milestone,
+                id: entry.id,
+                index: i,
+                title: entry.title,
+                cue: entry.cue,
+                colour: entry.colour,
+                parent: entry.parent,
+              } satisfies FilterableMilestone);
+            }
           }
         }
         return { results, error: null };
@@ -200,7 +224,7 @@ export default function useFinder() {
   const select = useCallback(
     (selectedEvent: FilterableEntry) => {
       // First expand the parent group if this is an event inside a group
-      if (selectedEvent.type === SupportedEntry.Event && selectedEvent.parent !== null) {
+      if ('parent' in selectedEvent && selectedEvent.parent !== null) {
         // Try direct state update instead of using callback
         const currentGroups = [...new Set(collapsedGroups)];
         const newGroups = currentGroups.filter((id) => id !== selectedEvent.parent);

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

@@ -68,7 +68,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
     hidePhase,
     font,
     keyColour,
-    textColour,
+    timerColour,
   } = useTimerOptions();
 
   const { getLocalizedString } = useTranslation();
@@ -131,11 +131,11 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
   );
 
   // gather presentation styles
-  const timerColour = getTimerColour(viewSettings, textColour, showWarning, showDanger);
+  const resolvedTimerColour = getTimerColour(viewSettings, timerColour, showWarning, showDanger);
   const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
   const userStyles = {
     ...(keyColour && { '--timer-bg': keyColour }),
-    ...(textColour && { '--timer-colour': timerColour }),
+    ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
     ...(font && { '--timer-font': font }),
   };
 

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

@@ -25,10 +25,12 @@ const timerDisplayOptions: SelectOption[] = [
 
 export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
   const mainOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
     { value: 'title', label: 'Title' },
     { value: 'note', label: 'Note' },
   ]);
   const secondaryOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
     { value: 'title', label: 'Title' },
     { value: 'note', label: 'Note' },
   ]);
@@ -84,7 +86,7 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           description: 'Select the data source for the main text',
           type: 'option',
           values: mainOptions,
-          defaultValue: 'Title',
+          defaultValue: 'title',
         },
         {
           id: 'secondary-src',
@@ -92,7 +94,7 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           description: 'Select the data source for the secondary text',
           type: 'option',
           values: secondaryOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
       ],
     },
@@ -163,9 +165,9 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           defaultValue: '101010',
         },
         {
-          id: 'textColour',
+          id: 'timerColour',
-          title: 'Text Colour',
+          title: 'Timer Colour',
-          description: 'Text colour. Default: #f6f6f6',
+          description: 'Timer colour. Default: #f6f6f6',
           type: 'colour',
           defaultValue: 'f6f6f6',
         },
@@ -191,7 +193,7 @@ type TimerOptions = {
   hidePhase: boolean;
   font?: string;
   keyColour?: string;
-  textColour?: string;
+  timerColour?: string;
 };
 
 /**
@@ -226,7 +228,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
 
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),
-    textColour: makeColourString(getValue('textColour')),
+    timerColour: makeColourString(getValue('timerColour')),
   };
 }
 

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

@@ -42,8 +42,8 @@ const fontSizeMap: { [key: number]: number } = {
   4: 28, // 9:01
   5: 28, // -9:01, 10:01, 9 min
   6: 25, // -10:01, 10 min
-  8: 20, // 23:01:01
+  8: 18, // 23:01:01
-  9: 20, // -23:01:01
+  9: 18, // -23:01:01
 };
 
 /**

apps/client/tsconfig.json

@@ -32,7 +32,8 @@
     "preserveConstEnums": true,
     "allowJs": true,
     "baseUrl": "src",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "outDir": "build"
   },
   "include": [
     "src"

apps/electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-electron",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.3",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.3",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",

apps/server/src/api-data/excel/__tests__/mockData.ts

@@ -10,7 +10,7 @@ export const dataFromExcelTemplate = [
     'Timer type',
     'Count to end',
     'Skip',
-    'Notes',
+    'Note',
     't0',
     'Test1',
     'test2',

apps/server/src/api-data/session/__tests__/session.service.test.ts

@@ -27,7 +27,7 @@ describe('generateAuthenticatedUrl()', () => {
         authenticate: true,
         hash: '1234',
       });
-      expect(withAuth.toString()).toBe('http://192.168.10.173:4001/timer?token=1234&n=1');
+      expect(withAuth.toString()).toBe('http://192.168.10.173:4001/timer?n=1&token=1234');
     });
 
     it('generates a link to an unlocked preset', () => {
@@ -69,6 +69,17 @@ describe('generateAuthenticatedUrl()', () => {
       });
       expect(withAuth.toString()).toBe('http://192.168.10.173:4001/preset/some-cuesheet-preset');
     });
+
+    it('generates a link for companion', () => {
+      const withAuth = generateShareUrl('http://192.168.10.173:4001', '<<companion>>', {
+        lockConfig: false,
+        lockNav: false,
+        authenticate: true,
+        preset: undefined,
+        hash: '1234',
+      });
+      expect(withAuth.toString()).toBe('http://192.168.10.173:4001/?token=1234');
+    });
   });
 
   describe('for ontime-cloud URLs', () => {
@@ -100,7 +111,7 @@ describe('generateAuthenticatedUrl()', () => {
         prefix: 'prefix',
         hash: '1234',
       });
-      expect(withAuth.toString()).toBe('https://cloud.getontime.no/prefix/timer?token=1234&n=1');
+      expect(withAuth.toString()).toBe('https://cloud.getontime.no/prefix/timer?n=1&token=1234');
     });
 
     it('generates a link to an unlocked preset', () => {

apps/server/src/api-data/session/session.service.ts

@@ -64,18 +64,21 @@ export function generateShareUrl(
 ): URL {
   const url = new URL(baseUrl);
 
-  // if the config is locked and we are in a preset, we hide the canonical path
+  // companion links point to the root
-  const shouldMaskPath = Boolean(preset) && (canonicalPath === OntimeView.Cuesheet || lockConfig);
+  if (canonicalPath !== '<<companion>>') {
-  const maybePresetPath = shouldMaskPath ? `preset/${preset}` : preset || canonicalPath;
+    // if the config is locked and we are in a preset, we hide the canonical path
-  url.pathname = prefix ? `${prefix}/${maybePresetPath}` : maybePresetPath;
+    const shouldMaskPath = Boolean(preset) && (canonicalPath === OntimeView.Cuesheet || lockConfig);
+    const maybePresetPath = shouldMaskPath ? `preset/${preset}` : preset || canonicalPath;
+    url.pathname = prefix ? `${prefix}/${maybePresetPath}` : maybePresetPath;
+
+    if (lockNav) {
+      url.searchParams.append('n', '1');
+    }
+  }
 
   if (authenticate && hash) {
     url.searchParams.append('token', hash);
   }
 
-  if (lockNav) {
-    url.searchParams.append('n', '1');
-  }
-
   return url;
 }

apps/server/src/api-data/session/session.validation.ts

@@ -9,8 +9,6 @@ export const validateGenerateUrl = [
   body('lockConfig').isBoolean(),
   body('lockNav').isBoolean(),
   body('preset').optional().isString().trim().notEmpty(),
-  body('prefix').optional().isString().trim().notEmpty(),
-  body('hash').optional().isString().trim().notEmpty(),
 
   requestValidationFunction,
 ];

apps/server/src/api-data/settings/settings.validation.ts

@@ -1,4 +1,4 @@
-import { body, checkExact } from 'express-validator';
+import { body } from 'express-validator';
 import { requestValidationFunction } from '../validation-utils/validationFunction.js';
 
 /**
@@ -8,11 +8,10 @@ export const validateWelcomeDialog = [body('show').isBoolean(), requestValidatio
 
 const pinValidator = (key: string) => {
   return body(key)
-    .isString()
+    .optional()
-    .trim()
     .isLength({ min: 0, max: 4 })
     .customSanitizer((input) => {
-      if (input.length === 0) {
+      if (input === null || input.length === 0) {
         return null;
       }
       return input;
@@ -28,8 +27,6 @@ export const validateSettings = [
   body('timeFormat').isString().isIn(['12', '24']).withMessage('Time format can only be "12" or "24"'),
   body('language').isString().trim().notEmpty(),
   body('serverPort').isPort().withMessage('Invalid value found for server port').toInt(),
-  checkExact(),
 
   requestValidationFunction,
 ];
-// TODO: dont allow other keys

apps/server/src/app.ts

@@ -34,7 +34,8 @@ import { populateTranslation } from './setup/loadTranslations.js';
 import { populateStyles } from './setup/loadStyles.js';
 import { eventStore } from './stores/EventStore.js';
 import { runtimeService } from './services/runtime-service/runtime.service.js';
-import { RestorePoint, restoreService } from './services/RestoreService.js';
+import { restoreService } from './services/restore-service/restore.service.js';
+import type { RestorePoint } from './services/restore-service/restore.type.js';
 import * as messageService from './services/message-service/message.service.js';
 import { getState } from './stores/runtimeState.js';
 import { initialiseProject } from './services/project-service/ProjectService.js';

apps/server/src/models/demoProject.ts

@@ -337,7 +337,7 @@ export const demoDb: DatabaseModel = {
       alias: 'minimal',
       target: OntimeView.Timer,
       search:
-        'hideclock=true&hidecards=true&hideprogress=true&hidemessage=true&hidesecondary=true&hidelogo=true&font=arial+black&keycolour=00ff00&textcolour=ffffff',
+        'hideclock=true&hidecards=true&hideprogress=true&hidemessage=true&hidesecondary=true&hidelogo=true&font=arial+black&keycolour=00ff00&timerColour=ffffff',
     },
   ],
   customFields: {

apps/server/src/services/RestoreService.ts

@@ -1,146 +0,0 @@
-import { MaybeNumber, MaybeString, Playback } from 'ontime-types';
-
-import { JSONFile } from 'lowdb/node';
-import { deepEqual } from 'fast-equals';
-
-import { publicFiles } from '../setup/index.js';
-
-export type RestorePoint = {
-  playback: Playback;
-  selectedEventId: MaybeString;
-  startedAt: MaybeNumber;
-  addedTime: number;
-  pausedAt: MaybeNumber;
-  firstStart: MaybeNumber;
-};
-
-/**
- * Utility validates a RestorePoint
- * @param obj
- * @return boolean
- */
-export function isRestorePoint(obj: unknown): obj is RestorePoint {
-  if (!obj) {
-    return false;
-  }
-
-  const restorePoint = obj as RestorePoint;
-
-  if (typeof restorePoint.playback !== 'string' || !Object.values(Playback).includes(restorePoint.playback)) {
-    return false;
-  }
-
-  if (typeof restorePoint.selectedEventId !== 'string' && restorePoint.selectedEventId !== null) {
-    return false;
-  }
-
-  if (typeof restorePoint.startedAt !== 'number' && restorePoint.startedAt !== null) {
-    return false;
-  }
-
-  if (typeof restorePoint.addedTime !== 'number') {
-    return false;
-  }
-
-  if (typeof restorePoint.pausedAt !== 'number' && restorePoint.pausedAt !== null) {
-    return false;
-  }
-
-  if (typeof restorePoint.firstStart !== 'number' && restorePoint.firstStart !== null) {
-    return false;
-  }
-
-  return true;
-}
-
-/**
- * Utility interface to allow dependency injection during test
- */
-
-/**
- * Service manages saving of application state
- * that can then be restored when reopening
- */
-export class RestoreService {
-  private readonly filePath: MaybeString;
-  private readonly file: JSONFile<RestorePoint | null>;
-  private failedCreateAttempts: number;
-  private savedState: RestorePoint | null;
-
-  constructor(filePath: string) {
-    this.filePath = filePath;
-
-    this.savedState = null;
-    this.file = new JSONFile(this.filePath);
-    this.failedCreateAttempts = 0;
-  }
-
-  /**
-   * Utility, reads from file
-   * @private
-   */
-  private async read() {
-    return this.file.read();
-  }
-
-  /**
-   * Utility writes payload to file
-   * @throws
-   * @param stringifiedState
-   */
-  private async write(data: RestorePoint) {
-    await this.file.write(data);
-  }
-
-  /**
-   * Saves runtime data to restore file
-   * @param newState RestorePoint
-   */
-  async save(newState: RestorePoint) {
-    // after three failed attempts, mark the service as unavailable
-    if (this.failedCreateAttempts > 3) {
-      return;
-    }
-
-    if (deepEqual(newState, this.savedState)) {
-      return;
-    }
-
-    try {
-      await this.write(newState);
-      this.savedState = { ...newState };
-      this.failedCreateAttempts = 0;
-    } catch (_error) {
-      this.failedCreateAttempts += 1;
-    }
-  }
-
-  /**
-   * Attempts reading a restore point from a given file path
-   * Returns null if none found, restore point otherwise
-   */
-  async load(): Promise<RestorePoint | null> {
-    try {
-      const maybeRestorePoint = await this.read();
-      if (isRestorePoint(maybeRestorePoint)) {
-        return maybeRestorePoint;
-      }
-    } catch (_error) {
-      // no need to notify the user
-    }
-    return null;
-  }
-
-  /**
-   * Clears the restore file
-   */
-  async clear() {
-    try {
-      await this.file.write(null);
-    } catch (_error) {
-      // nothing to do
-    }
-  }
-}
-
-export const restoreService = new RestoreService(publicFiles.restoreFile);

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

@@ -1,139 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { describe, expect, it, vi } from 'vitest';
-
-import { Playback } from 'ontime-types';
-
-import { isRestorePoint, RestorePoint, RestoreService } from '../RestoreService.js';
-
-describe('isRestorePoint()', () => {
-  it('validates a well defined object', () => {
-    let restorePoint: RestorePoint = {
-      playback: Playback.Roll,
-      selectedEventId: '123',
-      startedAt: 1,
-      addedTime: 2,
-      pausedAt: 3,
-      firstStart: 1,
-    };
-    expect(isRestorePoint(restorePoint)).toBe(true);
-
-    restorePoint = {
-      playback: Playback.Roll,
-      selectedEventId: '123',
-      startedAt: null,
-      addedTime: 0,
-      pausedAt: null,
-      firstStart: 1,
-    };
-    expect(isRestorePoint(restorePoint)).toBe(true);
-  });
-
-  describe('rejects a badly formatted file', () => {
-    it('with invalid playback value', () => {
-      const restorePoint = {
-        playback: 'unknown',
-        selectedEventId: '123',
-        startedAt: null,
-        addedTime: 0,
-        pausedAt: null,
-        groupStartAt: 10,
-      };
-      expect(isRestorePoint(restorePoint)).toBe(false);
-    });
-    it('with missing playback value', () => {
-      const restorePoint = {
-        selectedEventId: '123',
-        startedAt: null,
-        addedTime: 0,
-        pausedAt: null,
-        groupStartAt: 10,
-      };
-      expect(isRestorePoint(restorePoint)).toBe(false);
-    });
-    it('with incorrect value', () => {
-      const restorePoint = {
-        playback: Playback.Roll,
-        selectedEventId: '123',
-        startedAt: 'testing',
-        addedTime: 0,
-        pausedAt: null,
-        groupStartAt: 10,
-      };
-      expect(isRestorePoint(restorePoint)).toBe(false);
-    });
-  });
-});
-
-describe('RestoreService()', () => {
-  describe('load()', () => {
-    it('loads working file with times', async () => {
-      const expected: RestorePoint = {
-        playback: Playback.Play,
-        selectedEventId: 'da5b4',
-        startedAt: 1234,
-        addedTime: 5678,
-        pausedAt: 9087,
-        firstStart: 1234,
-      };
-
-      const restoreService = new RestoreService('/path/to/restore/file');
-      vi.spyOn<any, any>(restoreService, 'read').mockImplementation(() => expected);
-
-      const testLoad = await restoreService.load();
-      expect(testLoad).toStrictEqual(expected);
-    });
-
-    it('loads working file without times', async () => {
-      const expected: RestorePoint = {
-        playback: Playback.Stop,
-        selectedEventId: null,
-        startedAt: null,
-        addedTime: 0,
-        pausedAt: null,
-        firstStart: 1234,
-      };
-
-      const restoreService = new RestoreService('/path/to/restore/file');
-      vi.spyOn<any, any>(restoreService, 'read').mockImplementation(() => expected);
-
-      const testLoad = await restoreService.load();
-      expect(testLoad).toStrictEqual(expected);
-    });
-
-    it('does not load wrong play state', async () => {
-      const expected = {
-        playback: 'does-not-exist',
-        selectedEventId: 'da5b4',
-        startedAt: 1234,
-        addedTime: 1234,
-        pausedAt: 1234,
-        firstStart: 1234,
-        groupStartAt: 10,
-      };
-
-      const restoreService = new RestoreService('/path/to/restore/file');
-      vi.spyOn<any, any>(restoreService, 'read').mockImplementation(() => expected);
-
-      const testLoad = await restoreService.load();
-      expect(testLoad).toBe(null);
-    });
-  });
-
-  describe('save()', () => {
-    it('saves data to file', async () => {
-      const testData: RestorePoint = {
-        playback: Playback.Play,
-        selectedEventId: '1234',
-        startedAt: 1234,
-        addedTime: 1234,
-        pausedAt: 1234,
-        firstStart: 1234,
-      };
-
-      const restoreService = new RestoreService('/path/to/restore/file');
-      const writeSpy = vi.spyOn<any, any>(restoreService, 'write').mockImplementation(() => undefined);
-      await restoreService.save(testData);
-      expect(writeSpy).toHaveBeenCalledWith(testData);
-    });
-  });
-});

apps/server/src/services/restore-service/__tests__/restore.parser.test.ts

@@ -0,0 +1,63 @@
+import { Playback } from 'ontime-types';
+
+import { isRestorePoint } from '../restore.parser.js';
+import { RestorePoint } from '../restore.type.js';
+
+describe('isRestorePoint()', () => {
+  it('validates a well defined object', () => {
+    let restorePoint: RestorePoint = {
+      playback: Playback.Roll,
+      selectedEventId: '123',
+      startedAt: 1,
+      addedTime: 2,
+      pausedAt: 3,
+      firstStart: 1,
+    };
+    expect(isRestorePoint(restorePoint)).toBe(true);
+
+    restorePoint = {
+      playback: Playback.Roll,
+      selectedEventId: '123',
+      startedAt: null,
+      addedTime: 0,
+      pausedAt: null,
+      firstStart: 1,
+    };
+    expect(isRestorePoint(restorePoint)).toBe(true);
+  });
+
+  describe('rejects a badly formatted file', () => {
+    it('with invalid playback value', () => {
+      const restorePoint = {
+        playback: 'unknown',
+        selectedEventId: '123',
+        startedAt: null,
+        addedTime: 0,
+        pausedAt: null,
+        groupStartAt: 10,
+      };
+      expect(isRestorePoint(restorePoint)).toBe(false);
+    });
+    it('with missing playback value', () => {
+      const restorePoint = {
+        selectedEventId: '123',
+        startedAt: null,
+        addedTime: 0,
+        pausedAt: null,
+        groupStartAt: 10,
+      };
+      expect(isRestorePoint(restorePoint)).toBe(false);
+    });
+    it('with incorrect value', () => {
+      const restorePoint = {
+        playback: Playback.Roll,
+        selectedEventId: '123',
+        startedAt: 'testing',
+        addedTime: 0,
+        pausedAt: null,
+        groupStartAt: 10,
+      };
+      expect(isRestorePoint(restorePoint)).toBe(false);
+    });
+  });
+});

apps/server/src/services/restore-service/__tests__/restore.service.test.ts

@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Playback } from 'ontime-types';
+
+import { vi } from 'vitest';
+
+import { RestorePoint } from '../restore.type.js';
+import { restoreService } from '../restore.service.js';
+
+describe('restoreService', () => {
+  describe('load()', () => {
+    it('loads working file with times', async () => {
+      const expected: RestorePoint = {
+        playback: Playback.Play,
+        selectedEventId: 'da5b4',
+        startedAt: 1234,
+        addedTime: 5678,
+        pausedAt: 9087,
+        firstStart: 1234,
+      };
+
+      const mockRead = vi.fn().mockResolvedValue(expected);
+
+      const testLoad = await restoreService.load(mockRead);
+      expect(testLoad).toStrictEqual(expected);
+      expect(mockRead).toHaveBeenCalledOnce();
+    });
+
+    it('loads working file without times', async () => {
+      const expected: RestorePoint = {
+        playback: Playback.Stop,
+        selectedEventId: null,
+        startedAt: null,
+        addedTime: 0,
+        pausedAt: null,
+        firstStart: 1234,
+      };
+
+      const mockRead = vi.fn().mockResolvedValue(expected);
+
+      const testLoad = await restoreService.load(mockRead);
+      expect(testLoad).toStrictEqual(expected);
+      expect(mockRead).toHaveBeenCalledOnce();
+    });
+
+    it('does not load wrong play state', async () => {
+      const expected = {
+        // Missing required field 'firstStart' to make validation fail
+        playback: 'does-not-exist',
+        selectedEventId: 'da5b4',
+        startedAt: 1234,
+        addedTime: 1234,
+        pausedAt: 1234,
+        groupStartAt: 10,
+      };
+
+      const mockRead = vi.fn().mockResolvedValue(expected);
+
+      const testLoad = await restoreService.load(mockRead);
+      // Should return null because isRestorePoint validation fails
+      expect(testLoad).toBe(null);
+      expect(mockRead).toHaveBeenCalledOnce();
+    });
+
+    it('returns null when file read fails', async () => {
+      const mockRead = vi.fn().mockRejectedValue(new Error('File not found'));
+
+      const testLoad = await restoreService.load(mockRead);
+      expect(testLoad).toBe(null);
+      expect(mockRead).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('save()', () => {
+    it('saves data to file', async () => {
+      const testData: RestorePoint = {
+        playback: Playback.Play,
+        selectedEventId: '1234',
+        startedAt: 1234,
+        addedTime: 1234,
+        pausedAt: 1234,
+        firstStart: 1234,
+      };
+
+      const mockWrite = vi.fn().mockResolvedValue(undefined);
+
+      await restoreService.save(testData, mockWrite);
+      expect(mockWrite).toHaveBeenCalledWith(testData);
+    });
+
+    it('handles write failures gracefully', async () => {
+      const testData: RestorePoint = {
+        playback: Playback.Pause,
+        selectedEventId: '5678',
+        startedAt: 5678,
+        addedTime: 5678,
+        pausedAt: 5678,
+        firstStart: 5678,
+      };
+
+      const mockWrite = vi.fn().mockRejectedValue(new Error('Write failed'));
+
+      // Should not throw, and should still call write
+      await expect(restoreService.save(testData, mockWrite)).resolves.toBeUndefined();
+      expect(mockWrite).toHaveBeenCalledWith(testData);
+    });
+  });
+
+  describe('clear()', () => {
+    it('clears the restore file', async () => {
+      const mockWrite = vi.fn().mockResolvedValue(undefined);
+
+      await restoreService.clear(mockWrite);
+      expect(mockWrite).toHaveBeenCalledWith(null);
+    });
+
+    it('handles clear failures gracefully', async () => {
+      const mockWrite = vi.fn().mockRejectedValue(new Error('Clear failed'));
+
+      // Should not throw
+      await expect(restoreService.clear(mockWrite)).resolves.toBeUndefined();
+      expect(mockWrite).toHaveBeenCalledWith(null);
+    });
+  });
+});

apps/server/src/services/restore-service/restore.parser.ts

@@ -0,0 +1,53 @@
+import { Playback } from 'ontime-types';
+
+import { is } from '../../utils/is.js';
+
+import type { RestorePoint } from './restore.type.js';
+
+/**
+ * Utility validates a RestorePoint
+ */
+export function isRestorePoint(restorePoint: unknown): restorePoint is RestorePoint {
+  if (!is.object(restorePoint)) {
+    return false;
+  }
+
+  if (
+    !is.objectWithKeys(restorePoint, [
+      'playback',
+      'selectedEventId',
+      'startedAt',
+      'addedTime',
+      'pausedAt',
+      'firstStart',
+    ])
+  ) {
+    return false;
+  }
+
+  if (!is.string(restorePoint.playback) && !Object.values(Playback).includes(restorePoint.playback as Playback)) {
+    return false;
+  }
+
+  if (!is.string(restorePoint.selectedEventId) && restorePoint.selectedEventId !== null) {
+    return false;
+  }
+
+  if (!is.number(restorePoint.startedAt) && restorePoint.startedAt !== null) {
+    return false;
+  }
+
+  if (!is.number(restorePoint.addedTime)) {
+    return false;
+  }
+
+  if (!is.number(restorePoint.pausedAt) && restorePoint.pausedAt !== null) {
+    return false;
+  }
+
+  if (!is.number(restorePoint.firstStart) && restorePoint.firstStart !== null) {
+    return false;
+  }
+
+  return true;
+}

apps/server/src/services/restore-service/restore.service.ts

@@ -0,0 +1,106 @@
+import { JSONFile } from 'lowdb/node';
+import { deepEqual } from 'fast-equals';
+
+import { publicFiles } from '../../setup/index.js';
+
+import { isRestorePoint } from './restore.parser.js';
+import type { RestorePoint } from './restore.type.js';
+
+let failedCreateAttempts = 0;
+let savedState: RestorePoint | null = null;
+let fileRef: JSONFile<RestorePoint | null> | null = null;
+
+/**
+ * Service manages saving snapshot of application state
+ * that can then be restored when reopening
+ */
+export const restoreService = {
+  save,
+  load,
+  clear,
+};
+
+/**
+ * Saves a restore point
+ * @param [writeFn=write] - allows overriding the write function for testing
+ * @public
+ */
+async function save(data: RestorePoint, writeFn = write) {
+  // after three failed attempts, mark the service as unavailable
+  if (failedCreateAttempts > 3) {
+    return;
+  }
+
+  if (deepEqual(data, savedState)) {
+    return;
+  }
+
+  try {
+    await writeFn(data);
+    savedState = { ...data };
+    failedCreateAttempts = 0;
+  } catch (_error) {
+    failedCreateAttempts += 1;
+  }
+}
+
+/**
+ * Attempts reading a restore point from a given file path
+ * Returns null if none found, restore point otherwise
+ * @param [readFn=read] - allows overriding the read function for testing
+ * @public
+ */
+async function load(readFn = read): Promise<RestorePoint | null> {
+  try {
+    const maybeRestorePoint = await readFn();
+    if (isRestorePoint(maybeRestorePoint)) {
+      return maybeRestorePoint;
+    }
+  } catch (_error) {
+    // no need to notify the user
+  }
+  return null;
+}
+
+/**
+ * Clears the restore file
+ * @param [writeFn=write] - allows overriding the write function for testing
+ * @public
+ */
+async function clear(writeFn = write) {
+  try {
+    await writeFn(null);
+  } catch (_error) {
+    // nothing to do
+  }
+}
+
+/**
+ * Initialised file reference
+ * @private
+ */
+async function init(): Promise<JSONFile<RestorePoint | null>> {
+  if (fileRef) return fileRef;
+
+  fileRef = new JSONFile<RestorePoint | null>(publicFiles.restoreFile);
+  return fileRef;
+}
+
+/**
+ * Reads from an intialized file reference
+ * @private
+ */
+async function read(): Promise<RestorePoint | null> {
+  const file = await init();
+  return file.read();
+}
+
+/**
+ * Writes to an intialized file reference
+ * @throws - if writing fails
+ * @private
+ */
+async function write(data: RestorePoint | null) {
+  const file = await init();
+  return file.write(data);
+}

apps/server/src/services/restore-service/restore.type.ts

@@ -0,0 +1,10 @@
+import { Playback, MaybeString, MaybeNumber } from 'ontime-types';
+
+export type RestorePoint = {
+  playback: Playback;
+  selectedEventId: MaybeString;
+  startedAt: MaybeNumber;
+  addedTime: number;
+  pausedAt: MaybeNumber;
+  firstStart: MaybeNumber;
+};

apps/server/src/services/runtime-service/runtime.service.ts

@@ -25,7 +25,8 @@ import { triggerAutomations } from '../../api-data/automation/automation.service
 import { getCurrentRundown, getEntryWithId, getRundownMetadata } from '../../api-data/rundown/rundown.dao.js';
 
 import { EventTimer } from '../EventTimer.js';
-import { RestorePoint, restoreService } from '../RestoreService.js';
+import type { RestorePoint } from '../restore-service/restore.type.js';
+import { restoreService } from '../restore-service/restore.service.js';
 import { skippedOutOfEvent } from '../timerUtils.js';
 
 import {
@@ -635,6 +636,8 @@ const eventTimer = new EventTimer({
 });
 export const runtimeService = new RuntimeService(eventTimer);
 
+type EntryUpdateKeys = keyof Pick<RuntimeState, 'eventNow' | 'eventNext' | 'eventFlag' | 'groupNow'>;
+
 /**
  * Decorator manages side effects from updating the runtime
  * This should only be applied to functions that are exposed for consumption
@@ -671,21 +674,30 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
     // combine all big changes
     const hasImmediateChanges = entryChanged || justStarted || hasChangedPlayback || offsetModeChanged;
 
-    // clock has changed by a second or more
+    /**
-    const updateClock = getShouldClockUpdate(RuntimeService.previousState.clock, state.clock);
+     * if any values have changed.
-    if (updateClock) {
+     * values that have the possibility to tick are updated when the seconds roll over
-      batch.add('clock', state.clock);
+     */
-      RuntimeService.previousState.clock = state.clock;
-    }
-
-    // if any values have changed, values that have the possibility to tick are updated when the seconds roll over
     const updateTimer = getShouldTimerUpdate(RuntimeService.previousState?.timer, state.timer);
     if (updateTimer) {
       batch.add('timer', state.timer);
       RuntimeService.previousState.timer = { ...state.timer };
     }
 
-    // if any values have changed, values that have the possibility to tick are modulated by `hasClockUpdate`
+    /**
+     * clock has changed by a second or more.
+     * or the timer updated so we ensure that the timer and clock ticks are in sync
+     */
+    const updateClock = updateTimer || getShouldClockUpdate(RuntimeService.previousState.clock, state.clock);
+    if (updateClock) {
+      batch.add('clock', state.clock);
+      RuntimeService.previousState.clock = state.clock;
+    }
+
+    /**
+     * if any values have changed.
+     * values that have the possibility to tick are modulated by `updateClock || hasImmediateChanges`
+     */
     const updateRuntime = getShouldOffsetUpdate(
       RuntimeService.previousState?.offset,
       state.offset,
@@ -696,16 +708,16 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
       RuntimeService.previousState.offset = structuredClone(state.offset);
     }
 
-    // if any values have changed
+    /**
+     * if any values have changed.
+     */
     const updateRundownData = !deepEqual(RuntimeService.previousState.rundown, state.rundown);
     if (updateRundownData) {
       batch.add('rundown', state.rundown);
       RuntimeService.previousState.rundown = structuredClone(state.rundown);
     }
 
-    function updateMaybeEntryIfChanged<
+    function updateMaybeEntryIfChanged<K extends EntryUpdateKeys>(key: K) {
-      K extends keyof Pick<RuntimeState, 'eventNow' | 'eventNext' | 'eventFlag' | 'groupNow'>,
-    >(key: K) {
       const previousEntry = RuntimeService.previousState[key];
       const currentEntry = state[key];
 

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

@@ -24,7 +24,6 @@ export function isNewSecond(
 /**
  * Checks whether we should update the clock value
  * - we have rolled into a new seconds unit
- * this is different from the timer update as it looks at the clock as counting up
  */
 export function getShouldClockUpdate(previousUpdate: number, now: number): boolean {
   const newSeconds = millisToSeconds(now, TimerType.CountUp) !== millisToSeconds(previousUpdate, TimerType.CountUp);
@@ -32,8 +31,10 @@ export function getShouldClockUpdate(previousUpdate: number, now: number): boole
 }
 
 /**
- * Checks whether we should update the timer value
+ * Checks whether we should update the timer values
- * - we have rolled into a new seconds unit
+ * - `current` and `secondaryTimer` trigger on seconds roll over
+ * - the rest trigger on any change
+ * - `elapsed` and `expectedFinish` is not checked
  */
 export function getShouldTimerUpdate(previousValue: TimerState | undefined, currentValue: TimerState): boolean {
   if (previousValue === undefined) return true;
@@ -53,6 +54,11 @@ export function getShouldTimerUpdate(previousValue: TimerState | undefined, curr
   );
 }
 
+/**
+ * Checks whether we should update the offset values
+ * - `mode` triggers update
+ * - `absolute`, `relative`, `expected**End` are ticked with `didDependencyUpdate`
+ */
 export function getShouldOffsetUpdate(
   previousValue: Offset | undefined,
   currentValue: Offset,
@@ -60,7 +66,6 @@ export function getShouldOffsetUpdate(
 ): boolean {
   if (previousValue === undefined) return true;
   if (previousValue.mode !== currentValue.mode) return true;
-  // absolute, relative, expected*End are ticked with `didDependencyUpdate`
   return didDependencyUpdate && !deepEqual(previousValue, currentValue);
 }
 

apps/server/src/services/sheet-service/SheetService.ts

@@ -4,7 +4,18 @@
  * @link https://developers.google.com/identity/protocols/oauth2/limited-input-device
  */
 
-import { AuthenticationStatus, CustomFields, DatabaseModel, LogOrigin, MaybeString, Rundown } from 'ontime-types';
+import {
+  AuthenticationStatus,
+  CustomFields,
+  DatabaseModel,
+  isOntimeEvent,
+  isOntimeMilestone,
+  LogOrigin,
+  MaybeString,
+  OntimeGroup,
+  Rundown,
+  SupportedEntry,
+} from 'ontime-types';
 import { ImportMap, getErrorMessage } from 'ontime-utils';
 
 import { sheets, type sheets_v4 } from '@googleapis/sheets';
@@ -348,6 +359,21 @@ export async function upload(sheetId: string, options: ImportMap) {
   const { sheetMetadata } = parseExcel(readResponse.data.values, getProjectCustomFields(), 'not-used', options);
   const rundown = getCurrentRundown();
 
+  const sheetOrder: string[] = [];
+  let prevGroup: string | null = null;
+  for (const id of rundown.flatOrder) {
+    const entry = rundown.entries[id];
+
+    if (isOntimeEvent(entry) || isOntimeMilestone(entry)) {
+      if (prevGroup && entry.parent === null) {
+        // if we were in a group and are now not insert a group end
+        sheetOrder.push(`group-end-${prevGroup}`);
+      }
+      prevGroup = entry.parent;
+    }
+    sheetOrder.push(entry.id);
+  }
+
   const titleMetadata = Object.values(sheetMetadata)[0];
   if (titleMetadata === undefined) {
     throw new Error(`Sheet read failed: failed to find title row`);
@@ -380,16 +406,20 @@ export async function upload(sheetId: string, options: ImportMap) {
       range: {
         dimension: 'ROWS',
         startIndex: titleRow + 1,
-        endIndex: titleRow + rundown.order.length,
+        endIndex: titleRow + sheetOrder.length,
         sheetId: worksheetId,
       },
     },
   });
 
   // update the corresponding row with event data
-  rundown.order.forEach((entryId, index) => {
+  sheetOrder.forEach((entryId, index) => {
-    const entry = rundown.entries[entryId];
+    const isGroupEnd = entryId.startsWith('group-end-');
-    return updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
+    const id = isGroupEnd ? entryId.split('group-end-')[1] : entryId;
+    const entry = isGroupEnd
+      ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup)
+      : structuredClone(rundown.entries[id]);
+    updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
   });
 
   const writeResponse = await sheets({ version: 'v4', auth: currentAuthClient }).spreadsheets.batchUpdate({

apps/server/src/services/sheet-service/sheetUtils.ts

@@ -1,4 +1,11 @@
-import { isOntimeGroup, isOntimeEvent, OntimeEvent, OntimeEntry, RGBColour } from 'ontime-types';
+import {
+  OntimeEntry,
+  RGBColour,
+  isOntimeDelay,
+  OntimeEntryCommonKeys,
+  isOntimeGroup,
+  isOntimeMilestone,
+} from 'ontime-types';
 import { cssOrHexToColour, isLightColour, millisToString, mixColours } from 'ontime-utils';
 
 import type { sheets_v4 } from '@googleapis/sheets';
@@ -70,64 +77,67 @@ export function getA1Notation(row: number, column: number): string {
 
 /**
  * @description - creates updateCells request from ontime event
- * @param {OntimeEntry} event
+ * @param {OntimeEntry} entry
  * @param {number} index - index of the event
  * @param {number} worksheetId
  * @param {object} metadata - object with all the cell positions of the title of each attribute
  * @returns {sheets_v4.Schema} - list of update requests
  */
 export function cellRequestFromEvent(
-  event: OntimeEntry,
+  entry: OntimeEntry,
   index: number,
   worksheetId: number,
   metadata: object,
 ): sheets_v4.Schema$Request {
-  const rowData = Object.entries(metadata)
+  const rowData = Object.entries(metadata) // check what headings are available in the sheet
-    .filter(([_, value]) => value !== undefined)
+    .filter(([_, value]) => value !== undefined) // drop anything that is undefined
-    .sort(([_a, a], [_b, b]) => a['col'] - b['col']) as [keyof OntimeEvent | 'blank', { col: number; row: number }][];
+    .sort(([_a, a], [_b, b]) => a['col'] - b['col']) as [
-
+    OntimeEntryCommonKeys | 'blank',
-  const titleCol = rowData[0][1].col;
+    { col: number; row: number },
+  ][]; // sort the array by the column index
 
+  // inset blank data is there is spacing between relevant ontime columns
   for (const [index, e] of rowData.entries()) {
-    if (index !== 0) {
+    if (index === 0) continue;
-      const prevCol = rowData[index - 1][1].col;
+    const prevCol = rowData[index - 1][1].col;
-      const thisCol = e[1].col;
+    const thisCol = e[1].col;
-      const diff = thisCol - prevCol;
+    const diff = thisCol - prevCol;
-      if (diff > 1) {
+    if (diff > 1) {
-        const fillArr = new Array<(typeof rowData)[0]>(1).fill(['blank', { row: e[1].row, col: prevCol + 1 }]);
+      const fillArr = new Array<(typeof rowData)[0]>(1).fill(['blank', { row: e[1].row, col: prevCol + 1 }]);
-        rowData.splice(index, 0, ...fillArr);
+      rowData.splice(index, 0, ...fillArr);
-      }
     }
   }
 
-  const colors = isOntimeEvent(event) || isOntimeGroup(event) ? getAccessibleColour(event.colour) : undefined;
+  const colours = 'colour' in entry ? getAccessibleColour(entry.colour) : undefined;
-  const cellColor: sheets_v4.Schema$CellData = !colors
+  const cellColor: sheets_v4.Schema$CellData = !colours
     ? {}
     : {
         userEnteredFormat: {
-          backgroundColor: toSheetColourLevel(colors.background),
+          backgroundColor: toSheetColourLevel(colours.background),
           textFormat: {
-            foregroundColor: toSheetColourLevel(colors.text),
+            foregroundColor: toSheetColourLevel(colours.text),
           },
           borders: {
             bottom: {
               style: 'SOLID',
-              color: toSheetColourLevel(colors.border),
+              color: toSheetColourLevel(colours.border),
             },
           },
         },
       };
 
   const returnRows: sheets_v4.Schema$CellData[] = rowData.map(([key, _]) => {
-    return { ...getCellData(key, event), ...cellColor };
+    return { ...getCellData(key, entry), ...cellColor };
   });
 
+  const headerLocation = rowData[0][1];
+
   return {
     updateCells: {
       start: {
         sheetId: worksheetId,
-        rowIndex: index + rowData[0][1]['row'] + 1,
+        rowIndex: index + headerLocation.row + 1,
-        columnIndex: titleCol,
+        columnIndex: headerLocation.col,
       },
       fields: 'userEnteredValue,userEnteredFormat',
       rows: [
@@ -139,40 +149,39 @@ export function cellRequestFromEvent(
   };
 }
 
-function getCellData(key: keyof OntimeEvent | 'blank', event: OntimeEntry) {
+function getCellData(key: OntimeEntryCommonKeys | 'blank', entry: OntimeEntry) {
-  if (isOntimeEvent(event)) {
+  if (isOntimeDelay(entry) || key === 'blank') {
-    if (key === 'blank') {
+    return {};
-      return {};
-    }
-    if (key === 'colour') {
-      return { userEnteredValue: { stringValue: event[key] } };
-    }
-    if (key.startsWith('custom')) {
-      const customKey = key.split(':')[1];
-      return { userEnteredValue: { stringValue: event.custom[customKey] } };
-    }
-
-    if (typeof event[key] === 'number') {
-      return { userEnteredValue: { stringValue: millisToString(event[key]) } };
-    }
-    if (typeof event[key] === 'string') {
-      return { userEnteredValue: { stringValue: event[key] } };
-    }
-    if (typeof event[key] === 'boolean') {
-      return { userEnteredValue: { boolValue: event[key] } };
-    }
   }
 
-  if (isOntimeGroup(event)) {
+  // we need to flatten the milestones
-    if (key === 'title') {
+  if (key.startsWith('custom')) {
-      return { userEnteredValue: { stringValue: event[key] } };
+    const customKey = key.split(':')[1];
-    }
+    return { userEnteredValue: { stringValue: entry.custom[customKey] } };
-    if (key === 'timerType') {
-      return { userEnteredValue: { stringValue: 'group' } };
-    }
   }
 
-  return {};
+  // we need to remap the event type to timer type in the case of groups and milestones
+  if (key === 'timerType') {
+    if (isOntimeGroup(entry))
+      return { userEnteredValue: { stringValue: entry.id.startsWith('group-end') ? 'group-end' : 'group' } };
+    if (isOntimeMilestone(entry)) return { userEnteredValue: { stringValue: 'milestone' } };
+    return { userEnteredValue: { stringValue: entry.timerType } };
+  }
+
+  // typescript cannot guarantee that the key exists for every entry
+  // so we check for the key existence and assert the type
+  if (!(key in entry)) return {};
+  const value = entry[key as keyof OntimeEntry];
+
+  if (typeof value === 'number') {
+    return { userEnteredValue: { stringValue: millisToString(value) } };
+  }
+  if (typeof value === 'string') {
+    return { userEnteredValue: { stringValue: value } };
+  }
+  if (typeof value === 'boolean') {
+    return { userEnteredValue: { boolValue: value } };
+  }
 }
 
 type googleSheetCellColour = {

apps/server/src/stores/runtimeState.ts

@@ -24,7 +24,7 @@ import {
 } from 'ontime-utils';
 
 import { timeNow } from '../utils/time.js';
-import type { RestorePoint } from '../services/RestoreService.js';
+import type { RestorePoint } from '../services/restore-service/restore.type.js';
 import { getCurrent, getExpectedFinish, getRuntimeOffset, getTimerPhase } from '../services/timerUtils.js';
 import { loadRoll, normaliseRollStart } from '../services/rollUtils.js';
 import { timerConfig } from '../setup/config.js';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.3",
   "description": "Time keeping for live events",
   "keywords": [
     "ontime",

packages/types/src/translations/index.ts

@@ -1,6 +1,7 @@
 export const langEn = {
   'common.expected_finish': 'Expected Finish',
   'common.minutes': 'min',
+  'common.seconds': 'sec',
   'common.now': 'Now',
   'common.next': 'Next',
   'common.scheduled_start': 'Scheduled start',
@@ -13,6 +14,7 @@ export const langEn = {
   'common.no_data': 'No data',
   'countdown.ended': 'Event ended at',
   'countdown.running': 'Event running',
+  'countdown.loaded': 'Event loaded',
   'countdown.select_event': 'Select an event to follow',
   'countdown.to_start': 'Time to start',
   'countdown.waiting': 'Waiting for event start',

packages/utils/src/feature/spreadsheet-import/spreadsheetImport.ts

@@ -14,7 +14,7 @@ export const defaultImportMap = {
   title: 'title',
   countToEnd: 'count to end',
   skip: 'skip',
-  note: 'notes',
+  note: 'note',
   colour: 'colour',
   endAction: 'end action',
   timerType: 'timer type',