sanity-plugin-mux-input 2.2.0 → 2.2.2

package/README.md

@@ -11,7 +11,7 @@ The Mux plugin for Sanity gives you a way to upload and preview videos easily.
 
 Not familiar with Sanity? [Visit www.sanity.io](https://www.sanity.io/)
 
-<img width="623" alt="image" src="https://user-images.githubusercontent.com/81981/213587541-5646267e-66b4-4a47-bae7-c5c8e83fc01d.png">
+<img width="623" alt="" src="https://github.com/sanity-io/sanity/assets/81981/7a9de462-746b-4c01-8b12-c55f0cbf6334">
 
 ## Installation
 

package/lib/index.cjs

@@ -59,7 +59,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);
 }
@@ -76,7 +76,7 @@ function extractTermsFromQuery(query) {
   const remainingTerms = lodash.uniq(lodash.compact(tokenize(lodash.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(" || "), ")"));
@@ -116,9 +116,9 @@ const useAssetDocuments = sanity.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
   });
 });
@@ -197,7 +197,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,
@@ -354,7 +354,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";
@@ -415,7 +415,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 = {
@@ -435,16 +435,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",
@@ -464,7 +464,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 = {
@@ -783,29 +784,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__default.default(ui.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__default.default(ui.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 = sanity.useSchema();
   if (!props.isLoaded) {
     return /* @__PURE__ */jsxRuntime.jsx(SpinnerBox, {});
   }
   if (!((_a2 = props.references) == null ? void 0 : _a2.length)) {
-    return /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-      size: 2,
-      weight: "bold",
-      muted: true,
-      style: {
-        marginTop: "1.5rem",
-        textAlign: "center"
-      },
-      children: "No documents are using this file"
+    return /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+      border: true,
+      radius: 3,
+      padding: 3,
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+        size: 2,
+        children: "No documents are using this video"
+      })
     });
   }
   const documentPairs = sanity.collate(props.references || []);
@@ -878,9 +878,9 @@ function DeleteDialog(_ref7) {
     }
   }
   return /* @__PURE__ */jsxRuntime.jsx(ui.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,
@@ -894,7 +894,7 @@ function DeleteDialog(_ref7) {
           icon: icons.TrashIcon,
           fontSize: 2,
           padding: 3,
-          text: "Delete file",
+          text: "Delete video",
           tone: "critical",
           onClick: confirmDelete,
           disabled: ["processing_deletion", "checkingReferences", "cantDelete"].some(s => s === state)
@@ -914,7 +914,7 @@ function DeleteDialog(_ref7) {
         children: [state === "checkingReferences" && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
             size: 2,
-            children: "Checking if file can be deleted"
+            children: "Checking if video can be deleted"
           }), /* @__PURE__ */jsxRuntime.jsx(SpinnerBox, {})]
         }), state === "cantDelete" && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
@@ -925,8 +925,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__ */jsxRuntime.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__ */jsxRuntime.jsx(VideoReferences, {
             references,
             isLoaded: !referencesLoading,
             placement
@@ -934,7 +934,7 @@ function DeleteDialog(_ref7) {
         }), state === "confirm" && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
             size: 2,
-            children: "Are you sure you want to delete this file?"
+            children: "Are you sure you want to delete this video?"
           }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
             size: 2,
             children: "This action is irreversible"
@@ -970,7 +970,7 @@ function DeleteDialog(_ref7) {
         }), state === "processing_deletion" && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
             size: 2,
-            children: "Deleting file..."
+            children: "Deleting video..."
           }), /* @__PURE__ */jsxRuntime.jsx(SpinnerBox, {})]
         }), state === "error_deleting" && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
@@ -978,7 +978,7 @@ function DeleteDialog(_ref7) {
             children: "Something went wrong!"
           }), /* @__PURE__ */jsxRuntime.jsx(ui.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"
           })]
         })]
       })
@@ -1025,7 +1025,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 = sanity.useDocumentStore();
   const toast = ui.useToast();
   const client = useClient();
@@ -1066,9 +1066,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",
@@ -1119,7 +1121,7 @@ const VideoDetails = props => {
     handleClose,
     confirmClose,
     saveChanges
-  } = useFileDetails(props);
+  } = useVideoDetails(props);
   const isSaving = state === "saving";
   const [containerHeight, setContainerHeight] = React.useState(null);
   const contentsRef = React__default.default.useRef(null);
@@ -1130,13 +1132,10 @@ const VideoDetails = props => {
   return /* @__PURE__ */jsxRuntime.jsxs(ui.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__ */jsxRuntime.jsx(ui.Card, {
       padding: 3,
@@ -1177,7 +1176,7 @@ const VideoDetails = props => {
     }), state === "closing" && /* @__PURE__ */jsxRuntime.jsx(ui.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,
@@ -1257,11 +1256,11 @@ const VideoDetails = props => {
               label: "Details",
               onClick: () => setTab("details"),
               selected: tab === "details"
-            }), references && references.length > 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Tab, {
+            }), /* @__PURE__ */jsxRuntime.jsx(ui.Tab, {
               "aria-controls": "references-panel",
               icon: icons.SearchIcon,
               id: "references-tab",
-              label: "Used by (".concat(references.length, ")"),
+              label: "Used by ".concat(references ? "(".concat(references.length, ")") : ""),
               onClick: () => setTab("references"),
               selected: tab === "references"
             })]
@@ -1272,8 +1271,8 @@ const VideoDetails = props => {
             children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
               space: 4,
               children: [/* @__PURE__ */jsxRuntime.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"
@@ -1313,7 +1312,7 @@ const VideoDetails = props => {
             "aria-labelledby": "references-tab",
             id: "references-panel",
             hidden: tab !== "references",
-            children: /* @__PURE__ */jsxRuntime.jsx(FileReferences, {
+            children: /* @__PURE__ */jsxRuntime.jsx(VideoReferences, {
               references,
               isLoaded: !referencesLoading,
               placement: props.placement
@@ -1405,13 +1404,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__default.default.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__default.default.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",
@@ -1491,13 +1490,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__default.default.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__default.default.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,
@@ -1621,6 +1620,9 @@ function VideosBrowser(_ref13) {
     children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
       padding: 4,
       space: 4,
+      style: {
+        minHeight: "50vh"
+      },
       children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
         justify: "space-between",
         align: "center",
@@ -1631,7 +1633,7 @@ function VideosBrowser(_ref13) {
             value: searchQuery,
             icon: icons.SearchIcon,
             onInput: e => setSearchQuery(e.currentTarget.value),
-            placeholder: "Search files"
+            placeholder: "Search videos"
           }), /* @__PURE__ */jsxRuntime.jsx(SelectSortOptions, {
             setSort,
             sort
@@ -1654,13 +1656,15 @@ function VideosBrowser(_ref13) {
           }, asset._id))
         })]
       }), isLoading && /* @__PURE__ */jsxRuntime.jsx(SpinnerBox, {}), !isLoading && assets.length === 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-        padding: 2,
+        padding: 4,
         marginY: 4,
         border: true,
         radius: 2,
+        tone: "transparent",
         children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
           align: "center",
           muted: true,
+          size: 3,
           children: searchQuery ? 'No videos found for "'.concat(searchQuery, '"') : "No videos in this dataset"
         })
       })]
@@ -2129,6 +2133,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__default.default(ui.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,
@@ -2137,7 +2148,7 @@ function InputBrowser(_ref15) {
   } = _ref15;
   const id = "InputBrowser".concat(React.useId());
   const handleClose = React.useCallback(() => setDialogState(false), [setDialogState]);
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
+  return /* @__PURE__ */jsxRuntime.jsx(StyledDialog, {
     __unstable_autoFocus: true,
     header: "Select video",
     id,
@@ -2298,7 +2309,7 @@ const Player = _ref17 => {
     return /* @__PURE__ */jsxRuntime.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()
     });
   }