fix: Client indicate when server is offline

olzzon · Mar 21, 2020 · 5ec04a7 · 5ec04a7
1 parent 1b10cb4
commit 5ec04a7
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 5 deletions.
diff --git a/client/assets/css/App.css b/client/assets/css/App.css
@@ -11,3 +11,17 @@ body {
     position: relative;
     text-align: center;
 }
+
+.server-offline {
+    position: absolute;
+    top: 30vh;
+    left: 30vw;
+    margin-right: 30vw;
+    color: aliceblue;
+    background-color: rgba(163, 1, 1, 0.65);
+    font-size: 400%;
+    border-radius: 8px;
+    border-width: 4px;
+    border-color: rgba(144, 0, 0, 0.596);
+    z-index: 200;
+}
diff --git a/client/components/App.tsx b/client/components/App.tsx
@@ -30,6 +30,7 @@ class App extends React.Component<IAppProps> {
     public shouldComponentUpdate(nextProps: IAppProps) {
         return (
             nextProps.store.settings[0].showSettings != this.props.store.settings[0].showSettings
+            || nextProps.store.settings[0].serverOnline != this.props.store.settings[0].serverOnline
             || nextProps.store.settings[0].showStorage != this.props.store.settings[0].showStorage
         )
     }
@@ -72,6 +73,13 @@ class App extends React.Component<IAppProps> {
     render() {
         return (
         <div>
+            {!this.props.store.settings[0].serverOnline ? 
+                <div className="server-offline">
+                    TRYING TO CONNECT TO SISYFOS SERVER
+                </div> 
+            :
+                 null 
+            }
             {!window.location.search.includes('minimonitor=1') ? <Channels /> : null }
             {window.location.search.includes('minimonitor=1') ? <MiniChannels /> : null }
             {this.props.store.settings[0].showStorage ? <Storage/> : null}

diff --git a/client/utils/SocketClientHandlers.ts b/client/utils/SocketClientHandlers.ts
@@ -1,10 +1,28 @@
 import { SET_COMPLETE_FADER_STATE, SET_VU_LEVEL, SET_SINGLE_FADER_STATE } from "../../server/reducers/faderActions";
 import { SET_COMPLETE_CH_STATE, SET_SINGLE_CH_STATE } from "../../server/reducers/channelActions";
-import { UPDATE_SETTINGS, SET_MIXER_ONLINE } from "../../server/reducers/settingsActions";
+import { UPDATE_SETTINGS, SET_MIXER_ONLINE, SET_SERVER_ONLINE } from "../../server/reducers/settingsActions";
 import { SOCKET_SET_VU, SOCKET_RETURN_SNAPSHOT_LIST, SOCKET_SET_FULL_STORE, SOCKET_SET_STORE_FADER, SOCKET_SET_STORE_CHANNEL, SOCKET_RETURN_CCG_LIST } from "../../server/constants/SOCKET_IO_DISPATCHERS";
 
 export const socketClientHandlers = () => {
     window.socketIoClient
+    .on('connect', (
+        () => {
+            window.storeRedux.dispatch({
+                type: SET_SERVER_ONLINE,
+                serverOnline: true
+            })
+            console.log('CONNECTED TO SISYFOS SERVER')
+        }
+    ))
+    .on('disconnect', (
+        () => {
+            window.storeRedux.dispatch({
+                type: SET_SERVER_ONLINE,
+                serverOnline: false
+            })
+            console.log('LOST CONNECTION TO SISYFOS SERVER')
+        }
+    ))
     .on(SOCKET_SET_FULL_STORE, (
         (payload: any) => { 
             // console.log('STATE RECEIVED :', payload)
@@ -28,7 +46,10 @@ export const socketClientHandlers = () => {
                     type: SET_MIXER_ONLINE,
                     mixerOnline: payload.settings[0].mixerOnline
                 })
-
+                window.storeRedux.dispatch({
+                    type: SET_SERVER_ONLINE,
+                    serverOnline: true
+                })
             }
 
         })

diff --git a/server/reducers/settingsActions.ts b/server/reducers/settingsActions.ts
@@ -6,3 +6,4 @@ export const TOGGLE_SHOW_STORAGE = 'TOGGLE_SHOW_STORAGE'
 export const TOGGLE_SHOW_SNAPS = 'TOGGLE_SHOW_SNAPS'
 export const UPDATE_SETTINGS = 'UPDATE_SETTINGS'
 export const SET_MIXER_ONLINE = 'SET_MIXER_ONLINE'
+export const SET_SERVER_ONLINE = 'SET_SERVER_ONLINE'
diff --git a/server/reducers/settingsReducer.ts b/server/reducers/settingsReducer.ts
@@ -8,7 +8,8 @@ import {
     TOGGLE_SHOW_STORAGE,
     UPDATE_SETTINGS,
     SET_MIXER_ONLINE,
-    TOGGLE_SHOW_MONITOR_OPTIONS
+    TOGGLE_SHOW_MONITOR_OPTIONS,
+    SET_SERVER_ONLINE
 } from  '../reducers/settingsActions'
 
 export interface ISettings {
@@ -41,7 +42,8 @@ export interface ISettings {
     automationMode: boolean,
     offtubeMode: boolean,
     showPfl: boolean,
-    mixerOnline: boolean
+    mixerOnline: boolean,
+    serverOnline: boolean
 }
 
 
@@ -76,7 +78,8 @@ const defaultSettingsReducerState: Array<ISettings> = [
         fadeTime: 120,
         voFadeTime: 280, 
         showPfl: false,
-        mixerOnline: false
+        mixerOnline: false,
+        serverOnline: true
     },
 ];
 
@@ -115,13 +118,17 @@ export const settings = (state = defaultSettingsReducerState, action: any): Arra
         case SET_MIXER_ONLINE:
             nextState[0].mixerOnline = action.mixerOnline;
             return nextState;
+        case SET_SERVER_ONLINE:
+            nextState[0].serverOnline = action.serverOnline;
+            return nextState;
         case UPDATE_SETTINGS:
             nextState[0] = action.settings;
             nextState[0].showSettings = state[0].showSettings;
             nextState[0].showOptions = state[0].showOptions;
             nextState[0].showMonitorOptions = state[0].showMonitorOptions;
             nextState[0].showStorage = state[0].showStorage;
             nextState[0].showChanStrip = state[0].showChanStrip;
+            nextState[0].serverOnline = state[0].serverOnline;
             if (typeof MixerProtocolPresets[nextState[0].mixerProtocol] === 'undefined')
                 {
                     nextState[0].mixerProtocol = 'genericMidi';