sanity-plugin-mux-input 2.13.0 → 2.15.0

package/dist/index.js

@@ -19,11 +19,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), suspendReact = require("suspend-react"), rxjs = require("rxjs"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), operators = require("rxjs/operators"), MuxPlayer = require("@mux/mux-player-react/lazy"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"), reactRx = require("react-rx"), useSWR = require("swr"), scrollIntoView = require("scroll-into-view-if-needed"), upchunk = require("@mux/upchunk"), reactIs = require("react-is"), LanguagesList = require("iso-639-1");
+var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), suspendReact = require("suspend-react"), rxjs = require("rxjs"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), operators = require("rxjs/operators"), LanguagesList = require("iso-639-1"), MuxPlayer = require("@mux/mux-player-react/lazy"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"), reactRx = require("react-rx"), useSWR = require("swr"), scrollIntoView = require("scroll-into-view-if-needed"), upchunk = require("@mux/upchunk"), reactIs = require("react-is");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
-var React__default = /* @__PURE__ */ _interopDefaultCompat(React), compact__default = /* @__PURE__ */ _interopDefaultCompat(compact), toLower__default = /* @__PURE__ */ _interopDefaultCompat(toLower), trim__default = /* @__PURE__ */ _interopDefaultCompat(trim), uniq__default = /* @__PURE__ */ _interopDefaultCompat(uniq), words__default = /* @__PURE__ */ _interopDefaultCompat(words), MuxPlayer__default = /* @__PURE__ */ _interopDefaultCompat(MuxPlayer), isNumber__default = /* @__PURE__ */ _interopDefaultCompat(isNumber), isString__default = /* @__PURE__ */ _interopDefaultCompat(isString), useSWR__default = /* @__PURE__ */ _interopDefaultCompat(useSWR), scrollIntoView__default = /* @__PURE__ */ _interopDefaultCompat(scrollIntoView), LanguagesList__default = /* @__PURE__ */ _interopDefaultCompat(LanguagesList);
+var React__default = /* @__PURE__ */ _interopDefaultCompat(React), compact__default = /* @__PURE__ */ _interopDefaultCompat(compact), toLower__default = /* @__PURE__ */ _interopDefaultCompat(toLower), trim__default = /* @__PURE__ */ _interopDefaultCompat(trim), uniq__default = /* @__PURE__ */ _interopDefaultCompat(uniq), words__default = /* @__PURE__ */ _interopDefaultCompat(words), LanguagesList__default = /* @__PURE__ */ _interopDefaultCompat(LanguagesList), MuxPlayer__default = /* @__PURE__ */ _interopDefaultCompat(MuxPlayer), isNumber__default = /* @__PURE__ */ _interopDefaultCompat(isNumber), isString__default = /* @__PURE__ */ _interopDefaultCompat(isString), useSWR__default = /* @__PURE__ */ _interopDefaultCompat(useSWR), scrollIntoView__default = /* @__PURE__ */ _interopDefaultCompat(scrollIntoView);
 const ToolIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -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,
@@ -568,6 +669,51 @@ function listAssets(client, options) {
     query
   });
 }
+function addTextTrackFromUrl(client, assetId, vttUrl, options) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/assets/${dataset}/${assetId}/tracks`,
+    withCredentials: !0,
+    method: "POST",
+    body: {
+      url: vttUrl,
+      type: "text",
+      language_code: options.language_code,
+      name: options.name,
+      text_type: options.text_type || "subtitles"
+    },
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+function generateSubtitles(client, assetId, audioTrackId, options) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/assets/${dataset}/${assetId}/tracks/${audioTrackId}/generate-subtitles`,
+    withCredentials: !0,
+    method: "POST",
+    body: {
+      generated_subtitles: [
+        {
+          language_code: options.language_code,
+          name: options.name
+        }
+      ]
+    },
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+function deleteTextTrack(client, assetId, trackId) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/assets/${dataset}/${assetId}/tracks/${trackId}`,
+    withCredentials: !0,
+    method: "DELETE"
+  });
+}
 const ASSETS_PER_PAGE = 100;
 async function fetchMuxAssetsPage(client, cursor) {
   try {
@@ -733,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)
@@ -753,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 });
   }
@@ -797,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;
@@ -814,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: {
@@ -870,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;
@@ -1105,6 +1282,46 @@ function ImportVideosFromMux() {
   if (importAssets.hasSecrets)
     return importAssets.dialogOpen ? /* @__PURE__ */ jsxRuntime.jsx(ImportVideosDialog, { ...importAssets }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { mode: "bleed", text: "Import from Mux", onClick: importAssets.openDialog });
 }
+const PageSelector = (props) => {
+  const page = props.page, setPage = props.setPage;
+  return React.useEffect(() => {
+    const clamped = Math.min(props.total - 1, Math.max(0, page));
+    page !== clamped && setPage(clamped);
+  }, [page, props.total, setPage]), /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        icon: icons.ChevronLeftIcon,
+        mode: "bleed",
+        padding: 3,
+        style: { cursor: "pointer" },
+        disabled: page <= 0,
+        onClick: () => {
+          setPage((p) => Math.min(props.total - 1, Math.max(0, p - 1)));
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Label, { muted: !0, children: [
+      "Page ",
+      page + 1,
+      "/",
+      props.total
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        icon: icons.ChevronRightIcon,
+        mode: "bleed",
+        padding: 3,
+        style: { cursor: "pointer" },
+        disabled: page >= props.total - 1,
+        onClick: () => {
+          setPage((p) => Math.min(props.total - 1, Math.max(0, p + 1)));
+        }
+      }
+    )
+  ] });
+};
 function useResyncMuxMetadata() {
   const documentStore = sanity.useDocumentStore(), client = sanity.useClient({
     apiVersion: SANITY_API_VERSION
@@ -1380,75 +1597,1290 @@ function StopWatchIcon(props) {
     }
   );
 }
-const DialogStateContext = React.createContext({
-  dialogState: !1,
-  setDialogState: () => null
-}), DialogStateProvider = ({
-  dialogState,
-  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");
-    searchParams.set("token", token);
+function extractErrorMessage(error, defaultMessage = "Failed to process request") {
+  let message = "";
+  if (error && typeof error == "object") {
+    const err = error;
+    message = err.response?.body?.message || err.message || "";
+  } else typeof error == "string" && (message = error);
+  if (!message)
+    return defaultMessage;
+  const match = message.match(/\(([^)]+)\)/);
+  if (match && match[1])
+    return match[1];
+  if (message.includes("responded with")) {
+    const parts = message.split("(");
+    if (parts.length > 1)
+      return parts[parts.length - 1].replace(")", "").trim();
   }
-  return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
+  return message;
 }
-function getDevicePixelRatio(options) {
+async function pollTrackStatus(options) {
   const {
-    defaultDpr = 1,
-    maxDpr = 3,
-    round = !0
-  } = options || {}, dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : defaultDpr;
-  return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
-}
-function formatSeconds(seconds) {
-  if (typeof seconds != "number" || Number.isNaN(seconds))
-    return "";
-  const hrs = ~~(seconds / 3600), mins = ~~(seconds % 3600 / 60), secs = ~~seconds % 60;
-  let ret = "";
-  return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
+    client,
+    assetId,
+    trackName,
+    trackLanguageCode,
+    maxAttempts = 10,
+    onTrackFound,
+    onTrackErrored,
+    onTrackReady
+  } = options, trimmedName = trackName.trim(), trimmedLanguageCode = trackLanguageCode.trim();
+  let newTrack, attempts = 0, trackFound = !1;
+  const findTrack = (textTracks) => {
+    let foundTrack = textTracks.find(
+      (track) => track.name === trimmedName && track.language_code === trimmedLanguageCode
+    );
+    return foundTrack || (foundTrack = textTracks.find((track) => track.language_code === trimmedLanguageCode)), !foundTrack && textTracks.length > 0 && (foundTrack = textTracks[textTracks.length - 1]), foundTrack;
+  };
+  for (; attempts < maxAttempts; ) {
+    try {
+      attempts > 0 && await new Promise((resolve) => setTimeout(resolve, 1e3));
+      const textTracks = (await getAsset(client, assetId)).data.tracks?.filter((track) => track.type === "text") || [], foundTrack = findTrack(textTracks);
+      if (!foundTrack) {
+        attempts++;
+        continue;
+      }
+      if (trackFound = !0, newTrack = foundTrack, onTrackFound && onTrackFound(foundTrack), foundTrack.status === "ready") {
+        onTrackReady && onTrackReady(foundTrack);
+        break;
+      }
+      if (foundTrack.status === "errored")
+        return onTrackErrored && onTrackErrored(foundTrack), {
+          track: foundTrack,
+          found: !0,
+          status: "errored"
+        };
+    } catch (error) {
+      console.error("Failed to fetch updated asset:", error);
+    }
+    attempts++;
+  }
+  return !newTrack || !trackFound ? {
+    track: void 0,
+    found: !1,
+    status: "not-found"
+  } : newTrack.status === "preparing" ? {
+    track: newTrack,
+    found: !0,
+    status: "preparing"
+  } : {
+    track: newTrack,
+    found: !0,
+    status: "ready"
+  };
 }
-function formatSecondsToHHMMSS(seconds) {
-  const hrs = Math.floor(seconds / 3600).toString().padStart(2, "0"), mins = Math.floor(seconds % 3600 / 60).toString().padStart(2, "0"), secs = Math.floor(seconds % 60).toString().padStart(2, "0");
-  return `${hrs}:${mins}:${secs}`;
+async function downloadVttFile(client, asset, track) {
+  if (!track.id)
+    throw new Error("Track ID is missing");
+  if (track.status !== "ready")
+    throw new Error(`Track is not ready yet. Status: ${track.status}`);
+  if (!asset.assetId)
+    throw new Error("Asset ID is required");
+  const playbackId = getPlaybackId(asset);
+  if (!playbackId)
+    throw new Error("Playback ID is required");
+  const playbackPolicy = getPlaybackPolicy(asset)?.policy;
+  let downloadUrl = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`;
+  if (playbackPolicy === "signed" || playbackPolicy === "drm") {
+    const token = generateJwt(client, playbackId, "v");
+    downloadUrl += `?token=${token}`;
+  }
+  const response = await fetch(downloadUrl);
+  if (!response.ok)
+    throw new Error(`Failed to download file: ${response.statusText}`);
+  const blob = await response.blob(), blobUrl = URL.createObjectURL(blob), link = document.createElement("a");
+  link.href = blobUrl, link.download = `${asset.filename || "captions"}-${track.language_code || "en"}.vtt`, document.body.appendChild(link), link.click(), document.body.removeChild(link), URL.revokeObjectURL(blobUrl);
 }
-function isValidTimeFormat(time) {
-  return /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/.test(time) || time === "";
+const SUPPORTED_MUX_LANGUAGES = [
+  { label: "English", code: "en", state: "Stable" },
+  { label: "Spanish", code: "es", state: "Stable" },
+  { label: "Italian", code: "it", state: "Stable" },
+  { label: "Portuguese", code: "pt", state: "Stable" },
+  { label: "German", code: "de", state: "Stable" },
+  { label: "French", code: "fr", state: "Stable" },
+  { label: "Polish", code: "pl", state: "Beta" },
+  { label: "Russian", code: "ru", state: "Beta" },
+  { label: "Dutch", code: "nl", state: "Beta" },
+  { label: "Catalan", code: "ca", state: "Beta" },
+  { label: "Turkish", code: "tr", state: "Beta" },
+  { label: "Swedish", code: "sv", state: "Beta" },
+  { label: "Ukrainian", code: "uk", state: "Beta" },
+  { label: "Norwegian", code: "no", state: "Beta" },
+  { label: "Finnish", code: "fi", state: "Beta" },
+  { label: "Slovak", code: "sk", state: "Beta" },
+  { label: "Greek", code: "el", state: "Beta" },
+  { label: "Czech", code: "cs", state: "Beta" },
+  { label: "Croatian", code: "hr", state: "Beta" },
+  { label: "Danish", code: "da", state: "Beta" },
+  { label: "Romanian", code: "ro", state: "Beta" },
+  { label: "Bulgarian", code: "bg", state: "Beta" }
+];
+function isCustomTextTrack(track) {
+  return track.type !== "autogenerated";
 }
-function getSecondsFromTimeFormat(time) {
-  const [hh = 0, mm = 0, ss = 0] = time.split(":").map(Number);
-  return hh * 3600 + mm * 60 + ss;
+function isAutogeneratedTrack(track) {
+  return track.type === "autogenerated";
 }
-function EditThumbnailDialog({ asset, currentTime = 0 }) {
-  const client = useClient(), { setDialogState } = useDialogStateContext(), dialogId = `EditThumbnailDialog${React.useId()}`, [timeFormatted, setTimeFormatted] = React.useState(
-    () => formatSecondsToHHMMSS(currentTime)
-  ), [nextTime, setNextTime] = React.useState(currentTime), [inputError, setInputError] = React.useState(""), assetWithNewThumbnail = React.useMemo(() => ({ ...asset, thumbTime: nextTime }), [asset, nextTime]), [saving, setSaving] = React.useState(!1), [saveThumbnailError, setSaveThumbnailError] = React.useState(null), handleSave = () => {
-    setSaving(!0), client.patch(asset._id).set({ thumbTime: nextTime }).commit({ returnDocuments: !1 }).then(() => void setDialogState(!1)).catch(setSaveThumbnailError).finally(() => void setSaving(!1));
-  }, width = 300 * getDevicePixelRatio({ maxDpr: 2 });
-  if (saveThumbnailError)
-    throw saveThumbnailError;
+const LANGUAGE_OPTIONS$1 = LanguagesList__default.default.getAllCodes().map((code) => ({
+  value: code,
+  label: LanguagesList__default.default.getNativeName(code)
+})), MUX_LANGUAGE_OPTIONS = SUPPORTED_MUX_LANGUAGES.map((lang) => ({
+  value: lang.code,
+  label: lang.label
+}));
+function AddCaptionDialog({ asset, onAdd, onClose }) {
+  const client = useClient(), toast = ui.useToast(), dialogId = `AddCaptionDialog${React.useId()}`, [isAutogenerated, setIsAutogenerated] = React.useState(!1), [vttUrl, setVttUrl] = React.useState(""), [languageCode, setLanguageCode] = React.useState(""), [selectedLanguage, setSelectedLanguage] = React.useState(
+    null
+  ), [name2, setName] = React.useState(""), [isSubmitting, setIsSubmitting] = React.useState(!1), [selectedFile, setSelectedFile] = React.useState(null), fileInputRef = React.useRef(null), uploadVttFile = async (file) => (await client.assets.upload("file", file, {
+    filename: file.name
+  })).url, handleAddTrackFromUrl = async () => {
+    if (!asset.assetId)
+      throw new Error("Asset ID is required");
+    const trimmedName = name2.trim(), trimmedLanguageCode = languageCode.trim();
+    let vttUrlToUse = vttUrl.trim();
+    if (selectedFile)
+      try {
+        vttUrlToUse = await uploadVttFile(selectedFile);
+      } catch (uploadError) {
+        throw toast.push({
+          title: "Failed to upload VTT file",
+          status: "error",
+          description: "Could not upload the VTT file to Sanity. Please try again."
+        }), setIsSubmitting(!1), uploadError;
+      }
+    await addTextTrackFromUrl(client, asset.assetId, vttUrlToUse, {
+      language_code: trimmedLanguageCode,
+      name: trimmedName,
+      text_type: "subtitles"
+    });
+    const result = await pollTrackStatus({
+      client,
+      assetId: asset.assetId,
+      trackName: trimmedName,
+      trackLanguageCode: trimmedLanguageCode,
+      onTrackErrored: (track) => {
+        const errorMessage = track.error?.messages?.[0] || track.error?.type || "The track failed to download from the provided URL";
+        toast.push({
+          title: "Caption track failed",
+          status: "error",
+          description: errorMessage
+        }), onAdd(track), onClose();
+      }
+    });
+    if (!result.found || !result.track) {
+      toast.push({
+        title: "Caption track may have been added",
+        status: "warning",
+        description: "The track was created but its status could not be determined. It may still be processing. Please refresh the page to see if it appears."
+      }), onClose();
+      return;
+    }
+    if (result.status !== "errored") {
+      if (result.status === "preparing") {
+        toast.push({
+          title: "Caption track is processing",
+          status: "info",
+          description: "The track was created and is being processed. It will appear in the list shortly."
+        }), onAdd(result.track), onClose();
+        return;
+      }
+      toast.push({
+        title: "Caption track added",
+        status: "success",
+        description: "Caption track added successfully"
+      }), onAdd(result.track), onClose();
+    }
+  }, handleGenerateSubtitles = async () => {
+    if (!asset.assetId)
+      throw new Error("Asset ID is required");
+    const audioTrack = (await getAsset(client, asset.assetId)).data.tracks?.find((track) => track.type === "audio");
+    if (!audioTrack || !audioTrack.id)
+      throw toast.push({
+        title: "No audio track found",
+        status: "error",
+        description: "The asset does not have an audio track. Auto-generated subtitles require an audio track."
+      }), new Error("No audio track found");
+    await generateSubtitles(client, asset.assetId, audioTrack.id, {
+      language_code: languageCode.trim(),
+      name: name2.trim()
+    });
+    const mockTrack = {
+      type: "text",
+      id: `generating-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`,
+      text_type: "subtitles",
+      text_source: "generated_live",
+      language_code: languageCode.trim(),
+      name: name2.trim(),
+      status: "preparing"
+    };
+    toast.push({
+      title: "Generating subtitles",
+      status: "success",
+      description: "This may take a few minutes"
+    }), onAdd(mockTrack), onClose();
+  }, handleSubmit = async () => {
+    if (!isAutogenerated) {
+      if (!selectedFile && !vttUrl.trim()) {
+        toast.push({
+          title: "VTT file or URL required",
+          status: "error",
+          description: "Please select a VTT file or enter a VTT file URL"
+        });
+        return;
+      }
+      if (vttUrl.trim() && !selectedFile)
+        try {
+          new URL(vttUrl.trim());
+        } catch {
+          toast.push({
+            title: "Invalid URL",
+            status: "error",
+            description: "Please enter a valid URL (e.g., https://example.com/subtitles.vtt)"
+          });
+          return;
+        }
+    }
+    if (!name2.trim()) {
+      toast.push({
+        title: "Audio name required",
+        status: "error",
+        description: "Please enter an audio name for this caption track"
+      });
+      return;
+    }
+    if (!languageCode.trim()) {
+      toast.push({
+        title: "Language code required",
+        status: "error",
+        description: "Please enter a language code (e.g., en, es, fr)"
+      });
+      return;
+    }
+    setIsSubmitting(!0);
+    try {
+      isAutogenerated ? await handleGenerateSubtitles() : await handleAddTrackFromUrl();
+    } catch (error) {
+      toast.push({
+        title: "Failed to add caption track",
+        status: "error",
+        description: extractErrorMessage(error, "Failed to add caption track")
+      });
+    } finally {
+      setIsSubmitting(!1);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Dialog,
     {
       id: dialogId,
-      header: "Edit thumbnail",
-      onClose: () => setDialogState(!1),
-      footer: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
-        {
-          disabled: inputError !== "",
-          mode: "ghost",
-          tone: "primary",
-          loading: saving,
-          onClick: handleSave,
-          text: "Set new thumbnail"
-        },
-        "thumbnail"
-      ) }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, padding: 3, children: [
+      header: "Add Caption Track",
+      onClose,
+      width: 1,
+      onClickOutside: onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { padding: 4, space: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", marginBottom: 3, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Checkbox,
+              {
+                id: "autogenerated-checkbox",
+                style: { display: "block" },
+                checked: isAutogenerated,
+                onChange: (e) => {
+                  setIsAutogenerated(e.currentTarget.checked), e.currentTarget.checked && setVttUrl("");
+                },
+                disabled: isSubmitting
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { flex: 1, paddingLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "autogenerated-checkbox", children: "Generate captions" }) }) })
+          ] }),
+          !isAutogenerated && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { padding: 3, marginBottom: 2, tone: "transparent", border: !0, radius: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: selectedFile ? `Selected: ${selectedFile.name}` : "No file selected" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Button,
+                  {
+                    icon: icons.UploadIcon,
+                    text: "Select File",
+                    mode: "ghost",
+                    tone: "primary",
+                    fontSize: 1,
+                    padding: 2,
+                    onClick: () => fileInputRef.current?.click(),
+                    disabled: isSubmitting
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: ".vtt,text/vtt",
+                  style: { display: "none" },
+                  onChange: (e) => {
+                    e.target.files && e.target.files.length > 0 && !isSubmitting && (setSelectedFile(e.target.files[0]), setVttUrl(""));
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, style: { textAlign: "center" }, children: "Or enter the VTT file URL" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "vtt-url", children: "VTT File URL" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.TextInput,
+                {
+                  id: "vtt-url",
+                  placeholder: "https://example.com/subtitles.vtt",
+                  value: vttUrl,
+                  onChange: (e) => {
+                    setVttUrl(e.currentTarget.value), setSelectedFile(null);
+                  },
+                  disabled: isSubmitting
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "caption-name", children: "Audio name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Autocomplete,
+            {
+              id: "caption-name",
+              value: selectedLanguage?.value || "",
+              onChange: (newValue) => {
+                const selected = (isAutogenerated ? MUX_LANGUAGE_OPTIONS : LANGUAGE_OPTIONS$1).find((opt) => opt.value === newValue);
+                selected && (setSelectedLanguage(selected), setLanguageCode(selected.value), setName(selected.label));
+              },
+              options: isAutogenerated ? MUX_LANGUAGE_OPTIONS : LANGUAGE_OPTIONS$1,
+              icon: icons.TranslateIcon,
+              placeholder: "Select language",
+              filterOption: (query, option) => option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 || option.value.toLowerCase().indexOf(query.toLowerCase()) > -1,
+              openButton: !0,
+              renderValue: (value) => (isAutogenerated ? MUX_LANGUAGE_OPTIONS : LANGUAGE_OPTIONS$1).find(
+                (l) => l.value === value
+              )?.label || value,
+              renderOption: (option) => /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { "data-as": "button", padding: 3, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, textOverflow: "ellipsis", children: [
+                option.label,
+                " (",
+                option.value,
+                ")"
+              ] }) }),
+              disabled: isSubmitting
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "caption-language", children: "Language Code" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.TextInput,
+            {
+              id: "caption-language",
+              placeholder: "en-US",
+              value: languageCode,
+              onChange: (e) => {
+                setLanguageCode(e.currentTarget.value), selectedLanguage && selectedLanguage.value !== e.currentTarget.value && (setSelectedLanguage(null), (!name2 || name2 === selectedLanguage.label) && setName(""));
+              },
+              disabled: isSubmitting
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, justify: "flex-end", marginTop: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { text: "Cancel", mode: "ghost", onClick: onClose, disabled: isSubmitting }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              text: "Add Caption Track",
+              tone: "primary",
+              icon: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Spinner,
+                {
+                  style: {
+                    verticalAlign: "middle",
+                    display: "inline-block",
+                    marginBottom: "-3px",
+                    width: "1em",
+                    height: "1em",
+                    marginRight: "-6px"
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(icons.UploadIcon, {}),
+              onClick: handleSubmit,
+              disabled: isSubmitting
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+const LANGUAGE_OPTIONS = LanguagesList__default.default.getAllCodes().map((code) => ({
+  value: code,
+  label: LanguagesList__default.default.getNativeName(code)
+}));
+function EditCaptionDialog({ asset, track, onUpdate, onClose }) {
+  const client = useClient(), toast = ui.useToast(), dialogId = `EditCaptionDialog${React.useId()}`, isAutogenerated = track.text_source === "generated_live" || track.text_source === "generated_live_final" || track.text_source === "generated_vod", [vttUrl, setVttUrl] = React.useState(""), [languageCode, setLanguageCode] = React.useState(track.language_code || ""), [selectedLanguage, setSelectedLanguage] = React.useState(
+    () => {
+      const baseCode = track.language_code?.split("-")[0], found = LANGUAGE_OPTIONS.find(
+        (opt) => opt.value === track.language_code || opt.value === baseCode
+      );
+      if (found) return found;
+      if (track.name) {
+        const foundByName = LANGUAGE_OPTIONS.find((opt) => opt.label === track.name);
+        if (foundByName) return foundByName;
+      }
+      return null;
+    }
+  ), [name2, setName] = React.useState(track.name || ""), [isSubmitting, setIsSubmitting] = React.useState(!1), [downloading, setDownloading] = React.useState(!1), [selectedFile, setSelectedFile] = React.useState(null), fileInputRef = React.useRef(null);
+  React.useEffect(() => {
+    setLanguageCode(track.language_code || ""), setName(track.name || ""), setVttUrl("");
+    const baseCode = track.language_code?.split("-")[0], foundByCode = LANGUAGE_OPTIONS.find(
+      (opt) => opt.value === track.language_code || opt.value === baseCode
+    ), foundByName = track.name ? LANGUAGE_OPTIONS.find((opt) => opt.label === track.name) : null;
+    setSelectedLanguage(foundByCode || foundByName || null);
+  }, [track, asset, client]);
+  const handleDownloadCurrentFile = async () => {
+    setDownloading(!0);
+    try {
+      await downloadVttFile(client, asset, track);
+    } catch (error) {
+      let errorMessage = "Please try again", title = "Failed to download VTT file";
+      error instanceof Error ? (errorMessage = error.message, error.message.includes("Track") && (title = "Cannot download")) : (error === "Track ID is missing" || error === "Track is not ready yet") && (errorMessage = String(error), title = "Cannot download"), toast.push({
+        title,
+        status: "error",
+        description: errorMessage
+      });
+    } finally {
+      setDownloading(!1);
+    }
+  }, getCurrentFileName = () => track.id && asset.filename ? `${asset.filename}-${track.language_code || "en"}.vtt` : `captions-${track.language_code || "en"}.vtt`, uploadVttFile = async (file) => (await client.assets.upload("file", file, {
+    filename: file.name
+  })).url, refreshAssetData = async () => {
+    if (!(!asset._id || !asset.assetId))
+      try {
+        const latestAssetData = await getAsset(client, asset.assetId);
+        await client.patch(asset._id).set({ data: latestAssetData.data, status: latestAssetData.data.status }).commit();
+      } catch (refreshError) {
+        console.error("Failed to refresh asset data:", refreshError);
+      }
+  }, handleUpdateTrackWithNewUrl = async () => {
+    if (!asset.assetId)
+      throw new Error("Asset ID is required");
+    const trimmedName = name2.trim(), trimmedLanguageCode = languageCode.trim(), oldTrackId = track.id;
+    try {
+      await deleteTextTrack(client, asset.assetId, oldTrackId);
+    } catch (deleteError) {
+      throw toast.push({
+        title: "Failed to delete old track",
+        status: "error",
+        description: "Could not delete the old track. Please try again or delete it manually."
+      }), setIsSubmitting(!1), deleteError;
+    }
+    let vttUrlToUse = vttUrl.trim();
+    if (selectedFile)
+      try {
+        vttUrlToUse = await uploadVttFile(selectedFile);
+      } catch (uploadError) {
+        throw toast.push({
+          title: "Failed to upload VTT file",
+          status: "error",
+          description: "Could not upload the VTT file to Sanity. Please try again."
+        }), setIsSubmitting(!1), uploadError;
+      }
+    try {
+      await addTextTrackFromUrl(client, asset.assetId, vttUrlToUse, {
+        language_code: trimmedLanguageCode,
+        name: trimmedName,
+        text_type: "subtitles"
+      });
+    } catch (error) {
+      throw toast.push({
+        title: "Failed to update caption track",
+        status: "error",
+        description: extractErrorMessage(error, "Failed to update caption track")
+      }), setIsSubmitting(!1), error;
+    }
+    const result = await pollTrackStatus({
+      client,
+      assetId: asset.assetId,
+      trackName: trimmedName,
+      trackLanguageCode: trimmedLanguageCode,
+      onTrackErrored: async (erroredTrack) => {
+        const errorMessage = erroredTrack.error?.messages?.[0] || erroredTrack.error?.type || "The track failed to download from the provided URL";
+        toast.push({
+          title: "Caption track failed",
+          status: "error",
+          description: errorMessage
+        }), await refreshAssetData(), onUpdate(erroredTrack, oldTrackId), setIsSubmitting(!1);
+      }
+    });
+    if (!result.found || !result.track) {
+      toast.push({
+        title: "Caption track may have been updated",
+        status: "warning",
+        description: "The track was updated but its status could not be determined. It may still be processing. Please refresh the page to see if it appears."
+      }), setIsSubmitting(!1);
+      return;
+    }
+    result.status !== "errored" && (await refreshAssetData(), result.status === "preparing" ? toast.push({
+      title: "Caption track is processing",
+      status: "info",
+      description: "The track was updated and is being processed. It will appear in the list shortly."
+    }) : toast.push({
+      title: "Caption track updated",
+      status: "success",
+      description: "Caption track updated successfully"
+    }), onUpdate(result.track, oldTrackId), setIsSubmitting(!1));
+  }, handleSubmit = async () => {
+    if (!name2.trim()) {
+      toast.push({
+        title: "Audio name required",
+        status: "error",
+        description: "Please enter an audio name for this caption track"
+      });
+      return;
+    }
+    if (!languageCode.trim()) {
+      toast.push({
+        title: "Language code required",
+        status: "error",
+        description: "Please enter a language code (e.g., en, es, fr)"
+      });
+      return;
+    }
+    setIsSubmitting(!0);
+    try {
+      if (!asset.assetId)
+        throw new Error("Asset ID is required");
+      const originalVttUrl = (() => {
+        if (isAutogenerated || !track.id) return "";
+        const playbackId = getPlaybackId(asset);
+        if (!playbackId) return "";
+        let url = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`;
+        if (getPlaybackPolicy(asset)?.policy === "signed") {
+          const token = generateJwt(client, playbackId, "v");
+          url += `?token=${token}`;
+        }
+        return url;
+      })(), urlChanged = selectedFile !== null || vttUrl.trim() && vttUrl.trim() !== originalVttUrl;
+      if (!urlChanged) {
+        toast.push({
+          title: "No changes",
+          status: "info",
+          description: 'Please provide a new VTT file or URL using the "Replace" button or URL field to update the track.'
+        }), setIsSubmitting(!1);
+        return;
+      }
+      if (urlChanged) {
+        if (!selectedFile && vttUrl.trim())
+          try {
+            new URL(vttUrl.trim());
+          } catch {
+            toast.push({
+              title: "Invalid URL",
+              status: "error",
+              description: "Please enter a valid URL (e.g., https://example.com/subtitles.vtt)"
+            }), setIsSubmitting(!1);
+            return;
+          }
+        if (!selectedFile && !vttUrl.trim()) {
+          toast.push({
+            title: "VTT file or URL required",
+            status: "error",
+            description: "Please select a VTT file or enter a VTT file URL"
+          }), setIsSubmitting(!1);
+          return;
+        }
+        await handleUpdateTrackWithNewUrl();
+      }
+      onClose();
+    } catch (error) {
+      toast.push({
+        title: "Failed to update caption track",
+        status: "error",
+        description: error instanceof Error ? error.message : "Please try again"
+      });
+    } finally {
+      setIsSubmitting(!1);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Dialog,
+    {
+      id: dialogId,
+      header: "Edit Caption Track",
+      onClose,
+      width: 1,
+      onClickOutside: onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { padding: 4, space: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { padding: 3, marginBottom: 2, tone: "transparent", border: !0, radius: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: getCurrentFileName() }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
+                track.status !== "errored" && /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Button,
+                  {
+                    icon: downloading ? /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Spinner,
+                      {
+                        style: {
+                          verticalAlign: "middle",
+                          display: "inline-block",
+                          marginTop: "-2px",
+                          width: "0.5em",
+                          height: "0.5em"
+                        }
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(icons.DownloadIcon, {}),
+                    text: "Download",
+                    mode: "ghost",
+                    tone: "primary",
+                    fontSize: 1,
+                    padding: 2,
+                    onClick: handleDownloadCurrentFile,
+                    disabled: downloading || isSubmitting
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Button,
+                  {
+                    icon: icons.UploadIcon,
+                    text: "Replace",
+                    mode: "ghost",
+                    tone: "primary",
+                    fontSize: 1,
+                    padding: 2,
+                    onClick: () => fileInputRef.current?.click(),
+                    disabled: isSubmitting
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: ".vtt,text/vtt",
+                style: { display: "none" },
+                onChange: (e) => {
+                  e.target.files && e.target.files.length > 0 && !isSubmitting && (setSelectedFile(e.target.files[0]), setVttUrl(""));
+                }
+              }
+            ),
+            selectedFile && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, style: { marginTop: 8 }, children: [
+              "Selected: ",
+              selectedFile.name
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "vtt-url", children: "VTT File URL" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.TextInput,
+              {
+                id: "vtt-url",
+                placeholder: "https://example.com/subtitles.vtt",
+                value: vttUrl,
+                onChange: (e) => {
+                  setVttUrl(e.currentTarget.value), setSelectedFile(null);
+                },
+                disabled: isSubmitting
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "Add a URL to replace the existing VTT file with a new one" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "caption-name", children: "Audio name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Autocomplete,
+            {
+              id: "caption-name",
+              value: selectedLanguage?.value || "",
+              onChange: (newValue) => {
+                const selected = LANGUAGE_OPTIONS.find((opt) => opt.value === newValue);
+                selected && (setSelectedLanguage(selected), setLanguageCode(selected.value), setName(selected.label));
+              },
+              options: LANGUAGE_OPTIONS,
+              icon: icons.TranslateIcon,
+              placeholder: "Select language",
+              filterOption: (query, option) => option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 || option.value.toLowerCase().indexOf(query.toLowerCase()) > -1,
+              openButton: !0,
+              renderValue: (value) => LANGUAGE_OPTIONS.find((l) => l.value === value)?.label || value,
+              renderOption: (option) => /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { "data-as": "button", padding: 3, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, textOverflow: "ellipsis", children: [
+                option.label,
+                " (",
+                option.value,
+                ")"
+              ] }) }),
+              disabled: isSubmitting
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "caption-language", children: "Language Code" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.TextInput,
+            {
+              id: "caption-language",
+              placeholder: "en-US",
+              value: languageCode,
+              onChange: (e) => {
+                setLanguageCode(e.currentTarget.value), selectedLanguage && selectedLanguage.value !== e.currentTarget.value && (setSelectedLanguage(null), (!name2 || name2 === selectedLanguage.label) && setName(""));
+              },
+              disabled: isSubmitting
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, justify: "flex-end", marginTop: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { text: "Cancel", mode: "ghost", onClick: onClose, disabled: isSubmitting }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              text: "Update Caption Track",
+              tone: "primary",
+              icon: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Spinner,
+                {
+                  style: {
+                    verticalAlign: "middle",
+                    display: "inline-block",
+                    marginBottom: "-3px",
+                    width: "1em",
+                    height: "1em",
+                    marginRight: "-6px"
+                  }
+                }
+              ) : icons.UploadIcon,
+              onClick: handleSubmit,
+              disabled: isSubmitting
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function TrackCard({
+  track,
+  iconOnly,
+  downloadingTrackId,
+  deletingTrackId,
+  trackToEdit,
+  getTrackSourceLabel,
+  handleDownload,
+  setTrackToEdit,
+  setTrackToDelete
+}) {
+  const isDisabled = (action) => action === "download" ? downloadingTrackId !== null || deletingTrackId === track.id || trackToEdit?.id === track.id : action === "edit" ? downloadingTrackId === track.id || deletingTrackId === track.id || trackToEdit?.id === track.id : downloadingTrackId === track.id || deletingTrackId !== null || trackToEdit?.id === track.id, renderActionButtons = () => track.status === "preparing" ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Spinner,
+      {
+        muted: !0,
+        style: {
+          width: "0.75em",
+          height: "0.75em",
+          verticalAlign: "middle",
+          display: "inline-block",
+          marginBottom: "-2px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "Processing..." })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
+    track.status !== "errored" && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        icon: downloadingTrackId === track.id ? /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Spinner,
+          {
+            style: {
+              verticalAlign: "middle",
+              display: "inline-block",
+              marginTop: "-2px",
+              width: "0.5em",
+              height: "0.5em"
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(icons.DownloadIcon, {}),
+        text: iconOnly ? void 0 : "Download",
+        mode: "ghost",
+        tone: "primary",
+        fontSize: 1,
+        padding: 2,
+        onClick: () => handleDownload(track),
+        disabled: isDisabled("download"),
+        title: "Download"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.EditIcon, {}),
+        text: iconOnly ? void 0 : "Edit",
+        mode: "ghost",
+        tone: "primary",
+        fontSize: 1,
+        padding: 2,
+        disabled: isDisabled("edit"),
+        onClick: () => setTrackToEdit(track),
+        title: "Edit"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        icon: deletingTrackId === track.id ? /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Spinner,
+          {
+            style: {
+              verticalAlign: "middle",
+              display: "inline-block",
+              marginTop: "-2px",
+              width: "0.5em",
+              height: "0.5em"
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(icons.TrashIcon, {}),
+        text: iconOnly ? void 0 : "Delete",
+        mode: "ghost",
+        tone: "critical",
+        fontSize: 1,
+        padding: 2,
+        disabled: isDisabled("delete"),
+        onClick: () => setTrackToDelete(track),
+        title: "Delete"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Card,
+    {
+      padding: 3,
+      radius: 2,
+      tone: track.status === "errored" ? "caution" : "transparent",
+      border: !0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", gap: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, flex: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "semibold", children: track.name || "Untitled" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, children: [
+              "(",
+              getTrackSourceLabel(track),
+              ")"
+            ] }),
+            track.status === "errored" && /* @__PURE__ */ jsxRuntime.jsx(
+              icons.ErrorOutlineIcon,
+              {
+                style: { color: "var(--card-critical-color)" },
+                "aria-label": "Error",
+                fontSize: 20
+              }
+            )
+          ] }),
+          track.language_code && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, children: [
+            "Language: ",
+            track.language_code
+          ] }),
+          track.status === "errored" && track.error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, style: { color: "var(--card-critical-color)" }, children: track.error.messages?.[0] || track.error.type || "Failed to process track" })
+        ] }),
+        renderActionButtons()
+      ] })
+    }
+  );
+}
+function TextTracksManager({
+  asset,
+  iconOnly = !1,
+  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(
+    (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) => {
+      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";
+    }), isTrackAlreadyInRealTracks = (addedTrack, realTracksList) => addedTrack.id ? addedTrack.id.startsWith("generating-") ? isMockTrackReplaced(addedTrack, realTracksList) : realTracksList.some((realTrack) => realTrack.id === addedTrack.id) : !1, tracksToKeep = addedTracks.filter((addedTrack) => addedTrack.id && addedTrack.id.startsWith("generating-") ? !isMockTrackReplaced(addedTrack, tracksWithUpdates) : !isTrackAlreadyInRealTracks(addedTrack, tracksWithUpdates));
+    return [...tracksWithUpdates, ...tracksToKeep];
+  }, [activeTracks, addedTracks, updatedTracks]);
+  React.useEffect(() => {
+    const newAutogeneratedIds = /* @__PURE__ */ new Set();
+    activeTracks.forEach((track) => {
+      track.id && (track.text_source === "generated_live" || track.text_source === "generated_live_final" || track.text_source === "generated_vod") && newAutogeneratedIds.add(track.id);
+    }), addedTracks.forEach((mockTrack) => {
+      if (mockTrack.id && mockTrack.id.startsWith("generating-")) {
+        const realTrack = activeTracks.find((rt) => {
+          const nameMatches = rt.name === mockTrack.name, languageMatches = rt.language_code === mockTrack.language_code;
+          return nameMatches && languageMatches;
+        });
+        realTrack?.id && newAutogeneratedIds.add(realTrack.id);
+      }
+    }), setAutogeneratedTrackIds((prev) => {
+      let hasNew = !1;
+      const updated = new Set(prev);
+      return newAutogeneratedIds.forEach((id) => {
+        prev.has(id) || (updated.add(id), hasNew = !0);
+      }), hasNew ? updated : prev;
+    });
+  }, [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 () => {
+      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 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();
+        fetchedTracks.forEach((track) => {
+          track.id && (track.text_source === "generated_live" || track.text_source === "generated_live_final" || track.text_source === "generated_vod") && newAutogeneratedIds.add(track.id);
+        });
+        const findMatchingRealTrack = (mockTrack, tracksList) => tracksList.find((rt) => {
+          const nameMatches = rt.name === mockTrack.name, languageMatches = rt.language_code === mockTrack.language_code;
+          return nameMatches && languageMatches;
+        });
+        setAddedTracks((prev) => prev.filter((mockTrack) => {
+          if (mockTrack.id && mockTrack.id.startsWith("generating-")) {
+            const replaced = isMockTrackReplaced(mockTrack, fetchedTracks);
+            if (replaced) {
+              const realTrack = findMatchingRealTrack(mockTrack, fetchedTracks);
+              realTrack?.id && (newAutogeneratedIds.add(realTrack.id), setTrackActivityOrder((prevOrder) => {
+                const mockOrder = prevOrder.get(mockTrack.id);
+                if (mockOrder) {
+                  const newMap = new Map(prevOrder);
+                  return newMap.set(realTrack.id, mockOrder), newMap;
+                }
+                return prevOrder;
+              }));
+            }
+            return !replaced;
+          }
+          return !0;
+        })), newAutogeneratedIds.size > 0 && setAutogeneratedTrackIds((prevIds) => {
+          const updated = new Set(prevIds);
+          return newAutogeneratedIds.forEach((id) => updated.add(id)), updated;
+        });
+      } catch (error) {
+        console.error("Failed to refresh asset data:", error);
+      }
+    }, 3e3);
+    return () => clearInterval(interval);
+  }, [allTracks, asset.assetId, asset._id, client]);
+  const visibleTracks = allTracks.filter(
+    (track) => track.status === "ready" || track.status === "preparing" || track.status === "errored"
+  ).sort((a2, b) => {
+    const orderA = trackActivityOrder.get(a2.id) || 0, orderB = trackActivityOrder.get(b.id) || 0;
+    if (orderA > 0 && orderB > 0)
+      return orderB - orderA;
+    if (orderA > 0) return -1;
+    if (orderB > 0) return 1;
+    const aIsPreparing = a2.status === "preparing", bIsPreparing = b.status === "preparing";
+    if (aIsPreparing && !bIsPreparing) return -1;
+    if (!aIsPreparing && bIsPreparing) return 1;
+    const aIsAutogenerated = a2.id && a2.id.startsWith("generating-") || a2.id && autogeneratedTrackIds.has(a2.id), bIsAutogenerated = b.id && b.id.startsWith("generating-") || b.id && autogeneratedTrackIds.has(b.id);
+    return aIsAutogenerated && !bIsAutogenerated ? -1 : !aIsAutogenerated && bIsAutogenerated ? 1 : 0;
+  }), handleDownload = async (track) => {
+    if (track.id) {
+      setDownloadingTrackId(track.id);
+      try {
+        await downloadVttFile(client, asset, track);
+      } catch (error) {
+        toast.push({
+          title: "Failed to download VTT file",
+          status: "error",
+          description: error instanceof Error ? error.message : "Please try again"
+        });
+      } finally {
+        setDownloadingTrackId(null);
+      }
+    }
+  }, confirmDelete = async () => {
+    if (!trackToDelete || !trackToDelete.id) return;
+    const track = trackToDelete;
+    setTrackToDelete(null), setDeletingTrackId(track.id);
+    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({
+        title: "Successfully deleted caption track",
+        status: "success"
+      }), setAddedTracks((prev) => prev.filter((t) => t.id !== track.id)), setUpdatedTracks((prev) => {
+        const newMap = new Map(prev);
+        return newMap.delete(track.id), newMap;
+      }), setTrackActivityOrder((prev) => {
+        const newMap = new Map(prev);
+        return newMap.delete(track.id), newMap;
+      }), setAutogeneratedTrackIds((prev) => {
+        const updated = new Set(prev);
+        return updated.delete(track.id), updated;
+      });
+    } catch (error) {
+      toast.push({
+        title: "Failed to delete caption track",
+        status: "error",
+        description: error instanceof Error ? error.message : "Please try again"
+      });
+    } finally {
+      setDeletingTrackId(null);
+    }
+  }, handleAddTrack = (track) => {
+    setAddedTracks((prev) => [...prev, track]), setTrackActivityOrder((prev) => {
+      const newMap = new Map(prev);
+      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) => {
+      const newMap = new Map(prev);
+      return newMap.delete(oldTrackId), newMap;
+    }), setTrackActivityOrder((prev) => {
+      const newMap = new Map(prev);
+      return newMap.delete(oldTrackId), newMap;
+    }), setAutogeneratedTrackIds((prev) => {
+      const updated = new Set(prev);
+      return updated.delete(oldTrackId), updated;
+    })), addedTracks.some((t) => t.id === updatedTrack.id) ? setAddedTracks((prev) => prev.map((t) => t.id === updatedTrack.id ? updatedTrack : t)) : setUpdatedTracks((prev) => {
+      const newMap = new Map(prev);
+      return newMap.set(updatedTrack.id, updatedTrack), newMap;
+    }), 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);
+      }
+  }, 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: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          icon: icons.AddIcon,
+          text: "Add Caption",
+          tone: "primary",
+          onClick: () => setShowAddDialog(!0)
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 4, radius: 2, tone: "transparent", border: !0, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "No captions available. Add captions when uploading a video or add them manually." }) }),
+      showAddDialog && /* @__PURE__ */ jsxRuntime.jsx(
+        AddCaptionDialog,
+        {
+          asset,
+          onAdd: handleAddTrack,
+          onClose: () => setShowAddDialog(!1)
+        }
+      )
+    ] });
+  const displayedTracks = collapseTracks && !isExpanded ? visibleTracks.slice(0, MAX_VISIBLE_TRACKS) : visibleTracks, hasMoreTracks = collapseTracks && visibleTracks.length > MAX_VISIBLE_TRACKS;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        icon: icons.AddIcon,
+        text: "Add Caption",
+        tone: "primary",
+        onClick: () => setShowAddDialog(!0)
+      }
+    ) }),
+    displayedTracks.map((track) => /* @__PURE__ */ jsxRuntime.jsx(
+      TrackCard,
+      {
+        track,
+        iconOnly,
+        downloadingTrackId,
+        deletingTrackId,
+        trackToEdit,
+        getTrackSourceLabel,
+        handleDownload,
+        setTrackToEdit,
+        setTrackToDelete
+      },
+      track.id
+    )),
+    hasMoreTracks && /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        icon: isExpanded ? icons.ChevronUpIcon : icons.ChevronDownIcon,
+        text: isExpanded ? "Show less" : `Show ${visibleTracks.length - MAX_VISIBLE_TRACKS} more`,
+        mode: "ghost",
+        tone: "primary",
+        onClick: () => setIsExpanded(!isExpanded)
+      }
+    ) }),
+    trackToDelete && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Dialog,
+      {
+        animate: !0,
+        id: dialogId,
+        header: "Delete track",
+        onClose: () => setTrackToDelete(null),
+        onClickOutside: () => setTrackToDelete(null),
+        width: 1,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Card,
+          {
+            padding: 3,
+            style: {
+              minHeight: "150px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Heading, { size: 2, children: [
+                'Are you sure you want to delete "',
+                trackToDelete.name || trackToDelete.language_code || "Untitled",
+                '"?'
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: "This action is irreversible" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 4, marginY: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  icon: deletingTrackId === trackToDelete.id ? /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Spinner,
+                    {
+                      style: {
+                        verticalAlign: "middle",
+                        display: "inline-block",
+                        marginTop: "-2px",
+                        width: "0.5em",
+                        height: "0.5em"
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(icons.TrashIcon, {}),
+                  fontSize: 2,
+                  padding: 3,
+                  text: "Delete track",
+                  tone: "critical",
+                  onClick: confirmDelete,
+                  disabled: deletingTrackId !== null
+                }
+              ) }) })
+            ] })
+          }
+        )
+      }
+    ),
+    showAddDialog && /* @__PURE__ */ jsxRuntime.jsx(
+      AddCaptionDialog,
+      {
+        asset,
+        onAdd: handleAddTrack,
+        onClose: () => setShowAddDialog(!1)
+      }
+    ),
+    trackToEdit && /* @__PURE__ */ jsxRuntime.jsx(
+      EditCaptionDialog,
+      {
+        asset,
+        track: trackToEdit,
+        onUpdate: handleUpdateTrack,
+        onClose: () => setTrackToEdit(null)
+      }
+    )
+  ] });
+}
+const DialogStateContext = React.createContext({
+  dialogState: !1,
+  setDialogState: () => null
+}), DialogStateProvider = ({
+  dialogState,
+  setDialogState,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(DialogStateContext.Provider, { value: { dialogState, setDialogState }, children }), useDialogStateContext = () => React.useContext(DialogStateContext);
+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/${muxPlaybackId2.id}.m3u8?${searchParams}`;
+}
+function CaptionsDialog({ asset }) {
+  const { setDialogState } = useDialogStateContext(), dialogId = `CaptionsDialog${React.useId()}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { id: dialogId, header: "Edit Captions", onClose: () => setDialogState(!1), width: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(TextTracksManager, { asset }) }) });
+}
+function getDevicePixelRatio(options) {
+  const {
+    defaultDpr = 1,
+    maxDpr = 3,
+    round = !0
+  } = options || {}, dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : defaultDpr;
+  return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
+}
+function formatSeconds(seconds) {
+  if (typeof seconds != "number" || Number.isNaN(seconds))
+    return "";
+  const hrs = ~~(seconds / 3600), mins = ~~(seconds % 3600 / 60), secs = ~~seconds % 60;
+  let ret = "";
+  return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
+}
+function formatSecondsToHHMMSS(seconds) {
+  const hrs = Math.floor(seconds / 3600).toString().padStart(2, "0"), mins = Math.floor(seconds % 3600 / 60).toString().padStart(2, "0"), secs = Math.floor(seconds % 60).toString().padStart(2, "0");
+  return `${hrs}:${mins}:${secs}`;
+}
+function isValidTimeFormat(time) {
+  return /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/.test(time) || time === "";
+}
+function getSecondsFromTimeFormat(time) {
+  const [hh = 0, mm = 0, ss = 0] = time.split(":").map(Number);
+  return hh * 3600 + mm * 60 + ss;
+}
+function EditThumbnailDialog({ asset, currentTime = 0 }) {
+  const client = useClient(), { setDialogState } = useDialogStateContext(), dialogId = `EditThumbnailDialog${React.useId()}`, [timeFormatted, setTimeFormatted] = React.useState(
+    () => formatSecondsToHHMMSS(currentTime)
+  ), [nextTime, setNextTime] = React.useState(currentTime), [inputError, setInputError] = React.useState(""), assetWithNewThumbnail = React.useMemo(() => ({ ...asset, thumbTime: nextTime }), [asset, nextTime]), [saving, setSaving] = React.useState(!1), [saveThumbnailError, setSaveThumbnailError] = React.useState(null), handleSave = () => {
+    setSaving(!0), client.patch(asset._id).set({ thumbTime: nextTime }).commit({ returnDocuments: !1 }).then(() => void setDialogState(!1)).catch(setSaveThumbnailError).finally(() => void setSaving(!1));
+  }, width = 300 * getDevicePixelRatio({ maxDpr: 2 });
+  if (saveThumbnailError)
+    throw saveThumbnailError;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Dialog,
+    {
+      id: dialogId,
+      header: "Edit thumbnail",
+      onClose: () => setDialogState(!1),
+      footer: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          disabled: inputError !== "",
+          mode: "ghost",
+          tone: "primary",
+          loading: saving,
+          onClick: handleSave,
+          text: "Set new thumbnail"
+        },
+        "thumbnail"
+      ) }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, padding: 3, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: "Current:" }),
           /* @__PURE__ */ jsxRuntime.jsx(VideoThumbnail, { asset, width, staticImage: !0 })
@@ -1500,24 +2932,56 @@ function VideoPlayer({
   hlsConfig,
   ...props
 }) {
-  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = React.useRef(null), {
-    src: videoSrc,
-    thumbnail: thumbnailSrc,
-    error
-  } = React.useMemo(() => {
+  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = React.useRef(null), [error, setError] = React.useState(), playbackId = React.useMemo(() => {
     try {
-      const thumbnail = getPosterSrc({ asset, client, width: thumbnailWidth }), src = asset?.playbackId && getVideoSrc({ client, asset });
-      return src ? { src, thumbnail } : { error: new TypeError("Asset has no playback ID") };
-    } catch (error2) {
-      return { error: error2 };
+      return getPlaybackId(asset, ["public", "signed", "drm"]);
+    } catch {
+      setError(new TypeError("Asset has no playback ID"));
+      return;
+    }
+  }, [asset]), 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(() => {
+  ), [asset, client, thumbnailWidth]), signedToken = React.useMemo(() => {
     try {
-      return new URL(videoSrc).searchParams.get("token");
+      return new URL(src).searchParams.get("token");
     } catch {
-      return !1;
+      return;
     }
-  }, [videoSrc]), [width, height] = (asset?.data?.aspect_ratio ?? "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
+  }, [src]), drmToken = React.useMemo(() => {
+    if (playbackId && muxPlaybackId2?.policy === "drm")
+      return tryWithSuspend(
+        () => generateJwt(client, playbackId, "d"),
+        (e) => {
+          setError(e);
+        }
+      );
+  }, [client, muxPlaybackId2?.policy, playbackId]), tokens = React.useMemo(() => {
+    try {
+      const partialTokens = {
+        playback: void 0,
+        thumbnail: void 0,
+        storyboard: void 0,
+        drm: void 0
+      };
+      return signedToken && (partialTokens.playback = signedToken, partialTokens.thumbnail = signedToken, partialTokens.storyboard = signedToken), drmToken && (partialTokens.drm = drmToken), { ...partialTokens };
+    } catch {
+      return;
+    }
+  }, [signedToken, drmToken]), [width, height] = (asset?.data?.aspect_ratio ?? "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
   let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
   return isAudio && (aspectRatio = props.forceAspectRatio ? (
     // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
@@ -1533,7 +2997,7 @@ function VideoPlayer({
           ...isAudio && { display: "flex", alignItems: "flex-end" }
         },
         children: [
-          videoSrc && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          src && poster && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             isAudio && /* @__PURE__ */ jsxRuntime.jsx(
               AudioIcon,
               {
@@ -1548,34 +3012,36 @@ function VideoPlayer({
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              MuxPlayer__default.default,
-              {
-                poster: isAudio ? void 0 : thumbnailSrc,
-                ref: muxPlayer,
-                ...props,
-                playsInline: !0,
-                playbackId: asset.playbackId,
-                tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
-                preload: "metadata",
-                crossOrigin: "anonymous",
-                metadata: {
-                  player_name: "Sanity Admin Dashboard",
-                  player_version: "2.13.0",
-                  page_type: "Preview Player"
-                },
-                audio: isAudio,
-                _hlsConfig: hlsConfig,
-                style: {
-                  ...!isAudio && { height: "100%" },
-                  width: "100%",
-                  display: "block",
-                  objectFit: "contain",
-                  ...isAudio && { alignSelf: "end" }
+            /* @__PURE__ */ jsxRuntime.jsxs(React.Suspense, { fallback: null, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MuxPlayer__default.default,
+                {
+                  poster: isAudio ? void 0 : poster,
+                  ref: muxPlayer,
+                  ...props,
+                  playsInline: !0,
+                  playbackId,
+                  tokens,
+                  preload: "metadata",
+                  crossOrigin: "anonymous",
+                  metadata: {
+                    player_name: "Sanity Admin Dashboard",
+                    player_version: "2.15.0",
+                    page_type: "Preview Player"
+                  },
+                  audio: isAudio,
+                  _hlsConfig: hlsConfig,
+                  style: {
+                    ...!isAudio && { height: "100%" },
+                    width: "100%",
+                    display: "block",
+                    objectFit: "contain",
+                    ...isAudio && { alignSelf: "end" }
+                  }
                 }
-              }
-            ),
-            children
+              ),
+              children
+            ] })
           ] }),
           error ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -1596,7 +3062,8 @@ function VideoPlayer({
         ]
       }
     ),
-    dialogState === "edit-thumbnail" && /* @__PURE__ */ jsxRuntime.jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime })
+    dialogState === "edit-thumbnail" && /* @__PURE__ */ jsxRuntime.jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime }),
+    dialogState === "edit-captions" && /* @__PURE__ */ jsxRuntime.jsx(CaptionsDialog, { asset })
   ] });
 }
 function assetIsAudio(asset) {
@@ -1866,9 +3333,11 @@ 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
+    max_stored_frame_rate: doc.data?.max_stored_frame_rate,
+    text_tracks: doc.data?.tracks?.filter((track) => track.type === "text") || []
   };
 }
 function useVideoDetails(props) {
@@ -2060,7 +3529,20 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
                   minHeight: containerHeight
                 } : void 0,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 4, flex: 1, sizing: "border", children: /* @__PURE__ */ jsxRuntime.jsx(VideoPlayer, { asset: props.asset, autoPlay: props.asset.autoPlay || !1 }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 4, flex: 1, sizing: "border", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(VideoPlayer, { asset: props.asset, autoPlay: props.asset.autoPlay || !1 }),
+                    tab === "details" && /* @__PURE__ */ jsxRuntime.jsx(
+                      TextTracksManager,
+                      {
+                        asset: props.asset,
+                        iconOnly: !0,
+                        collapseTracks: !0,
+                        tracks: displayInfo?.text_tracks || props.asset.data?.tracks?.filter(
+                          (track) => track.type === "text"
+                        ) || []
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 4, flex: 1, sizing: "border", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(ui.TabList, { space: 2, children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2154,14 +3636,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
                             ),
                             /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { text: `Mux ID: 
 ${displayInfo.id}`, icon: icons.TagIcon, size: 2 }),
-                            displayInfo?.playbackId && /* @__PURE__ */ jsxRuntime.jsx(
-                              IconInfo,
-                              {
-                                text: `Playback ID: ${displayInfo.playbackId}`,
-                                icon: icons.TagIcon,
-                                size: 2
-                              }
-                            )
+                            /* @__PURE__ */ jsxRuntime.jsx(PlaybackIds, { playback_ids: displayInfo.playback_ids })
                           ] })
                         ] })
                       }
@@ -2184,6 +3659,25 @@ ${displayInfo.id}`, icon: icons.TagIcon, size: 2 }),
       ]
     }
   );
+}, PlaybackIds = ({ playback_ids }) => playback_ids ? playback_ids.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+  IconInfo,
+  {
+    text: `Playback ID [${policyToText(entry.policy)}]: ${entry.id}`,
+    icon: icons.TagIcon,
+    size: 2
+  },
+  entry.id
+)) : /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { text: "No Playback ID", icon: icons.TagIcon, size: 2 }), policyToText = (policy) => {
+  switch (policy) {
+    case "drm":
+      return "DRM";
+    case "signed":
+      return "Signed";
+    case "public":
+      return "Public";
+    default:
+      return policy;
+  }
 }, VideoMetadata = (props) => {
   if (!props.asset)
     return null;
@@ -2277,10 +3771,12 @@ function VideoInBrowser({
   onEdit,
   asset
 }) {
-  const [renderVideo, setRenderVideo] = React.useState(!1), select = React__default.default.useCallback(() => onSelect?.(asset), [onSelect, asset]), edit = React__default.default.useCallback(() => onEdit?.(asset), [onEdit, asset]);
+  const [renderVideo, setRenderVideo] = React.useState(!1), select = React__default.default.useCallback(() => onSelect?.(asset), [onSelect, asset]), edit = React__default.default.useCallback(() => onEdit?.(asset), [onEdit, asset]), { hasShownWarning } = useDrmPlaybackWarningContext();
   if (!asset)
     return null;
-  const playbackPolicy = getPlaybackPolicy(asset);
+  const playbackPolicy = getPlaybackPolicy(asset), onClickPlay = () => {
+    playbackPolicy?.policy === "drm" && !hasShownWarning ? setRenderVideo("pre-render-warn") : setRenderVideo("render-video");
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Card,
     {
@@ -2292,7 +3788,7 @@ function VideoInBrowser({
         position: "relative"
       },
       children: [
-        playbackPolicy === "signed" && /* @__PURE__ */ jsxRuntime.jsx(
+        playbackPolicy?.policy === "signed" && /* @__PURE__ */ jsxRuntime.jsx(
           ui.Tooltip,
           {
             animate: !0,
@@ -2309,7 +3805,7 @@ function VideoInBrowser({
                   position: "absolute",
                   left: "1em",
                   top: "1em",
-                  zIndex: 10
+                  zIndex: 11
                 },
                 padding: 2,
                 border: !0,
@@ -2318,6 +3814,32 @@ function VideoInBrowser({
             )
           }
         ),
+        playbackPolicy?.policy === "drm" && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
+          {
+            animate: !0,
+            content: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 2, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { icon: icons.LockIcon, text: "DRM playback policy", size: 2 }) }),
+            placement: "right",
+            fallbackPlacements: ["top", "bottom"],
+            portal: !0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Card,
+              {
+                tone: "caution",
+                style: {
+                  borderRadius: "0.25rem",
+                  position: "absolute",
+                  left: "1em",
+                  top: "1em",
+                  zIndex: 11
+                },
+                padding: 2,
+                border: !0,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, weight: "semibold", style: { color: "var(--card-icon-color)" }, children: "DRM" })
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(
           ui.Stack,
           {
@@ -2327,7 +3849,15 @@ function VideoInBrowser({
               gridTemplateRows: "min-content min-content 1fr"
             },
             children: [
-              renderVideo ? /* @__PURE__ */ jsxRuntime.jsx(VideoPlayer, { asset, autoPlay: !0, forceAspectRatio: THUMBNAIL_ASPECT_RATIO }) : /* @__PURE__ */ jsxRuntime.jsxs(PlayButton, { onClick: () => setRenderVideo(!0), children: [
+              renderVideo === "pre-render-warn" && /* @__PURE__ */ jsxRuntime.jsx(
+                DRMWarningDialog,
+                {
+                  onClose: () => {
+                    setRenderVideo("render-video");
+                  }
+                }
+              ),
+              renderVideo === "render-video" ? /* @__PURE__ */ jsxRuntime.jsx(VideoPlayer, { asset, autoPlay: !0, forceAspectRatio: THUMBNAIL_ASPECT_RATIO }) : /* @__PURE__ */ jsxRuntime.jsxs(PlayButton, { onClick: onClickPlay, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { "data-play": !0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.PlayIcon, {}) }),
                 assetIsAudio(asset) ? /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
@@ -2389,12 +3919,12 @@ function VideoInBrowser({
     }
   );
 }
-function VideosBrowser({ onSelect }) {
-  const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = React.useState(null), freshEditedAsset = React.useMemo(
+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]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  ), pageStart = page * pageLimit, pageEnd = pageStart + pageLimit;
+  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: [
@@ -2407,7 +3937,8 @@ function VideosBrowser({ onSelect }) {
               placeholder: "Search videos"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectSortOptions, { setSort, sort })
+          /* @__PURE__ */ jsxRuntime.jsx(SelectSortOptions, { setSort, sort }),
+          /* @__PURE__ */ jsxRuntime.jsx(PageSelector, { page, setPage, total: pageTotal })
         ] }),
         (onSelect ? "input" : "tool") == "tool" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(ImportVideosFromMux, {}),
@@ -2430,7 +3961,7 @@ function VideosBrowser({ onSelect }) {
             style: {
               gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))"
             },
-            children: assets.map((asset) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: assets.slice(pageStart, pageEnd).map((asset) => /* @__PURE__ */ jsxRuntime.jsx(
               VideoInBrowser,
               {
                 asset,
@@ -2448,7 +3979,7 @@ function VideosBrowser({ onSelect }) {
     freshEditedAsset && /* @__PURE__ */ jsxRuntime.jsx(VideoDetails, { closeDialog: () => setEditedAsset(null), asset: freshEditedAsset })
   ] });
 }
-const StudioTool = () => /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, {}), DEFAULT_TOOL_CONFIG = {
+const StudioTool = (config) => /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, { config }), DEFAULT_TOOL_CONFIG = {
   icon: ToolIcon,
   title: "Videos"
 };
@@ -2806,6 +4337,9 @@ function isValidUrl(url) {
     return !1;
   }
 }
+function isServerError(error) {
+  return "statusCode" in error && typeof error.statusCode == "number" && 500 <= error.statusCode && error.statusCode <= 600;
+}
 function extractDroppedFiles(dataTransfer) {
   const files = Array.from(dataTransfer.files || []), items = Array.from(dataTransfer.items || []);
   return files && files.length > 0 ? Promise.resolve(files) : normalizeItems(items).then((arr) => arr.flat());
@@ -2847,7 +4381,12 @@ function walk(entry) {
   }
   return Promise.resolve([]);
 }
-function SelectAssets({ asset: selectedAsset, onChange, setDialogState }) {
+function SelectAssets({
+  asset: selectedAsset,
+  onChange,
+  setDialogState,
+  config
+}) {
   const handleSelect = React.useCallback(
     (chosenAsset) => {
       chosenAsset?._id || onChange(sanity.PatchEvent.from([sanity.unset(["asset"])])), chosenAsset._id !== selectedAsset?._id && onChange(
@@ -2859,7 +4398,7 @@ function SelectAssets({ asset: selectedAsset, onChange, setDialogState }) {
     },
     [onChange, setDialogState, selectedAsset]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, { onSelect: handleSelect });
+  return /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, { onSelect: handleSelect, config });
 }
 const StyledDialog = styledComponents.styled(ui.Dialog)`
   > div[data-ui='DialogCard'] > div[data-ui='Card'] {
@@ -2869,7 +4408,8 @@ const StyledDialog = styledComponents.styled(ui.Dialog)`
 function InputBrowser({
   setDialogState,
   asset,
-  onChange
+  onChange,
+  config
 }) {
   const id = `InputBrowser${React.useId()}`, handleClose = React.useCallback(() => setDialogState(!1), [setDialogState]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2880,7 +4420,15 @@ function InputBrowser({
       id,
       onClose: handleClose,
       width: 2,
-      children: /* @__PURE__ */ jsxRuntime.jsx(SelectAssets, { asset, onChange, setDialogState })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SelectAssets,
+        {
+          config,
+          asset,
+          onChange,
+          setDialogState
+        }
+      )
     }
   );
 }
@@ -3096,7 +4644,7 @@ const FileButton = styledComponents.styled(ui.MenuItem)(({ theme }) => {
   color: white;
 `, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 function PlayerActionsMenu(props) {
-  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = React.useState(!1), [menuElement, setMenuRef] = React.useState(null), isSigned = React.useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
+  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = React.useState(!1), [menuElement, setMenuRef] = React.useState(null), isSigned = React.useMemo(() => getPlaybackPolicy(asset)?.policy === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
   return React.useEffect(() => {
     open && dialogState && setOpen(!1);
   }, [dialogState, open]), ui.useClickOutsideEvent(
@@ -3138,14 +4686,24 @@ function PlayerActionsMenu(props) {
               onClick: () => setDialogState("select-video")
             }
           ),
-          isVideoAsset(asset) && /* @__PURE__ */ jsxRuntime.jsx(
-            ui.MenuItem,
-            {
-              icon: icons.ImageIcon,
-              text: "Thumbnail",
-              onClick: () => setDialogState("edit-thumbnail")
-            }
-          ),
+          isVideoAsset(asset) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.MenuItem,
+              {
+                icon: icons.ImageIcon,
+                text: "Thumbnail",
+                onClick: () => setDialogState("edit-thumbnail")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.MenuItem,
+              {
+                icon: icons.TranslateIcon,
+                text: "Captions",
+                onClick: () => setDialogState("edit-captions")
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}),
           hasConfigAccess && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -3187,47 +4745,90 @@ function PlayerActionsMenu(props) {
   ] });
 }
 var PlayerActionsMenu$1 = React.memo(PlayerActionsMenu);
-function formatBytes(bytes, si = !1, dp = 1) {
-  const thresh = si ? 1e3 : 1024;
-  if (Math.abs(bytes) < thresh)
-    return bytes + " B";
-  const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
-  let u2 = -1;
-  const r = 10 ** dp;
-  do
-    bytes /= thresh, ++u2;
-  while (Math.round(Math.abs(bytes) * r) / r >= thresh && u2 < units.length - 1);
-  return bytes.toFixed(dp) + " " + units[u2];
+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
+  };
 }
-const SUPPORTED_MUX_LANGUAGES = [
-  { label: "English", code: "en", state: "Stable" },
-  { label: "Spanish", code: "es", state: "Stable" },
-  { label: "Italian", code: "it", state: "Stable" },
-  { label: "Portuguese", code: "pt", state: "Stable" },
-  { label: "German", code: "de", state: "Stable" },
-  { label: "French", code: "fr", state: "Stable" },
-  { label: "Polish", code: "pl", state: "Beta" },
-  { label: "Russian", code: "ru", state: "Beta" },
-  { label: "Dutch", code: "nl", state: "Beta" },
-  { label: "Catalan", code: "ca", state: "Beta" },
-  { label: "Turkish", code: "tr", state: "Beta" },
-  { label: "Swedish", code: "sv", state: "Beta" },
-  { label: "Ukrainian", code: "uk", state: "Beta" },
-  { label: "Norwegian", code: "no", state: "Beta" },
-  { label: "Finnish", code: "fi", state: "Beta" },
-  { label: "Slovak", code: "sk", state: "Beta" },
-  { label: "Greek", code: "el", state: "Beta" },
-  { label: "Czech", code: "cs", state: "Beta" },
-  { label: "Croatian", code: "hr", state: "Beta" },
-  { label: "Danish", code: "da", state: "Beta" },
-  { label: "Romanian", code: "ro", state: "Beta" },
-  { label: "Bulgarian", code: "bg", state: "Beta" }
-];
-function isCustomTextTrack(track) {
-  return track.type !== "autogenerated";
+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 isAutogeneratedTrack(track) {
-  return track.type === "autogenerated";
+function formatBytes(bytes, si = !1, dp = 1) {
+  const thresh = si ? 1e3 : 1024;
+  if (Math.abs(bytes) < thresh)
+    return bytes + " B";
+  const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  let u2 = -1;
+  const r = 10 ** dp;
+  do
+    bytes /= thresh, ++u2;
+  while (Math.round(Math.abs(bytes) * r) / r >= thresh && u2 < units.length - 1);
+  return bytes.toFixed(dp) + " " + units[u2];
 }
 const ALL_LANGUAGE_CODES = LanguagesList__default.default.getAllCodes().map((code) => ({
   value: code,
@@ -3306,13 +4907,14 @@ function PlaybackPolicyOption({
   optionName,
   description,
   dispatch,
-  action
+  action,
+  disabled
 }) {
   const [scale, setScale] = React.useState(1), boxStyle = {
     outline: "0.01rem solid grey",
     transform: `scale(${scale})`,
     transition: "transform 0.1s ease-in-out",
-    cursor: "pointer",
+    cursor: disabled ? "not-allowed" : "pointer",
     borderRadius: "0.25rem"
   }, triggerAnimation = () => {
     setScale(0.98), setTimeout(() => {
@@ -3320,15 +4922,24 @@ function PlaybackPolicyOption({
     }, 100);
   };
   return /* @__PURE__ */ jsxRuntime.jsx("label", { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, padding: 3, style: boxStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { id, required: !0, checked, onChange: () => {
-      triggerAnimation(), dispatch({
-        action,
-        value: !checked
-      });
-    } }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Checkbox,
+      {
+        id,
+        required: !0,
+        checked,
+        onChange: () => {
+          action && (triggerAnimation(), dispatch({
+            action,
+            value: !checked
+          }));
+        },
+        disabled
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { gap: 3, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, weight: "bold", children: optionName }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: description })
+      typeof description == "string" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: description }) : description
     ] })
   ] }) });
 }
@@ -3353,7 +4964,7 @@ function PlaybackPolicy({
   secrets,
   dispatch
 }) {
-  const noPolicySelected = !(config.public_policy || config.signed_policy);
+  const noPolicySelected = !(config.public_policy || config.signed_policy || config.drm_policy), drmPolicyDisabled = !secrets.drmConfigId;
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { gap: 3, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "bold", children: "Advanced Playback Policies" }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3362,7 +4973,10 @@ function PlaybackPolicy({
         id: `${id}--public`,
         checked: config.public_policy,
         optionName: "Public",
-        description: "Playback IDs are accessible by constructing an HLS URL like https://stream.mux.com/{PLAYBACK_ID}",
+        description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: "Playback IDs are accessible by constructing an HLS URL like" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Code, { children: "https://stream.mux.com/{PLAYBACK_ID}" })
+        ] }),
         dispatch,
         action: "public_policy"
       }
@@ -3373,24 +4987,146 @@ function PlaybackPolicy({
         id: `${id}--signed`,
         checked: config.signed_policy,
         optionName: "Signed",
-        description: `Playback IDs should be used with tokens https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}. 
-                // See Secure video playback for details about creating tokens.`,
+        description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: "Playback IDs should be used with tokens" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Code, { children: "https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, muted: !0, children: [
+            "See",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://www.mux.com/docs/guides/secure-video-playback",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "Secure video playback"
+              }
+            ),
+            " ",
+            "for details about creating tokens."
+          ] })
+        ] }),
         dispatch,
         action: "signed_policy"
       }
     ),
+    drmPolicyDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
+      PlaybackPolicyOption,
+      {
+        id: `${id}--drm`,
+        checked: !1,
+        optionName: "DRM - Disabled",
+        description: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, muted: !0, children: [
+          "To enable DRM add your DRM Configuration Id to your plugin configuration in the API Credentials view.",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: "https://www.mux.com/support/human",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: "Contact us"
+            }
+          ),
+          " ",
+          "to get started using DRM."
+        ] }) }),
+        dispatch,
+        disabled: !0
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      PlaybackPolicyOption,
+      {
+        id: `${id}--drm`,
+        checked: config.drm_policy,
+        optionName: "DRM",
+        description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: "Playback IDs should be used with tokens as with Signed playback, but require extra configuration." }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Code, { children: "https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, muted: !0, children: [
+            "See",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://www.mux.com/docs/guides/protect-videos-with-drm#play-drm-protected-videos",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "Protect videos with DRM"
+              }
+            ),
+            " ",
+            "for details about configuring your player for DRM playback and",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://www.mux.com/docs/guides/secure-video-playback",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "Secure video playback"
+              }
+            ),
+            " ",
+            "for details about creating tokens."
+          ] })
+        ] }),
+        dispatch,
+        action: "drm_policy"
+      }
+    ),
     noPolicySelected && /* @__PURE__ */ jsxRuntime.jsx(PlaybackPolicyWarning, {})
   ] });
 }
-const VIDEO_QUALITY_LEVELS = [
-  { value: "basic", label: "Basic" },
-  { value: "plus", label: "Plus" },
-  { value: "premium", label: "Premium" }
-], RESOLUTION_TIERS = [
+const RESOLUTION_TIERS = [
   { value: "1080p", label: "1080p" },
   { value: "1440p", label: "1440p (2k)" },
   { value: "2160p", label: "2160p (4k)" }
-], ADVANCED_RESOLUTIONS = [
+], ResolutionTierSelector = ({
+  id,
+  config,
+  dispatch,
+  maxSupportedResolution
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  sanity.FormField,
+  {
+    title: "Resolution Tier",
+    description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "The maximum",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: "https://docs.mux.com/api-reference#video/operation/create-direct-upload",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "resolution_tier"
+        }
+      ),
+      " ",
+      "your asset is encoded, stored, and streamed at."
+    ] }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 3, wrap: "wrap", children: RESOLUTION_TIERS.map(({ value, label }, index) => {
+      const inputId = `${id}--type-${value}`;
+      return index > maxSupportedResolution ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Radio,
+          {
+            checked: config.max_resolution_tier === value,
+            name: "asset-resolutiontier",
+            onChange: (e) => dispatch({
+              action: "max_resolution_tier",
+              value: e.currentTarget.value
+            }),
+            value,
+            id: inputId
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: inputId, children: label })
+      ] }, value);
+    }) })
+  }
+), ADVANCED_RESOLUTIONS = [
   { value: "270p", label: "270p" },
   { value: "360p", label: "360p" },
   { value: "480p", label: "480p" },
@@ -3399,6 +5135,130 @@ const VIDEO_QUALITY_LEVELS = [
   { value: "1080p", label: "1080p" },
   { value: "1440p", label: "1440p" },
   { value: "2160p", label: "2160p" }
+], StaticRenditionSelector = ({
+  id,
+  config,
+  dispatch
+}) => {
+  const isAdvancedMode = React.useMemo(() => config.static_renditions.filter(
+    (r) => r !== "highest" && r !== "audio-only"
+  ).length > 0, [config.static_renditions]), [renditionMode, setRenditionMode] = React.useState(
+    isAdvancedMode ? "advanced" : "standard"
+  ), toggleRendition = (rendition) => {
+    const current = config.static_renditions, hasRendition = current.includes(rendition);
+    dispatch(hasRendition ? {
+      action: "static_renditions",
+      value: current.filter((r) => r !== rendition)
+    } : {
+      action: "static_renditions",
+      value: [...current, rendition]
+    });
+  }, handleModeChange = (mode) => {
+    setRenditionMode(mode), dispatch(mode === "standard" ? {
+      action: "static_renditions",
+      value: config.static_renditions.filter((r) => r === "highest" || r === "audio-only")
+    } : {
+      action: "static_renditions",
+      value: config.static_renditions.filter((r) => r !== "highest")
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    sanity.FormField,
+    {
+      title: "Static Renditions",
+      description: "Generate downloadable MP4 or M4A files. Note: Mux will not upscale to produce MP4 renditions - renditions that would cause upscaling are skipped.",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Radio,
+              {
+                checked: renditionMode === "standard",
+                name: "rendition-mode",
+                onChange: () => handleModeChange("standard"),
+                value: "standard",
+                id: `${id}--mode-standard`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--mode-standard`, children: "Standard" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Radio,
+              {
+                checked: renditionMode === "advanced",
+                name: "rendition-mode",
+                onChange: () => handleModeChange("advanced"),
+                value: "advanced",
+                id: `${id}--mode-advanced`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--mode-advanced`, children: "Advanced" })
+          ] })
+        ] }),
+        renditionMode === "standard" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [0, 2], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Checkbox,
+              {
+                id: `${id}--highest`,
+                style: { display: "block" },
+                checked: config.static_renditions.includes("highest"),
+                onChange: () => toggleRendition("highest")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--highest`, children: "Highest Resolution (up to 4K)" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [0, 2], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Checkbox,
+              {
+                id: `${id}--audio-only-standard`,
+                style: { display: "block" },
+                checked: config.static_renditions.includes("audio-only"),
+                onChange: () => toggleRendition("audio-only")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--audio-only-standard`, children: "Audio Only (M4A)" })
+          ] })
+        ] }),
+        renditionMode === "advanced" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 1, muted: !0, children: "Select specific resolutions:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 2, wrap: "wrap", children: ADVANCED_RESOLUTIONS.map(({ value, label }) => {
+            const inputId = `${id}--resolution-${value}`;
+            return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Checkbox,
+                {
+                  id: inputId,
+                  style: { display: "block" },
+                  checked: config.static_renditions.includes(value),
+                  onChange: () => toggleRendition(value)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: inputId, size: 1, children: label })
+            ] }, value);
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [2, 2, 0, 2], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Checkbox,
+              {
+                id: `${id}--audio-only-advanced`,
+                style: { display: "block" },
+                checked: config.static_renditions.includes("audio-only"),
+                onChange: () => toggleRendition("audio-only")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--audio-only-advanced`, children: "Audio Only (M4A)" })
+          ] })
+        ] })
+      ] })
+    }
+  ) });
+}, VIDEO_QUALITY_LEVELS = [
+  { value: "basic", label: "Basic" },
+  { value: "plus", label: "Plus" },
+  { value: "premium", label: "Premium" }
 ];
 function sanitizeStaticRenditions(renditions) {
   const hasHighest = renditions.includes("highest"), hasSpecificResolutions = renditions.some((r) => r !== "highest" && r !== "audio-only");
@@ -3430,7 +5290,8 @@ function UploadConfiguration({
             max_resolution_tier: "1080p",
             text_tracks: prev.text_tracks?.filter(({ type }) => type !== "autogenerated"),
             public_policy: !0,
-            signed_policy: !1
+            signed_policy: !1,
+            drm_policy: !1
           }) : Object.assign({}, prev, {
             video_quality: action.value,
             static_renditions: sanitizeStaticRenditions(pluginConfig.static_renditions || []),
@@ -3444,6 +5305,8 @@ function UploadConfiguration({
           return Object.assign({}, prev, { [action.action]: action.value });
         case "public_policy":
           return Object.assign({}, prev, { [action.action]: action.value });
+        case "drm_policy":
+          return Object.assign({}, prev, { [action.action]: action.value });
         // Updating individual tracks
         case "track": {
           const text_tracks = [...prev.text_tracks], target_track_i = text_tracks.findIndex(({ _id: _id2 }) => _id2 === action.id);
@@ -3479,75 +5342,41 @@ function UploadConfiguration({
       static_renditions: sanitizeStaticRenditions(pluginConfig.static_renditions || []),
       signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
       public_policy: pluginConfig.defaultPublic,
+      drm_policy: pluginConfig.defaultDrm && !!secrets.drmConfigId,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks
     }
-  ), isAdvancedMode = React.useMemo(() => config.static_renditions.filter(
-    (r) => r !== "highest" && r !== "audio-only"
-  ).length > 0, [config.static_renditions]), [renditionMode, setRenditionMode] = React.useState(
-    isAdvancedMode ? "advanced" : "standard"
-  ), [videoDuration, setVideoDuration] = React.useState(null), [urlFileSize, setUrlFileSize] = React.useState(null), [isLoadingDuration, setIsLoadingDuration] = React.useState(!1), [isLoadingFileSize, setIsLoadingFileSize] = React.useState(!1), [validationError, setValidationError] = React.useState(null), [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = React.useState(!1), MAX_FILE_SIZE = pluginConfig.maxAssetFileSize, MAX_DURATION_SECONDS = pluginConfig.maxAssetDuration;
+  ), [validationError, setValidationError] = React.useState(null), MAX_FILE_SIZE = pluginConfig.maxAssetFileSize, MAX_DURATION_SECONDS = pluginConfig.maxAssetDuration, { fileSize, isLoadingFileSize, canSkipFileSizeValidation } = useFetchFileSize(
+    stagedUpload,
+    MAX_FILE_SIZE
+  ), { videoAssetMetadata, setVideoAssetMetadata, isLoadingMetadata } = useMediaMetadata(stagedUpload);
   React.useEffect(() => {
-    setVideoDuration(null), setUrlFileSize(null), setIsLoadingDuration(!1), setIsLoadingFileSize(!1), setValidationError(null), setCanSkipFileSizeValidation(!1);
-    let videoElement = null, currentVideoSrc = null;
-    const cleanupVideo = (shouldRevokeUrl) => {
-      videoElement && (videoElement.onloadedmetadata = null, videoElement.onerror = null, videoElement.src = "", videoElement.load(), videoElement = null), shouldRevokeUrl && currentVideoSrc?.startsWith("blob:") && URL.revokeObjectURL(currentVideoSrc), currentVideoSrc = null;
-    }, validateDuration = (videoSrc, shouldRevokeUrl = !1) => {
-      !MAX_DURATION_SECONDS || MAX_DURATION_SECONDS <= 0 || (setIsLoadingDuration(!0), videoElement = document.createElement("video"), videoElement.preload = "metadata", currentVideoSrc = videoSrc, videoElement.onloadedmetadata = () => {
-        const duration = videoElement.duration;
-        setVideoDuration(duration), setIsLoadingDuration(!1), duration > MAX_DURATION_SECONDS && setValidationError(
-          `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`
-        ), cleanupVideo(shouldRevokeUrl);
-      }, videoElement.onerror = () => {
-        setIsLoadingDuration(!1), console.warn("Could not read video metadata for validation"), cleanupVideo(shouldRevokeUrl);
-      }, videoElement.src = videoSrc);
-    }, validateFileSize = (size) => MAX_FILE_SIZE === void 0 || size <= MAX_FILE_SIZE ? !0 : (setValidationError(
+    fileSize && setVideoAssetMetadata((old) => ({ ...old, size: fileSize }));
+  }, [fileSize, setVideoAssetMetadata]), React.useEffect(() => {
+    const validateDuration = (duration) => MAX_DURATION_SECONDS && duration > MAX_DURATION_SECONDS ? (setValidationError(
+      `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`
+    ), !1) : !0, validateFileSize = (size) => MAX_FILE_SIZE === void 0 || size <= MAX_FILE_SIZE ? !0 : (setValidationError(
       `File size (${formatBytes(size)}) exceeds maximum allowed size of ${formatBytes(MAX_FILE_SIZE)}`
-    ), !1);
-    if (stagedUpload.type === "file") {
-      const file = stagedUpload.files[0];
-      validateFileSize(file.size) && validateDuration(URL.createObjectURL(file), !0);
-    }
-    if (stagedUpload.type === "url") {
-      const url = stagedUpload.url;
-      (async () => {
-        setIsLoadingFileSize(!0);
-        try {
-          const contentLength = (await fetch(url, { method: "HEAD" })).headers.get("content-length"), fileSize = contentLength ? parseInt(contentLength, 10) : null;
-          setIsLoadingFileSize(!1), fileSize && setUrlFileSize(fileSize);
-          const shouldValidateDuration = MAX_FILE_SIZE === void 0 || fileSize === null || validateFileSize(fileSize);
-          fileSize === null && MAX_FILE_SIZE !== void 0 && setCanSkipFileSizeValidation(!0), shouldValidateDuration && validateDuration(url);
-        } catch {
-          setIsLoadingFileSize(!1), console.warn("Could not validate file size from URL"), setCanSkipFileSizeValidation(!0), validateDuration(url);
-        }
-      })();
-    }
-    return () => {
-      cleanupVideo(!0);
-    };
-  }, [stagedUpload, MAX_FILE_SIZE, MAX_DURATION_SECONDS]);
-  const toggleRendition = (rendition) => {
-    const current = config.static_renditions, hasRendition = current.includes(rendition);
-    dispatch(hasRendition ? {
-      action: "static_renditions",
-      value: current.filter((r) => r !== rendition)
-    } : {
-      action: "static_renditions",
-      value: [...current, rendition]
-    });
-  }, handleModeChange = (mode) => {
-    setRenditionMode(mode), dispatch(mode === "standard" ? {
-      action: "static_renditions",
-      value: config.static_renditions.filter((r) => r === "highest" || r === "audio-only")
-    } : {
-      action: "static_renditions",
-      value: config.static_renditions.filter((r) => r !== "highest")
-    });
-  }, { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
+    ), !1), validateDrmAvailability = (isAudioOnly) => config.drm_policy && isAudioOnly ? (setValidationError("Audio-only asset cannot be DRM protected"), !1) : !0;
+    let valid = !0;
+    videoAssetMetadata?.size && (valid = valid && (canSkipFileSizeValidation || validateFileSize(videoAssetMetadata.size))), videoAssetMetadata?.duration && (valid = valid && validateDuration(videoAssetMetadata.duration)), videoAssetMetadata?.isAudioOnly != null && (valid = valid && validateDrmAvailability(videoAssetMetadata.isAudioOnly)), valid && setValidationError(null);
+  }, [
+    MAX_FILE_SIZE,
+    MAX_DURATION_SECONDS,
+    canSkipFileSizeValidation,
+    videoAssetMetadata?.duration,
+    videoAssetMetadata?.size,
+    videoAssetMetadata?.height,
+    videoAssetMetadata?.width,
+    videoAssetMetadata,
+    config.drm_policy,
+    validationError
+  ]);
+  const { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
   if (React.useEffect(() => {
-    skipConfig && startUpload(formatUploadConfig(config));
+    skipConfig && startUpload(formatUploadConfig(config, secrets));
   }, []), skipConfig) return null;
-  const basicConfig = config.video_quality !== "plus" && config.video_quality !== "premium", maxSupportedResolution = RESOLUTION_TIERS.findIndex(
+  const basicConfig = config.video_quality !== "plus" && config.video_quality !== "premium", playbackPolicySelected = config.public_policy || config.signed_policy || config.drm_policy, maxSupportedResolution = RESOLUTION_TIERS.findIndex(
     (rt) => rt.value === pluginConfig.max_resolution_tier
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3581,12 +5410,12 @@ function UploadConfiguration({
               /* @__PURE__ */ jsxRuntime.jsx(icons.DocumentVideoIcon, { fontSize: "2em" }),
               /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { textOverflow: "ellipsis", as: "h2", size: 3, children: stagedUpload.type === "file" ? stagedUpload.files[0].name : stagedUpload.url }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", size: 1, muted: !0, children: stagedUpload.type === "file" ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})` : urlFileSize ? `File From URL (${formatBytes(urlFileSize)})` : isLoadingFileSize ? "File From URL (Loading size...)" : "File From URL (Unknown size)" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", size: 1, muted: !0, children: stagedUpload.type === "file" ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})` : videoAssetMetadata?.size ? `File From URL (${formatBytes(videoAssetMetadata.size)})` : isLoadingFileSize ? "File From URL (Loading size...)" : "File From URL (Unknown size)" }),
                 stagedUpload.type === "file" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 1, children: [
-                  isLoadingDuration && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", size: 1, muted: !0, children: "Reading video metadata..." }),
-                  videoDuration !== null && !validationError && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { as: "p", size: 1, muted: !0, children: [
+                  isLoadingMetadata && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", size: 1, muted: !0, children: "Reading video metadata..." }),
+                  videoAssetMetadata?.duration && !validationError && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { as: "p", size: 1, muted: !0, children: [
                     "Duration: ",
-                    formatSeconds(videoDuration)
+                    formatSeconds(videoAssetMetadata.duration)
                   ] })
                 ] })
               ] })
@@ -3632,160 +5461,37 @@ function UploadConfiguration({
               }) })
             }
           ),
-          !basicConfig && maxSupportedResolution > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            sanity.FormField,
-            {
-              title: "Resolution Tier",
-              description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                "The maximum",
-                " ",
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "a",
-                  {
-                    href: "https://docs.mux.com/api-reference#video/operation/create-direct-upload",
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    children: "resolution_tier"
-                  }
-                ),
-                " ",
-                "your asset is encoded, stored, and streamed at."
-              ] }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 3, wrap: "wrap", children: RESOLUTION_TIERS.map(({ value, label }, index) => {
-                const inputId = `${id}--type-${value}`;
-                return index > maxSupportedResolution ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Radio,
-                    {
-                      checked: config.max_resolution_tier === value,
-                      name: "asset-resolutiontier",
-                      onChange: (e) => dispatch({
-                        action: "max_resolution_tier",
-                        value: e.currentTarget.value
-                      }),
-                      value,
-                      id: inputId
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: inputId, children: label })
-                ] }, value);
-              }) })
-            }
-          ),
           !basicConfig && /* @__PURE__ */ jsxRuntime.jsx(sanity.FormField, { title: "Additional Configuration", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
-              sanity.FormField,
+            maxSupportedResolution > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              ResolutionTierSelector,
               {
-                title: "Static Renditions",
-                description: "Generate downloadable MP4 or M4A files. Note: Mux will not upscale to produce MP4 renditions - renditions that would cause upscaling are skipped.",
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Radio,
-                        {
-                          checked: renditionMode === "standard",
-                          name: "rendition-mode",
-                          onChange: () => handleModeChange("standard"),
-                          value: "standard",
-                          id: `${id}--mode-standard`
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--mode-standard`, children: "Standard" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Radio,
-                        {
-                          checked: renditionMode === "advanced",
-                          name: "rendition-mode",
-                          onChange: () => handleModeChange("advanced"),
-                          value: "advanced",
-                          id: `${id}--mode-advanced`
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--mode-advanced`, children: "Advanced" })
-                    ] })
-                  ] }),
-                  renditionMode === "standard" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [0, 2], children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Checkbox,
-                        {
-                          id: `${id}--highest`,
-                          style: { display: "block" },
-                          checked: config.static_renditions.includes("highest"),
-                          onChange: () => toggleRendition("highest")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--highest`, children: "Highest Resolution (up to 4K)" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [0, 2], children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Checkbox,
-                        {
-                          id: `${id}--audio-only-standard`,
-                          style: { display: "block" },
-                          checked: config.static_renditions.includes("audio-only"),
-                          onChange: () => toggleRendition("audio-only")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--audio-only-standard`, children: "Audio Only (M4A)" })
-                    ] })
-                  ] }),
-                  renditionMode === "advanced" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 1, muted: !0, children: "Select specific resolutions:" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 2, wrap: "wrap", children: ADVANCED_RESOLUTIONS.map(({ value, label }) => {
-                      const inputId = `${id}--resolution-${value}`;
-                      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          ui.Checkbox,
-                          {
-                            id: inputId,
-                            style: { display: "block" },
-                            checked: config.static_renditions.includes(value),
-                            onChange: () => toggleRendition(value)
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: inputId, size: 1, children: label })
-                      ] }, value);
-                    }) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [2, 2, 0, 2], children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Checkbox,
-                        {
-                          id: `${id}--audio-only-advanced`,
-                          style: { display: "block" },
-                          checked: config.static_renditions.includes("audio-only"),
-                          onChange: () => toggleRendition("audio-only")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: `${id}--audio-only-advanced`, children: "Audio Only (M4A)" })
-                    ] })
-                  ] })
-                ] })
+                id,
+                config,
+                dispatch,
+                maxSupportedResolution
               }
-            ) })
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(StaticRenditionSelector, { id, config, dispatch }),
+            !disableTextTrackConfig && /* @__PURE__ */ jsxRuntime.jsx(
+              TextTracksEditor,
+              {
+                tracks: config.text_tracks,
+                dispatch,
+                defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
+              }
+            )
           ] }) })
         ] }),
-        !disableTextTrackConfig && !basicConfig && /* @__PURE__ */ jsxRuntime.jsx(
-          TextTracksEditor,
-          {
-            tracks: config.text_tracks,
-            dispatch,
-            defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
           ui.Button,
           {
-            disabled: !basicConfig && !config.public_policy && !config.signed_policy || validationError !== null || isLoadingDuration || isLoadingFileSize && !canSkipFileSizeValidation,
+            disabled: !basicConfig && !playbackPolicySelected || validationError !== null || isLoadingMetadata || isLoadingFileSize && !canSkipFileSizeValidation,
             icon: icons.UploadIcon,
             text: "Upload",
             tone: "positive",
             onClick: () => {
-              validationError || startUpload(formatUploadConfig(config));
+              validationError || startUpload(formatUploadConfig(config, secrets));
             }
           }
         ) })
@@ -3793,11 +5499,14 @@ function UploadConfiguration({
     }
   );
 }
-function setPlaybackPolicy(config) {
-  const playback_policy = [];
-  return config.public_policy && playback_policy.push("public"), config.signed_policy && playback_policy.push("signed"), playback_policy;
+function setAdvancedPlaybackPolicy(config, secrets) {
+  const advanced_playback_policies = [];
+  return config.public_policy && advanced_playback_policies.push({ policy: "public" }), config.signed_policy && advanced_playback_policies.push({ policy: "signed" }), config.drm_policy && (secrets.drmConfigId ? advanced_playback_policies.push({
+    policy: "drm",
+    drm_configuration_id: secrets.drmConfigId ?? void 0
+  }) : console.error("Selected DRM Policy but missing DRM Configuration Id")), advanced_playback_policies;
 }
-function formatUploadConfig(config) {
+function formatUploadConfig(config, secrets) {
   const generated_subtitles = config.text_tracks.filter(isAutogeneratedTrack).map((track) => ({
     name: track.name,
     language_code: track.language_code
@@ -3821,7 +5530,7 @@ function formatUploadConfig(config) {
       )
     ],
     static_renditions: config.static_renditions.length > 0 ? config.static_renditions.map((resolution) => ({ resolution })) : void 0,
-    playback_policy: setPlaybackPolicy(config),
+    advanced_playback_policies: setAdvancedPlaybackPolicy(config, secrets),
     max_resolution_tier: config.max_resolution_tier,
     video_quality: config.video_quality,
     normalize_audio: config.normalize_audio
@@ -3850,12 +5559,10 @@ function withFocusRing(component) {
     `;
   });
 }
-const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(ui.Card), UploadCard = React.forwardRef(
+const UploadCardWithFocusRing = withFocusRing(ui.Card), UploadCard = React.forwardRef(
   ({ children, tone, onPaste, onDrop, onDragEnter, onDragLeave, onDragOver }, forwardedRef) => {
-    const ctrlDown = React.useRef(!1), inputRef = React.useRef(null), handleKeyDown = React.useCallback((event) => {
-      (event.keyCode == ctrlKey || event.keyCode == cmdKey) && (ctrlDown.current = !0), ctrlDown.current && event.keyCode == 86 && inputRef.current.focus();
-    }, []), handleKeyUp = React.useCallback((event) => {
-      (event.keyCode == ctrlKey || event.keyCode == cmdKey) && (ctrlDown.current = !1);
+    const inputRef = React.useRef(null), handleKeyDown = React.useCallback((event) => {
+      event.target.closest("#vtt-url") || (event.ctrlKey || event.metaKey) && event.key === "v" && inputRef.current.focus();
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       UploadCardWithFocusRing,
@@ -3867,14 +5574,13 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(ui.Card
         shadow: 0,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
         onPaste,
         onDrop,
         onDragEnter,
         onDragLeave,
         onDragOver,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(HiddenInput$1, { ref: inputRef, onPaste }),
+          /* @__PURE__ */ jsxRuntime.jsx(HiddenInput$1, { ref: inputRef }),
           children
         ]
       }
@@ -4036,8 +5742,13 @@ function Uploader(props) {
         case "reset":
         case "complete":
           return uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null, INITIAL_STATE;
-        case "error":
-          return uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
+        case "error": {
+          uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null;
+          let error = action.error;
+          return isServerError(action.error) && hasPlaybackPolicy(action.settings, "drm") && (error = new Error(
+            "Unknown Error while uploading DRM protected content. Make sure your DRM configuration ID is valid and set correctly"
+          )), Object.assign({}, INITIAL_STATE, { error });
+        }
         default:
           return prev;
       }
@@ -4116,7 +5827,7 @@ function Uploader(props) {
         }
       },
       complete: () => dispatch({ action: "complete" }),
-      error: (error) => dispatch({ action: "error", error })
+      error: (error) => dispatch({ action: "error", error, settings })
     });
   }, invalidFileToast = React.useCallback(() => {
     toast.push({
@@ -4132,6 +5843,8 @@ function Uploader(props) {
       input: { type: "file", files }
     });
   }, handlePaste = (event) => {
+    if (event.target.closest("#vtt-url"))
+      return;
     event.preventDefault(), event.stopPropagation();
     const url = (event.clipboardData || window.clipboardData)?.getData("text")?.trim();
     if (!isValidUrl(url)) {
@@ -4165,11 +5878,11 @@ function Uploader(props) {
     idx > -1 && dragEnteredEls.current.splice(idx, 1), dragEnteredEls.current.length === 0 && setDragState(null);
   };
   if (state.error !== null) {
-    const error = {};
+    const error = state.error;
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, direction: "column", justify: "center", align: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 5, muted: !0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorOutlineIcon, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Something went wrong" }),
-      error instanceof Error && error.message && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: error.message }),
+      error instanceof Error && error.message && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, weight: "semibold", style: { textAlign: "center" }, children: error.message }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { text: "Upload another file", onClick: () => dispatch({ action: "reset" }) })
     ] });
   }
@@ -4254,6 +5967,7 @@ function Uploader(props) {
     props.dialogState === "select-video" && /* @__PURE__ */ jsxRuntime.jsx(
       InputBrowser,
       {
+        config: props.config,
         asset: props.asset,
         onChange: props.onChange,
         setDialogState: props.setDialogState
@@ -4500,6 +6214,7 @@ const muxVideoSchema = {
   normalize_audio: !1,
   defaultPublic: !0,
   defaultSigned: !1,
+  defaultDrm: !1,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: [],
   acceptedMimeTypes: ["video/*", "audio/*"]