forked from
pds.ls/pdsls
this repo has no description
fix video onLoad
+11
-4
+5
-1
src/components/json.tsx
+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
-
<VideoPlayer did={props.repo} cid={blob.ref.$link} onLoad={() => setMediaLoaded(true)} />
200
+
<VideoPlayer
201
+
did={props.repo}
202
+
cid={blob.ref.$link}
203
+
onLoad={() => setMediaLoaded(true)}
204
+
/>
201
205
</ErrorBoundary>
202
206
</Show>
203
207
<Show when={mediaLoaded()}>
+6
-3
src/components/video-player.tsx
+6
-3
src/components/video-player.tsx
···
4
4
export interface VideoPlayerProps {
5
5
did: string;
6
6
cid: string;
7
+
onLoad: () => void;
7
8
}
8
9
9
-
const VideoPlayer = ({ did, cid }: VideoPlayerProps) => {
10
+
const VideoPlayer = (props: VideoPlayerProps) => {
10
11
let video!: HTMLVideoElement;
11
12
12
13
onMount(async () => {
13
14
// thanks bf <3
14
-
const res = await fetch(`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`);
15
+
const res = await fetch(
16
+
`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.did}&cid=${props.cid}`,
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
-
<video ref={video} class="max-h-80 max-w-[20rem]" controls playsinline>
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
);