sanity-plugin-mux-input 2.11.2 → 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.2",
+              player_version: "2.12.0",
               page_type: "Preview Player"
             },
             audio: isAudio,
@@ -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,
@@ -2927,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));
@@ -3348,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,
@@ -3371,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":
@@ -3421,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;
@@ -3542,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(
@@ -3612,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,
@@ -4115,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",
@@ -4251,6 +4377,7 @@ const muxVideoSchema = {
   muxAssetData,
   muxVideoAsset
 ], defaultConfig = {
+  static_renditions: [],
   mp4_support: "none",
   video_quality: "plus",
   max_resolution_tier: "1080p",
@@ -4259,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: {