Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(embed): set background color of video embed

Browse Source
This commit is contained in:
Gabe Kangas 2023-04-27 10:07:01 -07:00
parent 58009021ba
commit 1dc71004c9
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/pages/embed/video/VideoEmbed.module.scss Normal file
View File

@ -0,0 +1,8 @@
.onlineContainer {
height: 96vh;
background-color: var(--theme-color-components-video-status-bar-background);
@media only screen and (max-width: 768px) {
height: 100vh;
}
}

20
web/pages/embed/video/index.tsx
View File

@ -1,4 +1,5 @@
import React from 'react'; /* eslint-disable react/no-unknown-property */
import React, { useEffect } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Skeleton } from 'antd'; import { Skeleton } from 'antd';
@ -16,6 +17,7 @@ import { ClientConfig } from '../../../interfaces/client-config.model';
import { ServerStatus } from '../../../interfaces/server-status.model'; import { ServerStatus } from '../../../interfaces/server-status.model';
import { AppStateOptions } from '../../../components/stores/application-state'; import { AppStateOptions } from '../../../components/stores/application-state';
import { Theme } from '../../../components/theme/Theme'; import { Theme } from '../../../components/theme/Theme';
import styles from './VideoEmbed.module.scss';
export default function VideoEmbed() { export default function VideoEmbed() {
const status = useRecoilValue<ServerStatus>(serverStatusState); const status = useRecoilValue<ServerStatus>(serverStatusState);
@ -46,6 +48,11 @@ export default function VideoEmbed() {
const loadingState = <Skeleton active style={{ padding: '10px' }} paragraph={{ rows: 10 }} />; const loadingState = <Skeleton active style={{ padding: '10px' }} paragraph={{ rows: 10 }} />;
// This is a hack to force a specific body background color for just this page.
useEffect(() => {
document.body.classList.add('body-background');
}, []);
const offlineState = ( const offlineState = (
<OfflineBanner <OfflineBanner
streamName={name} streamName={name}
@ -56,7 +63,14 @@ export default function VideoEmbed() {
); );
const onlineState = ( const onlineState = (
<> <div className={styles.onlineContainer}>
<style jsx global>
{`
.body-background {
background: var(--theme-color-components-video-status-bar-background);
}
`}
</style>
<OwncastPlayer <OwncastPlayer
source="/hls/stream.m3u8" source="/hls/stream.m3u8"
online={online} online={online}
@ -70,7 +84,7 @@ export default function VideoEmbed() {
lastDisconnectTime={lastDisconnectTime} lastDisconnectTime={lastDisconnectTime}
viewerCount={viewerCount} viewerCount={viewerCount}
/> />
</> </div>
); );
const getView = () => { const getView = () => {