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
120
const [hide, setHide] = createSignal(
121
121
localStorage.hideMedia === "true" || params.rkey === undefined,
122
122
);
123
+
const [mediaLoaded, setMediaLoaded] = createSignal(false);
123
124
124
125
createEffect(() => {
125
126
if (hideMedia()) setHide(hideMedia());
···
191
192
<img
192
193
class="h-auto max-h-64 max-w-[16rem] object-contain"
193
194
src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`}
195
+
onLoad={() => setMediaLoaded(true)}
194
196
/>
195
197
</Show>
196
198
<Show when={blob.mimeType === "video/mp4"}>
197
199
<ErrorBoundary fallback={() => <span>Failed to load video</span>}>
198
-
<VideoPlayer did={props.repo} cid={blob.ref.$link} />
200
+
<VideoPlayer did={props.repo} cid={blob.ref.$link} onLoad={() => setMediaLoaded(true)} />
199
201
</ErrorBoundary>
200
202
</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>
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>
207
211
</Show>
208
212
<Show when={hide()}>
209
213
<button