sanity-plugin-r2-video 0.1.10 → 0.1.11

package/dist/studio/index.js

@@ -1,6 +1,6 @@
 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';
@@ -11,9 +11,12 @@ 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';
 
@@ -1775,6 +1778,40 @@ 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;
 
@@ -1800,7 +1837,7 @@ var ToolVideoLibrary = () => {
   const [droppedFiles, setDroppedFiles] = useState([]);
   const [detailing, setDetailing] = useState(null);
   const [deleting, setDeleting] = useState(null);
-  const [isUnusedOnly, setIsUnusedOnly] = useState(false);
+  const [filterKeys, setFilterKeys] = useState([]);
   const [selectedIds, setSelectedIds] = useState([]);
   const [isMoving, setIsMoving] = useState(false);
   const load = useCallback(() => {
@@ -1832,10 +1869,14 @@ var ToolVideoLibrary = () => {
   };
   const visible = (assets ?? []).filter((asset) => {
     const inFolder = !folderId || asset.folder && asset.folder._ref === folderId;
-    const isShown = !isUnusedOnly || !asset.isUsed;
-    return matches(asset, search) && inFolder && isShown;
+    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];
@@ -1883,12 +1924,31 @@ var ToolVideoLibrary = () => {
               }
             ) }),
             /* @__PURE__ */ jsx(
-              Button,
+              MenuButton,
               {
-                mode: isUnusedOnly ? "default" : "ghost",
-                text: "Unused",
-                tone: isUnusedOnly ? "primary" : "default",
-                onClick: () => setIsUnusedOnly(!isUnusedOnly)
+                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(

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sanity-plugin-r2-video",
-	"version": "0.1.10",
+	"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",