Fix some playery errors and layout issues

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -246,28 +246,28 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({ source, online }) => {
 
     // You can handle player events here, for example:
     player.on('waiting', () => {
-      player.log('player is waiting');
+      console.debug('player is waiting');
     });
 
     player.on('dispose', () => {
-      player.log('player will dispose');
+      console.debug('player will dispose');
       ping.stop();
     });
 
     player.on('playing', () => {
-      player.log('player is playing');
+      console.debug('player is playing');
       ping.start();
       setVideoPlaying(true);
     });
 
     player.on('pause', () => {
-      player.log('player is paused');
+      console.debug('player is paused');
       ping.stop();
       setVideoPlaying(false);
     });
 
     player.on('ended', () => {
-      player.log('player is ended');
+      console.debug('player is ended');
       ping.stop();
       setVideoPlaying(false);
     });
@@ -291,13 +291,13 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({ source, online }) => {
   useEffect(
     () => () => {
       stopLatencyCompensator();
-      playbackMetrics.stop();
+      playbackMetrics?.stop();
     },
     [],
   );
 
   return (
-    <div style={{ display: 'grid' }}>
+    <div style={{ display: 'grid', width: '100% !important', aspectRatio: '16/9' }}>
       {online && (
         <div style={{ gridColumn: 1, gridRow: 1 }}>
           <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />

web/components/video/VideoJS/VideoJS.module.scss

@@ -6,14 +6,9 @@
   video {
     position: static !important;
   }
-
-  @include screen(desktop) {
-    height: 30vh !important;
-  }
 }
 
 .poster {
   width: 100%;
   height: 100%;
 }
-

web/components/video/VideoJS/VideoJS.tsx

@@ -4,9 +4,6 @@ import styles from './VideoJS.module.scss';
 
 require('video.js/dist/video-js.css');
 
-// TODO: Restore volume that was saved in local storage.
-// import { getLocalStorage, setLocalStorage } from '../../utils/helpers.js';
-// import { PLAYER_VOLUME, URL_STREAM } from '../../utils/constants.js';
 export type VideoJSProps = {
   options: any;
   onReady: (player: videojs.Player, vjsInstance: videojs) => void;
@@ -23,7 +20,8 @@ export const VideoJS: FC<VideoJSProps> = ({ options, onReady }) => {
 
       // eslint-disable-next-line no-multi-assign
       const player = (playerRef.current = videojs(videoElement, options, () => {
-        player.log('player is ready');
+        console.debug('player is ready');
+
         return onReady && onReady(player, videojs);
       }));
 
@@ -36,18 +34,6 @@ export const VideoJS: FC<VideoJSProps> = ({ options, onReady }) => {
     }
   }, [options, videoRef]);
 
-  // Dispose the Video.js player when the functional component unmounts
-  React.useEffect(() => {
-    const player = playerRef.current;
-
-    return () => {
-      if (player) {
-        player.dispose();
-        playerRef.current = null;
-      }
-    };
-  }, [playerRef]);
-
   return (
     <div data-vjs-player>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
@@ -61,57 +47,6 @@ export const VideoJS: FC<VideoJSProps> = ({ options, onReady }) => {
 
 export default VideoJS;
 
-// import PlaybackMetrics from '../metrics/playback.js';
-// import LatencyCompensator from './latencyCompensator.js';
-
-// const VIDEO_ID = 'video';
-// const LATENCY_COMPENSATION_ENABLED = 'latencyCompensatorEnabled';
-
-// // Video setup
-// const VIDEO_SRC = {
-//   src: URL_STREAM,
-//   type: 'application/x-mpegURL',
-// };
-// const VIDEO_OPTIONS = {
-//   autoplay: false,
-//   liveui: true,
-//   preload: 'auto',
-//   controlBar: {
-//     progressControl: {
-//       seekBar: false,
-//     },
-//   },
-//   html5: {
-//     vhs: {
-//       // used to select the lowest bitrate playlist initially. This helps to decrease playback start time. This setting is false by default.
-//       enableLowInitialPlaylist: true,
-//       experimentalBufferBasedABR: true,
-//       useNetworkInformationApi: true,
-//       maxPlaylistRetries: 30,
-//     },
-//   },
-//   liveTracker: {
-//     trackingThreshold: 0,
-//     liveTolerance: 15,
-//   },
-//   sources: [VIDEO_SRC],
-// };
-
-// export const POSTER_DEFAULT = `/img/logo.png`;
-// export const POSTER_THUMB = `/thumbnail.jpg`;
-
-// export default class MenuSeparator extends VjsMenuItem {
-//   constructor(player, options) {
-//     super(player, options);
-//   }
-
-//   createEl(tag = 'button', props = {}, attributes = {}) {
-//     const el = super.createEl(tag, props, attributes);
-//     el.innerHTML = '<hr style="opacity: 0.3; margin-left: 10px; margin-right: 10px;" />';
-//     return el;
-//   }
-// }
-
 // class OwncastPlayer {
 //   constructor() {
 //     window.VIDEOJS_NO_DYNAMIC_STYLE = true; // style override