app/components/media/detail-panel.tsx

Functions

Imports

It imports app/components/media/format.ts, app/lib/media.server.ts. Imported by app/routes/media.tsx.

Source

1// The details of one file in the media library (routes/media.tsx): its facts, the alt text and tags
2// forms, where it is used, and the trash and delete buttons. A panel on the page, not a modal dialog,
3// so each edit is a form that posts and works without script.
4
5import { Form, Link } from "react-router";
6import { Alert, Banner } from "capsomer/react/banner";
7import { Button } from "capsomer/react/button";
8import { Field } from "capsomer/react/field";
9import { Panel } from "capsomer/react/panel";
10import { Status } from "capsomer/react/status";
11
12import type { MediaDetail } from "@dustinedwards/site-api";
13import type { MediaOffers } from "~/lib/media.server";
14
15import { dims, size, type MediaUse } from "./format";
16
17type Written =
18  | { intent: string; ok: true; id: string; recorded: boolean }
19  | { intent: string; ok: false; id: string; message: string; conflict: boolean };
20
21type Props = {
22  detail: MediaDetail & { src: string };
23  site: string;
24  offers: MediaOffers;
25  canUpload: boolean;
26  canDelete: boolean;
27  /** The last write's result, shown when it is this file's. */
28  written: Written | null;
29  /** A delete the site refused. */
30  refused: { id: string; message: string; usedBy: MediaUse[] } | null;
31  /** The file the server asks about before a delete, when script did not ask first. */
32  serverAsks: string | null;
33  busy: boolean;
34  /** The intent being submitted, while one is. */
35  pending: string | null;
36  here: (over: Record<string, string>) => string;
37  /** Script asks in a dialog before a delete; this opens it, returning focus to the button. */
38  onAskDelete: (button: HTMLElement) => void;
39};
40
41export function MediaDetailPanel({ detail, site, offers, canUpload, canDelete, written, refused, serverAsks, busy, pending, here, onAskDelete }: Props) {
42  const name = detail.filename ?? detail.id;
43  const writable = canUpload && Boolean(detail.version);
44  const inTrash = Boolean(detail.trashedAt);
45  return (
46      <Panel title={name} level={2} headingId="detail-title" actions={<Link to={here({})} className="cap-btn" data-variant="quiet" data-size="sm" preventScrollReset>Close<span className="cap-sr-only"> the details</span></Link>}>
47        <div className="app-detail">
48          {detail.contentType.startsWith("image/") ? (
49            <div className="cap-media-preview">
50              <img src={detail.src} alt="" width={640} height={427} />
51            </div>
52          ) : null}
53          {inTrash ? <Status tone="info">In the trash</Status> : null}
54          <dl className="app-facts">
55            <dt>Address on the site</dt>
56            <dd>
57              <code className="cap-mono">{detail.url}</code>
58            </dd>
59            <dt>Type</dt>
60            <dd>{detail.contentType}</dd>
61            <dt>Size</dt>
62            <dd>
63              {size(detail.bytes)}, {dims(detail.width, detail.height)}
64            </dd>
65            <dt>Uploaded</dt>
66            <dd>{detail.uploadedAt ? detail.uploadedAt.slice(0, 10) : "unknown"}</dd>
67            {!(offers.alt && writable && !inTrash) ? (
68              <>
69                <dt>Alt text</dt>
70                <dd>{detail.alt || <span className="cap-muted">none</span>}</dd>
71              </>
72            ) : null}
73            {offers.tags && !(writable && !inTrash) ? (
74              <>
75                <dt>Tags</dt>
76                <dd>{detail.tags && detail.tags.length > 0 ? detail.tags.join(", ") : <span className="cap-muted">none</span>}</dd>
77              </>
78            ) : null}
79          </dl>
80
81          {written && written.id === detail.id ? (
82            written.ok ? (
83              <Banner tone="ok">{written.intent === "trash" ? "Moved to the trash." : written.intent === "restore" ? "Restored to the library." : "Saved."}
84                {written.recorded ? "" : " The site has it, but Carrel could not save the authorship record."}
85              </Banner>
86            ) : (
87              <Alert tone={written.conflict ? "warn" : "crit"} title={written.conflict ? "The file changed" : "Not saved"}>
88                {written.message}
89              </Alert>
90            )
91          ) : null}
92
93          {offers.alt && writable && !inTrash ? (
94            <Form method="post" className="app-form" key={`alt:${detail.id}:${detail.version}`}>
95              <input type="hidden" name="id" value={detail.id} />
96              <input type="hidden" name="version" value={detail.version} />
97              <Field label="Alt text" help="What the image shows, for someone who cannot see it. Leave it empty for a picture that is only decoration.">
98                <textarea className="cap-input" name="alt" rows={3} defaultValue={detail.alt} maxLength={2000} />
99              </Field>
100              <div className="app-actions">
101                <Button type="submit" name="intent" value="set-alt" pending={pending === "set-alt"}>
102                  Save alt text
103                </Button>
104              </div>
105            </Form>
106          ) : null}
107
108          {offers.tags && writable && !inTrash ? (
109            <Form method="post" className="app-form" key={`tags:${detail.id}:${detail.version}`}>
110              <input type="hidden" name="id" value={detail.id} />
111              <input type="hidden" name="version" value={detail.version} />
112              <Field label="Tags" help="Separate tags with commas. Lower case words joined by hyphens, up to 12.">
113                <input className="cap-input" type="text" name="tags" defaultValue={(detail.tags ?? []).join(", ")} autoComplete="off" />
114              </Field>
115              <div className="app-actions">
116                <Button type="submit" name="intent" value="set-tags" pending={pending === "set-tags"}>
117                  Save tags
118                </Button>
119              </div>
120            </Form>
121          ) : null}
122          {offers.tags && detail.tags && detail.tags.length > 0 ? (
123            <p className="app-actions">
124              {detail.tags.map((t) => (
125                <Link key={t} to={here({ tag: t, id: "" })} className="cap-btn" data-size="sm">
126                  Files tagged {t}
127                </Link>
128              ))}
129            </p>
130          ) : null}
131
132          <section aria-labelledby="used-title" className="app-section">
133            <h3 id="used-title">Used in</h3>
134            {detail.usedBy.length === 0 ? (
135              <p className="cap-muted">No post on the site uses it, as far as the site's check can see. A page elsewhere linking to it would not show here.</p>
136            ) : (
137              <ul className="app-list">
138                {detail.usedBy.map((use) => (
139                  <li key={`${use.type}:${use.id}:${use.detail}`}>
140                    {use.title || use.id} <span className="cap-muted">({use.detail})</span>
141                  </li>
142                ))}
143              </ul>
144            )}
145          </section>
146
147          {refused && refused.id === detail.id ? (
148            <Alert tone="crit" title="Not deleted">
149              {refused.message}
150              {refused.usedBy.length > 0 ? (
151                <ul className="app-list">
152                  {refused.usedBy.map((use) => (
153                    <li key={`${use.id}:${use.detail}`}>
154                      {use.title || use.id} ({use.detail})
155                    </li>
156                  ))}
157                </ul>
158              ) : null}
159            </Alert>
160          ) : null}
161
162          {offers.trash && writable ? (
163            <Form method="post">
164              <input type="hidden" name="id" value={detail.id} />
165              <input type="hidden" name="version" value={detail.version} />
166              <Button type="submit" name="intent" value={inTrash ? "restore" : "trash"} pending={pending === "trash" || pending === "restore"}>
167                {inTrash ? "Restore" : "Move to trash"}
168                <span className="cap-sr-only"> {name}</span>
169              </Button>
170            </Form>
171          ) : null}
172
173          {canDelete && detail.deletable ? (
174            serverAsks === detail.id ? (
175              <Alert tone="warn" title={`Delete ${name} from ${site}?`}>
176                <Form method="post" className="app-form">
177                  <p>The file leaves the site's storage, and nothing in Carrel can bring it back.</p>
178                  <input type="hidden" name="id" value={detail.id} />
179                  <input type="hidden" name="confirm" value="delete" />
180                  <div className="app-actions">
181                    <Button type="submit" name="intent" value="delete" variant="danger" pending={busy}>
182                      Delete from the site
183                    </Button>
184                    <Link to={here({ id: detail.id })} className="cap-btn" preventScrollReset>
185                      Keep it
186                    </Link>
187                  </div>
188                </Form>
189              </Alert>
190            ) : (
191              <Form method="post">
192                <input type="hidden" name="id" value={detail.id} />
193                <Button
194                  type="submit"
195                  name="intent"
196                  value="delete"
197                  variant="danger"
198                  onClick={(event) => {
199                    event.preventDefault();
200                    onAskDelete(event.currentTarget);
201                  }}
202                >
203                  Delete<span className="cap-sr-only"> {name}</span>
204                </Button>
205              </Form>
206            )
207          ) : null}
208        </div>
209      </Panel>
210  );
211}