sanity-plugin-mux-input 2.14.0 → 2.15.0

package/dist/index.js

@@ -36,7 +36,45 @@ const ToolIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z" })
   }
-), SANITY_API_VERSION = "2024-03-05";
+), LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY = "mux-plugin-has-shown-drm-playback-warning", DrmPlaybackWarningContext = React.createContext({
+  hasShownWarning: !1,
+  setHasWarnedAboutDrmPlayback: () => null
+}), DrmPlaybackWarningContextProvider = ({
+  config,
+  children
+}) => {
+  const hasWarned = (config?.disableDrmPlaybackWarning ?? !1) || window.localStorage.getItem(LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY) === "true", [hasWarnedAboutDrmPlayback, setHasWarnedAboutDrmPlayback] = React.useState(hasWarned), setHasShownWarning = (b) => {
+    window.localStorage.setItem(LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY, b.toString()), setHasWarnedAboutDrmPlayback(b);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DrmPlaybackWarningContext.Provider,
+    {
+      value: {
+        hasShownWarning: hasWarnedAboutDrmPlayback,
+        setHasWarnedAboutDrmPlayback: setHasShownWarning
+      },
+      children
+    }
+  );
+}, useDrmPlaybackWarningContext = () => React.useContext(DrmPlaybackWarningContext), DRMWarningDialog = ({ onClose }) => {
+  const { setHasWarnedAboutDrmPlayback } = useDrmPlaybackWarningContext(), _onClose = () => {
+    setHasWarnedAboutDrmPlayback(!0), onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Dialog,
+    {
+      open: !0,
+      id: "drm-playback-warn",
+      onClose: _onClose,
+      header: "DRM Playback Warning",
+      footer: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { mode: "ghost", tone: "primary", onClick: _onClose, text: "Ok" }) }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, padding: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: [3, 3, 3], radius: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: "DRM-protected playback will generate a license with a small associated cost. The plugin will attempt to play signed or public playback IDs instead whenever possible." }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: [3, 3, 3], radius: 2, tone: "suggest", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: "This is a one time warning. If it persists, you can disable it from your plugin configuration." }) }) })
+      ] })
+    }
+  );
+}, SANITY_API_VERSION = "2024-03-05";
 function useClient() {
   return sanity.useClient({ apiVersion: SANITY_API_VERSION });
 }
@@ -109,7 +147,7 @@ function useAssets() {
 function useDialogState() {
   return React.useState(!1);
 }
-function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate) {
+function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate, drmConfigId) {
   const doc = {
     _id: "secrets.mux",
     _type: "mux.apiKey",
@@ -117,9 +155,10 @@ function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, s
     secretKey,
     enableSignedUrls,
     signingKeyId,
-    signingKeyPrivate
+    signingKeyPrivate,
+    drmConfigId
   };
-  return client.createOrReplace(doc);
+  return doc.signingKeyId = enableSignedUrls ? signingKeyId : "", doc.signingKeyPrivate = enableSignedUrls ? signingKeyPrivate : "", client.createOrReplace(doc);
 }
 async function createSigningKeys(client) {
   try {
@@ -172,7 +211,8 @@ const useSaveSecrets = (client, secrets) => React.useCallback(
   async ({
     token,
     secretKey,
-    enableSignedUrls
+    enableSignedUrls,
+    drmConfigId
   }) => {
     let { signingKeyId, signingKeyPrivate } = secrets;
     try {
@@ -182,7 +222,8 @@ const useSaveSecrets = (client, secrets) => React.useCallback(
         secretKey,
         enableSignedUrls,
         signingKeyId,
-        signingKeyPrivate
+        signingKeyPrivate,
+        drmConfigId
       ), !(await testSecrets(client))?.status && token && secretKey)
         throw new Error("Invalid secrets");
     } catch (err) {
@@ -201,7 +242,8 @@ const useSaveSecrets = (client, secrets) => React.useCallback(
           secretKey,
           enableSignedUrls,
           signingKeyId,
-          signingKeyPrivate
+          signingKeyPrivate,
+          drmConfigId ?? ""
         );
       } catch (err) {
         throw console.log("Error while creating and saving signing key:", err?.message), err;
@@ -211,11 +253,19 @@ const useSaveSecrets = (client, secrets) => React.useCallback(
       secretKey,
       enableSignedUrls,
       signingKeyId,
-      signingKeyPrivate
+      signingKeyPrivate,
+      drmConfigId
     };
   },
   [client, secrets]
-), name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumentId = "secrets.mux", DIALOGS_Z_INDEX = 6e4, THUMBNAIL_ASPECT_RATIO = 1.7777777777777777, MIN_ASPECT_RATIO = 5 / 4, AUDIO_ASPECT_RATIO = 5 / 1, path$1 = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"], useSecretsDocumentValues = () => {
+), name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumentId = "secrets.mux", DIALOGS_Z_INDEX = 6e4, THUMBNAIL_ASPECT_RATIO = 1.7777777777777777, MIN_ASPECT_RATIO = 5 / 4, AUDIO_ASPECT_RATIO = 5 / 1, path$1 = [
+  "token",
+  "secretKey",
+  "enableSignedUrls",
+  "signingKeyId",
+  "signingKeyPrivate",
+  "drmConfigId"
+], useSecretsDocumentValues = () => {
   const { error, isLoading, value } = sanity.useDocumentValues(
     muxSecretsDocumentId,
     path$1
@@ -225,7 +275,8 @@ const useSaveSecrets = (client, secrets) => React.useCallback(
       secretKey: value?.secretKey || null,
       enableSignedUrls: value?.enableSignedUrls || !1,
       signingKeyId: value?.signingKeyId || null,
-      signingKeyPrivate: value?.signingKeyPrivate || null
+      signingKeyPrivate: value?.signingKeyPrivate || null,
+      drmConfigId: value?.drmConfigId || null
     };
     return {
       isInitialSetup: !exists,
@@ -235,7 +286,7 @@ const useSaveSecrets = (client, secrets) => React.useCallback(
   }, [value]);
   return { error, isLoading, value: cache };
 };
-function init({ token, secretKey, enableSignedUrls }) {
+function init({ token, secretKey, enableSignedUrls, drmConfigId }) {
   return {
     submitting: !1,
     error: null,
@@ -243,7 +294,8 @@ function init({ token, secretKey, enableSignedUrls }) {
     // This ensures the `dirty` check works correctly
     token: token ?? "",
     secretKey: secretKey ?? "",
-    enableSignedUrls: enableSignedUrls ?? !1
+    enableSignedUrls: enableSignedUrls ?? !1,
+    drmConfigId: drmConfigId ?? ""
   };
 }
 function reducer(state, action) {
@@ -271,7 +323,8 @@ function readSecrets(client) {
         secretKey,
         enableSignedUrls,
         signingKeyId,
-        signingKeyPrivate
+        signingKeyPrivate,
+        drmConfigId
       }`,
       { _id }
     );
@@ -280,7 +333,8 @@ function readSecrets(client) {
       secretKey: data?.secretKey || null,
       enableSignedUrls: !!data?.enableSignedUrls || !1,
       signingKeyId: data?.signingKeyId || null,
-      signingKeyPrivate: data?.signingKeyPrivate || null
+      signingKeyPrivate: data?.signingKeyPrivate || null,
+      drmConfigId: data?.drmConfigId || null
     };
   }, [cacheNs, _id, projectId, dataset]);
 }
@@ -343,20 +397,20 @@ function FormField(props) {
   ] });
 }
 var FormField$1 = React.memo(FormField);
-const fieldNames = ["token", "secretKey", "enableSignedUrls"];
+const fieldNames = ["token", "secretKey", "enableSignedUrls", "drmConfigId"];
 function ConfigureApiDialog({ secrets, setDialogState }) {
   const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = React.useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = React.useCallback(() => setDialogState(!1), [setDialogState]), dirty = React.useMemo(
-    () => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls,
+    () => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls || secrets.drmConfigId !== state.drmConfigId,
     [secrets, state]
-  ), id = `ConfigureApi${React.useId()}`, [tokenId, secretKeyId, enableSignedUrlsId] = React.useMemo(
+  ), id = `ConfigureApi${React.useId()}`, [tokenId, secretKeyId, enableSignedUrlsId, drmConfigIdId] = React.useMemo(
     () => fieldNames.map((field) => `${id}-${field}`),
     [id]
   ), firstField = React.useRef(null), handleSaveSecrets = useSaveSecrets(client, secrets), saving = React.useRef(!1), handleSubmit = React.useCallback(
     (event) => {
       if (event.preventDefault(), !saving.current && event.currentTarget.reportValidity()) {
         saving.current = !0, dispatch({ type: "submit" });
-        const { token, secretKey, enableSignedUrls } = state;
-        handleSaveSecrets({ token, secretKey, enableSignedUrls }).then((savedSecrets) => {
+        const { token, secretKey, enableSignedUrls, drmConfigId } = state;
+        handleSaveSecrets({ token, secretKey, enableSignedUrls, drmConfigId }).then((savedSecrets) => {
           const { projectId, dataset } = client.config();
           suspendReact.clear([cacheNs, _id, projectId, dataset]), suspendReact.preload(() => Promise.resolve(savedSecrets), [cacheNs, _id, projectId, dataset]), setDialogState(!1);
         }).catch((err) => dispatch({ type: "error", payload: err.message })).finally(() => {
@@ -389,6 +443,14 @@ function ConfigureApiDialog({ secrets, setDialogState }) {
       });
     },
     [dispatch]
+  ), handleChangeDrmConfigId = React.useCallback(
+    (event) => {
+      dispatch({
+        type: "change",
+        payload: { name: "drmConfigId", value: event.currentTarget.value }
+      });
+    },
+    [dispatch]
   );
   return React.useEffect(() => {
     firstField.current && firstField.current.focus();
@@ -475,6 +537,45 @@ function ConfigureApiDialog({ secrets, setDialogState }) {
             ] })
           ] }) }) : null
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { title: "DRM Configuration ID", inputId: drmConfigIdId, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.TextInput,
+          {
+            id: drmConfigIdId,
+            onChange: handleChangeDrmConfigId,
+            type: "text",
+            value: state.drmConfigId ?? "",
+            required: !1
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "neutral", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
+            "DRM (Digital Rights Management) provides an extra layer of content security for video content streamed from Mux. For additional information check out our",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://www.mux.com/docs/guides/protect-videos-with-drm#play-drm-protected-videos",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "DRM Guide"
+              }
+            ),
+            "."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://www.mux.com/support/human",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "Contact us"
+              }
+            ),
+            " ",
+            "to get started using DRM."
+          ] })
+        ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ui.Button,
@@ -778,6 +879,35 @@ function useInView(ref, options = {}) {
     };
   }, [options, ref]), inView;
 }
+function getPlaybackId(asset, priority = ["drm", "signed", "public"]) {
+  try {
+    if (!asset)
+      throw new TypeError("Tried to get playback Id with no asset");
+    const playbackIds = asset.data?.playback_ids;
+    if (playbackIds && playbackIds.length > 0) {
+      for (const policy of priority) {
+        const match = playbackIds.find((entry) => entry.policy === policy);
+        if (match)
+          return match.id;
+      }
+      return playbackIds[0].id;
+    }
+    throw new TypeError("Missing playbackId");
+  } catch (e) {
+    throw console.error("Asset is missing a playbackId", { asset }, e), e;
+  }
+}
+function getPlaybackPolicy(asset) {
+  return asset.data?.playback_ids?.find(
+    (playbackId) => getPlaybackId(asset, ["drm", "signed", "public"]) === playbackId.id
+  ) ?? { id: "", policy: "public" };
+}
+function getPlaybackPolicyById(asset, playbackId) {
+  return asset.data?.playback_ids?.find((entry) => playbackId === entry.id);
+}
+function hasPlaybackPolicy(data, policy) {
+  return data.advanced_playback_policies && data.advanced_playback_policies.find((p) => p.policy === policy) || data.playback_policy?.find((p) => p === policy);
+}
 function generateJwt(client, playbackId, aud, payload) {
   const { signingKeyId, signingKeyPrivate } = readSecrets(client);
   if (!signingKeyId)
@@ -798,20 +928,13 @@ function generateJwt(client, playbackId, aud, payload) {
     }
   );
 }
-function getPlaybackId(asset) {
-  if (!asset?.playbackId)
-    throw console.error("Asset is missing a playbackId", { asset }), new TypeError("Missing playbackId");
-  return asset.playbackId;
-}
-function getPlaybackPolicy(asset) {
-  return asset.data?.playback_ids?.find((playbackId) => asset.playbackId === playbackId.id)?.policy ?? "public";
-}
 function createUrlParamsObject(client, asset, params, audience) {
   const playbackId = getPlaybackId(asset);
   let searchParams = new URLSearchParams(
     JSON.parse(JSON.stringify(params, (_, v) => v ?? void 0))
   );
-  if (getPlaybackPolicy(asset) === "signed") {
+  const playbackPolicy = getPlaybackPolicyById(asset, playbackId)?.policy;
+  if (playbackPolicy === "signed" || playbackPolicy === "drm") {
     const token = generateJwt(client, playbackId, audience, params);
     searchParams = new URLSearchParams({ token });
   }
@@ -842,6 +965,15 @@ function getPosterSrc({
   const { playbackId, searchParams } = createUrlParamsObject(client, asset, params, "t");
   return `https://image.mux.com/${playbackId}/thumbnail.png?${searchParams}`;
 }
+function tryWithSuspend(block, onError) {
+  try {
+    return block();
+  } catch (errorOrPromise) {
+    if (errorOrPromise instanceof Promise)
+      throw errorOrPromise;
+    return onError ? onError(errorOrPromise) : void 0;
+  }
+}
 const Image = styledComponents.styled.img`
   transition: opacity 0.175s ease-out 0s;
   display: block;
@@ -859,22 +991,22 @@ function VideoThumbnail({
   width,
   staticImage = !1
 }) {
-  const ref = React.useRef(null), inView = useInView(ref), posterWidth = width || 250, [status, setStatus] = React.useState("loading"), client = useClient(), src = React.useMemo(() => {
-    try {
+  const posterWidth = width || 250, client = useClient(), ref = React.useRef(null), inView = useInView(ref), [status, setStatus] = React.useState("loading"), [error, setError] = React.useState(null), thumbnailSrc = React.useMemo(() => tryWithSuspend(
+    () => {
       let thumbnail;
       return staticImage ? thumbnail = getPosterSrc({ asset, client, width: posterWidth }) : thumbnail = getAnimatedPosterSrc({ asset, client, width: posterWidth }), thumbnail;
-    } catch {
-      status !== "error" && setStatus("error");
-      return;
+    },
+    (err) => {
+      handleError(err.message);
     }
-  }, [asset, client, posterWidth, status, staticImage]);
+  ), [asset, client, posterWidth, staticImage]);
   function handleLoad() {
     setStatus("loaded");
   }
-  function handleError() {
-    setStatus("error");
+  function handleError(err) {
+    setStatus("error"), setError(err || "Failed loading thumbnail");
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Preparing thumbnail" }), children: /* @__PURE__ */ jsxRuntime.jsx(
     ui.Card,
     {
       style: {
@@ -915,23 +1047,23 @@ function VideoThumbnail({
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 4, muted: !0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorOutlineIcon, { style: { fontSize: "1.75em" } }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, align: "center", children: "Failed loading thumbnail" })
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, align: "center", children: error })
             ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Image,
           {
-            src,
+            src: thumbnailSrc ?? void 0,
             alt: `Preview for ${staticImage ? "image" : "video"} ${asset.filename || asset.assetId}`,
             onLoad: handleLoad,
-            onError: handleError,
+            onError: () => handleError(),
             style: { opacity: status === "loaded" ? 1 : 0 }
           }
         )
       ] }) : null
     }
-  );
+  ) });
 }
 const MissingAssetCheckbox = styledComponents.styled(ui.Checkbox)`
   position: static !important;
@@ -1165,7 +1297,7 @@ const PageSelector = (props) => {
         style: { cursor: "pointer" },
         disabled: page <= 0,
         onClick: () => {
-          setPage((page2) => Math.min(props.total - 1, Math.max(0, page2 - 1)));
+          setPage((p) => Math.min(props.total - 1, Math.max(0, p - 1)));
         }
       }
     ),
@@ -1184,7 +1316,7 @@ const PageSelector = (props) => {
         style: { cursor: "pointer" },
         disabled: page >= props.total - 1,
         onClick: () => {
-          setPage((page2) => Math.min(props.total - 1, Math.max(0, page2 + 1)));
+          setPage((p) => Math.min(props.total - 1, Math.max(0, p + 1)));
         }
       }
     )
@@ -1548,9 +1680,9 @@ async function downloadVttFile(client, asset, track) {
   const playbackId = getPlaybackId(asset);
   if (!playbackId)
     throw new Error("Playback ID is required");
-  const playbackPolicy = getPlaybackPolicy(asset);
+  const playbackPolicy = getPlaybackPolicy(asset)?.policy;
   let downloadUrl = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`;
-  if (playbackPolicy === "signed") {
+  if (playbackPolicy === "signed" || playbackPolicy === "drm") {
     const token = generateJwt(client, playbackId, "v");
     downloadUrl += `?token=${token}`;
   }
@@ -2028,7 +2160,7 @@ function EditCaptionDialog({ asset, track, onUpdate, onClose }) {
         const playbackId = getPlaybackId(asset);
         if (!playbackId) return "";
         let url = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`;
-        if (getPlaybackPolicy(asset) === "signed") {
+        if (getPlaybackPolicy(asset)?.policy === "signed") {
           const token = generateJwt(client, playbackId, "v");
           url += `?token=${token}`;
         }
@@ -2684,13 +2816,13 @@ const DialogStateContext = React.createContext({
   setDialogState,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(DialogStateContext.Provider, { value: { dialogState, setDialogState }, children }), useDialogStateContext = () => React.useContext(DialogStateContext);
-function getVideoSrc({ asset, client }) {
-  const playbackId = getPlaybackId(asset), searchParams = new URLSearchParams();
-  if (getPlaybackPolicy(asset) === "signed") {
-    const token = generateJwt(client, playbackId, "v");
+function getVideoSrc({ client, muxPlaybackId: muxPlaybackId2 }) {
+  const searchParams = new URLSearchParams();
+  if (muxPlaybackId2.policy === "signed" || muxPlaybackId2.policy === "drm") {
+    const token = generateJwt(client, muxPlaybackId2.id, "v");
     searchParams.set("token", token);
   }
-  return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
+  return `https://stream.mux.com/${muxPlaybackId2.id}.m3u8?${searchParams}`;
 }
 function CaptionsDialog({ asset }) {
   const { setDialogState } = useDialogStateContext(), dialogId = `CaptionsDialog${React.useId()}`;
@@ -2800,24 +2932,56 @@ function VideoPlayer({
   hlsConfig,
   ...props
 }) {
-  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = React.useRef(null), {
-    src: videoSrc,
-    thumbnail: thumbnailSrc,
-    error
-  } = React.useMemo(() => {
+  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = React.useRef(null), [error, setError] = React.useState(), playbackId = React.useMemo(() => {
     try {
-      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 };
+      return getPlaybackId(asset, ["public", "signed", "drm"]);
+    } catch {
+      setError(new TypeError("Asset has no playback ID"));
+      return;
     }
-  }, [asset, client, thumbnailWidth]), signedToken = React.useMemo(() => {
+  }, [asset]), muxPlaybackId2 = React.useMemo(() => {
+    if (playbackId)
+      return getPlaybackPolicyById(asset, playbackId);
+  }, [asset, playbackId]), src = React.useMemo(() => {
+    if (playbackId && muxPlaybackId2)
+      return tryWithSuspend(
+        () => getVideoSrc({ muxPlaybackId: muxPlaybackId2, client }),
+        (e) => {
+          setError(e);
+        }
+      );
+  }, [muxPlaybackId2, playbackId, client]), poster = React.useMemo(() => tryWithSuspend(
+    () => getPosterSrc({ asset, client, width: thumbnailWidth }),
+    (e) => {
+      setError(e);
+    }
+  ), [asset, client, thumbnailWidth]), signedToken = React.useMemo(() => {
     try {
-      return new URL(videoSrc).searchParams.get("token");
+      return new URL(src).searchParams.get("token");
     } catch {
-      return !1;
+      return;
     }
-  }, [videoSrc]), [width, height] = (asset?.data?.aspect_ratio ?? "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
+  }, [src]), drmToken = React.useMemo(() => {
+    if (playbackId && muxPlaybackId2?.policy === "drm")
+      return tryWithSuspend(
+        () => generateJwt(client, playbackId, "d"),
+        (e) => {
+          setError(e);
+        }
+      );
+  }, [client, muxPlaybackId2?.policy, playbackId]), tokens = React.useMemo(() => {
+    try {
+      const partialTokens = {
+        playback: void 0,
+        thumbnail: void 0,
+        storyboard: void 0,
+        drm: void 0
+      };
+      return signedToken && (partialTokens.playback = signedToken, partialTokens.thumbnail = signedToken, partialTokens.storyboard = signedToken), drmToken && (partialTokens.drm = drmToken), { ...partialTokens };
+    } catch {
+      return;
+    }
+  }, [signedToken, drmToken]), [width, height] = (asset?.data?.aspect_ratio ?? "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
   let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
   return isAudio && (aspectRatio = props.forceAspectRatio ? (
     // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
@@ -2833,7 +2997,7 @@ function VideoPlayer({
           ...isAudio && { display: "flex", alignItems: "flex-end" }
         },
         children: [
-          videoSrc && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          src && poster && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             isAudio && /* @__PURE__ */ jsxRuntime.jsx(
               AudioIcon,
               {
@@ -2848,34 +3012,36 @@ function VideoPlayer({
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              MuxPlayer__default.default,
-              {
-                poster: isAudio ? void 0 : thumbnailSrc,
-                ref: muxPlayer,
-                ...props,
-                playsInline: !0,
-                playbackId: asset.playbackId,
-                tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
-                preload: "metadata",
-                crossOrigin: "anonymous",
-                metadata: {
-                  player_name: "Sanity Admin Dashboard",
-                  player_version: "2.14.0",
-                  page_type: "Preview Player"
-                },
-                audio: isAudio,
-                _hlsConfig: hlsConfig,
-                style: {
-                  ...!isAudio && { height: "100%" },
-                  width: "100%",
-                  display: "block",
-                  objectFit: "contain",
-                  ...isAudio && { alignSelf: "end" }
+            /* @__PURE__ */ jsxRuntime.jsxs(React.Suspense, { fallback: null, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MuxPlayer__default.default,
+                {
+                  poster: isAudio ? void 0 : poster,
+                  ref: muxPlayer,
+                  ...props,
+                  playsInline: !0,
+                  playbackId,
+                  tokens,
+                  preload: "metadata",
+                  crossOrigin: "anonymous",
+                  metadata: {
+                    player_name: "Sanity Admin Dashboard",
+                    player_version: "2.15.0",
+                    page_type: "Preview Player"
+                  },
+                  audio: isAudio,
+                  _hlsConfig: hlsConfig,
+                  style: {
+                    ...!isAudio && { height: "100%" },
+                    width: "100%",
+                    display: "block",
+                    objectFit: "contain",
+                    ...isAudio && { alignSelf: "end" }
+                  }
                 }
-              }
-            ),
-            children
+              ),
+              children
+            ] })
           ] }),
           error ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -3167,6 +3333,7 @@ function getVideoMetadata(doc) {
     playbackId: doc.playbackId,
     createdAt: date,
     duration: doc.data?.duration ? formatSeconds(doc.data?.duration) : void 0,
+    playback_ids: doc.data?.playback_ids,
     aspect_ratio: doc.data?.aspect_ratio,
     max_stored_resolution: doc.data?.max_stored_resolution,
     max_stored_frame_rate: doc.data?.max_stored_frame_rate,
@@ -3469,14 +3636,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
                             ),
                             /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { text: `Mux ID: 
 ${displayInfo.id}`, icon: icons.TagIcon, size: 2 }),
-                            displayInfo?.playbackId && /* @__PURE__ */ jsxRuntime.jsx(
-                              IconInfo,
-                              {
-                                text: `Playback ID: ${displayInfo.playbackId}`,
-                                icon: icons.TagIcon,
-                                size: 2
-                              }
-                            )
+                            /* @__PURE__ */ jsxRuntime.jsx(PlaybackIds, { playback_ids: displayInfo.playback_ids })
                           ] })
                         ] })
                       }
@@ -3499,6 +3659,25 @@ ${displayInfo.id}`, icon: icons.TagIcon, size: 2 }),
       ]
     }
   );
+}, PlaybackIds = ({ playback_ids }) => playback_ids ? playback_ids.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+  IconInfo,
+  {
+    text: `Playback ID [${policyToText(entry.policy)}]: ${entry.id}`,
+    icon: icons.TagIcon,
+    size: 2
+  },
+  entry.id
+)) : /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { text: "No Playback ID", icon: icons.TagIcon, size: 2 }), policyToText = (policy) => {
+  switch (policy) {
+    case "drm":
+      return "DRM";
+    case "signed":
+      return "Signed";
+    case "public":
+      return "Public";
+    default:
+      return policy;
+  }
 }, VideoMetadata = (props) => {
   if (!props.asset)
     return null;
@@ -3592,10 +3771,12 @@ function VideoInBrowser({
   onEdit,
   asset
 }) {
-  const [renderVideo, setRenderVideo] = React.useState(!1), select = React__default.default.useCallback(() => onSelect?.(asset), [onSelect, asset]), edit = React__default.default.useCallback(() => onEdit?.(asset), [onEdit, asset]);
+  const [renderVideo, setRenderVideo] = React.useState(!1), select = React__default.default.useCallback(() => onSelect?.(asset), [onSelect, asset]), edit = React__default.default.useCallback(() => onEdit?.(asset), [onEdit, asset]), { hasShownWarning } = useDrmPlaybackWarningContext();
   if (!asset)
     return null;
-  const playbackPolicy = getPlaybackPolicy(asset);
+  const playbackPolicy = getPlaybackPolicy(asset), onClickPlay = () => {
+    playbackPolicy?.policy === "drm" && !hasShownWarning ? setRenderVideo("pre-render-warn") : setRenderVideo("render-video");
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Card,
     {
@@ -3607,7 +3788,7 @@ function VideoInBrowser({
         position: "relative"
       },
       children: [
-        playbackPolicy === "signed" && /* @__PURE__ */ jsxRuntime.jsx(
+        playbackPolicy?.policy === "signed" && /* @__PURE__ */ jsxRuntime.jsx(
           ui.Tooltip,
           {
             animate: !0,
@@ -3624,7 +3805,7 @@ function VideoInBrowser({
                   position: "absolute",
                   left: "1em",
                   top: "1em",
-                  zIndex: 10
+                  zIndex: 11
                 },
                 padding: 2,
                 border: !0,
@@ -3633,6 +3814,32 @@ function VideoInBrowser({
             )
           }
         ),
+        playbackPolicy?.policy === "drm" && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
+          {
+            animate: !0,
+            content: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 2, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { icon: icons.LockIcon, text: "DRM playback policy", size: 2 }) }),
+            placement: "right",
+            fallbackPlacements: ["top", "bottom"],
+            portal: !0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Card,
+              {
+                tone: "caution",
+                style: {
+                  borderRadius: "0.25rem",
+                  position: "absolute",
+                  left: "1em",
+                  top: "1em",
+                  zIndex: 11
+                },
+                padding: 2,
+                border: !0,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, weight: "semibold", style: { color: "var(--card-icon-color)" }, children: "DRM" })
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(
           ui.Stack,
           {
@@ -3642,7 +3849,15 @@ function VideoInBrowser({
               gridTemplateRows: "min-content min-content 1fr"
             },
             children: [
-              renderVideo ? /* @__PURE__ */ jsxRuntime.jsx(VideoPlayer, { asset, autoPlay: !0, forceAspectRatio: THUMBNAIL_ASPECT_RATIO }) : /* @__PURE__ */ jsxRuntime.jsxs(PlayButton, { onClick: () => setRenderVideo(!0), children: [
+              renderVideo === "pre-render-warn" && /* @__PURE__ */ jsxRuntime.jsx(
+                DRMWarningDialog,
+                {
+                  onClose: () => {
+                    setRenderVideo("render-video");
+                  }
+                }
+              ),
+              renderVideo === "render-video" ? /* @__PURE__ */ jsxRuntime.jsx(VideoPlayer, { asset, autoPlay: !0, forceAspectRatio: THUMBNAIL_ASPECT_RATIO }) : /* @__PURE__ */ jsxRuntime.jsxs(PlayButton, { onClick: onClickPlay, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { "data-play": !0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.PlayIcon, {}) }),
                 assetIsAudio(asset) ? /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
@@ -3704,12 +3919,12 @@ function VideoInBrowser({
     }
   );
 }
-function VideosBrowser({ onSelect }) {
+function VideosBrowser({ onSelect, config }) {
   const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [page, setPage] = React.useState(0), pageLimit = 20, pageTotal = Math.floor(assets.length / pageLimit) + 1, [editedAsset, setEditedAsset] = React.useState(null), freshEditedAsset = React.useMemo(
     () => assets.find((a2) => a2._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
   ), pageStart = page * pageLimit, pageEnd = pageStart + pageLimit;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(DrmPlaybackWarningContextProvider, { config, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { padding: 4, space: 4, style: { minHeight: "50vh" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", align: "center", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 3, children: [
@@ -3723,7 +3938,7 @@ function VideosBrowser({ onSelect }) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(SelectSortOptions, { setSort, sort }),
-          /* @__PURE__ */ jsxRuntime.jsx(PageSelector, { page, setPage, total: pageTotal, limit: pageLimit })
+          /* @__PURE__ */ jsxRuntime.jsx(PageSelector, { page, setPage, total: pageTotal })
         ] }),
         (onSelect ? "input" : "tool") == "tool" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(ImportVideosFromMux, {}),
@@ -3764,7 +3979,7 @@ function VideosBrowser({ onSelect }) {
     freshEditedAsset && /* @__PURE__ */ jsxRuntime.jsx(VideoDetails, { closeDialog: () => setEditedAsset(null), asset: freshEditedAsset })
   ] });
 }
-const StudioTool = () => /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, {}), DEFAULT_TOOL_CONFIG = {
+const StudioTool = (config) => /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, { config }), DEFAULT_TOOL_CONFIG = {
   icon: ToolIcon,
   title: "Videos"
 };
@@ -4122,6 +4337,9 @@ function isValidUrl(url) {
     return !1;
   }
 }
+function isServerError(error) {
+  return "statusCode" in error && typeof error.statusCode == "number" && 500 <= error.statusCode && error.statusCode <= 600;
+}
 function extractDroppedFiles(dataTransfer) {
   const files = Array.from(dataTransfer.files || []), items = Array.from(dataTransfer.items || []);
   return files && files.length > 0 ? Promise.resolve(files) : normalizeItems(items).then((arr) => arr.flat());
@@ -4163,7 +4381,12 @@ function walk(entry) {
   }
   return Promise.resolve([]);
 }
-function SelectAssets({ asset: selectedAsset, onChange, setDialogState }) {
+function SelectAssets({
+  asset: selectedAsset,
+  onChange,
+  setDialogState,
+  config
+}) {
   const handleSelect = React.useCallback(
     (chosenAsset) => {
       chosenAsset?._id || onChange(sanity.PatchEvent.from([sanity.unset(["asset"])])), chosenAsset._id !== selectedAsset?._id && onChange(
@@ -4175,7 +4398,7 @@ function SelectAssets({ asset: selectedAsset, onChange, setDialogState }) {
     },
     [onChange, setDialogState, selectedAsset]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, { onSelect: handleSelect });
+  return /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, { onSelect: handleSelect, config });
 }
 const StyledDialog = styledComponents.styled(ui.Dialog)`
   > div[data-ui='DialogCard'] > div[data-ui='Card'] {
@@ -4185,7 +4408,8 @@ const StyledDialog = styledComponents.styled(ui.Dialog)`
 function InputBrowser({
   setDialogState,
   asset,
-  onChange
+  onChange,
+  config
 }) {
   const id = `InputBrowser${React.useId()}`, handleClose = React.useCallback(() => setDialogState(!1), [setDialogState]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4196,7 +4420,15 @@ function InputBrowser({
       id,
       onClose: handleClose,
       width: 2,
-      children: /* @__PURE__ */ jsxRuntime.jsx(SelectAssets, { asset, onChange, setDialogState })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SelectAssets,
+        {
+          config,
+          asset,
+          onChange,
+          setDialogState
+        }
+      )
     }
   );
 }
@@ -4412,7 +4644,7 @@ const FileButton = styledComponents.styled(ui.MenuItem)(({ theme }) => {
   color: white;
 `, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 function PlayerActionsMenu(props) {
-  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = React.useState(!1), [menuElement, setMenuRef] = React.useState(null), isSigned = React.useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
+  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = React.useState(!1), [menuElement, setMenuRef] = React.useState(null), isSigned = React.useMemo(() => getPlaybackPolicy(asset)?.policy === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
   return React.useEffect(() => {
     open && dialogState && setOpen(!1);
   }, [dialogState, open]), ui.useClickOutsideEvent(
@@ -4513,6 +4745,79 @@ function PlayerActionsMenu(props) {
   ] });
 }
 var PlayerActionsMenu$1 = React.memo(PlayerActionsMenu);
+function useFetchFileSize(stagedUpload, maxFileSize) {
+  const [fileSize, setFileSize] = React.useState(null), [isLoadingFileSize, setIsLoadingFileSize] = React.useState(!1), [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = React.useState(!1);
+  return React.useEffect(() => {
+    if (stagedUpload.type === "url") {
+      setIsLoadingFileSize(!1), setCanSkipFileSizeValidation(!1), setFileSize(null);
+      const url = stagedUpload.url;
+      (async () => {
+        setIsLoadingFileSize(!0);
+        try {
+          const contentLength = (await fetch(url, { method: "HEAD" })).headers.get("content-length"), newFileSize = contentLength ? parseInt(contentLength, 10) : null;
+          setIsLoadingFileSize(!1), newFileSize && setFileSize(newFileSize), newFileSize === null && maxFileSize !== void 0 && setCanSkipFileSizeValidation(!0);
+        } catch {
+          console.warn("Could not validate file size from URL"), setCanSkipFileSizeValidation(!0), setIsLoadingFileSize(!1);
+        }
+      })();
+    }
+    stagedUpload.type === "file" && setFileSize(stagedUpload.files[0].size);
+  }, [maxFileSize, stagedUpload, stagedUpload.type]), {
+    fileSize,
+    isLoadingFileSize,
+    canSkipFileSizeValidation
+  };
+}
+function useMediaMetadata(stagedUpload) {
+  const [videoAssetMetadata, setVideoAssetMetadata] = React.useState(null), [isLoadingMetadata, setIsLoadingMetadata] = React.useState(!1);
+  return React.useEffect(() => {
+    let videoSrc = null;
+    if (stagedUpload.type === "file") {
+      const file = stagedUpload.files[0];
+      videoSrc = URL.createObjectURL(file);
+    }
+    if (stagedUpload.type === "url" && (videoSrc = stagedUpload.url), setVideoAssetMetadata((old) => ({
+      ...old,
+      duration: void 0,
+      width: void 0,
+      height: void 0
+    })), !videoSrc) return () => null;
+    setIsLoadingMetadata(!0);
+    const videoElement = document.createElement("video");
+    videoElement.preload = "metadata";
+    const metadataListeners = [
+      () => {
+        setIsLoadingMetadata(!1);
+      },
+      () => {
+        const duration = videoElement.duration, width = videoElement.videoWidth, height = videoElement.videoHeight, isAudioOnly = width <= 0 && height <= 0;
+        setVideoAssetMetadata((old) => ({
+          ...old,
+          duration,
+          width,
+          height,
+          isAudioOnly
+        }));
+      }
+    ], cleanupVideo = (videoEl) => {
+      const currentVideoSrc = videoEl?.src;
+      videoEl && (metadataListeners.forEach(
+        (listener) => videoEl.removeEventListener("loadedmetadata", listener)
+      ), videoEl.onerror = null, videoEl.src = "", videoEl.load()), currentVideoSrc?.startsWith("blob:") && URL.revokeObjectURL(currentVideoSrc);
+    };
+    return metadataListeners.push(() => setTimeout(() => cleanupVideo(videoElement), 0)), videoElement.onerror = () => {
+      setIsLoadingMetadata(!1), console.warn("Could not read video metadata for validation"), cleanupVideo(videoElement);
+    }, metadataListeners.forEach(
+      (listener) => videoElement.addEventListener("loadedmetadata", listener)
+    ), videoElement.src = videoSrc, () => {
+      cleanupVideo(videoElement);
+    };
+  }, [stagedUpload.type, stagedUpload]), {
+    videoAssetMetadata,
+    setVideoAssetMetadata,
+    isLoadingMetadata
+  };
+}
 function formatBytes(bytes, si = !1, dp = 1) {
   const thresh = si ? 1e3 : 1024;
   if (Math.abs(bytes) < thresh)
@@ -4602,13 +4907,14 @@ function PlaybackPolicyOption({
   optionName,
   description,
   dispatch,
-  action
+  action,
+  disabled
 }) {
   const [scale, setScale] = React.useState(1), boxStyle = {
     outline: "0.01rem solid grey",
     transform: `scale(${scale})`,
     transition: "transform 0.1s ease-in-out",
-    cursor: "pointer",
+    cursor: disabled ? "not-allowed" : "pointer",
     borderRadius: "0.25rem"
   }, triggerAnimation = () => {
     setScale(0.98), setTimeout(() => {
@@ -4616,15 +4922,24 @@ function PlaybackPolicyOption({
     }, 100);
   };
   return /* @__PURE__ */ jsxRuntime.jsx("label", { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, padding: 3, style: boxStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { id, required: !0, checked, onChange: () => {
-      triggerAnimation(), dispatch({
-        action,
-        value: !checked
-      });
-    } }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Checkbox,
+      {
+        id,
+        required: !0,
+        checked,
+        onChange: () => {
+          action && (triggerAnimation(), dispatch({
+            action,
+            value: !checked
+          }));
+        },
+        disabled
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { gap: 3, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, weight: "bold", children: optionName }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: description })
+      typeof description == "string" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: description }) : description
     ] })
   ] }) });
 }
@@ -4649,7 +4964,7 @@ function PlaybackPolicy({
   secrets,
   dispatch
 }) {
-  const noPolicySelected = !(config.public_policy || config.signed_policy);
+  const noPolicySelected = !(config.public_policy || config.signed_policy || config.drm_policy), drmPolicyDisabled = !secrets.drmConfigId;
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { gap: 3, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "bold", children: "Advanced Playback Policies" }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4658,7 +4973,10 @@ function PlaybackPolicy({
         id: `${id}--public`,
         checked: config.public_policy,
         optionName: "Public",
-        description: "Playback IDs are accessible by constructing an HLS URL like https://stream.mux.com/{PLAYBACK_ID}",
+        description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: "Playback IDs are accessible by constructing an HLS URL like" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Code, { children: "https://stream.mux.com/{PLAYBACK_ID}" })
+        ] }),
         dispatch,
         action: "public_policy"
       }
@@ -4669,24 +4987,146 @@ function PlaybackPolicy({
         id: `${id}--signed`,
         checked: config.signed_policy,
         optionName: "Signed",
-        description: `Playback IDs should be used with tokens https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}. 
-                // See Secure video playback for details about creating tokens.`,
+        description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: "Playback IDs should be used with tokens" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Code, { children: "https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, muted: !0, children: [
+            "See",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://www.mux.com/docs/guides/secure-video-playback",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "Secure video playback"
+              }
+            ),
+            " ",
+            "for details about creating tokens."
+          ] })
+        ] }),
         dispatch,
         action: "signed_policy"
       }
     ),
+    drmPolicyDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
+      PlaybackPolicyOption,
+      {
+        id: `${id}--drm`,
+        checked: !1,
+        optionName: "DRM - Disabled",
+        description: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, muted: !0, children: [
+          "To enable DRM add your DRM Configuration Id to your plugin configuration in the API Credentials view.",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: "https://www.mux.com/support/human",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: "Contact us"
+            }
+          ),
+          " ",
+          "to get started using DRM."
+        ] }) }),
+        dispatch,
+        disabled: !0
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      PlaybackPolicyOption,
+      {
+        id: `${id}--drm`,
+        checked: config.drm_policy,
+        optionName: "DRM",
+        description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: "Playback IDs should be used with tokens as with Signed playback, but require extra configuration." }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Code, { children: "https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, muted: !0, children: [
+            "See",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://www.mux.com/docs/guides/protect-videos-with-drm#play-drm-protected-videos",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "Protect videos with DRM"
+              }
+            ),
+            " ",
+            "for details about configuring your player for DRM playback and",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://www.mux.com/docs/guides/secure-video-playback",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "Secure video playback"
+              }
+            ),
+            " ",
+            "for details about creating tokens."
+          ] })
+        ] }),
+        dispatch,
+        action: "drm_policy"
+      }
+    ),
     noPolicySelected && /* @__PURE__ */ jsxRuntime.jsx(PlaybackPolicyWarning, {})
   ] });
 }
-const VIDEO_QUALITY_LEVELS = [
-  { value: "basic", label: "Basic" },
-  { value: "plus", label: "Plus" },
-  { value: "premium", label: "Premium" }
-], RESOLUTION_TIERS = [
+const RESOLUTION_TIERS = [
   { value: "1080p", label: "1080p" },
   { value: "1440p", label: "1440p (2k)" },
   { value: "2160p", label: "2160p (4k)" }
-], ADVANCED_RESOLUTIONS = [
+], ResolutionTierSelector = ({
+  id,
+  config,
+  dispatch,
+  maxSupportedResolution
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  sanity.FormField,
+  {
+    title: "Resolution Tier",
+    description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "The maximum",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: "https://docs.mux.com/api-reference#video/operation/create-direct-upload",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "resolution_tier"
+        }
+      ),
+      " ",
+      "your asset is encoded, stored, and streamed at."
+    ] }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 3, wrap: "wrap", children: RESOLUTION_TIERS.map(({ value, label }, index) => {
+      const inputId = `${id}--type-${value}`;
+      return index > maxSupportedResolution ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Radio,
+          {
+            checked: config.max_resolution_tier === value,
+            name: "asset-resolutiontier",
+            onChange: (e) => dispatch({
+              action: "max_resolution_tier",
+              value: e.currentTarget.value
+            }),
+            value,
+            id: inputId
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: inputId, children: label })
+      ] }, value);
+    }) })
+  }
+), ADVANCED_RESOLUTIONS = [
   { value: "270p", label: "270p" },
   { value: "360p", label: "360p" },
   { value: "480p", label: "480p" },
@@ -4695,6 +5135,130 @@ const VIDEO_QUALITY_LEVELS = [
   { value: "1080p", label: "1080p" },
   { value: "1440p", label: "1440p" },
   { value: "2160p", label: "2160p" }
+], StaticRenditionSelector = ({
+  id,
+  config,
+  dispatch
+}) => {
+  const isAdvancedMode = React.useMemo(() => config.static_renditions.filter(
+    (r) => r !== "highest" && r !== "audio-only"
+  ).length > 0, [config.static_renditions]), [renditionMode, setRenditionMode] = React.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")
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    sanity.FormField,
+    {
+      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__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Radio,
+              {
+                checked: renditionMode === "standard",
+                name: "rendition-mode",
+                onChange: () => handleModeChange("standard"),
+                value: "standard",
+                id: `${id}--mode-standard`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--mode-standard`, children: "Standard" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Radio,
+              {
+                checked: renditionMode === "advanced",
+                name: "rendition-mode",
+                onChange: () => handleModeChange("advanced"),
+                value: "advanced",
+                id: `${id}--mode-advanced`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--mode-advanced`, children: "Advanced" })
+          ] })
+        ] }),
+        renditionMode === "standard" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [0, 2], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Checkbox,
+              {
+                id: `${id}--highest`,
+                style: { display: "block" },
+                checked: config.static_renditions.includes("highest"),
+                onChange: () => toggleRendition("highest")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--highest`, children: "Highest Resolution (up to 4K)" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [0, 2], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Checkbox,
+              {
+                id: `${id}--audio-only-standard`,
+                style: { display: "block" },
+                checked: config.static_renditions.includes("audio-only"),
+                onChange: () => toggleRendition("audio-only")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--audio-only-standard`, children: "Audio Only (M4A)" })
+          ] })
+        ] }),
+        renditionMode === "advanced" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 1, muted: !0, children: "Select specific resolutions:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 2, wrap: "wrap", children: ADVANCED_RESOLUTIONS.map(({ value, label }) => {
+            const inputId = `${id}--resolution-${value}`;
+            return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Checkbox,
+                {
+                  id: inputId,
+                  style: { display: "block" },
+                  checked: config.static_renditions.includes(value),
+                  onChange: () => toggleRendition(value)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: inputId, size: 1, children: label })
+            ] }, value);
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [2, 2, 0, 2], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Checkbox,
+              {
+                id: `${id}--audio-only-advanced`,
+                style: { display: "block" },
+                checked: config.static_renditions.includes("audio-only"),
+                onChange: () => toggleRendition("audio-only")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--audio-only-advanced`, children: "Audio Only (M4A)" })
+          ] })
+        ] })
+      ] })
+    }
+  ) });
+}, VIDEO_QUALITY_LEVELS = [
+  { value: "basic", label: "Basic" },
+  { value: "plus", label: "Plus" },
+  { value: "premium", label: "Premium" }
 ];
 function sanitizeStaticRenditions(renditions) {
   const hasHighest = renditions.includes("highest"), hasSpecificResolutions = renditions.some((r) => r !== "highest" && r !== "audio-only");
@@ -4726,7 +5290,8 @@ function UploadConfiguration({
             max_resolution_tier: "1080p",
             text_tracks: prev.text_tracks?.filter(({ type }) => type !== "autogenerated"),
             public_policy: !0,
-            signed_policy: !1
+            signed_policy: !1,
+            drm_policy: !1
           }) : Object.assign({}, prev, {
             video_quality: action.value,
             static_renditions: sanitizeStaticRenditions(pluginConfig.static_renditions || []),
@@ -4740,6 +5305,8 @@ function UploadConfiguration({
           return Object.assign({}, prev, { [action.action]: action.value });
         case "public_policy":
           return Object.assign({}, prev, { [action.action]: action.value });
+        case "drm_policy":
+          return Object.assign({}, prev, { [action.action]: action.value });
         // Updating individual tracks
         case "track": {
           const text_tracks = [...prev.text_tracks], target_track_i = text_tracks.findIndex(({ _id: _id2 }) => _id2 === action.id);
@@ -4775,75 +5342,41 @@ function UploadConfiguration({
       static_renditions: sanitizeStaticRenditions(pluginConfig.static_renditions || []),
       signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
       public_policy: pluginConfig.defaultPublic,
+      drm_policy: pluginConfig.defaultDrm && !!secrets.drmConfigId,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks
     }
-  ), isAdvancedMode = React.useMemo(() => config.static_renditions.filter(
-    (r) => r !== "highest" && r !== "audio-only"
-  ).length > 0, [config.static_renditions]), [renditionMode, setRenditionMode] = React.useState(
-    isAdvancedMode ? "advanced" : "standard"
-  ), [videoDuration, setVideoDuration] = React.useState(null), [urlFileSize, setUrlFileSize] = React.useState(null), [isLoadingDuration, setIsLoadingDuration] = React.useState(!1), [isLoadingFileSize, setIsLoadingFileSize] = React.useState(!1), [validationError, setValidationError] = React.useState(null), [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = React.useState(!1), MAX_FILE_SIZE = pluginConfig.maxAssetFileSize, MAX_DURATION_SECONDS = pluginConfig.maxAssetDuration;
+  ), [validationError, setValidationError] = React.useState(null), MAX_FILE_SIZE = pluginConfig.maxAssetFileSize, MAX_DURATION_SECONDS = pluginConfig.maxAssetDuration, { fileSize, isLoadingFileSize, canSkipFileSizeValidation } = useFetchFileSize(
+    stagedUpload,
+    MAX_FILE_SIZE
+  ), { videoAssetMetadata, setVideoAssetMetadata, isLoadingMetadata } = useMediaMetadata(stagedUpload);
   React.useEffect(() => {
-    setVideoDuration(null), setUrlFileSize(null), setIsLoadingDuration(!1), setIsLoadingFileSize(!1), setValidationError(null), setCanSkipFileSizeValidation(!1);
-    let videoElement = null, currentVideoSrc = null;
-    const cleanupVideo = (shouldRevokeUrl) => {
-      videoElement && (videoElement.onloadedmetadata = null, videoElement.onerror = null, videoElement.src = "", videoElement.load(), videoElement = null), shouldRevokeUrl && currentVideoSrc?.startsWith("blob:") && URL.revokeObjectURL(currentVideoSrc), currentVideoSrc = null;
-    }, validateDuration = (videoSrc, shouldRevokeUrl = !1) => {
-      !MAX_DURATION_SECONDS || MAX_DURATION_SECONDS <= 0 || (setIsLoadingDuration(!0), videoElement = document.createElement("video"), videoElement.preload = "metadata", currentVideoSrc = videoSrc, videoElement.onloadedmetadata = () => {
-        const duration = videoElement.duration;
-        setVideoDuration(duration), setIsLoadingDuration(!1), duration > MAX_DURATION_SECONDS && setValidationError(
-          `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`
-        ), cleanupVideo(shouldRevokeUrl);
-      }, videoElement.onerror = () => {
-        setIsLoadingDuration(!1), console.warn("Could not read video metadata for validation"), cleanupVideo(shouldRevokeUrl);
-      }, videoElement.src = videoSrc);
-    }, validateFileSize = (size) => MAX_FILE_SIZE === void 0 || size <= MAX_FILE_SIZE ? !0 : (setValidationError(
+    fileSize && setVideoAssetMetadata((old) => ({ ...old, size: fileSize }));
+  }, [fileSize, setVideoAssetMetadata]), React.useEffect(() => {
+    const validateDuration = (duration) => MAX_DURATION_SECONDS && duration > MAX_DURATION_SECONDS ? (setValidationError(
+      `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`
+    ), !1) : !0, validateFileSize = (size) => MAX_FILE_SIZE === void 0 || size <= MAX_FILE_SIZE ? !0 : (setValidationError(
       `File size (${formatBytes(size)}) exceeds maximum allowed size of ${formatBytes(MAX_FILE_SIZE)}`
-    ), !1);
-    if (stagedUpload.type === "file") {
-      const file = stagedUpload.files[0];
-      validateFileSize(file.size) && validateDuration(URL.createObjectURL(file), !0);
-    }
-    if (stagedUpload.type === "url") {
-      const url = stagedUpload.url;
-      (async () => {
-        setIsLoadingFileSize(!0);
-        try {
-          const contentLength = (await fetch(url, { method: "HEAD" })).headers.get("content-length"), fileSize = contentLength ? parseInt(contentLength, 10) : null;
-          setIsLoadingFileSize(!1), fileSize && setUrlFileSize(fileSize);
-          const shouldValidateDuration = MAX_FILE_SIZE === void 0 || fileSize === null || validateFileSize(fileSize);
-          fileSize === null && MAX_FILE_SIZE !== void 0 && setCanSkipFileSizeValidation(!0), shouldValidateDuration && validateDuration(url);
-        } catch {
-          setIsLoadingFileSize(!1), console.warn("Could not validate file size from URL"), setCanSkipFileSizeValidation(!0), validateDuration(url);
-        }
-      })();
-    }
-    return () => {
-      cleanupVideo(!0);
-    };
-  }, [stagedUpload, MAX_FILE_SIZE, MAX_DURATION_SECONDS]);
-  const 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;
+    ), !1), validateDrmAvailability = (isAudioOnly) => config.drm_policy && isAudioOnly ? (setValidationError("Audio-only asset cannot be DRM protected"), !1) : !0;
+    let valid = !0;
+    videoAssetMetadata?.size && (valid = valid && (canSkipFileSizeValidation || validateFileSize(videoAssetMetadata.size))), videoAssetMetadata?.duration && (valid = valid && validateDuration(videoAssetMetadata.duration)), videoAssetMetadata?.isAudioOnly != null && (valid = valid && validateDrmAvailability(videoAssetMetadata.isAudioOnly)), valid && setValidationError(null);
+  }, [
+    MAX_FILE_SIZE,
+    MAX_DURATION_SECONDS,
+    canSkipFileSizeValidation,
+    videoAssetMetadata?.duration,
+    videoAssetMetadata?.size,
+    videoAssetMetadata?.height,
+    videoAssetMetadata?.width,
+    videoAssetMetadata,
+    config.drm_policy,
+    validationError
+  ]);
+  const { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
   if (React.useEffect(() => {
-    skipConfig && startUpload(formatUploadConfig(config));
+    skipConfig && startUpload(formatUploadConfig(config, secrets));
   }, []), skipConfig) return null;
-  const basicConfig = config.video_quality !== "plus" && config.video_quality !== "premium", maxSupportedResolution = RESOLUTION_TIERS.findIndex(
+  const basicConfig = config.video_quality !== "plus" && config.video_quality !== "premium", playbackPolicySelected = config.public_policy || config.signed_policy || config.drm_policy, maxSupportedResolution = RESOLUTION_TIERS.findIndex(
     (rt) => rt.value === pluginConfig.max_resolution_tier
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4877,12 +5410,12 @@ function UploadConfiguration({
               /* @__PURE__ */ jsxRuntime.jsx(icons.DocumentVideoIcon, { fontSize: "2em" }),
               /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { textOverflow: "ellipsis", as: "h2", size: 3, children: stagedUpload.type === "file" ? stagedUpload.files[0].name : stagedUpload.url }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", size: 1, muted: !0, children: stagedUpload.type === "file" ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})` : urlFileSize ? `File From URL (${formatBytes(urlFileSize)})` : isLoadingFileSize ? "File From URL (Loading size...)" : "File From URL (Unknown size)" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", size: 1, muted: !0, children: stagedUpload.type === "file" ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})` : videoAssetMetadata?.size ? `File From URL (${formatBytes(videoAssetMetadata.size)})` : isLoadingFileSize ? "File From URL (Loading size...)" : "File From URL (Unknown size)" }),
                 stagedUpload.type === "file" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 1, children: [
-                  isLoadingDuration && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", size: 1, muted: !0, children: "Reading video metadata..." }),
-                  videoDuration !== null && !validationError && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { as: "p", size: 1, muted: !0, children: [
+                  isLoadingMetadata && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", size: 1, muted: !0, children: "Reading video metadata..." }),
+                  videoAssetMetadata?.duration && !validationError && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { as: "p", size: 1, muted: !0, children: [
                     "Duration: ",
-                    formatSeconds(videoDuration)
+                    formatSeconds(videoAssetMetadata.duration)
                   ] })
                 ] })
               ] })
@@ -4928,160 +5461,37 @@ function UploadConfiguration({
               }) })
             }
           ),
-          !basicConfig && maxSupportedResolution > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            sanity.FormField,
-            {
-              title: "Resolution Tier",
-              description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                "The maximum",
-                " ",
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "a",
-                  {
-                    href: "https://docs.mux.com/api-reference#video/operation/create-direct-upload",
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    children: "resolution_tier"
-                  }
-                ),
-                " ",
-                "your asset is encoded, stored, and streamed at."
-              ] }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 3, wrap: "wrap", children: RESOLUTION_TIERS.map(({ value, label }, index) => {
-                const inputId = `${id}--type-${value}`;
-                return index > maxSupportedResolution ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Radio,
-                    {
-                      checked: config.max_resolution_tier === value,
-                      name: "asset-resolutiontier",
-                      onChange: (e) => dispatch({
-                        action: "max_resolution_tier",
-                        value: e.currentTarget.value
-                      }),
-                      value,
-                      id: inputId
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: inputId, children: label })
-                ] }, value);
-              }) })
-            }
-          ),
           !basicConfig && /* @__PURE__ */ jsxRuntime.jsx(sanity.FormField, { title: "Additional Configuration", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
-              sanity.FormField,
+            maxSupportedResolution > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              ResolutionTierSelector,
               {
-                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__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Radio,
-                        {
-                          checked: renditionMode === "standard",
-                          name: "rendition-mode",
-                          onChange: () => handleModeChange("standard"),
-                          value: "standard",
-                          id: `${id}--mode-standard`
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--mode-standard`, children: "Standard" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Radio,
-                        {
-                          checked: renditionMode === "advanced",
-                          name: "rendition-mode",
-                          onChange: () => handleModeChange("advanced"),
-                          value: "advanced",
-                          id: `${id}--mode-advanced`
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--mode-advanced`, children: "Advanced" })
-                    ] })
-                  ] }),
-                  renditionMode === "standard" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [0, 2], children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Checkbox,
-                        {
-                          id: `${id}--highest`,
-                          style: { display: "block" },
-                          checked: config.static_renditions.includes("highest"),
-                          onChange: () => toggleRendition("highest")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--highest`, children: "Highest Resolution (up to 4K)" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [0, 2], children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Checkbox,
-                        {
-                          id: `${id}--audio-only-standard`,
-                          style: { display: "block" },
-                          checked: config.static_renditions.includes("audio-only"),
-                          onChange: () => toggleRendition("audio-only")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--audio-only-standard`, children: "Audio Only (M4A)" })
-                    ] })
-                  ] }),
-                  renditionMode === "advanced" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 1, muted: !0, children: "Select specific resolutions:" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 2, wrap: "wrap", children: ADVANCED_RESOLUTIONS.map(({ value, label }) => {
-                      const inputId = `${id}--resolution-${value}`;
-                      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          ui.Checkbox,
-                          {
-                            id: inputId,
-                            style: { display: "block" },
-                            checked: config.static_renditions.includes(value),
-                            onChange: () => toggleRendition(value)
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: inputId, size: 1, children: label })
-                      ] }, value);
-                    }) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [2, 2, 0, 2], children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Checkbox,
-                        {
-                          id: `${id}--audio-only-advanced`,
-                          style: { display: "block" },
-                          checked: config.static_renditions.includes("audio-only"),
-                          onChange: () => toggleRendition("audio-only")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--audio-only-advanced`, children: "Audio Only (M4A)" })
-                    ] })
-                  ] })
-                ] })
+                id,
+                config,
+                dispatch,
+                maxSupportedResolution
               }
-            ) })
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(StaticRenditionSelector, { id, config, dispatch }),
+            !disableTextTrackConfig && /* @__PURE__ */ jsxRuntime.jsx(
+              TextTracksEditor,
+              {
+                tracks: config.text_tracks,
+                dispatch,
+                defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
+              }
+            )
           ] }) })
         ] }),
-        !disableTextTrackConfig && !basicConfig && /* @__PURE__ */ jsxRuntime.jsx(
-          TextTracksEditor,
-          {
-            tracks: config.text_tracks,
-            dispatch,
-            defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
           ui.Button,
           {
-            disabled: !basicConfig && !config.public_policy && !config.signed_policy || validationError !== null || isLoadingDuration || isLoadingFileSize && !canSkipFileSizeValidation,
+            disabled: !basicConfig && !playbackPolicySelected || validationError !== null || isLoadingMetadata || isLoadingFileSize && !canSkipFileSizeValidation,
             icon: icons.UploadIcon,
             text: "Upload",
             tone: "positive",
             onClick: () => {
-              validationError || startUpload(formatUploadConfig(config));
+              validationError || startUpload(formatUploadConfig(config, secrets));
             }
           }
         ) })
@@ -5089,11 +5499,14 @@ function UploadConfiguration({
     }
   );
 }
-function setPlaybackPolicy(config) {
-  const playback_policy = [];
-  return config.public_policy && playback_policy.push("public"), config.signed_policy && playback_policy.push("signed"), playback_policy;
+function setAdvancedPlaybackPolicy(config, secrets) {
+  const advanced_playback_policies = [];
+  return config.public_policy && advanced_playback_policies.push({ policy: "public" }), config.signed_policy && advanced_playback_policies.push({ policy: "signed" }), config.drm_policy && (secrets.drmConfigId ? advanced_playback_policies.push({
+    policy: "drm",
+    drm_configuration_id: secrets.drmConfigId ?? void 0
+  }) : console.error("Selected DRM Policy but missing DRM Configuration Id")), advanced_playback_policies;
 }
-function formatUploadConfig(config) {
+function formatUploadConfig(config, secrets) {
   const generated_subtitles = config.text_tracks.filter(isAutogeneratedTrack).map((track) => ({
     name: track.name,
     language_code: track.language_code
@@ -5117,7 +5530,7 @@ function formatUploadConfig(config) {
       )
     ],
     static_renditions: config.static_renditions.length > 0 ? config.static_renditions.map((resolution) => ({ resolution })) : void 0,
-    playback_policy: setPlaybackPolicy(config),
+    advanced_playback_policies: setAdvancedPlaybackPolicy(config, secrets),
     max_resolution_tier: config.max_resolution_tier,
     video_quality: config.video_quality,
     normalize_audio: config.normalize_audio
@@ -5329,8 +5742,13 @@ function Uploader(props) {
         case "reset":
         case "complete":
           return uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null, INITIAL_STATE;
-        case "error":
-          return uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
+        case "error": {
+          uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null;
+          let error = action.error;
+          return isServerError(action.error) && hasPlaybackPolicy(action.settings, "drm") && (error = new Error(
+            "Unknown Error while uploading DRM protected content. Make sure your DRM configuration ID is valid and set correctly"
+          )), Object.assign({}, INITIAL_STATE, { error });
+        }
         default:
           return prev;
       }
@@ -5409,7 +5827,7 @@ function Uploader(props) {
         }
       },
       complete: () => dispatch({ action: "complete" }),
-      error: (error) => dispatch({ action: "error", error })
+      error: (error) => dispatch({ action: "error", error, settings })
     });
   }, invalidFileToast = React.useCallback(() => {
     toast.push({
@@ -5460,11 +5878,11 @@ function Uploader(props) {
     idx > -1 && dragEnteredEls.current.splice(idx, 1), dragEnteredEls.current.length === 0 && setDragState(null);
   };
   if (state.error !== null) {
-    const error = {};
+    const error = state.error;
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, direction: "column", justify: "center", align: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 5, muted: !0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorOutlineIcon, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Something went wrong" }),
-      error instanceof Error && error.message && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: error.message }),
+      error instanceof Error && error.message && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, weight: "semibold", style: { textAlign: "center" }, children: error.message }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { text: "Upload another file", onClick: () => dispatch({ action: "reset" }) })
     ] });
   }
@@ -5549,6 +5967,7 @@ function Uploader(props) {
     props.dialogState === "select-video" && /* @__PURE__ */ jsxRuntime.jsx(
       InputBrowser,
       {
+        config: props.config,
         asset: props.asset,
         onChange: props.onChange,
         setDialogState: props.setDialogState
@@ -5795,6 +6214,7 @@ const muxVideoSchema = {
   normalize_audio: !1,
   defaultPublic: !0,
   defaultSigned: !1,
+  defaultDrm: !1,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: [],
   acceptedMimeTypes: ["video/*", "audio/*"]