mirror of
https://github.com/mit-regressions/viewer.git
synced 2025-04-09 14:20:15 -04:00
fix metadata and transcript loading on Vercel bc of ref not loading in time
This commit is contained in:
dukeeagle
parent
2c9b9b6d02
commit
c349f9b1d4
|
|
@ -1,26 +0,0 @@
|
|||
import { useRouter } from 'next/router';
|
||||
import WebVttPlayer from "./WebVttPlayer/WebVttPlayer";
|
||||
|
||||
// functional component PlayerReact that uses ReactPlayer
|
||||
// TODO: better parameterize video source and VTT source with props (general spec for 3rd party use!). must define spec.
|
||||
export default function Player() {
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const videoUrl = '/data/MIT Regressions intro video.mp4' // BIZARRE BUG: react-player component only works when I live-reload URL to valid path. if Chrome loads directly, then returns "failed to load media".
|
||||
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 (
|
||||
<>
|
||||
<WebVttPlayer
|
||||
preload={false}
|
||||
audio={audioUrl}
|
||||
videoUrl={videoUrl}
|
||||
transcript={transcriptUrl}
|
||||
metadataUrl={metadataUrl}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -198,7 +198,7 @@ const VideoSourceCard: React.FC<VideoSourceData> = ({videoSource}) => {
|
|||
// TODO: fix typing
|
||||
const SongCard: React.FC<MusicData> = ({song}) => {
|
||||
return (
|
||||
<div className="bg-white shadow-md p-4">
|
||||
<div className="bg-yellow-50 shadow-md p-4">
|
||||
<h2 className="text-lg font-bold">{song.title}</h2>
|
||||
<div className="text-gray-600">
|
||||
<p className="mb-1">{song.artist}</p>
|
||||
|
|
|
|||
|
|
@ -29,40 +29,57 @@ interface NativePlayerRef {
|
|||
play: () => void;
|
||||
}
|
||||
|
||||
//Write a fetcher function to wrap the native fetch function and return the result of a call to url in json format
|
||||
// const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
||||
|
||||
export default function WebVttPlayer(props: WebVttPlayerProps) {
|
||||
const [trackLoaded, setTrackLoaded] = useState(false);
|
||||
const [metatrackLoaded, setMetatrackLoaded] = useState(false);
|
||||
const [query, setQuery] = useState('');
|
||||
|
||||
// TODO: determine if these should be set
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [seeking, setSeeking] = useState(false);
|
||||
const [played, setPlayed] = useState(new Float64Array(0));
|
||||
const [playing, setPlaying] = useState(false);
|
||||
|
||||
const trackRef = useRef(null);
|
||||
const metatrackRef = useRef(null);
|
||||
const trackRef = useRef<TrackEvent>(null);
|
||||
const metatrackRef = useRef<TrackEvent>(null);
|
||||
|
||||
const reactPlayerRef = useRef<ReactPlayerRef>(null);
|
||||
const nativePlayerRef = useRef<NativePlayerRef>(null);
|
||||
|
||||
const preload = props.preload ? "true" : "false"
|
||||
|
||||
useLayoutEffect(() => {
|
||||
//There are 3 possible states: (1) loading when data is null (2) ready when the data is returned (3) error when there was an error fetching the data
|
||||
// const { data, error } = useSWR('/api/staticdata', fetcher);
|
||||
|
||||
//Handle the error state
|
||||
// if (error) console.log("Failed to load from SWR!"); //return <div>Failed to load</div>;
|
||||
//Handle the loading state
|
||||
// if (!data) console.log("Loading with SWR...")// return <div>Loading...</div>;
|
||||
|
||||
useEffect(() => {
|
||||
// Get a reference to the track and metatrack elements
|
||||
const track = trackRef.current;
|
||||
const metatrack = metatrackRef.current;
|
||||
|
||||
// Check if the tracks are fully loaded
|
||||
if (track && track.track && track.track.cues && track.track.cues.length > 0) {
|
||||
setTrackLoaded(true);
|
||||
}
|
||||
if (metatrack && metatrack.track && metatrack.track.cues && metatrack.track.cues.length > 0) {
|
||||
setMetatrackLoaded(true);
|
||||
// TODO: this manual timeout is extremely gross! figure out how to conditionally rendder <Transcript> and <Metadata> according to loading of these refs without this awful hard-coded thing. NextJs certainly supports something better for on-time ref loading (SWR? getProps?)
|
||||
function checkIfLoaded(tries = 0) {
|
||||
tries += 1
|
||||
const track = trackRef.current;
|
||||
const metatrack = metatrackRef.current;
|
||||
if (track && track.track && track.track.cues && track.track.cues.length > 0) {
|
||||
setTrackLoaded(true);
|
||||
}
|
||||
if (metatrack && metatrack.track && metatrack.track.cues && metatrack.track.cues.length > 0) {
|
||||
setMetatrackLoaded(true);
|
||||
}
|
||||
else if (!metatrackLoaded || !trackLoaded) {
|
||||
const wait = 25 * Math.pow(tries, 2)
|
||||
setTimeout(() => checkIfLoaded(tries), wait);
|
||||
}
|
||||
}
|
||||
checkIfLoaded();
|
||||
|
||||
}, [trackLoaded, metatrackLoaded]);
|
||||
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,28 @@
|
|||
import React, { useRef } from "react";
|
||||
import { type NextPage } from "next";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
import { signIn, signOut, useSession } from "next-auth/react";
|
||||
|
||||
import { trpc } from "../utils/trpc";
|
||||
import { useTheme } from 'next-themes'
|
||||
import Player from '../components/Player'
|
||||
|
||||
import WebVttPlayer from "../components/WebVttPlayer/WebVttPlayer";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
|
||||
const hello = trpc.example.hello.useQuery({ text: "from tRPC" });
|
||||
const { theme, setTheme } = useTheme()
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const videoUrl = '/data/MIT Regressions intro video.mp4' // BIZARRE BUG: react-player component only works when I live-reload URL to valid path. if Chrome loads directly, then returns "failed to load media".
|
||||
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 (
|
||||
<>
|
||||
<Head>
|
||||
|
|
@ -34,9 +43,14 @@ const Home: NextPage = () => {
|
|||
<h2 className=" tracking-tight text-gray-500 dark:text-white top-20 left-6 absolute"><i>current film</i>: <a href="https://www.youtube.com/watch?v=TGKk3iwoI9I&ab_channel=MIT%3AREGRESSIONS">MIT: REGRESSIONS intro</a> | <a href="https://github.com/mit-regressions/viewer/blob/igel-t3-initial/viewer/public/data/MIT%20Regressions%20intro%20metadata.vtt">metadata source</a></h2>
|
||||
{/* <h2 className=" tracking-tight text-gray-500 dark:text-white top-24 left-6 absolute"><i>metadata file source (VTT)</i>: <a href="https://www.youtube.com/watch?v=TGKk3iwoI9I&ab_channel=MIT%3AREGRESSIONS">MIT: REGRESSIONS intro</a></h2> */}
|
||||
</div>
|
||||
|
||||
|
||||
<Player />
|
||||
<WebVttPlayer
|
||||
preload={true}
|
||||
audio={audioUrl}
|
||||
videoUrl={videoUrl}
|
||||
transcript={transcriptUrl}
|
||||
metadataUrl={metadataUrl}
|
||||
/>
|
||||
|
||||
{/* <div className="flex flex-col items-center gap-2">
|
||||
<AuthShowcase />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user