atmosphere explorer
pds.ls
tool
typescript
atproto
add audio player in record view
+11
-1
+11
-1
src/components/json.tsx
+11
-1
src/components/json.tsx
···
314
314
const canShowMedia = () =>
315
315
pds() &&
316
316
!ctx.hideBlobs &&
317
-
(blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4");
317
+
(blob.mimeType.startsWith("image/") ||
318
+
blob.mimeType === "video/mp4" ||
319
+
blob.mimeType.startsWith("audio/"));
318
320
319
321
const MediaDisplay = () => {
320
322
const [expanded, setExpanded] = createSignal(false);
···
391
393
<ErrorBoundary fallback={() => <span>Failed to load video</span>}>
392
394
<VideoPlayer did={ctx.repo} cid={blob.ref.$link} />
393
395
</ErrorBoundary>
396
+
</Show>
397
+
<Show when={blob.mimeType.startsWith("audio/")}>
398
+
<audio class="my-0.5 max-w-96" controls>
399
+
<source
400
+
src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${blob.ref.$link}`}
401
+
type={blob.mimeType === "audio/x-flac" ? "audio/flac" : blob.mimeType}
402
+
/>
403
+
</audio>
394
404
</Show>
395
405
</Show>
396
406
<Show when={hide()}>