fix metadata and transcript loading on Vercel bc of ref not loading in time

viewer/src/components/Player.tsx

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

viewer/src/components/WebVttPlayer/MetadataPoint.tsx

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

viewer/src/components/WebVttPlayer/WebVttPlayer.tsx

@@ -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 trackRef = useRef<TrackEvent>(null);
-    const metatrackRef = useRef(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;
+        // 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?)
-        const metatrack = metatrackRef.current;
+        function checkIfLoaded(tries = 0) {
-
+            tries += 1
-        // Check if the tracks are fully loaded
+            const track = trackRef.current;
-        if (track && track.track && track.track.cues && track.track.cues.length > 0) {
+            const metatrack = metatrackRef.current;
-            setTrackLoaded(true);
+            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);
+            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]);
+    
+
+
+    }, []);
 
 
 

viewer/src/pages/index.tsx

@@ -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>
@@ -35,8 +44,13 @@ const Home: NextPage = () => {
             {/* <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>
 
-
+          <WebVttPlayer
-          <Player />
+            preload={true}
+            audio={audioUrl}
+            videoUrl={videoUrl}
+            transcript={transcriptUrl}
+            metadataUrl={metadataUrl}
+          />
 
           {/* <div className="flex flex-col items-center gap-2">
             <AuthShowcase />