From 7261b1d49fec295fc6c1d3f3b213b018ee097d24 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 4 May 2023 11:29:48 -0700
Subject: [PATCH] fix(embed): allow flexible player sizes for embeds. Closes
 #2984

---
 .../video/OwncastPlayer/OwncastPlayer.module.scss        | 5 +++--
 web/components/video/OwncastPlayer/OwncastPlayer.tsx     | 9 ++++++---
 web/pages/embed/video/index.tsx                          | 2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
index f0b597d46..a49218157 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
@@ -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;
 }
diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.tsx
index c0b4238b1..e04b67882 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx
@@ -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} />
diff --git a/web/pages/embed/video/index.tsx b/web/pages/embed/video/index.tsx
index 3523d40bd..8a91ad413 100644
--- a/web/pages/embed/video/index.tsx
+++ b/web/pages/embed/video/index.tsx
@@ -76,7 +76,7 @@ export default function VideoEmbed() {
         online={online}
         initiallyMuted={initiallyMuted}
         title={streamTitle || name}
-        fill
+        embedded
       />
       <Statusbar
         online={online}