app/components/admin/media-picker.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/admin/settings-drawer.tsx.

Source

1import { useEffect } from "react";
2import { useFetcher } from "react-router";
3import { Empty } from "capsomer/react/empty";
4
5type PickedMedia = {
6  key: string;
7  url: string;
8  alt: string;
9};
10
11type PickerRow = {
12  key: string;
13  url: string;
14  thumb: string;
15  alt: string;
16};
17
18export function MediaPicker({
19  onPick,
20  onCancel,
21}: {
22  onPick: (picked: PickedMedia) => void;
23  onCancel?: () => void;
24}) {
25  const media = useFetcher<{ objects: PickerRow[]; truncated: boolean }>();
26
27  useEffect(() => {
28    // The router reports a failed load to the error boundary; the promise has nothing left to say.
29    if (media.state === "idle" && !media.data) media.load("/admin/media?picker=1").catch(() => undefined);
30  }, [media]);
31
32  const objects = media.data?.objects ?? [];
33  // Before the first answer, the idle render included: without data, "no images" would be a guess.
34  const loading = !media.data;
35  /* Mounted empty on the first render and filled after, so the loading and the result are both announced. */
36  const status = (
37    <p className="cap-sr-only" role="status">
38      {media.state === "loading" && loading
39        ? "Loading media"
40        : loading
41          ? ""
42          : objects.length === 0
43            ? "No images yet"
44            : `${objects.length} image${objects.length === 1 ? "" : "s"}`}
45    </p>
46  );
47
48  if (loading) {
49    return (
50      <>
51        {status}
52        <p className="cap-muted">Loading media...</p>
53      </>
54    );
55  }
56
57  if (objects.length === 0) {
58    return (
59      <>
60        {status}
61        <Empty
62          kind="nothing-yet"
63          action={
64            onCancel ? (
65              <button type="button" className="cap-btn" onClick={onCancel}>
66                Close
67              </button>
68            ) : undefined
69          }
70        >
71          No images in the bucket yet. Upload one from the body editor by dropping or pasting it, and
72          it will appear here.
73        </Empty>
74      </>
75    );
76  }
77
78  return (
79    <>
80      {status}
81      <div className="cap-media" data-size="s">
82        <ul className="cap-media-grid" role="list" aria-label="Images in the library">
83          {objects.map((object) => (
84            <li key={object.key} className="cap-media-tile">
85              <button
86                type="button"
87                className="cap-media-open"
88                onClick={() => onPick({ key: object.key, url: object.url, alt: object.alt })}
89              >
90                {/* The thumbnail, never the original, so the grid cannot pull full-resolution bytes. */}
91                <span className="cap-media-thumb">
92                  <img src={object.thumb} alt="" loading="lazy" width={160} height={160} />
93                </span>
94                <span className="cap-media-name">{object.key.replace(/^posts\//, "")}</span>
95              </button>
96            </li>
97          ))}
98        </ul>
99      </div>
100      {media.data?.truncated ? (
101        <p className="cap-muted">
102          Showing the first page. Open the media library to page through the rest.
103        </p>
104      ) : null}
105      {onCancel ? (
106        <div>
107          <button type="button" className="cap-btn" data-variant="quiet" onClick={onCancel}>
108            Cancel
109          </button>
110        </div>
111      ) : null}
112    </>
113  );
114}