sanity-plugin-mux-input 2.12.1 → 2.14.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, useCurrentUser, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ErrorOutlineIcon, InfoOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, SyncIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, UploadIcon, ImageIcon, ResetIcon, TranslateIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
-import { useTheme_v2, Stack, Flex, Box, Text, Button, Dialog, Card, TextInput, Checkbox, Code, Inline, Spinner, Heading, MenuButton, Menu, MenuItem, Tooltip, useToast, TabList, Tab, TabPanel, Label as Label$1, Grid, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
+import { ErrorOutlineIcon, InfoOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, ChevronLeftIcon, ChevronRightIcon, SyncIcon, SortIcon, UploadIcon, TranslateIcon, DownloadIcon, AddIcon, ChevronUpIcon, ChevronDownIcon, TrashIcon, EditIcon, WarningOutlineIcon, PublishIcon, DocumentIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, ImageIcon, ResetIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
+import { useTheme_v2, Stack, Flex, Box, Text, Button, Dialog, Card, TextInput, Checkbox, Code, Inline, Spinner, Heading, Label as Label$1, MenuButton, Menu, MenuItem, useToast, Autocomplete, Tooltip, TabList, Tab, TabPanel, Grid, useClickOutsideEvent, Popover, MenuDivider, Radio, rem } from "@sanity/ui";
 import React, { useState, useMemo, useCallback, useReducer, useId, memo, useRef, useEffect, createContext, useContext, isValidElement, PureComponent, createElement, forwardRef, Suspense } from "react";
 import compact from "lodash/compact.js";
 import toLower from "lodash/toLower.js";
@@ -13,6 +13,7 @@ import { defer, timer, of, Observable, concat, throwError, from, Subject } from
 import { styled, css } from "styled-components";
 import { uuid } from "@sanity/uuid";
 import { expand, concatMap, tap, switchMap, mergeMap, catchError, mergeMapTo, takeUntil } from "rxjs/operators";
+import LanguagesList from "iso-639-1";
 import MuxPlayer from "@mux/mux-player-react/lazy";
 import { IntentLink } from "sanity/router";
 import isNumber from "lodash/isNumber.js";
@@ -22,7 +23,6 @@ import useSWR from "swr";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { UpChunk } from "@mux/upchunk";
 import { isValidElementType } from "react-is";
-import LanguagesList from "iso-639-1";
 const ToolIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -567,6 +567,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 {
@@ -1104,6 +1149,46 @@ function ImportVideosFromMux() {
   if (importAssets.hasSecrets)
     return importAssets.dialogOpen ? /* @__PURE__ */ jsx(ImportVideosDialog, { ...importAssets }) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Import from Mux", onClick: importAssets.openDialog });
 }
+const PageSelector = (props) => {
+  const page = props.page, setPage = props.setPage;
+  return useEffect(() => {
+    const clamped = Math.min(props.total - 1, Math.max(0, page));
+    page !== clamped && setPage(clamped);
+  }, [page, props.total, setPage]), /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: ChevronLeftIcon,
+        mode: "bleed",
+        padding: 3,
+        style: { cursor: "pointer" },
+        disabled: page <= 0,
+        onClick: () => {
+          setPage((page2) => Math.min(props.total - 1, Math.max(0, page2 - 1)));
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(Label$1, { muted: !0, children: [
+      "Page ",
+      page + 1,
+      "/",
+      props.total
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: ChevronRightIcon,
+        mode: "bleed",
+        padding: 3,
+        style: { cursor: "pointer" },
+        disabled: page >= props.total - 1,
+        onClick: () => {
+          setPage((page2) => Math.min(props.total - 1, Math.max(0, page2 + 1)));
+        }
+      }
+    )
+  ] });
+};
 function useResyncMuxMetadata() {
   const documentStore = useDocumentStore(), client = useClient$1({
     apiVersion: SANITY_API_VERSION
@@ -1346,38 +1431,1249 @@ const SpinnerBox = () => /* @__PURE__ */ jsx(
     /* @__PURE__ */ jsx(Text, { size: (props.size || 1) + 1, muted: !0, children: /* @__PURE__ */ jsx(Icon, {}) }),
     /* @__PURE__ */ jsx(Text, { size: props.size || 1, muted: props.muted, children: props.text })
   ] });
-};
-function ResolutionIcon(props) {
-  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
-    "path",
+};
+function ResolutionIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
+    }
+  ) });
+}
+function StopWatchIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 512 512",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M232 306.667h48V176h-48v130.667z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M407.67 170.271l30.786-30.786-33.942-33.941-30.785 30.786C341.217 111.057 300.369 96 256 96 149.961 96 64 181.961 64 288s85.961 192 192 192 192-85.961 192-192c0-44.369-15.057-85.217-40.33-117.729zm-45.604 223.795C333.734 422.398 296.066 438 256 438s-77.735-15.602-106.066-43.934C121.602 365.735 106 328.066 106 288s15.602-77.735 43.934-106.066C178.265 153.602 215.934 138 256 138s77.734 15.602 106.066 43.934C390.398 210.265 406 247.934 406 288s-15.602 77.735-43.934 106.066z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M192 32h128v48H192z", fill: "currentColor" })
+      ]
+    }
+  );
+}
+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 message;
+}
+async function pollTrackStatus(options) {
+  const {
+    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"
+  };
+}
+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);
+  let downloadUrl = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`;
+  if (playbackPolicy === "signed") {
+    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);
+}
+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 isAutogeneratedTrack(track) {
+  return track.type === "autogenerated";
+}
+const LANGUAGE_OPTIONS$1 = LanguagesList.getAllCodes().map((code) => ({
+  value: code,
+  label: LanguagesList.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 = useToast(), dialogId = `AddCaptionDialog${useId()}`, [isAutogenerated, setIsAutogenerated] = useState(!1), [vttUrl, setVttUrl] = useState(""), [languageCode, setLanguageCode] = useState(""), [selectedLanguage, setSelectedLanguage] = useState(
+    null
+  ), [name2, setName] = useState(""), [isSubmitting, setIsSubmitting] = useState(!1), [selectedFile, setSelectedFile] = useState(null), fileInputRef = 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__ */ jsx(
+    Dialog,
+    {
+      id: dialogId,
+      header: "Add Caption Track",
+      onClose,
+      width: 1,
+      onClickOutside: onClose,
+      children: /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 4, children: [
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", marginBottom: 3, children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: "autogenerated-checkbox",
+                style: { display: "block" },
+                checked: isAutogenerated,
+                onChange: (e) => {
+                  setIsAutogenerated(e.currentTarget.checked), e.currentTarget.checked && setVttUrl("");
+                },
+                disabled: isSubmitting
+              }
+            ),
+            /* @__PURE__ */ jsx(Flex, { flex: 1, paddingLeft: 2, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: "autogenerated-checkbox", children: "Generate captions" }) }) })
+          ] }),
+          !isAutogenerated && /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsxs(Card, { padding: 3, marginBottom: 2, tone: "transparent", border: !0, radius: 2, children: [
+              /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", children: [
+                /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: selectedFile ? `Selected: ${selectedFile.name}` : "No file selected" }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: UploadIcon,
+                    text: "Select File",
+                    mode: "ghost",
+                    tone: "primary",
+                    fontSize: 1,
+                    padding: 2,
+                    onClick: () => fileInputRef.current?.click(),
+                    disabled: isSubmitting
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ 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__ */ jsx(Text, { size: 1, muted: !0, style: { textAlign: "center" }, children: "Or enter the VTT file URL" }),
+            /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+              /* @__PURE__ */ jsx(Label$1, { htmlFor: "vtt-url", children: "VTT File URL" }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  id: "vtt-url",
+                  placeholder: "https://example.com/subtitles.vtt",
+                  value: vttUrl,
+                  onChange: (e) => {
+                    setVttUrl(e.currentTarget.value), setSelectedFile(null);
+                  },
+                  disabled: isSubmitting
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Label$1, { htmlFor: "caption-name", children: "Audio name" }),
+          /* @__PURE__ */ jsx(
+            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: 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__ */ jsx(Card, { "data-as": "button", padding: 3, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxs(Text, { size: 2, textOverflow: "ellipsis", children: [
+                option.label,
+                " (",
+                option.value,
+                ")"
+              ] }) }),
+              disabled: isSubmitting
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Label$1, { htmlFor: "caption-language", children: "Language Code" }),
+          /* @__PURE__ */ jsx(
+            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__ */ jsxs(Flex, { gap: 2, justify: "flex-end", marginTop: 2, children: [
+          /* @__PURE__ */ jsx(Button, { text: "Cancel", mode: "ghost", onClick: onClose, disabled: isSubmitting }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              text: "Add Caption Track",
+              tone: "primary",
+              icon: isSubmitting ? /* @__PURE__ */ jsx(
+                Spinner,
+                {
+                  style: {
+                    verticalAlign: "middle",
+                    display: "inline-block",
+                    marginBottom: "-3px",
+                    width: "1em",
+                    height: "1em",
+                    marginRight: "-6px"
+                  }
+                }
+              ) : /* @__PURE__ */ jsx(UploadIcon, {}),
+              onClick: handleSubmit,
+              disabled: isSubmitting
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+const LANGUAGE_OPTIONS = LanguagesList.getAllCodes().map((code) => ({
+  value: code,
+  label: LanguagesList.getNativeName(code)
+}));
+function EditCaptionDialog({ asset, track, onUpdate, onClose }) {
+  const client = useClient(), toast = useToast(), dialogId = `EditCaptionDialog${useId()}`, isAutogenerated = track.text_source === "generated_live" || track.text_source === "generated_live_final" || track.text_source === "generated_vod", [vttUrl, setVttUrl] = useState(""), [languageCode, setLanguageCode] = useState(track.language_code || ""), [selectedLanguage, setSelectedLanguage] = 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] = useState(track.name || ""), [isSubmitting, setIsSubmitting] = useState(!1), [downloading, setDownloading] = useState(!1), [selectedFile, setSelectedFile] = useState(null), fileInputRef = useRef(null);
+  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) === "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__ */ jsx(
+    Dialog,
+    {
+      id: dialogId,
+      header: "Edit Caption Track",
+      onClose,
+      width: 1,
+      onClickOutside: onClose,
+      children: /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 4, children: [
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxs(Card, { padding: 3, marginBottom: 2, tone: "transparent", border: !0, radius: 2, children: [
+            /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", children: [
+              /* @__PURE__ */ jsx(Text, { children: getCurrentFileName() }),
+              /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+                track.status !== "errored" && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: downloading ? /* @__PURE__ */ jsx(
+                      Spinner,
+                      {
+                        style: {
+                          verticalAlign: "middle",
+                          display: "inline-block",
+                          marginTop: "-2px",
+                          width: "0.5em",
+                          height: "0.5em"
+                        }
+                      }
+                    ) : /* @__PURE__ */ jsx(DownloadIcon, {}),
+                    text: "Download",
+                    mode: "ghost",
+                    tone: "primary",
+                    fontSize: 1,
+                    padding: 2,
+                    onClick: handleDownloadCurrentFile,
+                    disabled: downloading || isSubmitting
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: UploadIcon,
+                    text: "Replace",
+                    mode: "ghost",
+                    tone: "primary",
+                    fontSize: 1,
+                    padding: 2,
+                    onClick: () => fileInputRef.current?.click(),
+                    disabled: isSubmitting
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsxs(Text, { size: 1, muted: !0, style: { marginTop: 8 }, children: [
+              "Selected: ",
+              selectedFile.name
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Label$1, { htmlFor: "vtt-url", children: "VTT File URL" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                id: "vtt-url",
+                placeholder: "https://example.com/subtitles.vtt",
+                value: vttUrl,
+                onChange: (e) => {
+                  setVttUrl(e.currentTarget.value), setSelectedFile(null);
+                },
+                disabled: isSubmitting
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "Add a URL to replace the existing VTT file with a new one" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Label$1, { htmlFor: "caption-name", children: "Audio name" }),
+          /* @__PURE__ */ jsx(
+            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: 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__ */ jsx(Card, { "data-as": "button", padding: 3, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxs(Text, { size: 2, textOverflow: "ellipsis", children: [
+                option.label,
+                " (",
+                option.value,
+                ")"
+              ] }) }),
+              disabled: isSubmitting
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Label$1, { htmlFor: "caption-language", children: "Language Code" }),
+          /* @__PURE__ */ jsx(
+            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__ */ jsxs(Flex, { gap: 2, justify: "flex-end", marginTop: 2, children: [
+          /* @__PURE__ */ jsx(Button, { text: "Cancel", mode: "ghost", onClick: onClose, disabled: isSubmitting }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              text: "Update Caption Track",
+              tone: "primary",
+              icon: isSubmitting ? /* @__PURE__ */ jsx(
+                Spinner,
+                {
+                  style: {
+                    verticalAlign: "middle",
+                    display: "inline-block",
+                    marginBottom: "-3px",
+                    width: "1em",
+                    height: "1em",
+                    marginRight: "-6px"
+                  }
+                }
+              ) : 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__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+    /* @__PURE__ */ jsx(
+      Spinner,
+      {
+        muted: !0,
+        style: {
+          width: "0.75em",
+          height: "0.75em",
+          verticalAlign: "middle",
+          display: "inline-block",
+          marginBottom: "-2px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "Processing..." })
+  ] }) : /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+    track.status !== "errored" && /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: downloadingTrackId === track.id ? /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            style: {
+              verticalAlign: "middle",
+              display: "inline-block",
+              marginTop: "-2px",
+              width: "0.5em",
+              height: "0.5em"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(DownloadIcon, {}),
+        text: iconOnly ? void 0 : "Download",
+        mode: "ghost",
+        tone: "primary",
+        fontSize: 1,
+        padding: 2,
+        onClick: () => handleDownload(track),
+        disabled: isDisabled("download"),
+        title: "Download"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(EditIcon, {}),
+        text: iconOnly ? void 0 : "Edit",
+        mode: "ghost",
+        tone: "primary",
+        fontSize: 1,
+        padding: 2,
+        disabled: isDisabled("edit"),
+        onClick: () => setTrackToEdit(track),
+        title: "Edit"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: deletingTrackId === track.id ? /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            style: {
+              verticalAlign: "middle",
+              display: "inline-block",
+              marginTop: "-2px",
+              width: "0.5em",
+              height: "0.5em"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(TrashIcon, {}),
+        text: iconOnly ? void 0 : "Delete",
+        mode: "ghost",
+        tone: "critical",
+        fontSize: 1,
+        padding: 2,
+        disabled: isDisabled("delete"),
+        onClick: () => setTrackToDelete(track),
+        title: "Delete"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(
+    Card,
     {
-      fill: "currentColor",
-      d: "M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
+      padding: 3,
+      radius: 2,
+      tone: track.status === "errored" ? "caution" : "transparent",
+      border: !0,
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", gap: 3, children: [
+        /* @__PURE__ */ jsxs(Stack, { space: 2, flex: 1, children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx(Text, { weight: "semibold", children: track.name || "Untitled" }),
+            /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+              "(",
+              getTrackSourceLabel(track),
+              ")"
+            ] }),
+            track.status === "errored" && /* @__PURE__ */ jsx(
+              ErrorOutlineIcon,
+              {
+                style: { color: "var(--card-critical-color)" },
+                "aria-label": "Error",
+                fontSize: 20
+              }
+            )
+          ] }),
+          track.language_code && /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+            "Language: ",
+            track.language_code
+          ] }),
+          track.status === "errored" && track.error && /* @__PURE__ */ jsx(Text, { size: 1, style: { color: "var(--card-critical-color)" }, children: track.error.messages?.[0] || track.error.type || "Failed to process track" })
+        ] }),
+        renderActionButtons()
+      ] })
     }
-  ) });
+  );
 }
-function StopWatchIcon(props) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "1em",
-      height: "1em",
-      viewBox: "0 0 512 512",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M232 306.667h48V176h-48v130.667z", fill: "currentColor" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M407.67 170.271l30.786-30.786-33.942-33.941-30.785 30.786C341.217 111.057 300.369 96 256 96 149.961 96 64 181.961 64 288s85.961 192 192 192 192-85.961 192-192c0-44.369-15.057-85.217-40.33-117.729zm-45.604 223.795C333.734 422.398 296.066 438 256 438s-77.735-15.602-106.066-43.934C121.602 365.735 106 328.066 106 288s15.602-77.735 43.934-106.066C178.265 153.602 215.934 138 256 138s77.734 15.602 106.066 43.934C390.398 210.265 406 247.934 406 288s-15.602 77.735-43.934 106.066z",
-            fill: "currentColor"
+function TextTracksManager({
+  asset,
+  iconOnly = !1,
+  tracks: propTracks,
+  collapseTracks = !1
+}) {
+  const client = useClient(), toast = useToast(), dialogId = `DeleteCaptionDialog${useId()}`, [downloadingTrackId, setDownloadingTrackId] = useState(null), [deletingTrackId, setDeletingTrackId] = useState(null), [addedTracks, setAddedTracks] = useState([]), [updatedTracks, setUpdatedTracks] = useState(/* @__PURE__ */ new Map()), [trackActivityOrder, setTrackActivityOrder] = useState(/* @__PURE__ */ new Map()), [autogeneratedTrackIds, setAutogeneratedTrackIds] = useState(/* @__PURE__ */ new Set()), [trackToDelete, setTrackToDelete] = useState(null), [trackToEdit, setTrackToEdit] = useState(null), [showAddDialog, setShowAddDialog] = useState(!1), [isExpanded, setIsExpanded] = useState(!1), MAX_VISIBLE_TRACKS = 4;
+  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 = 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]);
+  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]), 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;
           }
-        ),
-        /* @__PURE__ */ jsx("path", { d: "M192 32h128v48H192z", fill: "currentColor" })
-      ]
+          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__ */ jsxs(Stack, { space: 3, children: [
+      /* @__PURE__ */ jsx(Flex, { justify: "flex-end", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: AddIcon,
+          text: "Add Caption",
+          tone: "primary",
+          onClick: () => setShowAddDialog(!0)
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, tone: "transparent", border: !0, children: /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "No captions available. Add captions when uploading a video or add them manually." }) }),
+      showAddDialog && /* @__PURE__ */ 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__ */ jsxs(Stack, { space: 3, children: [
+    /* @__PURE__ */ jsx(Flex, { justify: "flex-end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: AddIcon,
+        text: "Add Caption",
+        tone: "primary",
+        onClick: () => setShowAddDialog(!0)
+      }
+    ) }),
+    displayedTracks.map((track) => /* @__PURE__ */ jsx(
+      TrackCard,
+      {
+        track,
+        iconOnly,
+        downloadingTrackId,
+        deletingTrackId,
+        trackToEdit,
+        getTrackSourceLabel,
+        handleDownload,
+        setTrackToEdit,
+        setTrackToDelete
+      },
+      track.id
+    )),
+    hasMoreTracks && /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: isExpanded ? ChevronUpIcon : ChevronDownIcon,
+        text: isExpanded ? "Show less" : `Show ${visibleTracks.length - MAX_VISIBLE_TRACKS} more`,
+        mode: "ghost",
+        tone: "primary",
+        onClick: () => setIsExpanded(!isExpanded)
+      }
+    ) }),
+    trackToDelete && /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        animate: !0,
+        id: dialogId,
+        header: "Delete track",
+        onClose: () => setTrackToDelete(null),
+        onClickOutside: () => setTrackToDelete(null),
+        width: 1,
+        children: /* @__PURE__ */ jsx(
+          Card,
+          {
+            padding: 3,
+            style: {
+              minHeight: "150px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+              /* @__PURE__ */ jsxs(Heading, { size: 2, children: [
+                'Are you sure you want to delete "',
+                trackToDelete.name || trackToDelete.language_code || "Untitled",
+                '"?'
+              ] }),
+              /* @__PURE__ */ jsx(Text, { size: 2, children: "This action is irreversible" }),
+              /* @__PURE__ */ jsx(Stack, { space: 4, marginY: 4, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  icon: deletingTrackId === trackToDelete.id ? /* @__PURE__ */ jsx(
+                    Spinner,
+                    {
+                      style: {
+                        verticalAlign: "middle",
+                        display: "inline-block",
+                        marginTop: "-2px",
+                        width: "0.5em",
+                        height: "0.5em"
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsx(TrashIcon, {}),
+                  fontSize: 2,
+                  padding: 3,
+                  text: "Delete track",
+                  tone: "critical",
+                  onClick: confirmDelete,
+                  disabled: deletingTrackId !== null
+                }
+              ) }) })
+            ] })
+          }
+        )
+      }
+    ),
+    showAddDialog && /* @__PURE__ */ jsx(
+      AddCaptionDialog,
+      {
+        asset,
+        onAdd: handleAddTrack,
+        onClose: () => setShowAddDialog(!1)
+      }
+    ),
+    trackToEdit && /* @__PURE__ */ jsx(
+      EditCaptionDialog,
+      {
+        asset,
+        track: trackToEdit,
+        onUpdate: handleUpdateTrack,
+        onClose: () => setTrackToEdit(null)
+      }
+    )
+  ] });
 }
 const DialogStateContext = createContext({
   dialogState: !1,
@@ -1395,6 +2691,10 @@ function getVideoSrc({ asset, client }) {
   }
   return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
 }
+function CaptionsDialog({ asset }) {
+  const { setDialogState } = useDialogStateContext(), dialogId = `CaptionsDialog${useId()}`;
+  return /* @__PURE__ */ jsx(Dialog, { id: dialogId, header: "Edit Captions", onClose: () => setDialogState(!1), width: 1, children: /* @__PURE__ */ jsx(Stack, { padding: 4, children: /* @__PURE__ */ jsx(TextTracksManager, { asset }) }) });
+}
 function getDevicePixelRatio(options) {
   const {
     defaultDpr = 1,
@@ -1482,10 +2782,21 @@ function EditThumbnailDialog({ asset, currentTime = 0 }) {
     }
   );
 }
+function AudioIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      style: { opacity: "0.65" },
+      d: "M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
+    }
+  ) });
+}
 function VideoPlayer({
   asset,
   thumbnailWidth = 250,
   children,
+  hlsConfig,
   ...props
 }) {
   const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), {
@@ -1511,53 +2822,81 @@ function VideoPlayer({
     // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
     props.forceAspectRatio * 1.2
   ) : AUDIO_ASPECT_RATIO), /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
-      videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          MuxPlayer,
-          {
-            poster: 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.12.1",
-              page_type: "Preview Player"
-            },
-            audio: isAudio,
-            style: {
-              height: "100%",
-              width: "100%",
-              display: "block",
-              objectFit: "contain"
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        tone: "transparent",
+        style: {
+          aspectRatio,
+          position: "relative",
+          ...isAudio && { display: "flex", alignItems: "flex-end" }
+        },
+        children: [
+          videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
+            isAudio && /* @__PURE__ */ jsx(
+              AudioIcon,
+              {
+                style: {
+                  padding: "0.5em",
+                  width: "2.2em",
+                  height: "2.2em",
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  zIndex: 1
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MuxPlayer,
+              {
+                poster: isAudio ? void 0 : thumbnailSrc,
+                ref: muxPlayer,
+                ...props,
+                playsInline: !0,
+                playbackId: asset.playbackId,
+                tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
+                preload: "metadata",
+                crossOrigin: "anonymous",
+                metadata: {
+                  player_name: "Sanity Admin Dashboard",
+                  player_version: "2.14.0",
+                  page_type: "Preview Player"
+                },
+                audio: isAudio,
+                _hlsConfig: hlsConfig,
+                style: {
+                  ...!isAudio && { height: "100%" },
+                  width: "100%",
+                  display: "block",
+                  objectFit: "contain",
+                  ...isAudio && { alignSelf: "end" }
+                }
+              }
+            ),
+            children
+          ] }),
+          error ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)"
+              },
+              children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
+                /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
+                typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
+              ] })
             }
-          }
-        ),
-        children
-      ] }),
-      error ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)"
-          },
-          children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
-            /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
-            typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
-          ] })
-        }
-      ) : null,
-      children
-    ] }),
-    dialogState === "edit-thumbnail" && /* @__PURE__ */ jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime })
+          ) : null,
+          children
+        ]
+      }
+    ),
+    dialogState === "edit-thumbnail" && /* @__PURE__ */ jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime }),
+    dialogState === "edit-captions" && /* @__PURE__ */ jsx(CaptionsDialog, { asset })
   ] });
 }
 function assetIsAudio(asset) {
@@ -1829,7 +3168,8 @@ function getVideoMetadata(doc) {
     duration: doc.data?.duration ? formatSeconds(doc.data?.duration) : void 0,
     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) {
@@ -2021,7 +3361,20 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                   minHeight: containerHeight
                 } : void 0,
                 children: [
-                  /* @__PURE__ */ jsx(Stack, { space: 4, flex: 1, sizing: "border", children: /* @__PURE__ */ jsx(VideoPlayer, { asset: props.asset, autoPlay: props.asset.autoPlay || !1 }) }),
+                  /* @__PURE__ */ jsxs(Stack, { space: 4, flex: 1, sizing: "border", children: [
+                    /* @__PURE__ */ jsx(VideoPlayer, { asset: props.asset, autoPlay: props.asset.autoPlay || !1 }),
+                    tab === "details" && /* @__PURE__ */ jsx(
+                      TextTracksManager,
+                      {
+                        asset: props.asset,
+                        iconOnly: !0,
+                        collapseTracks: !0,
+                        tracks: displayInfo?.text_tracks || props.asset.data?.tracks?.filter(
+                          (track) => track.type === "text"
+                        ) || []
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ jsxs(Stack, { space: 4, flex: 1, sizing: "border", children: [
                     /* @__PURE__ */ jsxs(TabList, { space: 2, children: [
                       /* @__PURE__ */ jsx(
@@ -2299,14 +3652,7 @@ function VideoInBrowser({
                       alignItems: "center",
                       justifyContent: "center"
                     },
-                    children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "3em", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        fill: "currentColor",
-                        style: { opacity: "0.65" },
-                        d: "M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
-                      }
-                    ) })
+                    children: /* @__PURE__ */ jsx(AudioIcon, { width: "3em", height: "3em" })
                   }
                 ) : /* @__PURE__ */ jsx(VideoThumbnail, { asset })
               ] }),
@@ -2358,10 +3704,10 @@ function VideoInBrowser({
   );
 }
 function VideosBrowser({ onSelect }) {
-  const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(
+  const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [page, setPage] = useState(0), pageLimit = 20, pageTotal = Math.floor(assets.length / pageLimit) + 1, [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(
     () => assets.find((a2) => a2._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
-  );
+  ), pageStart = page * pageLimit, pageEnd = pageStart + pageLimit;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 4, style: { minHeight: "50vh" }, children: [
       /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
@@ -2375,7 +3721,8 @@ function VideosBrowser({ onSelect }) {
               placeholder: "Search videos"
             }
           ),
-          /* @__PURE__ */ jsx(SelectSortOptions, { setSort, sort })
+          /* @__PURE__ */ jsx(SelectSortOptions, { setSort, sort }),
+          /* @__PURE__ */ jsx(PageSelector, { page, setPage, total: pageTotal, limit: pageLimit })
         ] }),
         (onSelect ? "input" : "tool") == "tool" && /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
           /* @__PURE__ */ jsx(ImportVideosFromMux, {}),
@@ -2398,7 +3745,7 @@ function VideosBrowser({ onSelect }) {
             style: {
               gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))"
             },
-            children: assets.map((asset) => /* @__PURE__ */ jsx(
+            children: assets.slice(pageStart, pageEnd).map((asset) => /* @__PURE__ */ jsx(
               VideoInBrowser,
               {
                 asset,
@@ -2931,7 +4278,7 @@ const TopControls = styled.div`
       }
     ) : null
   ] }) });
-}, Player = ({ asset, buttons, readOnly, onChange }) => {
+}, Player = ({ asset, buttons, readOnly, onChange, config }) => {
   const isLoading = useMemo(() => asset?.status === "preparing" ? "Preparing the video" : asset?.status === "waiting_for_upload" ? "Waiting for upload to start" : asset?.status === "waiting" ? "Processing upload" : !(asset?.status === "ready" || typeof asset?.status > "u"), [asset]), isPreparingStaticRenditions = useMemo(() => {
     if (asset?.data?.static_renditions?.status && asset?.data?.static_renditions?.status !== "disabled")
       return !1;
@@ -2952,7 +4299,7 @@ const TopControls = styled.div`
       text: isLoading !== !0 && isLoading || "Waiting for Mux to complete the upload",
       onCancel: readOnly ? void 0 : () => handleCancelUpload()
     }
-  ) : /* @__PURE__ */ jsxs(VideoPlayer, { asset, children: [
+  ) : /* @__PURE__ */ jsxs(VideoPlayer, { asset, hlsConfig: config?.hlsConfig, children: [
     buttons && /* @__PURE__ */ jsx(TopControls, { slot: "top-chrome", children: buttons }),
     isPreparingStaticRenditions && /* @__PURE__ */ jsx(
       Card,
@@ -3064,7 +4411,7 @@ const FileButton = styled(MenuItem)(({ theme }) => {
   color: white;
 `, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 function PlayerActionsMenu(props) {
-  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
+  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
   return useEffect(() => {
     open && dialogState && setOpen(!1);
   }, [dialogState, open]), useClickOutsideEvent(
@@ -3090,7 +4437,7 @@ function PlayerActionsMenu(props) {
           /* @__PURE__ */ jsx(
             FileInputMenuItem,
             {
-              accept: "video/*",
+              accept,
               icon: UploadIcon,
               onSelect,
               text: "Upload",
@@ -3106,14 +4453,24 @@ function PlayerActionsMenu(props) {
               onClick: () => setDialogState("select-video")
             }
           ),
-          isVideoAsset(asset) && /* @__PURE__ */ jsx(
-            MenuItem,
-            {
-              icon: ImageIcon,
-              text: "Thumbnail",
-              onClick: () => setDialogState("edit-thumbnail")
-            }
-          ),
+          isVideoAsset(asset) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                icon: ImageIcon,
+                text: "Thumbnail",
+                onClick: () => setDialogState("edit-thumbnail")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                icon: TranslateIcon,
+                text: "Captions",
+                onClick: () => setDialogState("edit-captions")
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(MenuDivider, {}),
           hasConfigAccess && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
@@ -3167,36 +4524,6 @@ function formatBytes(bytes, si = !1, dp = 1) {
   while (Math.round(Math.abs(bytes) * r) / r >= thresh && u2 < units.length - 1);
   return bytes.toFixed(dp) + " " + units[u2];
 }
-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 isAutogeneratedTrack(track) {
-  return track.type === "autogenerated";
-}
 const ALL_LANGUAGE_CODES = LanguagesList.getAllCodes().map((code) => ({
   value: code,
   label: LanguagesList.getNativeName(code)
@@ -3454,7 +4781,47 @@ function UploadConfiguration({
     (r) => r !== "highest" && r !== "audio-only"
   ).length > 0, [config.static_renditions]), [renditionMode, setRenditionMode] = useState(
     isAdvancedMode ? "advanced" : "standard"
-  ), toggleRendition = (rendition) => {
+  ), [videoDuration, setVideoDuration] = useState(null), [urlFileSize, setUrlFileSize] = useState(null), [isLoadingDuration, setIsLoadingDuration] = useState(!1), [isLoadingFileSize, setIsLoadingFileSize] = useState(!1), [validationError, setValidationError] = useState(null), [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = useState(!1), MAX_FILE_SIZE = pluginConfig.maxAssetFileSize, MAX_DURATION_SECONDS = pluginConfig.maxAssetDuration;
+  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(
+      `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",
@@ -3489,6 +4856,13 @@ function UploadConfiguration({
       header: "Configure Mux Upload",
       onClose,
       children: /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 2, children: [
+        validationError && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", radius: 2, marginBottom: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "flex-start", children: [
+          /* @__PURE__ */ jsx(ErrorOutlineIcon, { width: 20, height: 20 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Validation Error" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: validationError })
+          ] })
+        ] }) }),
         /* @__PURE__ */ jsx(Label$1, { size: 3, children: "FILE TO UPLOAD" }),
         /* @__PURE__ */ jsx(
           Card,
@@ -3502,7 +4876,14 @@ function UploadConfiguration({
               /* @__PURE__ */ jsx(DocumentVideoIcon, { fontSize: "2em" }),
               /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
                 /* @__PURE__ */ jsx(Text, { textOverflow: "ellipsis", as: "h2", size: 3, children: stagedUpload.type === "file" ? stagedUpload.files[0].name : stagedUpload.url }),
-                /* @__PURE__ */ jsx(Text, { as: "p", size: 1, muted: !0, children: stagedUpload.type === "file" ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})` : "File From URL (Unknown size)" })
+                /* @__PURE__ */ jsx(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)" }),
+                stagedUpload.type === "file" && /* @__PURE__ */ jsxs(Stack, { space: 1, children: [
+                  isLoadingDuration && /* @__PURE__ */ jsx(Text, { as: "p", size: 1, muted: !0, children: "Reading video metadata..." }),
+                  videoDuration !== null && !validationError && /* @__PURE__ */ jsxs(Text, { as: "p", size: 1, muted: !0, children: [
+                    "Duration: ",
+                    formatSeconds(videoDuration)
+                  ] })
+                ] })
               ] })
             ] })
           }
@@ -3694,11 +5075,13 @@ function UploadConfiguration({
         /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
           Button,
           {
-            disabled: !basicConfig && !config.public_policy && !config.signed_policy,
+            disabled: !basicConfig && !config.public_policy && !config.signed_policy || validationError !== null || isLoadingDuration || isLoadingFileSize && !canSkipFileSizeValidation,
             icon: UploadIcon,
             text: "Upload",
             tone: "positive",
-            onClick: () => startUpload(formatUploadConfig(config))
+            onClick: () => {
+              validationError || startUpload(formatUploadConfig(config));
+            }
           }
         ) })
       ] })
@@ -3762,12 +5145,10 @@ function withFocusRing(component) {
     `;
   });
 }
-const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card), UploadCard = forwardRef(
+const UploadCardWithFocusRing = withFocusRing(Card), UploadCard = forwardRef(
   ({ children, tone, onPaste, onDrop, onDragEnter, onDragLeave, onDragOver }, forwardedRef) => {
-    const ctrlDown = useRef(!1), inputRef = useRef(null), handleKeyDown = useCallback((event) => {
-      (event.keyCode == ctrlKey || event.keyCode == cmdKey) && (ctrlDown.current = !0), ctrlDown.current && event.keyCode == 86 && inputRef.current.focus();
-    }, []), handleKeyUp = useCallback((event) => {
-      (event.keyCode == ctrlKey || event.keyCode == cmdKey) && (ctrlDown.current = !1);
+    const inputRef = useRef(null), handleKeyDown = useCallback((event) => {
+      event.target.closest("#vtt-url") || (event.ctrlKey || event.metaKey) && event.key === "v" && inputRef.current.focus();
     }, []);
     return /* @__PURE__ */ jsxs(
       UploadCardWithFocusRing,
@@ -3779,14 +5160,13 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card),
         shadow: 0,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
         onPaste,
         onDrop,
         onDragEnter,
         onDragLeave,
         onDragOver,
         children: [
-          /* @__PURE__ */ jsx(HiddenInput$1, { ref: inputRef, onPaste }),
+          /* @__PURE__ */ jsx(HiddenInput$1, { ref: inputRef }),
           children
         ]
       }
@@ -3821,7 +5201,7 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card),
     /* @__PURE__ */ jsx(
       HiddenInput,
       {
-        accept: accept || "video/*",
+        accept,
         ref: inputRef,
         tabIndex: 0,
         type: "file",
@@ -3842,8 +5222,11 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card),
     )
   ] });
 };
+function formatAcceptString(accept) {
+  return accept.split(",").map((type) => type.trim().replace("/*", "")).join(" or ");
+}
 function UploadPlaceholder(props) {
-  const { setDialogState, readOnly, onSelect, hovering, needsSetup } = props, handleBrowse = useCallback(() => setDialogState("select-video"), [setDialogState]), handleConfigureApi = useCallback(() => setDialogState("secrets"), [setDialogState]), { hasConfigAccess } = useAccessControl(props.config);
+  const { setDialogState, readOnly, onSelect, hovering, needsSetup, accept } = props, handleBrowse = useCallback(() => setDialogState("select-video"), [setDialogState]), handleConfigureApi = useCallback(() => setDialogState("secrets"), [setDialogState]), { hasConfigAccess } = useAccessControl(props.config);
   return /* @__PURE__ */ jsx(
     Card,
     {
@@ -3866,12 +5249,17 @@ function UploadPlaceholder(props) {
           children: [
             /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "flex-start", gap: 2, flex: 1, children: [
               /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Text, { muted: !0, children: /* @__PURE__ */ jsx(DocumentVideoIcon, {}) }) }),
-              /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "Drag video or paste URL here" }) })
+              /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+                "Drag ",
+                formatAcceptString(accept),
+                " file or paste URL here"
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
               /* @__PURE__ */ jsx(
                 FileInputButton,
                 {
+                  accept,
                   mode: "bleed",
                   tone: "default",
                   icon: UploadIcon,
@@ -4022,21 +5410,35 @@ function Uploader(props) {
       complete: () => dispatch({ action: "complete" }),
       error: (error) => dispatch({ action: "error", error })
     });
-  }, handleUpload = (files) => {
-    dispatch({
+  }, invalidFileToast = useCallback(() => {
+    toast.push({
+      status: "error",
+      title: `Invalid file type. Accepted types: ${props.config.acceptedMimeTypes?.join(", ")}`
+    });
+  }, [props.config.acceptedMimeTypes, toast]), isInvalidFile = (files) => Array.from(files).some((file) => !props.config.acceptedMimeTypes?.some((acceptedType) => {
+    const pattern = `^${acceptedType.replace("*", ".*")}$`;
+    return new RegExp(pattern).test(file.type);
+  })), handleUpload = (files) => {
+    isInvalidFile(files) || dispatch({
       action: "stageUpload",
       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();
+    const url = (event.clipboardData || window.clipboardData)?.getData("text")?.trim();
     if (!isValidUrl(url)) {
       toast.push({ status: "error", title: "Invalid URL for Mux video input." });
       return;
     }
     dispatch({ action: "stageUpload", input: { type: "url", url } });
   }, handleDrop = (event) => {
-    setDragState(null), event.preventDefault(), event.stopPropagation(), extractDroppedFiles(event.nativeEvent.dataTransfer).then((files) => {
+    if (event.preventDefault(), event.stopPropagation(), dragState === "invalid") {
+      invalidFileToast(), setDragState(null);
+      return;
+    }
+    setDragState(null), extractDroppedFiles(event.nativeEvent.dataTransfer).then((files) => {
       dispatch({
         action: "stageUpload",
         input: { type: "file", files }
@@ -4046,8 +5448,11 @@ function Uploader(props) {
     event.preventDefault(), event.stopPropagation();
   }, handleDragEnter = (event) => {
     event.stopPropagation(), dragEnteredEls.current.push(event.target);
-    const type = event.dataTransfer.items?.[0]?.type;
-    setDragState(type?.startsWith("video/") ? "valid" : "invalid");
+    const type = event.dataTransfer.items?.[0]?.type, isValidType = props.config.acceptedMimeTypes?.some((acceptedType) => {
+      const pattern = `^${acceptedType.replace("*", ".*")}$`;
+      return new RegExp(pattern).test(type);
+    });
+    setDragState(isValidType ? "valid" : "invalid");
   }, handleDragLeave = (event) => {
     event.stopPropagation();
     const idx = dragEnteredEls.current.indexOf(event.target);
@@ -4085,7 +5490,9 @@ function Uploader(props) {
       }
     );
   let tone;
-  return dragState && (tone = dragState === "valid" ? "positive" : "critical"), /* @__PURE__ */ jsxs(Fragment, { children: [
+  dragState && (tone = dragState === "valid" ? "positive" : "critical");
+  const acceptMimeString = props.config?.acceptedMimeTypes?.length ? props.config.acceptedMimeTypes.join(",") : "video/*, audio/*";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       UploadCard,
       {
@@ -4107,9 +5514,11 @@ function Uploader(props) {
                 readOnly: props.readOnly,
                 asset: props.asset,
                 onChange: props.onChange,
+                config: props.config,
                 buttons: /* @__PURE__ */ jsx(
                   PlayerActionsMenu$1,
                   {
+                    accept: acceptMimeString,
                     asset: props.asset,
                     dialogState: props.dialogState,
                     setDialogState: props.setDialogState,
@@ -4125,6 +5534,7 @@ function Uploader(props) {
         ) : /* @__PURE__ */ jsx(
           UploadPlaceholder,
           {
+            accept: acceptMimeString,
             hovering: dragState !== null,
             onSelect: handleUpload,
             readOnly: !!props.readOnly,
@@ -4385,7 +5795,8 @@ const muxVideoSchema = {
   defaultPublic: !0,
   defaultSigned: !1,
   tool: DEFAULT_TOOL_CONFIG,
-  allowedRolesForConfiguration: []
+  allowedRolesForConfiguration: [],
+  acceptedMimeTypes: ["video/*", "audio/*"]
 };
 function convertLegacyConfig(config) {
   return config.static_renditions && config.static_renditions.length > 0 ? { static_renditions: config.static_renditions } : config.mp4_support === "standard" ? { static_renditions: ["highest"] } : { static_renditions: [] };