Offline indicator

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

@@ -21,17 +21,20 @@ type AppModeStore = {
   setMode: (mode: AppMode) => void;
   cursor: string | null;
   setCursor: (cursor: string | null) => void;
+  connected: boolean;
+  setConnected: (c: boolean) => void;
 };
 
 export const useAppMode = create<AppModeStore>()((set) => ({
   mode: getModeFromSession(),
   cursor: null,
   setMode: (mode: AppMode) => {
     persistModeToSession(mode);
-
     return set(() => {
       return { mode };
     });
   },
   setCursor: (cursor: string | null) => set(() => ({ cursor })),
+  connected: false,
+  setConnected: (connected: boolean) => set(() => ({ connected })),
 }));

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

@@ -2,6 +2,7 @@ import { Log, RuntimeStore } from 'ontime-types';
 
 import { isProduction, RUNTIME, websocketUrl } from '../api/constants';
 import { ontimeQueryClient } from '../queryClient';
+import { useAppMode } from '../stores/appModeStore';
 import { socketClientName } from '../stores/connectionName';
 import { addLog } from '../stores/logger';
 import { patchRuntime, runtimeStore } from '../stores/runtime';
@@ -20,6 +21,7 @@ export const connectSocket = (preferredClientName?: string) => {
     clearTimeout(reconnectTimeout as NodeJS.Timeout);
     hasConnected = true;
     reconnectAttempts = 0;
+    useAppMode.setState({ connected: true });
 
     if (preferredClientName) {
       socketSendJson('set-client-name', preferredClientName);
@@ -28,6 +30,8 @@ export const connectSocket = (preferredClientName?: string) => {
 
   websocket.onclose = () => {
     console.warn('WebSocket disconnected');
+    useAppMode.setState({ connected: false });
+
     if (shouldReconnect) {
       reconnectTimeout = setTimeout(() => {
         console.warn('WebSocket: attempting reconnect');

apps/client/src/features/overview/Overview.tsx

@@ -1,9 +1,11 @@
 import { memo, useMemo } from 'react';
+import { Alert, AlertIcon, Tooltip } from '@chakra-ui/react';
 import { millisToString } from 'ontime-utils';
 
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import { useRuntimeOverview, useRuntimePlaybackOverview, useTimer } from '../../common/hooks/useSocket';
 import useProjectData from '../../common/hooks-query/useProjectData';
+import { useAppMode } from '../../common/stores/appModeStore';
 import { enDash } from '../../common/utils/styleUtils';
 
 import { TimeColumn, TimeRow } from './composite/TimeLayout';
@@ -26,6 +28,7 @@ function _EditorOverview({ children }: { children: React.ReactNode }) {
     <div className={style.overview}>
       <ErrorBoundary>
         <div className={style.nav}>{children}</div>
+        <ConnectedIndicator />
         <div className={style.info}>
           <TitlesOverview />
           <div>
@@ -95,7 +98,7 @@ function TitlesOverview() {
 }
 
 function TimerOverview() {
-  const {current} = useTimer();
+  const { current } = useTimer();
 
   const display = millisToString(current);
 
@@ -125,3 +128,16 @@ function RuntimeOverview() {
     </>
   );
 }
+
+function ConnectedIndicator() {
+  const { connected } = useAppMode();
+  return (
+    <Alert status='error' variant='ontime-transparent-warn' marginLeft='10' width='10'>
+      <Tooltip label='Server Disconnected!'>
+        <span>
+          <AlertIcon hidden={!connected} className={style.blink} />
+        </span>
+      </Tooltip>
+    </Alert>
+  );
+}

apps/client/src/theme/OntimeAlert.ts

@@ -10,3 +10,16 @@ export const ontimeAlertOnDark = {
     color: '#578AF4', // $blue-500
   },
 };
+
+export const ontimeRedAlertOnDark = {
+  container: {
+    fontSize: 'calc(1rem - 1px)',
+    backgroundColor: '#0000', // $gray-1300
+    color: '#e2e2e2', // $gray-200
+    borderRadius: '3px',
+  },
+  icon: {
+    alignSelf: 'start',
+    color: 'red', // $blue-500
+  },
+};

apps/client/src/theme/theme.ts

@@ -1,6 +1,6 @@
 import { extendTheme } from '@chakra-ui/react';
 
-import { ontimeAlertOnDark } from './OntimeAlert';
+import { ontimeAlertOnDark, ontimeRedAlertOnDark } from './OntimeAlert';
 import {
   ontimeButtonFilled,
   ontimeButtonGhosted,
@@ -33,6 +33,7 @@ const theme = extendTheme({
     Alert: {
       variants: {
         'ontime-on-dark-info': { ...ontimeAlertOnDark },
+        'ontime-transparent-warn': { ...ontimeRedAlertOnDark },
       },
     },
     Button: {