Better update rate and batch in client

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

@@ -14,13 +14,22 @@ export const runtimeStore = createWithEqualityFn<RuntimeStore>(
 export const useRuntimeStore = <T>(selector: (state: RuntimeStore) => T) =>
   useStoreWithEqualityFn(runtimeStore, selector, deepCompare);
 
+let batchStore: Partial<RuntimeStore> = {};
+let isUpdatePending: NodeJS.Timeout | null = null;
+
 /**
  * Allows patching a property of the runtime store
  */
 export function patchRuntimeProperty<K extends keyof RuntimeStore>(key: K, value: RuntimeStore[K]) {
-  const state = runtimeStore.getState();
-  state[key] = value;
-  runtimeStore.setState({ ...state });
+  batchStore[key] = value;
+  if (!isUpdatePending) {
+    isUpdatePending = setTimeout(() => {
+      const state = runtimeStore.getState();
+      runtimeStore.setState({ ...state, ...batchStore });
+      batchStore = {};
+      isUpdatePending = null;
+    });
+  }
 }
 
 /**

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

@@ -681,69 +681,64 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
     // we do the comparison by explicitly for each property
     // to apply custom logic for different datasets
 
-    const shouldForceTimerUpdate = getForceUpdate(
-      RuntimeService.previousTimerUpdate,
-      state.clock,
-      state.timer.playback,
-    );
-
-    const shouldUpdateTimer =
-      shouldForceTimerUpdate || getShouldTimerUpdate(RuntimeService.previousTimerValue, state.timer.current);
-
-    const shouldRuntimeUpdate = shouldUpdateTimer || getForceUpdate(RuntimeService.previousRuntimeUpdate, state.clock);
-
     // some changes need an immediate update
     const hasNewLoaded = state.eventNow?.id !== RuntimeService.previousState?.eventNow?.id;
 
     const justStarted = !RuntimeService.previousState?.timer;
     const hasChangedPlayback = RuntimeService.previousState.timer?.playback !== state.timer.playback;
     const hasImmediateChanges = hasNewLoaded || justStarted || hasChangedPlayback;
 
+    const shouldUpdateTimer =
+      (getForceUpdate(RuntimeService.previousTimerUpdate, state.clock, state.timer.playback) ||
+        getShouldTimerUpdate(RuntimeService.previousTimerValue, state.timer.current)) &&
+      !deepEqual(RuntimeService.previousState?.timer, state.timer);
+
+    const shouldRuntimeUpdate =
+      (shouldUpdateTimer || getForceUpdate(RuntimeService.previousRuntimeUpdate, state.clock)) &&
+      !deepEqual(RuntimeService.previousState?.runtime, state.runtime);
+
     if (hasChangedPlayback) {
       eventStore.set('onAir', state.timer.playback !== Playback.Stop);
     }
 
-    if (hasImmediateChanges || (shouldUpdateTimer && !deepEqual(RuntimeService.previousState?.timer, state.timer))) {
+    if (hasImmediateChanges || shouldUpdateTimer) {
       RuntimeService.previousTimerUpdate = state.clock;
       RuntimeService.previousTimerValue = state.timer.current;
-      RuntimeService.previousClockUpdate = state.clock;
-      eventStore.set('clock', state.clock);
       eventStore.set('timer', state.timer);
       RuntimeService.previousState.timer = { ...state.timer };
     }
 
-    if (
-      hasChangedPlayback ||
-      (shouldRuntimeUpdate && !deepEqual(RuntimeService.previousState?.runtime, state.runtime))
-    ) {
+    if (hasImmediateChanges || shouldRuntimeUpdate) {
       eventStore.set('runtime', state.runtime);
-      RuntimeService.previousClockUpdate = state.clock;
       RuntimeService.previousRuntimeUpdate = state.clock;
-      eventStore.set('clock', state.clock);
       RuntimeService.previousState.runtime = { ...state.runtime };
     }
 
-    // Update the events if they have changed
-    updateEventIfChanged('eventNow', state);
-    updateEventIfChanged('publicEventNow', state);
-    updateEventIfChanged('eventNext', state);
-    updateEventIfChanged('publicEventNext', state);
-
     if (!deepEqual(RuntimeService?.previousState.currentBlock, state.currentBlock)) {
       eventStore.set('currentBlock', state.currentBlock);
       RuntimeService.previousState.currentBlock = { ...state.currentBlock };
       RuntimeService.previousClockUpdate = state.clock;
       eventStore.set('clock', state.clock);
     }
 
-    const shouldUpdateClock = getShouldClockUpdate(RuntimeService.previousClockUpdate, state.clock);
+    if (hasImmediateChanges) {
+      saveRestoreState(state);
+    }
+
+    const shouldUpdateClock =
+      shouldUpdateTimer || shouldRuntimeUpdate || getForceUpdate(RuntimeService.previousClockUpdate, state.clock);
 
     if (shouldUpdateClock) {
       RuntimeService.previousClockUpdate = state.clock;
       eventStore.set('clock', state.clock);
-      saveRestoreState(state);
     }
 
+    // Update the events if they have changed
+    updateEventIfChanged('eventNow', state);
+    updateEventIfChanged('publicEventNow', state);
+    updateEventIfChanged('eventNext', state);
+    updateEventIfChanged('publicEventNext', state);
+
     // Helper function to update an event if it has changed
     function updateEventIfChanged(eventKey: keyof RuntimeStore, state: runtimeState.RuntimeState) {
       const previous = RuntimeService.previousState?.[eventKey];

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

@@ -1,4 +1,4 @@
-import { millisToSeconds } from 'ontime-utils';
+import { millisToUISeconds } from 'ontime-utils';
 
 import { timerConfig } from '../../config/config.js';
 import { MaybeNumber, Playback } from 'ontime-types';
@@ -13,20 +13,20 @@ export function getShouldClockUpdate(previousUpdate: number, now: number): boole
   if (shouldForceUpdate) {
     return true;
   }
-  const isClockSecondAhead = millisToSeconds(now) !== millisToSeconds(previousUpdate + timerConfig.triggerAhead);
+  const isClockSecondAhead = millisToUISeconds(now) !== millisToUISeconds(previousUpdate + timerConfig.triggerAhead);
   return isClockSecondAhead;
 }
 
 /**
  * Checks whether we should update the timer value
  * - we have rolled into a new seconds unit
  */
-export function getShouldTimerUpdate(previousValue: number, currentValue: MaybeNumber): boolean {
+export function getShouldTimerUpdate(previousValue: MaybeNumber, currentValue: MaybeNumber): boolean {
   if (currentValue === null) {
     return false;
   }
   // we avoid trigger ahead since it can cause duplicate triggers
-  const shouldUpdateTimer = millisToSeconds(currentValue) !== millisToSeconds(previousValue);
+  const shouldUpdateTimer = millisToUISeconds(currentValue) !== millisToUISeconds(previousValue);
   return shouldUpdateTimer;
 }
 

packages/utils/index.ts

@@ -42,6 +42,7 @@ export {
   millisToHours,
   millisToMinutes,
   millisToSeconds,
+  millisToUISeconds,
   secondsInMillis,
 } from './src/date-utils/conversionUtils.js';
 export { isISO8601, isTimeString } from './src/date-utils/isTimeString.js';

packages/utils/src/date-utils/conversionUtils.test.ts

@@ -1,4 +1,52 @@
-import { millisToHours, millisToMinutes, millisToSeconds, secondsInMillis } from './conversionUtils';
+import { millisToHours, millisToMinutes, millisToSeconds, millisToUISeconds, secondsInMillis } from './conversionUtils';
+
+describe('millisToUITimer()', () => {
+  test('null values', () => {
+    const t = { val: null, result: 0 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+  test('1 sec', () => {
+    const t = { val: 1000, result: 1 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+  test('alsmot 1 sec', () => {
+    const t = { val: 1032, result: 1 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+  test('just past 1 sec', () => {
+    const t = { val: 1000 - 32, result: 1 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+  test('half way 1 sec', () => {
+    const t = { val: 500, result: 1 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+
+  test('zero', () => {
+    const t = { val: 32, result: 0 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+
+  test('zero', () => {
+    const t = { val: 0, result: 0 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+
+  test('negative', () => {
+    const t = { val: -32, result: 0 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+
+  test('negative', () => {
+    const t = { val: -1000 + 33, result: 0 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+
+  test('negative', () => {
+    const t = { val: -1000 + 31, result: -1 };
+    expect(millisToUISeconds(t.val)).toBe(t.result);
+  });
+});
 
 describe('millisToSecond()', () => {
   test('null values', () => {

packages/utils/src/date-utils/conversionUtils.ts

@@ -29,6 +29,33 @@ export function millisToSeconds(millis: MaybeNumber): number {
   return convertMillis(millis, MILLIS_PER_SECOND);
 }
 
+export function millisToUISeconds(millis: MaybeNumber): number {
+  if (millis === null) {
+    return 0;
+  }
+
+  const isNegative = millis < 0;
+  const val = Math.abs(millis);
+
+  const remainder = val % MILLIS_PER_SECOND;
+
+  if (isNegative) {
+    if (remainder <= 1000 - 32) {
+      const ret = Math.ceil(millis / MILLIS_PER_SECOND);
+      // eslint-disable-next-line no-compare-neg-zero
+      return ret === -0 ? 0 : ret;
+    }
+
+    return Math.floor(millis / MILLIS_PER_SECOND);
+  }
+
+  if (remainder <= 32) {
+    return Math.floor(val / MILLIS_PER_SECOND);
+  }
+
+  return Math.ceil(val / MILLIS_PER_SECOND);
+}
+
 /**
  * Converts value in milliseconds to minutes
  * @param millis