Refactor app state to be a state machine with access selectors

web/pages/embed/video/index.tsx

@@ -1,10 +1,34 @@
+import React from 'react';
+import { useRecoilValue } from 'recoil';
+import {
+  ClientConfigStore,
+  isOnlineSelector,
+  serverStatusState,
+} from '../../../components/stores/ClientConfigStore';
+import OfflineBanner from '../../../components/ui/OfflineBanner/OfflineBanner';
+import Statusbar from '../../../components/ui/Statusbar/Statusbar';
 import OwncastPlayer from '../../../components/video/OwncastPlayer';
+import { ServerStatus } from '../../../interfaces/server-status.model';
 
 export default function VideoEmbed() {
-  const online = false;
+  const status = useRecoilValue<ServerStatus>(serverStatusState);
+
+  // const { extraPageContent, version, socialHandles, name, title, tags } = clientConfig;
+  const { viewerCount, lastConnectTime, lastDisconnectTime } = status;
+  const online = useRecoilValue<boolean>(isOnlineSelector);
   return (
-    <div className="video-embed">
-      <OwncastPlayer source="/hls/stream.m3u8" online={online} />
-    </div>
+    <>
+      <ClientConfigStore />
+      <div className="video-embed">
+        {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
+        {!online && <OfflineBanner text="Stream is offline text goes here." />}{' '}
+        <Statusbar
+          online={online}
+          lastConnectTime={lastConnectTime}
+          lastDisconnectTime={lastDisconnectTime}
+          viewerCount={viewerCount}
+        />
+      </div>
+    </>
   );
 }