app/components/admin/media-inspector.tsx

Functions

Imports

It imports app/components/admin/copy-button.tsx, app/components/admin/live-notice.tsx, app/components/admin/media-drawer.tsx, app/components/admin/media-inspector-sections.tsx, app/components/admin/toast.tsx, app/lib/media/usage.mjs, app/lib/media/view.mjs. Imported by app/routes/admin.media._index.tsx.

Source

1import { useRef } from "react";
2import { Form, Link } from "react-router";
3import { Status } from "capsomer/react/status";
4
5import { CopyButton } from "~/components/admin/copy-button";
6import { LiveNotice } from "~/components/admin/live-notice";
7import { useInspectorDialog } from "~/components/admin/media-drawer";
8import { MediaToast } from "~/components/admin/toast";
9import {
10  InspectorAltForm,
11  InspectorDangerZone,
12  InspectorFacts,
13  InspectorTagForms,
14  InspectorUsage,
15} from "~/components/admin/media-inspector-sections";
16import { copySnippetsFor, usageDescriptor } from "~/lib/media/usage.mjs";
17import type { hrefWith } from "~/lib/media/view.mjs";
18
19import type { Route } from "../../routes/+types/admin.media._index";
20
21type Listing = Extract<Route.ComponentProps["loaderData"], { detail: unknown }>;
22type Detail = NonNullable<Listing["detail"]>;
23
24const USAGE_TONE: Record<string, "ok" | "warn" | "nodata"> = {
25  used: "ok",
26  unattached: "warn",
27  unknown: "nodata",
28};
29
30export function MediaInspector({
31  detail,
32  linkTo,
33  message,
34  refused,
35}: {
36  detail: Detail;
37  linkTo: (over?: Parameters<typeof hrefWith>[1]) => string;
38  /** The last action's result: announced in here, because the page behind a modal is inert. */
39  message?: string;
40  refused?: boolean;
41}) {
42  const ref = useRef<HTMLDialogElement>(null);
43  const hydrated = useInspectorDialog(ref, detail.key, linkTo({ key: "" }));
44
45  /* `data-inline`, not `open`: an `open` in the JSX would fight showModal(). Until then the server
46     render shows it in the page, working without script. */
47  return (
48    <dialog
49      ref={ref}
50      className="cap-dialog"
51      data-media-inspector=""
52      data-placement="right"
53      data-size="md"
54      data-inline={hydrated ? undefined : ""}
55      aria-label={`Details for ${detail.found ? (detail.originalName ?? detail.key) : detail.key}`}
56      tabIndex={-1}
57    >
58      {detail.found ? (
59        <div className="cap-dialog-header" data-divider="">
60          {/* Ellipsised, not wrapped: a content-addressed key can wrap to three lines and push the panel down. */}
61          <h2 className="cap-dialog-title" title={detail.key}>
62            {detail.originalName ?? detail.key}
63          </h2>
64          <p className="cap-dialog-description">
65            <Status tone={USAGE_TONE[detail.usage] ?? "nodata"}>{usageDescriptor(detail.usage).label}</Status>
66          </p>
67        </div>
68      ) : null}
69
70      <div className="cap-dialog-body">
71        <div className="app-form">
72          {/* First in the body so it survives the found and missing branches. */}
73          <LiveNotice
74            status={message && !refused ? message : undefined}
75            alert={message && refused ? message : undefined}
76          />
77          {detail.found ? (
78            <>
79              <div className="cap-media-preview">
80                {detail.viewable ? (
81                  <img src={detail.thumb} alt="" width={640} height={427} />
82                ) : (
83                  <span className="cap-media-doc" aria-hidden="true">
84                    {(detail.mime ?? "file").split("/").pop()?.toUpperCase()}
85                  </span>
86                )}
87              </div>
88
89              <InspectorFacts detail={detail} />
90              <InspectorAltForm detail={detail} />
91              <InspectorTagForms detail={detail} />
92
93              <div className="cap-field">
94                <h3 className="cap-field-label">Copy</h3>
95                <div className="app-actions">
96                  {copySnippetsFor({
97                    url: detail.url,
98                    viewable: detail.viewable,
99                    alt: detail.alt,
100                    base: detail.originalName ?? detail.key.split("/").pop() ?? detail.key,
101                  }).map((snippet) => (
102                    <CopyButton
103                      key={snippet.id}
104                      value={snippet.value}
105                      label={snippet.label}
106                      name={snippet.name}
107                      showLabel
108                    />
109                  ))}
110                </div>
111              </div>
112
113              {/* Trashing a twin hides it and both addresses keep working, so no published page loses its image. */}
114              {detail.twins.length > 0 ? (
115                <div className="cap-field">
116                  <h3 className="cap-field-label">Identical files</h3>
117                  <ul className="app-form">
118                    {detail.twins.map((twin) => (
119                      <li key={twin.key} className="app-form">
120                        <p>
121                          Byte-identical to <Link to={linkTo({ key: twin.key })}>{twin.key}</Link>, both
122                          addresses resolve to the same content.
123                        </p>
124                        <Form method="post">
125                          <input type="hidden" name="key" value={twin.key} />
126                          <button
127                            type="submit"
128                            name="intent"
129                            value="trash"
130                            className="cap-btn"
131                            data-variant="danger"
132                            data-size="sm"
133                          >
134                            Keep this, trash {twin.originalName ?? twin.key.split("/").pop() ?? twin.key}
135                          </button>
136                        </Form>
137                      </li>
138                    ))}
139                  </ul>
140                  <p className="cap-muted">
141                    Trashing one hides it from the library. Every address keeps working and no page
142                    changes.
143                  </p>
144                </div>
145              ) : null}
146
147              {/* Read off the key, never recomputed. A static row's key is a path, so it shows nothing. */}
148              {detail.hash ? (
149                <div className="cap-field">
150                  <span className="cap-field-label">sha256</span>
151                  <code className="cap-mono">{detail.hash}</code>
152                </div>
153              ) : null}
154
155              <InspectorUsage detail={detail} />
156              <InspectorDangerZone detail={detail} />
157            </>
158          ) : (
159            <p className="cap-muted">
160              Nothing in the index has the key {detail.key}. It may have been deleted.{" "}
161              <Link to={linkTo({ key: "" })} preventScrollReset>
162                Back to the library
163              </Link>
164              .
165            </p>
166          )}
167          <MediaToast inDialog />
168        </div>
169      </div>
170
171      <Link
172        to={linkTo({ key: "" })}
173        className="cap-btn cap-dialog-close"
174        data-variant="quiet"
175        data-icon-only=""
176        preventScrollReset
177        aria-label="Close the inspector"
178        title="Close, or press escape"
179      >
180        <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
181          <path d="m4 4 8 8M12 4l-8 8" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
182        </svg>
183      </Link>
184    </dialog>
185  );
186}