sanity-plugin-mux-input 2.3.5 → 2.4.0

package/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, 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 { 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, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
+import React, { useState, useMemo, useEffect, useRef, useId, memo, isValidElement, useCallback, useReducer, PureComponent, createElement, forwardRef, Suspense } from "react";
 import compact from "lodash/compact.js";
 import toLower from "lodash/toLower.js";
 import trim from "lodash/trim.js";
@@ -18,10 +18,9 @@ import { usePaneRouter } from "sanity/desk";
 import { IntentLink } from "sanity/router";
 import isNumber from "lodash/isNumber.js";
 import isString from "lodash/isString.js";
-import { useMemoObservable } from "react-rx";
+import { useObservable } 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";
@@ -144,7 +143,7 @@ function accumulateIntermediateState(currentState, pageResult) {
       ...currentData,
       ...("data" in pageResult && pageResult.data || []).filter(
         // De-duplicate assets for safety
-        (asset) => !currentData.some((a) => a.id === asset.id)
+        (asset) => !currentData.some((a2) => a2.id === asset.id)
       )
     ],
     error: "error" in pageResult ? pageResult.error : (
@@ -196,28 +195,27 @@ const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumen
     path$1
   ), cache = useMemo(() => {
     const exists = !!value, secrets = {
-      token: (value == null ? void 0 : value.token) || null,
-      secretKey: (value == null ? void 0 : value.secretKey) || null,
-      enableSignedUrls: (value == null ? void 0 : value.enableSignedUrls) || !1,
-      signingKeyId: (value == null ? void 0 : value.signingKeyId) || null,
-      signingKeyPrivate: (value == null ? void 0 : value.signingKeyPrivate) || null
+      token: value?.token || null,
+      secretKey: value?.secretKey || null,
+      enableSignedUrls: value?.enableSignedUrls || !1,
+      signingKeyId: value?.signingKeyId || null,
+      signingKeyPrivate: value?.signingKeyPrivate || null
     };
     return {
       isInitialSetup: !exists,
-      needsSetup: !(secrets != null && secrets.token) || !(secrets != null && secrets.secretKey),
+      needsSetup: !secrets?.token || !secrets?.secretKey,
       secrets
     };
   }, [value]);
   return { error, isLoading, value: cache };
 };
 function useImportMuxAssets() {
-  var _a;
   const documentStore = useDocumentStore(), client = useClient$1({
     apiVersion: SANITY_API_VERSION
-  }), [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({
+  }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!secretDocumentValues.value.secrets?.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((a) => !assetExistsInSanity(a, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
+  }), missingAssets = useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a2) => !assetExistsInSanity(a2, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
     importState !== "importing" && setImportState("closed");
   }, openDialog = () => {
     importState === "closed" && setImportState("idle");
@@ -248,8 +246,7 @@ function useImportMuxAssets() {
   };
 }
 function muxAssetToSanityDocument(asset) {
-  var _a;
-  const playbackId = (_a = (asset.playback_ids || []).find((p) => p.id)) == null ? void 0 : _a.id;
+  const playbackId = (asset.playback_ids || []).find((p) => p.id)?.id;
   if (playbackId)
     return {
       _id: uuid(),
@@ -286,9 +283,8 @@ function useInView(options = {}) {
   return useEffect(() => {
     if (!ref.current) return;
     const observer = new IntersectionObserver(([entry], obs) => {
-      var _a;
       const nowInView = entry.isIntersecting && obs.thresholds.some((threshold) => entry.intersectionRatio >= threshold);
-      setInView(nowInView), (_a = options == null ? void 0 : options.onChange) == null || _a.call(options, nowInView);
+      setInView(nowInView), options?.onChange?.(nowInView);
     }, options), toObserve = ref.current;
     return observer.observe(toObserve), () => {
       toObserve && observer.unobserve(toObserve);
@@ -311,11 +307,11 @@ function readSecrets(client) {
       { _id }
     );
     return {
-      token: (data == null ? void 0 : data.token) || null,
-      secretKey: (data == null ? void 0 : data.secretKey) || null,
-      enableSignedUrls: !!(data != null && data.enableSignedUrls) || !1,
-      signingKeyId: (data == null ? void 0 : data.signingKeyId) || null,
-      signingKeyPrivate: (data == null ? void 0 : data.signingKeyPrivate) || null
+      token: data?.token || null,
+      secretKey: data?.secretKey || null,
+      enableSignedUrls: !!data?.enableSignedUrls || !1,
+      signingKeyId: data?.signingKeyId || null,
+      signingKeyPrivate: data?.signingKeyPrivate || null
     };
   }, [cacheNs, _id, projectId, dataset]);
 }
@@ -327,7 +323,7 @@ function generateJwt(client, playbackId, aud, payload) {
     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)) : {},
+    payload ? JSON.parse(JSON.stringify(payload, (_, v) => v ?? void 0)) : {},
     atob(signingKeyPrivate),
     {
       algorithm: "RS256",
@@ -340,13 +336,12 @@ function generateJwt(client, playbackId, aud, payload) {
   );
 }
 function getPlaybackId(asset) {
-  if (!(asset != null && asset.playbackId))
+  if (!asset?.playbackId)
     throw console.error("Asset is missing a playbackId", { asset }), new TypeError("Missing playbackId");
   return asset.playbackId;
 }
 function getPlaybackPolicy(asset) {
-  var _a, _b, _c, _d;
-  return (_d = (_c = (_b = (_a = asset.data) == null ? void 0 : _a.playback_ids) == null ? void 0 : _b[0]) == null ? void 0 : _c.policy) != null ? _d : "public";
+  return asset.data?.playback_ids?.find((playbackId) => asset.playbackId === playbackId.id)?.policy ?? "public";
 }
 function getAnimatedPosterSrc({
   asset,
@@ -359,7 +354,7 @@ function getAnimatedPosterSrc({
 }) {
   const params = { height, width, start, end, fps }, playbackId = getPlaybackId(asset);
   let searchParams = new URLSearchParams(
-    JSON.parse(JSON.stringify(params, (_, v) => v != null ? v : void 0))
+    JSON.parse(JSON.stringify(params, (_, v) => v ?? void 0))
   );
   if (getPlaybackPolicy(asset) === "signed") {
     const token = generateJwt(client, playbackId, "g", params);
@@ -390,7 +385,7 @@ function VideoThumbnail({
       status !== "error" && setStatus("error");
       return;
     }
-  }, [asset, client, width, status, setStatus]);
+  }, [asset, client, posterWidth, status]);
   function handleLoad() {
     setStatus("loaded");
   }
@@ -475,7 +470,6 @@ function MissingAsset({
   selectAsset,
   selected
 }) {
-  var _a;
   const duration = useFormattedDuration(asset.duration * 1e3);
   return /* @__PURE__ */ jsx(
     Card,
@@ -504,7 +498,7 @@ function MissingAsset({
               assetId: asset.id,
               data: asset,
               filename: asset.id,
-              playbackId: (_a = asset.playback_ids.find((p) => p.id)) == null ? void 0 : _a.id
+              playbackId: asset.playback_ids.find((p) => p.id)?.id
             },
             width: 150
           }
@@ -535,8 +529,7 @@ function MissingAsset({
   );
 }
 function ImportVideosDialog(props) {
-  var _a, _b;
-  const { importState } = props, canTriggerImport = (importState === "idle" || importState === "error") && props.selectedAssets.length > 0, isImporting = importState === "importing", noAssetsToImport = ((_a = props.missingAssets) == null ? void 0 : _a.length) === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading;
+  const { importState } = props, canTriggerImport = (importState === "idle" || importState === "error") && props.selectedAssets.length > 0, isImporting = importState === "importing", noAssetsToImport = props.missingAssets?.length === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading;
   return /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -568,7 +561,7 @@ function ImportVideosDialog(props) {
             fontSize: 2,
             padding: 3,
             mode: "ghost",
-            text: ((_b = props.selectedAssets) == null ? void 0 : _b.length) > 0 ? `Import ${props.selectedAssets.length} video(s)` : "No video(s) selected",
+            text: props.selectedAssets?.length > 0 ? `Import ${props.selectedAssets.length} video(s)` : "No video(s) selected",
             tone: "positive",
             onClick: props.importAssets,
             iconRight: isImporting && Spinner,
@@ -654,9 +647,9 @@ function ImportVideosDialog(props) {
             {
               asset,
               selectAsset: (selected) => {
-                selected ? props.setSelectedAssets([...props.selectedAssets, asset]) : props.setSelectedAssets(props.selectedAssets.filter((a) => a.id !== asset.id));
+                selected ? props.setSelectedAssets([...props.selectedAssets, asset]) : props.setSelectedAssets(props.selectedAssets.filter((a2) => a2.id !== asset.id));
               },
-              selected: props.selectedAssets.some((a) => a.id === asset.id)
+              selected: props.selectedAssets.some((a2) => a2.id === asset.id)
             },
             asset.id
           ))
@@ -774,10 +767,9 @@ function VideoPlayer({
   children,
   ...props
 }) {
-  var _a, _b;
   const client = useClient(), isAudio = assetIsAudio(asset), { src: videoSrc, error } = useMemo(() => {
     try {
-      const src = (asset == null ? void 0 : asset.playbackId) && getVideoSrc({ client, asset });
+      const src = asset?.playbackId && getVideoSrc({ client, asset });
       return src ? { src } : { error: new TypeError("Asset has no playback ID") };
     } catch (error2) {
       return { error: error2 };
@@ -788,7 +780,7 @@ 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);
+  }, [videoSrc]), [width, height] = (asset?.data?.aspect_ratio ?? "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
   let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
   return isAudio && (aspectRatio = props.forceAspectRatio ? (
     // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
@@ -806,7 +798,7 @@ function VideoPlayer({
           crossOrigin: "anonymous",
           metadata: {
             player_name: "Sanity Admin Dashboard",
-            player_version: "2.3.5",
+            player_version: "2.4.0",
             page_type: "Preview Player"
           },
           audio: isAudio,
@@ -839,8 +831,7 @@ function VideoPlayer({
   ] });
 }
 function assetIsAudio(asset) {
-  var _a;
-  return ((_a = asset.data) == null ? void 0 : _a.max_stored_resolution) === "Audio only";
+  return asset.data?.max_stored_resolution === "Audio only";
 }
 function deleteAssetOnMux(client, assetId) {
   const { dataset } = client.config();
@@ -855,13 +846,13 @@ async function deleteAsset({
   asset,
   deleteOnMux
 }) {
-  if (!(asset != null && asset._id)) return !0;
+  if (!asset?._id) return !0;
   try {
     await client.delete(asset._id);
   } catch {
     return "failed-sanity";
   }
-  if (deleteOnMux && asset != null && asset.assetId)
+  if (deleteOnMux && asset?.assetId)
     try {
       await deleteAssetOnMux(client, asset.assetId);
     } catch {
@@ -930,10 +921,14 @@ function PublishedStatus(props) {
   );
 }
 function PaneItemPreview(props) {
-  const { icon, layout, presence, schemaType, value } = props, title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null, { draft, published, isLoading } = useMemoObservable(
+  const { icon, layout, presence, schemaType, value } = props, title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null, observable = useMemo(
     () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
-    [props.documentPreviewStore, schemaType, value._id, title]
-  ), status = isLoading ? null : /* @__PURE__ */ jsxs(Inline, { space: 4, children: [
+    [props.documentPreviewStore, schemaType, title, value._id]
+  ), { draft, published, isLoading } = useObservable(observable, {
+    draft: null,
+    published: null,
+    isLoading: !0
+  }), status = isLoading ? null : /* @__PURE__ */ jsxs(Inline, { space: 4, children: [
     presence && presence.length > 0 && /* @__PURE__ */ jsx(DocumentPreviewPresence, { presence }),
     /* @__PURE__ */ jsx(PublishedStatus, { document: published }),
     /* @__PURE__ */ jsx(DraftStatus, { document: draft })
@@ -967,7 +962,7 @@ function DocumentPreviewInRool(props) {
   return (linkProps) => /* @__PURE__ */ jsx(IntentLink, { intent: "edit", params: { id: props.documentPair.id }, children: linkProps.children });
 }
 function DocumentPreview(props) {
-  const { schemaType, documentPair } = props, doc = (documentPair == null ? void 0 : documentPair.draft) || (documentPair == null ? void 0 : documentPair.published), id = documentPair.id || "", documentPreviewStore = useDocumentPreviewStore(), schema = useSchema(), documentPresence = useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsx(
+  const { schemaType, documentPair } = props, doc = documentPair?.draft || documentPair?.published, id = documentPair.id || "", documentPreviewStore = useDocumentPreviewStore(), schema = useSchema(), documentPresence = useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsx(
     PaneItemPreview,
     {
       documentPreviewStore,
@@ -1003,14 +998,13 @@ const Container = styled(Box)`
     font-size: ${(props) => props.theme.sanity.fonts.text.sizes[1]};
   }
 `, VideoReferences = (props) => {
-  var _a;
   const schema = useSchema();
   if (!props.isLoaded)
     return /* @__PURE__ */ jsx(SpinnerBox, {});
-  if (!((_a = props.references) != null && _a.length))
+  if (!props.references?.length)
     return /* @__PURE__ */ jsx(Card, { border: !0, radius: 3, padding: 3, children: /* @__PURE__ */ jsx(Text, { size: 2, children: "No documents are using this video" }) });
   const documentPairs = collate(props.references || []);
-  return /* @__PURE__ */ jsx(Container, { children: documentPairs == null ? void 0 : documentPairs.map((documentPair) => {
+  return /* @__PURE__ */ jsx(Container, { children: documentPairs?.map((documentPair) => {
     const schemaType = schema.get(documentPair.type);
     return /* @__PURE__ */ jsx(
       Card,
@@ -1043,7 +1037,7 @@ function DeleteDialog({
 }) {
   const client = useClient(), [state, setState] = useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = useState(!0), toast = useToast();
   useEffect(() => {
-    state !== "checkingReferences" || referencesLoading || setState(references != null && references.length ? "cantDelete" : "confirm");
+    state !== "checkingReferences" || referencesLoading || setState(references?.length ? "cantDelete" : "confirm");
   }, [state, references, referencesLoading]);
   async function confirmDelete() {
     if (state !== "confirm") return;
@@ -1085,7 +1079,7 @@ function DeleteDialog({
               /* @__PURE__ */ jsx(Heading, { size: 2, children: "Video can't be deleted" }),
               /* @__PURE__ */ jsxs(Text, { size: 2, style: { marginBottom: "2rem" }, children: [
                 "There are ",
-                references == null ? void 0 : references.length,
+                references?.length,
                 " document",
                 references && references.length > 0 && "s",
                 " ",
@@ -1164,16 +1158,16 @@ function formatSeconds(seconds) {
   return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
 }
 function getVideoMetadata(doc) {
-  var _a, _b, _c, _d, _e, _f;
-  const id = doc.assetId || doc._id || "", date = (_a = doc.data) != null && _a.created_at ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
+  const id = doc.assetId || doc._id || "", date = doc.data?.created_at ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
   return {
     title: doc.filename || id.slice(0, 12),
     id,
+    playbackId: doc.playbackId,
     createdAt: date,
-    duration: (_b = doc.data) != null && _b.duration ? formatSeconds((_c = doc.data) == null ? void 0 : _c.duration) : void 0,
-    aspect_ratio: (_d = doc.data) == null ? void 0 : _d.aspect_ratio,
-    max_stored_resolution: (_e = doc.data) == null ? void 0 : _e.max_stored_resolution,
-    max_stored_frame_rate: (_f = doc.data) == null ? void 0 : _f.max_stored_frame_rate
+    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
   };
 }
 function useVideoDetails(props) {
@@ -1412,7 +1406,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                             }
                           ),
                           /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-                            (displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsx(
+                            displayInfo?.duration && /* @__PURE__ */ jsx(
                               IconInfo,
                               {
                                 text: `Duration: ${displayInfo.duration}`,
@@ -1420,7 +1414,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                                 size: 2
                               }
                             ),
-                            (displayInfo == null ? void 0 : displayInfo.max_stored_resolution) && /* @__PURE__ */ jsx(
+                            displayInfo?.max_stored_resolution && /* @__PURE__ */ jsx(
                               IconInfo,
                               {
                                 text: `Max Resolution: ${displayInfo.max_stored_resolution}`,
@@ -1428,7 +1422,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                                 size: 2
                               }
                             ),
-                            (displayInfo == null ? void 0 : displayInfo.max_stored_frame_rate) && /* @__PURE__ */ jsx(
+                            displayInfo?.max_stored_frame_rate && /* @__PURE__ */ jsx(
                               IconInfo,
                               {
                                 text: `Frame rate: ${displayInfo.max_stored_frame_rate}`,
@@ -1436,7 +1430,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                                 size: 2
                               }
                             ),
-                            (displayInfo == null ? void 0 : displayInfo.aspect_ratio) && /* @__PURE__ */ jsx(
+                            displayInfo?.aspect_ratio && /* @__PURE__ */ jsx(
                               IconInfo,
                               {
                                 text: `Aspect Ratio: ${displayInfo.aspect_ratio}`,
@@ -1460,7 +1454,15 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                               }
                             ),
                             /* @__PURE__ */ jsx(IconInfo, { text: `Mux ID: 
-${displayInfo.id}`, icon: TagIcon, size: 2 })
+${displayInfo.id}`, icon: TagIcon, size: 2 }),
+                            displayInfo?.playbackId && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Playback ID: ${displayInfo.playbackId}`,
+                                icon: TagIcon,
+                                size: 2
+                              }
+                            )
                           ] })
                         ] })
                       }
@@ -1507,7 +1509,7 @@ ${displayInfo.id}`, icon: TagIcon, size: 2 })
       }
     ),
     /* @__PURE__ */ jsxs(Inline, { space: 3, children: [
-      (displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.duration, icon: ClockIcon, size: 1, muted: !0 }),
+      displayInfo?.duration && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.duration, icon: ClockIcon, size: 1, muted: !0 }),
       /* @__PURE__ */ jsx(
         IconInfo,
         {
@@ -1583,7 +1585,7 @@ function VideoInBrowser({
   onEdit,
   asset
 }) {
-  const [renderVideo, setRenderVideo] = useState(!1), select = React.useCallback(() => onSelect == null ? void 0 : onSelect(asset), [onSelect, asset]), edit = React.useCallback(() => onEdit == null ? void 0 : onEdit(asset), [onEdit, asset]);
+  const [renderVideo, setRenderVideo] = useState(!1), select = React.useCallback(() => onSelect?.(asset), [onSelect, asset]), edit = React.useCallback(() => onEdit?.(asset), [onEdit, asset]);
   if (!asset)
     return null;
   const playbackPolicy = getPlaybackPolicy(asset);
@@ -1704,7 +1706,7 @@ function VideoInBrowser({
 }
 function VideosBrowser({ onSelect }) {
   const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(
-    () => assets.find((a) => a._id === (editedAsset == null ? void 0 : editedAsset._id)) || editedAsset,
+    () => assets.find((a2) => a2._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
   ), placement = onSelect ? "input" : "tool";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1725,7 +1727,7 @@ function VideosBrowser({ onSelect }) {
         placement === "tool" && /* @__PURE__ */ jsx(ImportVideosFromMux, {})
       ] }),
       /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-        (assets == null ? void 0 : assets.length) > 0 && /* @__PURE__ */ jsxs(Label$1, { muted: !0, children: [
+        assets?.length > 0 && /* @__PURE__ */ jsxs(Label$1, { muted: !0, children: [
           assets.length,
           " video",
           assets.length > 1 ? "s" : null,
@@ -1785,16 +1787,12 @@ function useDialogState() {
   return useState(!1);
 }
 const useMuxPolling = (asset) => {
-  var _a, _b;
   const client = useClient(), projectId = useProjectId(), dataset = useDataset(), shouldFetch = useMemo(
-    () => {
-      var _a2, _b2;
-      return !!(asset != null && asset.assetId) && ((asset == null ? void 0 : asset.status) === "preparing" || ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing");
-    },
-    [asset == null ? void 0 : asset.assetId, (_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status, asset == null ? void 0 : asset.status]
+    () => !!asset?.assetId && (asset?.status === "preparing" || asset?.data?.static_renditions?.status === "preparing"),
+    [asset?.assetId, asset?.data?.static_renditions?.status, asset?.status]
   );
   return useSWR(
-    shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset == null ? void 0 : asset.assetId}` : null,
+    shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset?.assetId}` : null,
     async () => {
       const { data } = await client.request({
         url: `/addons/mux/assets/${dataset}/data/${asset.assetId}`,
@@ -1867,16 +1865,14 @@ const useSaveSecrets = (client, secrets) => useCallback(
   }) => {
     let { signingKeyId, signingKeyPrivate } = secrets;
     try {
-      await saveSecrets(
+      if (await saveSecrets(
         client,
         token,
         secretKey,
         enableSignedUrls,
         signingKeyId,
         signingKeyPrivate
-      );
-      const valid = await testSecrets(client);
-      if (!(valid != null && valid.status) && token && secretKey)
+      ), !(await testSecrets(client))?.status && token && secretKey)
         throw new Error("Invalid secrets");
     } catch (err) {
       throw console.error("Error while trying to save secrets:", err), err;
@@ -1897,7 +1893,7 @@ const useSaveSecrets = (client, secrets) => useCallback(
           signingKeyPrivate
         );
       } catch (err) {
-        throw console.log("Error while creating and saving signing key:", err == null ? void 0 : err.message), err;
+        throw console.log("Error while creating and saving signing key:", err?.message), err;
       }
     return {
       token,
@@ -1915,13 +1911,13 @@ function init({ token, secretKey, enableSignedUrls }) {
     error: null,
     // Form inputs don't set the state back to null when clearing a field, but uses empty strings
     // This ensures the `dirty` check works correctly
-    token: token != null ? token : "",
-    secretKey: secretKey != null ? secretKey : "",
-    enableSignedUrls: enableSignedUrls != null ? enableSignedUrls : !1
+    token: token ?? "",
+    secretKey: secretKey ?? "",
+    enableSignedUrls: enableSignedUrls ?? !1
   };
 }
 function reducer(state, action) {
-  switch (action == null ? void 0 : action.type) {
+  switch (action?.type) {
     case "submit":
       return { ...state, submitting: !0, error: null };
     case "error":
@@ -1931,7 +1927,7 @@ function reducer(state, action) {
     case "change":
       return { ...state, [action.payload.name]: action.payload.value };
     default:
-      throw new Error(`Unknown action type: ${action == null ? void 0 : action.type}`);
+      throw new Error(`Unknown action type: ${action?.type}`);
   }
 }
 const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init), ids = [
@@ -1956,7 +1952,7 @@ const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init), ids
   "r"
 ];
 function MuxLogo({ height = 26 }) {
-  const id = useId(), [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo(
+  const id = useId(), [titleId, a2, b, c2, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo(
     () => ids.map((field) => `${id}-${field}`),
     [id]
   );
@@ -1975,7 +1971,7 @@ function MuxLogo({ height = 26 }) {
           /* @__PURE__ */ jsxs(
             "linearGradient",
             {
-              id: c,
+              id: c2,
               spreadMethod: "pad",
               gradientTransform: "matrix(528.38055 0 0 -528.38055 63.801 159.5)",
               gradientUnits: "userSpaceOnUse",
@@ -2357,7 +2353,7 @@ function MuxLogo({ height = 26 }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsx("clipPath", { id: a, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
+          /* @__PURE__ */ jsx("clipPath", { id: a2, 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" }) }),
@@ -2365,7 +2361,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(#${a})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("g", { clipPath: `url(#${a2})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
           "g",
           {
             style: {
@@ -2376,7 +2372,7 @@ function MuxLogo({ height = 26 }) {
               "path",
               {
                 style: {
-                  fill: `url(#${c})`,
+                  fill: `url(#${c2})`,
                   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"
@@ -2534,7 +2530,6 @@ const Logo = styled.span`
   "API Credentials"
 ] }), fieldNames = ["token", "secretKey", "enableSignedUrls"];
 function ConfigureApi({ secrets, setDialogState }) {
-  var _a, _b;
   const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = useCallback(() => setDialogState(!1), [setDialogState]), dirty = useMemo(
     () => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls,
     [secrets, state]
@@ -2626,7 +2621,7 @@ function ConfigureApi({ secrets, setDialogState }) {
             ref: firstField,
             onChange: handleChangeToken,
             type: "text",
-            value: (_a = state.token) != null ? _a : "",
+            value: state.token ?? "",
             required: !!state.secretKey || state.enableSignedUrls
           }
         ) }),
@@ -2636,7 +2631,7 @@ function ConfigureApi({ secrets, setDialogState }) {
             id: secretKeyId,
             onChange: handleChangeSecretKey,
             type: "text",
-            value: (_b = state.secretKey) != null ? _b : "",
+            value: state.secretKey ?? "",
             required: !!state.token || state.enableSignedUrls
           }
         ) }),
@@ -2690,11 +2685,51 @@ function ConfigureApi({ secrets, setDialogState }) {
     }
   );
 }
-var ConfigureApi$1 = memo(ConfigureApi);
+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 };
+}
 function ErrorBoundaryCard(props) {
-  const { children, schemaType } = props, { push: pushToast } = useToast(), errorRef = useRef(null), { ErrorBoundary, didCatch, error, reset } = useErrorBoundary({
+  const { children, schemaType } = props, { push: pushToast } = useToast(), errorRef = useRef(null), { ErrorBoundary, didCatch, error, reset } = a({
     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({
+      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?.componentStack && (console.groupCollapsed("errorInfo.componentStack"), console.log(errorInfo.componentStack), console.groupEnd()), console.groupEnd(), pushToast({
         status: "error",
         title: "Plugin crashed",
         description: /* @__PURE__ */ jsx(Flex, { align: "center", children: /* @__PURE__ */ jsxs(Inline, { space: 1, children: [
@@ -2728,7 +2763,7 @@ function ErrorBoundaryCard(props) {
       /* @__PURE__ */ jsx("code", { children: name }),
       " plugin crashed"
     ] }),
-    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", shadow: 1, radius: 2, children: /* @__PURE__ */ jsx(Text, { children: error.message }) }),
+    error?.message && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", shadow: 1, radius: 2, children: /* @__PURE__ */ jsx(Text, { children: error.message }) }),
     /* @__PURE__ */ jsx(Inline, { children: /* @__PURE__ */ jsx(Button, { onClick: handleRetry, text: "Retry" }) })
   ] }) }) }) : /* @__PURE__ */ jsx(ErrorBoundary, { children });
 }
@@ -3009,7 +3044,7 @@ function walk(entry) {
 function SelectAssets({ asset: selectedAsset, onChange, setDialogState }) {
   const handleSelect = useCallback(
     (chosenAsset) => {
-      chosenAsset != null && chosenAsset._id || onChange(PatchEvent.from([unset(["asset"])])), chosenAsset._id !== (selectedAsset == null ? void 0 : selectedAsset._id) && onChange(
+      chosenAsset?._id || onChange(PatchEvent.from([unset(["asset"])])), chosenAsset._id !== selectedAsset?._id && onChange(
         PatchEvent.from([
           setIfMissing({ asset: {}, _type: "mux.video" }),
           set({ _type: "reference", _weak: !0, _ref: chosenAsset._id }, ["asset"])
@@ -3119,24 +3154,18 @@ const TopControls = styled.div`
     }
   ) : null
 ] }) }), Player = ({ asset, buttons, readOnly, onChange }) => {
-  var _a, _b, _c, _d;
-  const isLoading = useMemo(() => (asset == null ? void 0 : asset.status) === "preparing" ? "Preparing the video" : (asset == null ? void 0 : asset.status) === "waiting_for_upload" ? "Waiting for upload to start" : (asset == null ? void 0 : asset.status) === "waiting" ? "Processing upload" : !((asset == null ? void 0 : asset.status) === "ready" || typeof (asset == null ? void 0 : asset.status) > "u"), [asset]), isPreparingStaticRenditions = useMemo(() => {
-    var _a2, _b2;
-    return ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing";
-  }, [(_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status]), playRef = useRef(null), muteRef = useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
+  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(() => asset?.data?.static_renditions?.status === "preparing", [asset?.data?.static_renditions?.status]), playRef = useRef(null), muteRef = useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
   return useEffect(() => {
-    var _a2, _b2;
     const style = document.createElement("style");
-    style.innerHTML = "button svg { vertical-align: middle; }", (_a2 = playRef.current) != null && _a2.shadowRoot && playRef.current.shadowRoot.appendChild(style), (_b2 = muteRef == null ? void 0 : muteRef.current) != null && _b2.shadowRoot && muteRef.current.shadowRoot.appendChild(style.cloneNode(!0));
+    style.innerHTML = "button svg { vertical-align: middle; }", playRef.current?.shadowRoot && playRef.current.shadowRoot.appendChild(style), muteRef?.current?.shadowRoot && muteRef.current.shadowRoot.appendChild(style.cloneNode(!0));
   }, []), useEffect(() => {
-    var _a2, _b2, _c2;
-    if ((asset == null ? void 0 : asset.status) === "errored")
-      throw handleCancelUpload(), new Error((_c2 = (_b2 = (_a2 = asset.data) == null ? void 0 : _a2.errors) == null ? void 0 : _b2.messages) == null ? void 0 : _c2.join(" "));
-  }, [(_d = (_c = asset.data) == null ? void 0 : _c.errors) == null ? void 0 : _d.messages, asset == null ? void 0 : asset.status, handleCancelUpload]), !asset || !asset.status ? null : isLoading ? /* @__PURE__ */ jsx(
+    if (asset?.status === "errored")
+      throw handleCancelUpload(), new Error(asset.data?.errors?.messages?.join(" "));
+  }, [asset.data?.errors?.messages, asset?.status, handleCancelUpload]), !asset || !asset.status ? null : isLoading ? /* @__PURE__ */ jsx(
     UploadProgress,
     {
       progress: 100,
-      filename: asset == null ? void 0 : asset.filename,
+      filename: asset?.filename,
       text: isLoading !== !0 && isLoading || "Waiting for Mux to complete the upload",
       onCancel: readOnly ? void 0 : () => handleCancelUpload()
     }
@@ -3255,9 +3284,9 @@ 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]), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
   return useEffect(() => {
     open && dialogState && setOpen(!1);
-  }, [dialogState, open]), useClickOutside(
-    useCallback(() => setOpen(!1), []),
-    [menuElement]
+  }, [dialogState, open]), useClickOutsideEvent(
+    () => setOpen(!1),
+    () => [menuElement]
   ), /* @__PURE__ */ jsxs(Inline, { space: 1, padding: 2, children: [
     isSigned && /* @__PURE__ */ jsx(
       Tooltip,
@@ -3338,12 +3367,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 u = -1;
+  let u2 = -1;
   const r = 10 ** dp;
   do
-    bytes /= thresh, ++u;
-  while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
-  return bytes.toFixed(dp) + " " + units[u];
+    bytes /= thresh, ++u2;
+  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" },
@@ -3399,7 +3428,7 @@ function TextTracksEditor({
         {
           id: "include-autogenerated-track",
           style: { display: "block" },
-          checked: !!(track != null && track.language_code),
+          checked: !!track?.language_code,
           onChange: () => {
             dispatch(track ? { action: "track", id: track._id, subAction: "delete" } : {
               action: "track",
@@ -3435,10 +3464,7 @@ function TextTracksEditor({
         placeholder: "Select language",
         filterOption: (query, option) => option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 || option.value.toLowerCase().indexOf(query.toLowerCase()) > -1,
         openButton: !0,
-        renderValue: (value) => {
-          var _a;
-          return ((_a = SUBTITLE_LANGUAGES[track.type].find((l) => l.value === value)) == null ? void 0 : _a.label) || value;
-        },
+        renderValue: (value) => SUBTITLE_LANGUAGES[track.type].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,
           " (",
@@ -3475,14 +3501,13 @@ function UploadConfiguration({
     ] : []
   ).current, [config, dispatch] = useReducer(
     (prev, action) => {
-      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: (_a = prev.text_tracks) == null ? void 0 : _a.filter(({ type }) => type !== "autogenerated")
+            text_tracks: prev.text_tracks?.filter(({ type }) => type !== "autogenerated")
           }) : Object.assign({}, prev, {
             encoding_tier: action.value,
             mp4_support: pluginConfig.mp4_support,
@@ -3494,6 +3519,7 @@ function UploadConfiguration({
         case "normalize_audio":
         case "signed":
           return Object.assign({}, prev, { [action.action]: action.value });
+        // Updating individual tracks
         case "track": {
           const text_tracks = [...prev.text_tracks], target_track_i = text_tracks.findIndex(({ _id: _id2 }) => _id2 === action.id);
           switch (action.subAction) {
@@ -3810,10 +3836,7 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card),
       onSelect && onSelect(event.target.files);
     },
     [onSelect]
-  ), handleButtonClick = useCallback(() => {
-    var _a;
-    return (_a = inputRef.current) == null ? void 0 : _a.click();
-  }, []);
+  ), handleButtonClick = useCallback(() => inputRef.current?.click(), []);
   return /* @__PURE__ */ jsxs(Label, { htmlFor: inputId, children: [
     /* @__PURE__ */ jsx(
       HiddenInput,
@@ -3902,7 +3925,6 @@ const INITIAL_STATE = {
   error: null
 };
 function Uploader(props) {
-  var _a;
   const toast = useToast(), containerRef = useRef(null), dragEnteredEls = useRef([]), [dragState, setDragState] = useState(null), cancelUploadButton = useRef(
     (() => {
       const events$ = new Subject();
@@ -3913,7 +3935,6 @@ function Uploader(props) {
     })()
   ).current, uploadRef = useRef(null), [state, dispatch] = useReducer(
     (prev, action) => {
-      var _a2, _b;
       switch (action.action) {
         case "stageUpload":
           return Object.assign({}, INITIAL_STATE, { stagedUpload: action.input });
@@ -3938,9 +3959,9 @@ function Uploader(props) {
           });
         case "reset":
         case "complete":
-          return (_a2 = uploadRef.current) == null || _a2.unsubscribe(), uploadRef.current = null, INITIAL_STATE;
+          return uploadRef.current?.unsubscribe(), uploadRef.current = null, INITIAL_STATE;
         case "error":
-          return (_b = uploadRef.current) == null || _b.unsubscribe(), uploadRef.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
+          return uploadRef.current?.unsubscribe(), uploadRef.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
         default:
           return prev;
       }
@@ -3976,8 +3997,7 @@ function Uploader(props) {
           takeUntil(
             cancelUploadButton.observable.pipe(
               tap(() => {
-                var _a2;
-                (_a2 = state.uploadStatus) != null && _a2.uuid && props.client.delete(state.uploadStatus.uuid);
+                state.uploadStatus?.uuid && props.client.delete(state.uploadStatus.uuid);
               })
             )
           )
@@ -4031,10 +4051,9 @@ function Uploader(props) {
   }, handleDragOver = (event) => {
     event.preventDefault(), event.stopPropagation();
   }, handleDragEnter = (event) => {
-    var _a2, _b;
     event.stopPropagation(), dragEnteredEls.current.push(event.target);
-    const type = (_b = (_a2 = event.dataTransfer.items) == null ? void 0 : _a2[0]) == null ? void 0 : _b.type;
-    setDragState(type != null && type.startsWith("video/") ? "valid" : "invalid");
+    const type = event.dataTransfer.items?.[0]?.type;
+    setDragState(type?.startsWith("video/") ? "valid" : "invalid");
   }, handleDragLeave = (event) => {
     event.stopPropagation();
     const idx = dragEnteredEls.current.indexOf(event.target);
@@ -4056,7 +4075,7 @@ function Uploader(props) {
       {
         onCancel: cancelUploadButton.handleClick,
         progress: uploadStatus.progress,
-        filename: ((_a = uploadStatus.file) == null ? void 0 : _a.name) || uploadStatus.url
+        filename: uploadStatus.file?.name || uploadStatus.url
       }
     );
   }
@@ -4124,8 +4143,7 @@ function Uploader(props) {
   ] });
 }
 const Input = (props) => {
-  var _a;
-  const client = useClient(), secretDocumentValues = useSecretsDocumentValues(), assetDocumentValues = useAssetDocumentValues((_a = props.value) == null ? void 0 : _a.asset), poll = useMuxPolling(props.readOnly ? void 0 : (assetDocumentValues == null ? void 0 : assetDocumentValues.value) || void 0), [dialogState, setDialogState] = useDialogState(), error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
+  const client = useClient(), secretDocumentValues = useSecretsDocumentValues(), assetDocumentValues = useAssetDocumentValues(props.value?.asset), poll = useMuxPolling(props.readOnly ? void 0 : assetDocumentValues?.value || void 0), [dialogState, setDialogState] = useDialogState(), error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
   if (error)
     throw error;
   const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;