Add initiallyMuted query parameter to embed player (#2539)

* Add query param to initially mute embed player

* Add stories for embed player

* Improve VideoJS typing

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { VideoJsPlayerOptions } from 'video.js';
 import { VideoJS } from '../VideoJS/VideoJS';
 import ViewerPing from '../viewer-ping';
 import { VideoPoster } from '../VideoPoster/VideoPoster';
@@ -24,6 +25,7 @@ let latencyCompensatorEnabled = false;
 export type OwncastPlayerProps = {
   source: string;
   online: boolean;
+  initiallyMuted?: boolean;
 };
 
 async function getVideoSettings() {
@@ -38,7 +40,11 @@ async function getVideoSettings() {
   return qualities;
 }
 
-export const OwncastPlayer: FC<OwncastPlayerProps> = ({ source, online }) => {
+export const OwncastPlayer: FC<OwncastPlayerProps> = ({
+  source,
+  online,
+  initiallyMuted = false,
+}) => {
   const playerRef = React.useRef(null);
   const [videoPlaying, setVideoPlaying] = useRecoilState<boolean>(isVideoPlayingAtom);
   const clockSkew = useRecoilValue<Number>(clockSkewAtom);
@@ -215,6 +221,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({ source, online }) => {
     playsinline: true,
     liveui: true,
     preload: 'auto',
+    muted: initiallyMuted,
     controlBar: {
       progressControl: {
         seekBar: false,
@@ -239,7 +246,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({ source, online }) => {
         type: 'application/x-mpegURL',
       },
     ],
-  };
+  } satisfies VideoJsPlayerOptions;
 
   const handlePlayerReady = (player, videojs) => {
     playerRef.current = player;

web/components/video/VideoJS/VideoJS.tsx

@@ -1,17 +1,17 @@
 import React, { FC } from 'react';
-import videojs from 'video.js';
+import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
 import styles from './VideoJS.module.scss';
 
 require('video.js/dist/video-js.css');
 
 export type VideoJSProps = {
-  options: any;
-  onReady: (player: videojs.Player, vjsInstance: videojs) => void;
+  options: VideoJsPlayerOptions;
+  onReady: (player: videojs.Player, vjsInstance: typeof videojs) => void;
 };
 
 export const VideoJS: FC<VideoJSProps> = ({ options, onReady }) => {
-  const videoRef = React.useRef(null);
-  const playerRef = React.useRef(null);
+  const videoRef = React.useRef<HTMLVideoElement | null>(null);
+  const playerRef = React.useRef<VideoJsPlayer | null>(null);
 
   React.useEffect(() => {
     // Make sure Video.js player is only initialized once
@@ -19,7 +19,7 @@ export const VideoJS: FC<VideoJSProps> = ({ options, onReady }) => {
       const videoElement = videoRef.current;
 
       // eslint-disable-next-line no-multi-assign
-      const player = (playerRef.current = videojs(videoElement, options, () => {
+      const player: VideoJsPlayer = (playerRef.current = videojs(videoElement, options, () => {
         console.debug('player is ready');
         return onReady && onReady(player, videojs);
       }));