V3 (#657)

* refactor: cleanup routes

* style: smaller base font

* chore: upgrade dependencies

* chore: lock node version to electron

* refactor: pass HTTP to integration controller (#652)

* refactor: deprecate onair control

* refactor: remove playback router

* Several project files user folder (#617)

* chore: automated screenshots (#667)

* feat: app settings (#658)

* refactor: remove deprecated event data (#674)

* Studio clock (#663)

---------

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

* Feat: reorder events with alt+ctrl + arrow up/down (#645)

* Warning and danger per event (#677)

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>

* refactor: stabilise actionHandler (#683)

Co-authored-by: Fabian Posenau <fabian@fphome.de>

* improvement: hide seconds (#675)

* wip: overview (#688)

* fix: focus cursor (#695)

* refactor: update lower third (#665)

* Refactor/time formatting (#696)

---------

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* feat: multiple selection (#703)

---------

Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com>
Co-authored-by: Alex <ac@omnivox.dk>

* fix: test - go to `Edit mode` befor tying to click `Event options` button (#708)

* refactor: runtime service (#715)

* fix: issue with loosing cursor position on message (#719)

* remove info panel (#721)

* Event editor continue (#722)

* update API - part  (#709)

---------

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* refactor: update timers (#729)

* feat: many timers (#706)

---------

Co-authored-by: arc-alex <ac@omnivox.dk>

* refactor: excel cleanup (#734)

* refactor: allow import of blocks and skip import (#735)

* Project manager (#697)

* refactor: UI for linking events (#763)

* upgraded pipeline actions (#777)

* Over under (#771)

* custom fields (#744)


---------

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

* Sheets settings (#774)

---------

Co-authored-by: arc-alex <ac@omnivox.dk>

* style: tweaks to lower thirds (#785)

* refactor: delays account for gaps (#784)

* refactor: partial state updates (#780)

* feat: generate crash report (#787)

* Sheet use limited input device auth flow (#782)

---------

Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* Custom fields views (#789)

* refactor: deprecate presenter and subtitle (#795)

* refactor: organise API around resources (#798)

---------

Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com>

* Time to end (#804)

* Skip fixes (#805)

* fix: onair derives from playback

* Param nav (#822)

---------

Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk>

* refactor: download files from interface (#831)

* Quick options (#814)

* End pause (#832)

* chore: bump node version in docker (#834)

* refactor: follow in run mode (#840)

* fix: uncaught error in http integration (#837)

* Apply project (#843)

Co-authored-by: Matteo Gheza <matteo.gheza07@gmail.com>
Co-authored-by: Ary <arylmoraesn@gmail.com>
Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk>
Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com>
Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: Alex Rohleder <alexrohleder96@gmail.com>
Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com>
Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com>
Co-authored-by: Fabian Posenau <fabianpos99+github@gmail.com>

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

@@ -1,73 +1,70 @@
-import { RuntimeStore } from 'ontime-types';
+import { RuntimeStore, SimpleDirection, SimplePlayback } from 'ontime-types';
 
-import { deepCompare, useRuntimeStore } from '../stores/runtime';
+import { useRuntimeStore } from '../stores/runtime';
 import { socketSendJson } from '../utils/socket';
 
 export const useRundownEditor = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
-    selectedEventId: state.loaded.selectedEventId,
-    nextEventId: state.loaded.nextEventId,
+    playback: state.timer.playback,
+    selectedEventId: state.eventNow?.id ?? null,
+    nextEventId: state.eventNext?.id ?? null,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const useOperator = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
-    selectedEventId: state.loaded.selectedEventId,
+    playback: state.timer.playback,
+    selectedEventId: state.eventNow?.id ?? null,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const useMessageControl = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    timerMessage: state.timerMessage,
-    publicMessage: state.publicMessage,
-    lowerMessage: state.lowerMessage,
-    externalMessage: state.externalMessage,
+    timer: state.message.timer,
+    public: state.message.public,
+    lower: state.message.lower,
+    external: state.message.external,
     onAir: state.onAir,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const setMessage = {
-  presenterText: (payload: string) => socketSendJson('set-timer-message-text', payload),
-  presenterVisible: (payload: boolean) => socketSendJson('set-timer-message-visible', payload),
-  publicText: (payload: string) => socketSendJson('set-public-message-text', payload),
-  publicVisible: (payload: boolean) => socketSendJson('set-public-message-visible', payload),
-  lowerText: (payload: string) => socketSendJson('set-lower-message-text', payload),
-  lowerVisible: (payload: boolean) => socketSendJson('set-lower-message-visible', payload),
-  externalText: (payload: string) => socketSendJson('set-external-message-text', payload),
-  externalVisible: (payload: boolean) => socketSendJson('set-external-message-visible', payload),
-  onAir: (payload: boolean) => socketSendJson('set-onAir', payload),
-  timerBlink: (payload: boolean) => socketSendJson('set-timer-blink', payload),
-  timerBlackout: (payload: boolean) => socketSendJson('set-timer-blackout', payload),
+  timerText: (payload: string) => socketSendJson('message', { timer: { text: payload } }),
+  timerVisible: (payload: boolean) => socketSendJson('message', { timer: { visible: payload } }),
+  publicText: (payload: string) => socketSendJson('message', { public: { text: payload } }),
+  publicVisible: (payload: boolean) => socketSendJson('message', { public: { visible: payload } }),
+  lowerText: (payload: string) => socketSendJson('message', { lower: { text: payload } }),
+  lowerVisible: (payload: boolean) => socketSendJson('message', { lower: { visible: payload } }),
+  timerBlink: (payload: boolean) => socketSendJson('message', { timer: { blink: payload } }),
+  timerBlackout: (payload: boolean) => socketSendJson('message', { timer: { blackout: payload } }),
 };
 
 export const usePlaybackControl = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
-    selectedEventIndex: state.loaded.selectedEventIndex,
-    numEvents: state.loaded.numEvents,
+    playback: state.timer.playback,
+    selectedEventIndex: state.runtime.selectedEventIndex,
+    numEvents: state.runtime.numEvents,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const setPlayback = {
   start: () => socketSendJson('start'),
   pause: () => socketSendJson('pause'),
   roll: () => socketSendJson('roll'),
-  startNext: () => socketSendJson('start-next'),
+  startNext: () => socketSendJson('start', 'next'),
   previous: () => {
-    socketSendJson('previous');
+    socketSendJson('load', 'previous');
   },
   next: () => {
-    socketSendJson('next');
+    socketSendJson('load', 'next');
   },
   stop: () => {
     socketSendJson('stop');
@@ -84,29 +81,52 @@ export const useInfoPanel = () => {
   const featureSelector = (state: RuntimeStore) => ({
     eventNow: state.eventNow,
     eventNext: state.eventNext,
-    playback: state.playback,
-    selectedEventIndex: state.loaded.selectedEventIndex,
-    numEvents: state.loaded.numEvents,
+    playback: state.timer.playback,
+    selectedEventIndex: state.runtime.selectedEventIndex,
+    numEvents: state.runtime.numEvents,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
+};
+
+export const useExtraTimerTime = () => {
+  const featureSelector = (state: RuntimeStore) => state.auxtimer1.current;
+
+  return useRuntimeStore(featureSelector);
+};
+
+export const useExtraTimerControl = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    playback: state.auxtimer1.playback,
+    direction: state.auxtimer1.direction,
+  });
+
+  return useRuntimeStore(featureSelector);
+};
+
+export const setExtraTimer = {
+  start: () => socketSendJson('auxtimer', { '1': SimplePlayback.Start }),
+  pause: () => socketSendJson('auxtimer', { '1': SimplePlayback.Pause }),
+  stop: () => socketSendJson('auxtimer', { '1': SimplePlayback.Stop }),
+  setDirection: (direction: SimpleDirection) => socketSendJson('auxtimer', { '1': { direction } }),
+  setDuration: (time: number) => socketSendJson('auxtimer', { '1': { duration: time } }),
 };
 
 export const useCuesheet = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
-    selectedEventId: state.loaded.selectedEventId,
-    selectedEventIndex: state.loaded.selectedEventIndex,
-    numEvents: state.loaded.numEvents,
+    playback: state.timer.playback,
+    selectedEventId: state.eventNow?.id ?? null,
+    selectedEventIndex: state.runtime.selectedEventIndex,
+    numEvents: state.runtime.numEvents,
     titleNow: state.eventNow?.title || '',
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const setEventPlayback = {
-  loadEvent: (eventId: string) => socketSendJson('loadid', eventId),
-  startEvent: (eventId: string) => socketSendJson('startid', eventId),
+  loadEvent: (id: string) => socketSendJson('load', { id }),
+  startEvent: (id: string) => socketSendJson('start', { id }),
   start: () => socketSendJson('start'),
   pause: () => socketSendJson('pause'),
 };
@@ -116,7 +136,50 @@ export const useTimer = () => {
     ...state.timer,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
+};
+
+export const useClock = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    clock: state.clock,
+  });
+  return useRuntimeStore(featureSelector);
+};
+
+/** 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,
+    timeDanger: state.eventNow?.timeDanger ?? null,
+  });
+  return useRuntimeStore(featureSelector);
 };
 
 export const setClientName = (newName: string) => socketSendJson('set-client-name', newName);
+
+export const useRuntimeOverview = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    plannedStart: state.runtime.plannedStart,
+    actualStart: state.runtime.actualStart,
+    plannedEnd: state.runtime.plannedEnd,
+    expectedEnd: state.runtime.expectedEnd,
+  });
+
+  return useRuntimeStore(featureSelector);
+};
+
+export const useRuntimePlaybackOverview = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    playback: state.timer.playback,
+    clock: state.clock,
+
+    numEvents: state.runtime.numEvents,
+    selectedEventIndex: state.runtime.selectedEventIndex,
+    offset: state.runtime.offset,
+  });
+
+  return useRuntimeStore(featureSelector);
+};