sanity-plugin-mux-input 2.3.4 → 2.3.5

package/{lib/index.esm.js → dist/index.mjs}

@@ -1,8 +1,8 @@
 import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, 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, RetrieveIcon, RetryIcon, CheckmarkCircleIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, CheckmarkIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, LockIcon, PlayIcon, PlugIcon, UploadIcon, ResetIcon, EllipsisHorizontalIcon, AddIcon, TranslateIcon, DocumentVideoIcon } from "@sanity/icons";
-import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, Tooltip, Inline, useToast, TabList, Tab, TabPanel, TextInput, Label as Label$1, Grid, useClickOutside, Popover, MenuDivider, Radio, Autocomplete, rem } from "@sanity/ui";
-import React, { useState, useMemo, useEffect, useRef, useId, memo, isValidElement, useCallback, useReducer, PureComponent, createElement, forwardRef, Suspense } from "react";
+import { ErrorOutlineIcon, RetrieveIcon, RetryIcon, CheckmarkCircleIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, CheckmarkIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, LockIcon, PlayIcon, PlugIcon, UploadIcon, ResetIcon, EllipsisHorizontalIcon, TranslateIcon, DocumentVideoIcon } from "@sanity/icons";
+import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, Tooltip, Inline, useToast, TabList, Tab, TabPanel, TextInput, Label as Label$1, Grid, useClickOutside, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
+import React, { useState, useMemo, useEffect, useRef, useId, memo, isValidElement, useCallback, useReducer, createElement, forwardRef, Suspense } from "react";
 import compact from "lodash/compact.js";
 import toLower from "lodash/toLower.js";
 import trim from "lodash/trim.js";
@@ -21,6 +21,7 @@ import isString from "lodash/isString.js";
 import { useMemoObservable } from "react-rx";
 import useSWR from "swr";
 import scrollIntoView from "scroll-into-view-if-needed";
+import { useErrorBoundary } from "use-error-boundary";
 import { UpChunk } from "@mux/upchunk";
 import { isValidElementType } from "react-is";
 import LanguagesList from "iso-639-1";
@@ -143,7 +144,7 @@ function accumulateIntermediateState(currentState, pageResult) {
       ...currentData,
       ...("data" in pageResult && pageResult.data || []).filter(
         // De-duplicate assets for safety
-        (asset) => !currentData.some((a2) => a2.id === asset.id)
+        (asset) => !currentData.some((a) => a.id === asset.id)
       )
     ],
     error: "error" in pageResult ? pageResult.error : (
@@ -160,8 +161,7 @@ function hasMorePages(pageResult) {
 function useMuxAssets({ secrets, enabled }) {
   const [state, setState] = useState({ loading: !0, pageNum: FIRST_PAGE });
   return useEffect(() => {
-    if (!enabled)
-      return;
+    if (!enabled) return;
     const subscription = defer(
       () => fetchMuxAssetsPage(
         secrets,
@@ -190,7 +190,7 @@ function useMuxAssets({ secrets, enabled }) {
     return () => subscription.unsubscribe();
   }, [enabled]), state;
 }
-const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumentId = "secrets.mux", DIALOGS_Z_INDEX = 6e4, THUMBNAIL_ASPECT_RATIO = 1.7777777777777777, MIN_ASPECT_RATIO = 5 / 4, path$1 = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"], useSecretsDocumentValues = () => {
+const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumentId = "secrets.mux", DIALOGS_Z_INDEX = 6e4, THUMBNAIL_ASPECT_RATIO = 1.7777777777777777, MIN_ASPECT_RATIO = 5 / 4, AUDIO_ASPECT_RATIO = 5 / 1, path$1 = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"], useSecretsDocumentValues = () => {
   const { error, isLoading, value } = useDocumentValues(
     muxSecretsDocumentId,
     path$1
@@ -217,14 +217,14 @@ function useImportMuxAssets() {
   }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!((_a = secretDocumentValues.value.secrets) != null && _a.secretKey), [importError, setImportError] = useState(), [importState, setImportState] = useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
     secrets: secretDocumentValues.value.secrets,
     enabled: hasSecrets && dialogOpen
-  }), missingAssets = useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a2) => !assetExistsInSanity(a2, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
+  }), missingAssets = useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a) => !assetExistsInSanity(a, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
     importState !== "importing" && setImportState("closed");
   }, openDialog = () => {
     importState === "closed" && setImportState("idle");
   };
   async function importAssets() {
     setImportState("importing");
-    const documents = selectedAssets.map(muxAssetToSanityDocument), tx = client.transaction();
+    const documents = selectedAssets.flatMap((asset) => muxAssetToSanityDocument(asset) || []), tx = client.transaction();
     documents.forEach((doc) => tx.create(doc));
     try {
       await tx.commit({ returnDocuments: !1 }), setSelectedAssets([]), setImportState("done");
@@ -249,17 +249,19 @@ function useImportMuxAssets() {
 }
 function muxAssetToSanityDocument(asset) {
   var _a;
-  return {
-    _id: uuid(),
-    _type: "mux.videoAsset",
-    _updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-    _createdAt: parseMuxDate(asset.created_at).toISOString(),
-    assetId: asset.id,
-    playbackId: (_a = asset.playback_ids.find((p) => p.id)) == null ? void 0 : _a.id,
-    filename: `Asset #${truncateString(asset.id, 15)}`,
-    status: asset.status,
-    data: asset
-  };
+  const playbackId = (_a = (asset.playback_ids || []).find((p) => p.id)) == null ? void 0 : _a.id;
+  if (playbackId)
+    return {
+      _id: uuid(),
+      _type: "mux.videoAsset",
+      _updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      _createdAt: parseMuxDate(asset.created_at).toISOString(),
+      assetId: asset.id,
+      playbackId,
+      filename: `Asset #${truncateString(asset.id, 15)}`,
+      status: asset.status,
+      data: asset
+    };
 }
 const useAssetsInSanity = createHookFromObservableFactory(
   (documentStore) => documentStore.listenQuery(
@@ -282,8 +284,7 @@ function assetExistsInSanity(asset, existingAssets) {
 function useInView(options = {}) {
   const [inView, setInView] = useState(!1), ref = useRef(null);
   return useEffect(() => {
-    if (!ref.current)
-      return;
+    if (!ref.current) return;
     const observer = new IntersectionObserver(([entry], obs) => {
       var _a;
       const nowInView = entry.isIntersecting && obs.thresholds.some((threshold) => entry.intersectionRatio >= threshold);
@@ -321,9 +322,9 @@ function readSecrets(client) {
 function generateJwt(client, playbackId, aud, payload) {
   const { signingKeyId, signingKeyPrivate } = readSecrets(client);
   if (!signingKeyId)
-    throw new TypeError("Missing signingKeyId");
+    throw new TypeError("Missing `signingKeyId`.\n Check your plugin's configuration");
   if (!signingKeyPrivate)
-    throw new TypeError("Missing signingKeyPrivate");
+    throw new TypeError("Missing `signingKeyPrivate`.\n Check your plugin's configuration");
   const { default: sign } = suspend(() => import("jsonwebtoken-esm/sign"), ["jsonwebtoken-esm/sign"]);
   return sign(
     payload ? JSON.parse(JSON.stringify(payload, (_, v) => v != null ? v : void 0)) : {},
@@ -653,9 +654,9 @@ function ImportVideosDialog(props) {
             {
               asset,
               selectAsset: (selected) => {
-                selected ? props.setSelectedAssets([...props.selectedAssets, asset]) : props.setSelectedAssets(props.selectedAssets.filter((a2) => a2.id !== asset.id));
+                selected ? props.setSelectedAssets([...props.selectedAssets, asset]) : props.setSelectedAssets(props.selectedAssets.filter((a) => a.id !== asset.id));
               },
-              selected: props.selectedAssets.some((a2) => a2.id === asset.id)
+              selected: props.selectedAssets.some((a) => a.id === asset.id)
             },
             asset.id
           ))
@@ -774,7 +775,7 @@ function VideoPlayer({
   ...props
 }) {
   var _a, _b;
-  const client = useClient(), { src: videoSrc, error } = useMemo(() => {
+  const client = useClient(), isAudio = assetIsAudio(asset), { src: videoSrc, error } = useMemo(() => {
     try {
       const src = (asset == null ? void 0 : asset.playbackId) && getVideoSrc({ client, asset });
       return src ? { src } : { error: new TypeError("Asset has no playback ID") };
@@ -787,8 +788,12 @@ function VideoPlayer({
     } catch {
       return !1;
     }
-  }, [videoSrc]), [width, height] = ((_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.aspect_ratio) != null ? _b : "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height), aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
-  return /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
+  }, [videoSrc]), [width, height] = ((_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.aspect_ratio) != null ? _b : "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
+  let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
+  return isAudio && (aspectRatio = props.forceAspectRatio ? (
+    // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
+    props.forceAspectRatio * 1.2
+  ) : AUDIO_ASPECT_RATIO), /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
     videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         MuxPlayer,
@@ -801,9 +806,10 @@ function VideoPlayer({
           crossOrigin: "anonymous",
           metadata: {
             player_name: "Sanity Admin Dashboard",
-            player_version: "2.3.4",
+            player_version: "2.3.5",
             page_type: "Preview Player"
           },
+          audio: isAudio,
           style: {
             height: "100%",
             width: "100%",
@@ -832,6 +838,10 @@ function VideoPlayer({
     children
   ] });
 }
+function assetIsAudio(asset) {
+  var _a;
+  return ((_a = asset.data) == null ? void 0 : _a.max_stored_resolution) === "Audio only";
+}
 function deleteAssetOnMux(client, assetId) {
   const { dataset } = client.config();
   return client.request({
@@ -845,8 +855,7 @@ async function deleteAsset({
   asset,
   deleteOnMux
 }) {
-  if (!(asset != null && asset._id))
-    return !0;
+  if (!(asset != null && asset._id)) return !0;
   try {
     await client.delete(asset._id);
   } catch {
@@ -1037,8 +1046,7 @@ function DeleteDialog({
     state !== "checkingReferences" || referencesLoading || setState(references != null && references.length ? "cantDelete" : "confirm");
   }, [state, references, referencesLoading]);
   async function confirmDelete() {
-    if (state !== "confirm")
-      return;
+    if (state !== "confirm") return;
     setState("processing_deletion");
     const worked = await deleteAsset({ client, asset, deleteOnMux });
     worked === !0 ? (toast.push({ title: "Successfully deleted video", status: "success" }), succeededDeleting()) : worked === "failed-mux" ? (toast.push({
@@ -1627,7 +1635,25 @@ function VideoInBrowser({
             children: [
               renderVideo ? /* @__PURE__ */ jsx(VideoPlayer, { asset, autoPlay: !0, forceAspectRatio: THUMBNAIL_ASPECT_RATIO }) : /* @__PURE__ */ jsxs(PlayButton, { onClick: () => setRenderVideo(!0), children: [
                 /* @__PURE__ */ jsx("div", { "data-play": !0, children: /* @__PURE__ */ jsx(PlayIcon, {}) }),
-                /* @__PURE__ */ jsx(VideoThumbnail, { asset })
+                assetIsAudio(asset) ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      aspectRatio: THUMBNAIL_ASPECT_RATIO,
+                      display: "flex",
+                      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"
+                      }
+                    ) })
+                  }
+                ) : /* @__PURE__ */ jsx(VideoThumbnail, { asset })
               ] }),
               /* @__PURE__ */ jsx(VideoMetadata, { asset }),
               /* @__PURE__ */ jsxs(
@@ -1678,7 +1704,7 @@ function VideoInBrowser({
 }
 function VideosBrowser({ onSelect }) {
   const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(
-    () => assets.find((a2) => a2._id === (editedAsset == null ? void 0 : editedAsset._id)) || editedAsset,
+    () => assets.find((a) => a._id === (editedAsset == null ? void 0 : editedAsset._id)) || editedAsset,
     [editedAsset, assets]
   ), placement = onSelect ? "input" : "tool";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1930,7 +1956,7 @@ const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init), ids
   "r"
 ];
 function MuxLogo({ height = 26 }) {
-  const id = useId(), [titleId, a2, b, c2, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo(
+  const id = useId(), [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo(
     () => ids.map((field) => `${id}-${field}`),
     [id]
   );
@@ -1949,7 +1975,7 @@ function MuxLogo({ height = 26 }) {
           /* @__PURE__ */ jsxs(
             "linearGradient",
             {
-              id: c2,
+              id: c,
               spreadMethod: "pad",
               gradientTransform: "matrix(528.38055 0 0 -528.38055 63.801 159.5)",
               gradientUnits: "userSpaceOnUse",
@@ -2331,7 +2357,7 @@ function MuxLogo({ height = 26 }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsx("clipPath", { id: a2, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
+          /* @__PURE__ */ jsx("clipPath", { id: a, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
           /* @__PURE__ */ jsx("clipPath", { id: b, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M423.64 242h164.999V77H423.64Z" }) }),
           /* @__PURE__ */ jsx("clipPath", { id: e, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
           /* @__PURE__ */ jsx("clipPath", { id: f, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M311.3 242h93.031V77H311.3Z" }) }),
@@ -2339,7 +2365,7 @@ function MuxLogo({ height = 26 }) {
           /* @__PURE__ */ jsx("clipPath", { id: n, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
           /* @__PURE__ */ jsx("clipPath", { id: o, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M69.067 242H169.12V141.947H69.067Z" }) })
         ] }),
-        /* @__PURE__ */ jsx("g", { clipPath: `url(#${a2})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("g", { clipPath: `url(#${a})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
           "g",
           {
             style: {
@@ -2350,7 +2376,7 @@ function MuxLogo({ height = 26 }) {
               "path",
               {
                 style: {
-                  fill: `url(#${c2})`,
+                  fill: `url(#${c})`,
                   stroke: "none"
                 },
                 d: "M558.674 82.142c6.855-6.855 17.969-6.855 24.824 0 6.854 6.855 6.854 17.969 0 24.823L453.605 236.858c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
@@ -2664,49 +2690,9 @@ function ConfigureApi({ secrets, setDialogState }) {
     }
   );
 }
-var ConfigureApi$1 = memo(ConfigureApi), c = function(r) {
-  var t, e;
-  function n(t2) {
-    var e2;
-    return (e2 = r.call(this, t2) || this).state = { hasError: !1, error: null }, e2;
-  }
-  e = r, (t = n).prototype = Object.create(e.prototype), t.prototype.constructor = t, t.__proto__ = e, n.getDerivedStateFromError = function(r2) {
-    return { hasError: !0, error: r2 };
-  };
-  var o = n.prototype;
-  return o.componentDidCatch = function(r2, t2) {
-    return this.props.onDidCatch(r2, t2);
-  }, o.render = function() {
-    var r2 = this.state, t2 = this.props, e2 = t2.render, n2 = t2.children, o2 = t2.renderError;
-    return r2.hasError ? o2 ? o2({ error: r2.error }) : null : e2 ? e2() : n2 || null;
-  }, n;
-}(PureComponent), u = function(r, t) {
-  switch (t.type) {
-    case "catch":
-      return { didCatch: !0, error: t.error };
-    case "reset":
-      return { didCatch: !1, error: null };
-    default:
-      return r;
-  }
-};
-function a(t) {
-  var a2 = useReducer(u, { didCatch: !1, error: null }), i = a2[0], d = a2[1], h = useRef(null);
-  function l() {
-    return e = function(r, e2) {
-      d({ type: "catch", error: r }), t && t.onDidCatch && t.onDidCatch(r, e2);
-    }, function(t2) {
-      return React.createElement(c, { onDidCatch: e, children: t2.children, render: t2.render, renderError: t2.renderError });
-    };
-    var e;
-  }
-  var p, s = useCallback(function() {
-    h.current = l(), d({ type: "reset" });
-  }, []);
-  return { ErrorBoundary: (p = h.current, p !== null ? p : (h.current = l(), h.current)), didCatch: i.didCatch, error: i.error, reset: s };
-}
+var ConfigureApi$1 = memo(ConfigureApi);
 function ErrorBoundaryCard(props) {
-  const { children, schemaType } = props, { push: pushToast } = useToast(), errorRef = useRef(null), { ErrorBoundary, didCatch, error, reset } = a({
+  const { children, schemaType } = props, { push: pushToast } = useToast(), errorRef = useRef(null), { ErrorBoundary, didCatch, error, reset } = useErrorBoundary({
     onDidCatch: (err, errorInfo) => {
       console.group(err.toString()), console.groupCollapsed("console.error"), console.error(err), console.groupEnd(), err.stack && (console.groupCollapsed("error.stack"), console.log(err.stack), console.groupEnd()), errorInfo != null && errorInfo.componentStack && (console.groupCollapsed("errorInfo.componentStack"), console.log(errorInfo.componentStack), console.groupEnd()), console.groupEnd(), pushToast({
         status: "error",
@@ -3352,12 +3338,12 @@ function formatBytes(bytes, si = !1, dp = 1) {
   if (Math.abs(bytes) < thresh)
     return bytes + " B";
   const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
-  let u2 = -1;
+  let u = -1;
   const r = 10 ** dp;
   do
-    bytes /= thresh, ++u2;
-  while (Math.round(Math.abs(bytes) * r) / r >= thresh && u2 < units.length - 1);
-  return bytes.toFixed(dp) + " " + units[u2];
+    bytes /= thresh, ++u;
+  while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+  return bytes.toFixed(dp) + " " + units[u];
 }
 const SUPPORTED_MUX_LANGUAGES = [
   { label: "English", code: "en", state: "Stable" },
@@ -3399,47 +3385,45 @@ const ALL_LANGUAGE_CODES = LanguagesList.getAllCodes().map((code) => ({
   })),
   subtitles: ALL_LANGUAGE_CODES,
   captions: ALL_LANGUAGE_CODES
-}, TRACK_TYPES = [
-  { value: "autogenerated", label: "Auto-generated Subtitles" }
-  // {value: 'subtitles', label: 'Subtitles'},
-  // {value: 'captions', label: 'Closed Captions'},
-];
-function TrackEditor({
-  canAutoGenerate,
-  track,
-  dispatch
+};
+function TextTracksEditor({
+  tracks,
+  dispatch,
+  defaultLang
 }) {
-  const { _id: id, type } = track, dispatchTrackAction = (args) => dispatch({ action: "track", id, ...args }), trackTypes = TRACK_TYPES.filter(
-    ({ value }) => !(value === "autogenerated" && !canAutoGenerate)
-  );
-  return trackTypes.length === 0 ? null : /* @__PURE__ */ jsx(Card, { border: !0, padding: 3, radius: 2, style: { position: "relative" }, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-    trackTypes.length > 1 && /* @__PURE__ */ jsx(FormField$2, { title: "Auto-generated subtitles", children: /* @__PURE__ */ jsx(Flex, { gap: 3, children: trackTypes.map(({ value, label }) => {
-      const inputId = `${id}--type-${value}`;
-      return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
-        /* @__PURE__ */ jsx(
-          Radio,
-          {
-            checked: type === value,
-            name: "track-type",
-            onChange: (e) => dispatchTrackAction({
-              subAction: "update",
+  const track = tracks[0];
+  return /* @__PURE__ */ jsx(FormField$2, { title: "Auto-generated subtitle or caption", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: "include-autogenerated-track",
+          style: { display: "block" },
+          checked: !!(track != null && track.language_code),
+          onChange: () => {
+            dispatch(track ? { action: "track", id: track._id, subAction: "delete" } : {
+              action: "track",
+              id: uuid(),
+              subAction: "add",
               value: {
-                type: e.currentTarget.value
+                type: "autogenerated",
+                name: defaultLang || void 0,
+                language_code: defaultLang || void 0
               }
-            }),
-            value,
-            id: inputId
+            });
           }
-        ),
-        /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: inputId, children: label })
-      ] }, value);
-    }) }) }),
-    /* @__PURE__ */ jsx(
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { flex: 1, paddingLeft: 3, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: "checkbox", children: "Generate captions" }) }) })
+    ] }),
+    track && /* @__PURE__ */ jsx(
       Autocomplete,
       {
-        id: `${id}--language`,
+        id: "text-tract-editor--language",
         value: track.language_code,
-        onChange: (newValue) => dispatchTrackAction({
+        onChange: (newValue) => dispatch({
+          action: "track",
+          id: track._id,
           subAction: "update",
           value: {
             language_code: newValue,
@@ -3462,54 +3446,9 @@ function TrackEditor({
           ")"
         ] }) })
       }
-    ),
-    /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        icon: TrashIcon,
-        tone: "critical",
-        mode: "ghost",
-        onClick: () => dispatchTrackAction({ subAction: "delete" }),
-        text: "Delete"
-      }
-    ) })
+    )
   ] }) });
 }
-function TextTracksEditor({
-  canAutoGenerate,
-  tracks,
-  dispatch
-}) {
-  return TRACK_TYPES.filter(
-    ({ value }) => !(value === "autogenerated" && !canAutoGenerate)
-  ).length === 0 ? null : /* @__PURE__ */ jsx(
-    FormField$2,
-    {
-      title: "Captions & Subtitles",
-      description: "Provide text tracks for video accessibility.",
-      children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-        tracks.map((track) => /* @__PURE__ */ jsx(
-          TrackEditor,
-          {
-            canAutoGenerate,
-            track,
-            dispatch
-          },
-          track._id
-        )),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: AddIcon,
-            onClick: () => dispatch({ action: "track", id: uuid(), subAction: "add" }),
-            text: "New caption/subtitle",
-            mode: "ghost"
-          }
-        )
-      ] })
-    }
-  );
-}
 const ENCODING_OPTIONS = [
   { value: "smart", label: "Smart" },
   { value: "baseline", label: "Baseline" }
@@ -3525,26 +3464,25 @@ function UploadConfiguration({
   startUpload,
   onClose
 }) {
-  var _a;
   const id = useId(), autoTextTracks = useRef(
-    pluginConfig.encoding_tier === "smart" && ((_a = pluginConfig.defaultAutogeneratedSubtitleLangs) == null ? void 0 : _a.map(
-      (language_code) => ({
+    pluginConfig.encoding_tier === "smart" && pluginConfig.defaultAutogeneratedSubtitleLang ? [
+      {
         _id: uuid(),
         type: "autogenerated",
-        language_code,
-        name: LanguagesList.getNativeName(language_code)
-      })
-    )) || []
+        language_code: pluginConfig.defaultAutogeneratedSubtitleLang,
+        name: LanguagesList.getNativeName(pluginConfig.defaultAutogeneratedSubtitleLang)
+      }
+    ] : []
   ).current, [config, dispatch] = useReducer(
     (prev, action) => {
-      var _a2;
+      var _a;
       switch (action.action) {
         case "encoding_tier":
           return action.value === "baseline" ? Object.assign({}, prev, {
             encoding_tier: action.value,
             mp4_support: "none",
             max_resolution_tier: "1080p",
-            text_tracks: (_a2 = prev.text_tracks) == null ? void 0 : _a2.filter(({ type }) => type !== "autogenerated")
+            text_tracks: (_a = prev.text_tracks) == null ? void 0 : _a.filter(({ type }) => type !== "autogenerated")
           }) : Object.assign({}, prev, {
             encoding_tier: action.value,
             mp4_support: pluginConfig.mp4_support,
@@ -3560,23 +3498,21 @@ function UploadConfiguration({
           const text_tracks = [...prev.text_tracks], target_track_i = text_tracks.findIndex(({ _id: _id2 }) => _id2 === action.id);
           switch (action.subAction) {
             case "add":
-              if (target_track_i !== -1)
-                break;
-              text_tracks.push(
-                prev.encoding_tier === "smart" ? { _id: action.id, type: "autogenerated" } : { _id: action.id, type: "subtitles" }
-              );
+              if (target_track_i !== -1) break;
+              text_tracks.push({
+                _id: action.id,
+                ...action.value
+              });
               break;
             case "update":
-              if (target_track_i === -1)
-                break;
+              if (target_track_i === -1) break;
               text_tracks[target_track_i] = {
                 ...text_tracks[target_track_i],
                 ...action.value
               };
               break;
             case "delete":
-              if (target_track_i === -1)
-                break;
+              if (target_track_i === -1) break;
               text_tracks.splice(target_track_i, 1);
               break;
           }
@@ -3597,8 +3533,7 @@ function UploadConfiguration({
   ), { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
   if (useEffect(() => {
     skipConfig && startUpload(formatUploadConfig(config));
-  }, []), skipConfig)
-    return null;
+  }, []), skipConfig) return null;
   const maxSupportedResolution = RESOLUTION_TIERS.findIndex(
     (rt) => rt.value === pluginConfig.max_resolution_tier
   );
@@ -3747,15 +3682,15 @@ function UploadConfiguration({
             ] })
           ] }) })
         ] }),
-        !disableTextTrackConfig && /* @__PURE__ */ jsx(
+        !disableTextTrackConfig && config.encoding_tier === "smart" && /* @__PURE__ */ jsx(
           TextTracksEditor,
           {
-            canAutoGenerate: config.encoding_tier === "smart",
             tracks: config.text_tracks,
-            dispatch
+            dispatch,
+            defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
           Button,
           {
             icon: UploadIcon,
@@ -3763,7 +3698,7 @@ function UploadConfiguration({
             tone: "positive",
             onClick: () => startUpload(formatUploadConfig(config))
           }
-        )
+        ) })
       ] })
     }
   );
@@ -4021,8 +3956,7 @@ function Uploader(props) {
   }, []);
   const startUpload = (settings) => {
     const { stagedUpload } = state;
-    if (!stagedUpload || uploadRef.current)
-      return;
+    if (!stagedUpload || uploadRef.current) return;
     dispatch({ action: "commitUpload" });
     let uploadObservable;
     switch (stagedUpload.type) {
@@ -4245,7 +4179,7 @@ function muxVideoCustomRendering(config) {
     }
   };
 }
-const muxVideo = {
+const muxVideoSchema = {
   name: "mux.video",
   type: "object",
   title: "Video asset reference",
@@ -4258,6 +4192,122 @@ const muxVideo = {
       to: [{ type: "mux.videoAsset" }]
     }
   ]
+}, muxTrack = {
+  name: "mux.track",
+  type: "object",
+  fields: [
+    { type: "string", name: "id" },
+    { type: "string", name: "type" },
+    { type: "number", name: "max_width" },
+    { type: "number", name: "max_frame_rate" },
+    { type: "number", name: "duration" },
+    { type: "number", name: "max_height" }
+  ]
+}, muxPlaybackId = {
+  name: "mux.playbackId",
+  type: "object",
+  fields: [
+    { type: "string", name: "id" },
+    { type: "string", name: "policy" }
+  ]
+}, muxStaticRenditionFile = {
+  name: "mux.staticRenditionFile",
+  type: "object",
+  fields: [
+    { type: "string", name: "ext" },
+    { type: "string", name: "name" },
+    { type: "number", name: "width" },
+    { type: "number", name: "bitrate" },
+    { type: "number", name: "filesize" },
+    { type: "number", name: "height" }
+  ]
+}, muxStaticRenditions = {
+  name: "mux.staticRenditions",
+  type: "object",
+  fields: [
+    { type: "string", name: "status" },
+    {
+      name: "files",
+      type: "array",
+      of: [{ type: "mux.staticRenditionFile" }]
+    }
+  ]
+}, muxAssetData = {
+  name: "mux.assetData",
+  title: "Mux asset data",
+  type: "object",
+  fields: [
+    {
+      type: "string",
+      name: "resolution_tier"
+    },
+    {
+      type: "string",
+      name: "upload_id"
+    },
+    {
+      type: "string",
+      name: "created_at"
+    },
+    {
+      type: "string",
+      name: "id"
+    },
+    {
+      type: "string",
+      name: "status"
+    },
+    {
+      type: "string",
+      name: "max_stored_resolution"
+    },
+    {
+      type: "string",
+      name: "passthrough"
+    },
+    {
+      type: "string",
+      name: "encoding_tier"
+    },
+    {
+      type: "string",
+      name: "master_access"
+    },
+    {
+      type: "string",
+      name: "aspect_ratio"
+    },
+    {
+      type: "number",
+      name: "duration"
+    },
+    {
+      type: "number",
+      name: "max_stored_frame_rate"
+    },
+    {
+      type: "string",
+      name: "mp4_support"
+    },
+    {
+      type: "string",
+      name: "max_resolution_tier"
+    },
+    {
+      name: "tracks",
+      type: "array",
+      of: [{ type: "mux.track" }]
+    },
+    {
+      name: "playback_ids",
+      type: "array",
+      of: [{ type: "mux.playbackId" }]
+    },
+    {
+      name: "static_renditions",
+      type: "mux.staticRenditions"
+    }
+  ]
 }, muxVideoAsset = {
   name: "mux.videoAsset",
   type: "object",
@@ -4282,9 +4332,20 @@ const muxVideo = {
     {
       type: "number",
       name: "thumbTime"
+    },
+    {
+      type: "mux.assetData",
+      name: "data"
     }
   ]
-}, defaultConfig = {
+}, schemaTypes = [
+  muxTrack,
+  muxPlaybackId,
+  muxStaticRenditionFile,
+  muxStaticRenditions,
+  muxAssetData,
+  muxVideoAsset
+], defaultConfig = {
   mp4_support: "none",
   encoding_tier: "smart",
   max_resolution_tier: "1080p",
@@ -4297,9 +4358,9 @@ const muxVideo = {
     name: "mux-input",
     schema: {
       types: [
-        muxVideoAsset,
+        ...schemaTypes,
         {
-          ...muxVideo,
+          ...muxVideoSchema,
           ...muxVideoCustomRendering(config)
         }
       ]
@@ -4311,4 +4372,4 @@ export {
   defaultConfig,
   muxInput
 };
-//# sourceMappingURL=index.esm.js.map
+//# sourceMappingURL=index.mjs.map