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