v2 alpha5 (#315)

* fix: fetch in offline environments (#295)

* add arm platforms to docker build

---------

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

* fix: docker build (#298)

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

* Timer: fix too many renders error when using ?progress (#305)

* ux: remove duplicate showing of selected event

* several small fixes and UX improvements
---------

Co-authored-by: Fabian Posenau <fabian.p99@gmx.de>
Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: Marks Polakovs <github@markspolakovs.me>

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

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import axios, { AxiosError } from 'axios';
-import { useAtomValue } from 'jotai';
 import { OntimeRundown, OntimeRundownEntry, SupportedEvent } from 'ontime-types';
 
 import { RUNDOWN_TABLE, RUNDOWN_TABLE_KEY } from '../api/apiConstants';
@@ -14,7 +13,7 @@ import {
   requestPutEvent,
   requestReorderEvent,
 } from '../api/eventsApi';
-import { defaultPublicAtom, startTimeIsLastEndAtom } from '../atoms/LocalEventSettings';
+import { useLocalEvent } from '../stores/localEvent';
 import { useEmitLog } from '../stores/logger';
 
 /**
@@ -23,8 +22,9 @@ import { useEmitLog } from '../stores/logger';
 export const useEventAction = () => {
   const queryClient = useQueryClient();
   const { emitError } = useEmitLog();
-  const defaultPublic = useAtomValue(defaultPublicAtom);
-  const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
+  const { eventSettings } = useLocalEvent();
+  const defaultPublic = eventSettings.defaultPublic;
+  const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
 
   /**
    * Calls mutation to add new event

apps/client/src/common/hooks/useLocalStorage.js

@@ -1,37 +0,0 @@
-import { useState } from 'react';
-
-// Roughly from useHooks - useLocalStorage
-
-/**
- * @description utility hook to handle state in local storage
- * @param key
- * @param initialValue
- */
-export const useLocalStorage = (key, initialValue) => {
-  const [storedValue, setStoredValue] = useState(() => {
-    try {
-      const item = window.localStorage.getItem(`ontime-${key}`);
-      return item ? JSON.parse(item) : initialValue;
-    } catch (error) {
-      return initialValue;
-    }
-  });
-
-  /**
-   * @description Set value to local storage
-   * @param value
-   */
-  const setValue = (value) => {
-    try {
-      // Allow value to be a function so we have same API as useState
-      const valueToStore =
-        value instanceof Function ? value(storedValue) : value;
-
-      setStoredValue(valueToStore);
-      window.localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
-    } catch (error) {
-      console.log(error);
-    }
-  };
-  return [storedValue, setValue];
-}

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

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * @description utility hook to handle state in local storage
+ * @param key
+ * @param initialValue
+ */
+export const useLocalStorage = <T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] => {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(`ontime-${key}`);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.storageArea === window.localStorage && event.key === key) {
+        try {
+          const newValue = event.newValue ? JSON.parse(event.newValue) : initialValue;
+          setStoredValue(newValue);
+        } catch (_) {
+          /* empty */
+        }
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, [initialValue, key]);
+
+  /**
+   * @description Set value to local storage
+   * @param value
+   */
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+};

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

@@ -77,7 +77,10 @@ export const useInfoPanel = () => {
 
 export const useCuesheet = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    selectedEventIndex: state.loaded.selectedEventId,
+    playback: state.playback,
+    selectedEventId: state.loaded.selectedEventId,
+    selectedEventIndex: state.loaded.selectedEventIndex,
+    numEvents: state.loaded.numEvents,
     titleNow: state.titles.titleNow,
   });
 
@@ -92,7 +95,7 @@ export const setEventPlayback = {
 
 export const useTimer = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    timer: state.timer,
+    ...state.timer,
   });
 
   return useRuntimeStore(featureSelector, deepCompare);