fix: ignore 0 duration events

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

.github/workflows/build_docker.yml

@@ -30,7 +30,7 @@ jobs:
       with:
         context: .
         file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+        platforms: linux/amd64,linux/arm64,linux/arm/v7
         # Push is a shorthand for --output=type=registry
         push: true
         tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
@@ -41,7 +41,7 @@ jobs:
       with:
         context: .
         file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+        platforms: linux/amd64,linux/arm64,linux/arm/v7
         # Push is a shorthand for --output=type=registry
         push: true
         tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-pnpm lint-staged

Dockerfile

@@ -13,7 +13,7 @@ FROM node:20-alpine
 # Environment Variable to signal that we are running production
 ENV NODE_ENV=docker
 # Ontime Data path
-ENV ONTIME_DATA=/external/
+ENV ONTIME_DATA=/data/
 
 WORKDIR /app/
 
@@ -22,7 +22,6 @@ COPY --from=builder /app/apps/client/build ./client/
 
 # Prepare Backend
 COPY --from=builder /app/apps/server/dist/ ./server/
-COPY ./demo-db/ ./preloaded-db/
 COPY --from=builder /app/apps/server/src/external/ ./external/
 
 # Export default ports

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@getontime/cli",
-    "version": "3.4.1-beta",
+    "version": "3.5.0",
     "author": "Carlos Valente",
     "description": "Time keeping for live events",
     "repository": "https://github.com/cpvalente/ontime",
@@ -20,8 +20,8 @@
         "server"
     ],
     "devDependencies": {
-        "eslint": "^8.53.0",
+        "eslint": "catalog:",
-        "eslint-config-prettier": "^9.0.0",
+        "eslint-config-prettier": "catalog:",
-        "prettier": "^3.0.3"
+        "prettier": "catalog:"
     }
 }

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "3.4.1-beta",
+  "version": "3.5.0",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -13,7 +13,7 @@
     "@fontsource/open-sans": "^5.0.28",
     "@mantine/hooks": "^7.6.2",
     "@react-icons/all-files": "^4.1.0",
-    "@sentry/react": "^7.92.0",
+    "@sentry/react": "^8.19.0",
     "@tanstack/react-query": "^5.17.9",
     "@tanstack/react-query-devtools": "^5.17.9",
     "@tanstack/react-table": "^8.11.3",
@@ -22,9 +22,9 @@
     "color": "^4.2.3",
     "csv-stringify": "^6.4.5",
     "framer-motion": "^10.10.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-colorful": "^5.6.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-fast-compare": "^3.2.2",
     "react-hook-form": "^7.49.2",
     "react-qr-code": "^2.0.12",
@@ -42,7 +42,6 @@
     "build:docker": "vite build",
     "build:localdocker": "cross-env NODE_ENV=local vite build",
     "lint": "eslint . --quiet",
-    "lint-staged": "eslint",
     "test": "vitest",
     "test:pipeline": "vitest run",
     "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build",
@@ -70,13 +69,13 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/eslint-plugin": "catalog:",
-    "@typescript-eslint/parser": "^7.12.0",
+    "@typescript-eslint/parser": "catalog:",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
+    "eslint": "catalog:",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "catalog:",
     "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -84,9 +83,9 @@
     "jsdom": "^21.1.0",
     "ontime-types": "workspace:*",
     "ontime-utils": "workspace:*",
-    "prettier": "^3.3.1",
+    "prettier": "catalog:",
     "sass": "^1.57.1",
-    "typescript": "^5.4.3",
+    "typescript": "catalog:",
     "vite": "^5.2.11",
     "vite-plugin-compression2": "^0.12.0",
     "vite-plugin-svgr": "^4.2.0",

apps/client/src/AppRouter.tsx

@@ -1,24 +1,36 @@
-import { lazy, Suspense } from 'react';
+import React from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+  useNavigationType,
+} from 'react-router-dom';
+import * as Sentry from '@sentry/react';
 
 import { useClientPath } from './common/hooks/useClientPath';
 import Log from './features/log/Log';
 import withPreset from './features/PresetWrapper';
 import withData from './features/viewers/ViewWrapper';
+import { ONTIME_VERSION } from './ONTIME_VERSION';
+import { sentryDsn, sentryRecommendedIgnore } from './sentry.config';
 
-const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
+const Editor = React.lazy(() => import('./features/editors/ProtectedEditor'));
-const Cuesheet = lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
+const Cuesheet = React.lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
-const Operator = lazy(() => import('./features/operator/OperatorExport'));
+const Operator = React.lazy(() => import('./features/operator/OperatorExport'));
 
-const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
+const TimerView = React.lazy(() => import('./features/viewers/timer/Timer'));
-const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
+const MinimalTimerView = React.lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
-const ClockView = lazy(() => import('./features/viewers/clock/Clock'));
+const ClockView = React.lazy(() => import('./features/viewers/clock/Clock'));
-const Countdown = lazy(() => import('./features/viewers/countdown/Countdown'));
+const Countdown = React.lazy(() => import('./features/viewers/countdown/Countdown'));
 
-const Backstage = lazy(() => import('./features/viewers/backstage/Backstage'));
+const Backstage = React.lazy(() => import('./features/viewers/backstage/Backstage'));
-const Public = lazy(() => import('./features/viewers/public/Public'));
+const Timeline = React.lazy(() => import('./features/viewers/timeline/TimelinePage'));
-const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
+const Public = React.lazy(() => import('./features/viewers/public/Public'));
-const StudioClock = lazy(() => import('./features/viewers/studio/StudioClock'));
+const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
+const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
 
 const STimer = withPreset(withData(TimerView));
 const SMinimalTimer = withPreset(withData(MinimalTimerView));
@@ -28,41 +40,56 @@ const SBackstage = withPreset(withData(Backstage));
 const SPublic = withPreset(withData(Public));
 const SLowerThird = withPreset(withData(Lower));
 const SStudio = withPreset(withData(StudioClock));
+const STimeline = withPreset(withData(Timeline));
 
-const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
+const EditorFeatureWrapper = React.lazy(() => import('./features/EditorFeatureWrapper'));
-const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
+const RundownPanel = React.lazy(() => import('./features/rundown/RundownExport'));
-const TimerControl = lazy(() => import('./features/control/playback/TimerControlExport'));
+const TimerControl = React.lazy(() => import('./features/control/playback/TimerControlExport'));
-const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
+const MessageControl = React.lazy(() => import('./features/control/message/MessageControlExport'));
+
+Sentry.init({
+  dsn: sentryDsn,
+  integrations: [
+    Sentry.reactRouterV6BrowserTracingIntegration({
+      useEffect: React.useEffect,
+      useLocation,
+      useNavigationType,
+      createRoutesFromChildren,
+      matchRoutes,
+    }),
+  ],
+  tracesSampleRate: 0.3,
+  release: ONTIME_VERSION,
+  enabled: import.meta.env.PROD,
+  ignoreErrors: [...sentryRecommendedIgnore, /Unable to preload CSS/i, /dynamically imported module/i],
+  denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i],
+});
+
+const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
 
 export default function AppRouter() {
   // handle client path changes
   useClientPath();
 
   return (
-    <Suspense fallback={null}>
+    <React.Suspense fallback={null}>
-      <Routes>
+      <SentryRoutes>
         <Route path='/' element={<Navigate to='/timer' />} />
         <Route path='/timer' element={<STimer />} />
-
+        <Route path='/public' element={<SPublic />} />
         <Route path='/minimal' element={<SMinimalTimer />} />
-
         <Route path='/clock' element={<SClock />} />
 
         <Route path='/countdown' element={<SCountdown />} />
-
         <Route path='/backstage' element={<SBackstage />} />
-
-        <Route path='/public' element={<SPublic />} />
-
         <Route path='/studio' element={<SStudio />} />
-
         <Route path='/lower' element={<SLowerThird />} />
-
+        <Route path='/timeline' element={<STimeline />} />
-        <Route path='/op' element={<Operator />} />
 
         {/*/!* Protected Routes *!/*/}
         <Route path='/editor' element={<Editor />} />
         <Route path='/cuesheet' element={<Cuesheet />} />
+        <Route path='/op' element={<Operator />} />
 
         {/*/!* Protected Routes - Elements *!/*/}
         <Route
@@ -99,7 +126,7 @@ export default function AppRouter() {
         />
         {/*/!* Send to default if nothing found *!/*/}
         <Route path='*' element={<STimer />} />
-      </Routes>
+      </SentryRoutes>
-    </Suspense>
+    </React.Suspense>
   );
 }

apps/client/src/common/api/db.ts

@@ -11,7 +11,7 @@ const dbPath = `${apiEntryUrl}/db`;
 /**
  * HTTP request to the current DB
  */
-async function getDb(filename: string): Promise<AxiosResponse<DatabaseModel>> {
+export function getDb(filename: string): Promise<AxiosResponse<DatabaseModel>> {
   return axios.post(`${dbPath}/download/`, { filename });
 }
 

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

@@ -38,7 +38,7 @@ export function RedirectClientModal(props: RedirectClientModalProps) {
     onClose();
   };
 
-  const host = `${window.location.origin}/`;
+  const host = window.location.origin;
   const canSubmit = path !== currentPath && path !== '';
 
   return (

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -28,9 +28,11 @@ class ErrorBoundary extends React.Component {
     });
 
     Sentry.withScope((scope) => {
-      scope.setExtras('error', error);
+      scope.setExtras({
-      scope.setExtras('store', runtimeStore.getState());
+        error,
-      scope.setExtras('hasSocket', { hasConnected, shouldReconnect, reconnectAttempts });
+        store: runtimeStore.getState(),
+        hasSocket: { hasConnected, shouldReconnect, reconnectAttempts },
+      });
       const eventId = Sentry.captureException(error);
       this.setState({ eventId, info });
     });

apps/client/src/common/components/identify-overlay/IdentifyOverlay.tsx

@@ -54,7 +54,6 @@ function Overlay() {
     };
   }, [showOverlay, id, setIdentify, handleClose]);
 
-    console.log('here2');
   return (
     <div className={style.overlay} data-testid='identify-overlay' onClick={handleClose}>
       <div className={style.name}>{name}</div>

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -1,12 +1,12 @@
 import { MaybeNumber } from 'ontime-types';
 
-import { clamp } from '../../utils/math';
+import { getProgress } from '../../utils/getProgress';
 
 import './MultiPartProgressBar.scss';
 
 interface MultiPartProgressBar {
   now: MaybeNumber;
-  complete: number;
+  complete: MaybeNumber;
   normalColor: string;
   warning?: MaybeNumber;
   warningColor: string;
@@ -31,10 +31,9 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
     className = '',
   } = props;
 
-  const percentRemaining = complete === 0 ? 0 : 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
+  const percentRemaining = 100 - getProgress(now, complete);
-
+  const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
-  const dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
+  const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
-  const warningWidth = warning ? clamp((warning / complete) * 100 - dangerWidth, 0, 100) : 0;
 
   return (
     <div

apps/client/src/common/components/progress-bar/ProgressBar.tsx

@@ -1,22 +1,23 @@
-import { clamp } from '../../utils/math';
+import { MaybeNumber } from 'ontime-types';
+
+import { getProgress } from '../../utils/getProgress';
 
 import './ProgressBar.scss';
 
 interface ProgressBarProps {
-  now?: number;
+  current: MaybeNumber;
-  complete?: number;
+  duration: MaybeNumber;
   hidden?: boolean;
   className?: string;
 }
 
 export default function ProgressBar(props: ProgressBarProps) {
-  const { now = 0, complete = 100, hidden, className = '' } = props;
+  const { current, duration, hidden, className = '' } = props;
-
+  const progress = getProgress(current, duration);
-  const percentComplete = clamp(100 - (Math.max(now, 0) * 100) / complete, 0, 100);
 
   return (
     <div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
-      <div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+      <div className='progress-bar__indicator' style={{ width: `${progress}%` }} />
     </div>
   );
 }

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

@@ -51,6 +51,7 @@ interface EditFormDrawerProps {
   viewOptions: ViewOption[];
 }
 
+// TODO: this is a good candidate for memoisation, but needs the paramFields to be stable
 export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen, onClose, onOpen } = useDisclosure();

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

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { CustomFields } from 'ontime-types';
 
-import { queryRefetchInterval } from '../../ontimeConfig';
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { CUSTOM_FIELDS } from '../api/constants';
 import { getCustomFields } from '../api/customFields';
 
@@ -14,7 +14,7 @@ export default function useCustomFields() {
     placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
-    refetchInterval: queryRefetchInterval,
+    refetchInterval: queryRefetchIntervalSlow,
     networkMode: 'always',
   });
 

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

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { NormalisedRundown, OntimeRundown, RundownCached } from 'ontime-types';
 
-import { queryRefetchInterval } from '../../ontimeConfig';
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { RUNDOWN } from '../api/constants';
 import { fetchNormalisedRundown } from '../api/rundown';
 
@@ -16,7 +16,7 @@ export default function useRundown() {
     placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
-    refetchInterval: queryRefetchInterval,
+    refetchInterval: queryRefetchIntervalSlow,
     networkMode: 'always',
   });
   return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };

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

@@ -12,9 +12,7 @@ export const useClientPath = () => {
 
   // notify of client path changes
   useEffect(() => {
-    //remove leading '/' from path
+    socketSendJson('set-client-path', pathname + search);
-    const fullPath = (pathname.startsWith('/') ? pathname.slice(1) : pathname) + search;
-    socketSendJson('set-client-path', fullPath);
   }, [pathname, search]);
 
   // navigate to new path when received from server

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

@@ -50,6 +50,7 @@ export const usePlaybackControl = () => {
     playback: state.timer.playback,
     selectedEventIndex: state.runtime.selectedEventIndex,
     numEvents: state.runtime.numEvents,
+    timerPhase: state.timer.phase,
   });
 
   return useRuntimeStore(featureSelector);
@@ -115,6 +116,7 @@ export const setAuxTimer = {
 export const useCuesheet = () => {
   const featureSelector = (state: RuntimeStore) => ({
     playback: state.timer.playback,
+    currentBlockId: state.currentBlock.block?.id ?? null,
     selectedEventId: state.eventNow?.id ?? null,
     selectedEventIndex: state.runtime.selectedEventIndex,
     numEvents: state.runtime.numEvents,
@@ -149,7 +151,6 @@ export const useClock = () => {
 /** Used by the progress bar components */
 export const useProgressData = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    addedTime: state.timer.addedTime,
     current: state.timer.current,
     duration: state.timer.duration,
     timeWarning: state.eventNow?.timeWarning ?? null,
@@ -179,6 +180,26 @@ export const useRuntimePlaybackOverview = () => {
     numEvents: state.runtime.numEvents,
     selectedEventIndex: state.runtime.selectedEventIndex,
     offset: state.runtime.offset,
+
+    currentBlock: state.currentBlock,
+  });
+
+  return useRuntimeStore(featureSelector);
+};
+
+export const useTimelineOverview = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    plannedStart: state.runtime.plannedStart,
+    plannedEnd: state.runtime.plannedEnd,
+  });
+
+  return useRuntimeStore(featureSelector);
+};
+
+export const useTimelineStatus = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    clock: state.clock,
+    offset: state.runtime.offset,
   });
 
   return useRuntimeStore(featureSelector);

apps/client/src/common/stores/runtime.ts

@@ -38,6 +38,10 @@ export const runtimeStorePlaceholder: RuntimeStore = {
     actualStart: null,
     expectedEnd: null,
   },
+  currentBlock: {
+    block: null,
+    startedAt: null,
+  },
   eventNow: null,
   eventNext: null,
   publicEventNow: null,
@@ -48,6 +52,7 @@ export const runtimeStorePlaceholder: RuntimeStore = {
     duration: 0,
     playback: SimplePlayback.Stop,
   },
+  frozen: false,
 };
 
 const deepCompare = <T>(a: T, b: T) => isEqual(a, b);

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

@@ -0,0 +1,23 @@
+import { MaybeNumber } from 'ontime-types';
+
+import { clamp } from './math';
+
+/**
+ * Returns completion percentage of a progress bar
+ * This code assumes the current time and duration have addedTime already applied
+ */
+export function getProgress(current: MaybeNumber, duration: MaybeNumber) {
+  if (current === null || duration === null) {
+    return 0;
+  }
+
+  if (current <= 0) {
+    return 100;
+  }
+
+  if (current >= duration) {
+    return 0;
+  }
+
+  return clamp(((duration - current) / duration) * 100, 0, 100);
+}

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

@@ -1,6 +1,6 @@
-import { Log, RuntimeStore } from 'ontime-types';
+import { Log, RundownCached, RuntimeStore } from 'ontime-types';
 
-import { CLIENT_LIST, isProduction, RUNTIME, websocketUrl } from '../api/constants';
+import { CLIENT_LIST, CUSTOM_FIELDS, isProduction, RUNDOWN, RUNTIME, websocketUrl } from '../api/constants';
 import { ontimeQueryClient } from '../queryClient';
 import {
   getClientId,
@@ -36,7 +36,8 @@ export const connectSocket = () => {
     }
 
     socketSendJson('set-client-type', 'ontime');
-    socketSendJson('set-client-path', location.pathname);
+
+    socketSendJson('set-client-path', location.pathname + location.search);
   };
 
   websocket.onclose = () => {
@@ -150,6 +151,11 @@ export const connectSocket = () => {
           updateDevTools({ eventNow: payload });
           break;
         }
+        case 'ontime-currentBlock': {
+          patchRuntime('currentBlock', payload);
+          updateDevTools({ currentBlock: payload });
+          break;
+        }
         case 'ontime-publicEventNow': {
           patchRuntime('publicEventNow', payload);
           updateDevTools({ publicEventNow: payload });
@@ -170,6 +176,17 @@ export const connectSocket = () => {
           updateDevTools({ auxtimer1: payload });
           break;
         }
+        case 'ontime-refetch': {
+          // the refetch message signals that the rundown has changed in the server side
+          const { revision } = payload;
+          const currentRevision = ontimeQueryClient.getQueryData<RundownCached>(RUNDOWN)?.revision ?? -1;
+
+          if (revision > currentRevision) {
+            ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });
+            ontimeQueryClient.invalidateQueries({ queryKey: CUSTOM_FIELDS });
+          }
+          break;
+        }
       }
     } catch (_) {
       // ignore unhandled

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

@@ -34,3 +34,16 @@ export const enDash = '–';
 
 export const timerPlaceholder = '––:––:––';
 export const timerPlaceholderMin = '––:––';
+
+/**
+ * Adds opacity to a given colour if possible
+ */
+export function alpha(colour: string, amount: number): string {
+  try {
+    const withAlpha = Color(colour).alpha(amount).hexa();
+    return withAlpha;
+  } catch (_error) {
+    /* we do not handle errors here */
+  }
+  return colour;
+}

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

@@ -1,25 +1,25 @@
 import { MaybeNumber, Settings, TimeFormat } from 'ontime-types';
-import { formatFromMillis } from 'ontime-utils';
+import { formatFromMillis, MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
 
 import { FORMAT_12, FORMAT_24 } from '../../viewerConfig';
 import { APP_SETTINGS } from '../api/constants';
 import { ontimeQueryClient } from '../queryClient';
 
 /**
- * Returns current time in milliseconds
+ * Returns current time in milliseconds from midnight
  * @returns {number}
  */
-export const nowInMillis = () => {
+export function nowInMillis(): number {
   const now = new Date();
 
   // extract milliseconds since midnight
-  let elapsed = now.getHours() * 3600000;
+  let elapsed = now.getHours() * MILLIS_PER_HOUR;
-  elapsed += now.getMinutes() * 60000;
+  elapsed += now.getMinutes() * MILLIS_PER_MINUTE;
-  elapsed += now.getSeconds() * 1000;
+  elapsed += now.getSeconds() * MILLIS_PER_SECOND;
   elapsed += now.getMilliseconds();
 
   return elapsed;
-};
+}
 
 /**
  * @description Resolves format from url and store
@@ -95,3 +95,33 @@ export const formatTime = (
   const isNegative = milliseconds < 0;
   return `${isNegative ? '-' : ''}${display}`;
 };
+
+/**
+ * Handles case for formatting a duration time
+ * @param duration
+ * @returns
+ */
+export function formatDuration(duration: number, hideSeconds = true): string {
+  // durations should never be negative, we handle it here to flag if there is an issue in future
+  if (duration <= 0) {
+    return '0h 0m';
+  }
+
+  const hours = Math.floor(duration / MILLIS_PER_HOUR);
+  const minutes = Math.floor((duration % MILLIS_PER_HOUR) / MILLIS_PER_MINUTE);
+  let result = '';
+  if (hours > 0) {
+    result += `${hours}h`;
+  }
+  if (minutes > 0) {
+    result += `${minutes}m`;
+  }
+
+  if (!hideSeconds) {
+    const seconds = Math.floor((duration % MILLIS_PER_MINUTE) / MILLIS_PER_SECOND);
+    if (seconds > 0) {
+      result += `${seconds}s`;
+    }
+  }
+  return result;
+}

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

@@ -148,6 +148,7 @@ export default function GeneralPanelForm() {
                 <option value='en'>English</option>
                 <option value='fr'>French</option>
                 <option value='de'>German</option>
+                <option value='hu'>Hungarian</option>
                 <option value='it'>Italian</option>
                 <option value='no'>Norwegian</option>
                 <option value='pt'>Portuguese</option>

apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx

@@ -100,7 +100,7 @@ export default function EditorSettingsForm() {
           </Panel.ListGroup>
         </Panel.Section>
         <Panel.Section>
-          <Panel.Title>Play mode</Panel.Title>
+          <Panel.Title>Run mode</Panel.Title>
           <Panel.ListGroup>
             <Panel.ListItem>
               <Panel.Field

apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx

@@ -42,7 +42,7 @@ export default function ManageProjects() {
       const errorMessage = maybeAxiosError(error);
       setError(`Error uploading file: ${errorMessage}`);
     } finally {
-      invalidateAllCaches();
+      await invalidateAllCaches();
     }
 
     setLoading(null);

apps/client/src/features/app-settings/panel/project-panel/ProjectForm.tsx

@@ -9,7 +9,7 @@ export type ProjectFormValues = {
 };
 
 interface ProjectFormProps {
-  action: 'duplicate' | 'rename';
+  action: 'duplicate' | 'rename' | 'merge';
   filename: string;
   onCancel: () => void;
   onSubmit: (values: ProjectFormValues) => Promise<void>;

apps/client/src/features/app-settings/panel/project-panel/ProjectListItem.tsx

@@ -11,13 +11,15 @@ import {
   renameProject,
 } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
+import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../PanelUtils';
 
 import ProjectForm, { ProjectFormValues } from './ProjectForm';
+import ProjectMergeForm from './ProjectMergeForm';
 
 import style from './ProjectPanel.module.scss';
 
-export type EditMode = 'rename' | 'duplicate' | null;
+export type EditMode = 'rename' | 'duplicate' | 'merge' | null;
 
 interface ProjectListItemProps {
   current?: boolean;
@@ -100,8 +102,10 @@ export default function ProjectListItem({
     handleToggleEditMode(null, null);
   };
 
-  const isCurrentlyBeingEdited = editingMode && filename === editingFilename;
+  const isCurrentlyBeingEdited = filename === editingFilename;
-  const classes = current && !isCurrentlyBeingEdited ? style.current : undefined;
+  const showProjectForm = (editingMode === 'rename' || editingMode === 'duplicate') && filename === editingFilename;
+  const showMergeForm = editingMode === 'merge' && isCurrentlyBeingEdited;
+  const classes = cx([current && !isCurrentlyBeingEdited && style.current, isCurrentlyBeingEdited && style.isEditing]);
 
   return (
     <>
@@ -113,7 +117,7 @@ export default function ProjectListItem({
         </tr>
       )}
       <tr key={filename} className={classes}>
-        {isCurrentlyBeingEdited ? (
+        {showProjectForm ? (
           <td colSpan={99}>
             <ProjectForm
               action={editingMode}
@@ -125,7 +129,7 @@ export default function ProjectListItem({
         ) : (
           <>
             <td className={style.containCell}>{filename}</td>
-            <td>{new Date(updatedAt).toLocaleString()}</td>
+            <td>{current ? 'Currently loaded' : new Date(updatedAt).toLocaleString()}</td>
             <td className={style.actionButton}>
               <ActionMenu
                 current={current}
@@ -133,12 +137,20 @@ export default function ProjectListItem({
                 onChangeEditMode={handleToggleEditMode}
                 onDelete={handleDelete}
                 onLoad={handleLoad}
-                isDisabled={loading}
+                isDisabled={loading || showMergeForm}
+                onMerge={(filename) => handleToggleEditMode('merge', filename)}
               />
             </td>
           </>
         )}
       </tr>
+      {showMergeForm && (
+        <tr>
+          <td colSpan={99}>
+            <ProjectMergeForm onClose={handleCancel} fileName={filename} />
+          </td>
+        </tr>
+      )}
     </>
   );
 }
@@ -148,11 +160,12 @@ interface ActionMenuProps {
   filename: string;
   isDisabled: boolean;
   onChangeEditMode: (editMode: EditMode, filename: string) => void;
-  onDelete: (filename: string) => void;
+  onDelete: (filename: string) => Promise<void>;
-  onLoad: (filename: string) => void;
+  onLoad: (filename: string) => Promise<void>;
+  onMerge: (filename: string) => void;
 }
 function ActionMenu(props: ActionMenuProps) {
-  const { current, filename, isDisabled, onChangeEditMode, onDelete, onLoad } = props;
+  const { current, filename, isDisabled, onChangeEditMode, onDelete, onLoad, onMerge } = props;
 
   const handleRename = () => {
     onChangeEditMode('rename', filename);
@@ -185,6 +198,9 @@ function ActionMenu(props: ActionMenuProps) {
         <MenuItem onClick={() => onLoad(filename)} isDisabled={current}>
           Load
         </MenuItem>
+        <MenuItem onClick={() => onMerge(filename)} isDisabled={current}>
+          Partial Load
+        </MenuItem>
         <MenuItem onClick={handleRename}>Rename</MenuItem>
         <MenuItem onClick={handleDuplicate}>Duplicate</MenuItem>
         <MenuItem onClick={handleDownload}>Download</MenuItem>

apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button, Switch } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { PROJECT_DATA } from '../../../../common/api/constants';
+import { getDb, patchData } from '../../../../common/api/db';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import * as Panel from '../PanelUtils';
+
+import { makeProjectPatch } from './project.utils';
+
+import style from './ProjectPanel.module.scss';
+
+interface ProjectMergeFromProps {
+  onClose: () => void;
+  fileName: string;
+}
+
+type ProjectMergeFormValues = {
+  project: boolean;
+  rundown: boolean;
+  viewSettings: boolean;
+  urlPresets: boolean;
+  osc: boolean;
+  http: boolean;
+};
+
+export default function ProjectMergeForm(props: ProjectMergeFromProps) {
+  const { onClose, fileName } = props;
+  const [error, setError] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  const {
+    handleSubmit,
+    register,
+    formState: { isSubmitting, isValid, isDirty },
+  } = useForm<ProjectMergeFormValues>({
+    defaultValues: {
+      project: false,
+      rundown: false,
+      viewSettings: false,
+      urlPresets: false,
+      osc: false,
+      http: false,
+    },
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  const handleSubmitCreate = async (values: ProjectMergeFormValues) => {
+    const allFalse = Object.values(values).every((value) => !value);
+    if (allFalse) {
+      setError('At least one option must be selected');
+      return;
+    }
+
+    try {
+      setError(null);
+
+      // make patch object
+      const { data } = await getDb(fileName);
+      const patch = await makeProjectPatch(data, values);
+
+      // request patch
+      await patchData(patch);
+      await queryClient.invalidateQueries({ queryKey: PROJECT_DATA });
+      onClose();
+    } catch (error) {
+      setError(maybeAxiosError(error));
+    }
+  };
+
+  return (
+    <Panel.Section as='form' onSubmit={handleSubmit(handleSubmitCreate)}>
+      <Panel.Title>
+        Merge {`"${fileName}"`}
+        <div className={style.createActionButtons}>
+          <Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button
+            isDisabled={!isValid || !isDirty}
+            type='submit'
+            isLoading={isSubmitting}
+            variant='ontime-filled'
+            size='sm'
+          >
+            Merge
+          </Button>
+        </div>
+      </Panel.Title>
+      {error && <Panel.Error>{error}</Panel.Error>}
+      <div className={style.innerColumn}>
+        <Panel.Description>
+          Select partial data from {`"${fileName}"`} to merge into the current project.
+          <br /> This process is irreversible.
+        </Panel.Description>
+        <label>
+          <Switch variant='ontime' {...register('project')} />
+          Project data
+        </label>
+        <label>
+          <Switch variant='ontime' {...register('rundown')} />
+          Rundown + Custom Fields
+        </label>
+        <label>
+          <Switch variant='ontime' {...register('viewSettings')} />
+          View Settings
+        </label>
+        <label>
+          <Switch variant='ontime' {...register('urlPresets')} />
+          URL Presets
+        </label>
+        <label>
+          <Switch variant='ontime' {...register('osc')} />
+          OSC Integration
+        </label>
+        <label>
+          <Switch variant='ontime' {...register('http')} />
+          HTTP Integration
+        </label>
+      </div>
+    </Panel.Section>
+  );
+}

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss

@@ -2,6 +2,10 @@
   background-color: $blue-1100;
 }
 
+.isEditing {
+  color: $blue-500;
+}
+
 .actionButton {
   flex: 1;
   text-align: right;
@@ -49,4 +53,9 @@
   display: flex;
   flex-direction: column;
   gap: 1em;
+
+  label {
+    display: flex;
+    gap: 1em;
+  }
 }

apps/client/src/features/app-settings/panel/project-panel/project.utils.ts

@@ -0,0 +1,17 @@
+import { DatabaseModel, isKeyOfType } from 'ontime-types';
+
+export async function makeProjectPatch(data: DatabaseModel, mergeKeys: Record<string, boolean>) {
+  const patchObject: Partial<DatabaseModel> = {};
+
+  for (const key in mergeKeys) {
+    if (isKeyOfType(key, data) && mergeKeys[key]) {
+      // if the rundown is merged we also need the custom fields
+      if (key === 'rundown') {
+        patchObject.customFields = data['customFields'];
+      }
+      Object.assign(patchObject, { [key]: data[key] });
+    }
+  }
+
+  return patchObject;
+}

apps/client/src/features/app-settings/panel/sources-panel/import-map/ImportMapForm.tsx

@@ -78,7 +78,7 @@ export default function ImportMapForm(props: ImportMapFormProps) {
 
   const isLoading = Boolean(loading);
   const canSubmitSpreadsheet = isSpreadsheet && !isLoading;
-  const canSubmitGSheet = !isLoading;
+  const canSubmitGSheet = !isLoading && !stepData.worksheet.error;
   const canSubmit = !hasErrors && isValid && (canSubmitSpreadsheet || canSubmitGSheet);
 
   return (

apps/client/src/features/control/playback/PlaybackControl.tsx

@@ -21,6 +21,7 @@ export default function PlaybackControl() {
         playback={data.playback}
         numEvents={data.numEvents}
         selectedEventIndex={data.selectedEventIndex}
+        timerPhase={data.timerPhase}
       />
       <AuxTimer />
     </div>

apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.tsx

@@ -6,7 +6,7 @@ import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward'
 import { IoReload } from '@react-icons/all-files/io5/IoReload';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { IoTime } from '@react-icons/all-files/io5/IoTime';
-import { Playback } from 'ontime-types';
+import { Playback, TimerPhase } from 'ontime-types';
 import { validatePlayback } from 'ontime-utils';
 
 import { setPlayback } from '../../../../common/hooks/useSocket';
@@ -19,10 +19,11 @@ interface PlaybackButtonsProps {
   playback: Playback;
   numEvents: number;
   selectedEventIndex: number | null;
+  timerPhase: TimerPhase;
 }
 
 export default function PlaybackButtons(props: PlaybackButtonsProps) {
-  const { playback, numEvents, selectedEventIndex } = props;
+  const { playback, numEvents, selectedEventIndex, timerPhase } = props;
 
   const isRolling = playback === Playback.Roll;
   const isPlaying = playback === Playback.Play;
@@ -37,7 +38,7 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
   const disableNext = isRolling || noEvents || isLast;
   const disablePrev = isRolling || noEvents || isFirst;
 
-  const playbackCan = validatePlayback(playback);
+  const playbackCan = validatePlayback(playback, timerPhase);
   const disableStart = !playbackCan.start;
   const disablePause = !playbackCan.pause;
   const disableRoll = !playbackCan.roll || noEvents;

apps/client/src/features/cuesheet/Cuesheet.tsx

@@ -21,11 +21,11 @@ interface CuesheetProps {
   columns: ColumnDef<OntimeRundownEntry>[];
   handleUpdate: (rowIndex: number, accessor: keyof OntimeRundownEntry, payload: unknown) => void;
   selectedId: string | null;
+  currentBlockId: string | null;
 }
 
-export default function Cuesheet({ data, columns, handleUpdate, selectedId }: CuesheetProps) {
+export default function Cuesheet({ data, columns, handleUpdate, selectedId, currentBlockId }: CuesheetProps) {
   const { followSelected, showSettings, showDelayBlock, showPrevious, showIndexColumn } = useCuesheetSettings();
-
   const {
     columnVisibility,
     columnOrder,
@@ -114,11 +114,16 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
               }
 
               if (isOntimeBlock(row.original)) {
+                if (isPast && !showPrevious && key !== currentBlockId) {
+                  return null;
+                }
                 return <BlockRow key={key} title={row.original.title} />;
               }
               if (isOntimeDelay(row.original)) {
+                if (isPast && !showPrevious) {
+                  return null;
+                }
                 const delayVal = row.original.duration;
-
                 if (!showDelayBlock || delayVal === 0) {
                   return null;
                 }
@@ -128,9 +133,6 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
               if (isOntimeEvent(row.original)) {
                 eventIndex++;
                 const isSelected = key === selectedId;
-                if (isSelected) {
-                  isPast = false;
-                }
 
                 if (isPast && !showPrevious) {
                   return null;

apps/client/src/features/cuesheet/CuesheetWrapper.tsx

@@ -107,6 +107,7 @@ export default function CuesheetWrapper() {
         columns={columns}
         handleUpdate={handleUpdate}
         selectedId={featureData.selectedEventId}
+        currentBlockId={featureData.currentBlockId}
       />
     </div>
   );

apps/client/src/features/cuesheet/cuesheet-progress/CuesheetProgress.tsx

@@ -6,18 +6,17 @@ import styles from './CuesheetProgress.module.scss';
 
 export default function CuesheetProgress() {
   const { data } = useViewSettings();
-  const { addedTime, current, duration, timeWarning, timeDanger } = useProgressData();
+  const { current, duration, timeWarning, timeDanger } = useProgressData();
-  const totalTime = (duration ?? 0) + (addedTime ?? 0);
 
   return (
     <MultiPartProgressBar
       now={current}
-      complete={totalTime}
+      complete={duration}
-      normalColor={data!.normalColor}
+      normalColor={data.normalColor}
       warning={timeWarning}
-      warningColor={data!.warningColor}
+      warningColor={data.warningColor}
       danger={timeDanger}
-      dangerColor={data!.dangerColor}
+      dangerColor={data.dangerColor}
       className={styles.progressOverride}
       ignoreCssOverride
     />

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

@@ -170,9 +170,12 @@ export default function Operator() {
             const mainField = main ? getPropertyValue(entry, main) ?? '' : entry.title;
             const secondaryField = getPropertyValue(entry, secondary) ?? '';
             const subscribedData = subscriptions
-              ? subscriptions.map((id) => {
+              ? subscriptions.flatMap((id) => {
+                  if (!customFields[id]) {
+                    return [];
+                  }
                   const { label, colour } = customFields[id];
-                  return { id, label, colour, value: entry.custom[id] };
+                  return [{ id, label, colour, value: entry.custom[id] }];
                 })
               : null;
 

apps/client/src/features/operator/operator-event/OperatorEvent.module.scss

@@ -30,7 +30,7 @@
 
   &.running {
     border-top: 1px solid $gray-1300;
-    background-color: var(--operator-running-bg-override, $red-700);
+    background-color: var(--operator-running-bg-override, $active-red);
   }
 
   &.past {
@@ -99,7 +99,6 @@
   display: flex;
   flex-wrap: wrap;
 
-
   .field {
     font-weight: 600;
     padding-inline: 0.25rem;

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

@@ -45,7 +45,7 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
     {
       id: 'hidepast',
       title: 'Hide Past Events',
-      description: 'Whether to events that have passed',
+      description: 'Whether to hide events that have passed',
       type: 'boolean',
       defaultValue: false,
     },

apps/client/src/features/operator/status-bar/StatusBarProgress.tsx

@@ -11,13 +11,12 @@ interface StatusBarProgressProps {
 
 export default function StatusBarProgress(props: StatusBarProgressProps) {
   const { viewSettings } = props;
-  const { addedTime, current, duration, timeWarning, timeDanger } = useProgressData();
+  const { current, duration, timeWarning, timeDanger } = useProgressData();
-  const totalTime = (duration ?? 0) + (addedTime ?? 0);
 
   return (
     <MultiPartProgressBar
       now={current}
-      complete={totalTime}
+      complete={duration}
       normalColor={viewSettings.normalColor}
       warning={timeWarning}
       warningColor={viewSettings.warningColor}

apps/client/src/features/overview/Overview.tsx

@@ -33,6 +33,7 @@ function _EditorOverview({ children }: { children: React.ReactNode }) {
             <TimeRow label='Actual start' value={formatedTime(actualStart)} className={style.start} />
           </div>
           <ProgressOverview />
+          <CurrentBlockOverview />
           <RuntimeOverview />
           <div>
             <TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
@@ -94,6 +95,14 @@ function TitlesOverview() {
   );
 }
 
+function CurrentBlockOverview() {
+  const { currentBlock, clock } = useRuntimePlaybackOverview();
+
+  const timeInBlock = formatedTime(currentBlock.startedAt === null ? null : clock - currentBlock.startedAt);
+
+  return <TimeColumn label='Time in block' value={timeInBlock} className={style.clock} />;
+}
+
 function TimerOverview() {
   const { current } = useTimer();
 

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

@@ -2,8 +2,24 @@ import { Fragment, lazy, useCallback, useEffect, useRef, useState } from 'react'
 import { closestCenter, DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { useHotkeys } from '@mantine/hooks';
-import { isOntimeEvent, MaybeNumber, Playback, RundownCached, SupportedEvent } from 'ontime-types';
+import {
-import { getFirstNormal, getLastNormal, getNextNormal, getPreviousNormal } from 'ontime-utils';
+  isOntimeBlock,
+  isOntimeEvent,
+  isPlayableEvent,
+  PlayableEvent,
+  Playback,
+  RundownCached,
+  SupportedEvent,
+} from 'ontime-types';
+import {
+  getFirstNormal,
+  getLastNormal,
+  getNextBlockNormal,
+  getNextNormal,
+  getPreviousBlockNormal,
+  getPreviousNormal,
+  isNewLatest,
+} from 'ontime-utils';
 
 import { useEventAction } from '../../common/hooks/useEventAction';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
@@ -98,28 +114,61 @@ export default function Rundown({ data }: RundownProps) {
     [rundown, order, addEvent],
   );
 
+  const selectBlock = useCallback(
+    (cursor: string | null, direction: 'up' | 'down') => {
+      if (order.length < 1) {
+        return;
+      }
+      let newCursor = cursor;
+      if (cursor === null) {
+        // there is no cursor, we select the first or last depending on direction
+        const selected = direction === 'up' ? getLastNormal(rundown, order) : getFirstNormal(rundown, order);
+
+        if (isOntimeBlock(selected)) {
+          setSelectedEvents({ id: selected.id, selectMode: 'click', index: direction === 'up' ? order.length : 0 });
+          return;
+        }
+        newCursor = selected?.id ?? null;
+      }
+
+      if (newCursor === null) {
+        return;
+      }
+
+      // otherwise we select the next or previous
+      const selected =
+        direction === 'up'
+          ? getPreviousBlockNormal(rundown, order, newCursor)
+          : getNextBlockNormal(rundown, order, newCursor);
+
+      if (selected.entry !== null && selected.index !== null) {
+        setSelectedEvents({ id: selected.entry.id, selectMode: 'click', index: selected.index });
+      }
+    },
+    [order, rundown, setSelectedEvents],
+  );
+
   const selectEntry = useCallback(
     (cursor: string | null, direction: 'up' | 'down') => {
       if (order.length < 1) {
         return;
       }
-      let newCursor: string | null;
+
-      let newIndex: number | null;
       if (cursor === null) {
         // there is no cursor, we select the first or last depending on direction if it exists
-        newCursor =
+        const selected = direction === 'up' ? getLastNormal(rundown, order) : getFirstNormal(rundown, order);
-          (direction === 'up' ? getLastNormal(rundown, order)?.id : getFirstNormal(rundown, order)?.id) ?? null;
+        if (selected !== null) {
-        newIndex = direction === 'up' ? order.length : 0;
+          setSelectedEvents({ id: selected.id, selectMode: 'click', index: direction === 'up' ? order.length : 0 });
-      } else {
+        }
-        // otherwise we select the next or previous
+        return;
-        const selected =
-          direction === 'up' ? getPreviousNormal(rundown, order, cursor) : getNextNormal(rundown, order, cursor);
-        newCursor = selected.entry?.id ?? null;
-        newIndex = selected.index;
       }
 
-      if (newCursor && newIndex !== null) {
+      // otherwise we select the next or previous
-        setSelectedEvents({ id: newCursor, selectMode: 'click', index: newIndex });
+      const selected =
+        direction === 'up' ? getPreviousNormal(rundown, order, cursor) : getNextNormal(rundown, order, cursor);
+
+      if (selected.entry !== null && selected.index !== null) {
+        setSelectedEvents({ id: selected.entry.id, selectMode: 'click', index: selected.index });
       }
     },
     [order, rundown, setSelectedEvents],
@@ -145,6 +194,10 @@ export default function Rundown({ data }: RundownProps) {
   useHotkeys([
     ['alt + ArrowDown', () => selectEntry(cursor, 'down'), { preventDefault: true }],
     ['alt + ArrowUp', () => selectEntry(cursor, 'up'), { preventDefault: true }],
+
+    ['alt + shift + ArrowDown', () => selectBlock(cursor, 'down'), { preventDefault: true }],
+    ['alt + shift + ArrowUp', () => selectBlock(cursor, 'up'), { preventDefault: true }],
+
     ['alt + mod + ArrowDown', () => moveEntry(cursor, 'down'), { preventDefault: true }],
     ['alt + mod + ArrowUp', () => moveEntry(cursor, 'up'), { preventDefault: true }],
 
@@ -203,11 +256,9 @@ export default function Rundown({ data }: RundownProps) {
     return <RundownEmpty handleAddNew={() => insertAtId(SupportedEvent.Event, cursor)} />;
   }
 
-  let previousStart: MaybeNumber = null;
+  let lastEntry: PlayableEvent | undefined; // used by indicators
-  let previousEnd: MaybeNumber = null;
+  let thisEntry: PlayableEvent | undefined;
   let previousEventId: string | undefined;
-  let thisStart: MaybeNumber = null;
-  let thisEnd: MaybeNumber = null;
   let thisId = previousEventId;
 
   let eventIndex = 0;
@@ -235,13 +286,14 @@ export default function Rundown({ data }: RundownProps) {
               if (isOntimeEvent(event)) {
                 // event indexes are 1 based in frontend
                 eventIndex++;
-                previousStart = thisStart;
-                previousEnd = thisEnd;
                 previousEventId = thisId;
+                lastEntry = thisEntry;
 
-                if (!event.skip) {
+                if (isPlayableEvent(event)) {
-                  thisStart = event.timeStart;
+                  // populate previous entry
-                  thisEnd = event.timeEnd;
+                  if (isNewLatest(event.timeStart, event.timeEnd, lastEntry?.timeStart, lastEntry?.timeEnd)) {
+                    thisEntry = event;
+                  }
                   thisId = eventId;
                 }
               }
@@ -268,8 +320,8 @@ export default function Rundown({ data }: RundownProps) {
                         loaded={isLoaded}
                         hasCursor={hasCursor}
                         isNext={isNext}
-                        previousStart={previousStart}
+                        previousStart={lastEntry?.timeStart}
-                        previousEnd={previousEnd}
+                        previousEnd={lastEntry?.timeEnd}
                         previousEventId={previousEventId}
                         playback={isLoaded ? featureData.playback : undefined}
                         isRolling={featureData.playback === Playback.Roll}

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

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { MaybeNumber, OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';
+import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';
 
 import { useEventAction } from '../../common/hooks/useEventAction';
 import useMemoisedFn from '../../common/hooks/useMemoisedFn';
@@ -32,8 +32,8 @@ interface RundownEntryProps {
   eventIndex: number;
   hasCursor: boolean;
   isNext: boolean;
-  previousStart: MaybeNumber;
+  previousStart?: number;
-  previousEnd: MaybeNumber;
+  previousEnd?: number;
   previousEventId?: string;
   playback?: Playback; // we only care about this if this event is playing
   isRolling: boolean; // we need to know even if not related to this event

apps/client/src/features/rundown/event-block/EventBlock.tsx

@@ -8,7 +8,7 @@ import { IoPeopleOutline } from '@react-icons/all-files/io5/IoPeopleOutline';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
 import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
-import { EndAction, MaybeNumber, MaybeString, OntimeEvent, Playback, TimerType, TimeStrategy } from 'ontime-types';
+import { EndAction, MaybeString, OntimeEvent, Playback, TimerType, TimeStrategy } from 'ontime-types';
 
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
@@ -36,8 +36,8 @@ interface EventBlockProps {
   title: string;
   note: string;
   delay: number;
-  previousStart: MaybeNumber;
+  previousStart?: number;
-  previousEnd: MaybeNumber;
+  previousEnd?: number;
   colour: string;
   isPast: boolean;
   isNext: boolean;

apps/client/src/features/rundown/event-block/EventBlock.utils.ts

@@ -1,5 +1,13 @@
-import { MaybeNumber } from 'ontime-types';
+import {
-import { checkIsNextDay, dayInMs, millisToString, removeLeadingZero, removeTrailingZero } from 'ontime-utils';
+  calculateDuration,
+  checkIsNextDay,
+  dayInMs,
+  getTimeFromPrevious,
+  millisToString,
+  removeTrailingZero,
+} from 'ontime-utils';
+
+import { formatDuration } from '../../../common/utils/time';
 
 export function formatDelay(timeStart: number, delay: number): string | undefined {
   if (!delay) return;
@@ -10,31 +18,24 @@ export function formatDelay(timeStart: number, delay: number): string | undefine
   return `New start ${timeTag}`;
 }
 
-export function formatOverlap(
+export function formatOverlap(timeStart: number, previousStart?: number, previousEnd?: number): string | undefined {
-  previousStart: MaybeNumber,
+  const noPreviousElement = previousEnd === undefined || previousStart === undefined;
-  previousEnd: MaybeNumber,
-  timeStart: number,
-): string | undefined {
-  const noPreviousElement = previousEnd === null || previousStart === null;
   if (noPreviousElement) return;
 
-  const overlap = previousEnd - timeStart;
+  const normalisedDuration = calculateDuration(previousStart, previousEnd);
-  if (overlap === 0) return;
+  const timeFromPrevious = getTimeFromPrevious(timeStart, previousStart, previousEnd, normalisedDuration);
+  if (timeFromPrevious === 0) return;
 
-  const previousCrossMidnight = previousStart > previousEnd;
+  if (checkIsNextDay(previousStart, timeStart, normalisedDuration)) {
-  const isNextDay = previousCrossMidnight
+    const previousCrossMidnight = previousStart > previousEnd;
-    ? checkIsNextDay(previousEnd, timeStart) || previousEnd == 0 // exception for when previousEnd is precisely midnight
+    const normalisedPreviousEnd = previousCrossMidnight ? previousEnd + dayInMs : previousEnd;
-    : checkIsNextDay(previousStart, timeStart);
 
-  const correctedPreviousEnd = previousCrossMidnight ? previousEnd + dayInMs : previousEnd;
+    const gap = dayInMs - normalisedPreviousEnd + timeStart;
-
-  if (isNextDay) {
-    const gap = dayInMs - correctedPreviousEnd + timeStart;
     if (gap === 0) return;
-    const gapString = removeLeadingZero(millisToString(Math.abs(gap)));
+    const gapString = formatDuration(Math.abs(gap), false);
     return `Gap ${gapString} (next day)`;
   }
 
-  const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));
+  const overlapString = formatDuration(Math.abs(timeFromPrevious), false);
-  return `${overlap > 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
+  return `${timeFromPrevious < 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
 }

apps/client/src/features/rundown/event-block/RundownIndicators.tsx

@@ -1,20 +1,18 @@
-import { MaybeNumber } from 'ontime-types';
-
 import { formatDelay, formatOverlap } from './EventBlock.utils';
 
 import style from './RundownIndicators.module.scss';
 
 interface RundownIndicatorProps {
   timeStart: number;
-  previousStart: MaybeNumber;
+  previousStart?: number;
-  previousEnd: MaybeNumber;
+  previousEnd?: number;
   delay: number;
 }
 
 export default function RundownIndicators(props: RundownIndicatorProps) {
   const { timeStart, previousStart, previousEnd, delay } = props;
 
-  const hasOverlap = formatOverlap(previousStart, previousEnd, timeStart);
+  const hasOverlap = formatOverlap(timeStart, previousStart, previousEnd);
   const hasDelay = formatDelay(timeStart, delay);
 
   return (

apps/client/src/features/rundown/event-block/__tests__/EventBlock.utils.test.ts

@@ -16,47 +16,63 @@ describe('formatOverlap()', () => {
     const previousStart = 0;
     const previousEnd = 60000; // 1 min
     const timeStart = 30000; // 30 sec
-    const result = formatOverlap(previousStart, previousEnd, timeStart);
+    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toEqual('Overlap 0:30');
+    expect(result).toEqual('Overlap 30s');
   });
 
   it('bug #949 recognises an overlap between two times', () => {
     const previousStart = 46800000; // 13:00:00
     const previousEnd = 48600000; // 13:30:00
     const timeStart = 48300000; // 13:25:00
-    const result = formatOverlap(previousStart, previousEnd, timeStart);
+    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toEqual('Overlap 5:00');
+    expect(result).toEqual('Overlap 5m');
   });
 
   it('handles events the day after, without overlap', () => {
     const previousStart = 11 * MILLIS_PER_HOUR;
     const previousEnd = 12 * MILLIS_PER_HOUR;
     const timeStart = 6 * MILLIS_PER_HOUR;
-    const result = formatOverlap(previousStart, previousEnd, timeStart);
+    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBe('Gap 18:00:00 (next day)');
+    expect(result).toBe('Gap 18h (next day)');
   });
 
   it('handles events the day after, with gap', () => {
     const previousStart = 17 * MILLIS_PER_HOUR;
     const previousEnd = 23 * MILLIS_PER_HOUR;
     const timeStart = 9 * MILLIS_PER_HOUR;
-    const result = formatOverlap(previousStart, previousEnd, timeStart);
+    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBe('Gap 10:00:00 (next day)');
+    expect(result).toBe('Gap 10h (next day)');
   });
 
   it('handles events the day after, with previous ending at midnight', () => {
     const previousStart = 23 * MILLIS_PER_HOUR; // 23:00:00
     const previousEnd = 0; // 00:00:00
     const timeStart = 1 * MILLIS_PER_HOUR; // 01:00:00
-    const result = formatOverlap(previousStart, previousEnd, timeStart);
+    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBe('Gap 01:00:00 (next day)');
+    expect(result).toBe('Gap 1h (next day)');
   });
 
-  it('handles events the day after, with previous ending over midnight', () => {
+  it('handles sequential events the day after, with previous ending over midnight', () => {
+    const previousStart = 23 * MILLIS_PER_HOUR;
+    const previousEnd = 1 * MILLIS_PER_HOUR;
+    const timeStart = 1 * MILLIS_PER_HOUR;
+    const result = formatOverlap(timeStart, previousStart, previousEnd);
+    expect(result).toBeUndefined();
+  });
+
+  it('handles events the day after, with previous ending over midnight with overlap', () => {
+    const previousStart = 23 * MILLIS_PER_HOUR;
+    const previousEnd = 2 * MILLIS_PER_HOUR;
+    const timeStart = 1 * MILLIS_PER_HOUR;
+    const result = formatOverlap(timeStart, previousStart, previousEnd);
+    expect(result).toBe('Overlap 1h');
+  });
+
+  it('handles events the day after, with previous ending over midnight with gap', () => {
     const previousStart = 23 * MILLIS_PER_HOUR;
     const previousEnd = 1 * MILLIS_PER_HOUR;
     const timeStart = 2 * MILLIS_PER_HOUR;
-    const result = formatOverlap(previousStart, previousEnd, timeStart);
+    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBe('Gap 01:00:00');
+    expect(result).toBe('Gap 1h');
   });
 });

apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.tsx

@@ -1,29 +1,12 @@
-import { MaybeNumber } from 'ontime-types';
-
 import { useTimer } from '../../../../common/hooks/useSocket';
-import { clamp } from '../../../../common/utils/math';
+import { getProgress } from '../../../../common/utils/getProgress';
 
 import style from './EventBlockProgressBar.module.scss';
 
-export function getPercentComplete(remaining: MaybeNumber, total: MaybeNumber): number {
-  if (remaining === null || total === null) {
-    return 0;
-  }
-
-  if (remaining <= 0) {
-    return 100;
-  }
-
-  if (remaining === total) {
-    return 0;
-  }
-
-  return clamp(100 - (remaining * 100) / total, 0, 100);
-}
-
 export default function EventBlockProgressBar() {
   const timer = useTimer();
 
-  const progress = `${getPercentComplete(timer.current, timer.duration)}%`;
+  const progress = getProgress(timer.current, timer.duration);
-  return <div className={style.progressBar} style={{ width: progress }} />;
+
+  return <div className={style.progressBar} style={{ width: `${progress}%` }} />;
 }

apps/client/src/features/rundown/event-block/composite/__tests__/EventBlockProgressBar.test.ts

@@ -1,27 +0,0 @@
-import { dayInMs } from 'ontime-utils';
-
-import { getPercentComplete } from '../EventBlockProgressBar';
-
-describe('getPercentComplete()', () => {
-  describe('calculates progress in normal cases', () => {
-    const testScenarios = [
-      { current: 0, duration: 0, expect: 100 },
-      { current: 0, duration: 100, expect: 100 },
-      { current: 0, duration: dayInMs, expect: 100 },
-      { current: 10, duration: 100, expect: 90 },
-      { current: 50, duration: 100, expect: 50 },
-      { current: 100, duration: 100, expect: 0 },
-    ];
-
-    testScenarios.forEach((testCase) => {
-      it(`handles ${testCase.current} / ${testCase.duration}`, () => {
-        const progress = getPercentComplete(testCase.current, testCase.duration);
-        expect(progress).toBe(testCase.expect);
-      });
-    });
-  });
-  it('is 0 if we dont have a current or duration', () => {
-    const progress = getPercentComplete(null, null);
-    expect(progress).toBe(0);
-  });
-});

apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss

@@ -28,6 +28,7 @@
     }
     td:nth-child(even) {
       text-align: right;
+      white-space: nowrap;
     }
   }
 }

apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx

@@ -24,6 +24,18 @@ function EventEditorEmpty() {
                 <Kbd>↓</Kbd>
               </td>
             </tr>
+            <tr>
+              <td>Select block</td>
+              <td>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>Shift</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>↑</Kbd>
+                <AuxKey>/</AuxKey>
+                <Kbd>↓</Kbd>
+              </td>
+            </tr>
             <tr>
               <td>Deselect entry</td>
               <td>

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -39,7 +39,7 @@ type WithDataProps = {
   publicSelectedId: string | null;
   runtime: Runtime;
   selectedId: string | null;
-  settings: Settings | undefined;
+  settings: Settings | undefined; // TODO: what is the case for this being undefined?
   time: ViewExtendedTimer;
   viewSettings: ViewSettings;
 };

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -94,7 +94,6 @@ export default function Backstage(props: BackstageProps) {
   let stageTimer = millisToString(time.current, { fallback: timerPlaceholderMin });
   stageTimer = removeLeadingZero(stageTimer);
 
-  const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0);
   const defaultFormat = getDefaultFormat(settings?.timeFormat);
   const backstageOptions = getBackstageOptions(defaultFormat, customFields);
 
@@ -111,8 +110,8 @@ export default function Backstage(props: BackstageProps) {
 
       <ProgressBar
         className='progress-container'
-        now={time.current ?? undefined}
+        current={time.current}
-        complete={totalTime}
+        duration={time.duration}
         hidden={!showProgress}
       />
 

apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts

@@ -14,18 +14,6 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
   });
 
   return [
-    { section: 'View behaviour' },
-    {
-      id: 'trigger',
-      title: 'Animation Trigger',
-      description: '',
-      type: 'option',
-      values: {
-        event: 'Event Load',
-        manual: 'Manual',
-      },
-      defaultValue: 'manual',
-    },
     { section: 'Data sources' },
     {
       id: 'top-src',

apps/client/src/features/viewers/studio/StudioClock.scss

@@ -42,6 +42,11 @@ $orange-active: #f60;
   grid-template-areas: 'clock schedule';
   text-transform: uppercase;
 
+  &.hide-right {
+    grid-template-columns: 1fr;
+    grid-template-areas: 'clock';
+  }
+
   .clock-container {
     grid-area: clock;
     display: grid;

apps/client/src/features/viewers/studio/StudioClock.tsx

@@ -1,7 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
-import type { OntimeEvent, OntimeRundown, Settings, ViewSettings } from 'ontime-types';
+import type { MaybeString, OntimeEvent, OntimeRundown, Settings, ViewSettings } from 'ontime-types';
-import { isOntimeEvent, Playback } from 'ontime-types';
+import { Playback } from 'ontime-types';
-import { millisToString, removeSeconds } from 'ontime-utils';
+import { millisToString, removeSeconds, secondsInMillis } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
@@ -10,11 +10,10 @@ import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
-import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { isStringBoolean } from '../common/viewUtils';
 
 import { getStudioClockOptions } from './studioClock.options';
-import { secondsInMillis, trimRundown } from './studioClock.utils';
+import StudioClockSchedule from './StudioClockSchedule';
 
 import './StudioClock.scss';
 
@@ -23,8 +22,8 @@ interface StudioClockProps {
   eventNext: OntimeEvent | null;
   time: ViewExtendedTimer;
   backstageEvents: OntimeRundown;
-  selectedId: string | null;
+  selectedId: MaybeString;
-  nextId: string | null;
+  nextId: MaybeString;
   onAir: boolean;
   viewSettings: ViewSettings;
   settings: Settings | undefined;
@@ -38,16 +37,13 @@ export default function StudioClock(props: StudioClockProps) {
   useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { fontSize: titleFontSize, ref: titleRef } = useFitText({ minFontSize: 150, maxFontSize: 500 });
 
-  const activeIndicators = [...Array(12).keys()];
-  const secondsIndicators = [...Array(60).keys()];
-
-  // TODO: fit titles on screen
-  const MAX_TITLES = 11;
-
   const [searchParams] = useSearchParams();
 
   useWindowTitle('Studio Clock');
 
+  const activeIndicators = [...Array(12).keys()];
+  const secondsIndicators = [...Array(60).keys()];
+
   let clock = formatTime(time.clock);
   let hasAmPm = '';
   if (clock.includes('AM')) {
@@ -65,8 +61,7 @@ export default function StudioClock(props: StudioClockProps) {
   const defaultFormat = getDefaultFormat(settings?.timeFormat);
   const studioClockOptions = getStudioClockOptions(defaultFormat);
 
-  const delayed = backstageEvents.filter((event) => isOntimeEvent(event)) as OntimeEvent[];
+  const hideRight = isStringBoolean(searchParams.get('hideRight'));
-  const trimmedRundown = trimRundown(delayed, selectedId, MAX_TITLES);
   let timer = millisToString(time.current, { fallback: '---' });
   const hideSeconds = isStringBoolean(searchParams.get('hideTimerSeconds'));
   if (time.current != null && hideSeconds) {
@@ -74,7 +69,10 @@ export default function StudioClock(props: StudioClockProps) {
   }
 
   return (
-    <div className={`studio-clock ${isMirrored ? 'mirror' : ''}`} data-testid='studio-view'>
+    <div
+      className={`studio-clock ${isMirrored ? 'mirror' : ''} ${hideRight ? 'hide-right' : ''}`}
+      data-testid='studio-view'
+    >
       <ViewParamsEditor viewOptions={studioClockOptions} />
       <div className='clock-container'>
         {hasAmPm && <div className='clock__ampm'>{hasAmPm}</div>}
@@ -114,31 +112,9 @@ export default function StudioClock(props: StudioClockProps) {
           ))}
         </div>
       </div>
-      <div className='schedule-container'>
+      {!hideRight && (
-        <div
+        <StudioClockSchedule rundown={backstageEvents} selectedId={selectedId} nextId={nextId} onAir={onAir} />
-          className={onAir ? 'onAir' : 'onAir onAir--idle'}
+      )}
-          data-testid={onAir ? 'on-air-enabled' : 'on-air-disabled'}
-        >
-          ON AIR
-        </div>
-        <ul className='schedule'>
-          {trimmedRundown.map((event) => {
-            const start = formatTime(event.timeStart + (event?.delay ?? 0), { format12: 'h:mm a', format24: 'HH:mm' });
-            const isSelected = event.id === selectedId;
-            const isNext = event.id === nextId;
-            const classes = `schedule__item schedule__item${isSelected ? '--now' : isNext ? '--next' : '--future'}`;
-            return (
-              <li key={event.id} className={classes}>
-                <span className='event'>
-                  <span className='event__colour' style={{ backgroundColor: `${event.colour}` }} />
-                  <SuperscriptTime time={start} />
-                </span>
-                <span>{event.title}</span>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
     </div>
   );
 }

apps/client/src/features/viewers/studio/StudioClockSchedule.tsx

@@ -0,0 +1,50 @@
+import { isOntimeEvent, MaybeString, OntimeEvent, OntimeRundown } from 'ontime-types';
+
+import { formatTime } from '../../../common/utils/time';
+import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
+
+import { trimRundown } from './studioClock.utils';
+
+import './StudioClock.scss';
+
+interface StudioClockScheduleProps {
+  rundown: OntimeRundown;
+  selectedId: MaybeString;
+  nextId: MaybeString;
+  onAir: boolean;
+}
+
+// TODO: fit titles on screen
+const MAX_TITLES = 11;
+
+export default function StudioClockSchedule(props: StudioClockScheduleProps) {
+  const { rundown, selectedId, nextId, onAir } = props;
+
+  const delayed = rundown.filter((event) => isOntimeEvent(event)) as OntimeEvent[];
+  const trimmedRundown = trimRundown(delayed, selectedId, MAX_TITLES);
+
+  return (
+    <div className='schedule-container'>
+      <div className={onAir ? 'onAir' : 'onAir onAir--idle'} data-testid={onAir ? 'on-air-enabled' : 'on-air-disabled'}>
+        ON AIR
+      </div>
+      <ul className='schedule'>
+        {trimmedRundown.map((event) => {
+          const start = formatTime(event.timeStart + (event?.delay ?? 0), { format12: 'h:mm a', format24: 'HH:mm' });
+          const isSelected = event.id === selectedId;
+          const isNext = event.id === nextId;
+          const classes = `schedule__item schedule__item${isSelected ? '--now' : isNext ? '--next' : '--future'}`;
+          return (
+            <li key={event.id} className={classes}>
+              <span className='event'>
+                <span className='event__colour' style={{ backgroundColor: `${event.colour}` }} />
+                <SuperscriptTime time={start} />
+              </span>
+              <span>{event.title}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

apps/client/src/features/viewers/studio/__tests__/studioClock.utils.test.ts

@@ -1,6 +1,6 @@
 import { OntimeEvent } from 'ontime-types';
 
-import { secondsInMillis, trimRundown } from '../studioClock.utils';
+import { trimRundown } from '../studioClock.utils';
 
 describe('test trimEventlist function', () => {
   const limit = 8;
@@ -118,14 +118,3 @@ describe('test trimEventlist function', () => {
     expect(l).toStrictEqual(expected);
   });
 });
-
-describe('secondsInMillis()', () => {
-  it('return 0 if value is null', () => {
-    expect(secondsInMillis(null)).toBe(0);
-  });
-  it('returns the seconds value of a millis date', () => {
-    const date = 1686255053619; // Thu Jun 08 2023 20:10:53
-    const seconds = secondsInMillis(date);
-    expect(seconds).toBe(53);
-  });
-});

apps/client/src/features/viewers/studio/studioClock.options.ts

@@ -6,4 +6,12 @@ export const getStudioClockOptions = (timeFormat: string): ViewOption[] => [
   getTimeOption(timeFormat),
   { section: 'Timer Options' },
   hideTimerSeconds,
+  { section: 'Element visibility' },
+  {
+    id: 'hideRight',
+    title: 'Hide right section',
+    description: 'Hides the right section with On Air indicator and the schedule',
+    type: 'boolean',
+    defaultValue: false,
+  },
 ];

apps/client/src/features/viewers/studio/studioClock.utils.ts

@@ -1,5 +1,4 @@
-import { MaybeNumber, OntimeEvent } from 'ontime-types';
+import { OntimeEvent } from 'ontime-types';
-import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
 
 /**
  * @description Returns trimmed event list array
@@ -20,15 +19,3 @@ export function trimRundown(rundown: OntimeEvent[], selectedId: string | null, l
   const trimmedRundown = rundown.slice(startIndex, endIndex);
   return trimmedRundown;
 }
-
-/**
- * @description Returns amount of seconds in a date given in milliseconds. For studio clock second indicator
- * @param {MaybeNumber} millis time to format
- * @returns amount of elapsed seconds
- */
-export function secondsInMillis(millis: MaybeNumber): number {
-  if (!millis) {
-    return 0;
-  }
-  return Math.floor((millis % MILLIS_PER_MINUTE) / MILLIS_PER_SECOND);
-}

apps/client/src/features/viewers/timeline/Timeline.module.scss

@@ -0,0 +1,112 @@
+@use '../../../theme/viewerDefs' as *;
+
+$timeline-entry-height: 20px;
+$lane-height: 120px;
+$timeline-height: 1rem;
+
+.timeline {
+  flex: 1;
+  font-weight: 600;
+  color: $ui-white;
+  background-color: $ui-black;
+}
+
+.timelineEvents {
+  position: relative;
+  height: 100%;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  border-left: 1px solid $ui-black;
+  // avoiding content being larger than the view
+  height: calc(100% - 3rem);
+
+  // decorate timeline element
+  &::before {
+    content: '';
+    position: absolute;
+    box-sizing: content-box;
+    top: -$timeline-height;
+    left: 0;
+    right: 0;
+    height: $timeline-height;
+    background-color: $white-40;
+  }
+}
+
+.smallArea {
+  .content {
+    gap: 0rem;
+    writing-mode: vertical-rl;
+  }
+
+  .timeOverview {
+    opacity: 0;
+  }
+}
+
+.hide {
+  // hide text elements
+  & > div {
+    display: none;
+  }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding-top: 0.25rem;
+  padding-inline-start: 0.25rem;
+  overflow: hidden;
+  line-height: 1rem;
+
+  background-color: var(--lighter, $viewer-card-bg-color);
+  border-bottom: 2px solid $ui-black;
+  box-shadow: 0 0.25rem 0 0 var(--color, $gray-300);
+
+  &[data-status='done'] {
+    opacity: $opacity-disabled;
+  }
+
+  &[data-status='live'] {
+    box-shadow: 0 0.25rem 0 0 $active-red;
+  }
+}
+
+.delay {
+  margin-top: -2rem;
+  margin-bottom: -1rem;
+}
+
+.timeOverview {
+  padding-top: 0.25rem;
+  padding-inline-start: 0.25em;
+  text-transform: capitalize;
+  white-space: normal;
+  height: 6rem;
+
+  &[data-status='done'] {
+    opacity: $opacity-disabled;
+  }
+
+  &[data-status='live'] {
+    .status {
+      color: $active-red;
+    }
+  }
+
+  &[data-status='future'] {
+    .status {
+      color: $green-500;
+    }
+  }
+}
+
+.cross {
+  text-decoration: line-through;
+}

apps/client/src/features/viewers/timeline/Timeline.tsx

@@ -0,0 +1,96 @@
+import { memo } from 'react';
+import { useViewportSize } from '@mantine/hooks';
+import { isOntimeEvent, MaybeNumber, OntimeEvent } from 'ontime-types';
+import { checkIsNextDay, dayInMs, getLastEvent, MILLIS_PER_HOUR } from 'ontime-utils';
+
+import { useTimelineOverview } from '../../../common/hooks/useSocket';
+
+import TimelineMarkers from './timeline-markers/TimelineMarkers';
+import ProgressBar from './timeline-progress-bar/TimelineProgressBar';
+import { getElementPosition, getEndHour, getStartHour } from './timeline.utils';
+import { ProgressStatus, TimelineEntry } from './TimelineEntry';
+
+import style from './Timeline.module.scss';
+
+interface TimelineProps {
+  selectedEventId: string | null;
+  rundown: OntimeEvent[];
+}
+
+export default memo(Timeline);
+
+function Timeline(props: TimelineProps) {
+  const { selectedEventId, rundown } = props;
+  const { width: screenWidth } = useViewportSize();
+  const { plannedStart, plannedEnd } = useTimelineOverview();
+
+  if (plannedStart === null || plannedEnd === null) {
+    return null;
+  }
+
+  const { lastEvent } = getLastEvent(rundown);
+  const startHour = getStartHour(plannedStart);
+  const endHour = getEndHour(plannedEnd + (lastEvent?.delay ?? 0));
+
+  let hasTimelinePassedMidnight = false;
+  let previousEventStartTime: MaybeNumber = null;
+  // we use selectedEventId as a signifier on whether the timeline is live
+  let eventStatus: ProgressStatus = selectedEventId ? 'done' : 'future';
+
+  return (
+    <div className={style.timeline}>
+      <TimelineMarkers startHour={startHour} endHour={endHour} />
+      <ProgressBar startHour={startHour} endHour={endHour} />
+      <div className={style.timelineEvents}>
+        {rundown.map((event) => {
+          // for now we dont render delays and blocks
+          if (!isOntimeEvent(event)) {
+            return null;
+          }
+
+          // keep track of progress of rundown
+          if (eventStatus === 'live') {
+            eventStatus = 'future';
+          }
+          if (event.id === selectedEventId) {
+            eventStatus = 'live';
+          }
+
+          if (!hasTimelinePassedMidnight) {
+            // we need to offset the start to account for midnight
+            hasTimelinePassedMidnight = previousEventStartTime !== null && event.timeStart < previousEventStartTime;
+          }
+          // TODO: timeline must accumulate normalised time over days
+          const isNextDay =
+            previousEventStartTime !== null
+              ? checkIsNextDay(previousEventStartTime, event.timeStart, event.duration)
+              : false;
+          const normalisedStart = hasTimelinePassedMidnight || isNextDay ? event.timeStart + dayInMs : event.timeStart;
+          previousEventStartTime = normalisedStart;
+
+          const { left: elementLeftPosition, width: elementWidth } = getElementPosition(
+            startHour * MILLIS_PER_HOUR,
+            endHour * MILLIS_PER_HOUR,
+            normalisedStart + (event.delay ?? 0),
+            event.duration,
+            screenWidth,
+          );
+
+          return (
+            <TimelineEntry
+              key={event.id}
+              colour={event.colour}
+              delay={event.delay ?? 0}
+              duration={event.duration}
+              left={elementLeftPosition}
+              status={eventStatus}
+              start={normalisedStart} // dataset solves issues related to crossing midnight
+              title={event.title}
+              width={elementWidth}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/client/src/features/viewers/timeline/TimelineEntry.tsx

@@ -0,0 +1,94 @@
+import { useTimelineStatus } from '../../../common/hooks/useSocket';
+import { alpha, cx } from '../../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../../common/utils/time';
+import { useTranslation } from '../../../translation/TranslationProvider';
+
+import { getStatusLabel } from './timeline.utils';
+
+import style from './Timeline.module.scss';
+
+export type ProgressStatus = 'done' | 'live' | 'future';
+
+interface TimelineEntryProps {
+  colour: string;
+  delay: number;
+  duration: number;
+  left: number;
+  status: ProgressStatus;
+  start: number;
+  title: string;
+  width: number;
+}
+
+const formatOptions = {
+  format12: 'hh:mm a',
+  format24: 'HH:mm',
+};
+
+export function TimelineEntry(props: TimelineEntryProps) {
+  const { colour, delay, duration, left, status, start, title, width } = props;
+
+  const formattedStartTime = formatTime(start, formatOptions);
+  const formattedDuration = formatDuration(duration);
+  const delayedStart = start + delay;
+  const hasDelay = delay > 0;
+
+  const lighterColour = alpha(colour, 0.7);
+  const columnClasses = cx([style.column, width < 40 && style.smallArea]);
+  const contentClasses = cx([style.content, width < 20 && style.hide]);
+  const showTitle = width > 25;
+
+  return (
+    <div
+      className={columnClasses}
+      style={{
+        '--color': colour,
+        '--lighter': lighterColour ?? '',
+        left: `${left}px`,
+        width: `${width}px`,
+      }}
+    >
+      <div
+        className={contentClasses}
+        data-status={status}
+        style={{
+          '--color': colour,
+        }}
+      >
+        <div className={hasDelay ? style.cross : undefined}>{formattedStartTime}</div>
+        {hasDelay && <div className={style.delay}>{formatTime(delayedStart, formatOptions)}</div>}
+        {showTitle && <div>{title}</div>}
+      </div>
+      <div className={style.timeOverview} data-status={status}>
+        {status !== 'done' && (
+          <>
+            <div className={style.duration}>{formattedDuration}</div>
+            <TimelineEntryStatus status={status} start={delayedStart} />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface TimelineEntryStatusProps {
+  status: ProgressStatus;
+  start: number;
+}
+
+// we isolate this component to avoid isolate re-renders provoked by the clock changes
+function TimelineEntryStatus(props: TimelineEntryStatusProps) {
+  const { status, start } = props;
+  const { clock, offset } = useTimelineStatus();
+  const { getLocalizedString } = useTranslation();
+
+  // start times need to be normalised in a rundown that crosses midnight
+  let statusText = getStatusLabel(start - clock + offset, status);
+  if (statusText === 'live') {
+    statusText = getLocalizedString('timeline.live');
+  } else if (statusText === 'pending') {
+    statusText = getLocalizedString('timeline.due');
+  }
+
+  return <div className={style.status}>{statusText}</div>;
+}

apps/client/src/features/viewers/timeline/TimelinePage.scss

@@ -0,0 +1,101 @@
+@use '../../../theme/viewerDefs' as *;
+
+.timeline {
+  width: 100vw;
+  height: 100vh;
+  padding-top: 0.5rem;
+
+  font-family: var(--font-family-override, $viewer-font-family);
+  background: var(--background-color-override, $viewer-background-color);
+  color: var(--color-override, $viewer-color);
+
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  .project-header {
+    padding-inline: 2rem;
+    font-size: clamp(32px, 4.5vw, 64px);
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .clock-container {
+    .label {
+      font-size: clamp(16px, 1.5vw, 24px);
+      font-weight: 600;
+      color: var(--label-color-override, $viewer-label-color);
+      text-transform: uppercase;
+    }
+
+    .time {
+      font-size: clamp(32px, 3.5vw, 50px);
+      font-weight: 600;
+      color: var(--secondary-color-override, $viewer-secondary-color);
+      letter-spacing: 0.05em;
+      line-height: 0.95em;
+    }
+  }
+
+  .title-grid {
+    display: grid;
+    grid-template-columns: 2fr 3fr;
+    row-gap: 1rem;
+    column-gap: 2rem;
+    grid-template-areas:
+      'now next'
+      'now following';
+    padding-inline: 2rem;
+  }
+
+  .section {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+    padding: 0.5rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    border-radius: $element-border-radius;
+  }
+
+  .section--now {
+    grid-area: now;
+  }
+
+  .section-title {
+    line-height: 1em;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 600;
+  }
+
+  .section-title__label {
+    text-transform: uppercase;
+  }
+
+  .section-title__status {
+    color: $green-500;
+  }
+
+  .section-content {
+    min-height: 2em;
+    line-height: 1em;
+    font-size: 3rem;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
+  .section-content--now {
+    color: $red-500;
+  }
+
+  .section-content--next {
+    color: $green-500;
+  }
+
+  .section-content--subdue {
+    opacity: $opacity-disabled;
+  }
+}

apps/client/src/features/viewers/timeline/TimelinePage.tsx

@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+import { MaybeString, OntimeEvent, ProjectData, Settings, ViewSettings } from 'ontime-types';
+
+import { overrideStylesURL } from '../../../common/api/constants';
+import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
+import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
+import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
+import { formatTime, getDefaultFormat } from '../../../common/utils/time';
+import { useTranslation } from '../../../translation/TranslationProvider';
+import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
+
+import Section from './timeline-section/TimelineSection';
+import Timeline from './Timeline';
+import { getTimelineOptions } from './timeline.options';
+import { getFormattedTimeToStart, getScopedRundown, getUpcomingEvents } from './timeline.utils';
+
+import './TimelinePage.scss';
+
+interface TimelinePageProps {
+  backstageEvents: OntimeEvent[];
+  general: ProjectData;
+  selectedId: MaybeString;
+  settings: Settings | undefined;
+  time: ViewExtendedTimer;
+  viewSettings: ViewSettings;
+}
+
+/**
+ * since we inherit from viewPage
+ * which refreshes at least once a second
+ * There is little point splitting or memoising top level elements
+ */
+export default function TimelinePage(props: TimelinePageProps) {
+  const { backstageEvents, general, selectedId, settings, time, viewSettings } = props;
+  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
+
+  const { getLocalizedString } = useTranslation();
+  const clock = formatTime(time.clock);
+
+  // holds copy of the rundown with only relevant events
+  const scopedRundown = useMemo(() => {
+    return getScopedRundown(backstageEvents, selectedId);
+  }, [backstageEvents, selectedId]);
+
+  const { now, next, followedBy } = useMemo(() => {
+    return getUpcomingEvents(scopedRundown, selectedId);
+  }, [scopedRundown, selectedId]);
+
+  useWindowTitle('Timeline');
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  // populate options
+  const defaultFormat = getDefaultFormat(settings?.timeFormat);
+  const progressOptions = getTimelineOptions(defaultFormat);
+
+  const titleNow = now?.title ?? '-';
+  const dueText = getLocalizedString('timeline.due').toUpperCase();
+  const nextText = next !== null ? next.title : '-';
+  const followedByText = followedBy !== null ? followedBy.title : '-';
+
+  const nextStatus = next !== null ? getFormattedTimeToStart(next, time.clock, dueText) : undefined;
+  const followedByStatus = followedBy !== null ? getFormattedTimeToStart(followedBy, time.clock, dueText) : undefined;
+
+  return (
+    <div className='timeline'>
+      <ViewParamsEditor viewOptions={progressOptions} />
+      <div className='project-header'>
+        {general.title}
+        <div className='clock-container'>
+          <div className='label'>{getLocalizedString('common.time_now')}</div>
+          <SuperscriptTime time={clock} className='time' />
+        </div>
+      </div>
+
+      <div className='title-grid'>
+        <Section title={getLocalizedString('timeline.live')} content={titleNow} category='now' />
+        <Section title={getLocalizedString('common.next')} status={nextStatus} content={nextText} category='next' />
+        <Section
+          title={getLocalizedString('timeline.followedby')}
+          status={followedByStatus}
+          content={followedByText}
+          category='next'
+        />
+      </div>
+      <Timeline selectedEventId={selectedId} rundown={scopedRundown} />
+    </div>
+  );
+}

apps/client/src/features/viewers/timeline/__tests__/timeline.utils.test.ts

@@ -0,0 +1,66 @@
+import { dayInMs } from 'ontime-utils';
+
+import { getElementPosition, makeTimelineSections } from '../timeline.utils';
+
+describe('getCSSPosition()', () => {
+  it('accounts for rundown with one event', () => {
+    const scheduleStart = 0;
+    const scheduleEnd = dayInMs;
+    const eventStart = 0;
+    const eventDuration = dayInMs;
+    const containerWidth = 100;
+
+    const result = getElementPosition(scheduleStart, scheduleEnd, eventStart, eventDuration, containerWidth);
+    expect(result.left).toBe(0);
+    expect(result.width).toBe(containerWidth);
+  });
+
+  it('accounts for an event that starts halfway and ends at end', () => {
+    const scheduleStart = 0;
+    const scheduleEnd = 100;
+    const eventStart = 50;
+    const eventDuration = 50;
+    const containerWidth = 100;
+
+    const result = getElementPosition(scheduleStart, scheduleEnd, eventStart, eventDuration, containerWidth);
+    expect(result.left).toBe(50);
+    expect(result.width).toBe(50);
+  });
+
+  it('accounts for an event that starts first and ends halfway', () => {
+    const scheduleStart = 0;
+    const scheduleEnd = 100;
+    const eventStart = 0;
+    const eventDuration = 50;
+    const containerWidth = 100;
+
+    const result = getElementPosition(scheduleStart, scheduleEnd, eventStart, eventDuration, containerWidth);
+    expect(result.left).toBe(0);
+    expect(result.width).toBe(50);
+  });
+
+  it('accounts for an event that is in the middle of the rundown', () => {
+    const scheduleStart = 7;
+    const scheduleEnd = 23;
+    const eventStart = 10;
+    const eventDuration = 1;
+    const containerWidth = 1000;
+
+    // 16 hour event, this gives 62.5px per hour
+    const result = getElementPosition(scheduleStart, scheduleEnd, eventStart, eventDuration, containerWidth);
+    expect(result.left).toBe(187.5); // 3 * 62.5
+    expect(result.width).toBe(62.5);
+  });
+});
+
+describe('makeTmelineSections', () => {
+  it('creates an array between the hours given, end excluded', () => {
+    const result = makeTimelineSections(11, 17);
+    expect(result).toEqual(['11:00', '12:00', '13:00', '14:00', '15:00', '16:00']);
+  });
+
+  it('wraps around midnight', () => {
+    const result = makeTimelineSections(22, 26);
+    expect(result).toEqual(['22:00', '23:00', '00:00', '01:00']);
+  });
+});

apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.module.scss

@@ -0,0 +1,16 @@
+.markers {
+  width: 100%;
+  color: $ui-white;
+  display: flex;
+  height: 1rem;
+  line-height: 1rem;
+  margin-bottom: 0.25rem;
+  font-size: calc(1rem - 2px);
+  justify-content: space-evenly;
+
+  & > span {
+    flex-grow: 1;
+    border-left: 1px solid $white-7;
+    height: 100vh;
+  }
+}

apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.tsx

@@ -0,0 +1,22 @@
+import { makeTimelineSections } from '../timeline.utils';
+
+import style from './TimelineMarkers.module.scss';
+
+interface TimelineMarkersProps {
+  startHour: number;
+  endHour: number;
+}
+
+export default function TimelineMarkers(props: TimelineMarkersProps) {
+  const { startHour, endHour } = props;
+
+  const elements = makeTimelineSections(startHour, endHour);
+
+  return (
+    <div className={style.markers}>
+      {elements.map((tag, index) => {
+        return <span key={`${index}-${tag}`}>{tag}</span>;
+      })}
+    </div>
+  );
+}

apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.module.scss

@@ -0,0 +1,19 @@
+.progressBar {
+  width: 100%;
+  height: 1rem;
+  position: relative;
+
+  background-color: $gray-1000;
+}
+
+.progress {
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  
+  background-color: $active-red;
+  transition-duration: 0.3s; 
+  transition-property: width;
+}

apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.tsx

@@ -0,0 +1,25 @@
+import { MILLIS_PER_HOUR } from 'ontime-utils';
+
+import { useClock } from '../../../../common/hooks/useSocket';
+import { getRelativePositionX } from '../timeline.utils';
+
+import style from './TimelineProgressBar.module.scss';
+
+interface ProgressBarProps {
+  startHour: number;
+  endHour: number;
+}
+
+export default function ProgressBar(props: ProgressBarProps) {
+  const { startHour, endHour } = props;
+  // TODO: how to account for days?
+  const { clock } = useClock();
+
+  const width = getRelativePositionX(startHour * MILLIS_PER_HOUR, endHour * MILLIS_PER_HOUR, clock);
+
+  return (
+    <div className={style.progressBar}>
+      <div className={style.progress} style={{ width: `${width}%` }} />
+    </div>
+  );
+}

apps/client/src/features/viewers/timeline/timeline-section/TimelineSection.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import { MaybeString } from 'ontime-types';
+
+import { cx } from '../../../../common/utils/styleUtils';
+
+interface SectionProps {
+  category: 'now' | 'next';
+  content: MaybeString;
+  title: string;
+  status?: string;
+}
+
+export default memo(Section);
+
+export function Section(props: SectionProps) {
+  const { category, content, title, status } = props;
+
+  const sectionClasses = cx(['section', category === 'now' && 'section--now']);
+  const contentClasses = cx(['section-content', content ? `section-content--${category}` : 'section-content--subdue']);
+  return (
+    <div className={sectionClasses}>
+      <div className='section-title'>
+        <span className='section-title__label'>{title}</span>
+        {status && <span className='section-title__status'>{status}</span>}
+      </div>
+      <div className={contentClasses}>{content ?? '-'}</div>
+    </div>
+  );
+}

apps/client/src/features/viewers/timeline/timeline.options.ts

@@ -0,0 +1,22 @@
+import { getTimeOption } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
+  return [
+    getTimeOption(timeFormat),
+    {
+      id: 'hidePast',
+      title: 'Hide Past Events',
+      description: 'Whether to hide events that have passed',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'hideBackstage',
+      title: 'Hide Private Events',
+      description: 'Whether to hide non-public events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ];
+};

apps/client/src/features/viewers/timeline/timeline.utils.ts

@@ -0,0 +1,154 @@
+import { isOntimeEvent, MaybeString, OntimeEvent } from 'ontime-types';
+import {
+  dayInMs,
+  getEventWithId,
+  getFirstEvent,
+  getNextEvent,
+  MILLIS_PER_HOUR,
+  millisToString,
+  removeSeconds,
+} from 'ontime-utils';
+
+import { clamp } from '../../../common/utils/math';
+import { formatDuration } from '../../../common/utils/time';
+import { isStringBoolean } from '../common/viewUtils';
+
+import type { ProgressStatus } from './TimelineEntry';
+
+type CSSPosition = {
+  left: number;
+  width: number;
+};
+
+/**
+ * Calculates the position (in %) of an element relative to a schedule
+ */
+export function getRelativePositionX(scheduleStart: number, scheduleEnd: number, now: number): number {
+  return clamp(((now - scheduleStart) / (scheduleEnd - scheduleStart)) * 100, 0, 100);
+}
+
+/**
+ * Calculates an absolute position of an element based on a schedule
+ */
+export function getElementPosition(
+  scheduleStart: number,
+  scheduleEnd: number,
+  eventStart: number,
+  eventDuration: number,
+  containerWidth: number,
+): CSSPosition {
+  const normalEnd = scheduleEnd < scheduleStart ? scheduleEnd + dayInMs : scheduleEnd;
+  const totalDuration = normalEnd - scheduleStart;
+  const width = (eventDuration * containerWidth) / totalDuration;
+  const left = ((eventStart - scheduleStart) * containerWidth) / totalDuration;
+
+  return { left, width };
+}
+
+/**
+ * Gets rounded down hour for a given time
+ */
+export function getStartHour(startTime: number): number {
+  const hours = Math.floor(startTime / MILLIS_PER_HOUR);
+  return hours;
+}
+
+/**
+ * Gets rounded up hour for a given time
+ */
+export function getEndHour(endTime: number): number {
+  const hours = Math.ceil(endTime / MILLIS_PER_HOUR);
+  return hours;
+}
+
+/**
+ * converts a time span into an array of hours
+ */
+export function makeTimelineSections(firstHour: number, lastHour: number) {
+  const timelineSections = [];
+  for (let i = firstHour; i < lastHour; i++) {
+    timelineSections.push(removeSeconds(millisToString((i % 24) * MILLIS_PER_HOUR)));
+  }
+  return timelineSections;
+}
+
+/**
+ * Returns a formatted label for a progress status
+ */
+export function getStatusLabel(timeToStart: number, status: ProgressStatus): string {
+  if (status === 'done' || status === 'live') {
+    return status;
+  }
+
+  if (timeToStart < 0) {
+    return 'pending';
+  }
+
+  return formatDuration(timeToStart);
+}
+
+export function getScopedRundown(rundown: OntimeEvent[], selectedEventId: MaybeString): OntimeEvent[] {
+  if (rundown.length === 0) {
+    return [];
+  }
+
+  const params = new URL(document.location.href).searchParams;
+  const hideBackstage = isStringBoolean(params.get('hideBackstage'));
+  const hidePast = isStringBoolean(params.get('hidePast'));
+
+  let scopedRundown = [...rundown];
+
+  if (hidePast && selectedEventId) {
+    const currentIndex = rundown.findIndex((event) => event.id === selectedEventId);
+    if (currentIndex >= 0) {
+      scopedRundown = scopedRundown.slice(currentIndex);
+    }
+  }
+
+  if (hideBackstage) {
+    scopedRundown = scopedRundown.filter((event) => event.isPublic);
+  }
+
+  return scopedRundown;
+}
+
+type UpcomingEvents = {
+  now: OntimeEvent | null;
+  next: OntimeEvent | null;
+  followedBy: OntimeEvent | null;
+};
+
+/**
+ * Returns upcoming events from current: now, next and followedBy
+ */
+export function getUpcomingEvents(events: OntimeEvent[], selectedId: MaybeString): UpcomingEvents {
+  if (events.length === 0) {
+    return { now: null, next: null, followedBy: null };
+  }
+
+  const now = selectedId ? getEventWithId(events, selectedId) : getFirstEvent(events)?.firstEvent;
+
+  if (!isOntimeEvent(now)) {
+    return { now: null, next: null, followedBy: null };
+  }
+
+  const next = getNextEvent(events, now.id)?.nextEvent;
+  const followedBy = next ? getNextEvent(events, next.id)?.nextEvent : null;
+
+  // Return the titles, handling nulls appropriately
+  return {
+    now,
+    next,
+    followedBy,
+  };
+}
+
+export function getFormattedTimeToStart(event: OntimeEvent, now: number, dueText: string): string {
+  const timeToStart = event.timeStart - now;
+
+  if (timeToStart < 0) {
+    return dueText;
+  }
+
+  return `T - ${formatDuration(timeToStart)}`;
+}

apps/client/src/index.tsx

@@ -1,51 +1,13 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
-import * as Sentry from '@sentry/react';
 
 import App from './App';
-import { ONTIME_VERSION } from './ONTIME_VERSION';
 
 import './index.scss';
 
 const container = document.getElementById('root');
 const root = createRoot(container as Element);
 
-// https://docs.sentry.io/platforms/javascript/configuration/filtering/#decluttering-sentry
-const sentryRecommendedIgnore = [
-  // Random plugins/extensions
-  'top.GLOBALS',
-  // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
-  'originalCreateNotification',
-  'canvas.contentDocument',
-  'MyApp_RemoveAllHighlights',
-  'http://tt.epicplay.com',
-  "Can't find variable: ZiteReader",
-  'jigsaw is not defined',
-  'ComboSearch is not defined',
-  'http://loading.retry.widdit.com/',
-  'atomicFindClose',
-  // Facebook borked
-  'fb_xd_fragment',
-  // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to
-  // reduce this. (thanks @acdha)
-  // See http://stackoverflow.com/questions/4113268
-  'bmi_SafeAddOnload',
-  'EBCallBackMessageReceived',
-  // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
-  'conduitPage',
-];
-
-Sentry.init({
-  dsn: 'https://5e4d2c4b57ab409cb98d4c08b2014755@o4504288369836032.ingest.sentry.io/4504288371343360',
-  integrations: [new Sentry.BrowserTracing()],
-  tracesSampleRate: 0.3,
-  release: ONTIME_VERSION,
-  enabled: import.meta.env.PROD,
-  ignoreErrors: [...sentryRecommendedIgnore, /Unable to preload CSS/i, /dynamically imported module/i],
-  denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i],
-});
-
 root.render(
   <StrictMode>
     <App />

apps/client/src/ontimeConfig.ts

@@ -2,5 +2,5 @@ export const tooltipDelaySlow = 1000;
 export const tooltipDelayMid = 500;
 export const tooltipDelayFast = 300;
 
-export const queryRefetchInterval = 10000;
+export const queryRefetchInterval = 10000; // 10 seconds
-export const queryRefetchIntervalSlow = 30000;
+export const queryRefetchIntervalSlow = 30000; // 30 seconds

apps/client/src/sentry.config.ts

@@ -0,0 +1,25 @@
+// https://docs.sentry.io/platforms/javascript/configuration/filtering/#decluttering-sentry
+export const sentryRecommendedIgnore = [
+  // Random plugins/extensions
+  'top.GLOBALS',
+  // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
+  'originalCreateNotification',
+  'canvas.contentDocument',
+  'MyApp_RemoveAllHighlights',
+  'http://tt.epicplay.com',
+  "Can't find variable: ZiteReader",
+  'jigsaw is not defined',
+  'ComboSearch is not defined',
+  'http://loading.retry.widdit.com/',
+  'atomicFindClose',
+  // Facebook borked
+  'fb_xd_fragment',
+  // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to
+  // reduce this. (thanks @acdha)
+  // See http://stackoverflow.com/questions/4113268
+  'bmi_SafeAddOnload',
+  'EBCallBackMessageReceived',
+  // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
+  'conduitPage',
+];
+export const sentryDsn = 'https://5e4d2c4b57ab409cb98d4c08b2014755@o4504288369836032.ingest.sentry.io/4504288371343360';

apps/client/src/theme/_ontimeColours.scss

@@ -7,6 +7,7 @@ $white-9: rgba(255, 255, 255, 0.09);
 $white-10: rgba(255, 255, 255, 0.10);
 $white-13: rgba(255, 255, 255, 0.13);
 $white-20: rgba(255, 255, 255, 0.20);
+$white-40: rgba(255, 255, 255, 0.40);
 $white-60: rgba(255, 255, 255, 0.60);
 $white-90: rgba(255, 255, 255, 0.90);
 

apps/client/src/theme/_ontimeStyles.scss

@@ -15,6 +15,7 @@ $ontime-color: #ff7597;
 $error-red: $red-500;
 $warning-orange: $orange-500;
 $opacity-disabled: 0.4;
+$active-red: $red-700;
 
 // playback colours
 $playback-start: $green-600;

apps/client/src/translation/TranslationProvider.tsx

@@ -6,6 +6,7 @@ import { langDe } from './languages/de';
 import { langEn } from './languages/en';
 import { langEs } from './languages/es';
 import { langFr } from './languages/fr';
+import { langHu } from './languages/hu';
 import { langIt } from './languages/it';
 import { langNo } from './languages/no';
 import { langPl } from './languages/pl';
@@ -16,6 +17,7 @@ const translationsList = {
   en: langEn,
   es: langEs,
   fr: langFr,
+  hu: langHu,
   it: langIt,
   de: langDe,
   no: langNo,

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

@@ -19,4 +19,8 @@ export const langDe: TranslationObject = {
   'countdown.to_start': 'Zeit bis zum Start',
   'countdown.waiting': 'Warten auf den Veranstaltungsbeginn',
   'countdown.overtime': 'überfällig',
+  'timeline.live': 'live',
+  'timeline.done': 'Beendet',
+  'timeline.due': 'fällig',
+  'timeline.followedby': 'Gefolgt von',
 };

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

@@ -17,6 +17,10 @@ export const langEn = {
   'countdown.to_start': 'Time to start',
   'countdown.waiting': 'Waiting for event start',
   'countdown.overtime': 'in overtime',
+  'timeline.live': 'live',
+  'timeline.done': 'done',
+  'timeline.due': 'due',
+  'timeline.followedby': 'Followed by',
 };
 
 export type TranslationObject = Record<keyof typeof langEn, string>;

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

@@ -19,4 +19,8 @@ export const langEs: TranslationObject = {
   'countdown.to_start': 'Tiempo para comenzar',
   'countdown.waiting': 'Esperando el inicio del evento',
   'countdown.overtime': 'en tiempo extra',
+  'timeline.live': 'live',
+  'timeline.done': 'Terminado',
+  'timeline.due': 'pendiente',
+  'timeline.followedby': 'Seguido por',
 };

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

@@ -19,4 +19,8 @@ export const langFr: TranslationObject = {
   'countdown.to_start': 'Évènement commence dans',
   'countdown.waiting': 'En attente du début de l’évènement',
   'countdown.overtime': 'en dépassement',
+  'timeline.live': 'live',
+  'timeline.done': 'Terminé',
+  'timeline.due': 'dû',
+  'timeline.followedby': 'Suivi de',
 };

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

@@ -0,0 +1,26 @@
+import { TranslationObject } from './en';
+
+export const langHu: TranslationObject = {
+  'common.expected_finish': 'Várható befejezés',
+  'common.minutes': 'perc',
+  'common.now': 'Most',
+  'common.next': 'Következő',
+  'common.public_message': 'Nyilvános közlemény',
+  'common.scheduled_start': 'Ütemezett kezdés',
+  'common.scheduled_end': 'Ütemezett befejezés',
+  'common.projected_start': 'Várható kezdés',
+  'common.projected_end': 'Várható befejezés',
+  'common.stage_timer': 'Színpadi időzítő',
+  'common.started_at': 'Kezdődött',
+  'common.time_now': 'Jelenlegi idő',
+  'countdown.ended': 'Esemény véget ért',
+  'countdown.running': 'Esemény folyamatban',
+  'countdown.select_event': 'Válassza ki a követendő eseményt',
+  'countdown.to_start': 'Idő kezdésig',
+  'countdown.waiting': 'Várakozás az esemény kezdetére',
+  'countdown.overtime': 'csúszik',
+  'timeline.live': 'élő',
+  'timeline.done': 'kész',
+  'timeline.due': 'esedékes',
+  'timeline.followedby': 'Követi',
+};

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

@@ -19,4 +19,8 @@ export const langIt: TranslationObject = {
   'countdown.to_start': 'Tempo alla partenza',
   'countdown.waiting': "In attesa dell'inizio dell'evento",
   'countdown.overtime': 'in ritardo',
+  'timeline.live': 'live',
+  'timeline.done': 'Terminato',
+  'timeline.due': 'previsto',
+  'timeline.followedby': 'Seguito da',
 };

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

@@ -19,4 +19,8 @@ export const langNo: TranslationObject = {
   'countdown.to_start': 'Tid til start',
   'countdown.waiting': 'Venter på start',
   'countdown.overtime': 'i overtiden',
+  'timeline.live': 'live',
+  'timeline.done': 'Ferdig',
+  'timeline.due': 'Venter',
+  'timeline.followedby': 'Etterfulgt av',
 };

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

@@ -19,4 +19,8 @@ export const langPl: TranslationObject = {
   'countdown.to_start': 'Do rozpoczęcia',
   'countdown.waiting': 'Oczekiwanie na start',
   'countdown.overtime': 'ponad czasem',
+  'timeline.live': 'live',
+  'timeline.done': 'Zakończony',
+  'timeline.due': 'termin',
+  'timeline.followedby': 'Następnie',
 };

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

@@ -19,4 +19,8 @@ export const langPt: TranslationObject = {
   'countdown.to_start': 'Tempo para iniciar',
   'countdown.waiting': 'Aguardando o início do evento',
   'countdown.overtime': 'em tempo extra',
+  'timeline.live': 'live',
+  'timeline.done': 'Concluído',
+  'timeline.due': 'Pendente',
+  'timeline.followedby': 'Seguido por',
 };

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

@@ -19,4 +19,8 @@ export const langSv: TranslationObject = {
   'countdown.to_start': 'Tid till start',
   'countdown.waiting': 'Väntar på att evenemanget ska starta',
   'countdown.overtime': 'i övertid',
+  'timeline.live': 'live',
+  'timeline.done': 'Avslutad',
+  'timeline.due': 'Väntande',
+  'timeline.followedby': 'Följt av',
 };

apps/client/src/viewerConfig.ts

@@ -3,6 +3,7 @@ export const navigatorConstants = [
   { url: '/clock', label: 'Clock' },
   { url: '/minimal', label: 'Minimal Timer' },
   { url: '/backstage', label: 'Backstage' },
+  { url: '/timeline', label: 'Timeline (beta)' },
   { url: '/public', label: 'Public' },
   { url: '/lower', label: 'Lower Thirds' },
   { url: '/studio', label: 'Studio Clock' },

apps/electron/main.js

@@ -1,6 +1,7 @@
 const { app, BrowserWindow, Menu, globalShortcut, Tray, dialog, ipcMain, shell, Notification } = require('electron');
 const path = require('path');
 const electronConfig = require('./electron.config');
+const { version } = require('./package.json');
 const { getApplicationMenu } = require('./src/menu/applicationMenu.js');
 
 const env = process.env.NODE_ENV || 'production';
@@ -187,7 +188,9 @@ app.whenReady().then(() => {
         ? electronConfig.reactAppUrl.production(port)
         : electronConfig.reactAppUrl.development(port);
 
-      const template = getApplicationMenu(isMac, askToQuit, clientUrl);
+      const template = getApplicationMenu(isMac, askToQuit, clientUrl, `v${version}`, (path) => {
+        win.loadURL(`${clientUrl}/${path}`);
+      });
       const menu = Menu.buildFromTemplate(template);
       Menu.setApplicationMenu(menu);
 

apps/electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "3.4.1-beta",
+  "version": "3.5.0",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",
@@ -14,15 +14,14 @@
   "devDependencies": {
     "electron": "^31.2.0",
     "electron-builder": "^24.13.3",
-    "eslint": "^8.56.0",
+    "eslint": "catalog:",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "catalog:",
-    "prettier": "^3.0.3",
+    "prettier": "catalog:",
     "wait-on": "^7.2.0"
   },
   "scripts": {
     "postinstall": "",
     "lint": "eslint . --quiet",
-    "lint-staged": "eslint",
     "dev": "wait-on http://localhost:3000 && cross-env NODE_ENV=development electron .",
     "dist-win": "electron-builder --publish=never --x64 --win",
     "dist-mac": "electron-builder --publish=never --mac",

apps/electron/src/menu/applicationMenu.js

@@ -4,7 +4,7 @@ const { shell } = require('electron');
  * @param {boolean} isMac - Whether the target platform is mac
  * @param {function} askToQuit - function for quitting process
  */
-function getApplicationMenu(isMac, askToQuit, urlBase) {
+function getApplicationMenu(isMac, askToQuit, urlBase, version, redirectWindow) {
   return [
     ...(isMac
       ? [
@@ -59,6 +59,19 @@ function getApplicationMenu(isMac, askToQuit, urlBase) {
         {
           label: 'Ontime Views (opens in browser)',
           submenu: [
+            {
+              label: 'Public',
+              click: async () => {
+                await shell.openExternal(`${urlBase}/public`);
+              },
+            },
+            {
+              label: 'Lower Thirds',
+              click: async () => {
+                await shell.openExternal(`${urlBase}/lower`);
+              },
+            },
+            { type: 'separator' },
             {
               label: 'Timer',
               accelerator: 'CmdOrCtrl+V',
@@ -85,15 +98,9 @@ function getApplicationMenu(isMac, askToQuit, urlBase) {
               },
             },
             {
-              label: 'Public',
+              label: 'Timeline (beta)',
               click: async () => {
-                await shell.openExternal(`${urlBase}/public`);
+                await shell.openExternal(`${urlBase}/timeline`);
-              },
-            },
-            {
-              label: 'Lower Thirds',
-              click: async () => {
-                await shell.openExternal(`${urlBase}/lower`);
               },
             },
             {
@@ -150,6 +157,14 @@ function getApplicationMenu(isMac, askToQuit, urlBase) {
     {
       role: 'help',
       submenu: [
+        {
+          label: 'About',
+          click: () => redirectWindow('editor?settings=about'),
+        },
+        {
+          label: version,
+          click: () => redirectWindow('editor?settings=about'),
+        },
         {
           label: 'See on github',
           click: async () => {

apps/electron/src/menu/trayMenu.js

@@ -6,7 +6,7 @@
 function getTrayMenu(showApp, askToQuit) {
   return [
     {
-      label: 'Show App (Alt + 1)',
+      label: 'Show App',
       click: () => showApp(),
     },
     {

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "3.4.1-beta",
+  "version": "3.5.0",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",
@@ -27,41 +27,37 @@
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.17",
     "@types/multer": "^1.4.11",
-    "@types/node": "^20.14.10",
+    "@types/node": "catalog:",
     "@types/node-osc": "^6.0.2",
     "@types/websocket": "^1.0.5",
     "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/eslint-plugin": "catalog:",
-    "@typescript-eslint/parser": "^7.12.0",
+    "@typescript-eslint/parser": "catalog:",
     "esbuild": "^0.19.10",
-    "eslint": "^8.56.0",
+    "eslint": "catalog:",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "catalog:",
     "ontime-types": "workspace:*",
-    "prettier": "^3.3.1",
+    "prettier": "catalog:",
     "server-timing": "^3.3.3",
     "shx": "^0.3.4",
     "ts-essentials": "^9.4.1",
     "tsx": "^4.16.2",
-    "typescript": "^5.4.3",
+    "typescript": "catalog:",
     "vitest": "^1.6.0"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
-    "set:demoproject": "shx cp ../../demo-db/db.json src/preloaded-db/db.json",
+    "postinstall": "pnpm addversion",
-    "set:testproject": "shx cp ../../demo-db/db.json test-db/db.json",
+    "dev": "cross-env NODE_ENV=development tsx watch ./src/index.ts",
-    "postinstall": "pnpm addversion && pnpm set:demoproject && pnpm set:testproject",
+    "dev:inspect": "cross-env NODE_ENV=development tsx watch --inspect ./src/index.ts",
-    "dev": "cross-env NODE_ENV=development tsx ./src/index.ts",
-    "dev:inspect": "cross-env NODE_ENV=development tsx --inspect ./src/index.ts",
     "dev:test": "cross-env IS_TEST=true tsx ./src/index.ts",
-    "prebuild": "pnpm set:demoproject",
+    "build": "esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --legal-comments=external --drop-labels=DEV --outfile=dist/index.cjs",
-    "build": "pnpm prebuild && esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --legal-comments=external --outfile=dist/index.cjs",
+    "build:electron": "esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --legal-comments=external --drop-labels=DEV --outfile=dist/index.cjs",
-    "build:electron": "pnpm prebuild && esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --legal-comments=external --outfile=dist/index.cjs",
+    "build:local": "esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --legal-comments=external --drop-labels=DEV --outfile=dist/index.cjs",
-    "build:local": "pnpm prebuild && esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --legal-comments=external --outfile=dist/index.cjs",
+    "build:docker": "esbuild src/index.ts --log-level=error --platform=node --format=cjs --minify --bundle --legal-comments=external --drop-labels=DEV --outfile=dist/docker.cjs",
-    "build:docker": "pnpm prebuild && esbuild src/index.ts --log-level=error --platform=node --format=cjs --minify --bundle --legal-comments=external --outfile=dist/docker.cjs",
+    "build:localdocker": "cross-env NODE_ENV=local esbuild src/index.ts --log-level=error --platform=node --format=cjs --minify --bundle --legal-comments=external --drop-labels=DEV --outfile=dist/docker.cjs",
-    "build:localdocker": "cross-env NODE_ENV=local pnpm prebuild && esbuild src/index.ts --log-level=error --platform=node --format=cjs --minify --bundle --legal-comments=external --outfile=dist/docker.cjs",
+    "build:debug": "esbuild src/app.ts --platform=node --format=cjs --bundle --legal-comments=external --outfile=dist/index.cjs",
-    "build:debug": "pnpm prebuild && esbuild src/app.ts --platform=node --format=cjs --bundle --legal-comments=external --outfile=dist/index.cjs",
     "lint": "eslint . --quiet",
-    "lint-staged": "eslint",
     "test": "cross-env IS_TEST=true vitest",
     "test:pipeline": "cross-env IS_TEST=true vitest run",
     "typecheck": "tsc --noEmit",

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

@@ -1,4 +1,11 @@
-import { ErrorResponse, MessageResponse, OntimeRundownEntry, RundownCached, RundownPaginated } from 'ontime-types';
+import {
+  ErrorResponse,
+  MessageResponse,
+  OntimeRundown,
+  OntimeRundownEntry,
+  RundownCached,
+  RundownPaginated,
+} from 'ontime-types';
 import { getErrorMessage } from 'ontime-utils';
 
 import { Request, Response } from 'express';
@@ -12,6 +19,7 @@ import {
   deleteEvent,
   editEvent,
   reorderEvent,
+  setFrozenState,
   swapEvents,
 } from '../../services/rundown-service/RundownService.js';
 import {
@@ -21,6 +29,11 @@ import {
   getRundown,
 } from '../../services/rundown-service/rundownUtils.js';
 
+export async function rundownGetAll(_req: Request, res: Response<OntimeRundown>) {
+  const rundown = getRundown();
+  res.json(rundown);
+}
+
 export async function rundownGetNormalised(_req: Request, res: Response<RundownCached>) {
   const cachedRundown = getNormalisedRundown();
   res.json(cachedRundown);
@@ -114,6 +127,17 @@ export async function rundownBatchPut(req: Request, res: Response<MessageRespons
   }
 }
 
+export async function rundownFrozenPost(req: Request, res: Response<MessageResponse | ErrorResponse>) {
+  try {
+    const { frozen } = req.body;
+    setFrozenState(frozen);
+    res.status(200).send({ message: 'Rundown frozen state updated.' });
+  } catch (error) {
+    const message = getErrorMessage(error);
+    res.status(400).send({ message });
+  }
+}
+
 export async function rundownReorder(req: Request, res: Response<OntimeRundownEntry | ErrorResponse>) {
   if (failEmptyObjects(req.body, res)) {
     return;

apps/server/src/api-data/rundown/rundown.middleware.ts

@@ -0,0 +1,9 @@
+import { eventStore } from '../../stores/EventStore.js';
+
+export const preventIfFrozen = function (req, res, next) {
+  if (eventStore.get('frozen')) {
+    res.status(403).send({ message: 'Rundown is frozen' });
+  } else {
+    next();
+  }
+};

apps/server/src/api-data/rundown/rundown.router.ts

@@ -5,6 +5,8 @@ import {
   rundownApplyDelay,
   rundownBatchPut,
   rundownDelete,
+  rundownFrozenPost,
+  rundownGetAll,
   rundownGetById,
   rundownGetNormalised,
   rundownGetPaginated,
@@ -17,27 +19,31 @@ import {
   paramsMustHaveEventId,
   rundownArrayOfIds,
   rundownBatchPutValidator,
+  rundownFrozenPostValidator,
   rundownGetPaginatedQueryParams,
   rundownPostValidator,
   rundownPutValidator,
   rundownReorderValidator,
   rundownSwapValidator,
 } from './rundown.validation.js';
+import { preventIfFrozen } from './rundown.middleware.js';
 
 export const router = express.Router();
 
-router.get('/', rundownGetPaginatedQueryParams, rundownGetPaginated); // not used in Ontime frontend
+router.get('/', rundownGetAll); // not used in Ontime frontend
+router.get('/paginated', rundownGetPaginatedQueryParams, rundownGetPaginated); // not used in Ontime frontend
 router.get('/normalised', rundownGetNormalised);
 router.get('/:eventId', paramsMustHaveEventId, rundownGetById); // not used in Ontime frontend
 
 router.post('/', rundownPostValidator, rundownPost);
+router.post('/frozen', rundownFrozenPostValidator, rundownFrozenPost);
 
 router.put('/', rundownPutValidator, rundownPut);
 router.put('/batch', rundownBatchPutValidator, rundownBatchPut);
 
-router.patch('/reorder/', rundownReorderValidator, rundownReorder);
+router.patch('/reorder/', rundownReorderValidator, preventIfFrozen, rundownReorder);
-router.patch('/swap', rundownSwapValidator, rundownSwap);
+router.patch('/swap', rundownSwapValidator, preventIfFrozen, rundownSwap);
 router.patch('/applydelay/:eventId', paramsMustHaveEventId, rundownApplyDelay);
 
-router.delete('/', rundownArrayOfIds, deletesEventById);
+router.delete('/', rundownArrayOfIds, preventIfFrozen, deletesEventById);
-router.delete('/all', rundownDelete);
+router.delete('/all', preventIfFrozen, rundownDelete);

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

@@ -21,6 +21,15 @@ export const rundownPutValidator = [
   },
 ];
 
+export const rundownFrozenPostValidator = [
+  body('frozen').isBoolean().exists(),
+  (req: Request, res: Response, next: NextFunction) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
+    next();
+  },
+]
+
 export const rundownBatchPutValidator = [
   body('data').isObject().exists(),
   body('ids').isArray().exists(),

apps/server/src/api-integration/integration.controller.ts

@@ -54,18 +54,15 @@ const actionHandlers: Record<string, ActionHandler> = {
       if (typeof property !== 'string' || value === undefined) {
         throw new Error('Invalid property or value');
       }
-
       // parseProperty is async because of the data lock
-      parseProperty(property, value).then((newObjectProperty) => {
+      const newObjectProperty = parseProperty(property, value);
-        const key = Object.keys(newObjectProperty)[0] as keyof OntimeEvent;
+      const key = Object.keys(newObjectProperty)[0] as keyof OntimeEvent;
-        shouldThrottle = willCauseRegeneration(key) || shouldThrottle;
+      shouldThrottle = shouldThrottle || willCauseRegeneration(key);
-
+      if (patchEvent.custom && newObjectProperty.custom) {
-        if (patchEvent.custom && newObjectProperty.custom) {
+        Object.assign(patchEvent.custom, newObjectProperty.custom);
-          Object.assign(patchEvent.custom, newObjectProperty.custom);
+      } else {
-        } else {
+        Object.assign(patchEvent, newObjectProperty);
-          Object.assign(patchEvent, newObjectProperty);
+      }
-        }
-      });
     });
 
     if (shouldThrottle) {