sanity-plugin-mux-input 2.2.1 → 2.2.3

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.1";
+var version = "2.2.3";
 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";
@@ -360,8 +360,8 @@ var exports = {
     source: "./src/index.ts",
     require: "./lib/index.cjs",
     node: {
-      "import": "./lib/index.cjs.js",
-      require: "./lib/index.cjs"
+      module: "./lib/index.js",
+      "import": "./lib/index.cjs.js"
     },
     "import": "./lib/index.js",
     "default": "./lib/index.js"
@@ -387,7 +387,7 @@ var scripts = {
   watch: "pkg-utils watch --strict"
 };
 var dependencies = {
-  "@mux/mux-player-react": "^1.11.4",
+  "@mux/mux-player-react": "1.11.4",
   "@mux/upchunk": "^3",
   "@sanity/icons": "^2",
   "@sanity/incompatible-plugin": "^1",
@@ -398,44 +398,44 @@ var dependencies = {
   "react-rx": "^2.1.3",
   rxjs: "^7",
   "scroll-into-view-if-needed": "^3",
-  "suspend-react": "^0.1.0",
-  swr: "^2.1.0",
-  "type-fest": "^4.0.0",
+  "suspend-react": "^0.1.3",
+  swr: "^2.2.1",
+  "type-fest": "^4.2.0",
   "use-error-boundary": "^2.0.6"
 };
 var devDependencies = {
-  "@commitlint/cli": "^17.6.7",
-  "@commitlint/config-conventional": "^17.6.7",
-  "@sanity/pkg-utils": "^2.3.10",
-  "@sanity/plugin-kit": "^3.1.7",
-  "@sanity/semantic-release-preset": "^4.1.2",
-  "@sanity/vision": "^3.14.5",
-  "@types/react": "^18.2.18",
+  "@commitlint/cli": "^17.7.1",
+  "@commitlint/config-conventional": "^17.7.0",
+  "@sanity/pkg-utils": "^2.4.6",
+  "@sanity/plugin-kit": "^3.1.10",
+  "@sanity/semantic-release-preset": "^4.1.3",
+  "@sanity/vision": "^3.15.1",
+  "@types/react": "^18.2.20",
   "@types/styled-components": "^5.1.26",
   "@typescript-eslint/eslint-plugin": "^5.62.0",
   "@typescript-eslint/parser": "^5.62.0",
   "cz-conventional-changelog": "^3.3.0",
-  eslint: "^8.46.0",
+  eslint: "^8.47.0",
   "eslint-config-prettier": "^8.10.0",
   "eslint-config-react-app": "^7.0.1",
   "eslint-config-sanity": "^6.0.0",
-  "eslint-plugin-import": "^2.28.0",
+  "eslint-plugin-import": "^2.28.1",
   "eslint-plugin-prettier": "^5.0.0",
-  "eslint-plugin-react": "^7.33.1",
+  "eslint-plugin-react": "^7.33.2",
   "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": "^5.1.3",
+  "lint-staged": "^13.3.0",
+  next: "^13.4.19",
+  "next-sanity": "^5.4.4",
   "npm-run-all": "^4.1.5",
-  prettier: "^3.0.1",
+  prettier: "^3.0.2",
   "prettier-plugin-packagejson": "^2.4.5",
   react: "^18.2.0",
   "react-dom": "^18.2.0",
   "react-is": "^18.2.0",
   rimraf: "^5.0.0",
-  sanity: "^3.14.5",
+  sanity: "^3.15.1",
   "styled-components": "^5.3.11",
   typescript: "^5.1.6"
 };
@@ -769,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 || []);
@@ -864,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,
@@ -880,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)
@@ -900,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, {
@@ -911,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
@@ -920,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"
@@ -956,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, {
@@ -964,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"
           })]
         })]
       })
@@ -1011,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();
@@ -1052,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",
@@ -1105,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);
@@ -1116,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,
@@ -1163,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,
@@ -1243,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"
             })]
@@ -1258,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"
@@ -1299,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
@@ -1391,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",
@@ -1477,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,
@@ -1607,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",
@@ -1617,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
@@ -1640,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"
         })
       })]
@@ -2115,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,
@@ -2123,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,
@@ -2284,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()
     });
   }