Offline indicator

apps/client/src/common/components/connected-indicator/ConnectedIndicator.tsx

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+import { Alert, AlertIcon, Tooltip } from '@chakra-ui/react';
+
+import { useAppMode } from '../../stores/appModeStore';
+
+import moduleStyle from './ConnectedIndicator.module.scss';
+
+export function ConnectedIndicator(props: { style?: CSSProperties }) {
+  const { connected } = useAppMode();
+  const { style } = props;
+  return (
+    <Alert status='error' variant='ontime-transparent-warn' marginLeft='10' width='10' style={style}>
+      <Tooltip label='Server Disconnected!'>
+        <span>
+          <AlertIcon hidden={!connected} className={moduleStyle.blink} />
+        </span>
+      </Tooltip>
+    </Alert>
+  );
+}

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,6 +1,7 @@
 import { memo, useMemo } from 'react';
 import { millisToString } from 'ontime-utils';
 
+import { ConnectedIndicator } from '../../common/components/connected-indicator/ConnectedIndicator';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import { useRuntimeOverview, useRuntimePlaybackOverview, useTimer } from '../../common/hooks/useSocket';
 import useProjectData from '../../common/hooks-query/useProjectData';
@@ -26,6 +27,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>
@@ -64,6 +66,7 @@ function _CuesheetOverview({ children }: { children: React.ReactNode }) {
     <div className={style.overview}>
       <ErrorBoundary>
         <div className={style.nav}>{children}</div>
+        <ConnectedIndicator />
         <div className={style.info}>
           <TitlesOverview />
           <TimerOverview />
@@ -95,7 +98,7 @@ function TitlesOverview() {
 }
 
 function TimerOverview() {
-  const {current} = useTimer();
+  const { current } = useTimer();
 
   const display = millisToString(current);
 

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -6,6 +6,7 @@ import { CustomFields, Message, OntimeEvent, ProjectData, Settings, SupportedEve
 import { millisToString, removeLeadingZero } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/constants';
+import { ConnectedIndicator } from '../../../common/components/connected-indicator/ConnectedIndicator';
 import ProgressBar from '../../../common/components/progress-bar/ProgressBar';
 import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
@@ -99,6 +100,8 @@ export default function Backstage(props: BackstageProps) {
 
   return (
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
+      <ConnectedIndicator style={{ position: 'absolute', left: '1em', top: '0.5em' }} />
+
       <ViewParamsEditor paramFields={backstageOptions} />
       <div className='project-header'>
         {general.title}

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: {