From 19ba92bbe39bf0691f1669210c6a27389552c862 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Thu, 14 Dec 2023 15:56:46 -0700
Subject: [PATCH] Set video plays inline

---
 web-new/src/components/player/VideoPlayer.tsx | 136 ++++++++++--------
 1 file changed, 74 insertions(+), 62 deletions(-)

diff --git a/web-new/src/components/player/VideoPlayer.tsx b/web-new/src/components/player/VideoPlayer.tsx
index c7d6aa3a9..fee9a6d55 100644
--- a/web-new/src/components/player/VideoPlayer.tsx
+++ b/web-new/src/components/player/VideoPlayer.tsx
@@ -1,74 +1,86 @@
 import { useEffect, useRef, ReactElement } from "react";
-import videojs from 'video.js';
-import 'videojs-playlist';
-import 'video.js/dist/video-js.css';
+import videojs from "video.js";
+import "videojs-playlist";
+import "video.js/dist/video-js.css";
 import Player from "video.js/dist/types/player";
 
 type VideoPlayerProps = {
-  children?: ReactElement | ReactElement[],
-    options?: {
-        [key: string]: any
-    },
-    seekOptions?: {
-        forward?: number,
-        backward?: number,
-    },
-    onReady?: (player: Player) => void,
-    onDispose?: () => void,
-}
+  children?: ReactElement | ReactElement[];
+  options?: {
+    [key: string]: any;
+  };
+  seekOptions?: {
+    forward?: number;
+    backward?: number;
+  };
+  onReady?: (player: Player) => void;
+  onDispose?: () => void;
+};
 
-export default function VideoPlayer({ children, options, seekOptions = {forward:30, backward: 10}, onReady = (_) => {}, onDispose = () => {} }: VideoPlayerProps) {
-    const videoRef = useRef<HTMLDivElement | null>(null);
-    const playerRef = useRef<Player | null>(null);
+export default function VideoPlayer({
+  children,
+  options,
+  seekOptions = { forward: 30, backward: 10 },
+  onReady = (_) => {},
+  onDispose = () => {},
+}: VideoPlayerProps) {
+  const videoRef = useRef<HTMLDivElement | null>(null);
+  const playerRef = useRef<Player | null>(null);
 
-    useEffect(() => {
-      const defaultOptions = {
-        controls: true,
-        controlBar: {
-          skipButtons: seekOptions,
-        },
-        playbackRates: [0.5, 1, 2, 4, 8],
-        fluid: true,
-      };
+  useEffect(() => {
+    const defaultOptions = {
+      controls: true,
+      controlBar: {
+        skipButtons: seekOptions,
+      },
+      playbackRates: [0.5, 1, 2, 4, 8],
+      fluid: true,
+    };
 
+    if (!videojs.browser.IS_FIREFOX) {
+      defaultOptions.playbackRates.push(16);
+    }
 
-      if (!videojs.browser.IS_FIREFOX) {
-        defaultOptions.playbackRates.push(16);
-      }
+    // Make sure Video.js player is only initialized once
+    if (!playerRef.current) {
+      // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
+      const videoElement = document.createElement("video-js");
+      // @ts-ignore we know this is a video element
+      videoElement.controls = true;
+      // @ts-ignore
+      videoElement.playsInline = true;
+      videoElement.classList.add("small-player");
+      videoElement.classList.add("video-js");
+      videoElement.classList.add("vjs-default-skin");
+      videoRef.current?.appendChild(videoElement);
 
-      // Make sure Video.js player is only initialized once
-      if (!playerRef.current) {
-        // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
-        const videoElement = document.createElement("video-js");
-
-        videoElement.classList.add('small-player');
-        videoElement.classList.add('video-js');
-        videoElement.classList.add('vjs-default-skin');
-        videoRef.current?.appendChild(videoElement);
-
-        const player = playerRef.current = videojs(videoElement, { ...defaultOptions, ...options }, () => {
+      const player = (playerRef.current = videojs(
+        videoElement,
+        { ...defaultOptions, ...options },
+        () => {
           onReady && onReady(player);
-        });
-      }
-    }, [options, videoRef]);
-
-    // Dispose the Video.js player when the functional component unmounts
-    useEffect(() => {
-      const player = playerRef.current;
-
-      return () => {
-        if (player && !player.isDisposed()) {
-          player.dispose();
-          playerRef.current = null;
-          onDispose();
         }
-      };
-    }, [playerRef]);
+      ));
+    }
+  }, [options, videoRef]);
 
-    return (
-      <div data-vjs-player>
-        <div ref={videoRef} />
-        {children}
-      </div>
-    );
-  }
\ No newline at end of file
+  // Dispose the Video.js player when the functional component unmounts
+  useEffect(() => {
+    const player = playerRef.current;
+
+    return () => {
+      if (player && !player.isDisposed()) {
+        player.dispose();
+        playerRef.current = null;
+        onDispose();
+      }
+    };
+  }, [playerRef]);
+
+  return (
+    <div data-vjs-player>
+      <div ref={videoRef} />
+      {children}
+    </div>
+  );
+}