pdsls.dev
1import { onMount } from "solid-js";
2import { pds } from "./navbar";
3
4export interface VideoPlayerProps {
5 did: string;
6 cid: string;
7 onLoad: () => void;
8}
9
10const VideoPlayer = (props: VideoPlayerProps) => {
11 let video!: HTMLVideoElement;
12
13 onMount(async () => {
14 // thanks bf <3
15 const res = await fetch(
16 `https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.did}&cid=${props.cid}`,
17 );
18 if (!res.ok) throw new Error(res.statusText);
19 const blob = await res.blob();
20 const url = URL.createObjectURL(blob);
21 if (video) video.src = url;
22 });
23
24 return (
25 <video
26 ref={video}
27 class="max-h-80 max-w-[20rem]"
28 controls
29 playsinline
30 onLoadedData={props.onLoad}
31 >
32 <source type="video/mp4" />
33 </video>
34 );
35};
36
37export default VideoPlayer;