From 5bfc47ffba6943d36d9b133e867f96af1a8f9cbd Mon Sep 17 00:00:00 2001
From: dukeeagle <luke.igel@gmail.com>
Date: Thu, 29 Dec 2022 15:01:25 -0600
Subject: [PATCH] convert player to a non-working Component

---
 viewer/package-lock.json         | 18 +++++++
 viewer/package.json              |  1 +
 viewer/src/components/Player.tsx | 34 +++++++++++++
 viewer/src/pages/_app.tsx        |  1 +
 viewer/src/pages/index.tsx       | 87 ++++++++++++++++----------------
 5 files changed, 98 insertions(+), 43 deletions(-)
 create mode 100644 viewer/src/components/Player.tsx

diff --git a/viewer/package-lock.json b/viewer/package-lock.json
index 19f5089..241e26c 100644
--- a/viewer/package-lock.json
+++ b/viewer/package-lock.json
@@ -17,6 +17,7 @@
         "@trpc/react-query": "^10.0.0",
         "@trpc/server": "^10.0.0",
         "@types/video.js": "^7.3.50",
+        "@videojs-player/react": "^1.0.0",
         "next": "13.1.1",
         "next-auth": "^4.18.3",
         "react": "18.2.0",
@@ -782,6 +783,17 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@videojs-player/react": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs-player/react/-/react-1.0.0.tgz",
+      "integrity": "sha512-cEPvG1b+B4EG494N3oGxACRce8WW2l+ewIznH/SDoNCWvbVMeSqKy1l6qKr0Zy/dejwKtvWiOamoBWuVEfoR3g==",
+      "peerDependencies": {
+        "@types/video.js": "7.x",
+        "react": "^16.8 || ^17",
+        "react-dom": "^16.8 || ^17",
+        "video.js": "7.x"
+      }
+    },
     "node_modules/@videojs/http-streaming": {
       "version": "2.14.3",
       "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.3.tgz",
@@ -5027,6 +5039,12 @@
         "eslint-visitor-keys": "^3.3.0"
       }
     },
+    "@videojs-player/react": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs-player/react/-/react-1.0.0.tgz",
+      "integrity": "sha512-cEPvG1b+B4EG494N3oGxACRce8WW2l+ewIznH/SDoNCWvbVMeSqKy1l6qKr0Zy/dejwKtvWiOamoBWuVEfoR3g==",
+      "requires": {}
+    },
     "@videojs/http-streaming": {
       "version": "2.14.3",
       "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.3.tgz",
diff --git a/viewer/package.json b/viewer/package.json
index 025c880..23d3af5 100644
--- a/viewer/package.json
+++ b/viewer/package.json
@@ -18,6 +18,7 @@
     "@trpc/react-query": "^10.0.0",
     "@trpc/server": "^10.0.0",
     "@types/video.js": "^7.3.50",
+    "@videojs-player/react": "^1.0.0",
     "next": "13.1.1",
     "next-auth": "^4.18.3",
     "react": "18.2.0",
diff --git a/viewer/src/components/Player.tsx b/viewer/src/components/Player.tsx
new file mode 100644
index 0000000..010167c
--- /dev/null
+++ b/viewer/src/components/Player.tsx
@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useState } from 'react'
+import videojs from 'video.js'
+import 'videojs-youtube'
+
+interface PlayerProps {
+    techOrder: string[]
+    autoplay: boolean
+    controls: boolean
+    sources: { src: string; type: string }[]
+  }
+
+export default function Player(props: PlayerProps) {
+    const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null)
+    const onVideo = useCallback((el: HTMLVideoElement) => {
+        setVideoEl(el)
+    }, [])
+
+    useEffect(() => {
+        if (videoEl == null) return
+        const player = videojs(videoEl, props)
+        return () => {
+          player.dispose()
+        }
+      }, [props, videoEl])
+
+    return (
+        <>
+            <h1 className='text-white'>The implementation below is using react functions</h1>
+            <div data-vjs-player>
+                <video ref={onVideo} className="video-js" playsInline />
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/viewer/src/pages/_app.tsx b/viewer/src/pages/_app.tsx
index 2e2d750..a69264b 100644
--- a/viewer/src/pages/_app.tsx
+++ b/viewer/src/pages/_app.tsx
@@ -5,6 +5,7 @@ import { SessionProvider } from "next-auth/react";
 import { trpc } from "../utils/trpc";
 
 import "../styles/globals.css";
+import 'video.js/dist/video-js.css'
 
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
diff --git a/viewer/src/pages/index.tsx b/viewer/src/pages/index.tsx
index bf5bee5..c1eba86 100644
--- a/viewer/src/pages/index.tsx
+++ b/viewer/src/pages/index.tsx
@@ -1,8 +1,12 @@
 import { type NextPage } from "next";
 import Head from "next/head";
 import { useRef, useEffect } from "react";
+
+
+import Player from '../components/Player'
+
 import videojs from 'video.js';
-import 'video.js/dist/video-js.css';
+// import 'video.js/dist/video-js.css';
 import 'videojs-youtube'
 
 import { signIn, signOut, useSession } from "next-auth/react";
@@ -10,52 +14,49 @@ import { signIn, signOut, useSession } from "next-auth/react";
 import { trpc } from "../utils/trpc";
 import React from "react";
 
-const Home : NextPage = () => {
-  const videoRef = useRef(null);
+const Home: NextPage = () => {
 
-  useEffect(() => {
-    if (videoRef.current) {
-      videojs(videoRef.current, {
-        techOrder: ["youtube"],
-        sources: [
-          {
-            src: "https://www.youtube.com/watch?v=mToftr444Pc",
-            type: "video/youtube"
-          }
-        ]
-      });
-    }
-  });
+  const hello = trpc.example.hello.useQuery({ text: "from tRPC" });
+  const videoJsOptions = {
+    techOrder: ['youtube'],
+    autoplay: false,
+    controls: true,
+    sources: [
+      {
+        src: 'https://www.youtube.com/watch?v=mToftr444Pc',
+        type: 'video/youtube',
+      },
+    ],
+  }
+  return (
+    <>
+      <Head>
+        <title>viewer</title>
+        <meta name="description" content="Generated by create-t3-app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className="flex min-h-screen flex-col items-center justify-center bg-black">
+        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
+          <h1 className="text-1xl font-extrabold tracking-tight text-white sm:text-[3rem]">
+            viewer
+          </h1>
 
-    const hello = trpc.example.hello.useQuery({ text: "from tRPC" });
-    return (
-      <>
-        <Head>
-          <title>viewer</title>
-          <meta name="description" content="Generated by create-t3-app" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-        <main className="flex min-h-screen flex-col items-center justify-center bg-black">
-          <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-            <h1 className="text-1xl font-extrabold tracking-tight text-white sm:text-[3rem]">
-              viewer
-            </h1>
 
-            <div className="flex flex-col items-center justify-center gap-4">
-              <video controls ref={videoRef} className="video-js" />
-            </div>
-
-            
-            <div className="flex flex-col items-center gap-2">
-              <p className="text-2xl text-white">
-                {hello.data ? hello.data.greeting : "Loading tRPC query..."}
-              </p>
-              <AuthShowcase />
-            </div>
+          <Player {...videoJsOptions} />
+          <div className="flex flex-col items-center justify-center gap-4">
           </div>
-        </main>
-      </>
-    );
+
+
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-2xl text-white">
+              {hello.data ? hello.data.greeting : "Loading tRPC query..."}
+            </p>
+            <AuthShowcase />
+          </div>
+        </div>
+      </main>
+    </>
+  );
 }
 
 export default Home;