sanity-plugin-mux-input 2.10.0 → 2.11.0

package/dist/index.mjs

@@ -1488,14 +1488,18 @@ function VideoPlayer({
   children,
   ...props
 }) {
-  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), thumbnail = getPosterSrc({ asset, client, width: thumbnailWidth }), { src: videoSrc, error } = useMemo(() => {
+  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), {
+    src: videoSrc,
+    thumbnail: thumbnailSrc,
+    error
+  } = useMemo(() => {
     try {
-      const src = asset?.playbackId && getVideoSrc({ client, asset });
-      return src ? { src } : { error: new TypeError("Asset has no playback ID") };
+      const thumbnail = getPosterSrc({ asset, client, width: thumbnailWidth }), src = asset?.playbackId && getVideoSrc({ client, asset });
+      return src ? { src, thumbnail } : { error: new TypeError("Asset has no playback ID") };
     } catch (error2) {
       return { error: error2 };
     }
-  }, [asset, client]), signedToken = useMemo(() => {
+  }, [asset, client, thumbnailWidth]), signedToken = useMemo(() => {
     try {
       return new URL(videoSrc).searchParams.get("token");
     } catch {
@@ -1512,7 +1516,7 @@ function VideoPlayer({
         /* @__PURE__ */ jsx(
           MuxPlayer,
           {
-            poster: thumbnail,
+            poster: thumbnailSrc,
             ref: muxPlayer,
             ...props,
             playsInline: !0,
@@ -1522,7 +1526,7 @@ function VideoPlayer({
             crossOrigin: "anonymous",
             metadata: {
               player_name: "Sanity Admin Dashboard",
-              player_version: "2.10.0",
+              player_version: "2.11.0",
               page_type: "Preview Player"
             },
             audio: isAudio,
@@ -2899,25 +2903,29 @@ const TopControls = styled.div`
   onCancel,
   filename,
   text = "Uploading"
-}) => /* @__PURE__ */ jsx(CardWrapper, { tone: "primary", padding: 4, border: !0, height: "fill", children: /* @__PURE__ */ jsxs(FlexWrapper, { align: "center", justify: "space-between", height: "fill", direction: "row", gap: 2, children: [
-  /* @__PURE__ */ jsxs(LeftSection, { children: [
-    /* @__PURE__ */ jsx(Flex, { justify: "center", gap: [3, 3, 2, 2], direction: ["column", "column", "row"], children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
-      text,
-      /* @__PURE__ */ jsx(CodeWrapper, { size: 1, children: filename || "..." })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(Card, { marginTop: 3, radius: 5, shadow: 1, children: /* @__PURE__ */ jsx(LinearProgress, { value: progress }) })
-  ] }),
-  onCancel ? /* @__PURE__ */ jsx(
-    Button,
-    {
-      fontSize: 2,
-      text: "Cancel upload",
-      mode: "ghost",
-      tone: "critical",
-      onClick: onCancel
-    }
-  ) : null
-] }) }), Player = ({ asset, buttons, readOnly, onChange }) => {
+}) => {
+  const isCancelDisabled = progress >= 90;
+  return /* @__PURE__ */ jsx(CardWrapper, { tone: "primary", padding: 4, border: !0, height: "fill", children: /* @__PURE__ */ jsxs(FlexWrapper, { align: "center", justify: "space-between", height: "fill", direction: "row", gap: 2, children: [
+    /* @__PURE__ */ jsxs(LeftSection, { children: [
+      /* @__PURE__ */ jsx(Flex, { justify: "center", gap: [3, 3, 2, 2], direction: ["column", "column", "row"], children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+        text,
+        /* @__PURE__ */ jsx(CodeWrapper, { size: 1, children: filename || "..." })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Card, { marginTop: 3, radius: 5, shadow: 1, children: /* @__PURE__ */ jsx(LinearProgress, { value: progress }) })
+    ] }),
+    onCancel ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        fontSize: 2,
+        text: "Cancel upload",
+        mode: "ghost",
+        tone: "critical",
+        onClick: onCancel,
+        disabled: isCancelDisabled
+      }
+    ) : null
+  ] }) });
+}, Player = ({ asset, buttons, readOnly, onChange }) => {
   const isLoading = useMemo(() => asset?.status === "preparing" ? "Preparing the video" : asset?.status === "waiting_for_upload" ? "Waiting for upload to start" : asset?.status === "waiting" ? "Processing upload" : !(asset?.status === "ready" || typeof asset?.status > "u"), [asset]), isPreparingStaticRenditions = useMemo(() => asset?.data?.static_renditions?.status === "preparing", [asset?.data?.static_renditions?.status]), playRef = useRef(null), muteRef = useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
   return useEffect(() => {
     const style = document.createElement("style");
@@ -3331,9 +3339,10 @@ function PlaybackPolicy({
     noPolicySelected && /* @__PURE__ */ jsx(PlaybackPolicyWarning, {})
   ] });
 }
-const ENCODING_OPTIONS = [
-  { value: "smart", label: "Smart" },
-  { value: "baseline", label: "Baseline" }
+const VIDEO_QUALITY_LEVELS = [
+  { value: "basic", label: "Basic" },
+  { value: "plus", label: "Plus" },
+  { value: "premium", label: "Premium" }
 ], RESOLUTION_TIERS = [
   { value: "1080p", label: "1080p" },
   { value: "1440p", label: "1440p (2k)" },
@@ -3347,7 +3356,7 @@ function UploadConfiguration({
   onClose
 }) {
   const id = useId(), autoTextTracks = useRef(
-    pluginConfig.encoding_tier === "smart" && pluginConfig.defaultAutogeneratedSubtitleLang ? [
+    pluginConfig.video_quality === "plus" && pluginConfig.defaultAutogeneratedSubtitleLang ? [
       {
         _id: uuid(),
         type: "autogenerated",
@@ -3358,16 +3367,16 @@ function UploadConfiguration({
   ).current, [config, dispatch] = useReducer(
     (prev, action) => {
       switch (action.action) {
-        case "encoding_tier":
-          return action.value === "baseline" ? Object.assign({}, prev, {
-            encoding_tier: action.value,
+        case "video_quality":
+          return action.value === "basic" ? Object.assign({}, prev, {
+            video_quality: action.value,
             mp4_support: "none",
             max_resolution_tier: "1080p",
             text_tracks: prev.text_tracks?.filter(({ type }) => type !== "autogenerated"),
             public_policy: !0,
             signed_policy: !1
           }) : Object.assign({}, prev, {
-            encoding_tier: action.value,
+            video_quality: action.value,
             mp4_support: pluginConfig.mp4_support,
             max_resolution_tier: pluginConfig.max_resolution_tier,
             text_tracks: [...autoTextTracks, ...prev.text_tracks || []]
@@ -3409,11 +3418,11 @@ function UploadConfiguration({
       }
     },
     {
-      encoding_tier: pluginConfig.encoding_tier,
+      video_quality: pluginConfig.video_quality,
       max_resolution_tier: pluginConfig.max_resolution_tier,
       mp4_support: pluginConfig.mp4_support,
       signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
-      public_policy: !0,
+      public_policy: pluginConfig.defaultPublic,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks
     }
@@ -3421,7 +3430,7 @@ function UploadConfiguration({
   if (useEffect(() => {
     skipConfig && startUpload(formatUploadConfig(config));
   }, []), skipConfig) return null;
-  const maxSupportedResolution = RESOLUTION_TIERS.findIndex(
+  const basicConfig = config.video_quality !== "plus" && config.video_quality !== "premium", maxSupportedResolution = RESOLUTION_TIERS.findIndex(
     (rt) => rt.value === pluginConfig.max_resolution_tier
   );
   return /* @__PURE__ */ jsx(
@@ -3457,9 +3466,9 @@ function UploadConfiguration({
           /* @__PURE__ */ jsx(
             FormField$2,
             {
-              title: "Encoding Tier",
+              title: "Video Quality Level",
               description: /* @__PURE__ */ jsxs(Fragment, { children: [
-                "The encoding tier informs the cost, quality, and available platform features for the asset.",
+                "The video quality level informs the cost, quality, and available platform features for the asset.",
                 " ",
                 /* @__PURE__ */ jsx(
                   "a",
@@ -3471,16 +3480,16 @@ function UploadConfiguration({
                   }
                 )
               ] }),
-              children: /* @__PURE__ */ jsx(Flex, { gap: 3, children: ENCODING_OPTIONS.map(({ value, label }) => {
+              children: /* @__PURE__ */ jsx(Flex, { gap: 3, children: VIDEO_QUALITY_LEVELS.map(({ value, label }) => {
                 const inputId = `${id}--encodingtier-${value}`;
                 return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
                   /* @__PURE__ */ jsx(
                     Radio,
                     {
-                      checked: config.encoding_tier === value,
+                      checked: config.video_quality === value,
                       name: "asset-encodingtier",
                       onChange: (e) => dispatch({
-                        action: "encoding_tier",
+                        action: "video_quality",
                         value: e.currentTarget.value
                       }),
                       value,
@@ -3492,7 +3501,7 @@ function UploadConfiguration({
               }) })
             }
           ),
-          config.encoding_tier === "smart" && maxSupportedResolution > 0 && /* @__PURE__ */ jsx(
+          !basicConfig && maxSupportedResolution > 0 && /* @__PURE__ */ jsx(
             FormField$2,
             {
               title: "Resolution Tier",
@@ -3532,9 +3541,9 @@ function UploadConfiguration({
               }) })
             }
           ),
-          config.encoding_tier === "smart" && /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          !basicConfig && /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
             /* @__PURE__ */ jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
-            config.encoding_tier === "smart" && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, padding: [0, 2], children: [
+            !basicConfig && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, padding: [0, 2], children: [
               /* @__PURE__ */ jsx(
                 Checkbox,
                 {
@@ -3553,7 +3562,7 @@ function UploadConfiguration({
             ] })
           ] }) })
         ] }),
-        !disableTextTrackConfig && config.encoding_tier === "smart" && /* @__PURE__ */ jsx(
+        !disableTextTrackConfig && !basicConfig && /* @__PURE__ */ jsx(
           TextTracksEditor,
           {
             tracks: config.text_tracks,
@@ -3564,7 +3573,7 @@ function UploadConfiguration({
         /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
           Button,
           {
-            disabled: config.encoding_tier === "smart" && !config.public_policy && !config.signed_policy,
+            disabled: !basicConfig && !config.public_policy && !config.signed_policy,
             icon: UploadIcon,
             text: "Upload",
             tone: "positive",
@@ -3605,7 +3614,7 @@ function formatUploadConfig(config) {
     mp4_support: config.mp4_support,
     playback_policy: setPlaybackPolicy(config),
     max_resolution_tier: config.max_resolution_tier,
-    encoding_tier: config.encoding_tier,
+    video_quality: config.video_quality,
     normalize_audio: config.normalize_audio
   };
 }
@@ -3783,7 +3792,7 @@ function Uploader(props) {
         handleClick: (event) => events$.next(event)
       };
     })()
-  ).current, uploadRef = useRef(null), [state, dispatch] = useReducer(
+  ).current, uploadRef = useRef(null), uploadingDocumentId = useRef(null), [state, dispatch] = useReducer(
     (prev, action) => {
       switch (action.action) {
         case "stageUpload":
@@ -3809,9 +3818,9 @@ function Uploader(props) {
           });
         case "reset":
         case "complete":
-          return uploadRef.current?.unsubscribe(), uploadRef.current = null, INITIAL_STATE;
+          return uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null, INITIAL_STATE;
         case "error":
-          return uploadRef.current?.unsubscribe(), uploadRef.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
+          return uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
         default:
           return prev;
       }
@@ -3822,9 +3831,21 @@ function Uploader(props) {
       error: null
     }
   );
-  useEffect(() => () => {
-    uploadRef.current && !uploadRef.current.closed && uploadRef.current.unsubscribe();
-  }, []);
+  useEffect(() => {
+    const cleanup = () => {
+      if (uploadRef.current && !uploadRef.current.closed && uploadRef.current.unsubscribe(), uploadingDocumentId.current && props.asset?._id !== uploadingDocumentId.current) {
+        const docId = uploadingDocumentId.current;
+        uploadingDocumentId.current = null, props.client.delete(docId).catch((err) => {
+          console.warn("Failed to cleanup orphaned upload document:", err);
+        });
+      }
+    }, handleBeforeUnload = () => {
+      cleanup();
+    };
+    return window.addEventListener("beforeunload", handleBeforeUnload), window.addEventListener("pagehide", handleBeforeUnload), () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload), window.removeEventListener("pagehide", handleBeforeUnload), cleanup();
+    };
+  }, [props.client, props.asset?._id]);
   const startUpload = (settings) => {
     const { stagedUpload } = state;
     if (!stagedUpload || uploadRef.current) return;
@@ -3847,7 +3868,7 @@ function Uploader(props) {
           takeUntil(
             cancelUploadButton.observable.pipe(
               tap(() => {
-                state.uploadStatus?.uuid && props.client.delete(state.uploadStatus.uuid);
+                uploadingDocumentId.current && (props.client.delete(uploadingDocumentId.current), uploadingDocumentId.current = null);
               })
             )
           )
@@ -3858,6 +3879,8 @@ function Uploader(props) {
       next: (event) => {
         switch (event.type) {
           case "uuid":
+            uploadingDocumentId.current = event.uuid, dispatch({ action: "progressInfo", ...event });
+            break;
           case "file":
           case "url":
             dispatch({ action: "progressInfo", ...event });
@@ -3866,7 +3889,7 @@ function Uploader(props) {
             dispatch({ action: "progress", percent: event.percent });
             break;
           case "success":
-            dispatch({ action: "progress", percent: 100 }), props.onChange(
+            dispatch({ action: "progress", percent: 100 }), uploadingDocumentId.current = null, props.onChange(
               PatchEvent.from([
                 setIfMissing({ asset: {} }),
                 set({ _type: "reference", _weak: !0, _ref: event.asset._id }, ["asset"])
@@ -4146,6 +4169,10 @@ const muxVideoSchema = {
       type: "string",
       name: "encoding_tier"
     },
+    {
+      type: "string",
+      name: "video_quality"
+    },
     {
       type: "string",
       name: "master_access"
@@ -4224,13 +4251,18 @@ const muxVideoSchema = {
   muxVideoAsset
 ], defaultConfig = {
   mp4_support: "none",
-  encoding_tier: "smart",
+  video_quality: "plus",
   max_resolution_tier: "1080p",
   normalize_audio: !1,
+  defaultPublic: !0,
   defaultSigned: !1,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: []
 }, muxInput = definePlugin((userConfig) => {
+  if (typeof userConfig == "object" && "encoding_tier" in userConfig) {
+    const deprecated_encoding_tier = userConfig.encoding_tier;
+    userConfig.video_quality || (deprecated_encoding_tier === "baseline" && (userConfig.video_quality = "basic"), deprecated_encoding_tier === "smart" && (userConfig.video_quality = "plus"));
+  }
   const config = { ...defaultConfig, ...userConfig || {} };
   return {
     name: "mux-input",