sanity-plugin-r2-video 0.1.9 → 0.1.11

package/dist/studio/index.js

@@ -1,19 +1,23 @@
 import { resolveRenditionPath } from '../chunk-D5VS4ED7.js';
 export { resolveRenditionPath } from '../chunk-D5VS4ED7.js';
-import { createContext, useState, useCallback, useEffect, useRef, useMemo, useId, useContext } from 'react';
+import { createContext, useState, useCallback, useEffect, Fragment, 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, Card, Text, Grid, Dialog, Spinner, 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';
 import { ChevronDownIcon } from '@sanity/icons/ChevronDown';
 import { ChevronRightIcon } from '@sanity/icons/ChevronRight';
+import { CheckmarkIcon } from '@sanity/icons/Checkmark';
+import { FilterIcon } from '@sanity/icons/Filter';
 import { SearchIcon } from '@sanity/icons/Search';
 import { SyncIcon } from '@sanity/icons/Sync';
 import { TrashIcon } from '@sanity/icons/Trash';
+import { MenuButton, Menu, MenuDivider, MenuItem } from '@sanity/ui/menu';
+import styled from 'styled-components';
 import { FolderIcon } from '@sanity/icons/Folder';
 
 // studio/client.ts
@@ -1324,32 +1328,43 @@ var SCHEMA_R2_VIDEO = defineType({
     }
   }
 });
-var DialogDelete = ({ asset, onDeleted, onClose }) => {
+var DialogDelete = ({ assets, onDeleted, onClose }) => {
   const { config, client } = useR2VideoClient();
-  const [blockers, setBlockers] = useState(null);
+  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(toMessage(caught));
       setIsDeleting(false);
     }
   };
-  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,
@@ -1360,32 +1375,42 @@ var DialogDelete = ({ asset, onDeleted, onClose }) => {
           confirm: {
             text: isDeleting ? "Deleting\u2026" : "Delete",
             tone: "critical",
-            disabled: isDeleting || isBlocked || blockers === null,
+            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"),
+          " -",
+          " ",
+          pluralize(renditions.length, "rendition"),
+          ",",
+          " ",
+          formatSize(totalSize(renditions)),
+          ", plus",
           " ",
-          formatSize(totalSize(asset.renditions)),
-          ", plus its poster."
+          isOne ? "its poster" : "their posters",
+          "."
         ] }),
-        blockers === null && !error && /* @__PURE__ */ jsx(Loading, { children: "Checking where it's used\u2026" }),
+        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__ */ 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))
+          /* @__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." }),
+        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 })
       ] }) })
     }
@@ -1404,6 +1429,7 @@ var DialogDetails = ({
   );
   const [filename, setFilename] = useState(asset.filename);
   const [isSaving, setIsSaving] = useState(false);
+  const [isFlagged, setIsFlagged] = useState(false);
   const [error, setError] = useState(null);
   const isBroken = asset.renditions.length === 0;
   const trimmed = filename.trim();
@@ -1414,6 +1440,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) {
@@ -1442,6 +1479,7 @@ var DialogDetails = ({
         mutation = mutation.unset(removals);
       }
       await mutation.commit();
+      setIsFlagged(false);
       onChanged();
     } catch (caught) {
       reset();
@@ -1455,7 +1493,8 @@ var DialogDetails = ({
       header: asset.filename || "Untitled video",
       id: "r2-video-details",
       width: 1,
-      onClose: isSaving ? void 0 : onClose,
+      onClickOutside: attemptClose,
+      onClose: isSaving ? void 0 : attemptClose,
       footer: /* @__PURE__ */ jsx(
         DialogActions,
         {
@@ -1520,6 +1559,7 @@ var DialogDetails = ({
             }
           ) }) })
         ] }),
+        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,
@@ -1716,6 +1756,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,8 +1778,56 @@ var matches = (asset, search) => {
   const folderName = asset.folderName ?? "";
   return asset.filename.toLowerCase().includes(term) || folderName.toLowerCase().includes(term);
 };
+var FILTERS = [
+  {
+    key: "foldered",
+    group: "folder",
+    label: "In a folder",
+    test: (asset) => Boolean(asset.folder)
+  },
+  {
+    key: "unfoldered",
+    group: "folder",
+    label: "No folder",
+    test: (asset) => !asset.folder
+  },
+  {
+    key: "used",
+    group: "usage",
+    label: "In use",
+    test: (asset) => asset.isUsed
+  },
+  {
+    key: "unused",
+    group: "usage",
+    label: "Unused",
+    test: (asset) => !asset.isUsed
+  }
+];
+var FILTER_GROUPS = [...new Set(FILTERS.map((filter) => filter.group))];
+var passesFilters = (asset, keys) => {
+  const active = FILTERS.filter((filter) => keys.includes(filter.key));
+  return FILTER_GROUPS.every((group) => {
+    const inGroup = active.filter((filter) => filter.group === group);
+    return inGroup.length === 0 || inGroup.some((filter) => filter.test(asset));
+  });
+};
+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, client } = useR2VideoClient();
+  const { paths: allPaths } = useFolders();
   const [assets, setAssets] = useState(null);
   const [folders, setFolders] = useState([]);
   const [search, setSearch] = useState("");
@@ -1748,6 +1837,9 @@ var ToolVideoLibrary = () => {
   const [droppedFiles, setDroppedFiles] = useState([]);
   const [detailing, setDetailing] = useState(null);
   const [deleting, setDeleting] = useState(null);
+  const [filterKeys, setFilterKeys] = useState([]);
+  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);
@@ -1777,8 +1869,33 @@ var ToolVideoLibrary = () => {
   };
   const visible = (assets ?? []).filter((asset) => {
     const inFolder = !folderId || asset.folder && asset.folder._ref === folderId;
-    return matches(asset, search) && inFolder;
+    return matches(asset, search) && inFolder && passesFilters(asset, filterKeys);
   });
+  const selected = visible.filter((asset) => selectedIds.includes(asset._id));
+  const toggleFilter = (key) => {
+    setFilterKeys((current) => {
+      return current.includes(key) ? current.filter((entry) => entry !== key) : [...current, key];
+    });
+  };
+  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,
     {
@@ -1806,6 +1923,34 @@ var ToolVideoLibrary = () => {
                 onChange: (event) => setSearch(event.currentTarget.value)
               }
             ) }),
+            /* @__PURE__ */ jsx(
+              MenuButton,
+              {
+                button: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: FilterIcon,
+                    mode: filterKeys.length > 0 ? "default" : "ghost",
+                    text: filterKeys.length > 0 ? `Filters (${filterKeys.length})` : "Filters",
+                    tone: filterKeys.length > 0 ? "primary" : "default"
+                  }
+                ),
+                id: "r2-video-filters",
+                menu: /* @__PURE__ */ jsx(Menu, { children: FILTERS.map((filter, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                  index > 0 && FILTERS[index - 1].group !== filter.group && /* @__PURE__ */ jsx(MenuDivider, {}),
+                  /* @__PURE__ */ jsx(
+                    MenuItem,
+                    {
+                      iconRight: filterKeys.includes(filter.key) ? CheckmarkIcon : void 0,
+                      pressed: filterKeys.includes(filter.key),
+                      text: filter.label,
+                      onClick: () => toggleFilter(filter.key)
+                    }
+                  )
+                ] }, filter.key)) }),
+                popover: { placement: "bottom-start" }
+              }
+            ),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -1825,42 +1970,115 @@ var ToolVideoLibrary = () => {
               }
             )
           ] }),
+          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__ */ 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" : ""
+                )
+              }
+            ),
+            /* @__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;
+                  }
+                  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(
@@ -1885,7 +2103,7 @@ var ToolVideoLibrary = () => {
             asset: detailing,
             onChanged: load,
             onDelete: () => {
-              setDeleting(detailing);
+              setDeleting([detailing]);
               setDetailing(null);
             },
             onClose: () => setDetailing(null)
@@ -1894,7 +2112,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.9",
+	"version": "0.1.11",
 	"description": "Video for Sanity Studio, encoded in the browser and stored in Cloudflare R2 as a ladder of plain MP4s.",
 	"keywords": [
 		"sanity",