From 5ec04a7bdfd0fe70209505a55257a27cdd47130e Mon Sep 17 00:00:00 2001 From: olzzon Date: Sat, 21 Mar 2020 09:29:05 +0100 Subject: [PATCH] fix: Client indicate when server is offline --- client/assets/css/App.css | 14 ++++++++++++++ client/components/App.tsx | 8 ++++++++ client/utils/SocketClientHandlers.ts | 25 +++++++++++++++++++++++-- server/reducers/settingsActions.ts | 1 + server/reducers/settingsReducer.ts | 13 ++++++++++--- 5 files changed, 56 insertions(+), 5 deletions(-) diff --git a/client/assets/css/App.css b/client/assets/css/App.css index 01a8d9a1..6f70ca23 100644 --- 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 index c68205fd..e5b2603b 100644 --- a/client/components/App.tsx +++ b/client/components/App.tsx @@ -30,6 +30,7 @@ class App extends React.Component { 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 { render() { return (
+ {!this.props.store.settings[0].serverOnline ? +
+ TRYING TO CONNECT TO SISYFOS SERVER +
+ : + null + } {!window.location.search.includes('minimonitor=1') ? : null } {window.location.search.includes('minimonitor=1') ? : null } {this.props.store.settings[0].showStorage ? : null} diff --git a/client/utils/SocketClientHandlers.ts b/client/utils/SocketClientHandlers.ts index 1733996c..dcb751ec 100644 --- 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 index a8c77862..5e2e2063 100644 --- 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 index c3a672a3..f6833397 100644 --- 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 = [ fadeTime: 120, voFadeTime: 280, showPfl: false, - mixerOnline: false + mixerOnline: false, + serverOnline: true }, ]; @@ -115,6 +118,9 @@ 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; @@ -122,6 +128,7 @@ export const settings = (state = defaultSettingsReducerState, action: any): Arra 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';