sanity-plugin-mux-input 2.8.0 → 2.8.1

package/dist/index.d.mts

@@ -170,6 +170,13 @@ declare interface PluginConfig extends MuxInputConfig {
         title?: string
         icon?: React.ComponentType
       }
+  /**
+   * The roles that are allowed to configure the plugin.
+   *
+   * If not set, all roles will be allowed to configure the plugin.
+   * @defaultValue []
+   */
+  allowedRolesForConfiguration: string[]
 }
 
 declare const SUPPORTED_MUX_LANGUAGES_VALUES: (

package/dist/index.d.ts

@@ -170,6 +170,13 @@ declare interface PluginConfig extends MuxInputConfig {
         title?: string
         icon?: React.ComponentType
       }
+  /**
+   * The roles that are allowed to configure the plugin.
+   *
+   * If not set, all roles will be allowed to configure the plugin.
+   * @defaultValue []
+   */
+  allowedRolesForConfiguration: string[]
 }
 
 declare const SUPPORTED_MUX_LANGUAGES_VALUES: (

package/dist/index.js

@@ -19,7 +19,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), rxjs = require("rxjs"), operators = require("rxjs/operators"), suspendReact = require("suspend-react"), MuxPlayer = require("@mux/mux-player-react"), desk = require("sanity/desk"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"), reactRx = require("react-rx"), useSWR = require("swr"), scrollIntoView = require("scroll-into-view-if-needed"), upchunk = require("@mux/upchunk"), reactIs = require("react-is"), LanguagesList = require("iso-639-1");
+var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), rxjs = require("rxjs"), operators = require("rxjs/operators"), suspendReact = require("suspend-react"), MuxPlayer = require("@mux/mux-player-react"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"), reactRx = require("react-rx"), useSWR = require("swr"), scrollIntoView = require("scroll-into-view-if-needed"), upchunk = require("@mux/upchunk"), reactIs = require("react-is"), LanguagesList = require("iso-639-1");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -916,7 +916,7 @@ function VideoPlayer({
             crossOrigin: "anonymous",
             metadata: {
               player_name: "Sanity Admin Dashboard",
-              player_version: "2.8.0",
+              player_version: "2.8.1",
               page_type: "Preview Player"
             },
             audio: isAudio,
@@ -1067,18 +1067,7 @@ function PaneItemPreview(props) {
 function getIconWithFallback(icon, schemaType, defaultIcon) {
   return icon === !1 ? !1 : icon || schemaType && schemaType.icon || defaultIcon || !1;
 }
-function DocumentPreviewInInput(props) {
-  const { ChildLink } = desk.usePaneRouter();
-  return (linkProps) => /* @__PURE__ */ jsxRuntime.jsx(
-    ChildLink,
-    {
-      childId: props.documentPair.id,
-      childParameters: { type: props.documentPair.type },
-      children: linkProps.children
-    }
-  );
-}
-function DocumentPreviewInRool(props) {
+function DocumentPreviewLink(props) {
   return (linkProps) => /* @__PURE__ */ jsxRuntime.jsx(router.IntentLink, { intent: "edit", params: { id: props.documentPair.id }, children: linkProps.children });
 }
 function DocumentPreview(props) {
@@ -1097,7 +1086,7 @@ function DocumentPreview(props) {
     sanity.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 +1123,7 @@ const Container = styledComponents.styled(ui.Box)`
         radius: 2,
         shadow: 1,
         style: { overflow: "hidden" },
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          DocumentPreview,
-          {
-            documentPair,
-            schemaType,
-            placement: props.placement
-          }
-        ) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(DocumentPreview, { documentPair, schemaType }) })
       },
       documentPair.id
     );
@@ -1152,7 +1134,6 @@ function DeleteDialog({
   references,
   referencesLoading,
   cancelDelete,
-  placement,
   succeededDeleting
 }) {
   const client = useClient(), [state, setState] = React.useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = React.useState(!0), toast = ui.useToast();
@@ -1205,14 +1186,7 @@ function DeleteDialog({
                 " ",
                 "pointing to this video. Remove their references to this file or delete them before proceeding."
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                VideoReferences,
-                {
-                  references,
-                  isLoaded: !referencesLoading,
-                  placement
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx(VideoReferences, { references, isLoaded: !referencesLoading })
             ] }),
             state === "confirm" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { size: 2, children: "Are you sure you want to delete this video?" }),
@@ -1403,7 +1377,6 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
           {
             asset: props.asset,
             cancelDelete: () => setState("idle"),
-            placement: props.placement,
             referencesLoading,
             references,
             succeededDeleting: () => {
@@ -1585,14 +1558,7 @@ ${displayInfo.id}`, icon: icons.TagIcon, size: 2 }),
                         "aria-labelledby": "references-tab",
                         id: "references-panel",
                         hidden: tab !== "references",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          VideoReferences,
-                          {
-                            references,
-                            isLoaded: !referencesLoading,
-                            placement: props.placement
-                          }
-                        )
+                        children: /* @__PURE__ */ jsxRuntime.jsx(VideoReferences, { references, isLoaded: !referencesLoading })
                       }
                     )
                   ] })
@@ -1820,7 +1786,7 @@ 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?._id) || editedAsset,
     [editedAsset, assets]
-  ), placement = onSelect ? "input" : "tool";
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { padding: 4, space: 4, style: { minHeight: "50vh" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", align: "center", children: [
@@ -1836,7 +1802,7 @@ function VideosBrowser({ onSelect }) {
           ),
           /* @__PURE__ */ jsxRuntime.jsx(SelectSortOptions, { setSort, sort })
         ] }),
-        placement === "tool" && /* @__PURE__ */ jsxRuntime.jsx(ImportVideosFromMux, {})
+        (onSelect ? "input" : "tool") == "tool" && /* @__PURE__ */ jsxRuntime.jsx(ImportVideosFromMux, {})
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
         assets?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Label, { muted: !0, children: [
@@ -1868,14 +1834,7 @@ function VideosBrowser({ onSelect }) {
       isLoading && /* @__PURE__ */ jsxRuntime.jsx(SpinnerBox, {}),
       !isLoading && assets.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { marginY: 4, paddingX: 4, paddingY: 6, border: !0, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", muted: !0, size: 3, children: searchQuery ? `No videos found for "${searchQuery}"` : "No videos in this dataset" }) })
     ] }),
-    freshEditedAsset && /* @__PURE__ */ jsxRuntime.jsx(
-      VideoDetails,
-      {
-        closeDialog: () => setEditedAsset(null),
-        asset: freshEditedAsset,
-        placement
-      }
-    )
+    freshEditedAsset && /* @__PURE__ */ jsxRuntime.jsx(VideoDetails, { closeDialog: () => setEditedAsset(null), asset: freshEditedAsset })
   ] });
 }
 const StudioTool = () => /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, {}), DEFAULT_TOOL_CONFIG = {
@@ -2349,9 +2308,12 @@ const InputFallback = () => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pad
       /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", muted: !0, size: 1, children: "Loading\u2026" }) })
     ] })
   }
-) });
+) }), useAccessControl = (config) => {
+  const user = sanity.useCurrentUser();
+  return { hasConfigAccess: !config?.allowedRolesForConfiguration || user?.roles?.some((role) => config.allowedRolesForConfiguration.includes(role.name)) };
+};
 function Onboard(props) {
-  const { setDialogState } = props, handleOpen = React.useCallback(() => setDialogState("secrets"), [setDialogState]);
+  const { setDialogState } = props, handleOpen = React.useCallback(() => setDialogState("secrets"), [setDialogState]), { hasConfigAccess } = useAccessControl(props.config);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
     ui.Card,
     {
@@ -2368,7 +2330,7 @@ function Onboard(props) {
       children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "flex-start", align: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { columns: 1, gap: [2, 3, 4, 4], children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Inline, { paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "32px" }, children: /* @__PURE__ */ jsxRuntime.jsx(MuxLogo, {}) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Inline, { paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { size: [0, 1, 2, 2], children: "Upload and preview videos directly from your studio." }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Inline, { paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { mode: "ghost", icon: icons.PlugIcon, text: "Configure API", onClick: handleOpen }) })
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Inline, { paddingY: 1, children: hasConfigAccess ? /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { mode: "ghost", icon: icons.PlugIcon, text: "Configure API", onClick: handleOpen }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "You do not have access to configure the Mux API. Please contact your administrator." }) }) })
       ] }) })
     }
   ) }) });
@@ -2851,7 +2813,7 @@ const FileButton = styledComponents.styled(ui.MenuItem)(({ theme }) => {
   color: white;
 `, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 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]);
+  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]), { hasConfigAccess } = useAccessControl(props.config), onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
   return React.useEffect(() => {
     open && dialogState && setOpen(!1);
   }, [dialogState, open]), ui.useClickOutsideEvent(
@@ -2902,15 +2864,17 @@ function PlayerActionsMenu(props) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.MenuItem,
-            {
-              icon: icons.PlugIcon,
-              text: "Configure API",
-              onClick: () => setDialogState("secrets")
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}),
+          hasConfigAccess && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.MenuItem,
+              {
+                icon: icons.PlugIcon,
+                text: "Configure API",
+                onClick: () => setDialogState("secrets")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {})
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             ui.MenuItem,
             {
@@ -3517,7 +3481,7 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(ui.Card
   ] });
 };
 function UploadPlaceholder(props) {
-  const { setDialogState, readOnly, onSelect, hovering, needsSetup } = props, handleBrowse = React.useCallback(() => setDialogState("select-video"), [setDialogState]), handleConfigureApi = React.useCallback(() => setDialogState("secrets"), [setDialogState]);
+  const { setDialogState, readOnly, onSelect, hovering, needsSetup } = props, handleBrowse = React.useCallback(() => setDialogState("select-video"), [setDialogState]), handleConfigureApi = React.useCallback(() => setDialogState("secrets"), [setDialogState]), { hasConfigAccess } = useAccessControl(props.config);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Card,
     {
@@ -3554,7 +3518,7 @@ function UploadPlaceholder(props) {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { mode: "bleed", icon: icons.SearchIcon, text: "Select", onClick: handleBrowse }),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              hasConfigAccess && /* @__PURE__ */ jsxRuntime.jsx(
                 ui.Button,
                 {
                   padding: 3,
@@ -3775,7 +3739,8 @@ function Uploader(props) {
                     setDialogState: props.setDialogState,
                     onChange: props.onChange,
                     onSelect: handleUpload,
-                    readOnly: props.readOnly
+                    readOnly: props.readOnly,
+                    config: props.config
                   }
                 )
               }
@@ -3788,7 +3753,8 @@ function Uploader(props) {
             onSelect: handleUpload,
             readOnly: !!props.readOnly,
             setDialogState: props.setDialogState,
-            needsSetup: props.needsSetup
+            needsSetup: props.needsSetup,
+            config: props.config
           }
         )
       }
@@ -3804,12 +3770,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__ */ jsxRuntime.jsx(ui.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundaryCard$1, { schemaType: props.schemaType, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(InputFallback, {}), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(InputFallback, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */ jsxRuntime.jsx(Onboard, { setDialogState }) : /* @__PURE__ */ jsxRuntime.jsx(
+    secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */ jsxRuntime.jsx(Onboard, { setDialogState, config: props.config }) : /* @__PURE__ */ jsxRuntime.jsx(
       Uploader,
       {
         ...props,
@@ -3823,7 +3789,7 @@ const Input = (props) => {
         needsSetup: secretDocumentValues.value.needsSetup
       }
     ),
-    dialogState === "secrets" && /* @__PURE__ */ jsxRuntime.jsx(
+    dialogState === "secrets" && hasConfigAccess && /* @__PURE__ */ jsxRuntime.jsx(
       ConfigureApi$1,
       {
         setDialogState,
@@ -4030,7 +3996,8 @@ const muxVideoSchema = {
   max_resolution_tier: "1080p",
   normalize_audio: !1,
   defaultSigned: !1,
-  tool: DEFAULT_TOOL_CONFIG
+  tool: DEFAULT_TOOL_CONFIG,
+  allowedRolesForConfiguration: []
 }, muxInput = sanity.definePlugin((userConfig) => {
   const config = { ...defaultConfig, ...userConfig || {} };
   return {