sanity-plugin-r2-video 0.1.8 → 0.1.10

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 { Box, Stack, Flex, Button, TextInput, Card, Text, Select, Grid, Checkbox, Dialog, Spinner, Switch } from '@sanity/ui';
 import { AccessDeniedIcon } from '@sanity/icons/AccessDenied';
 import { canEncodeVideo } from 'mediabunny';
 import { WarningOutlineIcon } from '@sanity/icons/WarningOutline';
@@ -14,6 +14,7 @@ import { ChevronRightIcon } from '@sanity/icons/ChevronRight';
 import { SearchIcon } from '@sanity/icons/Search';
 import { SyncIcon } from '@sanity/icons/Sync';
 import { TrashIcon } from '@sanity/icons/Trash';
+import styled from 'styled-components';
 import { FolderIcon } from '@sanity/icons/Folder';
 
 // studio/client.ts
@@ -107,6 +108,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 +169,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 +218,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 +356,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 +448,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 +468,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 +510,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 +768,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 +781,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 +798,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 +834,7 @@ var DialogUpload = ({
         update(item.id, {
           status: "failed",
           progress: null,
-          error: error instanceof Error ? error.message : String(error)
+          error: toMessage(error)
         });
       }
     }
@@ -817,28 +875,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 +935,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 +1028,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 +1067,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 +1106,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 +1119,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" }),
@@ -1276,116 +1325,109 @@ var SCHEMA_R2_VIDEO = defineType({
     }
   }
 });
-var DialogDelete = ({ asset, onDeleted, onClose }) => {
-  const config = useR2VideoConfig();
-  const client = useClient({ apiVersion: config.apiVersion });
-  const [blockers, setBlockers] = useState(null);
+var DialogDelete = ({ assets, onDeleted, onClose }) => {
+  const { config, client } = useR2VideoClient();
+  const [blocked, setBlocked] = useState(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const [error, setError] = useState(null);
   useEffect(() => {
-    findReferencingDocuments(client, asset._id).then(setBlockers).catch(() => {
-      setError("Could not check which documents use this video.");
+    Promise.all(
+      assets.map(async (asset) => ({
+        asset,
+        documents: await findReferencingDocuments(client, asset._id)
+      }))
+    ).then((checked) => {
+      setBlocked(checked.filter((entry) => entry.documents.length > 0));
+    }).catch(() => {
+      setError("Could not check which documents use these videos.");
     });
-  }, [client, asset._id]);
+  }, [client, assets]);
   const confirmed = async () => {
     setIsDeleting(true);
     setError(null);
     try {
-      await deleteVideoAsset(client, config, asset);
+      for (const asset of assets) {
+        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;
+  const isBlocked = blocked !== null && blocked.length > 0;
+  const renditions = assets.flatMap((asset) => asset.renditions);
+  const isOne = assets.length === 1;
   return /* @__PURE__ */ jsx(
     Dialog,
     {
-      header: "Delete video",
+      header: isOne ? "Delete video" : `Delete ${assets.length} videos`,
       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 || blocked === null,
             onClick: confirmed
           }
-        ) })
-      ] }) }),
+        }
+      ),
       children: /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
         /* @__PURE__ */ jsxs(Text, { size: 1, children: [
-          asset.filename,
-          " - ",
-          asset.renditions.length,
-          " renditions,",
+          isOne ? assets[0].filename : pluralize(assets.length, "video"),
+          " -",
           " ",
-          formatSize(totalBytes),
-          ", 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" })
+          pluralize(renditions.length, "rendition"),
+          ",",
+          " ",
+          formatSize(totalSize(renditions)),
+          ", plus",
+          " ",
+          isOne ? "its poster" : "their posters",
+          "."
         ] }),
-        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" }),
-          /* @__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,
-            " (",
-            blocker._type,
-            ")"
-          ] }, blocker._id))
+        blocked === null && !error && /* @__PURE__ */ jsx(Loading, { children: "Checking where they're used\u2026" }),
+        isBlocked && /* @__PURE__ */ jsx(Notice, { title: "Still in use", tone: "caution", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
+            "Remove ",
+            isOne ? "it" : "these",
+            " from these documents first:"
+          ] }),
+          blocked.map((entry) => /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
+            !isOne && `${entry.asset.filename}: `,
+            entry.documents.map((document) => document.title || document._id).join(", ")
+          ] }, entry.asset._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 }) })
+        blocked !== null && blocked.length === 0 && /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
+          "Nothing references ",
+          isOne ? "it" : "them",
+          ". This can't be undone."
+        ] }),
+        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 [isFlagged, setIsFlagged] = 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 : "";
@@ -1395,6 +1437,17 @@ var DialogDetails = ({
   const reset = () => {
     setFilename(asset.filename);
     setFolderId(savedFolderId);
+    setIsFlagged(false);
+  };
+  const attemptClose = () => {
+    if (isSaving) {
+      return;
+    }
+    if (isDirty) {
+      setIsFlagged(true);
+      return;
+    }
+    onClose();
   };
   const save = async () => {
     if (!isDirty) {
@@ -1423,10 +1476,11 @@ var DialogDetails = ({
         mutation = mutation.unset(removals);
       }
       await mutation.commit();
+      setIsFlagged(false);
       onChanged();
     } catch (caught) {
       reset();
-      setError(caught instanceof Error ? caught.message : String(caught));
+      setError(toMessage(caught));
     }
     setIsSaving(false);
   };
@@ -1436,41 +1490,36 @@ var DialogDetails = ({
       header: asset.filename || "Untitled video",
       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",
+      onClickOutside: attemptClose,
+      onClose: isSaving ? void 0 : attemptClose,
+      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 +1528,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 +1542,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 +1556,8 @@ var DialogDetails = ({
             }
           ) }) })
         ] }),
-        error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
+        isFlagged && /* @__PURE__ */ jsx(Notice, { tone: "caution", children: "Unsaved changes. Save them, or discard to close." }),
+        error && /* @__PURE__ */ jsx(Notice, { tone: "critical", children: error }),
         /* @__PURE__ */ jsx(
           VideoSummary,
           {
@@ -1556,19 +1606,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 +1628,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 +1640,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 })
       ] }) })
     }
   );
@@ -1716,6 +1753,7 @@ var QUERY_ASSETS = `*[_type == "r2Video.asset"] | order(uploadedAt desc){
 	"hasAudio": coalesce(hasAudio, false),
 	"renditions": coalesce(renditions, []),
 	uploadedAt,
+	"isUsed": count(*[references(^._id)]) > 0,
 	"posterUrl": poster.asset->url,
 	"folderName": folder->name
 }`;
@@ -1737,9 +1775,22 @@ var matches = (asset, search) => {
   const folderName = asset.folderName ?? "";
   return asset.filename.toLowerCase().includes(term) || folderName.toLowerCase().includes(term);
 };
+var SelectableCard = styled(Box)`
+	position: relative;
+
+	& [data-checkbox] {
+		opacity: 0;
+	}
+
+	&:hover [data-checkbox],
+	& [data-checkbox]:focus-within,
+	& [data-checkbox][data-selected="true"] {
+		opacity: 1;
+	}
+`;
 var ToolVideoLibrary = () => {
-  const config = useR2VideoConfig();
-  const client = useClient({ apiVersion: config.apiVersion });
+  const { config, client } = useR2VideoClient();
+  const { paths: allPaths } = useFolders();
   const [assets, setAssets] = useState(null);
   const [folders, setFolders] = useState([]);
   const [search, setSearch] = useState("");
@@ -1749,6 +1800,9 @@ var ToolVideoLibrary = () => {
   const [droppedFiles, setDroppedFiles] = useState([]);
   const [detailing, setDetailing] = useState(null);
   const [deleting, setDeleting] = useState(null);
+  const [isUnusedOnly, setIsUnusedOnly] = useState(false);
+  const [selectedIds, setSelectedIds] = useState([]);
+  const [isMoving, setIsMoving] = useState(false);
   const load = useCallback(() => {
     client.fetch(QUERY_ASSETS).then(setAssets);
     fetchFolders(client, config.folders.type).then(setFolders);
@@ -1778,8 +1832,29 @@ var ToolVideoLibrary = () => {
   };
   const visible = (assets ?? []).filter((asset) => {
     const inFolder = !folderId || asset.folder && asset.folder._ref === folderId;
-    return matches(asset, search) && inFolder;
+    const isShown = !isUnusedOnly || !asset.isUsed;
+    return matches(asset, search) && inFolder && isShown;
   });
+  const selected = visible.filter((asset) => selectedIds.includes(asset._id));
+  const toggleSelected = (id) => {
+    setSelectedIds((current) => {
+      return current.includes(id) ? current.filter((entry) => entry !== id) : [...current, id];
+    });
+  };
+  const moveSelected = async (targetId) => {
+    setIsMoving(true);
+    let transaction = client.transaction();
+    for (const asset of selected) {
+      transaction = targetId ? transaction.patch(
+        asset._id,
+        (patch) => patch.set({ folder: { _type: "reference", _ref: targetId } })
+      ) : transaction.patch(asset._id, (patch) => patch.unset(["folder"]));
+    }
+    await transaction.commit();
+    setIsMoving(false);
+    setSelectedIds([]);
+    load();
+  };
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -1807,6 +1882,15 @@ var ToolVideoLibrary = () => {
                 onChange: (event) => setSearch(event.currentTarget.value)
               }
             ) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                mode: isUnusedOnly ? "default" : "ghost",
+                text: "Unused",
+                tone: isUnusedOnly ? "primary" : "default",
+                onClick: () => setIsUnusedOnly(!isUnusedOnly)
+              }
+            ),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -1826,45 +1910,115 @@ 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" })
-          ] }),
+          selected.length > 0 && /* @__PURE__ */ jsx(Card, { border: true, padding: 2, radius: 2, tone: "primary", children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx(Box, { paddingX: 2, children: /* @__PURE__ */ jsxs(Text, { size: 1, weight: "medium", children: [
+              pluralize(selected.length, "video"),
+              " selected"
+            ] }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxs(
+              Select,
+              {
+                "aria-label": "Move to folder",
+                disabled: isMoving,
+                value: "",
+                onChange: (event) => moveSelected(event.currentTarget.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Move to\u2026" }),
+                  /* @__PURE__ */ jsx("option", { value: "", children: "No folder" }),
+                  allPaths.map((entry) => /* @__PURE__ */ jsx("option", { value: entry.id, children: entry.path }, entry.id))
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: isMoving,
+                mode: "ghost",
+                text: "Clear",
+                onClick: () => setSelectedIds([])
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: isMoving,
+                icon: TrashIcon,
+                mode: "ghost",
+                text: "Delete",
+                tone: "critical",
+                onClick: () => setDeleting(selected)
+              }
+            )
+          ] }) }),
+          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,
-            {
-              as: "button",
-              border: true,
-              padding: 2,
-              radius: 2,
-              style: { cursor: "pointer", textAlign: "left" },
-              onClick: () => setDetailing(asset),
-              children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-                /* @__PURE__ */ jsx(
-                  Box,
+          /* @__PURE__ */ jsx(Grid, { gridTemplateColumns: [1, 2, 3, 4], gap: 3, children: visible.map((asset) => /* @__PURE__ */ jsxs(SelectableCard, { children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                "data-checkbox": true,
+                "data-selected": selectedIds.includes(asset._id),
+                style: {
+                  position: "absolute",
+                  top: 14,
+                  left: 14,
+                  zIndex: 1
+                },
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
                   {
-                    style: {
-                      aspectRatio: "16 / 9",
-                      backgroundImage: asset.posterUrl ? `url(${asset.posterUrl}?w=480&fit=crop&auto=format)` : void 0,
-                      backgroundPosition: "center",
-                      backgroundSize: "cover",
-                      borderRadius: 2
-                    }
+                    "aria-label": `Select ${asset.filename}`,
+                    checked: selectedIds.includes(asset._id),
+                    onChange: () => toggleSelected(asset._id)
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Card,
+              {
+                as: "button",
+                border: true,
+                padding: 2,
+                radius: 2,
+                style: {
+                  cursor: "pointer",
+                  textAlign: "left",
+                  width: "100%"
+                },
+                onClick: (event) => {
+                  if (event.shiftKey) {
+                    toggleSelected(asset._id);
+                    return;
                   }
-                ),
-                /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-                  /* @__PURE__ */ jsx(Text, { size: 1, textOverflow: "ellipsis", weight: "medium", children: toTitle(asset, Boolean(folderId)) }),
-                  /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
-                    asset.renditions.length,
-                    " sizes",
-                    asset.hasAudio ? " \xB7 audio" : ""
+                  setDetailing(asset);
+                },
+                children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      style: {
+                        aspectRatio: "16 / 9",
+                        backgroundImage: asset.posterUrl ? `url(${asset.posterUrl}?w=480&fit=crop&auto=format)` : void 0,
+                        backgroundPosition: "center",
+                        backgroundSize: "cover",
+                        borderRadius: 2
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+                    /* @__PURE__ */ jsx(Text, { size: 1, textOverflow: "ellipsis", weight: "medium", children: toTitle(asset, Boolean(folderId)) }),
+                    /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
+                      asset.renditions.length,
+                      " sizes",
+                      asset.hasAudio ? " \xB7 audio" : "",
+                      asset.isUsed ? "" : " \xB7 unused"
+                    ] })
                   ] })
                 ] })
-              ] })
-            },
-            asset._id
-          )) })
+              }
+            )
+          ] }, asset._id)) })
         ] }) }) }),
         isDragging && /* @__PURE__ */ jsx(DropToUpload, { isRejected }),
         isUploadOpen && /* @__PURE__ */ jsx(
@@ -1889,7 +2043,7 @@ var ToolVideoLibrary = () => {
             asset: detailing,
             onChanged: load,
             onDelete: () => {
-              setDeleting(detailing);
+              setDeleting([detailing]);
               setDetailing(null);
             },
             onClose: () => setDetailing(null)
@@ -1898,7 +2052,7 @@ var ToolVideoLibrary = () => {
         deleting && /* @__PURE__ */ jsx(
           DialogDelete,
           {
-            asset: deleting,
+            assets: deleting,
             onClose: () => setDeleting(null),
             onDeleted: () => {
               setDeleting(null);

package/package.json

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