Add first pass for offline banner component

This commit is contained in:
Gabe Kangas
2022-05-25 22:52:27 -07:00
parent 281829a473
commit f041727f07
6 changed files with 70 additions and 10 deletions

View File

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