fix(embed): allow flexible player sizes for embeds. Closes #2984

This commit is contained in:
Gabe Kangas 2023-05-04 11:29:48 -07:00
parent 01b1003be6
commit 7261b1d49f
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
3 changed files with 10 additions and 6 deletions

View File

@ -37,6 +37,7 @@
} }
} }
.fill { .embedded {
height: 100vh;
max-height: unset; max-height: unset;
} }

View File

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

View File

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