diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx index dba9e5c4d..c71f15d9f 100644 --- a/web/components/stores/ClientConfigStore.tsx +++ b/web/components/stores/ClientConfigStore.tsx @@ -158,7 +158,7 @@ export const ClientConfigStore: FC = () => { const [currentUser, setCurrentUser] = useRecoilState(currentUserAtom); const setChatAuthenticated = useSetRecoilState(chatAuthenticatedAtom); const [clientConfig, setClientConfig] = useRecoilState(clientConfigStateAtom); - const [serverStatus, setServerStatus] = useRecoilState(serverStatusState); + const [, setServerStatus] = useRecoilState(serverStatusState); const setClockSkew = useSetRecoilState(clockSkewAtom); const [chatMessages, setChatMessages] = useRecoilState(chatMessagesAtom); const [accessToken, setAccessToken] = useRecoilState(accessTokenAtom); @@ -166,7 +166,6 @@ export const ClientConfigStore: FC = () => { const setGlobalFatalErrorMessage = useSetRecoilState(fatalErrorStateAtom); const setWebsocketService = useSetRecoilState(websocketServiceAtom); const [hiddenMessageIds, setHiddenMessageIds] = useRecoilState(removedMessageIdsAtom); - const [, setHasLoadedStatus] = useState(false); const [hasLoadedConfig, setHasLoadedConfig] = useState(false); let ws: WebsocketService; @@ -177,21 +176,27 @@ export const ClientConfigStore: FC = () => { message, }); }; - const sendEvent = (event: string) => { + const sendEvent = (events: string[]) => { // console.debug('---- sending event:', event); - appStateSend({ type: event }); + appStateSend(events); }; const handleStatusChange = (status: ServerStatus) => { if (appState.matches('loading')) { - sendEvent(AppStateEvent.Loaded); + const events = [AppStateEvent.Loaded]; + if (status.online) { + events.push(AppStateEvent.Online); + } else { + events.push(AppStateEvent.Offline); + } + sendEvent(events); return; } if (status.online && appState.matches('ready')) { - sendEvent(AppStateEvent.Online); + sendEvent([AppStateEvent.Online]); } else if (!status.online && !appState.matches('ready.offline')) { - sendEvent(AppStateEvent.Offline); + sendEvent([AppStateEvent.Offline]); } }; @@ -210,8 +215,9 @@ export const ClientConfigStore: FC = () => { const updateServerStatus = async () => { try { const status = await ServerStatusService.getStatus(); + handleStatusChange(status); setServerStatus(status); - setHasLoadedStatus(true); + const { serverTime } = status; const clockSkew = new Date(serverTime).getTime() - Date.now(); @@ -219,7 +225,7 @@ export const ClientConfigStore: FC = () => { setGlobalFatalErrorMessage(null); } catch (error) { - sendEvent(AppStateEvent.Fail); + sendEvent([AppStateEvent.Fail]); setGlobalFatalError('Unable to reach Owncast server', serverConnectivityError); console.error(`serverStatusState -> getStatus() ERROR: \n${error}`); } @@ -233,7 +239,7 @@ export const ClientConfigStore: FC = () => { } try { - sendEvent(AppStateEvent.NeedsRegister); + sendEvent([AppStateEvent.NeedsRegister]); const response = await ChatService.registerUser(optionalDisplayName); const { accessToken: newAccessToken, displayName: newDisplayName, displayColor } = response; if (!newAccessToken) { @@ -248,7 +254,7 @@ export const ClientConfigStore: FC = () => { setAccessToken(newAccessToken); setLocalStorage(ACCESS_TOKEN_KEY, newAccessToken); } catch (e) { - sendEvent(AppStateEvent.Fail); + sendEvent([AppStateEvent.Fail]); console.error(`ChatService -> registerUser() ERROR: \n${e}`); } }; @@ -356,17 +362,13 @@ export const ClientConfigStore: FC = () => { if ((window as any).statusHydration) { const status = JSON.parse((window as any).statusHydration); setServerStatus(status); - setHasLoadedStatus(true); + handleStatusChange(status); } } catch (e) { console.error('error parsing status hydration', e); } }, []); - useEffect(() => { - handleStatusChange(serverStatus); - }, [serverStatus]); - useEffect(() => { if (!clientConfig.chatDisabled && accessToken && hasLoadedConfig) { startChat();