sanity-plugin-mux-input 2.7.0 → 2.8.1

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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 { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, useCurrentUser, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { ErrorOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, UploadIcon, ImageIcon, ResetIcon, TranslateIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
 import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, TextInput, Tooltip, Inline, useToast, TabList, Tab, TabPanel, Label as Label$1, Grid, useTheme_v2, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
@@ -14,7 +14,6 @@ import { defer, timer, of, Observable, concat, throwError, from, Subject } from
 import { expand, concatMap, tap, switchMap, mergeMap, catchError, mergeMapTo, takeUntil } from "rxjs/operators";
 import { suspend, clear, preload } from "suspend-react";
 import MuxPlayer from "@mux/mux-player-react";
-import { usePaneRouter } from "sanity/desk";
 import { IntentLink } from "sanity/router";
 import isNumber from "lodash/isNumber.js";
 import isString from "lodash/isString.js";
@@ -916,7 +915,7 @@ function VideoPlayer({
             crossOrigin: "anonymous",
             metadata: {
               player_name: "Sanity Admin Dashboard",
-              player_version: "2.7.0",
+              player_version: "2.8.1",
               page_type: "Preview Player"
             },
             audio: isAudio,
@@ -1067,18 +1066,7 @@ function PaneItemPreview(props) {
 function getIconWithFallback(icon, schemaType, defaultIcon) {
   return icon === !1 ? !1 : icon || schemaType && schemaType.icon || defaultIcon || !1;
 }
-function DocumentPreviewInInput(props) {
-  const { ChildLink } = usePaneRouter();
-  return (linkProps) => /* @__PURE__ */ jsx(
-    ChildLink,
-    {
-      childId: props.documentPair.id,
-      childParameters: { type: props.documentPair.type },
-      children: linkProps.children
-    }
-  );
-}
-function DocumentPreviewInRool(props) {
+function DocumentPreviewLink(props) {
   return (linkProps) => /* @__PURE__ */ jsx(IntentLink, { intent: "edit", params: { id: props.documentPair.id }, children: linkProps.children });
 }
 function DocumentPreview(props) {
@@ -1097,7 +1085,7 @@ function DocumentPreview(props) {
     PreviewCard,
     {
       __unstable_focusRing: !0,
-      as: props.placement === "input" ? DocumentPreviewInInput(props) : DocumentPreviewInRool(props),
+      as: DocumentPreviewLink(props),
       "data-as": "a",
       "data-ui": "PaneItem",
       padding: 2,
@@ -1134,14 +1122,7 @@ const Container = styled(Box)`
         radius: 2,
         shadow: 1,
         style: { overflow: "hidden" },
-        children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-          DocumentPreview,
-          {
-            documentPair,
-            schemaType,
-            placement: props.placement
-          }
-        ) })
+        children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(DocumentPreview, { documentPair, schemaType }) })
       },
       documentPair.id
     );
@@ -1152,7 +1133,6 @@ function DeleteDialog({
   references,
   referencesLoading,
   cancelDelete,
-  placement,
   succeededDeleting
 }) {
   const client = useClient(), [state, setState] = useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = useState(!0), toast = useToast();
@@ -1205,14 +1185,7 @@ function DeleteDialog({
                 " ",
                 "pointing to this video. Remove their references to this file or delete them before proceeding."
               ] }),
-              /* @__PURE__ */ jsx(
-                VideoReferences,
-                {
-                  references,
-                  isLoaded: !referencesLoading,
-                  placement
-                }
-              )
+              /* @__PURE__ */ jsx(VideoReferences, { references, isLoaded: !referencesLoading })
             ] }),
             state === "confirm" && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Heading, { size: 2, children: "Are you sure you want to delete this video?" }),
@@ -1403,7 +1376,6 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
           {
             asset: props.asset,
             cancelDelete: () => setState("idle"),
-            placement: props.placement,
             referencesLoading,
             references,
             succeededDeleting: () => {
@@ -1585,14 +1557,7 @@ ${displayInfo.id}`, icon: TagIcon, size: 2 }),
                         "aria-labelledby": "references-tab",
                         id: "references-panel",
                         hidden: tab !== "references",
-                        children: /* @__PURE__ */ jsx(
-                          VideoReferences,
-                          {
-                            references,
-                            isLoaded: !referencesLoading,
-                            placement: props.placement
-                          }
-                        )
+                        children: /* @__PURE__ */ jsx(VideoReferences, { references, isLoaded: !referencesLoading })
                       }
                     )
                   ] })
@@ -1820,7 +1785,7 @@ function VideosBrowser({ onSelect }) {
   const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(
     () => assets.find((a2) => a2._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
-  ), placement = onSelect ? "input" : "tool";
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 4, style: { minHeight: "50vh" }, children: [
       /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
@@ -1836,7 +1801,7 @@ function VideosBrowser({ onSelect }) {
           ),
           /* @__PURE__ */ jsx(SelectSortOptions, { setSort, sort })
         ] }),
-        placement === "tool" && /* @__PURE__ */ jsx(ImportVideosFromMux, {})
+        (onSelect ? "input" : "tool") == "tool" && /* @__PURE__ */ jsx(ImportVideosFromMux, {})
       ] }),
       /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
         assets?.length > 0 && /* @__PURE__ */ jsxs(Label$1, { muted: !0, children: [
@@ -1868,14 +1833,7 @@ function VideosBrowser({ onSelect }) {
       isLoading && /* @__PURE__ */ jsx(SpinnerBox, {}),
       !isLoading && assets.length === 0 && /* @__PURE__ */ jsx(Card, { marginY: 4, paddingX: 4, paddingY: 6, border: !0, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsx(Text, { align: "center", muted: !0, size: 3, children: searchQuery ? `No videos found for "${searchQuery}"` : "No videos in this dataset" }) })
     ] }),
-    freshEditedAsset && /* @__PURE__ */ jsx(
-      VideoDetails,
-      {
-        closeDialog: () => setEditedAsset(null),
-        asset: freshEditedAsset,
-        placement
-      }
-    )
+    freshEditedAsset && /* @__PURE__ */ jsx(VideoDetails, { closeDialog: () => setEditedAsset(null), asset: freshEditedAsset })
   ] });
 }
 const StudioTool = () => /* @__PURE__ */ jsx(VideosBrowser, {}), DEFAULT_TOOL_CONFIG = {
@@ -2349,9 +2307,12 @@ const InputFallback = () => /* @__PURE__ */ jsx("div", { style: { padding: 1 },
       /* @__PURE__ */ jsx(Box, { marginTop: 3, children: /* @__PURE__ */ jsx(Text, { align: "center", muted: !0, size: 1, children: "Loading\u2026" }) })
     ] })
   }
-) });
+) }), useAccessControl = (config) => {
+  const user = useCurrentUser();
+  return { hasConfigAccess: !config?.allowedRolesForConfiguration || user?.roles?.some((role) => config.allowedRolesForConfiguration.includes(role.name)) };
+};
 function Onboard(props) {
-  const { setDialogState } = props, handleOpen = useCallback(() => setDialogState("secrets"), [setDialogState]);
+  const { setDialogState } = props, handleOpen = useCallback(() => setDialogState("secrets"), [setDialogState]), { hasConfigAccess } = useAccessControl(props.config);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { style: { padding: 2 }, children: /* @__PURE__ */ jsx(
     Card,
     {
@@ -2368,7 +2329,7 @@ function Onboard(props) {
       children: /* @__PURE__ */ jsx(Flex, { justify: "flex-start", align: "center", children: /* @__PURE__ */ jsxs(Grid, { columns: 1, gap: [2, 3, 4, 4], children: [
         /* @__PURE__ */ jsx(Inline, { paddingY: 1, children: /* @__PURE__ */ jsx("div", { style: { height: "32px" }, children: /* @__PURE__ */ jsx(MuxLogo, {}) }) }),
         /* @__PURE__ */ jsx(Inline, { paddingY: 1, children: /* @__PURE__ */ jsx(Heading, { size: [0, 1, 2, 2], children: "Upload and preview videos directly from your studio." }) }),
-        /* @__PURE__ */ jsx(Inline, { paddingY: 1, children: /* @__PURE__ */ jsx(Button, { mode: "ghost", icon: PlugIcon, text: "Configure API", onClick: handleOpen }) })
+        /* @__PURE__ */ jsx(Inline, { paddingY: 1, children: hasConfigAccess ? /* @__PURE__ */ jsx(Button, { mode: "ghost", icon: PlugIcon, text: "Configure API", onClick: handleOpen }) : /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsx(Text, { children: "You do not have access to configure the Mux API. Please contact your administrator." }) }) })
       ] }) })
     }
   ) }) });
@@ -2851,7 +2812,7 @@ const FileButton = styled(MenuItem)(({ theme }) => {
   color: white;
 `, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 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]);
+  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
   return useEffect(() => {
     open && dialogState && setOpen(!1);
   }, [dialogState, open]), useClickOutsideEvent(
@@ -2902,15 +2863,17 @@ function PlayerActionsMenu(props) {
             }
           ),
           /* @__PURE__ */ jsx(MenuDivider, {}),
-          /* @__PURE__ */ jsx(
-            MenuItem,
-            {
-              icon: PlugIcon,
-              text: "Configure API",
-              onClick: () => setDialogState("secrets")
-            }
-          ),
-          /* @__PURE__ */ jsx(MenuDivider, {}),
+          hasConfigAccess && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                icon: PlugIcon,
+                text: "Configure API",
+                onClick: () => setDialogState("secrets")
+              }
+            ),
+            /* @__PURE__ */ jsx(MenuDivider, {})
+          ] }),
           /* @__PURE__ */ jsx(
             MenuItem,
             {
@@ -3517,7 +3480,7 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card),
   ] });
 };
 function UploadPlaceholder(props) {
-  const { setDialogState, readOnly, onSelect, hovering, needsSetup } = props, handleBrowse = useCallback(() => setDialogState("select-video"), [setDialogState]), handleConfigureApi = useCallback(() => setDialogState("secrets"), [setDialogState]);
+  const { setDialogState, readOnly, onSelect, hovering, needsSetup } = props, handleBrowse = useCallback(() => setDialogState("select-video"), [setDialogState]), handleConfigureApi = useCallback(() => setDialogState("secrets"), [setDialogState]), { hasConfigAccess } = useAccessControl(props.config);
   return /* @__PURE__ */ jsx(
     Card,
     {
@@ -3554,7 +3517,7 @@ function UploadPlaceholder(props) {
                 }
               ),
               /* @__PURE__ */ jsx(Button, { mode: "bleed", icon: SearchIcon, text: "Select", onClick: handleBrowse }),
-              /* @__PURE__ */ jsx(
+              hasConfigAccess && /* @__PURE__ */ jsx(
                 Button,
                 {
                   padding: 3,
@@ -3775,7 +3738,8 @@ function Uploader(props) {
                     setDialogState: props.setDialogState,
                     onChange: props.onChange,
                     onSelect: handleUpload,
-                    readOnly: props.readOnly
+                    readOnly: props.readOnly,
+                    config: props.config
                   }
                 )
               }
@@ -3788,7 +3752,8 @@ function Uploader(props) {
             onSelect: handleUpload,
             readOnly: !!props.readOnly,
             setDialogState: props.setDialogState,
-            needsSetup: props.needsSetup
+            needsSetup: props.needsSetup,
+            config: props.config
           }
         )
       }
@@ -3804,12 +3769,12 @@ function Uploader(props) {
   ] });
 }
 const Input = (props) => {
-  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;
+  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: [
-    secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */ jsx(Onboard, { setDialogState }) : /* @__PURE__ */ jsx(
+    secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */ jsx(Onboard, { setDialogState, config: props.config }) : /* @__PURE__ */ jsx(
       Uploader,
       {
         ...props,
@@ -3823,7 +3788,7 @@ const Input = (props) => {
         needsSetup: secretDocumentValues.value.needsSetup
       }
     ),
-    dialogState === "secrets" && /* @__PURE__ */ jsx(
+    dialogState === "secrets" && hasConfigAccess && /* @__PURE__ */ jsx(
       ConfigureApi$1,
       {
         setDialogState,
@@ -3989,7 +3954,7 @@ const muxVideoSchema = {
   ]
 }, muxVideoAsset = {
   name: "mux.videoAsset",
-  type: "object",
+  type: "document",
   title: "Video asset",
   fields: [
     {
@@ -4030,7 +3995,8 @@ const muxVideoSchema = {
   max_resolution_tier: "1080p",
   normalize_audio: !1,
   defaultSigned: !1,
-  tool: DEFAULT_TOOL_CONFIG
+  tool: DEFAULT_TOOL_CONFIG,
+  allowedRolesForConfiguration: []
 }, muxInput = definePlugin((userConfig) => {
   const config = { ...defaultConfig, ...userConfig || {} };
   return {