pds.ls
atmosphere explorer
pds.ls
tool
typescript
atproto
add full size image overlay
handle.invalid
+25
-1
+25
-1
src/components/json.tsx
+25
-1
src/components/json.tsx
···
8
ErrorBoundary,
9
For,
10
on,
11
Show,
12
useContext,
13
} from "solid-js";
14
import { resolveLexiconAuthority } from "../utils/api";
15
import { formatFileSize } from "../utils/format";
16
import { hideMedia } from "../views/settings";
···
288
(blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4");
289
290
const MediaDisplay = () => {
291
const [imageUrl] = createResource(
292
() => (blob.mimeType.startsWith("image/") ? blob.ref.$link : null),
293
async (cid) => {
···
318
}
319
>
320
<img
321
-
class="h-auto max-h-48 max-w-64 object-contain"
322
src={imageUrl()}
323
onLoad={() => setMediaLoaded(true)}
324
/>
325
</Show>
326
</Show>
327
<Show when={blob.mimeType === "video/mp4"}>
···
8
ErrorBoundary,
9
For,
10
on,
11
+
onCleanup,
12
Show,
13
useContext,
14
} from "solid-js";
15
+
import { Portal } from "solid-js/web";
16
import { resolveLexiconAuthority } from "../utils/api";
17
import { formatFileSize } from "../utils/format";
18
import { hideMedia } from "../views/settings";
···
290
(blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4");
291
292
const MediaDisplay = () => {
293
+
const [expanded, setExpanded] = createSignal(false);
294
+
295
+
createEffect(() => {
296
+
if (!expanded()) return;
297
+
const handler = (e: KeyboardEvent) => { if (e.key === "Escape") setExpanded(false); };
298
+
window.addEventListener("keydown", handler);
299
+
onCleanup(() => window.removeEventListener("keydown", handler));
300
+
});
301
const [imageUrl] = createResource(
302
() => (blob.mimeType.startsWith("image/") ? blob.ref.$link : null),
303
async (cid) => {
···
328
}
329
>
330
<img
331
+
class="h-auto max-h-48 max-w-64 cursor-zoom-in object-contain"
332
src={imageUrl()}
333
onLoad={() => setMediaLoaded(true)}
334
+
onclick={() => setExpanded(true)}
335
/>
336
+
<Show when={expanded()}>
337
+
<Portal>
338
+
<div
339
+
class="fixed inset-0 z-50 flex cursor-zoom-out items-center justify-center bg-black/80"
340
+
onclick={() => setExpanded(false)}
341
+
>
342
+
<img
343
+
class="max-h-screen max-w-screen object-contain"
344
+
src={imageUrl()}
345
+
/>
346
+
</div>
347
+
</Portal>
348
+
</Show>
349
</Show>
350
</Show>
351
<Show when={blob.mimeType === "video/mp4"}>