LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Fix embedded status bar being cut off (#3352)

Browse Source 
* Fix embedded status bar being cut off

This should resolve https://github.com/owncast/owncast/issues/3210.

As recommended in the discussion, flexbox was the way to solve this issue.
The main thing that needed to be addressed though was not applying too many constraints on the OwncastPlayer component just because it was embedded.
By removing the embedded constraints, styling appears to be working as expected.
I'll attach screenshots to the pull request.

* Fix eslint error
This commit is contained in:
Patrick Bollinger 2023-10-22 00:46:10 -04:00 committed by GitHub
parent 0b16a2f831
commit 9a7925444f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 4 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/video/OwncastPlayer/OwncastPlayer.module.scss
View File

@ -30,8 +30,3 @@
grid-row: 1;
}
}
.embedded {
height: 96vh; // Leave room for the status bar
max-height: unset;
}

7
web/components/video/OwncastPlayer/OwncastPlayer.tsx
View File

@ -29,7 +29,6 @@ export type OwncastPlayerProps = {
initiallyMuted?: boolean;
title: string;
className?: string;
embedded?: boolean;
};
export const OwncastPlayer: FC<OwncastPlayerProps> = ({
@ -38,7 +37,6 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
initiallyMuted = false,
title,
className,
embedded = false,
}) => {
const VideoSettingsService = useContext(VideoSettingsServiceContext);
const playerRef = React.useRef(null);
@ -301,10 +299,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
/>
)}
>
<div
className={classNames(styles.container, className, embedded && styles.embedded)}
id="player"
>
<div className={classNames(styles.container, className)} id="player">
{online && (
<div className={styles.player}>
<VideoJS options={videoJsOptions} onReady={handlePlayerReady} aria-label={title} />

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

@ -1,8 +1,6 @@
.onlineContainer {
height: 96vh;
height: 100vh;
background-color: var(--theme-color-components-video-status-bar-background);
@media only screen and (width <= 768px) {
height: 100vh;
}
display: flex;
flex-direction: column;
}

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

@ -79,7 +79,6 @@ export default function VideoEmbed() {
online={online}
initiallyMuted={initiallyMuted}
title={streamTitle || name}
embedded
/>
<Statusbar
online={online}