From 9a7925444f51624bd532a8b531528fa89b15fb42 Mon Sep 17 00:00:00 2001
From: Patrick Bollinger <owner@pjbollinger.com>
Date: Sun, 22 Oct 2023 00:46:10 -0400
Subject: [PATCH] Fix embedded status bar being cut off (#3352)

* 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
---
 .../video/OwncastPlayer/OwncastPlayer.module.scss         | 5 -----
 web/components/video/OwncastPlayer/OwncastPlayer.tsx      | 7 +------
 web/pages/embed/video/VideoEmbed.module.scss              | 8 +++-----
 web/pages/embed/video/index.tsx                           | 1 -
 4 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
index 0b0e5bc2f..0dc225d1c 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
@@ -30,8 +30,3 @@
     grid-row: 1;
   }
 }
-
-.embedded {
-  height: 96vh; // Leave room for the status bar
-  max-height: unset;
-}
diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.tsx
index 2794bdfad..c6d434b89 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx
@@ -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} />
diff --git a/web/pages/embed/video/VideoEmbed.module.scss b/web/pages/embed/video/VideoEmbed.module.scss
index 443403f8d..701d1f5da 100644
--- a/web/pages/embed/video/VideoEmbed.module.scss
+++ b/web/pages/embed/video/VideoEmbed.module.scss
@@ -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;
 }
diff --git a/web/pages/embed/video/index.tsx b/web/pages/embed/video/index.tsx
index 89084e38e..6b2b7893f 100644
--- a/web/pages/embed/video/index.tsx
+++ b/web/pages/embed/video/index.tsx
@@ -79,7 +79,6 @@ export default function VideoEmbed() {
         online={online}
         initiallyMuted={initiallyMuted}
         title={streamTitle || name}
-        embedded
       />
       <Statusbar
         online={online}