From d0cc0d8e56685a1523cd2d6c2de21f5a6692558b Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sat, 19 Nov 2022 13:35:37 -0800
Subject: [PATCH] Play around with sizing and placement of player. For #2204
 and #2303

---
 .../OwncastPlayer/OwncastPlayer.module.scss      | 16 ++++++++++++++++
 .../video/OwncastPlayer/OwncastPlayer.tsx        |  8 +++++---
 web/components/video/VideoJS/VideoJS.module.scss |  5 -----
 3 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 web/components/video/OwncastPlayer/OwncastPlayer.module.scss

diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
new file mode 100644
index 000000000..3762a20f6
--- /dev/null
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
@@ -0,0 +1,16 @@
+.container {
+  display: grid;
+  width: 100%;
+  justify-items: center;
+
+  .player,
+  .poster {
+    // position: static;
+    // height: auto !important;
+    width: 100%;
+    grid-column: 1;
+    grid-row: 1;
+    aspect-ratio: 16 / 9;
+    max-height: 75vh;
+  }
+}
diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.tsx
index d3e1c9b50..9d25c97ed 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx
@@ -10,6 +10,8 @@ import PlaybackMetrics from '../metrics/playback';
 import createVideoSettingsMenuButton from '../settings-menu';
 import LatencyCompensator from '../latencyCompensator';
 
+import styles from './OwncastPlayer.module.scss';
+
 const VIDEO_CONFIG_URL = '/api/video/variants';
 const PLAYER_VOLUME = 'owncast_volume';
 const LATENCY_COMPENSATION_ENABLED = 'latencyCompensatorEnabled';
@@ -297,13 +299,13 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({ source, online }) => {
   );
 
   return (
-    <div style={{ display: 'grid', width: '100% !important', aspectRatio: '16/9' }}>
+    <div className={styles.container}>
       {online && (
-        <div style={{ gridColumn: 1, gridRow: 1 }}>
+        <div className={styles.player}>
           <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
         </div>
       )}
-      <div style={{ gridColumn: 1, gridRow: 1 }}>
+      <div className={styles.poster}>
         {!videoPlaying && (
           <VideoPoster online={online} initialSrc="/thumbnail.jpg" src="/thumbnail.jpg" />
         )}
diff --git a/web/components/video/VideoJS/VideoJS.module.scss b/web/components/video/VideoJS/VideoJS.module.scss
index 78932f051..eff313b0e 100644
--- a/web/components/video/VideoJS/VideoJS.module.scss
+++ b/web/components/video/VideoJS/VideoJS.module.scss
@@ -7,8 +7,3 @@
     position: static !important;
   }
 }
-
-.poster {
-  width: 100%;
-  height: 100%;
-}