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 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 Gabe Kangas
parent 0f33546804
commit 1da0828aa3
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;
background-color: var(--theme-color-components-video-status-bar-background);
@media only screen and (width <= 768px) {
height: 100vh;
}
background-color: var(--theme-color-components-video-status-bar-background);
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}