Refactor app state to be a state machine with access selectors

web/pages/_app.tsx

@@ -23,6 +23,7 @@ import '../styles/offline-notice.scss';
 import { AppProps } from 'next/app';
 import { Router, useRouter } from 'next/router';
 
+import { RecoilRoot } from 'recoil';
 import AdminLayout from '../components/layouts/admin-layout';
 import SimpleLayout from '../components/layouts/SimpleLayout';
 
@@ -31,7 +32,11 @@ function App({ Component, pageProps }: AppProps) {
   if (router.pathname.startsWith('/admin')) {
     return <AdminLayout pageProps={pageProps} Component={Component} router={router} />;
   }
-  return <SimpleLayout pageProps={pageProps} Component={Component} router={router} />;
+  return (
+    <RecoilRoot>
+      <SimpleLayout pageProps={pageProps} Component={Component} router={router} />
+    </RecoilRoot>
+  );
 }
 
 export default App;

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>
+    </>
   );
 }

web/pages/index.tsx

@@ -1,10 +1,5 @@
-import { RecoilRoot } from 'recoil';
 import Main from '../components/layouts/Main';
 
 export default function Home() {
-  return (
-    <RecoilRoot>
-      <Main />
-    </RecoilRoot>
-  );
+  return <Main />;
 }