commit fbf4a28edb233cce0950e59bc811d6a21add6bfb · pdsls.dev/pdsls

+5 -1

src/components/json.tsx

···

       197
       197
        
                       </Show>

     

       198
       198
        
                       <Show when={blob.mimeType === "video/mp4"}>

     

       199
       199
        
                         <ErrorBoundary fallback={() => <span>Failed to load video</span>}>

     

       200
       200
       -
                           <VideoPlayer did={props.repo} cid={blob.ref.$link} onLoad={() => setMediaLoaded(true)} />

     

       200
       200
       +
                           <VideoPlayer

     

       201
       201
       +
                             did={props.repo}

     

       202
       202
       +
                             cid={blob.ref.$link}

     

       203
       203
       +
                             onLoad={() => setMediaLoaded(true)}

     

       204
       204
       +
                           />

     

       201
       205
        
                         </ErrorBoundary>

     

       202
       206
        
                       </Show>

     

       203
       207
        
                       <Show when={mediaLoaded()}>

+6 -3

src/components/video-player.tsx

···

       4
       4
        
       export interface VideoPlayerProps {

     

       5
       5
        
         did: string;

     

       6
       6
        
         cid: string;

     

       7
       7
       +
         onLoad: () => void;

     

       7
       8
        
       }

     

       8
       9
        
       

     

       9
       9
       -
       const VideoPlayer = ({ did, cid }: VideoPlayerProps) => {

     

       10
       10
       +
       const VideoPlayer = (props: VideoPlayerProps) => {

     

       10
       11
        
         let video!: HTMLVideoElement;

     

       11
       12
        
       

     

       12
       13
        
         onMount(async () => {

     

       13
       14
        
           // thanks bf <3

     

       14
       14
       -
           const res = await fetch(`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`);

     

       15
       15
       +
           const res = await fetch(

     

       16
       16
       +
             `https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.did}&cid=${props.cid}`,

     

       17
       17
       +
           );

     

       15
       18
        
           if (!res.ok) throw new Error(res.statusText);

     

       16
       19
        
           const blob = await res.blob();

     

       17
       20
        
           const url = URL.createObjectURL(blob);

     
···

       19
       22
        
         });

     

       20
       23
        
       

     

       21
       24
        
         return (

     

       22
       22
       -
           <video ref={video} class="max-h-80 max-w-[20rem]" controls playsinline>

     

       25
       25
       +
           <video ref={video} class="max-h-80 max-w-[20rem]" controls playsinline onLoadedData={props.onLoad}>

     

       23
       26
        
             <source type="video/mp4" />

     

       24
       27
        
           </video>

     

       25
       28
        
         );