V2 ws store wss

apps/client/package.json

@@ -18,9 +18,10 @@
     "axios": "^1.2.0",
     "color": "^4.2.3",
     "csv-stringify": "^6.2.3",
+    "deepmerge": "^4.3.0",
     "framer-motion": "^8.0.2",
     "jotai": "^1.10.0",
-    "luxon": "^3.1.0",
+    "luxon": "^3.3.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
@@ -29,9 +30,10 @@
     "react-qr-code": "^2.0.11",
     "react-router-dom": "^6.3.0",
     "react-table": "^7.7.0",
-    "socket.io-client": "^4.5.4",
+    "react-use-websocket": "^4.3.1",
     "typeface-open-sans": "^1.1.13",
-    "web-vitals": "^3.1.1"
+    "web-vitals": "^3.1.1",
+    "zustand": "^4.3.6"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -63,6 +65,7 @@
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^14.1.1",
     "@types/color": "^3.0.3",
+    "@types/luxon": "^3.2.0",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^18.0.26",
     "@types/react-beautiful-dnd": "^13.1.3",

apps/client/src/App.tsx

@@ -6,30 +6,32 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
 import { AppContextProvider } from './common/context/AppContext';
-import { LoggingProvider } from './common/context/LoggingContext';
 import useElectronEvent from './common/hooks/useElectronEvent';
 import { ontimeQueryClient } from './common/queryClient';
+import { connectSocket } from './common/utils/socket';
 import theme from './theme/theme';
 import AppRouter from './AppRouter';
 
 // Load Open Sans typeface
 // @ts-expect-error no types from font import
 import('typeface-open-sans');
 
+connectSocket();
+
 function App() {
   const { isElectron, sendToElectron } = useElectronEvent();
 
-  const handleKeyPress = (event:KeyboardEvent) => {
-      // handle held key
-      if (event.repeat) return;
-      // check if the alt key is pressed
-      if (event.altKey) {
-        if (event.code === 'KeyT') {
-          // ask to see debug
-          sendToElectron('set-window', 'show-dev');
-        }
+  const handleKeyPress = (event: KeyboardEvent) => {
+    // handle held key
+    if (event.repeat) return;
+    // check if the alt key is pressed
+    if (event.altKey) {
+      if (event.code === 'KeyT') {
+        // ask to see debug
+        sendToElectron('set-window', 'show-dev');
       }
-    };
+    }
+  };
 
   useEffect(() => {
     if (isElectron) {
@@ -44,22 +46,20 @@ function App() {
 
   return (
     <ChakraProvider resetCSS theme={theme}>
-      <LoggingProvider>
-        <QueryClientProvider client={ontimeQueryClient}>
-          <AppContextProvider>
-            <BrowserRouter>
-              <div className='App'>
-                <ErrorBoundary>
-                  <Suspense fallback={null}>
-                    <AppRouter />
-                  </Suspense>
-                </ErrorBoundary>
-                <ReactQueryDevtools initialIsOpen={false} />
-              </div>
-            </BrowserRouter>
-          </AppContextProvider>
-        </QueryClientProvider>
-      </LoggingProvider>
+      <QueryClientProvider client={ontimeQueryClient}>
+        <AppContextProvider>
+          <BrowserRouter>
+            <div className='App'>
+              <ErrorBoundary>
+                <Suspense fallback={null}>
+                  <AppRouter />
+                </Suspense>
+              </ErrorBoundary>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </div>
+          </BrowserRouter>
+        </AppContextProvider>
+      </QueryClientProvider>
     </ChakraProvider>
   );
 }

apps/client/src/AppRouter.tsx

@@ -2,7 +2,7 @@ import { lazy, useEffect } from 'react';
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 
 import useAliases from './common/hooks-query/useAliases';
-import withSocket from './features/viewers/ViewWrapper';
+import withData from './features/viewers/ViewWrapper';
 
 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
 const Table = lazy(() => import('./features/table/ProtectedTable'));
@@ -17,14 +17,14 @@ const Public = lazy(() => import('./features/viewers/public/Public'));
 const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerWrapper'));
 const StudioClock = lazy(() => import('./features/viewers/studio/StudioClock'));
 
-const STimer = withSocket(TimerView);
-const SMinimalTimer = withSocket(MinimalTimerView);
-const SClock = withSocket(ClockView);
-const SCountdown = withSocket(Countdown);
-const SBackstage = withSocket(Backstage);
-const SPublic = withSocket(Public);
-const SLowerThird = withSocket(Lower);
-const SStudio = withSocket(StudioClock);
+const STimer = withData(TimerView);
+const SMinimalTimer = withData(MinimalTimerView);
+const SClock = withData(ClockView);
+const SCountdown = withData(Countdown);
+const SBackstage = withData(Backstage);
+const SPublic = withData(Public);
+const SLowerThird = withData(Lower);
+const SStudio = withData(StudioClock);
 
 const FeatureWrapper = lazy(() => import('./features/FeatureWrapper'));
 const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));

apps/client/src/common/api/apiConstants.ts

@@ -10,14 +10,10 @@ export const APP_INFO = ['appinfo'];
 export const OSC_SETTINGS = ['oscSettings'];
 export const APP_SETTINGS = ['appSettings'];
 export const VIEW_SETTINGS = ['viewSettings'];
+export const RUNTIME = ['runtimeStore'];
 
-// websocket stuff
-export const FEAT_CUESHEET = 'feat-cuesheet';
-export const FEAT_INFO = 'feat-info';
-export const FEAT_MESSAGECONTROL = 'feat-messagecontrol';
-export const FEAT_PLAYBACKCONTROL = 'feat-playbackcontrol';
-export const FEAT_RUNDOWN = 'feat-rundown';
-export const TIMER = 'timer';
+// external stuff
+export const githubURL = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
 
 /**
  * @description finds server path given the current location, it
@@ -26,6 +22,8 @@ export const TIMER = 'timer';
 export const calculateServer = () => (import.meta.env.DEV ? `http://localhost:${STATIC_PORT}` : window.location.origin);
 
 export const serverURL = calculateServer();
+export const websocketUrl = `ws://${window.location.hostname}:${STATIC_PORT}/ws`;
+
 export const eventURL = `${serverURL}/eventdata`;
 export const rundownURL = `${serverURL}/eventlist`;
 export const ontimeURL = `${serverURL}/ontime`;

apps/client/src/common/api/ontimeApi.ts

@@ -3,7 +3,7 @@ import { Alias, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-t
 
 import { InfoType } from '../models/Info';
 
-import { ontimeURL } from './apiConstants';
+import { githubURL, ontimeURL } from './apiConstants';
 
 /**
  * @description HTTP request to retrieve application settings
@@ -151,3 +151,12 @@ export const uploadData = async (file: string, setProgress: (value: number) => v
     })
     .then((response) => response.data.id);
 };
+
+/**
+ * @description HTTP request to get the latest version and url from github
+ * @return {Promise}
+ */
+export async function getLatestVersion(): Promise<object> {
+  const res = await axios.get(`${githubURL}`);
+  return { url: res.data.html_url, version: res.data.tag_name };
+}

apps/client/src/common/components/buttons/QuitIconBtn.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   AlertDialog,
   AlertDialogBody,
@@ -12,8 +12,8 @@ import {
 } from '@chakra-ui/react';
 import { FiPower } from '@react-icons/all-files/fi/FiPower';
 
-import { LoggingContext } from '../../context/LoggingContext';
 import { Size } from '../../models/Util.type';
+import { useEmitLog } from '../../stores/logger';
 
 interface QuitIconBtnProps {
   clickHandler: () => void;
@@ -39,7 +39,7 @@ const quitBtnStyle = {
 export default function QuitIconBtn(props: QuitIconBtnProps) {
   const { clickHandler, size = 'lg', ...rest } = props;
   const [isOpen, setIsOpen] = useState(false);
-  const { emitInfo } = useContext(LoggingContext);
+  const { emitInfo } = useEmitLog();
   const onClose = () => setIsOpen(false);
   const cancelRef = useRef<HTMLButtonElement | null>(null);
 

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -2,12 +2,9 @@
 import React from 'react';
 import * as Sentry from '@sentry/react';
 
-import { LoggingContext } from '../../context/LoggingContext';
-
 import style from './ErrorBoundary.module.scss';
 
 class ErrorBoundary extends React.Component {
-  static contextType = LoggingContext;
   reportContent = '';
 
   constructor(props) {

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -1,11 +1,11 @@
-import { KeyboardEvent, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Input, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
+import { millisToString } from 'ontime-utils';
 
 import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
 import { tooltipDelayFast } from '../../../../ontimeConfig';
-import { LoggingContext } from '../../../context/LoggingContext';
+import { useEmitLog } from '../../../stores/logger';
 import { forgivingStringToMillis } from '../../../utils/dateConfig';
-import { stringFromMillis } from '../../../utils/time';
 import { TimeEntryField } from '../../../utils/timesManager';
 
 import style from './TimeInput.module.scss';
@@ -24,7 +24,7 @@ export default function TimeInput(props: TimeInputProps) {
   const {
     name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0,
   } = props;
-  const { emitError } = useContext(LoggingContext);
+  const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState('');
 
@@ -34,7 +34,7 @@ export default function TimeInput(props: TimeInputProps) {
   const resetValue = useCallback(() => {
     // Todo: check if change is necessary
     try {
-      setValue(stringFromMillis(time + delay));
+      setValue(millisToString(time + delay));
     } catch (error) {
       emitError(`Unable to parse date: ${error}`);
     }
@@ -97,7 +97,7 @@ export default function TimeInput(props: TimeInputProps) {
     const success = handleSubmit(newValue);
     if (success) {
       const ms = forgivingStringToMillis(newValue);
-      setValue(stringFromMillis(ms + delay));
+      setValue(millisToString(ms + delay));
     } else {
       resetValue();
     }

apps/client/src/common/components/upload-modal/UploadModal.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useContext, useRef, useState } from 'react';
+import { ChangeEvent, useCallback, useRef, useState } from 'react';
 import {
   Button,
   Checkbox,
@@ -21,7 +21,7 @@ import { useQueryClient } from '@tanstack/react-query';
 
 import { RUNDOWN_TABLE } from '../../api/apiConstants';
 import { uploadData } from '../../api/ontimeApi';
-import { LoggingContext } from '../../context/LoggingContext';
+import { useEmitLog } from '../../stores/logger';
 import TooltipActionBtn from '../buttons/TooltipActionBtn';
 
 import { validateFile } from './utils';
@@ -35,7 +35,7 @@ interface UploadModalProps {
 
 export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
   const queryClient = useQueryClient();
-  const { emitError } = useContext(LoggingContext);
+  const { emitError } = useEmitLog();
   const [errors, setErrors] = useState<string[]>([]);
   const [file, setFile] = useState<File | null>(null);
   const [progress, setProgress] = useState(0);