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

@ -22,7 +22,7 @@
height: 400px;
max-height: 400px;
}
//set height of player for mobile
@include screen(mobile) {
height: 250px;
@ -37,6 +37,7 @@
}
}
.fill {
.embedded {
height: 100vh;
max-height: unset;
}

View file

@ -30,7 +30,7 @@ export type OwncastPlayerProps = {
initiallyMuted?: boolean;
title: string;
className?: string;
fill?: boolean;
embedded?: boolean;
};
export const OwncastPlayer: FC<OwncastPlayerProps> = ({
@ -39,7 +39,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
initiallyMuted = false,
title,
className,
fill,
embedded = false,
}) => {
const VideoSettingsService = useContext(VideoSettingsServiceContext);
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 && (
<div className={styles.player}>
<VideoJS options={videoJsOptions} onReady={handlePlayerReady} aria-label={title} />

View file

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