sanity-plugin-mux-input 2.2.0 → 2.2.2

package/lib/index.js

@@ -44,7 +44,7 @@ function tokenize(string) {
 function toGroqParams(terms) {
   const params = {};
   return terms.reduce((acc, term, i) => {
-    acc["t".concat(i)] = "*".concat(term, "*");
+    acc["t".concat(i)] = "".concat(term, "*");
     return acc;
   }, params);
 }
@@ -61,7 +61,7 @@ function extractTermsFromQuery(query) {
   const remainingTerms = uniq(compact(tokenize(toLower(unquotedQuery))));
   return [...quotedTerms, ...remainingTerms];
 }
-const SEARCH_PATHS = ["filename", "assetId", "_id"];
+const SEARCH_PATHS = ["filename"];
 function createConstraints(terms) {
   const constraints = terms.map((_term, i) => SEARCH_PATHS.map(joinedPath => "".concat(joinedPath, " match $t").concat(i))).filter(constraint => constraint.length > 0);
   return constraints.map(constraint => "(".concat(constraint.join(" || "), ")"));
@@ -101,9 +101,9 @@ const useAssetDocuments = createHookFromObservableFactory(_ref => {
   } = _ref;
   const search = createSearchFilter(searchQuery);
   const filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && ");
-  const query = ASSET_SORT_OPTIONS[sort].groq;
+  const sortFragment = ASSET_SORT_OPTIONS[sort].groq;
   return documentStore.listenQuery( /* groq */
-  "*[".concat(filter, "] | order(").concat(query, ")"), search.params, {
+  "*[".concat(filter, "] | order(").concat(sortFragment, ")"), search.params, {
     apiVersion: SANITY_API_VERSION
   });
 });
@@ -182,7 +182,7 @@ const cacheNs = "sanity-plugin-mux-input";
 const muxSecretsDocumentId = "secrets.mux";
 const DIALOGS_Z_INDEX = 6e4;
 const THUMBNAIL_ASPECT_RATIO = 16 / 9;
-const MIN_ASPECT_RATIO = 1;
+const MIN_ASPECT_RATIO = 5 / 4;
 function FormField(props) {
   const {
     children,
@@ -339,7 +339,7 @@ function getVideoSrc(_ref3) {
   return "https://stream.mux.com/".concat(playbackId, ".m3u8?").concat(searchParams);
 }
 var name = "sanity-plugin-mux-input";
-var version = "2.2.0";
+var version = "2.2.2";
 var description = "An input component that integrates Sanity Studio with Mux video encoding/hosting service.";
 var keywords = ["sanity", "video", "mux", "input", "plugin", "sanity-plugin", "media"];
 var homepage = "https://github.com/sanity-io/sanity-plugin-mux-input#readme";
@@ -400,7 +400,7 @@ var dependencies = {
   "scroll-into-view-if-needed": "^3",
   "suspend-react": "^0.1.0",
   swr: "^2.1.0",
-  "type-fest": "^3.6.1",
+  "type-fest": "^4.0.0",
   "use-error-boundary": "^2.0.6"
 };
 var devDependencies = {
@@ -420,16 +420,16 @@ var devDependencies = {
   "eslint-config-react-app": "^7.0.1",
   "eslint-config-sanity": "^6.0.0",
   "eslint-plugin-import": "^2.28.0",
-  "eslint-plugin-prettier": "^4.2.1",
+  "eslint-plugin-prettier": "^5.0.0",
   "eslint-plugin-react": "^7.33.1",
   "eslint-plugin-react-hooks": "^4.6.0",
   "eslint-plugin-simple-import-sort": "^10.0.0",
   husky: "^8.0.3",
   "lint-staged": "^13.2.3",
   next: "^13.4.12",
-  "next-sanity": "^4.3.3",
+  "next-sanity": "^5.1.6",
   "npm-run-all": "^4.1.5",
-  prettier: "^2.8.8",
+  prettier: "^3.0.1",
   "prettier-plugin-packagejson": "^2.4.5",
   react: "^18.2.0",
   "react-dom": "^18.2.0",
@@ -449,7 +449,8 @@ var engines = {
   node: ">=14"
 };
 var publishConfig = {
-  access: "public"
+  access: "public",
+  provenance: true
 };
 var sanityExchangeUrl = "https://www.sanity.io/plugins/sanity-plugin-mux-input";
 var pluginPkg = {
@@ -768,29 +769,28 @@ function DocumentPreview(props) {
     children: PreviewComponent
   });
 }
-var __freeze$b = Object.freeze;
-var __defProp$c = Object.defineProperty;
-var __template$b = (cooked, raw) => __freeze$b(__defProp$c(cooked, "raw", {
-  value: __freeze$b(raw || cooked.slice())
+var __freeze$c = Object.freeze;
+var __defProp$d = Object.defineProperty;
+var __template$c = (cooked, raw) => __freeze$c(__defProp$d(cooked, "raw", {
+  value: __freeze$c(raw || cooked.slice())
 }));
-var _a$b;
-const Container = styled(Box)(_a$b || (_a$b = __template$b(["\n  * {\n    color: ", ";\n  }\n  a {\n    text-decoration: none;\n  }\n  h2 {\n    font-size: ", ";\n  }\n"])), props => props.theme.sanity.color.base.fg, props => props.theme.sanity.fonts.text.sizes[1]);
-const FileReferences = props => {
+var _a$c;
+const Container = styled(Box)(_a$c || (_a$c = __template$c(["\n  * {\n    color: ", ";\n  }\n  a {\n    text-decoration: none;\n  }\n  h2 {\n    font-size: ", ";\n  }\n"])), props => props.theme.sanity.color.base.fg, props => props.theme.sanity.fonts.text.sizes[1]);
+const VideoReferences = props => {
   var _a2;
   const schema = useSchema();
   if (!props.isLoaded) {
     return /* @__PURE__ */jsx(SpinnerBox, {});
   }
   if (!((_a2 = props.references) == null ? void 0 : _a2.length)) {
-    return /* @__PURE__ */jsx(Text, {
-      size: 2,
-      weight: "bold",
-      muted: true,
-      style: {
-        marginTop: "1.5rem",
-        textAlign: "center"
-      },
-      children: "No documents are using this file"
+    return /* @__PURE__ */jsx(Card, {
+      border: true,
+      radius: 3,
+      padding: 3,
+      children: /* @__PURE__ */jsx(Text, {
+        size: 2,
+        children: "No documents are using this video"
+      })
     });
   }
   const documentPairs = collate(props.references || []);
@@ -863,9 +863,9 @@ function DeleteDialog(_ref7) {
     }
   }
   return /* @__PURE__ */jsx(Dialog, {
-    header: "Delete file",
+    header: "Delete video",
     zOffset: DIALOGS_Z_INDEX,
-    id: "deleting-file-details-dialog",
+    id: "deleting-video-details-dialog",
     onClose: cancelDelete,
     onClickOutside: cancelDelete,
     width: 1,
@@ -879,7 +879,7 @@ function DeleteDialog(_ref7) {
           icon: TrashIcon,
           fontSize: 2,
           padding: 3,
-          text: "Delete file",
+          text: "Delete video",
           tone: "critical",
           onClick: confirmDelete,
           disabled: ["processing_deletion", "checkingReferences", "cantDelete"].some(s => s === state)
@@ -899,7 +899,7 @@ function DeleteDialog(_ref7) {
         children: [state === "checkingReferences" && /* @__PURE__ */jsxs(Fragment, {
           children: [/* @__PURE__ */jsx(Heading, {
             size: 2,
-            children: "Checking if file can be deleted"
+            children: "Checking if video can be deleted"
           }), /* @__PURE__ */jsx(SpinnerBox, {})]
         }), state === "cantDelete" && /* @__PURE__ */jsxs(Fragment, {
           children: [/* @__PURE__ */jsx(Heading, {
@@ -910,8 +910,8 @@ function DeleteDialog(_ref7) {
             style: {
               marginBottom: "2rem"
             },
-            children: ["There are ", references == null ? void 0 : references.length, " document", references && references.length > 0 && "s", " ", "pointing to this file. Remove their references to this file or delete them before proceeding."]
-          }), /* @__PURE__ */jsx(FileReferences, {
+            children: ["There are ", references == null ? void 0 : references.length, " document", references && references.length > 0 && "s", " ", "pointing to this video. Remove their references to this file or delete them before proceeding."]
+          }), /* @__PURE__ */jsx(VideoReferences, {
             references,
             isLoaded: !referencesLoading,
             placement
@@ -919,7 +919,7 @@ function DeleteDialog(_ref7) {
         }), state === "confirm" && /* @__PURE__ */jsxs(Fragment, {
           children: [/* @__PURE__ */jsx(Heading, {
             size: 2,
-            children: "Are you sure you want to delete this file?"
+            children: "Are you sure you want to delete this video?"
           }), /* @__PURE__ */jsx(Text, {
             size: 2,
             children: "This action is irreversible"
@@ -955,7 +955,7 @@ function DeleteDialog(_ref7) {
         }), state === "processing_deletion" && /* @__PURE__ */jsxs(Fragment, {
           children: [/* @__PURE__ */jsx(Heading, {
             size: 2,
-            children: "Deleting file..."
+            children: "Deleting video..."
           }), /* @__PURE__ */jsx(SpinnerBox, {})]
         }), state === "error_deleting" && /* @__PURE__ */jsxs(Fragment, {
           children: [/* @__PURE__ */jsx(Heading, {
@@ -963,7 +963,7 @@ function DeleteDialog(_ref7) {
             children: "Something went wrong!"
           }), /* @__PURE__ */jsx(Text, {
             size: 2,
-            children: "Try deleting the file again by clicking the button below"
+            children: "Try deleting the video again by clicking the button below"
           })]
         })]
       })
@@ -1010,7 +1010,7 @@ function getVideoMetadata(doc) {
     max_stored_frame_rate: (_f = doc.data) == null ? void 0 : _f.max_stored_frame_rate
   };
 }
-function useFileDetails(props) {
+function useVideoDetails(props) {
   const documentStore = useDocumentStore();
   const toast = useToast();
   const client = useClient();
@@ -1051,9 +1051,11 @@ function useFileDetails(props) {
         filename
       }));
       toast.push({
-        title: "File name updated",
+        title: "Video title updated",
+        description: "New title: ".concat(filename),
         status: "success"
       });
+      props.closeDialog();
     } catch (error) {
       toast.push({
         title: "Failed updating file name",
@@ -1104,7 +1106,7 @@ const VideoDetails = props => {
     handleClose,
     confirmClose,
     saveChanges
-  } = useFileDetails(props);
+  } = useVideoDetails(props);
   const isSaving = state === "saving";
   const [containerHeight, setContainerHeight] = useState(null);
   const contentsRef = React.useRef(null);
@@ -1115,13 +1117,10 @@ const VideoDetails = props => {
   return /* @__PURE__ */jsxs(Dialog, {
     header: displayInfo.title,
     zOffset: DIALOGS_Z_INDEX,
-    id: "file-details-dialog",
+    id: "video-details-dialog",
     onClose: handleClose,
     onClickOutside: handleClose,
     width: 2,
-    style: {
-      minHeight: "50vh"
-    },
     position: "fixed",
     footer: /* @__PURE__ */jsx(Card, {
       padding: 3,
@@ -1162,7 +1161,7 @@ const VideoDetails = props => {
     }), state === "closing" && /* @__PURE__ */jsx(Dialog, {
       header: "You have unsaved changes",
       zOffset: DIALOGS_Z_INDEX,
-      id: "closing-file-details-dialog",
+      id: "closing-video-details-dialog",
       onClose: () => confirmClose(false),
       onClickOutside: () => confirmClose(false),
       width: 1,
@@ -1242,11 +1241,11 @@ const VideoDetails = props => {
               label: "Details",
               onClick: () => setTab("details"),
               selected: tab === "details"
-            }), references && references.length > 0 && /* @__PURE__ */jsx(Tab, {
+            }), /* @__PURE__ */jsx(Tab, {
               "aria-controls": "references-panel",
               icon: SearchIcon,
               id: "references-tab",
-              label: "Used by (".concat(references.length, ")"),
+              label: "Used by ".concat(references ? "(".concat(references.length, ")") : ""),
               onClick: () => setTab("references"),
               selected: tab === "references"
             })]
@@ -1257,8 +1256,8 @@ const VideoDetails = props => {
             children: /* @__PURE__ */jsxs(Stack, {
               space: 4,
               children: [/* @__PURE__ */jsx(AssetInput, {
-                label: "File name",
-                description: "Not visible to users. Useful for finding files later.",
+                label: "Video title or file name",
+                description: "Not visible to users. Useful for finding videos later.",
                 value: filename || "",
                 onInput: e => setFilename(e.currentTarget.value),
                 disabled: state !== "idle"
@@ -1298,7 +1297,7 @@ const VideoDetails = props => {
             "aria-labelledby": "references-tab",
             id: "references-panel",
             hidden: tab !== "references",
-            children: /* @__PURE__ */jsx(FileReferences, {
+            children: /* @__PURE__ */jsx(VideoReferences, {
               references,
               isLoaded: !referencesLoading,
               placement: props.placement
@@ -1390,13 +1389,13 @@ function getAnimatedPosterSrc(_ref10) {
   }
   return "https://image.mux.com/".concat(playbackId, "/animated.gif?").concat(searchParams);
 }
-var __freeze$a = Object.freeze;
-var __defProp$b = Object.defineProperty;
-var __template$a = (cooked, raw) => __freeze$a(__defProp$b(cooked, "raw", {
-  value: __freeze$a(raw || cooked.slice())
+var __freeze$b = Object.freeze;
+var __defProp$c = Object.defineProperty;
+var __template$b = (cooked, raw) => __freeze$b(__defProp$c(cooked, "raw", {
+  value: __freeze$b(raw || cooked.slice())
 }));
-var _a$a;
-const Image = styled.img(_a$a || (_a$a = __template$a(["\n  transition: opacity 0.175s ease-out 0s;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  object-position: center center;\n"])));
+var _a$b;
+const Image = styled.img(_a$b || (_a$b = __template$b(["\n  transition: opacity 0.175s ease-out 0s;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  object-position: center center;\n"])));
 const STATUS_TO_TONE = {
   loading: "transparent",
   error: "critical",
@@ -1476,13 +1475,13 @@ function VideoThumbnail(_ref11) {
     }) : null
   });
 }
-var __freeze$9 = Object.freeze;
-var __defProp$a = Object.defineProperty;
-var __template$9 = (cooked, raw) => __freeze$9(__defProp$a(cooked, "raw", {
-  value: __freeze$9(raw || cooked.slice())
+var __freeze$a = Object.freeze;
+var __defProp$b = Object.defineProperty;
+var __template$a = (cooked, raw) => __freeze$a(__defProp$b(cooked, "raw", {
+  value: __freeze$a(raw || cooked.slice())
 }));
-var _a$9;
-const PlayButton = styled.button(_a$9 || (_a$9 = __template$9(["\n  display: block;\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-radius: 0.1875rem;\n  position: relative;\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    background: var(--card-fg-color);\n    opacity: 0;\n    display: block;\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    transition: 0.15s ease-out;\n    border-radius: inherit;\n  }\n\n  > div[data-play] {\n    z-index: 11;\n    opacity: 0;\n    transition: 0.15s 0.05s ease-out;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    width: auto;\n    height: 30%;\n    aspect-ratio: 1;\n    border-radius: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    > svg {\n      display: block;\n      width: 70%;\n      height: auto;\n      // Visual balance to center-align the icon\n      transform: translateX(5%);\n    }\n  }\n\n  &:hover,\n  &:focus {\n    &::after {\n      opacity: 0.3;\n    }\n    > div[data-play] {\n      opacity: 1;\n    }\n  }\n"])));
+var _a$a;
+const PlayButton = styled.button(_a$a || (_a$a = __template$a(["\n  display: block;\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-radius: 0.1875rem;\n  position: relative;\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    background: var(--card-fg-color);\n    opacity: 0;\n    display: block;\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    transition: 0.15s ease-out;\n    border-radius: inherit;\n  }\n\n  > div[data-play] {\n    z-index: 11;\n    opacity: 0;\n    transition: 0.15s 0.05s ease-out;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    width: auto;\n    height: 30%;\n    aspect-ratio: 1;\n    border-radius: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    > svg {\n      display: block;\n      width: 70%;\n      height: auto;\n      // Visual balance to center-align the icon\n      transform: translateX(5%);\n    }\n  }\n\n  &:hover,\n  &:focus {\n    &::after {\n      opacity: 0.3;\n    }\n    > div[data-play] {\n      opacity: 1;\n    }\n  }\n"])));
 function VideoInBrowser(_ref12) {
   let {
     onSelect,
@@ -1606,6 +1605,9 @@ function VideosBrowser(_ref13) {
     children: [/* @__PURE__ */jsxs(Stack, {
       padding: 4,
       space: 4,
+      style: {
+        minHeight: "50vh"
+      },
       children: [/* @__PURE__ */jsx(Flex, {
         justify: "space-between",
         align: "center",
@@ -1616,7 +1618,7 @@ function VideosBrowser(_ref13) {
             value: searchQuery,
             icon: SearchIcon,
             onInput: e => setSearchQuery(e.currentTarget.value),
-            placeholder: "Search files"
+            placeholder: "Search videos"
           }), /* @__PURE__ */jsx(SelectSortOptions, {
             setSort,
             sort
@@ -1639,13 +1641,15 @@ function VideosBrowser(_ref13) {
           }, asset._id))
         })]
       }), isLoading && /* @__PURE__ */jsx(SpinnerBox, {}), !isLoading && assets.length === 0 && /* @__PURE__ */jsx(Card, {
-        padding: 2,
+        padding: 4,
         marginY: 4,
         border: true,
         radius: 2,
+        tone: "transparent",
         children: /* @__PURE__ */jsx(Text, {
           align: "center",
           muted: true,
+          size: 3,
           children: searchQuery ? 'No videos found for "'.concat(searchQuery, '"') : "No videos in this dataset"
         })
       })]
@@ -2114,6 +2118,13 @@ function SelectAssets(_ref14) {
     onSelect: handleSelect
   });
 }
+var __freeze$9 = Object.freeze;
+var __defProp$a = Object.defineProperty;
+var __template$9 = (cooked, raw) => __freeze$9(__defProp$a(cooked, "raw", {
+  value: __freeze$9(raw || cooked.slice())
+}));
+var _a$9;
+const StyledDialog = styled(Dialog)(_a$9 || (_a$9 = __template$9(["\n  > div[data-ui='DialogCard'] > div[data-ui='Card'] {\n    height: 100%;\n  }\n"])));
 function InputBrowser(_ref15) {
   let {
     setDialogState,
@@ -2122,7 +2133,7 @@ function InputBrowser(_ref15) {
   } = _ref15;
   const id = "InputBrowser".concat(useId());
   const handleClose = useCallback(() => setDialogState(false), [setDialogState]);
-  return /* @__PURE__ */jsx(Dialog, {
+  return /* @__PURE__ */jsx(StyledDialog, {
     __unstable_autoFocus: true,
     header: "Select video",
     id,
@@ -2283,7 +2294,7 @@ const Player = _ref17 => {
     return /* @__PURE__ */jsx(UploadProgress, {
       progress: 100,
       filename: asset == null ? void 0 : asset.filename,
-      text: isLoading !== true && isLoading || "Waiting for Mux to complete the file",
+      text: isLoading !== true && isLoading || "Waiting for Mux to complete the upload",
       onCancel: readOnly ? void 0 : () => handleCancelUpload()
     });
   }