futur.blue
forked from
pds.ls/pdsls
this repo has no description
only show hide button when loaded
handle.invalid
+11
-7
src/components/json.tsx
+11
-7
src/components/json.tsx
···
120
const [hide, setHide] = createSignal(
121
localStorage.hideMedia === "true" || params.rkey === undefined,
122
);
123
124
createEffect(() => {
125
if (hideMedia()) setHide(hideMedia());
···
191
<img
192
class="h-auto max-h-64 max-w-[16rem] object-contain"
193
src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`}
194
/>
195
</Show>
196
<Show when={blob.mimeType === "video/mp4"}>
197
<ErrorBoundary fallback={() => <span>Failed to load video</span>}>
198
-
<VideoPlayer did={props.repo} cid={blob.ref.$link} />
199
</ErrorBoundary>
200
</Show>
201
-
<button
202
-
onclick={() => setHide(true)}
203
-
class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-900/70 p-1.5 text-white opacity-100 backdrop-blur-sm transition-opacity hover:bg-neutral-900/80 active:bg-neutral-900/90 sm:opacity-0 sm:group-hover/media:opacity-100 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100/80 dark:active:bg-neutral-100/90"
204
-
>
205
-
<span class="iconify lucide--eye-off text-base"></span>
206
-
</button>
207
</Show>
208
<Show when={hide()}>
209
<button
···
120
const [hide, setHide] = createSignal(
121
localStorage.hideMedia === "true" || params.rkey === undefined,
122
);
123
+
const [mediaLoaded, setMediaLoaded] = createSignal(false);
124
125
createEffect(() => {
126
if (hideMedia()) setHide(hideMedia());
···
192
<img
193
class="h-auto max-h-64 max-w-[16rem] object-contain"
194
src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`}
195
+
onLoad={() => setMediaLoaded(true)}
196
/>
197
</Show>
198
<Show when={blob.mimeType === "video/mp4"}>
199
<ErrorBoundary fallback={() => <span>Failed to load video</span>}>
200
+
<VideoPlayer did={props.repo} cid={blob.ref.$link} onLoad={() => setMediaLoaded(true)} />
201
</ErrorBoundary>
202
</Show>
203
+
<Show when={mediaLoaded()}>
204
+
<button
205
+
onclick={() => setHide(true)}
206
+
class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-900/70 p-1.5 text-white opacity-100 backdrop-blur-sm transition-opacity hover:bg-neutral-900/80 active:bg-neutral-900/90 sm:opacity-0 sm:group-hover/media:opacity-100 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100/80 dark:active:bg-neutral-100/90"
207
+
>
208
+
<span class="iconify lucide--eye-off text-base"></span>
209
+
</button>
210
+
</Show>
211
</Show>
212
<Show when={hide()}>
213
<button