diff --git a/viewer/package-lock.json b/viewer/package-lock.json index 2d244f4..d215ae0 100644 --- a/viewer/package-lock.json +++ b/viewer/package-lock.json @@ -18,10 +18,12 @@ "@trpc/server": "^10.0.0", "next": "13.1.1", "next-auth": "^4.18.3", + "next-themes": "^0.2.1", "react": "18.2.0", "react-dom": "18.2.0", "react-player": "^2.11.0", "superjson": "1.9.1", + "webvtt-player": "^0.0.16", "zod": "^3.18.0" }, "devDependencies": { @@ -3043,6 +3045,16 @@ } } }, + "node_modules/next-themes": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz", + "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==", + "peerDependencies": { + "next": "*", + "react": "*", + "react-dom": "*" + } + }, "node_modules/next/node_modules/postcss": { "version": "8.4.14", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", @@ -4300,6 +4312,51 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/webvtt-player": { + "version": "0.0.16", + "resolved": "https://registry.npmjs.org/webvtt-player/-/webvtt-player-0.0.16.tgz", + "integrity": "sha512-I8OBi1wNXj6hQuBNUc2iK72b+Ciz2l0utAn6xlo0qCrhSoM5hOrB1to9RN2cOoRUahx2NgMHGAhDmVsC1tE0oQ==", + "dependencies": { + "react": "^16.6.0", + "react-dom": "^16.6.0" + } + }, + "node_modules/webvtt-player/node_modules/react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/webvtt-player/node_modules/react-dom": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", + "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.19.1" + }, + "peerDependencies": { + "react": "^16.14.0" + } + }, + "node_modules/webvtt-player/node_modules/scheduler": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -6468,6 +6525,12 @@ "uuid": "^8.3.2" } }, + "next-themes": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz", + "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==", + "requires": {} + }, "node-releases": { "version": "2.0.8", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz", @@ -7296,6 +7359,47 @@ "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, + "webvtt-player": { + "version": "0.0.16", + "resolved": "https://registry.npmjs.org/webvtt-player/-/webvtt-player-0.0.16.tgz", + "integrity": "sha512-I8OBi1wNXj6hQuBNUc2iK72b+Ciz2l0utAn6xlo0qCrhSoM5hOrB1to9RN2cOoRUahx2NgMHGAhDmVsC1tE0oQ==", + "requires": { + "react": "^16.6.0", + "react-dom": "^16.6.0" + }, + "dependencies": { + "react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "react-dom": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", + "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.19.1" + } + }, + "scheduler": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, "which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/viewer/package.json b/viewer/package.json index e5bf8b7..1c89060 100644 --- a/viewer/package.json +++ b/viewer/package.json @@ -19,10 +19,12 @@ "@trpc/server": "^10.0.0", "next": "13.1.1", "next-auth": "^4.18.3", + "next-themes": "^0.2.1", "react": "18.2.0", "react-dom": "18.2.0", "react-player": "^2.11.0", "superjson": "1.9.1", + "webvtt-player": "^0.0.16", "zod": "^3.18.0" }, "devDependencies": { diff --git a/viewer/public/data/MIT Regressions intro audio.mp3 b/viewer/public/data/MIT Regressions intro audio.mp3 new file mode 100644 index 0000000..e516303 Binary files /dev/null and b/viewer/public/data/MIT Regressions intro audio.mp3 differ diff --git a/viewer/public/data/MIT Regressions intro captions.vtt b/viewer/public/data/MIT Regressions intro captions.vtt new file mode 100644 index 0000000..a89912f --- /dev/null +++ b/viewer/public/data/MIT Regressions intro captions.vtt @@ -0,0 +1,43 @@ +WEBVTT +Kind: captions +Language: en + +00:00:01.550 --> 00:00:03.361 +["The Vanishing American Family" by ScubaZ] + +00:00:14.068 --> 00:00:16.837 +The Massachusetts Institute of Technology began with a promise. + +00:00:19.252 --> 00:00:21.331 +A promise that with a devotion to technology, + +00:00:22.008 --> 00:00:23.735 +through rigorous study of math and science, + +00:00:23.939 --> 00:00:25.504 +we can engineer a better tomorrow. + +00:00:26.603 --> 00:00:27.599 +we can make + +00:00:27.599 --> 00:00:30.000 +a Better World. + +00:00:34.095 --> 00:00:35.347 +In this story, + +00:00:35.347 --> 00:00:37.242 +we ask a simple question. + +00:00:39.045 --> 00:00:40.283 +Have we kept our promise? + +00:01:07.526 --> 00:01:10.121 +MIT was founded in 1861. + +00:01:10.121 --> 00:01:13.448 +But the Institute as we know it today was born in 1941. + +00:01:13.448 --> 00:01:15.448 +December 7th, 1941. + diff --git a/viewer/public/data/MIT Regressions intro metadata.vtt b/viewer/public/data/MIT Regressions intro metadata.vtt new file mode 100644 index 0000000..a89912f --- /dev/null +++ b/viewer/public/data/MIT Regressions intro metadata.vtt @@ -0,0 +1,43 @@ +WEBVTT +Kind: captions +Language: en + +00:00:01.550 --> 00:00:03.361 +["The Vanishing American Family" by ScubaZ] + +00:00:14.068 --> 00:00:16.837 +The Massachusetts Institute of Technology began with a promise. + +00:00:19.252 --> 00:00:21.331 +A promise that with a devotion to technology, + +00:00:22.008 --> 00:00:23.735 +through rigorous study of math and science, + +00:00:23.939 --> 00:00:25.504 +we can engineer a better tomorrow. + +00:00:26.603 --> 00:00:27.599 +we can make + +00:00:27.599 --> 00:00:30.000 +a Better World. + +00:00:34.095 --> 00:00:35.347 +In this story, + +00:00:35.347 --> 00:00:37.242 +we ask a simple question. + +00:00:39.045 --> 00:00:40.283 +Have we kept our promise? + +00:01:07.526 --> 00:01:10.121 +MIT was founded in 1861. + +00:01:10.121 --> 00:01:13.448 +But the Institute as we know it today was born in 1941. + +00:01:13.448 --> 00:01:15.448 +December 7th, 1941. + diff --git a/viewer/subs/mit regressions subtitles unfinished.vtt b/viewer/public/data/subs/mit regressions subtitles unfinished.vtt similarity index 100% rename from viewer/subs/mit regressions subtitles unfinished.vtt rename to viewer/public/data/subs/mit regressions subtitles unfinished.vtt diff --git a/viewer/src/components/Player.tsx b/viewer/src/components/Player.tsx index 2efbca2..696ceb1 100644 --- a/viewer/src/components/Player.tsx +++ b/viewer/src/components/Player.tsx @@ -1,18 +1,47 @@ import dynamic from "next/dynamic"; const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false }); +import { useState, useRef, useEffect } from "react"; +import { useRouter } from 'next/router'; +import { Player as WebVttPlayer } from "webvtt-player"; // functional component PlayerReact that uses ReactPlayer - -// TODO: parameterize video source and VTT source with props (general spec for 3rd party use!) +// TODO: parameterize video source and VTT source with props (general spec for 3rd party use!). must define spec. export default function Player() { + + // get files in directory "../../data" without using fs + const router = useRouter(); + + const audioUrl = router.asPath + 'data/MIT Regressions intro audio.mp3' + const transcriptUrl = router.asPath + "data/MIT Regressions intro captions.vtt" + const metadataUrl = router.asPath + "data/MIT Regressions intro metadata.vtt" + return ( -
- -
+ <> +
+ +
+ + ); } diff --git a/viewer/src/pages/_app.tsx b/viewer/src/pages/_app.tsx index 2e2d750..e41e354 100644 --- a/viewer/src/pages/_app.tsx +++ b/viewer/src/pages/_app.tsx @@ -3,6 +3,7 @@ import { type Session } from "next-auth"; import { SessionProvider } from "next-auth/react"; import { trpc } from "../utils/trpc"; +import {ThemeProvider} from 'next-themes' import "../styles/globals.css"; @@ -12,7 +13,9 @@ const MyApp: AppType<{ session: Session | null }> = ({ }) => { return ( - + + + ); }; diff --git a/viewer/src/pages/index.tsx b/viewer/src/pages/index.tsx index 520c18d..f4f5c14 100644 --- a/viewer/src/pages/index.tsx +++ b/viewer/src/pages/index.tsx @@ -5,11 +5,14 @@ import Head from "next/head"; import { signIn, signOut, useSession } from "next-auth/react"; import { trpc } from "../utils/trpc"; +import {useTheme} from 'next-themes' import Player from '../components/Player' const Home: NextPage = () => { const hello = trpc.example.hello.useQuery({ text: "from tRPC" }); + const {theme, setTheme} = useTheme() + console.log(theme) return ( <> @@ -18,16 +21,19 @@ const Home: NextPage = () => { -
+
+
-

+

viewer

-

+

{hello.data ? hello.data.greeting : "Loading tRPC query..."}

diff --git a/viewer/tailwind.config.cjs b/viewer/tailwind.config.cjs index d8748e8..640b688 100644 --- a/viewer/tailwind.config.cjs +++ b/viewer/tailwind.config.cjs @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: 'class', content: ["./src/**/*.{js,ts,jsx,tsx}"], theme: { fontFamily: { diff --git a/viewer/tsconfig.json b/viewer/tsconfig.json index 658068a..2b24321 100644 --- a/viewer/tsconfig.json +++ b/viewer/tsconfig.json @@ -16,6 +16,6 @@ "incremental": true, "noUncheckedIndexedAccess": true }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs", "webvtt-plaer.d.ts"], "exclude": ["node_modules"] } diff --git a/viewer/webvtt-player.d.ts b/viewer/webvtt-player.d.ts new file mode 100644 index 0000000..e65462b --- /dev/null +++ b/viewer/webvtt-player.d.ts @@ -0,0 +1 @@ +declare module 'webvtt-player'; \ No newline at end of file