Give chat a min-height that other elements yield to on mobile clients (#2676)

* Add className prop to some components

* Give mobile chatbox height priority over other elements

* Optimize for mobile landscape mode

* Make thumbnail background black

* Fix overflow issues on narrow screens

* Adjust layout for offline mode on mobile

* Fix main content width on Desktop

* Fix offline layout for desktop

web/components/video/OwncastPlayer/OwncastPlayer.module.scss

@@ -8,7 +8,7 @@
   aspect-ratio: 16 / 9;
 
   @media (max-width: 1200px) {
-    height: unset;
+    height: 100%;
     max-height: 75vh;
   }
 

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -2,6 +2,7 @@ import React, { FC, useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { VideoJsPlayerOptions } from 'video.js';
+import classNames from 'classnames';
 import { VideoJS } from '../VideoJS/VideoJS';
 import ViewerPing from '../viewer-ping';
 import { VideoPoster } from '../VideoPoster/VideoPoster';
@@ -26,6 +27,7 @@ export type OwncastPlayerProps = {
   online: boolean;
   initiallyMuted?: boolean;
   title: string;
+  className?: string;
 };
 
 async function getVideoSettings() {
@@ -45,6 +47,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
   online,
   initiallyMuted = false,
   title,
+  className,
 }) => {
   const playerRef = React.useRef(null);
   const [videoPlaying, setVideoPlaying] = useRecoilState<boolean>(isVideoPlayingAtom);
@@ -308,7 +311,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
   );
 
   return (
-    <div className={styles.container} id="player">
+    <div className={classNames(styles.container, className)} id="player">
       {online && (
         <div className={styles.player}>
           <VideoJS options={videoJsOptions} onReady={handlePlayerReady} aria-label={title} />

web/components/video/VideoJS/VideoJS.scss

@@ -11,7 +11,18 @@
   .vjs-big-play-button {
     z-index: 10;
     color: var(--theme-color-action);
-    font-size: 8rem !important;
+
+    // Setting the font size resizes the video.js
+    // BigPlayButton due to its style definitions
+    // (see https://github.com/videojs/video.js/blob/b306ce614e70e6d3305348d1b69e1434031d73ef/src/css/components/_big-play.scss)
+    // 30vmin determined by trial & error to not cause
+    // overflow with weird (small) x or y dimensions.
+    // min and max are also arbitrary; max was the old
+    // constant value. feel free to change if necessary,
+    // but check short and narrow screen sizes for overflow
+    // issues.
+    font-size: clamp(1rem, 30vmin, 8rem) !important;
+
     border-color: transparent !important;
     border-radius: var(--theme-rounded-corners) !important;
     background-color: transparent !important;
@@ -58,10 +69,10 @@
     font-family: VideoJS, serif;
     font-weight: 400;
     font-style: normal;
-  }
 
-  .vjs-icon-placeholder::before {
-    content: '\f110';
+    &::before {
+      content: '\f110';
+    }
   }
 }
 

web/components/video/VideoPoster/VideoPoster.module.scss

@@ -1,7 +1,10 @@
 .poster {
-  background-color: black;
   display: flex;
   justify-content: center;
   width: 100%;
   height: 100%;
 }
+
+.image {
+  background-color: black;
+}

web/components/video/VideoPoster/VideoPoster.tsx

@@ -36,6 +36,7 @@ export const VideoPoster: FC<VideoPosterProps> = ({ online, initialSrc, src: bas
           objectFit="contain"
           height="auto"
           width="100%"
+          className={styles.image}
         />
       )}
     </div>