Make the player fit the full width but content stay the same. For #2360

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}

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;
   }
 }

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',

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;
-  }
 }