sanity-plugin-mux-input 2.14.0 → 2.16.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,12 +1316,32 @@ 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)));
         }
       }
     )
   ] });
 };
+function addKeysToMuxData(data) {
+  return {
+    ...data,
+    tracks: data.tracks?.map((track) => ({
+      ...track,
+      _key: uuid.uuid()
+    })),
+    playback_ids: data.playback_ids?.map((playbackId) => ({
+      ...playbackId,
+      _key: uuid.uuid()
+    })),
+    static_renditions: data.static_renditions ? {
+      ...data.static_renditions,
+      files: data.static_renditions.files?.map((file) => ({
+        ...file,
+        _key: uuid.uuid()
+      }))
+    } : void 0
+  };
+}
 function useResyncMuxMetadata() {
   const documentStore = sanity.useDocumentStore(), client = sanity.useClient({
     apiVersion: SANITY_API_VERSION
@@ -1238,6 +1390,27 @@ function useResyncMuxMetadata() {
       }
     }
   }
+  async function syncFullData() {
+    if (matchedAssets) {
+      setResyncState("syncing");
+      try {
+        const tx = client.transaction();
+        matchedAssets.forEach((matched) => {
+          if (!matched.muxAsset) return;
+          const dataWithKeys = addKeysToMuxData(matched.muxAsset);
+          tx.patch(matched.sanityDoc._id, {
+            set: {
+              filename: matched.muxTitle || matched.currentTitle || "",
+              status: matched.muxAsset.status,
+              data: dataWithKeys
+            }
+          });
+        }), await tx.commit({ returnDocuments: !1 }), setResyncState("done");
+      } catch (error) {
+        setResyncState("error"), setResyncError(error);
+      }
+    }
+  }
   return {
     sanityAssetsLoading,
     closeDialog,
@@ -1247,6 +1420,7 @@ function useResyncMuxMetadata() {
     hasSecrets,
     syncAllVideos,
     syncOnlyEmpty,
+    syncFullData,
     matchedAssets,
     muxAssets,
     openDialog
@@ -1262,22 +1436,78 @@ const useSanityAssets = sanity.createHookFromObservableFactory(
     }
   )
 );
+function OptionCard({
+  id,
+  selected,
+  onSelect,
+  title,
+  count,
+  description,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Card,
+    {
+      as: "label",
+      padding: 3,
+      radius: 2,
+      border: !0,
+      tone: selected ? "primary" : "default",
+      style: {
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, align: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Radio,
+          {
+            checked: selected,
+            onChange: () => onSelect(id),
+            disabled,
+            name: "sync-option"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, flex: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", gap: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, weight: "semibold", children: [
+            title,
+            " (",
+            count,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: description })
+        ] })
+      ] })
+    }
+  );
+}
 function ResyncMetadataDialog(props) {
-  const { resyncState } = props, canTriggerResync = resyncState === "idle" || resyncState === "error", isResyncing = resyncState === "syncing", isDone = resyncState === "done", videosToUpdate = props.matchedAssets?.filter((m) => m.muxAsset).length || 0, videosWithEmptyOrPlaceholder = props.matchedAssets?.filter(
+  const { resyncState } = props, videosToUpdate = props.matchedAssets?.filter((m) => m.muxAsset).length || 0, videosWithEmptyOrPlaceholder = props.matchedAssets?.filter(
     (m) => m.muxAsset && m.muxTitle && isEmptyOrPlaceholderTitle(m.currentTitle, m.muxAsset.id)
-  ).length || 0;
+  ).length || 0, hasEmptyTitles = videosWithEmptyOrPlaceholder > 0, defaultOption = hasEmptyTitles ? "fillEmpty" : "syncTitles", [selectedOption, setSelectedOption] = React.useState(defaultOption), canTriggerResync = resyncState === "idle" || resyncState === "error", isResyncing = resyncState === "syncing", isDone = resyncState === "done", isLoading = props.muxAssets.loading || props.sanityAssetsLoading, handleSync = () => {
+    switch (selectedOption) {
+      case "fillEmpty":
+        props.syncOnlyEmpty();
+        break;
+      case "syncTitles":
+        props.syncAllVideos();
+        break;
+      case "fullResync":
+        props.syncFullData();
+        break;
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Dialog,
     {
       animate: !0,
-      header: "Resync Metadata from Mux",
+      header: "Sync with Mux",
       zOffset: DIALOGS_Z_INDEX,
       id: "resync-metadata-dialog",
       onClose: props.closeDialog,
       onClickOutside: props.closeDialog,
       width: 1,
       position: "fixed",
-      footer: !isDone && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", align: "center", children: [
+      footer: !isDone && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "flex-end", gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           ui.Button,
           {
@@ -1285,97 +1515,104 @@ function ResyncMetadataDialog(props) {
             padding: 3,
             mode: "ghost",
             text: "Cancel",
-            tone: "critical",
             onClick: props.closeDialog,
             disabled: isResyncing
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
-          videosWithEmptyOrPlaceholder > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              fontSize: 2,
-              padding: 3,
-              mode: "ghost",
-              text: `Update empty (${videosWithEmptyOrPlaceholder})`,
-              tone: "caution",
-              onClick: props.syncOnlyEmpty,
-              disabled: isResyncing || !canTriggerResync
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              icon: icons.SyncIcon,
-              fontSize: 2,
-              padding: 3,
-              mode: "ghost",
-              text: `Update all (${videosToUpdate})`,
-              tone: "positive",
-              onClick: props.syncAllVideos,
-              iconRight: isResyncing && ui.Spinner,
-              disabled: !canTriggerResync
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            icon: icons.SyncIcon,
+            fontSize: 2,
+            padding: 3,
+            text: "Run sync",
+            tone: "primary",
+            onClick: handleSync,
+            iconRight: isResyncing && ui.Spinner,
+            disabled: !canTriggerResync || isLoading
+          }
+        )
       ] }) }),
       children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { padding: 4, children: [
-        (props.muxAssets.loading || props.sanityAssetsLoading) && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 4, children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "primary", marginBottom: 4, padding: 3, border: !0, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 4, children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { muted: !0, size: 4 }),
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
             /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, weight: "semibold", children: "Loading assets from Mux" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "This may take a while." })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "This may take a while." })
           ] })
         ] }) }),
-        props.muxAssets.error && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+        props.muxAssets.error && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "critical", marginBottom: 4, padding: 3, border: !0, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorOutlineIcon, { fontSize: 36 }),
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
             /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, weight: "semibold", children: "There was an error getting data from Mux" }),
             /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "Please try again or contact a developer for help." })
           ] })
         ] }) }),
-        resyncState === "syncing" && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 4, children: [
+        resyncState === "syncing" && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "primary", marginBottom: 4, padding: 3, border: !0, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 4, children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { muted: !0, size: 4 }),
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, weight: "semibold", children: "Updating video metadata" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "Syncing titles from Mux..." })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, weight: "semibold", children: "Syncing metadata" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "Updating videos from Mux..." })
           ] })
         ] }) }),
-        resyncState === "error" && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+        resyncState === "error" && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "critical", marginBottom: 4, padding: 3, border: !0, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorOutlineIcon, { fontSize: 36 }),
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
             /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, weight: "semibold", children: "There was an error syncing metadata" }),
             /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: props.resyncError ? `Error: ${props.resyncError}` : "Please try again or contact a developer for help." })
           ] })
         ] }) }),
-        resyncState === "done" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { paddingY: 5, marginBottom: 4, space: 3, style: { textAlign: "center" }, children: [
+        resyncState === "done" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { paddingY: 5, space: 3, style: { textAlign: "center" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckmarkCircleIcon, { fontSize: 48 }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { size: 2, children: "Metadata synced successfully" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: "All video titles have been updated from Mux." })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { size: 2, children: "Sync completed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: "Videos have been updated from Mux." })
         ] }),
-        resyncState === "idle" && !props.muxAssets.loading && !props.sanityAssetsLoading && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 4, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Heading, { size: 1, children: [
-            "There ",
-            videosToUpdate === 1 ? "is" : "are",
-            " ",
+        !isDone && !isLoading && !props.muxAssets.error && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, children: [
+            "Found ",
             videosToUpdate,
             " video",
             videosToUpdate === 1 ? "" : "s",
-            " with Mux metadata"
+            " linked to Mux."
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: "This will update video titles in Sanity to match those in Mux. No new videos will be created." }),
-          videosWithEmptyOrPlaceholder > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, tone: "caution", border: !0, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "flex-start", gap: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorOutlineIcon, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, weight: "semibold", children: "Videos with empty or placeholder titles" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, children: [
-                videosWithEmptyOrPlaceholder,
-                " video",
-                videosWithEmptyOrPlaceholder === 1 ? "" : "s",
-                ' without titles or with placeholder titles (e.g., "Asset #123") can be updated selectively.'
-              ] })
-            ] })
-          ] }) })
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+            hasEmptyTitles && /* @__PURE__ */ jsxRuntime.jsx(
+              OptionCard,
+              {
+                id: "fillEmpty",
+                selected: selectedOption === "fillEmpty",
+                onSelect: setSelectedOption,
+                title: "Fill missing titles only",
+                count: videosWithEmptyOrPlaceholder,
+                description: "Updates only videos without a title or with placeholder titles (e.g., 'Asset #123') using the title from Mux.",
+                disabled: isResyncing
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              OptionCard,
+              {
+                id: "syncTitles",
+                selected: selectedOption === "syncTitles",
+                onSelect: setSelectedOption,
+                title: "Sync all titles",
+                count: videosToUpdate,
+                description: "Replaces the title in Sanity with the title from Mux for all videos.",
+                disabled: isResyncing
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              OptionCard,
+              {
+                id: "fullResync",
+                selected: selectedOption === "fullResync",
+                onSelect: setSelectedOption,
+                title: "Full resync",
+                count: videosToUpdate,
+                description: "Updates all fields from Mux including status, duration, tracks, captions, and renditions.",
+                disabled: isResyncing
+              }
+            )
+          ] })
         ] })
       ] })
     }
@@ -1384,7 +1621,7 @@ function ResyncMetadataDialog(props) {
 function ResyncMetadata() {
   const resyncMetadata = useResyncMuxMetadata();
   if (resyncMetadata.hasSecrets)
-    return resyncMetadata.dialogOpen ? /* @__PURE__ */ jsxRuntime.jsx(ResyncMetadataDialog, { ...resyncMetadata }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { mode: "bleed", text: "Resync Metadata", onClick: resyncMetadata.openDialog });
+    return resyncMetadata.dialogOpen ? /* @__PURE__ */ jsxRuntime.jsx(ResyncMetadataDialog, { ...resyncMetadata }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { mode: "bleed", text: "Sync with Mux", onClick: resyncMetadata.openDialog });
 }
 const CONTEXT_MENU_POPOVER_PROPS = {
   constrainSize: !0,
@@ -1465,6 +1702,55 @@ function StopWatchIcon(props) {
     }
   );
 }
+function useResyncAsset(options) {
+  const client = useClient(), toast = ui.useToast(), [resyncState, setResyncState] = React.useState("idle"), [resyncError, setResyncError] = React.useState(null), showToast = options?.showToast ?? !1, resyncAsset = React.useCallback(
+    async (asset) => {
+      if (!asset.assetId) {
+        showToast && toast.push({
+          title: "Cannot resync",
+          description: "Asset has no Mux ID",
+          status: "error"
+        }), options?.onError?.(new Error("Asset has no Mux ID"));
+        return;
+      }
+      if (!asset._id) {
+        showToast && toast.push({
+          title: "Cannot resync",
+          description: "Asset has no document ID",
+          status: "error"
+        }), options?.onError?.(new Error("Asset has no document ID"));
+        return;
+      }
+      setResyncState("syncing"), setResyncError(null);
+      try {
+        const muxData = (await getAsset(client, asset.assetId)).data, dataWithKeys = addKeysToMuxData(muxData);
+        return await client.patch(asset._id).set({
+          status: muxData.status,
+          data: dataWithKeys,
+          ...muxData.meta?.title && { filename: muxData.meta.title }
+        }).commit({ returnDocuments: !1 }), setResyncState("success"), showToast && toast.push({
+          title: "Asset synced",
+          description: "Data has been updated from Mux",
+          status: "success"
+        }), options?.onSuccess?.(muxData), muxData;
+      } catch (error) {
+        setResyncState("error"), setResyncError(error), console.error("Failed to refresh asset data:", error), showToast && toast.push({
+          title: "Sync failed",
+          description: "Could not sync asset from Mux",
+          status: "error"
+        }), options?.onError?.(error);
+        return;
+      }
+    },
+    [client, toast, options, showToast]
+  );
+  return {
+    resyncState,
+    resyncError,
+    resyncAsset,
+    isResyncing: resyncState === "syncing"
+  };
+}
 function extractErrorMessage(error, defaultMessage = "Failed to process request") {
   let message = "";
   if (error && typeof error == "object") {
@@ -1548,9 +1834,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 +2314,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}`;
         }
@@ -2367,20 +2653,7 @@ function TextTracksManager({
   tracks: propTracks,
   collapseTracks = !1
 }) {
-  const client = useClient(), toast = ui.useToast(), dialogId = `DeleteCaptionDialog${React.useId()}`, [downloadingTrackId, setDownloadingTrackId] = React.useState(null), [deletingTrackId, setDeletingTrackId] = React.useState(null), [addedTracks, setAddedTracks] = React.useState([]), [updatedTracks, setUpdatedTracks] = React.useState(/* @__PURE__ */ new Map()), [trackActivityOrder, setTrackActivityOrder] = React.useState(/* @__PURE__ */ new Map()), [autogeneratedTrackIds, setAutogeneratedTrackIds] = React.useState(/* @__PURE__ */ new Set()), [trackToDelete, setTrackToDelete] = React.useState(null), [trackToEdit, setTrackToEdit] = React.useState(null), [showAddDialog, setShowAddDialog] = React.useState(!1), [isExpanded, setIsExpanded] = React.useState(!1), MAX_VISIBLE_TRACKS = 4;
-  React.useEffect(() => {
-    if (!asset.assetId || !asset._id) return;
-    const assetId = asset.assetId, documentId = asset._id;
-    (async () => {
-      try {
-        const response = await getAsset(client, assetId);
-        await client.patch(documentId).set({ data: response.data, status: response.data.status }).commit();
-      } catch (error) {
-        console.error("Failed to refresh asset data:", error);
-      }
-    })();
-  }, [asset.assetId, asset._id, client]);
-  const activeTracks = (propTracks || asset.data?.tracks?.filter((track) => track.type === "text") || []).filter(
+  const client = useClient(), toast = ui.useToast(), dialogId = `DeleteCaptionDialog${React.useId()}`, { resyncAsset } = useResyncAsset(), [downloadingTrackId, setDownloadingTrackId] = React.useState(null), [deletingTrackId, setDeletingTrackId] = React.useState(null), [addedTracks, setAddedTracks] = React.useState([]), [updatedTracks, setUpdatedTracks] = React.useState(/* @__PURE__ */ new Map()), [trackActivityOrder, setTrackActivityOrder] = React.useState(/* @__PURE__ */ new Map()), [autogeneratedTrackIds, setAutogeneratedTrackIds] = React.useState(/* @__PURE__ */ new Set()), [trackToDelete, setTrackToDelete] = React.useState(null), [trackToEdit, setTrackToEdit] = React.useState(null), [showAddDialog, setShowAddDialog] = React.useState(!1), [isExpanded, setIsExpanded] = React.useState(!1), MAX_VISIBLE_TRACKS = 4, activeTracks = (propTracks || asset.data?.tracks?.filter((track) => track.type === "text") || []).filter(
     (track) => track.id && (track.status === "ready" || track.status === "preparing" || track.status === "errored")
   ), allTracks = React.useMemo(() => {
     const tracksWithUpdates = activeTracks.map((track) => updatedTracks.get(track.id) || track), isMockTrackReplaced = (mockTrack, realTracksList) => !mockTrack.id || !mockTrack.id.startsWith("generating-") ? !1 : realTracksList.some((realTrack) => {
@@ -2411,11 +2684,11 @@ function TextTracksManager({
   }, [activeTracks, addedTracks]), React.useEffect(() => {
     if (allTracks.filter((track) => track.status === "preparing").length === 0 || !asset.assetId || !asset._id)
       return;
-    const assetId = asset.assetId, documentId = asset._id, interval = setInterval(async () => {
+    const interval = setInterval(async () => {
       try {
-        const response = await getAsset(client, assetId);
-        await client.patch(documentId).set({ data: response.data, status: response.data.status }).commit();
-        const fetchedTracks = response.data.tracks?.filter((track) => track.type === "text") || [], isMockTrackReplaced = (mockTrack, fetchedTracksList) => !mockTrack.id || !mockTrack.id.startsWith("generating-") ? !1 : fetchedTracksList.some((realTrack) => {
+        const muxData = await resyncAsset(asset);
+        if (!muxData) return;
+        const fetchedTracks = muxData.tracks?.filter((track) => track.type === "text") || [], isMockTrackReplaced = (mockTrack, fetchedTracksList) => !mockTrack.id || !mockTrack.id.startsWith("generating-") ? !1 : fetchedTracksList.some((realTrack) => {
           const nameMatches = realTrack.name === mockTrack.name, languageMatches = realTrack.language_code === mockTrack.language_code;
           return !nameMatches || !languageMatches ? !1 : realTrack.status === "ready" ? realTrack.text_source === "generated_live" || realTrack.text_source === "generated_live_final" || realTrack.text_source === "generated_vod" : realTrack.status === "preparing";
         }), newAutogeneratedIds = /* @__PURE__ */ new Set();
@@ -2452,7 +2725,7 @@ function TextTracksManager({
       }
     }, 3e3);
     return () => clearInterval(interval);
-  }, [allTracks, asset.assetId, asset._id, client]);
+  }, [allTracks, asset, resyncAsset]);
   const visibleTracks = allTracks.filter(
     (track) => track.status === "ready" || track.status === "preparing" || track.status === "errored"
   ).sort((a2, b) => {
@@ -2488,14 +2761,7 @@ function TextTracksManager({
     try {
       if (!asset.assetId)
         throw new Error("Asset ID is required");
-      if (await deleteTextTrack(client, asset.assetId, track.id), asset._id)
-        try {
-          const response = await getAsset(client, asset.assetId);
-          await client.patch(asset._id).set({ data: response.data, status: response.data.status }).commit();
-        } catch (refreshError) {
-          console.error("Failed to refresh asset data:", refreshError);
-        }
-      toast.push({
+      await deleteTextTrack(client, asset.assetId, track.id), await resyncAsset(asset), toast.push({
         title: "Successfully deleted caption track",
         status: "success"
       }), setAddedTracks((prev) => prev.filter((t) => t.id !== track.id)), setUpdatedTracks((prev) => {
@@ -2523,7 +2789,7 @@ function TextTracksManager({
       return newMap.set(track.id, prev.size + 1), newMap;
     }), setShowAddDialog(!1);
   }, handleUpdateTrack = async (updatedTrack, oldTrackId) => {
-    if (oldTrackId && (setAddedTracks((prev) => prev.filter((t) => t.id !== oldTrackId)), setUpdatedTracks((prev) => {
+    oldTrackId && (setAddedTracks((prev) => prev.filter((t) => t.id !== oldTrackId)), setUpdatedTracks((prev) => {
       const newMap = new Map(prev);
       return newMap.delete(oldTrackId), newMap;
     }), setTrackActivityOrder((prev) => {
@@ -2538,13 +2804,7 @@ function TextTracksManager({
     }), setTrackActivityOrder((prev) => {
       const newMap = new Map(prev);
       return newMap.set(updatedTrack.id, prev.size + 1), newMap;
-    }), setTrackToEdit(null), asset._id && asset.assetId)
-      try {
-        const response = await getAsset(client, asset.assetId);
-        await client.patch(asset._id).set({ data: response.data, status: response.data.status }).commit();
-      } catch (refreshError) {
-        console.error("Failed to refresh asset data:", refreshError);
-      }
+    }), setTrackToEdit(null), await resyncAsset(asset);
   }, getTrackSourceLabel = (track) => track.id && track.id.startsWith("generating-") || track.id && autogeneratedTrackIds.has(track.id) || track.text_source === "generated_live_final" || track.text_source === "generated_live" || track.text_source === "generated_vod" ? "Auto-generated" : track.text_source === "uploaded" ? "Uploaded" : "Custom";
   if (visibleTracks.length === 0 && !showAddDialog)
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
@@ -2684,13 +2944,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 +3060,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 {
+      return getPlaybackId(asset, ["public", "signed", "drm"]);
+    } catch {
+      setError(new TypeError("Asset has no playback ID"));
+      return;
+    }
+  }, [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 {
-      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 new URL(src).searchParams.get("token");
+    } catch {
+      return;
     }
-  }, [asset, client, thumbnailWidth]), signedToken = React.useMemo(() => {
+  }, [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 {
-      return new URL(videoSrc).searchParams.get("token");
+      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 !1;
+      return;
     }
-  }, [videoSrc]), [width, height] = (asset?.data?.aspect_ratio ?? "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
+  }, [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 +3125,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 +3140,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.16.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 +3461,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,
@@ -3176,7 +3471,10 @@ function getVideoMetadata(doc) {
 function useVideoDetails(props) {
   const documentStore = sanity.useDocumentStore(), toast = ui.useToast(), client = useClient(), [references, referencesLoading] = useDocReferences(
     React.useMemo(() => ({ documentStore, id: props.asset._id }), [documentStore, props.asset._id])
-  ), [originalAsset, setOriginalAsset] = React.useState(() => props.asset), [filename, setFilename] = React.useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = React.useState("idle");
+  ), [originalAsset, setOriginalAsset] = React.useState(() => props.asset), [filename, setFilename] = React.useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = React.useState("idle"), { resyncAsset, isResyncing } = useResyncAsset({ showToast: !0 });
+  async function handleResync() {
+    state === "idle" && (setState("resyncing"), await resyncAsset(props.asset), setState("idle"));
+  }
   function handleClose() {
     if (state === "idle") {
       if (modified) {
@@ -3219,7 +3517,9 @@ function useVideoDetails(props) {
     setState,
     handleClose,
     confirmClose,
-    saveChanges
+    saveChanges,
+    handleResync,
+    isResyncing
   };
 }
 const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { title: props.label, description: props.description, inputId: props.label, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3243,7 +3543,9 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
     setState,
     handleClose,
     confirmClose,
-    saveChanges
+    saveChanges,
+    handleResync,
+    isResyncing
   } = useVideoDetails(props), isSaving = state === "saving", [containerHeight, setContainerHeight] = React.useState(null), contentsRef = React__default.default.useRef(null);
   return React.useEffect(() => {
     !contentsRef.current || !("getBoundingClientRect" in contentsRef.current) || setContainerHeight(contentsRef.current.getBoundingClientRect().height);
@@ -3259,19 +3561,35 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
       width: 2,
       position: "fixed",
       footer: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            icon: icons.TrashIcon,
-            fontSize: 2,
-            padding: 3,
-            mode: "bleed",
-            text: "Delete",
-            tone: "critical",
-            onClick: () => setState("deleting"),
-            disabled: isSaving
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              icon: icons.TrashIcon,
+              fontSize: 2,
+              padding: 3,
+              mode: "bleed",
+              text: "Delete",
+              tone: "critical",
+              onClick: () => setState("deleting"),
+              disabled: isSaving || isResyncing
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              icon: icons.SyncIcon,
+              fontSize: 2,
+              padding: 3,
+              mode: "bleed",
+              text: "Resync",
+              tone: "primary",
+              onClick: handleResync,
+              disabled: isSaving || isResyncing,
+              iconRight: isResyncing && ui.Spinner
+            }
+          )
+        ] }),
         modified && /* @__PURE__ */ jsxRuntime.jsx(
           ui.Button,
           {
@@ -3283,7 +3601,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
             tone: "positive",
             onClick: saveChanges,
             iconRight: isSaving && ui.Spinner,
-            disabled: isSaving
+            disabled: isSaving || isResyncing
           }
         )
       ] }) }),
@@ -3469,14 +3787,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,9 +3810,28 @@ ${displayInfo.id}`, icon: icons.TagIcon, size: 2 }),
       ]
     }
   );
-}, VideoMetadata = (props) => {
-  if (!props.asset)
-    return null;
+}, 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;
   const displayInfo = getVideoMetadata(props.asset);
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
     displayInfo.title && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3592,10 +3922,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 +3939,7 @@ function VideoInBrowser({
         position: "relative"
       },
       children: [
-        playbackPolicy === "signed" && /* @__PURE__ */ jsxRuntime.jsx(
+        playbackPolicy?.policy === "signed" && /* @__PURE__ */ jsxRuntime.jsx(
           ui.Tooltip,
           {
             animate: !0,
@@ -3624,7 +3956,7 @@ function VideoInBrowser({
                   position: "absolute",
                   left: "1em",
                   top: "1em",
-                  zIndex: 10
+                  zIndex: 11
                 },
                 padding: 2,
                 border: !0,
@@ -3633,6 +3965,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 +4000,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 +4070,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 +4089,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 +4130,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 +4488,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 +4532,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 +4549,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 +4559,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 +4571,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 +4795,9 @@ 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), { resyncAsset, isResyncing } = useResyncAsset({ showToast: !0 }), onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]), handleResync = React.useCallback(async () => {
+    setOpen(!1), await resyncAsset(asset);
+  }, [resyncAsset, asset]);
   return React.useEffect(() => {
     open && dialogState && setOpen(!1);
   }, [dialogState, open]), ui.useClickOutsideEvent(
@@ -4470,6 +4855,15 @@ function PlayerActionsMenu(props) {
                 text: "Captions",
                 onClick: () => setDialogState("edit-captions")
               }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.MenuItem,
+              {
+                icon: icons.SyncIcon,
+                text: "Resync from Mux",
+                onClick: handleResync,
+                disabled: readOnly || isResyncing
+              }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}),
@@ -4513,6 +4907,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 +5069,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 +5084,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 +5126,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 +5135,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 +5149,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 +5297,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 +5452,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 +5467,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 +5504,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 +5572,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 +5623,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 +5661,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 +5692,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 +5904,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 +5989,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 +6040,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 +6129,7 @@ function Uploader(props) {
     props.dialogState === "select-video" && /* @__PURE__ */ jsxRuntime.jsx(
       InputBrowser,
       {
+        config: props.config,
         asset: props.asset,
         onChange: props.onChange,
         setDialogState: props.setDialogState
@@ -5633,7 +6214,12 @@ const muxVideoSchema = {
     { type: "number", name: "max_width" },
     { type: "number", name: "max_frame_rate" },
     { type: "number", name: "duration" },
-    { type: "number", name: "max_height" }
+    { type: "number", name: "max_height" },
+    { type: "string", name: "language_code" },
+    { type: "string", name: "name" },
+    { type: "string", name: "status" },
+    { type: "string", name: "text_source" },
+    { type: "string", name: "text_type" }
   ]
 }, muxPlaybackId = {
   name: "mux.playbackId",
@@ -5795,6 +6381,7 @@ const muxVideoSchema = {
   normalize_audio: !1,
   defaultPublic: !0,
   defaultSigned: !1,
+  defaultDrm: !1,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: [],
   acceptedMimeTypes: ["video/*", "audio/*"]