feat: Keep screen awake (#1788)

* feat keepAwake hook

* reaqure lock after view change

* refactor: move it to a navigation view setting

* save to search params

.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

.github/workflows/build_resolver.yml

@@ -0,0 +1,42 @@
+name: Ontime Resolver build
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  build_cli:
+    permissions:
+      id-token: write
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        run: pnpm turbo @getontime/resolver#build
+
+      - name: Publish to NPM
+        run: pnpm publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true
+        working-directory: ./apps/resolver

.prettierignore

@@ -7,4 +7,5 @@ playwright-report
 
 **/*.toml
 **/*.yml
-**/*.json
+**/*.json
+!tsconfig.common.json

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-beta.2",
+    "version": "4.0.0-beta.4",
     "author": "Carlos Valente",
     "description": "Time keeping for live events",
     "repository": "https://github.com/cpvalente/ontime",

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.4",
   "private": true,
   "type": "module",
   "dependencies": {

apps/client/src/App.tsx

@@ -8,6 +8,7 @@ import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverla
 import { AppContextProvider } from './common/context/AppContext';
 import { ontimeQueryClient } from './common/queryClient';
 import { connectSocket } from './common/utils/socket';
+import KeepAwake from './features/keep-awake/KeepAwake';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
 import { baseURI } from './externals';
@@ -24,6 +25,7 @@ function App() {
               <ErrorBoundary>
                 <TranslationProvider>
                   <IdentifyOverlay />
+                  <KeepAwake />
                   <AppRouter />
                 </TranslationProvider>
               </ErrorBoundary>

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

@@ -1,10 +1,11 @@
 import { memo } from 'react';
-import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
+import { IoClose, IoContract, IoExpand, IoEye, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
 import { useLocation } from 'react-router';
 import { Dialog } from '@base-ui-components/react/dialog';
 import { useDisclosure, useFullscreen } from '@mantine/hooks';
 
 import { isLocalhost } from '../../../externals';
+import { useKeepAwakeOptions } from '../../../features/keep-awake/KeepAwake';
 import { navigatorConstants } from '../../../viewerConfig';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
@@ -31,6 +32,7 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
   const [isRenameOpen, handlers] = useDisclosure(false);
   const { fullscreen, toggle } = useFullscreen();
   const { mirror, toggleMirror } = useViewOptionsStore();
+  const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
   const location = useLocation();
 
   return (
@@ -62,6 +64,13 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
               <IoSwapVertical />
               {mirror && <span className={style.note}>Active</span>}
             </NavigationMenuItem>
+            {window.isSecureContext && (
+              <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
+                Keep Awake
+                <IoEye />
+                {keepAwake && <span className={style.note}>Active</span>}
+              </NavigationMenuItem>
+            )}
             <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>
 
             <hr className={style.separator} />

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/ViewParamsEditor.module.scss

@@ -28,6 +28,7 @@
   bottom: 0;
 
   width: 40rem;
+  max-width: 100vw;
   height: 100vh;
 
   display: flex;

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

@@ -1,6 +1,5 @@
-import { RefObject, useCallback, useEffect, useRef } from 'react';
-
-import { useSelectedEventId } from './useSocket';
+import { RefObject, useCallback, useEffect } from 'react';
+import { MaybeString } from 'ontime-types';
 
 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) {
-  const { followRef, scrollRef, doFollow, topOffset = 100, setScrollFlag } = props;
-
-  // when cursor moves, view should follow
+export default function useFollowComponent({
+  followRef,
+  scrollRef,
+  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);
       });
     }
-
-    // eslint-disable-next-line -- the prompt seems incorrect
-  }, [followRef?.current, scrollRef?.current]);
+  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
 
   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

@@ -11,7 +11,6 @@ const createSelector =
 export const setClientRemote = {
   setIdentify: (payload: { target: string; identify: boolean }) => sendSocket('client', payload),
   setRedirect: (payload: { target: string; redirect: string }) => {
-    console.log('--- got', payload);
     sendSocket('client', payload);
   },
   setClientName: (payload: { target: string; rename: string }) => sendSocket('client', payload),
@@ -165,24 +164,6 @@ export const useProgressData = createSelector((state: RuntimeStore) => ({
   timeDanger: state.eventNow?.timeDanger ?? null,
 }));
 
-export const useRundownOverview = createSelector((state: RuntimeStore) => ({
-  plannedStart: state.rundown.plannedStart,
-  actualStart: state.rundown.actualStart,
-  plannedEnd: state.rundown.plannedEnd,
-  expectedEnd: state.offset.expectedRundownEnd,
-}));
-
-export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) => ({
-  playback: state.timer.playback,
-  clock: state.clock,
-
-  numEvents: state.rundown.numEvents,
-  selectedEventIndex: state.rundown.selectedEventIndex,
-  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
-
-  groupExpectedEnd: state.offset.expectedGroupEnd,
-}));
-
 export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
   clock: state.clock,
   offset: state.offset.absolute,
@@ -191,7 +172,7 @@ export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
 export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
   offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
   mode: state.offset.mode,
-  currentDay: state.eventNow?.dayOffset ?? 0,
+  currentDay: state.rundown.currentDay ?? 0,
   actualStart: state.rundown.actualStart,
   plannedStart: state.rundown.plannedStart,
   clock: state.clock,
@@ -228,6 +209,45 @@ export const usePlayback = () => {
   return useRuntimeStore(featureSelector);
 };
 
+/* ======================= Overview data subscriptions ======================= */
+
+export const useRundownOverview = createSelector((state: RuntimeStore) => ({
+  plannedStart: state.rundown.plannedStart,
+  actualStart: state.rundown.actualStart,
+  plannedEnd: state.rundown.plannedEnd,
+  expectedEnd: state.offset.expectedRundownEnd,
+}));
+
+export const useProgressOverview = createSelector((state: RuntimeStore) => ({
+  numEvents: state.rundown.numEvents,
+  selectedEventIndex: state.rundown.selectedEventIndex,
+}));
+
+export const useOffsetOverview = createSelector((state: RuntimeStore) => ({
+  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
+  playback: state.timer.playback,
+}));
+
+export const useGroupTimerOverView = createSelector((state: RuntimeStore) => ({
+  clock: state.clock,
+  mode: state.offset.mode,
+  groupExpectedEnd: state.offset.expectedGroupEnd,
+  // we can force these numbers to 0 fo this use case to avoid null checks
+  actualGroupStart: state.rundown.actualGroupStart ?? 0,
+  currentDay: state.eventNow?.dayOffset ?? 0,
+  playback: state.timer.playback,
+}));
+
+export const useFlagTimerOverView = createSelector((state: RuntimeStore) => ({
+  clock: state.clock,
+  mode: state.offset.mode,
+  // we can force these numbers to 0 fo this use case to avoid null checks
+  actualStart: state.rundown.actualStart ?? 0,
+  plannedStart: state.rundown.plannedStart ?? 0,
+  currentDay: state.eventNow?.dayOffset ?? 0,
+  playback: state.timer.playback,
+}));
+
 /* ======================= View specific subscriptions ======================= */
 
 export const useTimerSocket = createSelector((state: RuntimeStore) => ({

apps/client/src/common/models/Util.type.ts

@@ -1 +0,0 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg';

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/stores/useCuesheetLinksStore.ts

@@ -1,89 +0,0 @@
-import { create } from 'zustand';
-
-type Target = 'cuesheet' | 'timer' | 'clock' | 'countdown' | 'backstage' | 'studio';
-
-interface SelectionState {
-  [key: string]: boolean;
-}
-
-interface ColumnPermissions {
-  read: string[];
-  write: string[];
-}
-
-interface CuesheetLinksState {
-  target: Target | null;
-  readSelected: SelectionState;
-  writeSelected: SelectionState;
-  setTarget: (target: Target | null) => void;
-  setField: (field: 'read' | 'write', key: string, value: boolean) => void;
-  toggleField: (field: 'read' | 'write', key: string) => void;
-  selectAll: (field: 'read' | 'write', keys: string[]) => void;
-  clearAll: (field: 'read' | 'write', keys: string[]) => void;
-  // Returns arrays of column keys that have read/write permissions if target is 'cuesheet'
-  getSelections: () => ColumnPermissions | null;
-}
-
-export const useCuesheetLinksStore = create<CuesheetLinksState>((set, get) => ({
-  target: null,
-  readSelected: {},
-  writeSelected: {},
-  setTarget: (target) => set({ target }),
-  setField: (field, key, value) =>
-    set((state) => ({
-      ...(field === 'read'
-        ? { readSelected: { ...state.readSelected, [key]: value } }
-        : { writeSelected: { ...state.writeSelected, [key]: value } }),
-    })),
-  toggleField: (field, key) =>
-    set((state) => ({
-      ...(field === 'read'
-        ? { readSelected: { ...state.readSelected, [key]: !state.readSelected[key] } }
-        : { writeSelected: { ...state.writeSelected, [key]: !state.writeSelected[key] } }),
-    })),
-  selectAll: (field, keys) =>
-    set((_state) => ({
-      ...(field === 'read'
-        ? {
-            readSelected: keys.reduce((acc, key) => {
-              acc[key] = true;
-              return acc;
-            }, {} as SelectionState),
-          }
-        : {
-            writeSelected: keys.reduce((acc, key) => {
-              acc[key] = true;
-              return acc;
-            }, {} as SelectionState),
-          }),
-    })),
-  clearAll: (field, keys) =>
-    set((_state) => ({
-      ...(field === 'read'
-        ? {
-            readSelected: keys.reduce((acc, key) => {
-              acc[key] = false;
-              return acc;
-            }, {} as SelectionState),
-          }
-        : {
-            writeSelected: keys.reduce((acc, key) => {
-              acc[key] = false;
-              return acc;
-            }, {} as SelectionState),
-          }),
-    })),
-  getSelections: () => {
-    const state = get();
-    if (state.target !== 'cuesheet') return null;
-
-    return {
-      read: Object.entries(state.readSelected)
-        .filter(([_, selected]) => selected)
-        .map(([key]) => key),
-      write: Object.entries(state.writeSelected)
-        .filter(([_, selected]) => selected)
-        .map(([key]) => key),
-    };
-  },
-}));

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

@@ -1,8 +0,0 @@
-import { MaybeString } from 'ontime-types';
-
-export default function safeParseNumber(value: MaybeString, defaultValue: number = 0): number {
-  if (!value) return defaultValue;
-  const number = Number(value);
-  if (isNaN(number)) return defaultValue;
-  return number;
-}

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

@@ -1,5 +1,5 @@
 import {
-  ApiAction,
+  ApiActionTag,
   Log,
   MessageTag,
   RefetchKey,
@@ -199,7 +199,7 @@ export const connectSocket = () => {
   };
 };
 
-export function sendSocket<T extends MessageTag | ApiAction>(
+export function sendSocket<T extends MessageTag | ApiActionTag>(
   tag: T,
   payload: T extends MessageTag ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload'] : unknown,
 ): void {

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

@@ -33,8 +33,8 @@ export function validateProjectFile(file: File) {
   }
 
   // Limit file size of a project file to around 1MB
-  if (file.size > 1_000_000) {
-    throw new Error('File size limit (1MB) exceeded');
+  if (file.size > 2_000_000) {
+    throw new Error('File size limit (2MB) exceeded');
   }
 }
 
@@ -56,8 +56,8 @@ export function validateLogo(file: File) {
     throw new Error('File is empty');
   }
 
-  // Limit file size of a project file to around 1MB
-  if (file.size > 1_000_000) {
-    throw new Error('File size limit (1MB) exceeded');
+  // Limit file size of a project file to around 1.5MB
+  if (file.size > 1_500_000) {
+    throw new Error('File size limit (1.5MB) exceeded');
   }
 }

apps/client/src/features/PresetWrapper.tsx

@@ -1,29 +0,0 @@
-/* eslint-disable react/display-name */
-import { ComponentType, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router';
-
-import useUrlPresets from '../common/hooks-query/useUrlPresets';
-import { getRouteFromPreset } from '../common/utils/urlPresets';
-
-const withPreset = <P extends object>(Component: ComponentType<P>) => {
-  return (props: Partial<P>) => {
-    const { data } = useUrlPresets();
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    // navigate if is alias route
-    useEffect(() => {
-      if (!data) return;
-      const destination = getRouteFromPreset(location, data);
-
-      // navigate to this destination if its not null
-      if (destination) {
-        navigate(destination);
-      }
-    }, [data, navigate, location]);
-
-    return <Component {...(props as P)} />;
-  };
-};
-
-export default withPreset;

apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx

@@ -107,16 +107,16 @@ export default function AutomationsList(props: AutomationsListProps) {
                     </IconButton>
                   </Panel.InlineElements>
                 </tr>
-                {deleteError && (
-                  <tr>
-                    <td colSpan={5}>
-                      <Panel.Error>{deleteError}</Panel.Error>
-                    </td>
-                  </tr>
-                )}
               </Fragment>
             );
           })}
+          {deleteError && (
+            <tr>
+              <td colSpan={5}>
+                <Panel.Error>{deleteError}</Panel.Error>
+              </td>
+            </tr>
+          )}
         </tbody>
       </Panel.Table>
     </Panel.Card>

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/ImportReview.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { CustomFields, Rundown } from 'ontime-types';
 
 import Button from '../../../../../common/components/buttons/Button';
+import useRundown from '../../../../../common/hooks-query/useRundown';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import PreviewSpreadsheet from './preview/PreviewRundown';
@@ -17,7 +18,7 @@ interface ImportReviewProps {
 
 export default function ImportReview(props: ImportReviewProps) {
   const { rundown, customFields, onFinished, onCancel } = props;
-
+  const { data: currentRundown } = useRundown();
   const [loading, setLoading] = useState(false);
   const { importRundown } = useGoogleSheet();
   const resetPreview = useSheetStore((state) => state.resetPreview);
@@ -29,9 +30,12 @@ export default function ImportReview(props: ImportReviewProps) {
 
   const applyImport = async () => {
     setLoading(true);
+
+    // we need to import on-top of the currently loaded rundown
+    // so the id needs to match
     await importRundown(
       {
-        [rundown.id]: rundown,
+        [currentRundown.id]: { ...rundown, id: currentRundown.id, title: currentRundown.title },
       },
       customFields,
     );

apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx

@@ -27,6 +27,7 @@ export default function ProjectData() {
     reset,
     formState: { isSubmitting, isValid, isDirty, errors },
     setError,
+    clearErrors,
     watch,
     control,
     setValue,
@@ -53,6 +54,7 @@ export default function ProjectData() {
 
   const handleUploadProjectLogo = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
+    clearErrors('logo');
 
     if (!file) {
       return;
@@ -93,6 +95,7 @@ export default function ProjectData() {
 
   const onSubmit = async (formData: ProjectData) => {
     try {
+      clearErrors();
       await updateProjectData(formData);
     } catch (error) {
       const message = maybeAxiosError(error);

apps/client/src/features/keep-awake/KeepAwake.tsx

@@ -0,0 +1,84 @@
+import { use, useCallback, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router';
+
+import { PresetContext } from '../../common/context/PresetContext';
+
+/** @url https://developer.mozilla.org/en-US/docs/Web/API/WakeLock */
+export default function KeepAwake() {
+  const { keepAwake } = useKeepAwakeOptions();
+  const [wakeLockSentinel, setWakeLockSentinel] = useState<WakeLockSentinel | null>(null);
+
+  const removeLock = () => {
+    if (wakeLockSentinel) wakeLockSentinel.release().finally(() => setWakeLockSentinel(null));
+  };
+
+  const acquireLock = () => {
+    if (!wakeLockSentinel || wakeLockSentinel.released) {
+      setWakeLockSentinel(null);
+      navigator.wakeLock
+        .request('screen')
+        .then((sentinel) => {
+          setWakeLockSentinel(sentinel);
+        })
+        .catch(console.error);
+    }
+  };
+
+  useEffect(() => {
+    const controller = new AbortController();
+    if (keepAwake) {
+      acquireLock();
+      document.addEventListener(
+        'visibilitychange',
+        () => {
+          if (wakeLockSentinel !== null && document.visibilityState === 'visible') {
+            acquireLock();
+          }
+        },
+        { signal: controller.signal },
+      );
+    } else {
+      removeLock();
+    }
+
+    return () => {
+      controller.abort();
+      removeLock();
+    };
+  }, [keepAwake]);
+
+  return <></>;
+}
+
+const keepAwakeKey = 'keep-awake';
+
+function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URLSearchParams) {
+  // Helper to get value from either source, prioritizing defaultValues
+  return defaultValues?.has(keepAwakeKey) || searchParams.has(keepAwakeKey);
+}
+
+/**
+ * Hook exposes the keep awake options
+ */
+export function useKeepAwakeOptions() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  const keepAwake = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
+  const toggleKeepAwake = useCallback(() => {
+    setSearchParams((searchParams) => {
+      if (keepAwake) {
+        searchParams.delete(keepAwakeKey);
+      } else {
+        searchParams.set(keepAwakeKey, '1');
+      }
+      return searchParams;
+    });
+  }, [keepAwake]);
+
+  return { keepAwake, toggleKeepAwake };
+}

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/overview/composite/TimeElements.module.scss

@@ -47,9 +47,10 @@
 
 .daySpan {
   &::after {
-    content: '*';
+    content: "+"attr(data-day-offset);
     vertical-align: super;
-    font-size: 0.75em;
+    font-size: 0.6em;
+    letter-spacing: 0;
     color: $info-blue;
   }
 }
@@ -67,3 +68,10 @@
   font-size: calc(1rem - 2px);
   text-align: right;
 }
+
+.dueTime {
+  text-transform: capitalize;
+  font-size: 1rem;
+  letter-spacing: 0;
+  color: $playback-over;
+}

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

@@ -8,23 +8,26 @@ import {
   TbFolderPin,
   TbFolderStar,
 } from 'react-icons/tb';
-import { OntimeEvent, OntimeGroup, TimerPhase, TimerType } from 'ontime-types';
-import { isPlaybackActive, millisToString } from 'ontime-utils';
+import { OffsetMode, OntimeEvent, OntimeGroup, TimerPhase, TimerType } from 'ontime-types';
+import { dayInMs, isPlaybackActive, millisToString } from 'ontime-utils';
 
 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import {
   useClock,
   useCurrentGroupId,
+  useFlagTimerOverView,
+  useGroupTimerOverView,
   useNextFlag,
+  useOffsetOverview,
+  useProgressOverview,
   useRundownOverview,
-  useRuntimePlaybackOverview,
   useTimer,
 } from '../../../common/hooks/useSocket';
 import { useEntry } from '../../../common/hooks-query/useRundown';
 import { getOffsetState, getOffsetText } from '../../../common/utils/offset';
 import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';
-import { calculateEndAndDaySpan, formattedTime } from '../overview.utils';
+import { calculateEndAndDaySpan, formatDueTime, formattedTime } from '../overview.utils';
 
 import { OverUnder, TimeColumn } from './TimeLayout';
 
@@ -58,8 +61,8 @@ export function StartTimes() {
           <Tooltip text='Planned end time' render={<TbCalendarPin className={style.icon} />} />
           {maybePlannedDaySpan > 0 ? (
             <Tooltip
-              text={`Event spans over ${maybePlannedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} />}
+              text={`Rundown spans over ${maybePlannedDaySpan + 1} days`}
+              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybePlannedDaySpan} />}
             >
               {plannedEndText}
             </Tooltip>
@@ -71,8 +74,8 @@ export function StartTimes() {
           <Tooltip text='Expected end time' render={<TbCalendarStar className={style.icon} />} />
           {maybeExpectedEnd !== null && maybeExpectedDaySpan > 0 ? (
             <Tooltip
-              text={`Event spans over ${maybeExpectedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} />}
+              text={`Rundown spans over ${maybeExpectedDaySpan + 1} days`}
+              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybeExpectedDaySpan} />}
             >
               {formattedTime(maybeExpectedEnd)}
             </Tooltip>
@@ -96,61 +99,110 @@ export function MetadataTimes() {
   );
 }
 
-//TODO: there a some things here we still need to think about, mainly what to do whit the planed group duration in relation to the events
 function GroupTimes() {
-  const { clock, groupExpectedEnd } = useRuntimePlaybackOverview();
+  const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback } = useGroupTimerOverView();
   const { currentGroupId } = useCurrentGroupId();
   const group = useEntry(currentGroupId) as OntimeGroup | null;
 
-  // the group end time dose not encode any day offsets
-  const plannedGroupEnd = group && group.timeStart !== null ? group.timeStart + group.duration - clock : null;
-  const plannedTimeUntilGroupEnd = formattedTime(plannedGroupEnd, 3, TimerType.CountDown);
+  const active = isPlaybackActive(playback);
+
+  // the group end time dose not encode any day offsets so it is calculated with group start time and duration
+  const plannedGroupEnd = (() => {
+    if (!active) return null;
+    if (!group || group.timeStart === null) return null;
+    const normalizedClock = clock + currentDay * dayInMs;
+
+    return mode === OffsetMode.Absolute
+      ? group.timeStart + group.duration - normalizedClock
+      : actualGroupStart + group.duration - normalizedClock;
+  })();
+
+  const plannedTimeUntilGroupEnd = formatDueTime(plannedGroupEnd, 3, TimerType.CountDown);
 
   const expectedGroupEnd = groupExpectedEnd !== null ? groupExpectedEnd - clock : null;
-  const expectedTimeUntilGroupEnd = formattedTime(expectedGroupEnd, 3, TimerType.CountDown);
-
-  const groupTitle = group?.title ?? null;
+  const expectedTimeUntilGroupEnd = formatDueTime(expectedGroupEnd, 3, TimerType.CountDown);
 
   return (
     <div className={style.metadataRow}>
-      <span className={groupTitle ? style.labelTitle : style.label}>{`${groupTitle ? groupTitle : 'Group'} `}</span>
+      <span className={group?.title ? style.labelTitle : style.label}>{`${group?.title || 'Group'} `}</span>
       <div className={style.labelledElement}>
         <Tooltip text='Time to planned group end' render={<TbFolderPin className={style.icon} />} />
-        <span className={cx([style.time, !group && style.muted])}>{plannedTimeUntilGroupEnd}</span>
+        <span
+          className={cx([
+            style.time,
+            (!group || !active) && style.muted,
+            plannedTimeUntilGroupEnd === 'due' && style.dueTime,
+          ])}
+        >
+          {plannedTimeUntilGroupEnd}
+        </span>
       </div>
       <div className={style.labelledElement}>
         <Tooltip text='Time to expected group end' render={<TbFolderStar className={style.icon} />} />
-        <span className={cx([style.time, groupExpectedEnd === null && style.muted])}>{expectedTimeUntilGroupEnd}</span>
+        <span
+          className={cx([
+            style.time,
+            !groupExpectedEnd && style.muted,
+            expectedTimeUntilGroupEnd === 'due' && style.dueTime,
+          ])}
+        >
+          {expectedTimeUntilGroupEnd}
+        </span>
       </div>
     </div>
   );
 }
 
 function FlagTimes() {
-  const { clock } = useClock();
+  const { clock, mode, actualStart, plannedStart, playback, currentDay } = useFlagTimerOverView();
   const { id, expectedStart } = useNextFlag();
   const entry = useEntry(id) as OntimeEvent | null;
 
-  const plannedFlagStart = entry ? entry.timeStart - clock : null;
-  const plannedTimeUntilDisplay = formattedTime(plannedFlagStart, 3, TimerType.CountDown);
+  const active = isPlaybackActive(playback);
+
+  const plannedFlagStart = (() => {
+    if (!active) return null;
+    if (!entry) return null;
+    const normalizedTimeStart = entry.timeStart + entry.dayOffset * dayInMs;
+    const normalizedClock = clock + currentDay * dayInMs;
+    return mode === OffsetMode.Absolute
+      ? normalizedTimeStart - normalizedClock
+      : normalizedTimeStart + actualStart - plannedStart - normalizedClock;
+  })();
+
+  const plannedTimeUntilDisplay = formatDueTime(plannedFlagStart, 3, TimerType.CountDown);
 
   const expectedTimeUntil = expectedStart !== null ? expectedStart - clock : null;
-  const expectedTimeUntilDisplay = formattedTime(expectedTimeUntil, 3, TimerType.CountDown);
+  const expectedTimeUntilDisplay = formatDueTime(expectedTimeUntil, 3, TimerType.CountDown);
 
   const title = entry?.title ?? null;
 
   return (
     <div className={style.metadataRow}>
-      <span className={title ? style.labelTitle : style.label}>{`${title ? title : 'Flag'} `}</span>
+      <span className={title ? style.labelTitle : style.label}>{`${title || 'Flag'} `}</span>
       <div className={style.labelledElement}>
         <Tooltip text='Time to next flag planned start' render={<TbFlagPin className={style.icon} />} />
-        <span data-testid='flag-plannedStart' className={cx([style.time, !entry && style.muted])}>
+        <span
+          data-testid='flag-plannedStart'
+          className={cx([
+            style.time,
+            (!entry || !active) && style.muted,
+            plannedTimeUntilDisplay === 'due' && style.dueTime,
+          ])}
+        >
           {plannedTimeUntilDisplay}
         </span>
       </div>
       <div className={style.labelledElement}>
         <Tooltip text='Time to next flag expected start' render={<TbFlagStar className={style.icon} />} />
-        <span data-testid='flag-expectedStart' className={cx([style.time, expectedTimeUntil === null && style.muted])}>
+        <span
+          data-testid='flag-expectedStart'
+          className={cx([
+            style.time,
+            expectedTimeUntil === null && style.muted,
+            expectedTimeUntilDisplay === 'due' && style.dueTime,
+          ])}
+        >
           {expectedTimeUntilDisplay}
         </span>
       </div>
@@ -159,7 +211,7 @@ function FlagTimes() {
 }
 
 export function ProgressOverview() {
-  const { numEvents, selectedEventIndex } = useRuntimePlaybackOverview();
+  const { numEvents, selectedEventIndex } = useProgressOverview();
 
   const current = selectedEventIndex !== null ? selectedEventIndex + 1 : enDash;
   const progressText = numEvents ? `${current} of ${numEvents || enDash}` : enDash;
@@ -168,7 +220,7 @@ export function ProgressOverview() {
 }
 
 export function OffsetOverview() {
-  const { offset, playback } = useRuntimePlaybackOverview();
+  const { offset, playback } = useOffsetOverview();
 
   const isPlaying = isPlaybackActive(playback);
   const offsetState = getOffsetState(isPlaying ? offset : null);

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

@@ -3,6 +3,23 @@ import { dayInMs, millisToString } from 'ontime-utils';
 
 import { timerPlaceholder, timerPlaceholderMin } from '../../common/utils/styleUtils';
 
+/**
+ * Composition to stop negative timers from being formatted
+ * They should show a due string instead
+ *
+ * This is used for cases when a negative timer is unwanted
+ * eg: count down to a milestone
+ */
+export function formatDueTime(
+  time: MaybeNumber,
+  segments: number = 3,
+  direction?: TimerType.CountDown | TimerType.CountUp,
+  dueString = 'due',
+): string {
+  if (time !== null && time <= 0) return dueString;
+  return formattedTime(time, segments, direction);
+}
+
 /**
  * Encapsulates the logic for formatting time in overview
  */

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 */
-  max-width: 45rem;
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
+  // width is locked to swatch picker elements
+  min-width: calc(15 * 2rem + 13 * 0.5rem);
+  width: 0;
 }

apps/client/src/features/rundown/rundown-event/composite/RundownEventChip.tsx

@@ -73,9 +73,7 @@ interface EventUntilProps {
   isLinkedToLoaded: boolean;
 }
 
-function EventUntil(props: EventUntilProps) {
-  const { timeStart, delay, dayOffset, totalGap, isLinkedToLoaded } = props;
-
+function EventUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }: EventUntilProps) {
   const timeUntil = useTimeUntilExpectedStart({ timeStart, delay, dayOffset }, { totalGap, isLinkedToLoaded });
   const isDue = timeUntil < MILLIS_PER_SECOND;
 

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/theme/_viewerDefs.scss

@@ -17,7 +17,6 @@ $header-font-size: clamp(24px, 2.5vw, 48px);
 
 // General styling
 $accent-color: $red-500; // --accent-color-override
-$delay-color: $ontime-delay-text;
 $viewer-label-color: rgba(white, 25%);
 
 // Main Properties of a viewer

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

@@ -10,13 +10,14 @@ import {
   makeProjectDataOptions,
 } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
-import { scheduleOptions } from '../common/schedule/schedule.options';
+import { getScheduleOptions } from '../common/schedule/schedule.options';
 
 export const getBackstageOptions = (
   timeFormat: string,
   customFields: CustomFields,
   projectData: ProjectData,
 ): ViewOption[] => {
+  const customFieldOptions = makeOptionsFromCustomFields(customFields, []);
   const secondaryOptions = makeOptionsFromCustomFields(customFields, [
     { value: 'none', label: 'None' },
     { value: 'note', label: 'Note' },
@@ -39,7 +40,7 @@ export const getBackstageOptions = (
         },
       ],
     },
-    scheduleOptions,
+    getScheduleOptions(customFieldOptions),
     {
       title: OptionTitle.ElementVisibility,
       collapsible: true,

apps/client/src/views/common/schedule/ScheduleContext.tsx

@@ -1,14 +1,5 @@
-import {
-  createContext,
-  PropsWithChildren,
-  RefObject,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import { isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';
+import { createContext, PropsWithChildren, RefObject, use, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { EntryId, isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';
 
 import { usePartialRundown } from '../../../common/hooks-query/useRundown';
 
@@ -25,13 +16,18 @@ interface ScheduleContextState {
 const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);
 
 interface ScheduleProviderProps {
-  selectedEventId: string | null;
+  selectedEventId: EntryId | null;
 }
 
 export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildren<ScheduleProviderProps>) => {
-  const { cycleInterval, stopCycle } = useScheduleOptions();
-  const { data: events } = usePartialRundown((event: OntimeEntry) => {
-    return isOntimeEvent(event);
+  const { cycleInterval, stopCycle, filter } = useScheduleOptions();
+  const { data: events } = usePartialRundown((entry: OntimeEntry) => {
+    if (filter) {
+      // custom keys are prepended with custom-
+      const customKey = filter.startsWith('custom-') ? filter.slice('custom-'.length) : filter;
+      return isOntimeEvent(entry) && Boolean(entry.custom[customKey]);
+    }
+    return isOntimeEvent(entry);
   });
 
   const [firstIndex, setFirstIndex] = useState(-1);
@@ -135,7 +131,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
   selectedEventIndex = 0;
 
   return (
-    <ScheduleContext.Provider
+    <ScheduleContext
       value={{
         events: viewEvents as OntimeEvent[],
         selectedEventId,
@@ -145,12 +141,12 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
       }}
     >
       {children}
-    </ScheduleContext.Provider>
+    </ScheduleContext>
   );
 };
 
 export const useSchedule = () => {
-  const context = useContext(ScheduleContext);
+  const context = use(ScheduleContext);
   if (!context) {
     throw new Error('useSchedule() can only be used inside a ScheduleContext');
   }

apps/client/src/views/common/schedule/ScheduleItem.tsx

@@ -22,8 +22,7 @@ interface ScheduleItemProps {
   delay: number;
 }
 
-export default function ScheduleItem(props: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, colour, skip, delay } = props;
+export default function ScheduleItem({ timeStart, timeEnd, title, colour, skip, delay }: ScheduleItemProps) {
   const { showExpected } = useScheduleOptions();
 
   if (showExpected) {
@@ -67,9 +66,7 @@ export default function ScheduleItem(props: ScheduleItemProps) {
   );
 }
 
-function DelayedScheduleItem(props: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, colour, skip, delay } = props;
-
+function DelayedScheduleItem({ timeStart, timeEnd, title, colour, skip, delay }: ScheduleItemProps) {
   const start = formatTime(timeStart, formatOptions);
   const end = formatTime(timeEnd, formatOptions);
   const delayedStart = formatTime(timeStart + delay, formatOptions);
@@ -95,9 +92,7 @@ function DelayedScheduleItem(props: ScheduleItemProps) {
   );
 }
 
-function ExpectedScheduleItem(props: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, colour, skip, delay } = props;
-
+function ExpectedScheduleItem({ timeStart, timeEnd, title, colour, skip, delay }: ScheduleItemProps) {
   return (
     <li className={cx(['entry', skip && 'entry--skip'])}>
       <div className='entry-times'>
@@ -116,12 +111,11 @@ interface ExpectedTimeProps {
   delay: number;
 }
 
-function ExpectedTime(props: ExpectedTimeProps) {
-  const { time, delay } = props;
+function ExpectedTime({ time, delay }: ExpectedTimeProps) {
   const { offset } = useRuntimeOffset();
 
   const expectedOffset = offset - delay;
-  const expectedTime = formatTime(time - offset, formatOptions);
+  const expectedTime = formatTime(time + offset, formatOptions);
   const expectedState = getOffsetState(expectedOffset);
 
   return <SuperscriptTime className={`entry-times--${expectedState}`} time={expectedTime} />;

apps/client/src/views/common/schedule/schedule.options.ts

@@ -1,14 +1,23 @@
 import { useMemo } from 'react';
 import { useSearchParams } from 'react-router';
 
+import { SelectOption } from '../../../common/components/select/Select';
 import { OptionTitle } from '../../../common/components/view-params-editor/constants';
-import { ViewOption } from '../../../common/components/view-params-editor/viewParams.types';
+import type { ViewOption } from '../../../common/components/view-params-editor/viewParams.types';
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 
-export const scheduleOptions: ViewOption = {
+export const getScheduleOptions = (customFieldOptions: SelectOption[]): ViewOption => ({
   title: OptionTitle.Schedule,
   collapsible: true,
   options: [
+    {
+      id: 'filter',
+      title: 'Filter',
+      description: 'Hide events without data in the selected custom field',
+      type: 'option',
+      values: customFieldOptions,
+      defaultValue: 'None',
+    },
     {
       id: 'stopCycle',
       title: 'Stop cycling through event pages',
@@ -31,9 +40,10 @@ export const scheduleOptions: ViewOption = {
       defaultValue: false,
     },
   ],
-};
+});
 
 type ScheduleOptions = {
+  filter: string | null;
   cycleInterval: number;
   stopCycle: boolean;
   showExpected: boolean;
@@ -41,6 +51,7 @@ type ScheduleOptions = {
 
 function getScheduleOptionsFromParams(searchParams: URLSearchParams): ScheduleOptions {
   return {
+    filter: searchParams.get('filter'),
     cycleInterval: Number(searchParams.get('cycleInterval')) || 10,
     stopCycle: isStringBoolean(searchParams.get('stopCycle')),
     showExpected: isStringBoolean(searchParams.get('showExpected')),

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

@@ -141,7 +141,7 @@ $item-height: 3.5rem;
   }
 
   .sub__schedule--delayed {
-    color: $delay-color;
+    color: $ontime-delay-text;
   }
 
   .sub__schedule--strike {

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

@@ -53,6 +53,7 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
     scrollRef,
     doFollow: !lockAutoScroll,
     topOffset: 0,
+    followTrigger: selectedEventId,
   });
 
   // reset scroll if nothing is selected

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 } =
-    useColumnManager(columns);
+  const { columnOrder, resetColumnOrder } = useColumnOrder(columns);
+  const { columnSizing, setColumnSizing } = useColumnSizes();
+  const { columnVisibility, setColumnVisibility } = useColumnVisibility();
 
   const table = useReactTable({
     data,
@@ -237,11 +238,14 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
           TableHead: (virtuosoProps) => <thead className={style.tableHeader} {...virtuosoProps} />,
         }}
         fixedHeaderContent={() => {
-          return table
-            .getHeaderGroups()
-            .map((headerGroup) => (
-              <CuesheetHeader key={headerGroup.id} cuesheetMode={cuesheetMode} headerGroup={headerGroup} />
-            ));
+          return table.getHeaderGroups().map((headerGroup) => {
+            const HeaderComponent = table.getState().columnSizingInfo.isResizingColumn
+              ? CuesheetHeader
+              : 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/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) {
-  return <div className={style.ghostedText}>{children}</div>;
+interface GhostedTextProps {
+  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/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) {
-  const { column, colSpan } = header;
-
+export function SortableCell({ columnId, colSpan, injectedStyles, children, draggable }: SortableCellProps) {
   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
-        onDoubleClick={() => header.column.resetSize()}
-        onMouseDown={header.getResizeHandler()}
-        onTouchStart={header.getResizeHandler()}
-        className={style.resizer}
-      />
+      {draggable}
     </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/cuesheet-table-elements/rowObserver.ts

@@ -1,51 +0,0 @@
-import { useVisibleRowsStore } from './visibleRowsStore';
-
-let observer: IntersectionObserver | null = null;
-
-function getObserver(): IntersectionObserver {
-  if (!observer) {
-    const options: IntersectionObserverInit = {
-      root: null,
-      rootMargin: '400px 0px', // prevent unmounting rows too early
-      threshold: 0.25,
-    };
-
-    const handleOnIntersect: IntersectionObserverCallback = (entries) => {
-      const visibleRows = useVisibleRowsStore.getState();
-      entries.forEach((entry) => {
-        const targetId = entry.target.id;
-        if (entry.isIntersecting) {
-          visibleRows.addVisibleRow(targetId);
-        } else {
-          visibleRows.removeVisibleRow(targetId);
-        }
-      });
-    };
-
-    observer = new IntersectionObserver(handleOnIntersect, options);
-  }
-
-  return observer;
-}
-
-/**
- * register a row element in the observer
- */
-export function observeRow(element: HTMLElement) {
-  getObserver().observe(element);
-}
-
-/**
- * unregister a row element in the observer
- */
-export function unobserveRow(element: HTMLElement) {
-  getObserver().unobserve(element);
-}
-
-/**
- * cleanup observer, should be called when the table component unmounts
- */
-export function cleanup() {
-  observer?.disconnect();
-  observer = null;
-}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/visibleRowsStore.ts

@@ -1,18 +0,0 @@
-import { create } from 'zustand';
-
-interface VisibleRowsStore {
-  visibleRows: Set<string>;
-  addVisibleRow: (id: string) => void;
-  removeVisibleRow: (id: string) => void;
-}
-
-export const useVisibleRowsStore = create<VisibleRowsStore>((set) => ({
-  visibleRows: new Set(),
-  addVisibleRow: (id) => set((state) => ({ visibleRows: new Set(state.visibleRows).add(id) })),
-  removeVisibleRow: (id) =>
-    set((state) => {
-      const newSet = new Set(state.visibleRows);
-      newSet.delete(id);
-      return { visibleRows: newSet };
-    }),
-}));

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>[]) {
-  const [columnVisibility, setColumnVisibility] = useLocalStorage({
-    key: tableHiddenKey,
-    defaultValue: {},
-  });
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
-    key: tableOrderKey,
-    defaultValue: columns.map((col) => col.id as string),
-  });
-
-  const [columnSizing, setColumnSizingState] = useState(() => {
+export function useColumnSizes() {
+  const [columnSizing, setColumnSizingState] = useState<Record<string, number>>(() => {
     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) => {
-    setColumnSizingState(sizes);
+  const setColumnSizing = useCallback((sizesOrUpdater: Updater<ColumnSizingState>) => {
+    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 colour = entry.type === SupportedEntry.Event ? entry.colour : '';
+                const displayCue = 'cue' in entry ? entry.cue : '';
 
                 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];
-          if (isOntimeEvent(event)) {
-            if (event.title.toLowerCase().includes(searchString)) {
+          const entry = data[i];
+          if (isOntimeEvent(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
               remaining--;
               results.push({
                 type: SupportedEntry.Event,
-                id: event.id,
+                id: entry.id,
                 index: i,
                 eventIndex,
-                title: event.title,
-                cue: event.cue,
-                colour: event.colour,
-                parent: event.parent,
+                title: entry.title,
+                cue: entry.cue,
+                colour: entry.colour,
+                parent: entry.parent,
               } satisfies FilterableEvent);
             }
             eventIndex++;
-          }
-          if (isOntimeGroup(event)) {
-            if (event.title.toLowerCase().includes(searchString)) {
+          } else if (isOntimeGroup(entry)) {
+            if (entry.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/timeline/Timeline.module.scss

@@ -105,7 +105,7 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
 }
 
 .delay {
-  color: $delay-color;
+  color: $ontime-delay-text;
 }
 
 .timeOverview {
@@ -117,7 +117,7 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
 .cross {
   text-decoration: line-through;
   text-decoration-thickness: 2px;
-  text-decoration-color: $delay-color;
+  text-decoration-color: $ontime-delay-text;
 }
 
 .separeLeft {

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

@@ -183,7 +183,7 @@ export function getUpcomingEvents(events: PlayableEvent[], selectedId: MaybeStri
  * Utility function calculates time to start
  */
 export function getTimeToStart(now: number, start: number, delay: number, offset: number): number {
-  return start + delay - now - offset;
+  return start + delay - now + offset;
 }
 
 interface TimelineLayout {

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',
-          title: 'Text Colour',
-          description: 'Text colour. Default: #f6f6f6',
+          id: 'timerColour',
+          title: 'Timer Colour',
+          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/tsconfig.json

@@ -1,6 +1,7 @@
 {
+  "extends": "../../tsconfig.common.json",
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "esnext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -13,26 +14,13 @@
     ],
     "module": "esnext",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "allowUnreachableCode": false,
     "allowUnusedLabels": false,
-    "noImplicitThis": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
     "removeComments": true,
     "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-beta.2",
+  "version": "4.0.0-beta.4",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",

apps/resolver/.gitignore

@@ -0,0 +1 @@
+*.tgz

apps/resolver/README.md

@@ -0,0 +1,17 @@
+# Ontime Resolver
+
+Congratulations! You got this far into Ontime's rabbit hole and want to manage your installation.
+
+The Resolver is an attempt to expose our ontime's api so it is easier to integrate with  
+
+## Links
+- [Ontime's repository](https://github.com/cpvalente/ontime)
+- [Ontime's documentation](https://docs.getontime.no/)
+- [Ontime's website](https://getontime.no/)
+
+## Sponsoring
+You can help the development of this project or say thank you with a one time donation. \
+See the [terms of donations](https://github.com/cpvalente/ontime/blob/master/SPONSOR.md)
+
+[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
+[![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)

apps/resolver/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@getontime/resolver",
+  "version": "4.0.0-beta.4",
+  "type": "module",
+  "repository": "https://github.com/cpvalente/ontime",
+  "types": "./dist/main.d.ts",
+  "main": "./dist/main.js",
+  "description": "shared typings for ontime",
+  "scripts": {
+    "lint": "eslint . --quiet",
+    "prebuild": "pnpm rimraf ./dist",
+    "build": "tsup && pnpm rimraf ./dist/index.js",
+    "postbuild": "pnpm rimraf ./dist/index.d.ts"
+  },
+  "keywords": ["ontime", "resolver", "parser"],
+  "author": "",
+  "license": "AGPL-3.0-only",
+  "devDependencies": {
+    "@sprout2000/esbuild-copy-plugin": "^1.1.19",
+    "@typescript-eslint/parser": "catalog:",
+    "eslint": "catalog:",
+    "tsup": "^8.5.0",
+    "rimraf": "catalog:",
+    "typescript": "catalog:",
+    "ontime-types": "workspace:^4.0.0"
+  },
+  "files": ["dist"]
+}

apps/resolver/src/main.ts

@@ -0,0 +1,20 @@
+// api
+export { MessageTag, RefetchKey } from 'ontime-types';
+export type { ApiAction, ApiActionTag, ApiResponse } from 'ontime-types';
+export type { WsPacketToClient, WsPacketToServer } from 'ontime-types';
+
+// stores
+export type { RuntimeStore, TimerState, MessageState, RundownState, Offset } from 'ontime-types';
+export { TimerPhase, Playback, runtimeStorePlaceholder, OffsetMode } from 'ontime-types';
+
+// aux timer
+export type { SimpleTimerState } from 'ontime-types';
+export { SimplePlayback, SimpleDirection } from 'ontime-types';
+
+// entries
+export type { OntimeEvent, OntimeGroup, EntryCustomFields, CustomFields, Rundown } from 'ontime-types';
+export { SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeDelay, isOntimeMilestone } from 'ontime-types';
+
+// functions
+export { isWsPacketToClient } from './websocket.js';
+export type { SocketSender } from './websocket.js';

apps/resolver/src/websocket.ts

@@ -0,0 +1,18 @@
+import { ApiAction, ApiActionTag, MessageTag, WsPacketToClient, WsPacketToServer } from 'ontime-types';
+
+/**
+ * A helper type for sending correct websocket messages to ontime
+ */
+export type SocketSender = <T extends MessageTag | ApiActionTag>(
+  tag: T,
+  payload: T extends MessageTag
+    ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload']
+    : Pick<ApiAction & { tag: T }, 'payload'>['payload'],
+) => void;
+
+/**
+ * a soft type guard for WS packets
+ */
+export function isWsPacketToClient(data: unknown): data is WsPacketToClient {
+  return typeof data === 'object' && data !== null && 'tag' in data && 'payload' in data;
+}

apps/resolver/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.common.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "allowUnusedLabels": false,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "allowJs": true,
+    "declaration": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "baseUrl": "src",
+  },
+  "include": [
+    "src",
+  ],
+  "exclude": [
+    "node_modules",
+  ]
+}

apps/resolver/tsup.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'tsup';
+import copyPlugin from '@sprout2000/esbuild-copy-plugin';
+
+export default defineConfig({
+  clean: false, //we can't use clean as i dose so after the copy plugin runs
+  entry: ['src/main.ts'],
+  outDir: 'dist',
+  bundle: true,
+
+  dts: { resolve: true },
+  format: 'esm',
+  target: 'esnext',
+  platform: 'node',
+  esbuildPlugins: [
+    copyPlugin.copyPlugin({
+      src: './node_modules/ontime-types/dist',
+      dest: './dist',
+    }),
+  ],
+});

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.4",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",
@@ -20,7 +20,6 @@
     "ontime-utils": "workspace:*",
     "osc-min": "2.1.2",
     "sanitize-filename": "^1.6.3",
-    "steno": "^4.0.2",
     "ws": "^8.18.0",
     "xlsx": "^0.18.5"
   },
@@ -41,7 +40,7 @@
     "prettier": "catalog:",
     "server-timing": "^3.3.3",
     "shx": "^0.3.4",
-    "ts-essentials": "^10.0.3",
+    "ts-essentials": "catalog:",
     "tsx": "^4.19.2",
     "typescript": "catalog:",
     "vitest": "catalog:"

apps/server/src/api-data/automation/__tests__/automation.dao.test.ts

@@ -1,6 +1,6 @@
-import { TriggerDTO, TimerLifeCycle, AutomationDTO, Automation, EntryId } from 'ontime-types';
+import { TriggerDTO, TimerLifeCycle, AutomationDTO, Automation, ProjectRundowns } from 'ontime-types';
 
-import { makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { makeOntimeEvent } from '../../rundown/__mocks__/rundown.mocks.js';
 
 import {
   addTrigger,
@@ -203,10 +203,29 @@ describe('deleteAutomation()', () => {
     const automations = getAutomations();
     expect(Object.keys(automations).length).toEqual(1);
 
-    const rundown = makeRundown({});
-    const timedEventOrder: EntryId[] = [];
-
-    await deleteAutomation(rundown, timedEventOrder, Object.keys(automations)[0]);
+    const projectRundowns: ProjectRundowns = {
+      'rundown-1': {
+        id: 'rundown-1',
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
+      },
+    };
+    await deleteAutomation(projectRundowns, Object.keys(automations)[0]);
     const removed = getAutomations();
     expect(Object.keys(removed).length).toEqual(0);
   });

apps/server/src/api-data/automation/__tests__/automation.utils.test.ts

@@ -1,5 +1,7 @@
-import { TimerLifeCycle } from 'ontime-types';
-import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { ProjectRundowns, TimerLifeCycle } from 'ontime-types';
+
+import { makeOntimeEvent } from '../../rundown/__mocks__/rundown.mocks.js';
+
 import { isAutomationUsed, parseTemplateNested, stringToOSCArgs } from '../automation.utils.js';
 
 describe('parseTemplateNested()', () => {
@@ -250,50 +252,109 @@ describe('test stringToOSCArgs()', () => {
 
 describe('isAutomationUsed()', () => {
   it('returns the first event which uses an automation', () => {
-    const rundown = makeRundown({
-      entries: {
-        '1': makeOntimeEvent({
-          id: '1',
-          triggers: [
-            {
-              id: 'trigger-1',
-              title: 'Trigger 1',
-              trigger: TimerLifeCycle.onClock,
-              automationId: 'test-automation',
-            },
-          ],
-        }),
+    const projectRundowns: ProjectRundowns = {
+      'rundown-1': {
+        id: 'rundown-1',
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
       },
-    });
-
-    const timedEventOrder = ['1'];
+    };
     const automationId = 'test-automation';
 
-    const result = isAutomationUsed(rundown, timedEventOrder, automationId);
-    expect(result).toBe('1');
+    const result = isAutomationUsed(projectRundowns, automationId);
+    expect(result).toStrictEqual(['Rundown 1', '1']);
+  });
+
+  it('finds usages in any rundown', () => {
+    const projectRundowns: ProjectRundowns = {
+      'rundown-1': {
+        id: 'rundown-1',
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
+      },
+      'rundown-2': {
+        id: 'rundown-2',
+        title: 'Rundown 2',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'in-the-second-rundown',
+              },
+            ],
+          }),
+        },
+        revision: 1,
+      },
+    };
+    const automationId = 'in-the-second-rundown';
+
+    const result = isAutomationUsed(projectRundowns, automationId);
+    expect(result).toStrictEqual(['Rundown 2', '1']);
   });
 
   it('returns returns undefined if there are no matches', () => {
-    const rundown = makeRundown({
-      entries: {
-        '1': makeOntimeEvent({
-          id: '1',
-          triggers: [
-            {
-              id: 'trigger-1',
-              title: 'Trigger 1',
-              trigger: TimerLifeCycle.onClock,
-              automationId: 'test-automation',
-            },
-          ],
-        }),
+    const projectRundowns: ProjectRundowns = {
+      'rundown-1': {
+        id: 'rundown-1',
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
       },
-    });
-
-    const timedEventOrder = ['1'];
+    };
     const automationId = 'does-not-exist';
 
-    const result = isAutomationUsed(rundown, timedEventOrder, automationId);
+    const result = isAutomationUsed(projectRundowns, automationId);
     expect(result).toBeUndefined();
   });
 });

apps/server/src/api-data/automation/automation.controller.ts

@@ -4,8 +4,7 @@ import { Automation, AutomationSettings, ErrorResponse, Trigger } from 'ontime-t
 import type { Request, Response } from 'express';
 
 import { oscServer } from '../../adapters/OscAdapter.js';
-
-import { getCurrentRundown, getRundownMetadata } from '../rundown/rundown.dao.js';
+import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
 
 import * as automationDao from './automation.dao.js';
 import * as automationService from './automation.service.js';
@@ -108,10 +107,8 @@ export async function editAutomation(req: Request, res: Response<Automation | Er
 
 export async function deleteAutomation(req: Request, res: Response<void | ErrorResponse>) {
   try {
-    const rundown = getCurrentRundown();
-    const { timedEventOrder } = getRundownMetadata();
-
-    await automationDao.deleteAutomation(rundown, timedEventOrder, req.params.id);
+    const projectRundowns = getDataProvider().getProjectRundowns();
+    await automationDao.deleteAutomation(projectRundowns, req.params.id);
     res.status(204).send();
   } catch (error) {
     const message = getErrorMessage(error);

apps/server/src/api-data/automation/automation.dao.ts

@@ -2,9 +2,8 @@ import type {
   Automation,
   AutomationDTO,
   AutomationSettings,
-  EntryId,
   NormalisedAutomation,
-  Rundown,
+  ProjectRundowns,
   Trigger,
   TriggerDTO,
 } from 'ontime-types';
@@ -136,15 +135,15 @@ export async function editAutomation(id: string, newAutomation: AutomationDTO):
 /**
  * Deletes a automation given its ID
  */
-export async function deleteAutomation(rundown: Rundown, timedEventOrder: EntryId[], id: string): Promise<void> {
+export async function deleteAutomation(projectRundowns: ProjectRundowns, automationId: string): Promise<void> {
   const automations = getAutomations();
   // ignore request if automation does not exist
-  if (!Object.hasOwn(automations, id)) {
+  if (!Object.hasOwn(automations, automationId)) {
     return;
   }
 
   // prevent deleting a automation that is in use in triggers
-  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === id);
+  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === automationId);
   if (triggers.length) {
     throw new Error(
       `Unable to delete automation used in trigger ${triggers[0].title}${triggers.length > 1 ? ` and ${triggers.length - 1} more` : ''}`,
@@ -152,12 +151,12 @@ export async function deleteAutomation(rundown: Rundown, timedEventOrder: EntryI
   }
 
   // prevent deleting a automation that is in use in events
-  const isInUse = isAutomationUsed(rundown, timedEventOrder, id);
+  const isInUse = isAutomationUsed(projectRundowns, automationId);
   if (isInUse) {
-    throw new Error(`Unable to delete automation used in event with ID ${isInUse}`);
+    throw new Error(`Unable to delete automation used in rundown: ${isInUse[0]}, in event with ID: ${isInUse[1]}`);
   }
 
-  delete automations[id];
+  delete automations[automationId];
   await saveChanges({ automations });
 }
 

apps/server/src/api-data/automation/automation.utils.ts

@@ -1,4 +1,13 @@
-import { EntryId, FilterRule, isOntimeEvent, MaybeNumber, OntimeAction, ontimeActionKeyValues, Rundown } from 'ontime-types';
+import {
+  EntryId,
+  FilterRule,
+  isOntimeEvent,
+  MaybeNumber,
+  OntimeAction,
+  ontimeActionKeyValues,
+  ProjectRundowns,
+  RundownEntries,
+} from 'ontime-types';
 import { millisToString, removeLeadingZero, splitWhitespace, getPropertyFromPath } from 'ontime-utils';
 import type { OscArgOrArrayInput, OscArgInput } from 'osc-min';
 
@@ -198,22 +207,40 @@ export function isBooleanEquals(a: boolean, b: string): boolean {
 
 /**
  * Checks is an automation is used in a rundown
- * TODO(v4): this currently only checks the current rundown, we will need to check all rundowns in the future
  */
-export function isAutomationUsed(
-  rundown: Rundown,
-  timedEventOrder: EntryId[],
+function isAutomationUsedInRundown(
+  entries: RundownEntries,
+  flatOrder: EntryId[],
   automationId: string,
 ): EntryId | undefined {
-  for (let i = 0; i < timedEventOrder.length; i++) {
-    const eventId = timedEventOrder[i];
-    const event = rundown.entries[eventId];
-    if (isOntimeEvent(event) && event.triggers) {
-      for (const trigger of event.triggers) {
+  for (let i = 0; i < flatOrder.length; i++) {
+    const eventId = flatOrder[i];
+    const entry = entries[eventId];
+
+    // only ontime events can contain triggers
+    if (isOntimeEvent(entry) && entry.triggers) {
+      for (const trigger of entry.triggers) {
         if (trigger.automationId === automationId) {
-          return eventId;
+          return entry.id;
         }
       }
     }
   }
 }
+
+/**
+ * Checks if an automation is used in any of the project rundowns
+ */
+export function isAutomationUsed(
+  projectRundowns: ProjectRundowns,
+  automationId: string,
+): [string, EntryId] | undefined {
+  for (const rundownId in projectRundowns) {
+    const rundown = projectRundowns[rundownId];
+    const usedInEvent = isAutomationUsedInRundown(rundown.entries, rundown.flatOrder, automationId);
+
+    if (usedInEvent) {
+      return [rundown.title, usedInEvent];
+    }
+  }
+}

apps/server/src/api-data/db/db.controller.ts

@@ -31,7 +31,6 @@ export async function patchPartialProjectFile(req: Request, res: Response<Databa
     };
 
     const newData = await projectService.patchCurrentProject(patchDb);
-
     res.status(200).send(newData);
   } catch (error) {
     const message = getErrorMessage(error);

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-integration/integration.controller.ts

@@ -1,5 +1,5 @@
 import {
-  ApiAction,
+  ApiActionTag,
   MessageState,
   OffsetMode,
   OntimeEvent,
@@ -30,7 +30,7 @@ let lastRequest: Date | null = null;
 
 export function dispatchFromAdapter(tag: string, payload: unknown, _source?: 'osc' | 'ws' | 'http') {
   const action = tag.toLowerCase();
-  const handler = actionHandlers[action as ApiAction];
+  const handler = actionHandlers[action as ApiActionTag];
   lastRequest = new Date();
 
   if (handler) {
@@ -46,7 +46,7 @@ export function getLastRequest() {
 
 type ActionHandler = (payload: unknown) => { payload: unknown };
 
-const actionHandlers: Record<ApiAction, ActionHandler> = {
+const actionHandlers: Record<ApiActionTag, ActionHandler> = {
   /* General */
   version: () => ({ payload: ONTIME_VERSION }),
   poll: () => ({

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/__tests__/timerUtils.test.ts

@@ -1,7 +1,8 @@
-import { dayInMs, millisToString } from 'ontime-utils';
+import { dayInMs, MILLIS_PER_HOUR, millisToString } from 'ontime-utils';
 import { EndAction, Playback, TimeStrategy, TimerPhase, TimerType } from 'ontime-types';
 
 import {
+  findDayOffset,
   getCurrent,
   getExpectedFinish,
   getRuntimeOffset,
@@ -726,6 +727,7 @@ describe('getRuntimeOffset()', () => {
       eventNow: {
         id: '1',
         timeStart: 100,
+        dayOffset: 0,
       },
       timer: {
         startedAt: 150,
@@ -738,7 +740,10 @@ describe('getRuntimeOffset()', () => {
       rundown: {
         actualStart: 150,
         plannedStart: 100,
+        currentDay: 0,
       },
+      clock: 150,
+      _startDayOffset: 0,
     } as RuntimeState;
 
     const { absolute } = getRuntimeOffset(state);
@@ -750,6 +755,7 @@ describe('getRuntimeOffset()', () => {
       eventNow: {
         id: '1',
         timeStart: 100,
+        dayOffset: 0,
       },
       timer: {
         startedAt: 150, // we started 50ms delayed
@@ -762,7 +768,9 @@ describe('getRuntimeOffset()', () => {
       rundown: {
         actualStart: 150,
         plannedStart: 100,
+        currentDay: 0,
       },
+      _startDayOffset: 0,
     } as RuntimeState;
 
     const { absolute } = getRuntimeOffset(state);
@@ -775,6 +783,7 @@ describe('getRuntimeOffset()', () => {
         id: '1',
         timeStart: 100,
         timeEnd: 140,
+        dayOffset: 0,
       },
       timer: {
         startedAt: 100, // we started ontime
@@ -787,7 +796,9 @@ describe('getRuntimeOffset()', () => {
       rundown: {
         actualStart: 100,
         plannedStart: 100,
+        currentDay: 0,
       },
+      _startDayOffset: 0,
     } as RuntimeState;
 
     const { absolute } = getRuntimeOffset(state);
@@ -800,6 +811,7 @@ describe('getRuntimeOffset()', () => {
         id: '1',
         timeStart: 100,
         timeEnd: 150,
+        dayOffset: 0,
       },
       clock: 150,
       timer: {
@@ -813,7 +825,9 @@ describe('getRuntimeOffset()', () => {
       rundown: {
         actualStart: 100,
         plannedStart: 100,
+        currentDay: 0,
       },
+      _startDayOffset: 0,
     } as RuntimeState;
 
     const { absolute } = getRuntimeOffset(state);
@@ -830,6 +844,7 @@ describe('getRuntimeOffset()', () => {
         duration: 3600000,
         timeStrategy: 'lock-duration',
         linkStart: false,
+        dayOffset: 0,
       },
       rundown: {
         selectedEventIndex: 0,
@@ -837,6 +852,7 @@ describe('getRuntimeOffset()', () => {
         plannedStart: 77400000,
         plannedEnd: 84600000,
         actualStart: null,
+        currentDay: 0,
       },
       offset: {
         absolute: -77400000,
@@ -852,6 +868,7 @@ describe('getRuntimeOffset()', () => {
         secondaryTimer: null,
         startedAt: null,
       },
+      _startDayOffset: 0,
       _timer: { pausedAt: null },
     } as RuntimeState;
 
@@ -874,6 +891,7 @@ describe('getRuntimeOffset()', () => {
         endAction: EndAction.None,
         timerType: TimerType.CountDown,
         countToEnd: true,
+        dayOffset: 0,
         skip: false,
         note: '',
         colour: '',
@@ -890,6 +908,7 @@ describe('getRuntimeOffset()', () => {
         plannedStart: 77400000, // 21:30:00
         plannedEnd: 81000000, // 22:30:00
         actualStart: 78000000, // 21:40:00
+        currentDay: 0,
       },
       offset: {
         absolute: 0,
@@ -905,6 +924,7 @@ describe('getRuntimeOffset()', () => {
         secondaryTimer: null,
         startedAt: 78000000,
       },
+      _startDayOffset: 0,
       _timer: { pausedAt: null },
     } as RuntimeState;
 
@@ -922,6 +942,7 @@ describe('getRuntimeOffset()', () => {
         timeStart: 77400000, // 21:30:00
         timeEnd: 81000000, // 22:30:00
         duration: 3600000, // 01:00:00
+        dayOffset: 0,
         timeStrategy: TimeStrategy.LockEnd,
         linkStart: false,
         endAction: EndAction.None,
@@ -943,6 +964,7 @@ describe('getRuntimeOffset()', () => {
         plannedStart: 77400000, // 21:30:00
         plannedEnd: 81000000, // 22:30:00
         actualStart: 78000000, // 21:40:00
+        currentDay: 0,
       },
       offset: {
         absolute: 0,
@@ -958,6 +980,7 @@ describe('getRuntimeOffset()', () => {
         secondaryTimer: null,
         startedAt: 78000000,
       },
+      _startDayOffset: 0,
       _timer: { pausedAt: null },
     } as RuntimeState;
 
@@ -978,6 +1001,7 @@ describe('getRuntimeOffset()', () => {
         endAction: EndAction.None,
         timerType: TimerType.CountDown,
         countToEnd: true,
+        dayOffset: 0,
       },
       rundown: {
         selectedEventIndex: 0,
@@ -985,6 +1009,7 @@ describe('getRuntimeOffset()', () => {
         plannedStart: 77400000, // 21:30:00
         plannedEnd: 81000000, // 22:30:00
         actualStart: 82000000, // 22:46:40 <--- started now
+        currentDay: 0,
       },
       offset: {
         absolute: 0,
@@ -1000,6 +1025,7 @@ describe('getRuntimeOffset()', () => {
         secondaryTimer: null,
         startedAt: 82000000, // <--- started now
       },
+      _startDayOffset: 0,
       _timer: { pausedAt: null },
     } as RuntimeState;
 
@@ -1017,6 +1043,7 @@ describe('getRuntimeOffset() relative', () => {
       eventNow: {
         id: '1',
         timeStart: 150,
+        dayOffset: 0,
       },
       timer: {
         startedAt: 150,
@@ -1029,7 +1056,9 @@ describe('getRuntimeOffset() relative', () => {
       rundown: {
         actualStart: 150,
         plannedStart: 150,
+        currentDay: 0,
       },
+      _startDayOffset: 0,
     } as RuntimeState;
 
     const { absolute, relative } = getRuntimeOffset(state);
@@ -1041,6 +1070,7 @@ describe('getRuntimeOffset() relative', () => {
       eventNow: {
         id: '1',
         timeStart: 100,
+        dayOffset: 0,
       },
       timer: {
         startedAt: 150,
@@ -1053,7 +1083,9 @@ describe('getRuntimeOffset() relative', () => {
       rundown: {
         actualStart: 150,
         plannedStart: 100,
+        currentDay: 0,
       },
+      _startDayOffset: 0,
     } as RuntimeState;
 
     const { absolute, relative } = getRuntimeOffset(state);
@@ -1065,6 +1097,7 @@ describe('getRuntimeOffset() relative', () => {
       eventNow: {
         id: '1',
         timeStart: 150,
+        dayOffset: 0,
       },
       timer: {
         startedAt: 100,
@@ -1077,7 +1110,9 @@ describe('getRuntimeOffset() relative', () => {
       rundown: {
         actualStart: 100,
         plannedStart: 150,
+        currentDay: 0,
       },
+      _startDayOffset: 0,
     } as RuntimeState;
 
     const { absolute, relative } = getRuntimeOffset(state);
@@ -1258,3 +1293,21 @@ describe('getTimerPhase()', () => {
     expect(phase).toBe(TimerPhase.Pending);
   });
 });
+
+describe('findDay()', () => {
+  test('finds dayOffset', () => {
+    //both have 1 hour offset but the clock are on different days
+    expect(findDayOffset(0, 23 * MILLIS_PER_HOUR)).toBe(-1); //                 -> 23
+    expect(findDayOffset(0, 13 * MILLIS_PER_HOUR)).toBe(-1); //                 -> 13
+    expect(findDayOffset(0, 12 * MILLIS_PER_HOUR)).toBe(-1); //                 -> 12
+    expect(findDayOffset(0, 11 * MILLIS_PER_HOUR)).toBe(0); //                 -> 11
+    expect(findDayOffset(1 * MILLIS_PER_HOUR, 0)).toBe(0); //                  -> -1
+
+    //both have 1 hour offset but the clock are on different days
+    expect(findDayOffset(23 * MILLIS_PER_HOUR, 0)).toBe(1); //                  -> -23
+    expect(findDayOffset(13 * MILLIS_PER_HOUR, 0)).toBe(1); //                  -> -13
+    expect(findDayOffset(12 * MILLIS_PER_HOUR, 0)).toBe(0); //                  -> -12
+    expect(findDayOffset(11 * MILLIS_PER_HOUR, 0)).toBe(0); //                  -> -11
+    expect(findDayOffset(22 * MILLIS_PER_HOUR, 23 * MILLIS_PER_HOUR)).toBe(0); //   -> 1
+  });
+});

apps/server/src/services/project-service/ProjectService.ts

@@ -323,11 +323,14 @@ export async function patchCurrentProject(data: Partial<DatabaseModel>) {
 
     /**
      * The user may have multiple rundowns
-     * We currently ignore all other rundowns
+     * so attempt to get the one that was used last
+     * otherwise just pick the first
      */
-    const firstRundown = getFirstRundown(result);
+    const last = await getLastLoaded();
+    const rundownToLoad =
+      last?.rundownId && last.rundownId in result ? result[last.rundownId] : getFirstRundown(result);
 
-    await initRundown(firstRundown, customFields);
+    await initRundown(rundownToLoad, customFields, true);
   }
 
   const updatedData = await getDataProvider().getData();

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

@@ -12,6 +12,7 @@ describe('isRestorePoint()', () => {
       addedTime: 2,
       pausedAt: 3,
       firstStart: 1,
+      startEpoch: 1,
     };
     expect(isRestorePoint(restorePoint)).toBe(true);
 
@@ -22,6 +23,7 @@ describe('isRestorePoint()', () => {
       addedTime: 0,
       pausedAt: null,
       firstStart: 1,
+      startEpoch: 1,
     };
     expect(isRestorePoint(restorePoint)).toBe(true);
   });
@@ -35,6 +37,7 @@ describe('isRestorePoint()', () => {
         addedTime: 0,
         pausedAt: null,
         groupStartAt: 10,
+        startEpoch: 1,
       };
       expect(isRestorePoint(restorePoint)).toBe(false);
     });
@@ -56,6 +59,7 @@ describe('isRestorePoint()', () => {
         addedTime: 0,
         pausedAt: null,
         groupStartAt: 10,
+        startEpoch: 1,
       };
       expect(isRestorePoint(restorePoint)).toBe(false);
     });

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

@@ -16,6 +16,7 @@ describe('restoreService', () => {
         addedTime: 5678,
         pausedAt: 9087,
         firstStart: 1234,
+        startEpoch: 1234,
       };
 
       const mockRead = vi.fn().mockResolvedValue(expected);
@@ -33,6 +34,7 @@ describe('restoreService', () => {
         addedTime: 0,
         pausedAt: null,
         firstStart: 1234,
+        startEpoch: 1234,
       };
 
       const mockRead = vi.fn().mockResolvedValue(expected);
@@ -79,6 +81,7 @@ describe('restoreService', () => {
         addedTime: 1234,
         pausedAt: 1234,
         firstStart: 1234,
+        startEpoch: 1234,
       };
 
       const mockWrite = vi.fn().mockResolvedValue(undefined);
@@ -95,6 +98,7 @@ describe('restoreService', () => {
         addedTime: 5678,
         pausedAt: 5678,
         firstStart: 5678,
+        startEpoch: 5678,
       };
 
       const mockWrite = vi.fn().mockRejectedValue(new Error('Write failed'));

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

@@ -20,6 +20,7 @@ export function isRestorePoint(restorePoint: unknown): restorePoint is RestorePo
       'addedTime',
       'pausedAt',
       'firstStart',
+      'startEpoch',
     ])
   ) {
     return false;
@@ -49,5 +50,9 @@ export function isRestorePoint(restorePoint: unknown): restorePoint is RestorePo
     return false;
   }
 
+    if (!is.number(restorePoint.startEpoch) && restorePoint.startEpoch !== null) {
+    return false;
+  }
+
   return true;
 }

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

@@ -7,4 +7,5 @@ export type RestorePoint = {
   addedTime: number;
   pausedAt: MaybeNumber;
   firstStart: MaybeNumber;
+  startEpoch: MaybeNumber;
 };

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

@@ -743,6 +743,7 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
           addedTime: state.timer.addedTime,
           pausedAt: state._timer.pausedAt,
           firstStart: state.rundown.actualStart,
+          startEpoch: state._startEpoch,
         })
         .catch((_e) => {
           //we don't do anything with the error here

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

@@ -412,15 +412,19 @@ export async function upload(sheetId: string, options: ImportMap) {
     },
   });
 
-  // update the corresponding row with event data
-  sheetOrder.forEach((entryId, index) => {
-    const isGroupEnd = entryId.startsWith('group-end-');
-    const id = isGroupEnd ? entryId.split('group-end-')[1] : entryId;
-    const entry = isGroupEnd
+  try {
+    // update the corresponding row with event data
+    sheetOrder.forEach((entryId, index) => {
+      const isGroupEnd = entryId.startsWith('group-end-');
+      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));
-  });
+      updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
+    });
+  } catch (e) {
+    throw new Error(`Sheet write failed to correctly parse rundown: ${e}`)
+  }
 
   const writeResponse = await sheets({ version: 'v4', auth: currentAuthClient }).spreadsheets.batchUpdate({
     spreadsheetId: sheetId,

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

@@ -154,12 +154,6 @@ function getCellData(key: OntimeEntryCommonKeys | 'blank', entry: OntimeEntry) {
     return {};
   }
 
-  // we need to flatten the milestones
-  if (key.startsWith('custom')) {
-    const customKey = key.split(':')[1];
-    return { userEnteredValue: { stringValue: entry.custom[customKey] } };
-  }
-
   // we need to remap the event type to timer type in the case of groups and milestones
   if (key === 'timerType') {
     if (isOntimeGroup(entry))
@@ -168,6 +162,17 @@ function getCellData(key: OntimeEntryCommonKeys | 'blank', entry: OntimeEntry) {
     return { userEnteredValue: { stringValue: entry.timerType } };
   }
 
+  // all other data is not relevant for the group end entry
+  if (entry.id.startsWith('group-end')) {
+    return {};
+  }
+
+  // we need to flatten the milestones
+  if (key.startsWith('custom')) {
+    const customKey = key.split(':')[1];
+    return { userEnteredValue: { stringValue: entry.custom[customKey] } };
+  }
+
   // 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 {};

apps/server/src/services/timerUtils.ts

@@ -1,5 +1,6 @@
 import { MaybeNumber, TimerPhase } from 'ontime-types';
-import { dayInMs, isPlaybackActive } from 'ontime-utils';
+import { dayInMs, isPlaybackActive, MILLIS_PER_HOUR } from 'ontime-utils';
+
 import type { RuntimeState } from '../stores/runtimeState.js';
 
 /**
@@ -113,14 +114,14 @@ export function skippedOutOfEvent(state: RuntimeState, previousTime: number, ski
  * Negative offset is under time / ahead of schedule
  */
 export function getRuntimeOffset(state: RuntimeState): { absolute: number; relative: number } {
-  const { eventNow, clock } = state;
+  const { eventNow, clock, _startDayOffset } = state;
   const { addedTime, current, startedAt } = state.timer;
   // nothing to calculate if there are no loaded events or if we havent started
-  if (eventNow === null || startedAt === null) {
+  if (eventNow === null || startedAt === null || _startDayOffset === null) {
     return { absolute: 0, relative: 0 };
   }
 
-  const { countToEnd, timeStart } = eventNow;
+  const { countToEnd, timeStart, dayOffset } = eventNow;
   const { plannedStart, actualStart } = state.rundown;
 
   // eslint-disable-next-line no-unused-labels -- dev code path
@@ -131,8 +132,8 @@ export function getRuntimeOffset(state: RuntimeState): { absolute: number; relat
     if (actualStart === null) throw new Error('timerUtils.getRuntimeOffset: state.rundown.plannedStart must be set');
   }
 
-  // difference between planned event start and actual event start (will be positive if we stared behind )
-  const eventStartOffset = startedAt - timeStart;
+  // difference between planned event start and actual event start (will be positive if we started behind)
+  const eventStartOffset = startedAt + _startDayOffset * dayInMs - (timeStart + dayOffset * dayInMs);
 
   // how long has the event been running over (is a negative number when in over timer so inverted before adding to offset)
   const overtime = Math.abs(Math.min(current, 0));
@@ -140,10 +141,11 @@ export function getRuntimeOffset(state: RuntimeState): { absolute: number; relat
   // time the playback was paused, the different from now to when we paused is added to the offset TODO: brakes when crossing midnight
   const pausedTime = state._timer.pausedAt === null ? 0 : clock - state._timer.pausedAt;
 
+  // absolute offset is difference between schedule and playback time
   const absolute = eventStartOffset + overtime + pausedTime + addedTime;
 
-  // the relative offset i the same as the absolute offset but adjusted relative to the actual start time
-  const relative = absolute + plannedStart - actualStart;
+  // the relative offset is the same as the absolute but adjusted relative to the actual start time
+  const relative = absolute + plannedStart - actualStart - _startDayOffset * dayInMs;
 
   // in case of count to end, the absolute offset is just the overtime
   return countToEnd ? { absolute: overtime, relative } : { absolute, relative };
@@ -180,3 +182,14 @@ export function getTimerPhase(state: RuntimeState): TimerPhase {
 
   return TimerPhase.Default;
 }
+
+/**
+ * Finds the day offset relative to an event start
+ * used byt the runtimeState on first start to get correct offsets
+ */
+export function findDayOffset(plannedStart: number, clock: number): number {
+  const distance = clock - plannedStart;
+  if (distance >= 12 * MILLIS_PER_HOUR) return -1;
+  if (distance < -12 * MILLIS_PER_HOUR) return 1;
+  return 0;
+}

apps/server/src/stores/__mocks__/runtimeState.mocks.ts

@@ -14,6 +14,8 @@ const baseState: RuntimeState = {
     plannedStart: 0,
     plannedEnd: 0,
     actualStart: null,
+    actualGroupStart: null,
+    currentDay: 0,
   },
   offset: {
     absolute: 0,
@@ -46,6 +48,8 @@ const baseState: RuntimeState = {
   _group: null,
   _end: null,
   _flag: null,
+  _startDayOffset: null,
+  _startEpoch: null,
 };
 
 export function makeRuntimeStateData(patch?: Partial<RuntimeState>): RuntimeState {

apps/server/src/stores/__tests__/runtimeState.test.ts

@@ -393,6 +393,7 @@ describe('loadGroupFlagAndEnd()', () => {
     const state = {
       groupNow: null,
       eventNow: rundown.entries[11],
+      rundown: { actualGroupStart: null },
     } as RuntimeState;
 
     const metadata = { playableEventOrder: ['0', '11', '3'], flags: ['1'] } as RundownMetadata;
@@ -420,6 +421,7 @@ describe('loadGroupFlagAndEnd()', () => {
     const state = {
       groupNow: rundown.entries[1],
       eventNow: rundown.entries[22],
+      rundown: { actualGroupStart: null },
     } as RuntimeState;
 
     const metadata = { playableEventOrder: ['0', '11', '22'], flags: ['1'] } as RundownMetadata;
@@ -447,6 +449,7 @@ describe('loadGroupFlagAndEnd()', () => {
     const state = {
       groupNow: rundown.entries[1],
       eventNow: rundown.entries[0],
+      rundown: { actualGroupStart: null },
     } as RuntimeState;
 
     const metadata = { playableEventOrder: ['0', '11', '22'], flags: ['1'] } as RundownMetadata;
@@ -471,6 +474,7 @@ describe('loadGroupFlagAndEnd()', () => {
     const state = {
       groupNow: null,
       eventNow: rundown.entries[0],
+      rundown: { actualGroupStart: null },
     } as RuntimeState;
 
     const metadata = { playableEventOrder: ['0', '1'], flags: ['1'] } as RundownMetadata;

apps/server/src/stores/runtimeState.ts

@@ -23,9 +23,15 @@ import {
   isPlaybackActive,
 } from 'ontime-utils';
 
-import { timeNow } from '../utils/time.js';
+import { getTimeObject, timeNow } from '../utils/time.js';
 import type { RestorePoint } from '../services/restore-service/restore.type.js';
-import { getCurrent, getExpectedFinish, getRuntimeOffset, getTimerPhase } from '../services/timerUtils.js';
+import {
+  findDayOffset,
+  getCurrent,
+  getExpectedFinish,
+  getRuntimeOffset,
+  getTimerPhase,
+} from '../services/timerUtils.js';
 import { loadRoll, normaliseRollStart } from '../services/rollUtils.js';
 import { timerConfig } from '../setup/config.js';
 import { RundownMetadata } from '../api-data/rundown/rundown.types.js';
@@ -55,6 +61,8 @@ export type RuntimeState = {
   _group: ExpectedMetadata;
   _flag: ExpectedMetadata;
   _end: ExpectedMetadata;
+  _startEpoch: MaybeNumber;
+  _startDayOffset: MaybeNumber;
 };
 
 const runtimeState: RuntimeState = {
@@ -78,6 +86,8 @@ const runtimeState: RuntimeState = {
   _group: null,
   _flag: null,
   _end: null,
+  _startEpoch: null,
+  _startDayOffset: null,
 };
 
 export function getState(): Readonly<RuntimeState> {
@@ -152,6 +162,10 @@ export function clearState() {
   runtimeState._timer.pausedAt = null;
   runtimeState._timer.secondaryTarget = null;
   runtimeState._timer.hasFinished = false;
+
+  runtimeState._startEpoch = null;
+  runtimeState._startDayOffset = null;
+  runtimeState.rundown.currentDay = null;
 }
 
 /**
@@ -190,7 +204,8 @@ export function updateRundownData(rundownData: {
   runtimeState.rundown.plannedStart = rundownData.firstStart;
   runtimeState.rundown.plannedEnd =
     rundownData.firstStart === null ? null : rundownData.firstStart + rundownData.totalDuration;
-  getExpectedTimes();
+
+  if (isPlaybackActive(runtimeState.timer.playback)) getExpectedTimes();
 }
 
 /**
@@ -229,9 +244,14 @@ export function load(
   // patch with potential provided data
   if (initialData) {
     patchTimer(initialData);
+    const startEpoch = initialData?.startEpoch;
     const firstStart = initialData?.firstStart;
-    if (firstStart === null || typeof firstStart === 'number') {
+    if (
+      (firstStart === null || typeof firstStart === 'number') &&
+      (startEpoch === null || typeof startEpoch === 'number')
+    ) {
       runtimeState.rundown.actualStart = firstStart;
+      runtimeState._startEpoch = startEpoch;
       const { absolute, relative } = getRuntimeOffset(runtimeState);
       runtimeState.offset.absolute = absolute;
       runtimeState.offset.relative = relative;
@@ -367,7 +387,8 @@ export function start(state: RuntimeState = runtimeState): boolean {
     return false;
   }
 
-  state.clock = timeNow();
+  const [epoch, now] = getTimeObject();
+  state.clock = now;
   state.timer.secondaryTimer = null;
 
   // add paused time if it exists
@@ -386,9 +407,16 @@ export function start(state: RuntimeState = runtimeState): boolean {
   state.timer.elapsed = 0;
 
   if (state.rundown.actualStart === null) {
+    state._startDayOffset = findDayOffset(state.eventNow.timeStart, state.clock);
+    state.rundown.currentDay = state._startDayOffset;
+    state._startEpoch = epoch;
     state.rundown.actualStart = state.clock;
   }
 
+  if (state.groupNow !== null && state.rundown.actualGroupStart === null) {
+    state.rundown.actualGroupStart = state.clock;
+  }
+
   // update timer phase
   runtimeState.timer.phase = getTimerPhase(runtimeState);
 
@@ -480,13 +508,20 @@ export type UpdateResult = {
 export function update(): UpdateResult {
   // 0. there are some things we always do
   const previousClock = runtimeState.clock;
-  runtimeState.clock = timeNow(); // we update the clock on every update call
+  const [epoch, now] = getTimeObject();
+  runtimeState.clock = now; // we update the clock on every update call
 
   // 1. is playback idle?
   if (!isPlaybackActive(runtimeState.timer.playback)) {
     return updateIfIdle();
   }
 
+  // if we are playing and playback changes. we tick the current runtime day
+  if (runtimeState._startDayOffset !== null && runtimeState._startEpoch) {
+    runtimeState.rundown.currentDay =
+      runtimeState._startDayOffset + Math.floor((epoch - runtimeState._startEpoch) / dayInMs);
+  }
+
   // 2. are we waiting to roll?
   if (runtimeState.timer.playback === Playback.Roll && runtimeState.timer.secondaryTimer !== null) {
     const hasCrossedMidnight = previousClock > runtimeState.clock;
@@ -568,6 +603,10 @@ export function roll(
     return { eventId: runtimeState.eventNow?.id ?? null, didStart: false };
   }
 
+  // we will need to do some calculations, update the time first
+  const [epoch, now] = getTimeObject();
+  runtimeState.clock = now;
+
   // 2. if there is an event armed, we use it
   if (runtimeState.timer.playback === Playback.Armed || runtimeState.timer.phase === TimerPhase.Pending) {
     // eslint-disable-next-line no-unused-labels -- dev code path
@@ -598,12 +637,24 @@ export function roll(
     // check if the event is ready to start or if needs to be pending
     const isNow = checkIsNow(runtimeState.eventNow.timeStart, runtimeState.eventNow.timeEnd, offsetClock);
     if (isNow) {
-      runtimeState.timer.startedAt = runtimeState.clock;
+      /**
+       * If we are starting an event in roll mode
+       * we backtrace all the start times to the supposed start time of the event
+       */
+      const plannedStart = runtimeState.eventNow.timeStart;
+      runtimeState.timer.startedAt = plannedStart;
+      // reset the secondary timer to cancel any countdowns
+      runtimeState.timer.secondaryTimer = null;
+
+      if (runtimeState.groupNow !== null && runtimeState.rundown.actualGroupStart === null) {
+        runtimeState.rundown.actualGroupStart = plannedStart;
+      }
 
       if (runtimeState.rundown.actualStart === null) {
-        runtimeState.rundown.actualStart = runtimeState.clock;
+        runtimeState.rundown.actualStart = plannedStart;
+        runtimeState._startDayOffset = 0;
+        runtimeState._startEpoch = epoch;
       }
-      runtimeState.timer.secondaryTimer = null;
     } else {
       runtimeState._timer.secondaryTarget = normaliseRollStart(runtimeState.eventNow.timeStart, offsetClock);
       runtimeState.timer.secondaryTimer = runtimeState._timer.secondaryTarget - offsetClock;
@@ -658,26 +709,37 @@ export function roll(
     return { eventId: runtimeState.eventNow.id, didStart: false };
   }
 
-  // there is something to run, load event
-  // event will finish on time
-  // account for event that finishes the day after
+  /**
+   * At this point we know that there is something to run and the event is loaded
+   * - ensure the event will finish ontime
+   * - account for events that finish the day after
+   *
+   * when we start in roll mode
+   * we need to backtrace all times to the supposed start time of the event
+   */
+  const plannedStart = runtimeState.eventNow.timeStart;
   const endTime =
     runtimeState.eventNow.timeEnd < runtimeState.eventNow.timeStart
       ? runtimeState.eventNow.timeEnd + dayInMs
       : runtimeState.eventNow.timeEnd;
-  runtimeState.timer.startedAt = runtimeState.clock;
+  runtimeState.timer.startedAt = plannedStart;
   runtimeState.timer.expectedFinish = endTime;
 
-  // we add time to allow timer to catch up
-  runtimeState.timer.addedTime = -(runtimeState.clock - runtimeState.eventNow.timeStart);
-
   // state catch up
   runtimeState.timer.duration = calculateDuration(runtimeState.eventNow.timeStart, endTime);
   runtimeState.timer.current = getCurrent(runtimeState);
   runtimeState.timer.elapsed = 0;
 
   // update runtime
-  runtimeState.rundown.actualStart = runtimeState.clock;
+  runtimeState.rundown.actualStart = plannedStart;
+  if (runtimeState.groupNow !== null && runtimeState.rundown.actualGroupStart === null) {
+    runtimeState.rundown.actualGroupStart = plannedStart;
+  }
+
+  // update metadata
+  runtimeState._startDayOffset = 0;
+  runtimeState._startEpoch = epoch;
+
   return { eventId: runtimeState.eventNow.id, didStart: true };
 }
 
@@ -704,7 +766,7 @@ function getExpectedTimes(state = runtimeState) {
     if (_group !== null) {
       const { event: lastEvent, accumulatedGap, isLinkedToLoaded } = _group;
       const lastEventExpectedStart = getExpectedStart(lastEvent, {
-        currentDay: eventNow.dayOffset,
+        currentDay: state.rundown.currentDay!,
         totalGap: accumulatedGap,
         isLinkedToLoaded,
         mode: offset.mode,
@@ -721,7 +783,7 @@ function getExpectedTimes(state = runtimeState) {
     if (_flag) {
       const { event, accumulatedGap, isLinkedToLoaded } = _flag;
       const expectedStart = getExpectedStart(event, {
-        currentDay: eventNow.dayOffset,
+        currentDay: state.rundown.currentDay!,
         totalGap: accumulatedGap,
         isLinkedToLoaded,
         mode: offset.mode,
@@ -736,7 +798,7 @@ function getExpectedTimes(state = runtimeState) {
   if (state._end) {
     const { event, accumulatedGap, isLinkedToLoaded } = state._end;
     const expectedStart = getExpectedStart(event, {
-      currentDay: eventNow.dayOffset,
+      currentDay: state.rundown.currentDay!,
       totalGap: accumulatedGap,
       isLinkedToLoaded,
       mode: offset.mode,
@@ -752,16 +814,19 @@ export function loadGroupFlagAndEnd(
   rundown: Rundown,
   metadata: RundownMetadata,
   currentIndex: MaybeNumber,
-  state = runtimeState,
+  state = runtimeState, // used for testing
 ) {
+  const previousGroup = state.groupNow?.id;
   state.groupNow = null;
   state._group = null;
   state.eventFlag = null;
   state._flag = null;
   state._end = null;
 
-  if (currentIndex == null) return;
-  if (state.eventNow === null) return;
+  if (currentIndex === null || state.eventNow === null) {
+    state.rundown.actualGroupStart = null;
+    return;
+  }
 
   const currentGroupId = state.eventNow.parent;
   const flagsPresent = metadata.flags.length !== 0;
@@ -773,6 +838,10 @@ export function loadGroupFlagAndEnd(
   state.groupNow = currentGroupId ? (entries[currentGroupId] as OntimeGroup) : null;
   const lastEventInGroup = orderInGroup ? getLastEventNormal(rundown.entries, orderInGroup).lastEvent : null;
 
+  if (previousGroup !== currentGroupId) {
+    state.rundown.actualGroupStart = null;
+  }
+
   // if we don't have a any flags in the rundown then no need to look for it
   let foundFlag = !flagsPresent;
   // if we don't have a last event for the group there is no need to find its end time
@@ -814,4 +883,5 @@ export function loadGroupFlagAndEnd(
 
 export function setOffsetMode(mode: OffsetMode) {
   runtimeState.offset.mode = mode;
+  if (isPlaybackActive(runtimeState.timer.playback)) getExpectedTimes();
 }

apps/server/src/utils/__tests__/coerceType.test.ts

@@ -145,16 +145,25 @@ describe('coerce unknown value to a boolean', () => {
     expect(coerceBoolean('')).toStrictEqual(false);
   });
 
-  test('true numbers', () => {
-    expect(coerceBoolean(1)).toStrictEqual(true);
-    expect(coerceBoolean(2)).toStrictEqual(true);
-    expect(coerceBoolean(100000)).toStrictEqual(true);
+  test('invalid strings', () => {
+    expect(() => coerceBoolean('bla')).toThrowError('Invalid value received');
+    expect(() => coerceBoolean(' ')).toThrowError('Invalid value received');
   });
 
-  test.todo('false numbers', () => {
+  test('true numbers', () => {
+    expect(coerceBoolean(1)).toStrictEqual(true);
+  });
+
+  test('false numbers', () => {
     expect(coerceBoolean(0)).toStrictEqual(false);
-    expect(coerceBoolean(-1)).toStrictEqual(false);
-    expect(coerceBoolean(-10000)).toStrictEqual(false);
+  });
+
+  test('invalid numbers', () => {
+    expect(() => coerceBoolean(0.5)).toThrowError('Invalid value received');
+    expect(() => coerceBoolean(-1)).toThrowError('Invalid value received');
+    expect(() => coerceBoolean(2)).toThrowError('Invalid value received');
+    expect(() => coerceBoolean(NaN)).toThrowError('Invalid value received');
+    expect(() => coerceBoolean(Infinity)).toThrowError('Invalid value received');
   });
 
   test('booleans', () => {

apps/server/src/utils/coerceType.ts

@@ -33,8 +33,8 @@ export function coerceString(value: unknown): string {
  * @throws {Error} Throws an error if the value is null or undefined.
  */
 export function coerceBoolean(value: unknown): boolean {
-  if (value === undefined || typeof value === 'object') {
-    throw new Error('Invalid value received');
+  if (typeof value === 'boolean') {
+    return value;
   }
   if (typeof value === 'string') {
     const lowerCaseValue = value.toLocaleLowerCase();
@@ -52,7 +52,11 @@ export function coerceBoolean(value: unknown): boolean {
         throw new Error('Invalid value received');
     }
   }
-  return Boolean(value);
+  if (typeof value === 'number') {
+    if (value === 0) return false;
+    if (value === 1) return true;
+  }
+  throw new Error('Invalid value received');
 }
 
 /**

apps/server/src/utils/time.ts

@@ -74,3 +74,18 @@ export function timeNow() {
   elapsed += now.getMilliseconds();
   return elapsed;
 }
+
+/**
+ * Get current time from system
+ * @returns [number, number] - [epoch time, milliseconds since midnight]
+ */
+export function getTimeObject(): [number, number] {
+  const now = new Date();
+
+  // extract milliseconds since midnight
+  let elapsed = now.getHours() * 3600000;
+  elapsed += now.getMinutes() * 60000;
+  elapsed += now.getSeconds() * 1000;
+  elapsed += now.getMilliseconds();
+  return [now.getTime(), elapsed];
+}

apps/server/tsconfig.json

@@ -1,13 +1,12 @@
 {
+  "extends": "../../tsconfig.common.json",
   "compilerOptions": {
-    "strict": true,
-    "target": "ESNext",
-    "module": "Node16",
-    "moduleResolution": "Node16",
-    "allowSyntheticDefaultImports": true,
+    "target": "esnext",
+    "module": "node16",
+    "moduleResolution": "node16",
+    "noImplicitReturns": false, //TODO: fix this
     "allowJs": true,
     "esModuleInterop": true,
-    "skipLibCheck": true,
     "types": ["vitest/globals"],
     "outDir": "dist",
     "experimentalDecorators": true,

e2e/tests/features/212-time-until.spec.ts

@@ -72,4 +72,6 @@ test('time until relative', async ({ page }) => {
   await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toContainText('30s');
   await expect(page.getByTestId('entry-3').getByTestId('rundown-event')).toContainText('10m');
   await expect(page.getByTestId('entry-4').getByTestId('rundown-event')).toContainText('20m');
+
+  await page.getByRole('button', { name: 'Absolute' }).click();
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.4",
   "description": "Time keeping for live events",
   "keywords": [
     "ontime",
@@ -33,7 +33,7 @@
     "e2e": "pnpm clear-temp && cross-env DEBUG=pw:webserver npx playwright test -c playwright.config.ts",
     "e2e:ui": "cross-env DEBUG=pw:webserver npx playwright test --ui -c playwright.config.ts",
     "e2e:i": "npx playwright codegen",
-    "cleanup": "rm -rf node_modules && rm -rf **/node_modules && rm -rf **/**/node_modules",
+    "cleanup": "pnpm rimraf node_modules && rimraf **/node_modules && rimraf **/**/node_modules",
     "clear-temp": "rm -rf e2e/tests/fixtures/tmp"
   },
   "devDependencies": {
@@ -47,7 +47,8 @@
     "eslint-plugin-playwright": "^1.5.2",
     "prettier": "catalog:",
     "turbo": "^2.3.3",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "rimraf":  "catalog:"
   },
   "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
 }

packages/types/package.json

@@ -1,4 +1,5 @@
 {
+  "version": "4.0.0-beta.4",
   "name": "ontime-types",
   "type": "module",
   "main": "./src/index.ts",
@@ -7,7 +8,8 @@
   "description": "shared typings for ontime",
   "scripts": {
     "cleanup": "rm -rf .turbo && rm -rf node_modules",
-    "lint": "eslint . --quiet"
+    "lint": "eslint . --quiet",
+    "build": "tsc"
   },
   "keywords": [],
   "author": "",
@@ -16,6 +18,7 @@
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
     "eslint": "catalog:",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "ts-essentials": "catalog:"
   }
 }

packages/types/src/api/websocket/api.type.ts

@@ -1,15 +1,177 @@
+import type { DeepPartial } from 'ts-essentials';
+
+import type { OntimeEvent } from '../../definitions/core/OntimeEntry.js';
+import type { SimpleDirection, SimplePlayback } from '../../definitions/runtime/AuxTimer.type.js';
+import type { MessageState } from '../../definitions/runtime/MessageControl.type.js';
+import type { OffsetMode } from '../../definitions/runtime/Offset.type.js';
+import type { RuntimeStore } from '../../definitions/runtime/RuntimeStore.type.js';
+
+export type VersionAction = {
+  tag: 'version';
+  payload: undefined;
+};
+export type VersionResponse = {
+  tag: 'version';
+  payload: string;
+};
+
+export type PollAction = {
+  tag: 'poll';
+  payload: undefined;
+};
+export type PollResponse = {
+  tag: 'poll';
+  payload: RuntimeStore;
+};
+
+export type ChangeAction = {
+  tag: 'change';
+  payload: { [x: string]: Partial<OntimeEvent> };
+};
+export type ChangeResponse = {
+  tag: 'change';
+  payload: 'success' | 'throttled';
+};
+
+export type MessageAction = {
+  tag: 'message';
+  payload: DeepPartial<MessageState>;
+};
+export type MessageResponse = {
+  tag: 'message';
+  payload: MessageState;
+};
+
+export type StartAction = {
+  tag: 'start';
+  payload: undefined | { index: number } | { id: string } | { cue: string } | 'next' | 'previous';
+};
+export type StartResponse = {
+  tag: 'start';
+  payload: 'success';
+};
+
+export type PauseAction = {
+  tag: 'pause';
+  payload: undefined;
+};
+export type PauseResponse = {
+  tag: 'pause';
+  payload: 'success';
+};
+
+export type StopAction = {
+  tag: 'stop';
+  payload: undefined;
+};
+export type StopResponse = {
+  tag: 'stop';
+  payload: 'success';
+};
+
+export type ReloadAction = {
+  tag: 'reload';
+  payload: undefined;
+};
+export type ReloadResponse = {
+  tag: 'reload';
+  payload: 'success';
+};
+
+export type RollAction = {
+  tag: 'roll';
+  payload: undefined;
+};
+export type RollResponse = {
+  tag: 'roll';
+  payload: 'success';
+};
+
+export type LoadAction = {
+  tag: 'load';
+  payload: { index: number } | { id: string } | { cue: string } | 'next' | 'previous';
+};
+export type LoadResponse = {
+  tag: 'load';
+  payload: 'success';
+};
+
+export type AddtimeAction = {
+  tag: 'addtime';
+  payload: { add: number } | { remove: number } | number;
+};
+export type AddtimeResponse = {
+  tag: 'addtime';
+  payload: 'success';
+};
+
+export type AuxtimerAction = {
+  tag: 'auxtimer';
+  payload:
+    | {
+        ['1']?: SimplePlayback | { duration?: number; addtime?: number; direction?: SimpleDirection };
+      }
+    | {
+        ['2']?: SimplePlayback | { duration?: number; addtime?: number; direction?: SimpleDirection };
+      }
+    | {
+        ['3']?: SimplePlayback | { duration?: number; addtime?: number; direction?: SimpleDirection };
+      };
+};
+
+export type AuxtimerResponse = {
+  tag: 'auxtimer';
+  payload: 'success';
+};
+
+export type ClientAction = {
+  tag: 'client';
+  payload: { target: string } & ({ rename: string } | { redirect: string } | { identify: string });
+};
+export type ClientResponse = {
+  tag: 'client';
+  payload: 'success';
+};
+
+export type OffsetmodeAction = {
+  tag: 'offsetmode';
+  payload: OffsetMode;
+};
+export type OffsetmodeResponse = {
+  tag: 'offsetmode';
+  payload: 'success';
+};
+
 export type ApiAction =
-  | 'version'
-  | 'poll'
-  | 'change'
-  | 'message'
-  | 'start'
-  | 'pause'
-  | 'stop'
-  | 'reload'
-  | 'roll'
-  | 'load'
-  | 'addtime'
-  | 'auxtimer'
-  | 'client'
-  | 'offsetmode';
+  | VersionAction
+  | PollAction
+  | ChangeAction
+  | MessageAction
+  | StartAction
+  | PauseAction
+  | StopAction
+  | ReloadAction
+  | RollAction
+  | LoadAction
+  | AddtimeAction
+  | AuxtimerAction
+  | ClientAction
+  | OffsetmodeAction;
+
+export type ApiResponse =
+  | VersionResponse
+  | PollResponse
+  | ChangeResponse
+  | MessageResponse
+  | StartResponse
+  | PauseResponse
+  | StopResponse
+  | ReloadResponse
+  | RollResponse
+  | LoadResponse
+  | AddtimeResponse
+  | AuxtimerResponse
+  | ClientResponse
+  | OffsetmodeResponse;
+
+export type ApiActionTag = ApiAction['tag'];

packages/types/src/definitions/DataModel.type.ts

@@ -1,12 +1,11 @@
-import type {
-  AutomationSettings,
-  CustomFields,
-  ProjectData,
-  ProjectRundowns,
-  Settings,
-  URLPreset,
-  ViewSettings,
-} from '../index.js';
+
+import type { AutomationSettings } from './core/Automation.type.js';
+import type { CustomFields } from './core/CustomFields.type.js';
+import type { ProjectData } from './core/ProjectData.type.js';
+import type { ProjectRundowns } from './core/Rundown.type.js';
+import type { Settings } from './core/Settings.type.js';
+import type { URLPreset } from './core/UrlPreset.type.js';
+import type { ViewSettings } from './core/Views.type.js';
 
 export type DatabaseModel = {
   rundowns: ProjectRundowns;

packages/types/src/definitions/core/OntimeEntry.ts

@@ -1,4 +1,9 @@
-import type { EndAction, EntryCustomFields, MaybeNumber, TimerType, TimeStrategy, Trigger } from '../../index.js';
+import type { MaybeNumber } from '../../utils/utils.type.js';
+import type { EndAction } from '../EndAction.type.js';
+import type { TimerType } from '../TimerType.type.js';
+import type { TimeStrategy } from '../TimeStrategy.type.js';
+import type { Trigger } from './Automation.type.js';
+import type { EntryCustomFields } from './CustomFields.type.js';
 
 export type EntryId = string;
 

packages/types/src/definitions/runtime/RundownState.type.ts

@@ -4,6 +4,8 @@ export type RundownState = {
   selectedEventIndex: MaybeNumber;
   numEvents: number;
   plannedStart: MaybeNumber;
-  actualStart: MaybeNumber;
   plannedEnd: MaybeNumber;
+  actualStart: MaybeNumber;
+  currentDay: MaybeNumber;
+  actualGroupStart: MaybeNumber;
 };

packages/types/src/definitions/runtime/RuntimeStore.ts

@@ -33,6 +33,8 @@ export const runtimeStorePlaceholder: Readonly<RuntimeStore> = {
     plannedStart: 0, // only changes if event changes
     plannedEnd: 0, // only changes if event changes, overflows over dayInMs
     actualStart: null, // set once we start the timer
+    actualGroupStart: null, // maybe set once we start the timer
+    currentDay: null,
   },
   offset: {
     absolute: 0, // changes at runtime