sanity-plugin-mux-input 2.3.6 → 2.4.0

package/dist/index.js

@@ -195,25 +195,24 @@ const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumen
     path$1
   ), cache = React.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 = sanity.useDocumentStore(), client = sanity.useClient({
     apiVersion: SANITY_API_VERSION
-  }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!((_a = secretDocumentValues.value.secrets) != null && _a.secretKey), [importError, setImportError] = React.useState(), [importState, setImportState] = React.useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
+  }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!secretDocumentValues.value.secrets?.secretKey, [importError, setImportError] = React.useState(), [importState, setImportState] = React.useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
     secrets: secretDocumentValues.value.secrets,
     enabled: hasSecrets && dialogOpen
   }), missingAssets = React.useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a2) => !assetExistsInSanity(a2, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = React.useState([]), closeDialog = () => {
@@ -247,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.uuid(),
@@ -285,9 +283,8 @@ function useInView(options = {}) {
   return React.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);
@@ -310,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]);
 }
@@ -326,7 +323,7 @@ function generateJwt(client, playbackId, aud, payload) {
     throw new TypeError("Missing `signingKeyPrivate`.\n Check your plugin's configuration");
   const { default: sign } = suspendReact.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",
@@ -339,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,
@@ -358,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);
@@ -389,7 +385,7 @@ function VideoThumbnail({
       status !== "error" && setStatus("error");
       return;
     }
-  }, [asset, client, width, status, setStatus]);
+  }, [asset, client, posterWidth, status]);
   function handleLoad() {
     setStatus("loaded");
   }
@@ -474,7 +470,6 @@ function MissingAsset({
   selectAsset,
   selected
 }) {
-  var _a;
   const duration = sanity.useFormattedDuration(asset.duration * 1e3);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Card,
@@ -503,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
           }
@@ -534,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__ */ jsxRuntime.jsx(
     ui.Dialog,
     {
@@ -567,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 && ui.Spinner,
@@ -773,10 +767,9 @@ function VideoPlayer({
   children,
   ...props
 }) {
-  var _a, _b;
   const client = useClient(), isAudio = assetIsAudio(asset), { src: videoSrc, error } = React.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 };
@@ -787,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)
@@ -805,7 +798,7 @@ function VideoPlayer({
           crossOrigin: "anonymous",
           metadata: {
             player_name: "Sanity Admin Dashboard",
-            player_version: "2.3.6",
+            player_version: "2.4.0",
             page_type: "Preview Player"
           },
           audio: isAudio,
@@ -838,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();
@@ -854,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 {
@@ -970,7 +962,7 @@ function DocumentPreviewInRool(props) {
   return (linkProps) => /* @__PURE__ */ jsxRuntime.jsx(router.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 = sanity.useDocumentPreviewStore(), schema = sanity.useSchema(), documentPresence = sanity.useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = React.useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsxRuntime.jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsxRuntime.jsx(
+  const { schemaType, documentPair } = props, doc = documentPair?.draft || documentPair?.published, id = documentPair.id || "", documentPreviewStore = sanity.useDocumentPreviewStore(), schema = sanity.useSchema(), documentPresence = sanity.useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = React.useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsxRuntime.jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsxRuntime.jsx(
     PaneItemPreview,
     {
       documentPreviewStore,
@@ -1006,14 +998,13 @@ const Container = styledComponents.styled(ui.Box)`
     font-size: ${(props) => props.theme.sanity.fonts.text.sizes[1]};
   }
 `, VideoReferences = (props) => {
-  var _a;
   const schema = sanity.useSchema();
   if (!props.isLoaded)
     return /* @__PURE__ */ jsxRuntime.jsx(SpinnerBox, {});
-  if (!((_a = props.references) != null && _a.length))
+  if (!props.references?.length)
     return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { border: !0, radius: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: "No documents are using this video" }) });
   const documentPairs = sanity.collate(props.references || []);
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: documentPairs == null ? void 0 : documentPairs.map((documentPair) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: documentPairs?.map((documentPair) => {
     const schemaType = schema.get(documentPair.type);
     return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Card,
@@ -1046,7 +1037,7 @@ function DeleteDialog({
 }) {
   const client = useClient(), [state, setState] = React.useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = React.useState(!0), toast = ui.useToast();
   React.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;
@@ -1088,7 +1079,7 @@ function DeleteDialog({
               /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { size: 2, children: "Video can't be deleted" }),
               /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, style: { marginBottom: "2rem" }, children: [
                 "There are ",
-                references == null ? void 0 : references.length,
+                references?.length,
                 " document",
                 references && references.length > 0 && "s",
                 " ",
@@ -1167,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) {
@@ -1415,7 +1406,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
                             }
                           ),
                           /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-                            (displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsxRuntime.jsx(
+                            displayInfo?.duration && /* @__PURE__ */ jsxRuntime.jsx(
                               IconInfo,
                               {
                                 text: `Duration: ${displayInfo.duration}`,
@@ -1423,7 +1414,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
                                 size: 2
                               }
                             ),
-                            (displayInfo == null ? void 0 : displayInfo.max_stored_resolution) && /* @__PURE__ */ jsxRuntime.jsx(
+                            displayInfo?.max_stored_resolution && /* @__PURE__ */ jsxRuntime.jsx(
                               IconInfo,
                               {
                                 text: `Max Resolution: ${displayInfo.max_stored_resolution}`,
@@ -1431,7 +1422,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
                                 size: 2
                               }
                             ),
-                            (displayInfo == null ? void 0 : displayInfo.max_stored_frame_rate) && /* @__PURE__ */ jsxRuntime.jsx(
+                            displayInfo?.max_stored_frame_rate && /* @__PURE__ */ jsxRuntime.jsx(
                               IconInfo,
                               {
                                 text: `Frame rate: ${displayInfo.max_stored_frame_rate}`,
@@ -1439,7 +1430,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
                                 size: 2
                               }
                             ),
-                            (displayInfo == null ? void 0 : displayInfo.aspect_ratio) && /* @__PURE__ */ jsxRuntime.jsx(
+                            displayInfo?.aspect_ratio && /* @__PURE__ */ jsxRuntime.jsx(
                               IconInfo,
                               {
                                 text: `Aspect Ratio: ${displayInfo.aspect_ratio}`,
@@ -1463,7 +1454,15 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
                               }
                             ),
                             /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { text: `Mux ID: 
-${displayInfo.id}`, icon: icons.TagIcon, size: 2 })
+${displayInfo.id}`, icon: icons.TagIcon, size: 2 }),
+                            displayInfo?.playbackId && /* @__PURE__ */ jsxRuntime.jsx(
+                              IconInfo,
+                              {
+                                text: `Playback ID: ${displayInfo.playbackId}`,
+                                icon: icons.TagIcon,
+                                size: 2
+                              }
+                            )
                           ] })
                         ] })
                       }
@@ -1510,7 +1509,7 @@ ${displayInfo.id}`, icon: icons.TagIcon, size: 2 })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 3, children: [
-      (displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { text: displayInfo.duration, icon: icons.ClockIcon, size: 1, muted: !0 }),
+      displayInfo?.duration && /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { text: displayInfo.duration, icon: icons.ClockIcon, size: 1, muted: !0 }),
       /* @__PURE__ */ jsxRuntime.jsx(
         IconInfo,
         {
@@ -1586,7 +1585,7 @@ function VideoInBrowser({
   onEdit,
   asset
 }) {
-  const [renderVideo, setRenderVideo] = React.useState(!1), select = React__default.default.useCallback(() => onSelect == null ? void 0 : onSelect(asset), [onSelect, asset]), edit = React__default.default.useCallback(() => onEdit == null ? void 0 : onEdit(asset), [onEdit, asset]);
+  const [renderVideo, setRenderVideo] = React.useState(!1), select = React__default.default.useCallback(() => onSelect?.(asset), [onSelect, asset]), edit = React__default.default.useCallback(() => onEdit?.(asset), [onEdit, asset]);
   if (!asset)
     return null;
   const playbackPolicy = getPlaybackPolicy(asset);
@@ -1707,7 +1706,7 @@ function VideoInBrowser({
 }
 function VideosBrowser({ onSelect }) {
   const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = React.useState(null), freshEditedAsset = React.useMemo(
-    () => assets.find((a2) => a2._id === (editedAsset == null ? void 0 : editedAsset._id)) || editedAsset,
+    () => assets.find((a2) => a2._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
   ), placement = onSelect ? "input" : "tool";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1728,7 +1727,7 @@ function VideosBrowser({ onSelect }) {
         placement === "tool" && /* @__PURE__ */ jsxRuntime.jsx(ImportVideosFromMux, {})
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-        (assets == null ? void 0 : assets.length) > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Label, { muted: !0, children: [
+        assets?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Label, { muted: !0, children: [
           assets.length,
           " video",
           assets.length > 1 ? "s" : null,
@@ -1788,16 +1787,12 @@ function useDialogState() {
   return React.useState(!1);
 }
 const useMuxPolling = (asset) => {
-  var _a, _b;
   const client = useClient(), projectId = sanity.useProjectId(), dataset = sanity.useDataset(), shouldFetch = React.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__default.default(
-    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}`,
@@ -1870,16 +1865,14 @@ const useSaveSecrets = (client, secrets) => React.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;
@@ -1900,7 +1893,7 @@ const useSaveSecrets = (client, secrets) => React.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,
@@ -1918,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":
@@ -1934,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) => React.useReducer(reducer, secrets, init), ids = [
@@ -2537,7 +2530,6 @@ const Logo = styledComponents.styled.span`
   "API Credentials"
 ] }), fieldNames = ["token", "secretKey", "enableSignedUrls"];
 function ConfigureApi({ secrets, setDialogState }) {
-  var _a, _b;
   const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = React.useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = React.useCallback(() => setDialogState(!1), [setDialogState]), dirty = React.useMemo(
     () => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls,
     [secrets, state]
@@ -2629,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
           }
         ) }),
@@ -2639,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
           }
         ) }),
@@ -2737,7 +2729,7 @@ function a(t) {
 function ErrorBoundaryCard(props) {
   const { children, schemaType } = props, { push: pushToast } = ui.useToast(), errorRef = React.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__ */ jsxRuntime.jsx(ui.Flex, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 1, children: [
@@ -2771,7 +2763,7 @@ function ErrorBoundaryCard(props) {
       /* @__PURE__ */ jsxRuntime.jsx("code", { children: name }),
       " plugin crashed"
     ] }),
-    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, tone: "critical", shadow: 1, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: error.message }) }),
+    error?.message && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, tone: "critical", shadow: 1, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: error.message }) }),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Inline, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleRetry, text: "Retry" }) })
   ] }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children });
 }
@@ -3052,7 +3044,7 @@ function walk(entry) {
 function SelectAssets({ asset: selectedAsset, onChange, setDialogState }) {
   const handleSelect = React.useCallback(
     (chosenAsset) => {
-      chosenAsset != null && chosenAsset._id || onChange(sanity.PatchEvent.from([sanity.unset(["asset"])])), chosenAsset._id !== (selectedAsset == null ? void 0 : selectedAsset._id) && onChange(
+      chosenAsset?._id || onChange(sanity.PatchEvent.from([sanity.unset(["asset"])])), chosenAsset._id !== selectedAsset?._id && onChange(
         sanity.PatchEvent.from([
           sanity.setIfMissing({ asset: {}, _type: "mux.video" }),
           sanity.set({ _type: "reference", _weak: !0, _ref: chosenAsset._id }, ["asset"])
@@ -3162,24 +3154,18 @@ const TopControls = styledComponents.styled.div`
     }
   ) : null
 ] }) }), Player = ({ asset, buttons, readOnly, onChange }) => {
-  var _a, _b, _c, _d;
-  const isLoading = React.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 = React.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 = React.useRef(null), muteRef = React.useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
+  const isLoading = React.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 = React.useMemo(() => asset?.data?.static_renditions?.status === "preparing", [asset?.data?.static_renditions?.status]), playRef = React.useRef(null), muteRef = React.useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
   return React.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));
   }, []), React.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__ */ jsxRuntime.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__ */ jsxRuntime.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()
     }
@@ -3298,9 +3284,9 @@ function PlayerActionsMenu(props) {
   const { asset, readOnly, dialogState, setDialogState, onChange, onSelect } = props, [open, setOpen] = React.useState(!1), [menuElement, setMenuRef] = React.useState(null), isSigned = React.useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
   return React.useEffect(() => {
     open && dialogState && setOpen(!1);
-  }, [dialogState, open]), ui.useClickOutside(
-    React.useCallback(() => setOpen(!1), []),
-    [menuElement]
+  }, [dialogState, open]), ui.useClickOutsideEvent(
+    () => setOpen(!1),
+    () => [menuElement]
   ), /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 1, padding: 2, children: [
     isSigned && /* @__PURE__ */ jsxRuntime.jsx(
       ui.Tooltip,
@@ -3442,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",
@@ -3478,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__ */ jsxRuntime.jsx(ui.Card, { "data-as": "button", padding: 3, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, textOverflow: "ellipsis", children: [
           option.label,
           " (",
@@ -3518,14 +3501,13 @@ function UploadConfiguration({
     ] : []
   ).current, [config, dispatch] = React.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,
@@ -3537,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) {
@@ -3853,10 +3836,7 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(ui.Card
       onSelect && onSelect(event.target.files);
     },
     [onSelect]
-  ), handleButtonClick = React.useCallback(() => {
-    var _a;
-    return (_a = inputRef.current) == null ? void 0 : _a.click();
-  }, []);
+  ), handleButtonClick = React.useCallback(() => inputRef.current?.click(), []);
   return /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: inputId, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       HiddenInput,
@@ -3945,7 +3925,6 @@ const INITIAL_STATE = {
   error: null
 };
 function Uploader(props) {
-  var _a;
   const toast = ui.useToast(), containerRef = React.useRef(null), dragEnteredEls = React.useRef([]), [dragState, setDragState] = React.useState(null), cancelUploadButton = React.useRef(
     (() => {
       const events$ = new rxjs.Subject();
@@ -3956,7 +3935,6 @@ function Uploader(props) {
     })()
   ).current, uploadRef = React.useRef(null), [state, dispatch] = React.useReducer(
     (prev, action) => {
-      var _a2, _b;
       switch (action.action) {
         case "stageUpload":
           return Object.assign({}, INITIAL_STATE, { stagedUpload: action.input });
@@ -3981,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;
       }
@@ -4019,8 +3997,7 @@ function Uploader(props) {
           operators.takeUntil(
             cancelUploadButton.observable.pipe(
               operators.tap(() => {
-                var _a2;
-                (_a2 = state.uploadStatus) != null && _a2.uuid && props.client.delete(state.uploadStatus.uuid);
+                state.uploadStatus?.uuid && props.client.delete(state.uploadStatus.uuid);
               })
             )
           )
@@ -4074,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);
@@ -4099,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
       }
     );
   }
@@ -4167,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;