forked from
pds.ls/pdsls
this repo has no description
overlay hide media button
+29
-31
+29
-31
src/components/json.tsx
+29
-31
src/components/json.tsx
···
6
6
import { ATURI_RE } from "../utils/types/at-uri";
7
7
import { hideMedia } from "../views/settings";
8
8
import { pds } from "./navbar";
9
-
import Tooltip from "./tooltip";
10
9
import VideoPlayer from "./video-player";
11
10
12
11
interface AtBlob {
···
185
184
return (
186
185
<>
187
186
<Show when={pds() && params.rkey}>
188
-
<span class="flex gap-x-1">
189
-
<Show when={blob.mimeType.startsWith("image/") && !hide()}>
190
-
<img
191
-
class="h-auto max-h-64 max-w-[16rem] object-contain"
192
-
src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`}
193
-
/>
194
-
</Show>
195
-
<Show when={blob.mimeType === "video/mp4" && !hide()}>
196
-
<ErrorBoundary fallback={() => <span>Failed to load video</span>}>
197
-
<VideoPlayer did={props.repo} cid={blob.ref.$link} />
198
-
</ErrorBoundary>
199
-
</Show>
200
-
<span
201
-
classList={{
202
-
"flex items-center justify-between gap-1": true,
203
-
"flex-col": !hide(),
204
-
}}
205
-
>
206
-
<Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}>
207
-
<Tooltip text={hide() ? "Show" : "Hide"}>
208
-
<button
209
-
onclick={() => setHide(!hide())}
210
-
class={`${!hide() ? "-mt-1 -ml-0.5" : ""} flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600`}
211
-
>
212
-
<span
213
-
class={`iconify text-base ${hide() ? "lucide--eye-off" : "lucide--eye"}`}
214
-
></span>
215
-
</button>
216
-
</Tooltip>
187
+
<Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}>
188
+
<span class="group/media relative flex w-fit">
189
+
<Show when={!hide()}>
190
+
<Show when={blob.mimeType.startsWith("image/")}>
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
210
+
onclick={() => setHide(false)}
211
+
class="flex items-center rounded-lg bg-neutral-200 p-1.5 transition-colors hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"
212
+
>
213
+
<span class="iconify lucide--eye text-base"></span>
214
+
</button>
217
215
</Show>
218
216
</span>
219
-
</span>
217
+
</Show>
220
218
</Show>
221
219
{rawObj}
222
220
</>