app/components/admin/media-tile.tsx

Functions

Imports

It imports app/components/admin/copy-button.tsx, app/components/admin/media-document-card.tsx, app/lib/media/byte-size.mjs, app/lib/media/usage.mjs, app/lib/media/view.mjs. Imported by app/components/admin/media-grid.tsx.

Source

1import { Link } from "react-router";
2import { Status } from "capsomer/react/status";
3
4import { CopyButton } from "~/components/admin/copy-button";
5import { DocumentCard } from "~/components/admin/media-document-card";
6import { byteSize } from "~/lib/media/byte-size.mjs";
7import { flagsFor, tileFlagFor, usageDescriptor } from "~/lib/media/usage.mjs";
8import {
9  displayName,
10  folderPrefix,
11  formatAdded,
12  formatDims,
13  middleTruncate,
14} from "~/lib/media/view.mjs";
15import type { hrefWith, sortHref } from "~/lib/media/view.mjs";
16
17import type { Route } from "../../routes/+types/admin.media._index";
18
19type Listing = Extract<Route.ComponentProps["loaderData"], { detail: unknown }>;
20
21type TileProps = {
22  object: Listing["objects"][number];
23  chosen: string[];
24  selectRange: (key: string, shift: boolean) => void;
25  linkTo: (over?: Parameters<typeof hrefWith>[1]) => string;
26  view: Parameters<typeof sortHref>[0];
27  scanComplete: boolean;
28  /** Grid only: whether this tile's controls are in the tab order. The arrows move between tiles. */
29  tabStop: boolean;
30};
31
32const FLAG_TONE: Record<string, "warn" | "info"> = {
33  duplicate: "info",
34  unattached: "warn",
35  "no-alt": "warn",
36};
37
38const USAGE_TONE: Record<string, "ok" | "warn" | "nodata"> = {
39  used: "ok",
40  unattached: "warn",
41  unknown: "nodata",
42};
43
44/** The select box: a real checkbox, which the bulk form reads, on Capsomer's media markup. */
45function SelectBox({
46  object,
47  name,
48  chosen,
49  selectRange,
50  tabIndex,
51}: {
52  object: TileProps["object"];
53  name: string;
54  chosen: string[];
55  selectRange: TileProps["selectRange"];
56  tabIndex: number | undefined;
57}) {
58  return (
59    <label className="cap-media-check">
60      <input
61        type="checkbox"
62        name="key"
63        value={object.key}
64        tabIndex={tabIndex}
65        checked={chosen.includes(object.key)}
66        onChange={(event) =>
67          selectRange(
68            object.key,
69            // Keyboard activation reports shiftKey false, so Space still toggles one row.
70            (event.nativeEvent as MouseEvent | undefined)?.shiftKey === true,
71          )
72        }
73      />
74      <span className="cap-media-check-box" aria-hidden="true">
75        <svg viewBox="0 0 16 16">
76          <path d="m3.5 8.5 3 3 6-7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
77        </svg>
78      </span>
79      <span className="cap-media-check-word" aria-hidden="true">
80        Selected
81      </span>
82      <span className="cap-sr-only">Select {name}</span>
83    </label>
84  );
85}
86
87/** The thumbnail, or the card a document gets because the Images binding can never thumbnail it. */
88function Thumb({ object }: { object: TileProps["object"] }) {
89  return (
90    <span
91      className="cap-media-thumb"
92      // Set only when present: the Images binding does not rasterize SVGs, so the placeholder can be null and url(null) renders black.
93      style={object.placeholder ? { backgroundImage: `url("${object.placeholder}")` } : undefined}
94    >
95      {object.viewable ? (
96        <img src={object.thumb} alt="" loading="lazy" decoding="async" width={320} height={320} />
97      ) : (
98        <DocumentCard object={object} />
99      )}
100    </span>
101  );
102}
103
104/** One file in the grid: Capsomer's tile, with the site's keys, flags, selection and copy. */
105export function MediaTile({
106  object,
107  chosen,
108  selectRange,
109  linkTo,
110  view,
111  scanComplete,
112  tabStop,
113}: TileProps) {
114  const name = displayName(object);
115  const usage = usageDescriptor(object.usage);
116  const flags = flagsFor({
117    viewable: object.viewable,
118    alt: object.alt,
119    size: object.size,
120    twinCount: object.twinCount,
121  });
122  const tileFlag = tileFlagFor({
123    flags,
124    usage: object.usage,
125    twin: object.twinCount > 0 ? name : null,
126  });
127  const active = view.key === object.key;
128  // Roving: in the grid only one tile's controls take Tab.
129  const roving = !tabStop ? -1 : undefined;
130
131  return (
132    <li
133      className="cap-media-tile"
134      /* The keyboard navigator addresses tiles by key, not index, so a reflow cannot change what it means. */
135      data-tile={object.key}
136      data-state="ready"
137      data-selected={chosen.includes(object.key) || undefined}
138      data-active={active || undefined}
139      data-kind={object.viewable ? "image" : "document"}
140    >
141      {/* Without `preventScrollReset`, `<ScrollRestoration>` throws the reader back to the top. */}
142      <Link
143        to={linkTo({ key: object.key })}
144        className="cap-media-open"
145        preventScrollReset
146        aria-label={name}
147        aria-current={active ? "true" : undefined}
148        tabIndex={roving}
149        /* preventDefault only on modified clicks, so a plain click stays a link that works without script. */
150        onClick={(event) => {
151          if (!event.shiftKey && !event.metaKey && !event.ctrlKey) return;
152          event.preventDefault();
153          selectRange(object.key, event.shiftKey);
154        }}
155      >
156        <Thumb object={object} />
157        <span className="cap-media-name" title={object.key}>
158          {middleTruncate(name)}
159        </span>
160        <span className="cap-media-meta">
161          {byteSize(object.size)}
162          {object.width && object.height ? ` · ${formatDims(object.width, object.height)}` : ""}
163          {/* Never say "unused": the repository scan cannot see a constructed path or an external
164              site linking the file. */}
165          {scanComplete ? ` · ${usage.label}` : ""}
166        </span>
167      </Link>
168
169      {tileFlag ? (
170        <span className="cap-media-flags">
171          <Status tone={FLAG_TONE[tileFlag.id] ?? "info"}>{tileFlag.title}</Status>
172        </span>
173      ) : null}
174
175      <SelectBox object={object} name={name} chosen={chosen} selectRange={selectRange} tabIndex={roving} />
176
177      {/* The tile's only copy control: two same-named buttons would be read twice. */}
178      <CopyButton value={object.url} label={name} tabIndex={roving} />
179    </li>
180  );
181}
182
183/** One file in the list: a table row, so its facts are columns a screen reader can navigate. */
184export function MediaRow({ object, chosen, selectRange, linkTo, view, scanComplete }: TileProps) {
185  const name = displayName(object);
186  const usage = usageDescriptor(object.usage);
187  const flags = flagsFor({
188    viewable: object.viewable,
189    alt: object.alt,
190    size: object.size,
191    twinCount: object.twinCount,
192  });
193  const active = view.key === object.key;
194
195  return (
196    <tr
197      data-tile={object.key}
198      data-selected={chosen.includes(object.key) || undefined}
199      aria-selected={chosen.includes(object.key) || undefined}
200    >
201      <td>
202        <label className="cap-check">
203          <input
204            type="checkbox"
205            name="key"
206            value={object.key}
207            checked={chosen.includes(object.key)}
208            onChange={(event) =>
209              selectRange(object.key, (event.nativeEvent as MouseEvent | undefined)?.shiftKey === true)
210            }
211          />
212          <span className="cap-sr-only">Select {name}</span>
213        </label>
214      </td>
215      <th scope="row">
216        {/* Content-addressed keys read as noise, so the author's name identifies the file. */}
217        <Link
218          to={linkTo({ key: object.key })}
219          className="cap-table-open"
220          title={object.key}
221          preventScrollReset
222          aria-current={active ? "true" : undefined}
223        >
224          {name}
225        </Link>
226        {/* Without the directory, two same-named files in different directories read as one row twice. */}
227        <span className="cap-table-aside">{folderPrefix(object.key)}</span>
228      </th>
229      {/* "not measured" rather than 0x0 or blank, which would read as a value, not an absence. */}
230      <td>
231        <Status tone={USAGE_TONE[scanComplete ? object.usage : "unknown"] ?? "nodata"}>
232          <span title={scanComplete ? usage.title : undefined}>
233            {scanComplete ? usage.label : "unknown"}
234          </span>
235        </Status>
236        {flags.length > 0 ? (
237          <span className="cap-table-aside">{flags.map((f) => f.label).join(" · ")}</span>
238        ) : null}
239      </td>
240      <td data-num>{formatDims(object.width, object.height)}</td>
241      <td data-num>{byteSize(object.size)}</td>
242      <td data-num>{formatAdded(object.uploaded)}</td>
243      <td>
244        <CopyButton value={object.url} label={name} />
245      </td>
246    </tr>
247  );
248}