pds.ls
atmosphere explorer
pds.ls
tool
typescript
atproto
add full size image overlay
handle.invalid
+25
-1
src/components/json.tsx
+25
-1
src/components/json.tsx
···
8
8
ErrorBoundary,
9
9
For,
10
10
on,
11
+
onCleanup,
11
12
Show,
12
13
useContext,
13
14
} from "solid-js";
15
+
import { Portal } from "solid-js/web";
14
16
import { resolveLexiconAuthority } from "../utils/api";
15
17
import { formatFileSize } from "../utils/format";
16
18
import { hideMedia } from "../views/settings";
···
288
290
(blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4");
289
291
290
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
+
});
291
301
const [imageUrl] = createResource(
292
302
() => (blob.mimeType.startsWith("image/") ? blob.ref.$link : null),
293
303
async (cid) => {
···
318
328
}
319
329
>
320
330
<img
321
-
class="h-auto max-h-48 max-w-64 object-contain"
331
+
class="h-auto max-h-48 max-w-64 cursor-zoom-in object-contain"
322
332
src={imageUrl()}
323
333
onLoad={() => setMediaLoaded(true)}
334
+
onclick={() => setExpanded(true)}
324
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>
325
349
</Show>
326
350
</Show>
327
351
<Show when={blob.mimeType === "video/mp4"}>