You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.5 KiB
39 lines
1.5 KiB
import React from 'react'; |
|
import { useRecoilValue } from 'recoil'; |
|
import { |
|
clientConfigStateAtom, |
|
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/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; |
|
const online = useRecoilValue<boolean>(isOnlineSelector); |
|
return ( |
|
<> |
|
<ClientConfigStore /> |
|
<div className="video-embed"> |
|
{online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />} |
|
{!online && <OfflineBanner title={name} text="Stream is offline text goes here." />}{' '} |
|
<Statusbar |
|
online={online} |
|
lastConnectTime={lastConnectTime} |
|
lastDisconnectTime={lastDisconnectTime} |
|
viewerCount={viewerCount} |
|
/> |
|
</div> |
|
</> |
|
); |
|
}
|
|
|