atmosphere explorer
pds.ls
tool
typescript
atproto
move hide media setting to record page
+22
-46
+5
-10
src/components/json.tsx
+5
-10
src/components/json.tsx
···
283
283
284
284
const JSONObject = (props: { data: { [x: string]: JSONType } }) => {
285
285
const ctx = useJSONCtx();
286
-
const params = useParams();
287
-
const [hide, setHide] = createSignal(
288
-
localStorage.hideMedia === "true" || params.rkey === undefined,
289
-
);
290
-
createEffect(() => {
291
-
if (hideMedia()) setHide(hideMedia());
292
-
});
293
286
294
287
const isBlob = props.data.$type === "blob";
295
288
const isBlobContext = isBlob || ctx.parentIsBlob;
···
319
312
blob.mimeType.startsWith("audio/"));
320
313
321
314
const MediaDisplay = () => {
315
+
const [overrideShow, setOverrideShow] = createSignal(false);
316
+
const hidden = () => hideMedia() && !overrideShow();
322
317
const [expanded, setExpanded] = createSignal(false);
323
318
const [closing, setClosing] = createSignal(false);
324
319
···
357
352
return (
358
353
<div>
359
354
<span class="group/media relative my-0.5 flex w-fit">
360
-
<Show when={!hide()}>
355
+
<Show when={!hidden()}>
361
356
<Show when={blob.mimeType.startsWith("image/")}>
362
357
<Show
363
358
when={!imageUrl.loading && imageUrl()}
···
403
398
</audio>
404
399
</Show>
405
400
</Show>
406
-
<Show when={hide()}>
401
+
<Show when={hidden()}>
407
402
<button
408
-
onclick={() => setHide(false)}
403
+
onclick={() => setOverrideShow(true)}
409
404
class="flex items-center gap-1 rounded-md bg-neutral-200 px-2 py-1.5 text-sm transition-colors hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"
410
405
>
411
406
<span class="iconify lucide--image"></span>
+17
-1
src/views/record.tsx
+17
-1
src/views/record.tsx
···
12
12
import { Backlinks } from "../components/backlinks.jsx";
13
13
import { Button } from "../components/button.jsx";
14
14
import { RecordEditor, setPlaceholder } from "../components/create";
15
-
import { CopyMenu, DropdownMenu, MenuProvider, NavMenu } from "../components/dropdown.jsx";
15
+
import {
16
+
ActionMenu,
17
+
CopyMenu,
18
+
DropdownMenu,
19
+
MenuProvider,
20
+
NavMenu,
21
+
} from "../components/dropdown.jsx";
16
22
import { Favicon } from "../components/favicon.jsx";
17
23
import { JSONValue } from "../components/json.jsx";
18
24
import { Modal } from "../components/modal.jsx";
···
25
31
import { AtUri, uriTemplates } from "../lib/templates.js";
26
32
import { lexicons } from "../lib/types/lexicons.js";
27
33
import { addToClipboard } from "../utils/copy.js";
34
+
import { hideMedia, setHideMedia } from "./settings.jsx";
28
35
29
36
const faviconWrapper = (children: any) => (
30
37
<div class="flex size-4 items-center justify-center">{children}</div>
···
514
521
icon="lucide--external-link"
515
522
label="Record on PDS"
516
523
newTab
524
+
/>
525
+
<ActionMenu
526
+
label={hideMedia() ? "Show media" : "Hide media"}
527
+
icon={hideMedia() ? "lucide--eye" : "lucide--eye-off"}
528
+
onClick={() => {
529
+
const next = !hideMedia();
530
+
localStorage.hideMedia = String(next);
531
+
setHideMedia(next);
532
+
}}
517
533
/>
518
534
</DropdownMenu>
519
535
</MenuProvider>
-35
src/views/settings.tsx
-35
src/views/settings.tsx
···
34
34
</div>
35
35
<ThemeSelection />
36
36
<div class="flex flex-col gap-1">
37
-
<label class="font-medium select-none">Blob media preview</label>
38
-
<div class="flex gap-2">
39
-
<button
40
-
classList={{
41
-
"flex min-w-21 items-center justify-center gap-1 rounded-xl border px-3 py-2": true,
42
-
"border-neutral-300 bg-neutral-200/60 dark:border-neutral-500 dark:bg-neutral-700":
43
-
!hideMedia(),
44
-
"border-neutral-200 hover:bg-neutral-200/30 dark:border-neutral-600 dark:hover:bg-neutral-800":
45
-
hideMedia(),
46
-
}}
47
-
onClick={() => {
48
-
localStorage.hideMedia = "false";
49
-
setHideMedia(false);
50
-
}}
51
-
>
52
-
Show
53
-
</button>
54
-
<button
55
-
classList={{
56
-
"flex min-w-21 items-center justify-center gap-1 rounded-xl border px-3 py-2": true,
57
-
"border-neutral-300 bg-neutral-200/60 dark:border-neutral-500 dark:bg-neutral-700":
58
-
hideMedia(),
59
-
"border-neutral-200 hover:bg-neutral-200/30 dark:border-neutral-600 dark:hover:bg-neutral-800":
60
-
!hideMedia(),
61
-
}}
62
-
onClick={() => {
63
-
localStorage.hideMedia = "true";
64
-
setHideMedia(true);
65
-
}}
66
-
>
67
-
Hide
68
-
</button>
69
-
</div>
70
-
</div>
71
-
<div class="flex flex-col gap-1">
72
37
<label class="font-medium select-none">Version</label>
73
38
<div class="text-sm text-neutral-600 dark:text-neutral-400">
74
39
{import.meta.env.VITE_APP_VERSION}