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 ref={video} class="max-h-80 max-w-[20rem]" controls playsinline onLoadedData={props.onLoad}>
26 <source type="video/mp4" />
27 </video>
28 );
29};
30
31export default VideoPlayer;