fix video onLoad

src/components/json.tsx

···
                 </Show>
                 <Show when={blob.mimeType === "video/mp4"}>
                   <ErrorBoundary fallback={() => <span>Failed to load video</span>}>
-                    <VideoPlayer did={props.repo} cid={blob.ref.$link} onLoad={() => setMediaLoaded(true)} />
+                    <VideoPlayer
+                      did={props.repo}
+                      cid={blob.ref.$link}
+                      onLoad={() => setMediaLoaded(true)}
+                    />
                   </ErrorBoundary>
                 </Show>
                 <Show when={mediaLoaded()}>

src/components/video-player.tsx

···
 export interface VideoPlayerProps {
   did: string;
   cid: string;
+  onLoad: () => void;
 }
 
-const VideoPlayer = ({ did, cid }: VideoPlayerProps) => {
+const VideoPlayer = (props: VideoPlayerProps) => {
   let video!: HTMLVideoElement;
 
   onMount(async () => {
     // thanks bf <3
-    const res = await fetch(`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`);
+    const res = await fetch(
+      `https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.did}&cid=${props.cid}`,
+    );
     if (!res.ok) throw new Error(res.statusText);
     const blob = await res.blob();
     const url = URL.createObjectURL(blob);
···
   });
 
   return (
-    <video ref={video} class="max-h-80 max-w-[20rem]" controls playsinline>
+    <video ref={video} class="max-h-80 max-w-[20rem]" controls playsinline onLoadedData={props.onLoad}>
       <source type="video/mp4" />
     </video>
   );