forked from
pds.ls/pdsls
atmosphere explorer
remove hide blob button
+2
-35
+1
-27
src/components/json.tsx
+1
-27
src/components/json.tsx
···
7
7
createSignal,
8
8
ErrorBoundary,
9
9
For,
10
-
on,
11
10
onCleanup,
12
11
Show,
13
12
useContext,
···
288
287
const [hide, setHide] = createSignal(
289
288
localStorage.hideMedia === "true" || params.rkey === undefined,
290
289
);
291
-
const [mediaLoaded, setMediaLoaded] = createSignal(false);
292
-
293
290
createEffect(() => {
294
291
if (hideMedia()) setHide(hideMedia());
295
292
});
296
-
297
-
createEffect(
298
-
on(
299
-
hide,
300
-
(value) => {
301
-
if (value === false) setMediaLoaded(false);
302
-
},
303
-
{ defer: true },
304
-
),
305
-
);
306
293
307
294
const isBlob = props.data.$type === "blob";
308
295
const isBlobContext = isBlob || ctx.parentIsBlob;
···
372
359
<img
373
360
class="h-auto max-h-48 max-w-64 cursor-zoom-in object-contain"
374
361
src={imageUrl()}
375
-
onLoad={() => setMediaLoaded(true)}
376
362
onclick={() => setExpanded(true)}
377
363
/>
378
364
<Show when={expanded()}>
···
389
375
</Show>
390
376
<Show when={blob.mimeType === "video/mp4"}>
391
377
<ErrorBoundary fallback={() => <span>Failed to load video</span>}>
392
-
<VideoPlayer
393
-
did={ctx.repo}
394
-
cid={blob.ref.$link}
395
-
onLoad={() => setMediaLoaded(true)}
396
-
/>
378
+
<VideoPlayer did={ctx.repo} cid={blob.ref.$link} />
397
379
</ErrorBoundary>
398
-
</Show>
399
-
<Show when={mediaLoaded()}>
400
-
<button
401
-
onclick={() => setHide(true)}
402
-
class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-700/70 p-1.5 text-white opacity-0 backdrop-blur-sm transition-opacity group-hover/media:opacity-100 hover:bg-neutral-700 active:bg-neutral-800 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100 dark:active:bg-neutral-200"
403
-
>
404
-
<span class="iconify lucide--eye-off text-base"></span>
405
-
</button>
406
380
</Show>
407
381
</Show>
408
382
<Show when={hide()}>
+1
-8
src/components/video-player.tsx
+1
-8
src/components/video-player.tsx
···
4
4
export interface VideoPlayerProps {
5
5
did: string;
6
6
cid: string;
7
-
onLoad: () => void;
8
7
}
9
8
10
9
const VideoPlayer = (props: VideoPlayerProps) => {
···
27
26
});
28
27
29
28
return (
30
-
<video
31
-
ref={video}
32
-
class="max-h-80 max-w-[20rem]"
33
-
controls
34
-
playsinline
35
-
onLoadedData={props.onLoad}
36
-
>
29
+
<video ref={video} class="max-h-80 max-w-[20rem]" controls playsinline>
37
30
<source type="video/mp4" />
38
31
</video>
39
32
);