convert player to a non-working Component

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",

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",

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>
+        </>
+    )
+}

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,

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 Home: NextPage = () => {
-  const videoRef = useRef(null);
 
-  useEffect(() => {
+  const hello = trpc.example.hello.useQuery({ text: "from tRPC" });
-    if (videoRef.current) {
+  const videoJsOptions = {
-      videojs(videoRef.current, {
+    techOrder: ['youtube'],
-        techOrder: ["youtube"],
+    autoplay: false,
-        sources: [
+    controls: true,
-          {
+    sources: [
-            src: "https://www.youtube.com/watch?v=mToftr444Pc",
+      {
-            type: "video/youtube"
+        src: 'https://www.youtube.com/watch?v=mToftr444Pc',
-          }
+        type: 'video/youtube',
-        ]
+      },
-      });
+    ],
-    }
+  }
-  });
+  return (
-
+    <>
-    const hello = trpc.example.hello.useQuery({ text: "from tRPC" });
+      <Head>
-    return (
+        <title>viewer</title>
-      <>
+        <meta name="description" content="Generated by create-t3-app" />
-        <Head>
+        <link rel="icon" href="/favicon.ico" />
-          <title>viewer</title>
+      </Head>
-          <meta name="description" content="Generated by create-t3-app" />
+      <main className="flex min-h-screen flex-col items-center justify-center bg-black">
-          <link rel="icon" href="/favicon.ico" />
+        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-        </Head>
+          <h1 className="text-1xl font-extrabold tracking-tight text-white sm:text-[3rem]">
-        <main className="flex min-h-screen flex-col items-center justify-center bg-black">
+            viewer
-          <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
+          </h1>
-            <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">
+          <Player {...videoJsOptions} />
-              <p className="text-2xl text-white">
+          <div className="flex flex-col items-center justify-center gap-4">
-                {hello.data ? hello.data.greeting : "Loading tRPC query..."}
-              </p>
-              <AuthShowcase />
-            </div>
           </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;