diff --git a/apps/client/src/common/stores/runtime.ts b/apps/client/src/common/stores/runtime.ts index 17fa21b2a0..70ac4c9934 100644 --- a/apps/client/src/common/stores/runtime.ts +++ b/apps/client/src/common/stores/runtime.ts @@ -15,24 +15,24 @@ export const useRuntimeStore = (selector: (state: RuntimeStore) => T) => useStoreWithEqualityFn(runtimeStore, selector, deepCompare); let batchStore: Partial = {}; -let isUpdatePending: NodeJS.Timeout | null = null; + +export function addToBatchUpdates(key: K, value: RuntimeStore[K]) { + batchStore[key] = value; +} + +export function flushBatchUpdates() { + const state = runtimeStore.getState(); + runtimeStore.setState({ ...state, ...batchStore }); + batchStore = {}; +} /** * Allows patching a property of the runtime store */ export function patchRuntimeProperty(key: K, value: RuntimeStore[K]) { - // We batch updates here to avoid rapid updates triggering multiple rendes that lead to flikering UI - batchStore[key] = value; - if (!isUpdatePending) { - isUpdatePending = setTimeout(() => { - const state = runtimeStore.getState(); - runtimeStore.setState({ ...state, ...batchStore }); - batchStore = {}; - isUpdatePending = null; - }, 5); - //TODO: might need some fine tuneing - //at 60fps 1 frame is ~16ms - } + const state = runtimeStore.getState(); + state[key] = value; + runtimeStore.setState({ ...state }); } /** diff --git a/apps/client/src/common/utils/socket.ts b/apps/client/src/common/utils/socket.ts index 4af7af8167..f61360122e 100644 --- a/apps/client/src/common/utils/socket.ts +++ b/apps/client/src/common/utils/socket.ts @@ -14,7 +14,7 @@ import { } from '../stores/clientStore'; import { addDialog } from '../stores/dialogStore'; import { addLog } from '../stores/logger'; -import { patchRuntime, patchRuntimeProperty } from '../stores/runtime'; +import { addToBatchUpdates, flushBatchUpdates, patchRuntime, patchRuntimeProperty } from '../stores/runtime'; export let websocket: WebSocket | null = null; let reconnectTimeout: NodeJS.Timeout | null = null; @@ -140,57 +140,57 @@ export const connectSocket = () => { break; } case 'ontime-clock': { - patchRuntimeProperty('clock', payload); + addToBatchUpdates('clock', payload); updateDevTools({ clock: payload }); break; } case 'ontime-timer': { - patchRuntimeProperty('timer', payload); + addToBatchUpdates('timer', payload); updateDevTools({ timer: payload }); break; } case 'ontime-onAir': { - patchRuntimeProperty('onAir', payload); + addToBatchUpdates('onAir', payload); updateDevTools({ onAir: payload }); break; } case 'ontime-message': { - patchRuntimeProperty('message', payload); + addToBatchUpdates('message', payload); updateDevTools({ message: payload }); break; } case 'ontime-runtime': { - patchRuntimeProperty('runtime', payload); + addToBatchUpdates('runtime', payload); updateDevTools({ runtime: payload }); break; } case 'ontime-eventNow': { - patchRuntimeProperty('eventNow', payload); + addToBatchUpdates('eventNow', payload); updateDevTools({ eventNow: payload }); break; } case 'ontime-currentBlock': { - patchRuntimeProperty('currentBlock', payload); + addToBatchUpdates('currentBlock', payload); updateDevTools({ currentBlock: payload }); break; } case 'ontime-publicEventNow': { - patchRuntimeProperty('publicEventNow', payload); + addToBatchUpdates('publicEventNow', payload); updateDevTools({ publicEventNow: payload }); break; } case 'ontime-eventNext': { - patchRuntimeProperty('eventNext', payload); + addToBatchUpdates('eventNext', payload); updateDevTools({ eventNext: payload }); break; } case 'ontime-publicEventNext': { - patchRuntimeProperty('publicEventNext', payload); + addToBatchUpdates('publicEventNext', payload); updateDevTools({ publicEventNext: payload }); break; } case 'ontime-auxtimer1': { - patchRuntimeProperty('auxtimer1', payload); + addToBatchUpdates('auxtimer1', payload); updateDevTools({ auxtimer1: payload }); break; } @@ -207,6 +207,10 @@ export const connectSocket = () => { } break; } + case 'ontime-flush': { + flushBatchUpdates() + break; + } } } catch (_) { // ignore unhandled diff --git a/apps/server/src/stores/EventStore.ts b/apps/server/src/stores/EventStore.ts index 20c55e0bae..85390d85ae 100644 --- a/apps/server/src/stores/EventStore.ts +++ b/apps/server/src/stores/EventStore.ts @@ -35,6 +35,7 @@ export const eventStore = { for (const dataKey of changedKeys) { socket.sendAsJson({ type: `ontime-${dataKey}`, payload: store[dataKey] }); } + socket.sendAsJson({ type: `ontime-flush` }); isUpdatePending = null; changedKeys.clear(); });