Merge branch 'v3' of https://github.com/cpvalente/ontime into v3

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

@@ -247,7 +247,7 @@ export const LOWER_THIRD_OPTIONS: ParamField[] = [
       title: 'Title',
       subtitle: 'Subtitle',
       presenter: 'Presenter',
-      lowerMsg: 'Lower Thrid Message',
+      lowerMsg: 'Lower Third Message',
     },
     defaultValue: 'title',
   },
@@ -260,7 +260,7 @@ export const LOWER_THIRD_OPTIONS: ParamField[] = [
       title: 'Title',
       subtitle: 'Subtitle',
       presenter: 'Presenter',
-      lowerMsg: 'Lower Thrid Message',
+      lowerMsg: 'Lower Third Message',
     },
     defaultValue: 'subtitle',
   },

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

@@ -68,3 +68,14 @@ export const runtimeStore = createWithEqualityFn<RuntimeStore>(
 
 export const useRuntimeStore = <T>(selector: (state: RuntimeStore) => T) =>
   useStoreWithEqualityFn(runtimeStore, selector, deepCompare);
+
+/**
+ * Allows patching a property of the runtime store
+ * @param key
+ * @param value
+ */
+export function patchRuntime<K extends keyof RuntimeStore>(key: K, value: RuntimeStore[K]): void {
+  const state = runtimeStore.getState();
+  state[key] = value;
+  runtimeStore.setState({ ...state });
+}

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

@@ -4,7 +4,7 @@ import { isProduction, RUNTIME, websocketUrl } from '../api/apiConstants';
 import { ontimeQueryClient } from '../queryClient';
 import { socketClientName } from '../stores/connectionName';
 import { addLog } from '../stores/logger';
-import { runtimeStore } from '../stores/runtime';
+import { patchRuntime, runtimeStore } from '../stores/runtime';
 
 export let websocket: WebSocket | null = null;
 let reconnectTimeout: NodeJS.Timeout | null = null;
@@ -12,6 +12,7 @@ const reconnectInterval = 1000;
 export let shouldReconnect = true;
 export let hasConnected = false;
 export let reconnectAttempts = 0;
+
 export const connectSocket = (preferredClientName?: string) => {
   websocket = new WebSocket(websocketUrl);
 
@@ -52,7 +53,6 @@ export const connectSocket = (preferredClientName?: string) => {
         return;
       }
 
-      // TODO: implement partial store updates
       switch (type) {
         case 'client-name': {
           socketClientName.getState().setName(payload);
@@ -69,34 +69,54 @@ export const connectSocket = (preferredClientName?: string) => {
           }
           break;
         }
-        case 'ontime-playback': {
-          const state = runtimeStore.getState();
-          state.timer.playback = payload;
-          runtimeStore.setState(state);
+        case 'ontime-clock': {
+          patchRuntime('clock', payload);
+          updateDevTools({ clock: payload });
           break;
         }
         case 'ontime-timer': {
-          const state = runtimeStore.getState();
-          state.timer = payload;
-          runtimeStore.setState(state);
-          break;
-        }
-        case 'ontime-runtime': {
-          const state = runtimeStore.getState();
-          state.runtime = payload;
-          runtimeStore.setState(state);
-          break;
-        }
-        case 'ontime-message': {
-          const state = runtimeStore.getState();
-          state.message = payload;
-          runtimeStore.setState(state);
+          patchRuntime('timer', payload);
+          updateDevTools({ timer: payload });
           break;
         }
         case 'ontime-onAir': {
-          const state = runtimeStore.getState();
-          state.onAir = payload;
-          runtimeStore.setState(state);
+          patchRuntime('onAir', payload);
+          updateDevTools({ onAir: payload });
+          break;
+        }
+        case 'ontime-message': {
+          patchRuntime('message', payload);
+          updateDevTools({ message: payload });
+          break;
+        }
+        case 'ontime-runtime': {
+          patchRuntime('runtime', payload);
+          updateDevTools({ runtime: payload });
+          break;
+        }
+        case 'ontime-eventNow': {
+          patchRuntime('eventNow', payload);
+          updateDevTools({ eventNow: payload });
+          break;
+        }
+        case 'ontime-publicEventNow': {
+          patchRuntime('publicEventNow', payload);
+          updateDevTools({ publicEventNow: payload });
+          break;
+        }
+        case 'ontime-eventNext': {
+          patchRuntime('eventNext', payload);
+          updateDevTools({ eventNext: payload });
+          break;
+        }
+        case 'ontime-publicEventNext': {
+          patchRuntime('publicEventNext', payload);
+          updateDevTools({ publicEventNext: payload });
+          break;
+        }
+        case 'ontime-timer1': {
+          patchRuntime('timer1', payload);
+          updateDevTools({ timer1: payload });
           break;
         }
       }
@@ -125,3 +145,12 @@ export const socketSendJson = (type: string, payload?: unknown) => {
     }),
   );
 };
+
+function updateDevTools(newData: Partial<RuntimeStore>) {
+  if (!isProduction) {
+    ontimeQueryClient.setQueryData(RUNTIME, (oldData: RuntimeStore) => ({
+      ...oldData,
+      ...newData,
+    }));
+  }
+}

apps/client/src/features/app-settings/panel/integrations-panel/integrationUtils.ts

@@ -1,8 +1,17 @@
-export const cycles = [
+import { TimerLifeCycle } from 'ontime-types';
+
+type CycleLabel = {
+  id: number;
+  label: string;
+  value: keyof typeof TimerLifeCycle;
+};
+
+export const cycles: CycleLabel[] = [
   { id: 1, label: 'On Load', value: 'onLoad' },
   { id: 2, label: 'On Start', value: 'onStart' },
   { id: 3, label: 'On Pause', value: 'onPause' },
   { id: 4, label: 'On Stop', value: 'onStop' },
-  { id: 5, label: 'Every second', value: 'onUpdate' },
+  { id: 5, label: 'Every second', value: 'onClock' },
+  { id: 5, label: 'On Timer Update', value: 'onUpdate' },
   { id: 6, label: 'On Finish', value: 'onFinish' },
 ];

apps/client/src/features/viewers/lower-thirds/LowerThird.scss

@@ -7,40 +7,50 @@
     position: absolute;
     display: block;
     top: 75vh;
+    line-height: normal;
+
     animation-fill-mode: both;
     animation-timing-function: ease-out;
 
     &--pre {
       animation-name: in;
       animation-play-state: paused;
+
       .data-top {
         animation-play-state: paused;
         animation-name: top-in;
       }
+
       .data-lower {
         animation-play-state: paused;
         animation-name: bottom-in;
       }
     }
+
     &--in {
       animation-name: in;
       animation-play-state: running;
+
       .data-top {
         animation-play-state: running;
         animation-name: top-in;
       }
+
       .data-bottom {
         animation-play-state: running;
         animation-name: bottom-in;
       }
     }
+
     &--out {
       animation-name: out;
       animation-play-state: running;
+
       .data-top {
         animation-play-state: running;
         animation-name: top-out;
       }
+
       .data-bottom {
         animation-play-state: running;
         animation-name: bottom-out;
@@ -51,22 +61,24 @@
       width: 100%;
       height: var(--bottomThird-line-height-override, 0.5vh);
     }
+
     .clip {
       overflow: hidden;
     }
+
     .data-bottom,
     .data-top {
-      padding-left: 3vw;
-      padding-right: 3vw;
-      font-family: var(--lowerThird-font-family-override, 'Arial');
+      padding: 0 3vw;
+      font-family: var(--lowerThird-font-family-override, 'Lato');
       text-align: var(--lowerThird-text-align-override, left);
       white-space: nowrap;
     }
 
     .data-top {
-      font-weight: var(--lowerThird-top-font-weight-override, bold);
+      font-weight: var(--lowerThird-top-font-weight-override, 600);
       font-style: var(--lowerThird-top-font-style-override, normal);
     }
+
     .data-bottom {
       font-weight: var(--lowerThird-bottom-font-weight-override, normal);
       font-style: var(--lowerThird-bottom-font-style-override, normal);
@@ -74,6 +86,7 @@
   }
 }
 
+
 @keyframes in {
   0% {
     transform: translateX(-100%);