From f725bc28f423734bfd1b95037837535a8b30bea9 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sat, 21 Jan 2023 12:50:30 -0800
Subject: [PATCH] Make the player fit the full width but content stay the same.
 For #2360

---
 web/components/ui/Content/Content.tsx                |  5 +++--
 .../video/OwncastPlayer/OwncastPlayer.module.scss    | 12 ++++++++----
 web/components/video/OwncastPlayer/OwncastPlayer.tsx |  1 +
 web/components/video/VideoJS/VideoJS.module.scss     |  4 ----
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 6be075376..4e6e3f50a 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -233,7 +233,7 @@ export const Content: FC = () => {
   const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector);
   const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
   const currentUser = useRecoilValue(currentUserAtom);
-
+  const serverStatus = useRecoilValue<ServerStatus>(serverStatusState);
   const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const online = useRecoilValue<boolean>(isOnlineSelector);
@@ -259,6 +259,7 @@ export const Content: FC = () => {
   const { account: fediverseAccount, enabled: fediverseEnabled } = federation;
   const { browser: browserNotifications } = notifications;
   const { enabled: browserNotificationsEnabled } = browserNotifications;
+  const { online: isStreamLive } = serverStatus;
   const [externalActionToDisplay, setExternalActionToDisplay] = useState<ExternalAction>(null);
 
   const [supportsBrowserNotifications, setSupportsBrowserNotifications] = useState(false);
@@ -346,7 +347,7 @@ export const Content: FC = () => {
                   onFollowClick={() => setShowFollowModal(true)}
                 />
               )}
-              {online && (
+              {isStreamLive && (
                 <Statusbar
                   online={online}
                   lastConnectTime={lastConnectTime}
diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
index 3762a20f6..65ac31a62 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
@@ -1,16 +1,20 @@
+@import '../../../styles/mixins.scss';
+
 .container {
   display: grid;
   width: 100%;
   justify-items: center;
+  height: 78vh;
+
+  @include screen(tablet) {
+    aspect-ratio: 16 / 9;
+    height: unset;
+  }
 
   .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 884e9cfaf..2c033717f 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx
@@ -218,6 +218,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
     controls: true,
     responsive: true,
     fluid: false,
+    fill: true,
     playsinline: true,
     liveui: true,
     preload: 'auto',
diff --git a/web/components/video/VideoJS/VideoJS.module.scss b/web/components/video/VideoJS/VideoJS.module.scss
index eff313b0e..79aee71c0 100644
--- a/web/components/video/VideoJS/VideoJS.module.scss
+++ b/web/components/video/VideoJS/VideoJS.module.scss
@@ -1,9 +1,5 @@
 @import '../../../styles/mixins.scss';
 
 .player {
-  height: auto !important;
   width: 100%;
-  video {
-    position: static !important;
-  }
 }