sanity-plugin-mux-input 4.1.1 → 4.1.3

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, DocumentPreviewPresence, getPreviewValueWithFallback, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, useCurrentUser, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ErrorOutlineIcon, InfoOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, ChevronLeftIcon, ChevronRightIcon, SyncIcon, SortIcon, DownloadIcon, UploadIcon, TranslateIcon, 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 { SearchIcon } from "@sanity/icons/Search";
 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 { createContext, useState, useCallback, useMemo, useContext, useReducer, useId, memo, useRef, useEffect, Suspense, isValidElement } from "react";
 import compact from "lodash/compact.js";
@@ -11,20 +11,54 @@ import words from "lodash/words.js";
 import { suspend, clear, preload } from "suspend-react";
 import { defer, timer, of, Observable, concat, throwError, from, Subject } from "rxjs";
 import { styled, css } from "styled-components";
+import { CheckmarkCircleIcon } from "@sanity/icons/CheckmarkCircle";
+import { ErrorOutlineIcon } from "@sanity/icons/ErrorOutline";
+import { InfoOutlineIcon } from "@sanity/icons/InfoOutline";
+import { RetrieveIcon } from "@sanity/icons/Retrieve";
+import { RetryIcon } from "@sanity/icons/Retry";
 import { uuid } from "@sanity/uuid";
 import { expand, concatMap, tap, switchMap, mergeMap, catchError, mergeMapTo, takeUntil } from "rxjs/operators";
+import { ChevronLeftIcon } from "@sanity/icons/ChevronLeft";
+import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
+import { SyncIcon } from "@sanity/icons/Sync";
+import { SortIcon } from "@sanity/icons/Sort";
+import { CalendarIcon } from "@sanity/icons/Calendar";
+import { CheckmarkIcon } from "@sanity/icons/Checkmark";
+import { ClockIcon } from "@sanity/icons/Clock";
+import { CropIcon } from "@sanity/icons/Crop";
+import { EditIcon } from "@sanity/icons/Edit";
+import { RevertIcon } from "@sanity/icons/Revert";
+import { TagIcon } from "@sanity/icons/Tag";
+import { TrashIcon } from "@sanity/icons/Trash";
+import { DownloadIcon } from "@sanity/icons/Download";
+import { AddIcon } from "@sanity/icons/Add";
+import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
+import { ChevronUpIcon } from "@sanity/icons/ChevronUp";
+import { TranslateIcon } from "@sanity/icons/Translate";
+import { UploadIcon } from "@sanity/icons/Upload";
 import LanguagesList from "iso-639-1";
 import MuxPlayer from "@mux/mux-player-react/lazy";
 import { getDevicePixelRatio } from "use-device-pixel-ratio";
+import { DocumentIcon } from "@sanity/icons/Document";
 import { IntentLink } from "sanity/router";
+import { WarningOutlineIcon } from "@sanity/icons/WarningOutline";
 import isNumber from "lodash/isNumber.js";
 import isString from "lodash/isString.js";
 import { useObservable } from "react-rx";
+import { PublishIcon } from "@sanity/icons/Publish";
+import { LockIcon } from "@sanity/icons/Lock";
+import { PlayIcon } from "@sanity/icons/Play";
 import useSWR from "swr";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { useErrorBoundary } from "use-error-boundary";
+import { PlugIcon } from "@sanity/icons/Plug";
 import { UpChunk } from "@mux/upchunk";
+import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
+import { ImageIcon } from "@sanity/icons/Image";
+import { ResetIcon } from "@sanity/icons/Reset";
 import { isValidElementType } from "react-is";
+import { DocumentVideoIcon } from "@sanity/icons/DocumentVideo";
+import { WarningFilledIcon } from "@sanity/icons/WarningFilled";
 const ToolIcon = () => /* @__PURE__ */ jsx("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z" }) }), LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY = "mux-plugin-has-shown-drm-playback-warning", DrmPlaybackWarningContext = createContext({
   hasShownWarning: !1,
   setHasWarnedAboutDrmPlayback: () => null
@@ -142,7 +176,7 @@ function useDialogState() {
 const PLUGIN_VERSION_QUERY = {
   sanityVersion: (
     // @ts-expect-error - this constant is search/replaced so must be exact, not accessed with an index signature
-    "4.1.1"
+    "4.1.3"
   )
 };
 function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate, drmConfigId) {
@@ -363,10 +397,10 @@ function MuxLogo({
     /* @__PURE__ */ jsx("path", { d: "M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729", style: pathStyle })
   ] }) });
 }
-const Logo = styled.span.withConfig({
+const Logo = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Logo",
   componentId: "sc-1tybprx-0"
-})`display:inline-block;height:0.8em;margin-right:1em;transform:translate(0.3em,-0.2em);`, Header = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+})(["display:inline-block;height:0.8em;margin-right:1em;transform:translate(0.3em,-0.2em);"]), Header = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(MuxLogo, { height: 13 }) }),
   "API Credentials"
 ] });
@@ -931,10 +965,10 @@ function tryWithSuspend(block, onError) {
     return onError ? onError(errorOrPromise) : void 0;
   }
 }
-const Image$1 = styled.img.withConfig({
+const Image$1 = /* @__PURE__ */ styled.img.withConfig({
   displayName: "Image",
   componentId: "sc-ul2n6m-0"
-})`transition:opacity 0.175s ease-out 0s;display:block;width:100%;height:100%;object-fit:contain;object-position:center center;`, STATUS_TO_TONE = {
+})(["transition:opacity 0.175s ease-out 0s;display:block;width:100%;height:100%;object-fit:contain;object-position:center center;"]), STATUS_TO_TONE = {
   loading: "transparent",
   error: "critical",
   loaded: "default"
@@ -995,10 +1029,10 @@ function VideoThumbnail({
     } })
   ] }) : null }) });
 }
-const MissingAssetCheckbox = styled(Checkbox).withConfig({
+const MissingAssetCheckbox = /* @__PURE__ */ styled(Checkbox).withConfig({
   displayName: "MissingAssetCheckbox",
   componentId: "sc-b02pvs-0"
-})`position:static !important;input::after{content:'';position:absolute;inset:0;display:block;cursor:pointer;z-index:1000;}`;
+})(["position:static !important;input::after{content:'';position:absolute;inset:0;display:block;cursor:pointer;z-index:1000;}"]);
 function MissingAsset({
   asset,
   selectAsset,
@@ -2730,7 +2764,7 @@ function VideoPlayer({
           /* @__PURE__ */ jsx(MuxPlayer, { poster: isAudio ? void 0 : poster, ref: muxPlayer, ...props, playsInline: !0, playbackId, tokens, preload: "metadata", crossOrigin: "anonymous", metadata: {
             player_name: "Sanity Admin Dashboard",
             // @ts-expect-error - this constant is search/replaced so must be exact, not accessed with an index signature
-            player_version: "4.1.1",
+            player_version: "4.1.3",
             page_type: "Preview Player"
           }, audio: isAudio, _hlsConfig: hlsConfig, style: {
             ...!isAudio && {
@@ -2873,10 +2907,10 @@ function DocumentPreview(props) {
     }
   );
 }
-const Container = styled(Box).withConfig({
+const Container = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "Container",
   componentId: "sc-a58zkj-0"
-})`*{color:${(props) => props.theme.sanity.color.base.fg};}a{text-decoration:none;}h2{font-size:${(props) => props.theme.sanity.fonts.text.sizes[1]};}`, VideoReferences = (props) => {
+})(["*{color:", ";}a{text-decoration:none;}h2{font-size:", ";}"], (props) => props.theme.sanity.color.base.fg, (props) => props.theme.sanity.fonts.text.sizes[1]), VideoReferences = (props) => {
   const schema = useSchema();
   if (!props.isLoaded)
     return /* @__PURE__ */ jsx(SpinnerBox, {});
@@ -3177,10 +3211,10 @@ ${displayInfo.id}`, icon: TagIcon, size: 2 }),
       displayInfo.title != displayInfo.id.slice(0, 12) && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.id.slice(0, 12), icon: TagIcon, size: 1, muted: !0 })
     ] })
   ] });
-}, PlayButton = styled.button.withConfig({
+}, PlayButton = /* @__PURE__ */ styled.button.withConfig({
   displayName: "PlayButton",
   componentId: "sc-8aoab-0"
-})`display:block;padding:0;margin:0;border:none;border-radius:0.1875rem;position:relative;cursor:pointer;&::after{content:'';background:var(--card-fg-color);opacity:0;display:block;position:absolute;inset:0;z-index:10;transition:0.15s ease-out;border-radius:inherit;}> div[data-play]{z-index:11;opacity:0;transition:0.15s 0.05s ease-out;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--card-fg-color);background:var(--card-bg-color);width:auto;height:30%;aspect-ratio:1;border-radius:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;> svg{display:block;width:70%;height:auto;transform:translateX(5%);}}&:hover,&:focus{&::after{opacity:0.3;}> div[data-play]{opacity:1;}}`;
+})(["display:block;padding:0;margin:0;border:none;border-radius:0.1875rem;position:relative;cursor:pointer;&::after{content:'';background:var(--card-fg-color);opacity:0;display:block;position:absolute;inset:0;z-index:10;transition:0.15s ease-out;border-radius:inherit;}> div[data-play]{z-index:11;opacity:0;transition:0.15s 0.05s ease-out;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--card-fg-color);background:var(--card-bg-color);width:auto;height:30%;aspect-ratio:1;border-radius:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;> svg{display:block;width:70%;height:auto;transform:translateX(5%);}}&:hover,&:focus{&::after{opacity:0.3;}> div[data-play]{opacity:1;}}"]);
 function VideoInBrowser({
   onSelect,
   onEdit,
@@ -3731,10 +3765,10 @@ function SelectAssets({
   }, [onChange, setDialogState, selectedAsset]);
   return /* @__PURE__ */ jsx(VideosBrowser, { onSelect: handleSelect, config });
 }
-const StyledDialog = styled(Dialog).withConfig({
+const StyledDialog = /* @__PURE__ */ styled(Dialog).withConfig({
   displayName: "StyledDialog",
   componentId: "sc-w5w8ee-0"
-})`> div[data-ui='DialogCard'] > div[data-ui='Card']{height:100%;}`;
+})(["> div[data-ui='DialogCard'] > div[data-ui='Card']{height:100%;}"]);
 function InputBrowser({
   setDialogState,
   asset,
@@ -3749,22 +3783,22 @@ const useCancelUpload = (asset, onChange) => {
   return useCallback(() => {
     asset && (onChange(PatchEvent.from(unset())), asset.assetId && deleteAssetOnMux(client, asset.assetId), asset._id && client.delete(asset._id));
   }, [asset, client, onChange]);
-}, TopControls = styled.div.withConfig({
+}, TopControls = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TopControls",
   componentId: "sc-1drlf9e-0"
-})`position:absolute;top:0;right:0;justify-content:flex-end;button{height:auto;}`, CardWrapper = styled(Card).withConfig({
+})(["position:absolute;top:0;right:0;justify-content:flex-end;button{height:auto;}"]), CardWrapper = /* @__PURE__ */ styled(Card).withConfig({
   displayName: "CardWrapper",
   componentId: "sc-1mfzr0o-0"
-})`min-height:82px;box-sizing:border-box;`, FlexWrapper = styled(Flex).withConfig({
+})(["min-height:82px;box-sizing:border-box;"]), FlexWrapper = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "FlexWrapper",
   componentId: "sc-1mfzr0o-1"
-})`text-overflow:ellipsis;overflow:hidden;`, LeftSection = styled(Stack).withConfig({
+})(["text-overflow:ellipsis;overflow:hidden;"]), LeftSection = /* @__PURE__ */ styled(Stack).withConfig({
   displayName: "LeftSection",
   componentId: "sc-1mfzr0o-2"
-})`position:relative;width:60%;`, CodeWrapper = styled(Code).withConfig({
+})(["position:relative;width:60%;"]), CodeWrapper = /* @__PURE__ */ styled(Code).withConfig({
   displayName: "CodeWrapper",
   componentId: "sc-1mfzr0o-3"
-})`position:relative;width:100%;code{overflow:hidden;text-overflow:ellipsis;position:relative;max-width:200px;}`, UploadProgress = ({
+})(["position:relative;width:100%;code{overflow:hidden;text-overflow:ellipsis;position:relative;max-width:200px;}"]), UploadProgress = ({
   progress = 100,
   onCancel,
   filename,
@@ -3894,13 +3928,13 @@ function FileInputMenuItem(props) {
     /* @__PURE__ */ jsx("input", { "data-testid": "file-button-input", accept, capture, id, multiple, onChange: handleChange, type: "file", value: "", disabled })
   ] });
 }
-const LockCard = styled(Card).withConfig({
+const LockCard = /* @__PURE__ */ styled(Card).withConfig({
   displayName: "LockCard",
   componentId: "sc-aimiq6-0"
-})`position:absolute;top:0;left:0;opacity:0.6;mix-blend-mode:screen;background:transparent;`, LockButton = styled(Button).withConfig({
+})(["position:absolute;top:0;left:0;opacity:0.6;mix-blend-mode:screen;background:transparent;"]), LockButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "LockButton",
   componentId: "sc-aimiq6-1"
-})`background:transparent;color:white;`, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
+})(["background:transparent;color:white;"]), isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 function PlayerActionsMenu$1(props) {
   const {
     asset,
@@ -4069,13 +4103,13 @@ function formatBytes(bytes, si = !1, dp = 1) {
   while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
   return bytes.toFixed(dp) + " " + units[u];
 }
-const RangeInput = styled.input.withConfig({
+const RangeInput = /* @__PURE__ */ styled.input.withConfig({
   displayName: "RangeInput",
   componentId: "sc-8lzhot-0"
-})`width:100%;height:4px;border-radius:2px;background:var(--card-border-color);outline:none;-webkit-appearance:none;appearance:none;&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--card-focus-ring-color,#2276fc);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);}&::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--card-focus-ring-color,#2276fc);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);}&:hover::-webkit-slider-thumb{background:var(--card-focus-ring-color,#1a5fc7);}&:hover::-moz-range-thumb{background:var(--card-focus-ring-color,#1a5fc7);}`, WatermarkOverlay = styled.div.withConfig({
+})(["width:100%;height:4px;border-radius:2px;background:var(--card-border-color);outline:none;-webkit-appearance:none;appearance:none;&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--card-focus-ring-color,#2276fc);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);}&::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--card-focus-ring-color,#2276fc);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);}&:hover::-webkit-slider-thumb{background:var(--card-focus-ring-color,#1a5fc7);}&:hover::-moz-range-thumb{background:var(--card-focus-ring-color,#1a5fc7);}"]), WatermarkOverlay = /* @__PURE__ */ styled.div.withConfig({
   displayName: "WatermarkOverlay",
   componentId: "sc-8lzhot-1"
-})`position:absolute;max-width:200px;opacity:${(props) => props.$opacity};cursor:move;user-select:none;z-index:10;pointer-events:auto;img{width:100%;height:auto;display:block;pointer-events:none;}&:hover{outline:2px dashed rgba(255,255,255,0.8);outline-offset:4px;}`;
+})(["position:absolute;max-width:200px;opacity:", ";cursor:move;user-select:none;z-index:10;pointer-events:auto;img{width:100%;height:auto;display:block;pointer-events:none;}&:hover{outline:2px dashed rgba(255,255,255,0.8);outline-offset:4px;}"], (props) => props.$opacity);
 function DraggableWatermark({
   watermark,
   onChange,
@@ -5257,18 +5291,18 @@ function UploadCard({
     children
   ] });
 }
-const HiddenInput$1 = styled.input.attrs({
+const HiddenInput$1 = /* @__PURE__ */ styled.input.attrs({
   type: "text"
 }).withConfig({
   displayName: "HiddenInput",
   componentId: "sc-1u4yc6p-0"
-})`position:absolute;border:0;color:white;opacity:0;&:focus{outline:none;}`, HiddenInput = styled.input.withConfig({
+})(["position:absolute;border:0;color:white;opacity:0;&:focus{outline:none;}"]), HiddenInput = /* @__PURE__ */ styled.input.withConfig({
   displayName: "HiddenInput",
   componentId: "sc-15tkwq4-0"
-})`overflow:hidden;width:0.1px;height:0.1px;opacity:0;position:absolute;z-index:-1;`, Label = styled.label.withConfig({
+})(["overflow:hidden;width:0.1px;height:0.1px;opacity:0;position:absolute;z-index:-1;"]), Label = /* @__PURE__ */ styled.label.withConfig({
   displayName: "Label",
   componentId: "sc-15tkwq4-1"
-})`position:relative;`, FileInputButton = ({
+})(["position:relative;"]), FileInputButton = ({
   onSelect,
   accept,
   ...props