sanity-plugin-mux-input 2.11.1 → 2.12.0

package/dist/index.mjs

@@ -1526,7 +1526,7 @@ function VideoPlayer({
             crossOrigin: "anonymous",
             metadata: {
               player_name: "Sanity Admin Dashboard",
-              player_version: "2.11.1",
+              player_version: "2.12.0",
               page_type: "Preview Player"
             },
             audio: isAudio,
@@ -1617,21 +1617,21 @@ function PublishedStatus(props) {
 }
 function PaneItemPreview(props) {
   const { icon, layout, presence, schemaType, value } = props, title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null, observable = useMemo(
-    () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
-    [props.documentPreviewStore, schemaType, title, value._id]
-  ), { draft, published, isLoading } = useObservable(observable, {
-    draft: null,
-    published: null,
-    isLoading: !0
+    () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id),
+    [props.documentPreviewStore, schemaType, value._id]
+  ), { snapshot, original, isLoading } = useObservable(observable, {
+    isLoading: !0,
+    snapshot: null,
+    original: null
   }), status = isLoading ? null : /* @__PURE__ */ jsxs(Inline, { space: 4, children: [
     presence && presence.length > 0 && /* @__PURE__ */ jsx(DocumentPreviewPresence, { presence }),
-    /* @__PURE__ */ jsx(PublishedStatus, { document: published }),
-    /* @__PURE__ */ jsx(DraftStatus, { document: draft })
+    /* @__PURE__ */ jsx(PublishedStatus, { document: original }),
+    /* @__PURE__ */ jsx(DraftStatus, { document: snapshot })
   ] });
   return /* @__PURE__ */ jsx(
     SanityDefaultPreview,
     {
-      ...getPreviewValueWithFallback({ value, draft, published }),
+      ...getPreviewValueWithFallback({ snapshot, original, fallback: { title } }),
       isPlaceholder: isLoading,
       icon,
       layout,
@@ -2436,9 +2436,14 @@ const useAccessControl = (config) => {
   isReference(asset) ? asset._ref : "",
   path
 ), useMuxPolling = (asset) => {
-  const client = useClient(), projectId = useProjectId(), dataset = useDataset(), shouldFetch = useMemo(
-    () => !!asset?.assetId && (asset?.status === "preparing" || asset?.data?.static_renditions?.status === "preparing"),
-    [asset?.assetId, asset?.data?.static_renditions?.status, asset?.status]
+  const client = useClient(), projectId = useProjectId(), dataset = useDataset(), isPreparingStaticRenditions = useMemo(() => {
+    if (asset?.data?.static_renditions?.status && asset?.data?.static_renditions?.status !== "disabled")
+      return !1;
+    const files = asset?.data?.static_renditions?.files;
+    return !files || files.length === 0 ? !1 : files.some((file) => file.status === "preparing");
+  }, [asset?.data?.static_renditions?.status, asset?.data?.static_renditions?.files]), shouldFetch = useMemo(
+    () => !!asset?.assetId && (asset?.status === "preparing" || isPreparingStaticRenditions),
+    [asset?.assetId, asset?.status, isPreparingStaticRenditions]
   );
   return useSWR(
     shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset?.assetId}` : null,
@@ -2453,7 +2458,7 @@ const useAccessControl = (config) => {
     { refreshInterval: 2e3, refreshWhenHidden: !0, dedupingInterval: 1e3 }
   );
 };
-var c = function(r) {
+var c = (function(r) {
   var t, e;
   function n(t2) {
     var e2;
@@ -2469,7 +2474,7 @@ var c = function(r) {
     var r2 = this.state, t2 = this.props, e2 = t2.render, n2 = t2.children, o2 = t2.renderError;
     return r2.hasError ? o2 ? o2({ error: r2.error }) : null : e2 ? e2() : n2 || null;
   }, n;
-}(PureComponent), u = function(r, t) {
+})(PureComponent), u = function(r, t) {
   switch (t.type) {
     case "catch":
       return { didCatch: !0, error: t.error };
@@ -2745,13 +2750,14 @@ function testUrl(url) {
   const error = new Error("Invalid URL");
   if (typeof url != "string")
     return throwError(error);
+  const trimmedUrl = url.trim();
   let parsed;
   try {
-    parsed = new URL(url);
+    parsed = new URL(trimmedUrl);
   } catch {
     return throwError(error);
   }
-  return parsed && !parsed.protocol.match(/http:|https:/) ? throwError(error) : of(url);
+  return parsed && !parsed.protocol.match(/http:|https:/) ? throwError(error) : of(trimmedUrl);
 }
 function optionsFromFile(opts, file) {
   if (!(typeof window > "u" || !(file instanceof window.File)))
@@ -2926,7 +2932,12 @@ const TopControls = styled.div`
     ) : 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);
+  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(() => {
+    if (asset?.data?.static_renditions?.status && asset?.data?.static_renditions?.status !== "disabled")
+      return !1;
+    const files = asset?.data?.static_renditions?.files;
+    return !files || files.length === 0 ? !1 : files.some((file) => file.status === "preparing");
+  }, [asset?.data?.static_renditions?.status, asset?.data?.static_renditions?.files]), playRef = useRef(null), muteRef = useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
   return useEffect(() => {
     const style = document.createElement("style");
     style.innerHTML = "button svg { vertical-align: middle; }", playRef.current?.shadowRoot && playRef.current.shadowRoot.appendChild(style), muteRef?.current?.shadowRoot && muteRef.current.shadowRoot.appendChild(style.cloneNode(!0));
@@ -3347,7 +3358,20 @@ const VIDEO_QUALITY_LEVELS = [
   { value: "1080p", label: "1080p" },
   { value: "1440p", label: "1440p (2k)" },
   { value: "2160p", label: "2160p (4k)" }
+], ADVANCED_RESOLUTIONS = [
+  { value: "270p", label: "270p" },
+  { value: "360p", label: "360p" },
+  { value: "480p", label: "480p" },
+  { value: "540p", label: "540p" },
+  { value: "720p", label: "720p" },
+  { value: "1080p", label: "1080p" },
+  { value: "1440p", label: "1440p" },
+  { value: "2160p", label: "2160p" }
 ];
+function sanitizeStaticRenditions(renditions) {
+  const hasHighest = renditions.includes("highest"), hasSpecificResolutions = renditions.some((r) => r !== "highest" && r !== "audio-only");
+  return hasHighest && hasSpecificResolutions ? renditions.filter((r) => r === "highest" || r === "audio-only") : renditions;
+}
 function UploadConfiguration({
   stagedUpload,
   secrets,
@@ -3370,18 +3394,18 @@ function UploadConfiguration({
         case "video_quality":
           return action.value === "basic" ? Object.assign({}, prev, {
             video_quality: action.value,
-            mp4_support: "none",
+            static_renditions: [],
             max_resolution_tier: "1080p",
             text_tracks: prev.text_tracks?.filter(({ type }) => type !== "autogenerated"),
             public_policy: !0,
             signed_policy: !1
           }) : Object.assign({}, prev, {
             video_quality: action.value,
-            mp4_support: pluginConfig.mp4_support,
+            static_renditions: sanitizeStaticRenditions(pluginConfig.static_renditions || []),
             max_resolution_tier: pluginConfig.max_resolution_tier,
             text_tracks: [...autoTextTracks, ...prev.text_tracks || []]
           });
-        case "mp4_support":
+        case "static_renditions":
         case "max_resolution_tier":
         case "normalize_audio":
         case "signed_policy":
@@ -3420,13 +3444,34 @@ function UploadConfiguration({
     {
       video_quality: pluginConfig.video_quality,
       max_resolution_tier: pluginConfig.max_resolution_tier,
-      mp4_support: pluginConfig.mp4_support,
+      static_renditions: sanitizeStaticRenditions(pluginConfig.static_renditions || []),
       signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
       public_policy: pluginConfig.defaultPublic,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks
     }
-  ), { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
+  ), isAdvancedMode = useMemo(() => config.static_renditions.filter(
+    (r) => r !== "highest" && r !== "audio-only"
+  ).length > 0, [config.static_renditions]), [renditionMode, setRenditionMode] = useState(
+    isAdvancedMode ? "advanced" : "standard"
+  ), toggleRendition = (rendition) => {
+    const current = config.static_renditions, hasRendition = current.includes(rendition);
+    dispatch(hasRendition ? {
+      action: "static_renditions",
+      value: current.filter((r) => r !== rendition)
+    } : {
+      action: "static_renditions",
+      value: [...current, rendition]
+    });
+  }, handleModeChange = (mode) => {
+    setRenditionMode(mode), dispatch(mode === "standard" ? {
+      action: "static_renditions",
+      value: config.static_renditions.filter((r) => r === "highest" || r === "audio-only")
+    } : {
+      action: "static_renditions",
+      value: config.static_renditions.filter((r) => r !== "highest")
+    });
+  }, { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
   if (useEffect(() => {
     skipConfig && startUpload(formatUploadConfig(config));
   }, []), skipConfig) return null;
@@ -3541,25 +3586,101 @@ function UploadConfiguration({
               }) })
             }
           ),
-          !basicConfig && /* @__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: 3, children: [
             /* @__PURE__ */ jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
-            !basicConfig && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, padding: [0, 2], children: [
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: `${id}--mp4_support`,
-                  style: { display: "block" },
-                  name: "mp4_support",
-                  required: !0,
-                  checked: config.mp4_support === "standard",
-                  onChange: (e) => dispatch({
-                    action: "mp4_support",
-                    value: e.currentTarget.checked ? "standard" : "none"
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: `${id}--mp4_support`, children: "MP4 support (allow downloading)" }) })
-            ] })
+            /* @__PURE__ */ jsx(Stack, { space: 3, children: /* @__PURE__ */ jsx(
+              FormField$2,
+              {
+                title: "Static Renditions",
+                description: "Generate downloadable MP4 or M4A files. Note: Mux will not upscale to produce MP4 renditions - renditions that would cause upscaling are skipped.",
+                children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+                  /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
+                    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+                      /* @__PURE__ */ jsx(
+                        Radio,
+                        {
+                          checked: renditionMode === "standard",
+                          name: "rendition-mode",
+                          onChange: () => handleModeChange("standard"),
+                          value: "standard",
+                          id: `${id}--mode-standard`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: `${id}--mode-standard`, children: "Standard" })
+                    ] }),
+                    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+                      /* @__PURE__ */ jsx(
+                        Radio,
+                        {
+                          checked: renditionMode === "advanced",
+                          name: "rendition-mode",
+                          onChange: () => handleModeChange("advanced"),
+                          value: "advanced",
+                          id: `${id}--mode-advanced`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: `${id}--mode-advanced`, children: "Advanced" })
+                    ] })
+                  ] }),
+                  renditionMode === "standard" && /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+                    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, padding: [0, 2], children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          id: `${id}--highest`,
+                          style: { display: "block" },
+                          checked: config.static_renditions.includes("highest"),
+                          onChange: () => toggleRendition("highest")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: `${id}--highest`, children: "Highest Resolution (up to 4K)" })
+                    ] }),
+                    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, padding: [0, 2], children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          id: `${id}--audio-only-standard`,
+                          style: { display: "block" },
+                          checked: config.static_renditions.includes("audio-only"),
+                          onChange: () => toggleRendition("audio-only")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: `${id}--audio-only-standard`, children: "Audio Only (M4A)" })
+                    ] })
+                  ] }),
+                  renditionMode === "advanced" && /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+                    /* @__PURE__ */ jsx(Label$1, { size: 1, muted: !0, children: "Select specific resolutions:" }),
+                    /* @__PURE__ */ jsx(Flex, { gap: 2, wrap: "wrap", children: ADVANCED_RESOLUTIONS.map(({ value, label }) => {
+                      const inputId = `${id}--resolution-${value}`;
+                      return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+                        /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            id: inputId,
+                            style: { display: "block" },
+                            checked: config.static_renditions.includes(value),
+                            onChange: () => toggleRendition(value)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: inputId, size: 1, children: label })
+                      ] }, value);
+                    }) }),
+                    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, padding: [2, 2, 0, 2], children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          id: `${id}--audio-only-advanced`,
+                          style: { display: "block" },
+                          checked: config.static_renditions.includes("audio-only"),
+                          onChange: () => toggleRendition("audio-only")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: `${id}--audio-only-advanced`, children: "Audio Only (M4A)" })
+                    ] })
+                  ] })
+                ] })
+              }
+            ) })
           ] }) })
         ] }),
         !disableTextTrackConfig && !basicConfig && /* @__PURE__ */ jsx(
@@ -3611,7 +3732,7 @@ function formatUploadConfig(config) {
         []
       )
     ],
-    mp4_support: config.mp4_support,
+    static_renditions: config.static_renditions.length > 0 ? config.static_renditions.map((resolution) => ({ resolution })) : void 0,
     playback_policy: setPlaybackPolicy(config),
     max_resolution_tier: config.max_resolution_tier,
     video_quality: config.video_quality,
@@ -3789,7 +3910,7 @@ function Uploader(props) {
       const events$ = new Subject();
       return {
         observable: events$.asObservable(),
-        handleClick: (event) => events$.next(event)
+        handleClick: ((event) => events$.next(event))
       };
     })()
   ).current, uploadRef = useRef(null), uploadingDocumentId = useRef(null), [state, dispatch] = useReducer(
@@ -3800,7 +3921,7 @@ function Uploader(props) {
         case "commitUpload":
           return Object.assign({}, prev, { uploadStatus: { progress: 0 } });
         case "progressInfo": {
-          const { ...payload } = action;
+          const { type, action: _, ...payload } = action;
           return Object.assign({}, prev, {
             uploadStatus: {
               ...prev.uploadStatus,
@@ -3908,7 +4029,7 @@ function Uploader(props) {
     });
   }, handlePaste = (event) => {
     event.preventDefault(), event.stopPropagation();
-    const url = (event.clipboardData || window.clipboardData).getData("text");
+    const url = (event.clipboardData || window.clipboardData).getData("text")?.trim();
     if (!isValidUrl(url)) {
       toast.push({ status: "error", title: "Invalid URL for Mux video input." });
       return;
@@ -4114,12 +4235,18 @@ const muxVideoSchema = {
   name: "mux.staticRenditionFile",
   type: "object",
   fields: [
-    { type: "string", name: "ext" },
     { type: "string", name: "name" },
+    { type: "string", name: "ext" },
+    { type: "number", name: "height" },
     { type: "number", name: "width" },
     { type: "number", name: "bitrate" },
-    { type: "number", name: "filesize" },
-    { type: "number", name: "height" }
+    { type: "string", name: "filesize" },
+    { type: "string", name: "type" },
+    { type: "string", name: "status" },
+    { type: "string", name: "resolution_tier" },
+    { type: "string", name: "resolution" },
+    { type: "string", name: "id" },
+    { type: "string", name: "passthrough" }
   ]
 }, muxStaticRenditions = {
   name: "mux.staticRenditions",
@@ -4250,6 +4377,7 @@ const muxVideoSchema = {
   muxAssetData,
   muxVideoAsset
 ], defaultConfig = {
+  static_renditions: [],
   mp4_support: "none",
   video_quality: "plus",
   max_resolution_tier: "1080p",
@@ -4258,12 +4386,20 @@ const muxVideoSchema = {
   defaultSigned: !1,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: []
-}, muxInput = definePlugin((userConfig) => {
+};
+function convertLegacyConfig(config) {
+  return config.static_renditions && config.static_renditions.length > 0 ? { static_renditions: config.static_renditions } : config.mp4_support === "standard" ? { static_renditions: ["highest"] } : { static_renditions: [] };
+}
+const 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 || {} };
+  const config = {
+    ...defaultConfig,
+    ...userConfig || {},
+    ...convertLegacyConfig(userConfig || {})
+  };
   return {
     name: "mux-input",
     schema: {