rushilwiz/viewer
1
0
Fork 0
mirror of https://github.com/mit-regressions/viewer.git synced 2025-04-09 14:20:15 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

convert player to a non-working Component

Browse Source
This commit is contained in:
dukeeagle 2022-12-29 15:01:25 -06:00
parent a29365a77c
commit 5bfc47ffba
5 changed files with 98 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
viewer/package-lock.json generated
View File

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

1
viewer/package.json
View File

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

34
viewer/src/components/Player.tsx Normal file
View File

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

1
viewer/src/pages/_app.tsx
View File

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

87
viewer/src/pages/index.tsx
View File

@ -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;