forked from
pds.ls/pdsls
atmosphere explorer
wrap media in full width div
+45
-39
+45
-39
src/components/json.tsx
+45
-39
src/components/json.tsx
···
209
209
);
210
210
211
211
const blob: AtBlob = props.data as any;
212
+
const canShowMedia = () =>
213
+
pds() && params.rkey && (blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4");
214
+
215
+
const MediaDisplay = () => (
216
+
<div>
217
+
<span class="group/media relative flex w-fit">
218
+
<Show when={!hide()}>
219
+
<Show when={blob.mimeType.startsWith("image/")}>
220
+
<img
221
+
class="h-auto max-h-48 max-w-48 object-contain sm:max-h-64 sm:max-w-64"
222
+
src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${blob.ref.$link}`}
223
+
onLoad={() => setMediaLoaded(true)}
224
+
/>
225
+
</Show>
226
+
<Show when={blob.mimeType === "video/mp4"}>
227
+
<ErrorBoundary fallback={() => <span>Failed to load video</span>}>
228
+
<VideoPlayer
229
+
did={ctx.repo}
230
+
cid={blob.ref.$link}
231
+
onLoad={() => setMediaLoaded(true)}
232
+
/>
233
+
</ErrorBoundary>
234
+
</Show>
235
+
<Show when={mediaLoaded()}>
236
+
<button
237
+
onclick={() => setHide(true)}
238
+
class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-900/70 p-1.5 text-white opacity-0 backdrop-blur-sm transition-opacity group-hover/media:opacity-100 hover:bg-neutral-900/80 active:bg-neutral-900/90 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100/80 dark:active:bg-neutral-100/90"
239
+
>
240
+
<span class="iconify lucide--eye-off text-base"></span>
241
+
</button>
242
+
</Show>
243
+
</Show>
244
+
<Show when={hide()}>
245
+
<button
246
+
onclick={() => setHide(false)}
247
+
class="flex items-center rounded-lg bg-neutral-200 p-1.5 transition-colors hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"
248
+
>
249
+
<span class="iconify lucide--eye text-base"></span>
250
+
</button>
251
+
</Show>
252
+
</span>
253
+
</div>
254
+
);
212
255
213
256
if (blob.$type === "blob") {
214
257
return (
215
258
<>
216
-
<Show when={pds() && params.rkey}>
217
-
<Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}>
218
-
<span class="group/media relative flex w-fit">
219
-
<Show when={!hide()}>
220
-
<Show when={blob.mimeType.startsWith("image/")}>
221
-
<img
222
-
class="h-auto max-h-48 max-w-48 object-contain sm:max-h-64 sm:max-w-64"
223
-
src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${blob.ref.$link}`}
224
-
onLoad={() => setMediaLoaded(true)}
225
-
/>
226
-
</Show>
227
-
<Show when={blob.mimeType === "video/mp4"}>
228
-
<ErrorBoundary fallback={() => <span>Failed to load video</span>}>
229
-
<VideoPlayer
230
-
did={ctx.repo}
231
-
cid={blob.ref.$link}
232
-
onLoad={() => setMediaLoaded(true)}
233
-
/>
234
-
</ErrorBoundary>
235
-
</Show>
236
-
<Show when={mediaLoaded()}>
237
-
<button
238
-
onclick={() => setHide(true)}
239
-
class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-900/70 p-1.5 text-white opacity-0 backdrop-blur-sm transition-opacity group-hover/media:opacity-100 hover:bg-neutral-900/80 active:bg-neutral-900/90 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100/80 dark:active:bg-neutral-100/90"
240
-
>
241
-
<span class="iconify lucide--eye-off text-base"></span>
242
-
</button>
243
-
</Show>
244
-
</Show>
245
-
<Show when={hide()}>
246
-
<button
247
-
onclick={() => setHide(false)}
248
-
class="flex items-center rounded-lg bg-neutral-200 p-1.5 transition-colors hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"
249
-
>
250
-
<span class="iconify lucide--eye text-base"></span>
251
-
</button>
252
-
</Show>
253
-
</span>
254
-
</Show>
259
+
<Show when={canShowMedia()}>
260
+
<MediaDisplay />
255
261
</Show>
256
262
{rawObj}
257
263
</>