sanity-plugin-r2-video 0.1.8 → 0.1.9

package/dist/studio/index.js

@@ -1,11 +1,11 @@
 import { resolveRenditionPath } from '../chunk-D5VS4ED7.js';
 export { resolveRenditionPath } from '../chunk-D5VS4ED7.js';
-import { PlayIcon } from '@sanity/icons/Play';
-import { defineType, defineField, definePlugin, useClient, set } from 'sanity';
-import { createContext, useState, useCallback, useEffect, useRef, useMemo, useContext, useId } from 'react';
+import { createContext, useState, useCallback, useEffect, useRef, useMemo, useId, useContext } from 'react';
+import { defineType, defineField, definePlugin, set, useClient } from 'sanity';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { PlayIcon } from '@sanity/icons/Play';
 import { UploadIcon } from '@sanity/icons/Upload';
-import { Stack, Flex, Box, Button, TextInput, Spinner, Text, Card, Grid, Dialog, Select, Switch } from '@sanity/ui';
+import { Stack, Flex, Box, Button, TextInput, Card, Text, Grid, Dialog, Spinner, Select, Switch } from '@sanity/ui';
 import { AccessDeniedIcon } from '@sanity/icons/AccessDenied';
 import { canEncodeVideo } from 'mediabunny';
 import { WarningOutlineIcon } from '@sanity/icons/WarningOutline';
@@ -107,6 +107,24 @@ var deleteVideoAsset = async (client, config, asset) => {
     renditions.map((rendition) => rendition.key)
   );
 };
+var R2VideoConfigContext = createContext(null);
+var R2VideoConfigProvider = ({ config, children }) => {
+  return /* @__PURE__ */ jsx(R2VideoConfigContext.Provider, { value: config, children });
+};
+var useR2VideoConfig = () => {
+  const config = useContext(R2VideoConfigContext);
+  if (!config) {
+    throw new Error(
+      "Missing R2 video config. Add `r2Video` to the Studio's plugin list."
+    );
+  }
+  return config;
+};
+var useR2VideoClient = () => {
+  const config = useR2VideoConfig();
+  const client = useClient({ apiVersion: config.apiVersion });
+  return { config, client };
+};
 
 // studio/folders.ts
 var QUERY_FOLDERS = `*[_type == $folderType]{
@@ -150,18 +168,13 @@ var resolvePosterFolder = async (client, folderType, name) => {
   const created = await client.create({ _type: folderType, name });
   return created._id;
 };
-var R2VideoConfigContext = createContext(null);
-var R2VideoConfigProvider = ({ config, children }) => {
-  return /* @__PURE__ */ jsx(R2VideoConfigContext.Provider, { value: config, children });
-};
-var useR2VideoConfig = () => {
-  const config = useContext(R2VideoConfigContext);
-  if (!config) {
-    throw new Error(
-      "Missing R2 video config. Add `r2Video` to the Studio's plugin list."
-    );
-  }
-  return config;
+var useFolders = () => {
+  const { config, client } = useR2VideoClient();
+  const [folders, setFolders] = useState([]);
+  useEffect(() => {
+    fetchFolders(client, config.folders.type).then(setFolders);
+  }, [client, config.folders.type]);
+  return { folders, paths: resolveFolderPaths(folders) };
 };
 
 // studio/defaults.ts
@@ -204,6 +217,15 @@ var formatSize = (bytes) => {
 var formatDuration = (seconds) => {
   return `${seconds.toFixed(1)}s`;
 };
+var totalSize = (renditions) => {
+  return renditions.reduce((total, rendition) => total + rendition.size, 0);
+};
+var pluralize = (count, noun) => {
+  return `${count} ${noun}${count === 1 ? "" : "s"}`;
+};
+var toMessage = (error) => {
+  return error instanceof Error ? error.message : String(error);
+};
 var formatBitrate = (bytes, seconds) => {
   if (!seconds) {
     return "-";
@@ -333,6 +355,57 @@ var transcodeVideo = (request, progressed) => {
     worker.postMessage(request);
   });
 };
+var Notice = ({ tone, title, icon, children }) => {
+  return /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, tone, children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", gap: 3, children: [
+    icon && /* @__PURE__ */ jsx(Text, { size: 2, children: icon }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: title }),
+      typeof children === "string" ? /* @__PURE__ */ jsx(Text, { muted: Boolean(title), size: 1, children }) : children
+    ] })
+  ] }) });
+};
+var Field = ({ label, id, description, children }) => {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    /* @__PURE__ */ jsx(Text, { as: id ? "label" : void 0, htmlFor: id, size: 1, weight: "medium", children: label }),
+    children,
+    description && /* @__PURE__ */ jsx(Text, { muted: true, size: 0, children: description })
+  ] });
+};
+var DialogActions = ({
+  aside,
+  cancel,
+  confirm
+}) => {
+  return /* @__PURE__ */ jsx(Card, { borderTop: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+    aside,
+    /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: cancel.disabled,
+        mode: "ghost",
+        text: cancel.text,
+        width: "fill",
+        onClick: cancel.onClick
+      }
+    ) }),
+    confirm && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: confirm.disabled,
+        text: confirm.text,
+        tone: confirm.tone,
+        width: "fill",
+        onClick: confirm.onClick
+      }
+    ) })
+  ] }) });
+};
+var Loading = ({ children }) => {
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+    /* @__PURE__ */ jsx(Spinner, { muted: true }),
+    /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children })
+  ] });
+};
 var PreviewEncode = ({ file, keepAudio, encoding }) => {
   const [preview, setPreview] = useState(null);
   const [isEncoding, setIsEncoding] = useState(false);
@@ -374,7 +447,7 @@ var PreviewEncode = ({ file, keepAudio, encoding }) => {
         duration: result.duration
       });
     } catch (caught) {
-      setError(caught instanceof Error ? caught.message : String(caught));
+      setError(toMessage(caught));
     }
     setIsEncoding(false);
   };
@@ -394,15 +467,12 @@ var PreviewEncode = ({ file, keepAudio, encoding }) => {
         }
       )
     ] }),
-    isEncoding && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
-      /* @__PURE__ */ jsx(Spinner, { muted: true }),
-      /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
-        "Encoding top tier - ",
-        Math.round(progress * 100),
-        "%"
-      ] })
+    isEncoding && /* @__PURE__ */ jsxs(Loading, { children: [
+      "Encoding top tier - ",
+      Math.round(progress * 100),
+      "%"
     ] }),
-    error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
+    error && /* @__PURE__ */ jsx(Notice, { tone: "critical", children: error }),
     preview && !isEncoding && /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
       /* @__PURE__ */ jsx(
         "video",
@@ -439,20 +509,15 @@ var PreviewEncode = ({ file, keepAudio, encoding }) => {
   ] }) });
 };
 var UnsupportedBrowser = () => {
-  return /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, tone: "caution", children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", gap: 3, children: [
-    /* @__PURE__ */ jsx(Text, { size: 2, children: /* @__PURE__ */ jsx(WarningOutlineIcon, {}) }),
-    /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-      /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "This browser can't encode video" }),
-      /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Uploading needs WebCodecs h264 encoding, which this browser doesn't provide. Open the Studio in Chrome to add videos. Everything already in the library still works here." })
-    ] })
-  ] }) });
-};
-var Field = ({ id, label, description, children }) => {
-  return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-    /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: id, size: 1, weight: "medium", children: label }),
-    children,
-    /* @__PURE__ */ jsx(Text, { muted: true, size: 0, children: description })
-  ] });
+  return /* @__PURE__ */ jsx(
+    Notice,
+    {
+      icon: /* @__PURE__ */ jsx(WarningOutlineIcon, {}),
+      title: "This browser can't encode video",
+      tone: "caution",
+      children: "Uploading needs WebCodecs h264 encoding, which this browser doesn't provide. Open the Studio in Chrome to add videos. Everything already in the library still works here."
+    }
+  );
 };
 var ToggleRow = ({ id, label, description, children }) => {
   return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
@@ -702,9 +767,6 @@ var describe = (item) => {
   const { stage, progress, label } = item.progress;
   return `${STAGE_LABELS[stage]} ${label} \xB7 ${Math.round(progress * 100)}%`;
 };
-var countLabel = (count) => {
-  return count === 1 ? "1 video" : `${count} video(s)`;
-};
 var toItem = (file) => ({
   id: crypto.randomUUID(),
   file,
@@ -718,10 +780,9 @@ var DialogUpload = ({
   onUploaded,
   onClose
 }) => {
-  const config = useR2VideoConfig();
-  const client = useClient({ apiVersion: config.apiVersion });
+  const { config, client } = useR2VideoClient();
+  const { paths } = useFolders();
   const [canEncode, setCanEncode] = useState(null);
-  const [folders, setFolders] = useState([]);
   const [targetFolder, setTargetFolder] = useState(folderId);
   const [keepAudio, setKeepAudio] = useState(false);
   const [quality, setQuality] = useState(config.encoding.quality);
@@ -736,13 +797,9 @@ var DialogUpload = ({
   useEffect(() => {
     canEncodeLadder(config.encoding.videoCodec).then(setCanEncode);
   }, [config.encoding.videoCodec]);
-  useEffect(() => {
-    fetchFolders(client, config.folders.type).then(setFolders);
-  }, [client, config.folders.type]);
   const encoding = useMemo(() => {
     return { ...config.encoding, quality, preferBitrate };
   }, [config.encoding, quality, preferBitrate]);
-  const paths = resolveFolderPaths(folders);
   const pending = items.filter((item) => item.status === "pending");
   const isBusy = items.some((item) => item.status === "working");
   const canStart = pending.length > 0 && !isBusy && canEncode !== false;
@@ -776,7 +833,7 @@ var DialogUpload = ({
         update(item.id, {
           status: "failed",
           progress: null,
-          error: error instanceof Error ? error.message : String(error)
+          error: toMessage(error)
         });
       }
     }
@@ -817,28 +874,22 @@ var DialogUpload = ({
       id: "r2-video-upload",
       width: 1,
       onClose: isBusy ? void 0 : onClose,
-      footer: /* @__PURE__ */ jsx(Card, { borderTop: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            disabled: isBusy,
-            mode: "ghost",
+      footer: /* @__PURE__ */ jsx(
+        DialogActions,
+        {
+          cancel: {
             text: items.length > 0 && !canStart ? "Done" : "Cancel",
-            width: "fill",
+            disabled: isBusy,
             onClick: onClose
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            disabled: !canStart,
-            text: isBusy ? "Encoding\u2026" : `Upload ${countLabel(pending.length)}`,
+          },
+          confirm: {
+            text: isBusy ? "Encoding\u2026" : `Upload ${pluralize(pending.length, "video")}`,
             tone: "primary",
-            width: "fill",
+            disabled: !canStart,
             onClick: confirmed
           }
-        ) })
-      ] }) }),
+        }
+      ),
       children: /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
         canEncode === false && /* @__PURE__ */ jsx(UnsupportedBrowser, {}),
         /* @__PURE__ */ jsx(
@@ -883,7 +934,7 @@ var DialogUpload = ({
           }
         ),
         items.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, weight: "medium", children: countLabel(items.length) }),
+          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, weight: "medium", children: pluralize(items.length, "video") }),
           /* @__PURE__ */ jsx(Stack, { gap: 2, children: items.map((item) => /* @__PURE__ */ jsx(
             Card,
             {
@@ -976,7 +1027,7 @@ var InputVideo = (props) => {
   };
   return /* @__PURE__ */ jsxs(Stack, { gap: 3, style: { position: "relative" }, ...dropProps, children: [
     isDragging && /* @__PURE__ */ jsx(DropToUpload, { isRejected }),
-    /* @__PURE__ */ jsxs(Flex, { gap: 0, children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
       /* @__PURE__ */ jsx(Box, { flex: 1, children: renderDefault({
         ...props,
         renderField: (field) => field.children
@@ -1015,7 +1066,7 @@ var VideoPreview = ({ renditions, posterUrl }) => {
   const config = useR2VideoConfig();
   const rendition = resolvePreviewRendition(renditions);
   if (!rendition) {
-    return /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, tone: "caution", children: /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "This video has no renditions to play." }) });
+    return /* @__PURE__ */ jsx(Notice, { tone: "caution", children: "This video has no renditions to play." });
   }
   return /* @__PURE__ */ jsx(
     "video",
@@ -1054,9 +1105,6 @@ var VideoSummary = ({
   hasAudio,
   uploadedAt
 }) => {
-  const totalBytes = renditions.reduce((total, rendition) => {
-    return total + rendition.size;
-  }, 0);
   const ordered = [...renditions].sort((a, b) => b.height - a.height);
   const largest = ordered[0];
   return /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
@@ -1070,7 +1118,7 @@ var VideoSummary = ({
       ),
       /* @__PURE__ */ jsx(Fact, { label: "Duration", value: formatDuration(duration) }),
       /* @__PURE__ */ jsx(Fact, { label: "Audio", value: hasAudio ? "Kept" : "Stripped" }),
-      /* @__PURE__ */ jsx(Fact, { label: "Total", value: formatSize(totalBytes) })
+      /* @__PURE__ */ jsx(Fact, { label: "Total", value: formatSize(totalSize(renditions)) })
     ] }) }),
     /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
       /* @__PURE__ */ jsx(Text, { muted: true, size: 1, weight: "medium", children: "Renditions" }),
@@ -1277,8 +1325,7 @@ var SCHEMA_R2_VIDEO = defineType({
   }
 });
 var DialogDelete = ({ asset, onDeleted, onClose }) => {
-  const config = useR2VideoConfig();
-  const client = useClient({ apiVersion: config.apiVersion });
+  const { config, client } = useR2VideoClient();
   const [blockers, setBlockers] = useState(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const [error, setError] = useState(null);
@@ -1294,13 +1341,10 @@ var DialogDelete = ({ asset, onDeleted, onClose }) => {
       await deleteVideoAsset(client, config, asset);
       onDeleted();
     } catch (caught) {
-      setError(caught instanceof Error ? caught.message : String(caught));
+      setError(toMessage(caught));
       setIsDeleting(false);
     }
   };
-  const totalBytes = asset.renditions.reduce((total, rendition) => {
-    return total + rendition.size;
-  }, 0);
   const isBlocked = blockers !== null && blockers.length > 0;
   return /* @__PURE__ */ jsx(
     Dialog,
@@ -1309,28 +1353,18 @@ var DialogDelete = ({ asset, onDeleted, onClose }) => {
       id: "r2-video-delete",
       width: 1,
       onClose: isDeleting ? void 0 : onClose,
-      footer: /* @__PURE__ */ jsx(Card, { borderTop: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            disabled: isDeleting,
-            mode: "ghost",
-            text: "Cancel",
-            width: "fill",
-            onClick: onClose
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            disabled: isDeleting || isBlocked || blockers === null,
+      footer: /* @__PURE__ */ jsx(
+        DialogActions,
+        {
+          cancel: { text: "Cancel", disabled: isDeleting, onClick: onClose },
+          confirm: {
             text: isDeleting ? "Deleting\u2026" : "Delete",
             tone: "critical",
-            width: "fill",
+            disabled: isDeleting || isBlocked || blockers === null,
             onClick: confirmed
           }
-        ) })
-      ] }) }),
+        }
+      ),
       children: /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
         /* @__PURE__ */ jsxs(Text, { size: 1, children: [
           asset.filename,
@@ -1338,15 +1372,11 @@ var DialogDelete = ({ asset, onDeleted, onClose }) => {
           asset.renditions.length,
           " renditions,",
           " ",
-          formatSize(totalBytes),
+          formatSize(totalSize(asset.renditions)),
           ", plus its poster."
         ] }),
-        blockers === null && !error && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx(Spinner, { muted: true }),
-          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Checking where it's used\u2026" })
-        ] }),
-        isBlocked && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "caution", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Still in use" }),
+        blockers === null && !error && /* @__PURE__ */ jsx(Loading, { children: "Checking where it's used\u2026" }),
+        isBlocked && /* @__PURE__ */ jsx(Notice, { title: "Still in use", tone: "caution", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
           /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Remove it from these documents first:" }),
           blockers.map((blocker) => /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
             blocker.title || blocker._id,
@@ -1356,36 +1386,25 @@ var DialogDelete = ({ asset, onDeleted, onClose }) => {
           ] }, blocker._id))
         ] }) }),
         blockers !== null && blockers.length === 0 && /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Nothing references it. This can't be undone." }),
-        error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) })
+        error && /* @__PURE__ */ jsx(Notice, { tone: "critical", children: error })
       ] }) })
     }
   );
 };
-var Field2 = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-    /* @__PURE__ */ jsx(Text, { muted: true, size: 1, weight: "medium", children: label }),
-    children
-  ] });
-};
 var DialogDetails = ({
   asset,
   onChanged,
   onDelete,
   onClose
 }) => {
-  const config = useR2VideoConfig();
-  const client = useClient({ apiVersion: config.apiVersion });
-  const [folders, setFolders] = useState([]);
+  const { client } = useR2VideoClient();
+  const { paths } = useFolders();
   const [folderId, setFolderId] = useState(
     asset.folder ? asset.folder._ref : ""
   );
   const [filename, setFilename] = useState(asset.filename);
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState(null);
-  useEffect(() => {
-    fetchFolders(client, config.folders.type).then(setFolders);
-  }, [client, config.folders.type]);
-  const paths = resolveFolderPaths(folders);
   const isBroken = asset.renditions.length === 0;
   const trimmed = filename.trim();
   const savedFolderId = asset.folder ? asset.folder._ref : "";
@@ -1426,7 +1445,7 @@ var DialogDetails = ({
       onChanged();
     } catch (caught) {
       reset();
-      setError(caught instanceof Error ? caught.message : String(caught));
+      setError(toMessage(caught));
     }
     setIsSaving(false);
   };
@@ -1437,40 +1456,34 @@ var DialogDetails = ({
       id: "r2-video-details",
       width: 1,
       onClose: isSaving ? void 0 : onClose,
-      footer: /* @__PURE__ */ jsx(Card, { borderTop: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            "aria-label": "Delete video",
-            disabled: isSaving,
-            icon: TrashIcon,
-            mode: "ghost",
-            tone: "critical",
-            onClick: onDelete
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            disabled: isSaving,
-            mode: "ghost",
+      footer: /* @__PURE__ */ jsx(
+        DialogActions,
+        {
+          aside: /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "Delete video",
+              disabled: isSaving,
+              icon: TrashIcon,
+              mode: "ghost",
+              tone: "critical",
+              onClick: onDelete
+            }
+          ),
+          cancel: {
             text: isDirty ? "Discard" : "Close",
-            width: "fill",
+            disabled: isSaving,
             onClick: isDirty ? reset : onClose
-          }
-        ) }),
-        !isBroken && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            disabled: isSaving || !isDirty,
+          },
+          confirm: isBroken ? void 0 : {
             text: isSaving ? "Saving\u2026" : "Save changes",
             tone: "primary",
-            width: "fill",
+            disabled: isSaving || !isDirty,
             onClick: save
           }
-        ) })
-      ] }) }),
-      children: /* @__PURE__ */ jsx(Card, { padding: 4, children: isBroken ? /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, tone: "caution", children: /* @__PURE__ */ jsx(Text, { size: 1, children: "This video was never finished uploading, so it has no renditions and nothing stored behind it. Delete it." }) }) : /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
+        }
+      ),
+      children: /* @__PURE__ */ jsx(Card, { padding: 4, children: isBroken ? /* @__PURE__ */ jsx(Notice, { tone: "caution", children: "This video was never finished uploading, so it has no renditions and nothing stored behind it. Delete it." }) : /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
         /* @__PURE__ */ jsx(
           VideoPreview,
           {
@@ -1479,7 +1492,7 @@ var DialogDetails = ({
           }
         ),
         /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
-          /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Field2, { label: "Filename", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Field, { label: "Filename", children: /* @__PURE__ */ jsx(
             TextInput,
             {
               "aria-label": "Filename",
@@ -1493,7 +1506,7 @@ var DialogDetails = ({
               }
             }
           ) }) }),
-          /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Field2, { label: "Folder", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Field, { label: "Folder", children: /* @__PURE__ */ jsxs(
             Select,
             {
               "aria-label": "Folder",
@@ -1507,7 +1520,7 @@ var DialogDetails = ({
             }
           ) }) })
         ] }),
-        error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
+        error && /* @__PURE__ */ jsx(Notice, { tone: "critical", children: error }),
         /* @__PURE__ */ jsx(
           VideoSummary,
           {
@@ -1556,19 +1569,15 @@ var removeOrphans = async (client, config, orphans) => {
     }
   }
 };
-var countLabel2 = (count, noun) => {
-  return `${count} ${noun}${count === 1 ? "" : "s"}`;
-};
 var DialogOrphans = ({ onCleaned, onClose }) => {
-  const config = useR2VideoConfig();
-  const client = useClient({ apiVersion: config.apiVersion });
+  const { config, client } = useR2VideoClient();
   const [orphans, setOrphans] = useState(null);
   const [isRemoving, setIsRemoving] = useState(false);
   const [isDone, setIsDone] = useState(false);
   const [error, setError] = useState(null);
   useEffect(() => {
     findOrphans(client, config).then(setOrphans).catch((caught) => {
-      setError(caught instanceof Error ? caught.message : String(caught));
+      setError(toMessage(caught));
     });
   }, [client, config]);
   const confirmed = async () => {
@@ -1582,7 +1591,7 @@ var DialogOrphans = ({ onCleaned, onClose }) => {
       setIsDone(true);
       onCleaned();
     } catch (caught) {
-      setError(caught instanceof Error ? caught.message : String(caught));
+      setError(toMessage(caught));
     }
     setIsRemoving(false);
   };
@@ -1594,46 +1603,37 @@ var DialogOrphans = ({ onCleaned, onClose }) => {
       id: "r2-video-orphans",
       width: 1,
       onClose: isRemoving ? void 0 : onClose,
-      footer: /* @__PURE__ */ jsx(Card, { borderTop: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            disabled: isRemoving,
-            mode: "ghost",
+      footer: /* @__PURE__ */ jsx(
+        DialogActions,
+        {
+          cancel: {
             text: isDone ? "Done" : "Cancel",
-            width: "fill",
+            disabled: isRemoving,
             onClick: onClose
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            disabled: isRemoving || isDone || total === 0,
+          },
+          confirm: {
             text: isRemoving ? "Removing\u2026" : "Remove",
             tone: "critical",
-            width: "fill",
+            disabled: isRemoving || isDone || total === 0,
             onClick: confirmed
           }
-        ) })
-      ] }) }),
+        }
+      ),
       children: /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-        !orphans && !error && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx(Spinner, { muted: true }),
-          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Comparing storage against the library\u2026" })
-        ] }),
-        isDone && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "positive", children: /* @__PURE__ */ jsx(Text, { size: 1, children: "Removed." }) }),
+        !orphans && !error && /* @__PURE__ */ jsx(Loading, { children: "Comparing storage against the library\u2026" }),
+        isDone && /* @__PURE__ */ jsx(Notice, { tone: "positive", children: "Removed." }),
         orphans && !isDone && total === 0 && /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Nothing to clean up - every stored file belongs to a video." }),
         orphans && !isDone && total > 0 && /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
           /* @__PURE__ */ jsxs(Text, { size: 1, children: [
             "Found ",
-            countLabel2(orphans.keys.length, "orphaned file"),
+            pluralize(orphans.keys.length, "orphaned file"),
             " in R2 and ",
-            countLabel2(orphans.posterIds.length, "unused poster"),
+            pluralize(orphans.posterIds.length, "unused poster"),
             " in Sanity."
           ] }),
           /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Nothing references any of them, so removing them can't affect the site. This can't be undone." })
         ] }),
-        error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) })
+        error && /* @__PURE__ */ jsx(Notice, { tone: "critical", children: error })
       ] }) })
     }
   );
@@ -1738,8 +1738,7 @@ var matches = (asset, search) => {
   return asset.filename.toLowerCase().includes(term) || folderName.toLowerCase().includes(term);
 };
 var ToolVideoLibrary = () => {
-  const config = useR2VideoConfig();
-  const client = useClient({ apiVersion: config.apiVersion });
+  const { config, client } = useR2VideoClient();
   const [assets, setAssets] = useState(null);
   const [folders, setFolders] = useState([]);
   const [search, setSearch] = useState("");
@@ -1826,10 +1825,7 @@ var ToolVideoLibrary = () => {
               }
             )
           ] }),
-          assets === null && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, padding: 4, children: [
-            /* @__PURE__ */ jsx(Spinner, { muted: true }),
-            /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Loading library\u2026" })
-          ] }),
+          assets === null && /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Loading, { children: "Loading library\u2026" }) }),
           assets !== null && visible.length === 0 && /* @__PURE__ */ jsx(Card, { padding: 5, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsx(Text, { align: "center", muted: true, size: 1, children: "No videos here yet." }) }),
           /* @__PURE__ */ jsx(Grid, { gridTemplateColumns: [1, 2, 3, 4], gap: 3, children: visible.map((asset) => /* @__PURE__ */ jsx(
             Card,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sanity-plugin-r2-video",
-	"version": "0.1.8",
+	"version": "0.1.9",
 	"description": "Video for Sanity Studio, encoded in the browser and stored in Cloudflare R2 as a ladder of plain MP4s.",
 	"keywords": [
 		"sanity",