sanity-plugin-mux-input 2.19.1 → 3.0.1

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { useClient as useClient$1, createHookFromObservableFactory, useDocumentS
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { ErrorOutlineIcon, InfoOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, ChevronLeftIcon, ChevronRightIcon, SyncIcon, SortIcon, UploadIcon, TranslateIcon, DownloadIcon, AddIcon, ChevronUpIcon, ChevronDownIcon, TrashIcon, EditIcon, WarningOutlineIcon, PublishIcon, DocumentIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, ImageIcon, ResetIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
 import { Dialog, Stack, Card, Text, Button, useTheme_v2, Flex, Box, TextInput, Checkbox, Code, Inline, Spinner, Heading, Label as Label$1, Radio, MenuButton, Menu, MenuItem, useToast, Autocomplete, Tooltip, TabList, Tab, TabPanel, Grid, useClickOutsideEvent, Popover, MenuDivider, rem } from "@sanity/ui";
-import React, { createContext, useContext, useState, useMemo, useCallback, useReducer, useId, memo, useRef, useEffect, Suspense, isValidElement, PureComponent, createElement, forwardRef } from "react";
+import React, { createContext, useState, useContext, useMemo, useCallback, useReducer, useId, memo, useRef, useEffect, Suspense, isValidElement, PureComponent, createElement, forwardRef } from "react";
 import compact from "lodash/compact.js";
 import toLower from "lodash/toLower.js";
 import trim from "lodash/trim.js";
@@ -15,6 +15,7 @@ import { uuid } from "@sanity/uuid";
 import { expand, concatMap, tap, switchMap, mergeMap, catchError, mergeMapTo, takeUntil } from "rxjs/operators";
 import LanguagesList from "iso-639-1";
 import MuxPlayer from "@mux/mux-player-react/lazy";
+import { getDevicePixelRatio } from "use-device-pixel-ratio";
 import { IntentLink } from "sanity/router";
 import isNumber from "lodash/isNumber.js";
 import isString from "lodash/isString.js";
@@ -146,7 +147,7 @@ function useAssets() {
 function useDialogState() {
   return useState(!1);
 }
-const PLUGIN_VERSION_QUERY = { sanityVersion: "2.19.1" };
+const PLUGIN_VERSION_QUERY = { sanityVersion: "3.0.1" };
 function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate, drmConfigId) {
   const doc = {
     _id: "secrets.mux",
@@ -390,7 +391,7 @@ const Logo = styled.span`
   /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(MuxLogo, { height: 13 }) }),
   "API Credentials"
 ] });
-function FormField(props) {
+function FormField$1(props) {
   const { children, title, description, inputId } = props;
   return /* @__PURE__ */ jsxs(Stack, { space: 1, children: [
     /* @__PURE__ */ jsx(Flex, { align: "flex-end", children: /* @__PURE__ */ jsx(Box, { flex: 1, paddingY: 2, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
@@ -400,7 +401,7 @@ function FormField(props) {
     /* @__PURE__ */ jsx("div", { children })
   ] });
 }
-var FormField$1 = memo(FormField);
+var FormField = memo(FormField$1);
 const fieldNames = ["token", "secretKey", "enableSignedUrls", "drmConfigId"];
 function ConfigureApiDialog({ secrets, setDialogState }) {
   const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = useCallback(() => setDialogState(!1), [setDialogState]), dirty = useMemo(
@@ -497,7 +498,7 @@ function ConfigureApiDialog({ secrets, setDialogState }) {
             "The credentials will be stored safely in a hidden document only available to editors."
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx(FormField$1, { title: "Access Token", inputId: tokenId, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(FormField, { title: "Access Token", inputId: tokenId, children: /* @__PURE__ */ jsx(
           TextInput,
           {
             id: tokenId,
@@ -508,7 +509,7 @@ function ConfigureApiDialog({ secrets, setDialogState }) {
             required: !!state.secretKey || state.enableSignedUrls
           }
         ) }),
-        /* @__PURE__ */ jsx(FormField$1, { title: "Secret Key", inputId: secretKeyId, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(FormField, { title: "Secret Key", inputId: secretKeyId, children: /* @__PURE__ */ jsx(
           TextInput,
           {
             id: secretKeyId,
@@ -541,7 +542,7 @@ function ConfigureApiDialog({ secrets, setDialogState }) {
             ] })
           ] }) }) : null
         ] }),
-        /* @__PURE__ */ jsx(FormField$1, { title: "DRM Configuration ID", inputId: drmConfigIdId, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(FormField, { title: "DRM Configuration ID", inputId: drmConfigIdId, children: /* @__PURE__ */ jsx(
           TextInput,
           {
             id: drmConfigIdId,
@@ -2973,14 +2974,6 @@ function CaptionsDialog({ asset }) {
   const { setDialogState } = useDialogStateContext(), dialogId = `CaptionsDialog${useId()}`;
   return /* @__PURE__ */ jsx(Dialog, { id: dialogId, header: "Edit Captions", onClose: () => setDialogState(!1), width: 1, children: /* @__PURE__ */ jsx(Stack, { padding: 4, children: /* @__PURE__ */ jsx(TextTracksManager, { asset }) }) });
 }
-function getDevicePixelRatio(options) {
-  const {
-    defaultDpr = 1,
-    maxDpr = 3,
-    round = !0
-  } = options || {}, dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : defaultDpr;
-  return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
-}
 function formatSeconds(seconds) {
   if (typeof seconds != "number" || Number.isNaN(seconds))
     return "";
@@ -3172,7 +3165,7 @@ function VideoPlayer({
                   crossOrigin: "anonymous",
                   metadata: {
                     player_name: "Sanity Admin Dashboard",
-                    player_version: "2.19.1",
+                    player_version: "3.0.1",
                     page_type: "Preview Player"
                   },
                   audio: isAudio,
@@ -3540,7 +3533,7 @@ function useVideoDetails(props) {
     isResyncing
   };
 }
-const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.label, description: props.description, inputId: props.label, children: /* @__PURE__ */ jsx(
+const AssetInput = (props) => /* @__PURE__ */ jsx(FormField, { title: props.label, description: props.description, inputId: props.label, children: /* @__PURE__ */ jsx(
   TextInput,
   {
     id: props.label,
@@ -4232,7 +4225,7 @@ function a(t) {
   }, []);
   return { ErrorBoundary: (p = h.current, p !== null ? p : (h.current = l(), h.current)), didCatch: i.didCatch, error: i.error, reset: s };
 }
-function ErrorBoundaryCard(props) {
+function ErrorBoundaryCard$1(props) {
   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?.componentStack && (console.groupCollapsed("errorInfo.componentStack"), console.log(errorInfo.componentStack), console.groupEnd()), console.groupEnd(), pushToast({
@@ -4273,7 +4266,7 @@ function ErrorBoundaryCard(props) {
     /* @__PURE__ */ jsx(Inline, { children: /* @__PURE__ */ jsx(Button, { onClick: handleRetry, text: "Retry" }) })
   ] }) }) }) : /* @__PURE__ */ jsx(ErrorBoundary, { children });
 }
-var ErrorBoundaryCard$1 = memo(ErrorBoundaryCard);
+var ErrorBoundaryCard = memo(ErrorBoundaryCard$1);
 const InputFallback = () => /* @__PURE__ */ jsx("div", { style: { padding: 1 }, children: /* @__PURE__ */ jsx(
   Card,
   {
@@ -4869,7 +4862,7 @@ const FileButton = styled(MenuItem)(({ theme }) => {
   background: transparent;
   color: white;
 `, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
-function PlayerActionsMenu(props) {
+function PlayerActionsMenu$1(props) {
   const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset)?.policy === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), { resyncAsset, isResyncing } = useResyncAsset({ showToast: !0 }), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]), handleResync = useCallback(async () => {
     setOpen(!1), await resyncAsset(asset);
   }, [resyncAsset, asset]);
@@ -4981,7 +4974,7 @@ function PlayerActionsMenu(props) {
     )
   ] });
 }
-var PlayerActionsMenu$1 = memo(PlayerActionsMenu);
+var PlayerActionsMenu = memo(PlayerActionsMenu$1);
 function useFetchFileSize(stagedUpload, maxFileSize) {
   const [fileSize, setFileSize] = useState(null), [isLoadingFileSize, setIsLoadingFileSize] = useState(!1), [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = useState(!1);
   return useEffect(() => {
@@ -5690,7 +5683,7 @@ function TextTracksEditor({
   defaultLang
 }) {
   const track = tracks[0];
-  return /* @__PURE__ */ jsx(FormField$2, { title: "Auto-generated subtitle or caption", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+  return /* @__PURE__ */ jsx(FormField$2, { title: "Auto-generated subtitle or caption", path: [], children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
     /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
       /* @__PURE__ */ jsx(
         Checkbox,
@@ -5933,6 +5926,7 @@ const RESOLUTION_TIERS = [
 }) => /* @__PURE__ */ jsx(
   FormField$2,
   {
+    path: [],
     title: "Resolution Tier",
     description: /* @__PURE__ */ jsxs(Fragment, { children: [
       "The maximum",
@@ -6008,6 +6002,7 @@ const RESOLUTION_TIERS = [
   return /* @__PURE__ */ jsx(Stack, { space: 3, children: /* @__PURE__ */ jsx(
     FormField$2,
     {
+      path: [],
       title: "Static Renditions",
       description: "Generate downloadable MP4 or M4A files. Note: Mux will not upscale to produce MP4 renditions - renditions that would cause upscaling are skipped.",
       children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
@@ -6276,6 +6271,7 @@ function UploadConfiguration({
           /* @__PURE__ */ jsx(
             FormField$2,
             {
+              path: [],
               title: "Video Quality Level",
               description: /* @__PURE__ */ jsxs(Fragment, { children: [
                 "The video quality level informs the cost, quality, and available platform features for the asset.",
@@ -6312,7 +6308,7 @@ function UploadConfiguration({
             }
           ),
           !basicConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", path: [], children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
               /* @__PURE__ */ jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
               maxSupportedResolution > 0 && /* @__PURE__ */ jsx(
                 ResolutionTierSelector,
@@ -6430,6 +6426,7 @@ function WatermarkSection({
   return videoAssetMetadata?.isAudioOnly !== !1 ? null : /* @__PURE__ */ jsx(
     FormField$2,
     {
+      path: [],
       title: "Watermark",
       description: /* @__PURE__ */ jsxs(Fragment, { children: [
         "Add a watermark overlay to your video using Mux's native watermark support.",
@@ -6948,7 +6945,7 @@ function Uploader(props) {
                 onChange: props.onChange,
                 config: props.config,
                 buttons: /* @__PURE__ */ jsx(
-                  PlayerActionsMenu$1,
+                  PlayerActionsMenu,
                   {
                     accept: acceptMimeString,
                     asset: props.asset,
@@ -6988,12 +6985,12 @@ function Uploader(props) {
     )
   ] });
 }
-const Input = (props) => {
+const Input$1 = (props) => {
   const client = useClient(), secretDocumentValues = useSecretsDocumentValues(), assetDocumentValues = useAssetDocumentValues(props.value?.asset), poll = useMuxPolling(props.readOnly ? void 0 : assetDocumentValues?.value || void 0), [dialogState, setDialogState] = useDialogState(), { hasConfigAccess } = useAccessControl(props.config), error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
   if (error)
     throw error;
   const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
-  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(ErrorBoundaryCard$1, { schemaType: props.schemaType, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(InputFallback, {}), children: isLoading ? /* @__PURE__ */ jsx(InputFallback, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(ErrorBoundaryCard, { schemaType: props.schemaType, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(InputFallback, {}), children: isLoading ? /* @__PURE__ */ jsx(InputFallback, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
     secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */ jsx(Onboard, { setDialogState, config: props.config }) : /* @__PURE__ */ jsx(
       Uploader,
       {
@@ -7017,11 +7014,11 @@ const Input = (props) => {
     )
   ] }) }) }) });
 };
-var Input$1 = memo(Input);
+var Input = memo(Input$1);
 function muxVideoCustomRendering(config) {
   return {
     components: {
-      input: (props) => /* @__PURE__ */ jsx(Input$1, { config: { ...config, ...props.schemaType.options }, ...props })
+      input: (props) => /* @__PURE__ */ jsx(Input, { config: { ...config, ...props.schemaType.options }, ...props })
     },
     preview: {
       select: {