sanity-plugin-mux-input 2.7.0 → 2.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -104,7 +104,7 @@
   "peerDependencies": {
     "react": "^18.3 || ^19",
     "react-is": "^18.3 || ^19",
-    "sanity": "^3.42.0",
+    "sanity": "^3.42.0 || ^4.0.0-0",
     "styled-components": "^5 || ^6"
   },
   "engines": {

package/src/_exports/index.ts

@@ -13,6 +13,7 @@ export const defaultConfig: PluginConfig = {
   normalize_audio: false,
   defaultSigned: false,
   tool: DEFAULT_TOOL_CONFIG,
+  allowedRolesForConfiguration: [],
 }
 
 export const muxInput = definePlugin<Partial<PluginConfig> | void>((userConfig) => {

package/src/components/Input.tsx

@@ -12,6 +12,7 @@ import ErrorBoundaryCard from './ErrorBoundaryCard'
 import {InputFallback} from './Input.styled'
 import Onboard from './Onboard'
 import Uploader from './Uploader'
+import {useAccessControl} from '../hooks/useAccessControl'
 
 export interface InputProps extends MuxInputProps {
   config: PluginConfig
@@ -22,6 +23,7 @@ const Input = (props: InputProps) => {
   const assetDocumentValues = useAssetDocumentValues(props.value?.asset)
   const poll = useMuxPolling(props.readOnly ? undefined : assetDocumentValues?.value || undefined)
   const [dialogState, setDialogState] = useDialogState()
+  const {hasConfigAccess} = useAccessControl(props.config)
 
   const error = secretDocumentValues.error || assetDocumentValues.error || poll.error /*||
     // @TODO move errored logic to Uploader, where handleRemoveVideo can be called
@@ -44,7 +46,7 @@ const Input = (props: InputProps) => {
           ) : (
             <>
               {secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? (
-                <Onboard setDialogState={setDialogState} />
+                <Onboard setDialogState={setDialogState} config={props.config} />
               ) : (
                 <Uploader
                   {...props}
@@ -59,7 +61,7 @@ const Input = (props: InputProps) => {
                 />
               )}
 
-              {dialogState === 'secrets' && (
+              {dialogState === 'secrets' && hasConfigAccess && (
                 <ConfigureApi
                   setDialogState={setDialogState}
                   secrets={secretDocumentValues.value.secrets}

package/src/components/Onboard.tsx

@@ -1,17 +1,21 @@
 import {PlugIcon} from '@sanity/icons'
-import {Button, Card, Flex, Grid, Heading, Inline} from '@sanity/ui'
+import {Button, Card, Flex, Grid, Heading, Inline, Text} from '@sanity/ui'
 import {useCallback} from 'react'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import MuxLogo from './MuxLogo'
+import {PluginConfig} from '../util/types'
+import {useAccessControl} from '../hooks/useAccessControl'
 
 interface OnboardProps {
   setDialogState: SetDialogState
+  config: PluginConfig
 }
 
 export default function Onboard(props: OnboardProps) {
   const {setDialogState} = props
   const handleOpen = useCallback(() => setDialogState('secrets'), [setDialogState])
+  const {hasConfigAccess} = useAccessControl(props.config)
 
   return (
     <>
@@ -41,7 +45,16 @@ export default function Onboard(props: OnboardProps) {
                 </Heading>
               </Inline>
               <Inline paddingY={1}>
-                <Button mode="ghost" icon={PlugIcon} text="Configure API" onClick={handleOpen} />
+                {hasConfigAccess ? (
+                  <Button mode="ghost" icon={PlugIcon} text="Configure API" onClick={handleOpen} />
+                ) : (
+                  <Card padding={[3, 3, 3]} radius={2} shadow={1} tone="critical">
+                    <Text>
+                      You do not have access to configure the Mux API. Please contact your
+                      administrator.
+                    </Text>
+                  </Card>
+                )}
               </Inline>
             </Grid>
           </Flex>

package/src/components/PlayerActionsMenu.tsx

@@ -27,8 +27,9 @@ import {styled} from 'styled-components'
 
 import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
-import type {MuxInputProps, VideoAssetDocument} from '../util/types'
+import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
 import {FileInputMenuItem} from './FileInputMenuItem'
+import {useAccessControl} from '../hooks/useAccessControl'
 
 const LockCard = styled(Card)`
   position: absolute;
@@ -55,12 +56,14 @@ function PlayerActionsMenu(
     onSelect: (files: File[]) => void
     dialogState: DialogState
     setDialogState: SetDialogState
+    config: PluginConfig
   }
 ) {
   const {asset, readOnly, dialogState, setDialogState, onChange, onSelect} = props
   const [open, setOpen] = useState(false)
   const [menuElement, setMenuRef] = useState<HTMLDivElement | null>(null)
   const isSigned = useMemo(() => getPlaybackPolicy(asset) === 'signed', [asset])
+  const {hasConfigAccess} = useAccessControl(props.config)
 
   const onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange])
 
@@ -125,12 +128,16 @@ function PlayerActionsMenu(
               />
             )}
             <MenuDivider />
-            <MenuItem
-              icon={PlugIcon}
-              text="Configure API"
-              onClick={() => setDialogState('secrets')}
-            />
-            <MenuDivider />
+            {hasConfigAccess && (
+              <>
+                <MenuItem
+                  icon={PlugIcon}
+                  text="Configure API"
+                  onClick={() => setDialogState('secrets')}
+                />
+                <MenuDivider />
+              </>
+            )}
             <MenuItem
               tone="critical"
               icon={ResetIcon}

package/src/components/UploadPlaceholder.tsx

@@ -5,6 +5,8 @@ import {useCallback} from 'react'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import {FileInputButton, type FileInputButtonProps} from './FileInputButton'
+import {useAccessControl} from '../hooks/useAccessControl'
+import {PluginConfig} from '../util/types'
 
 interface UploadPlaceholderProps {
   setDialogState: SetDialogState
@@ -12,11 +14,13 @@ interface UploadPlaceholderProps {
   hovering: boolean
   needsSetup: boolean
   onSelect: FileInputButtonProps['onSelect']
+  config: PluginConfig
 }
 export default function UploadPlaceholder(props: UploadPlaceholderProps) {
   const {setDialogState, readOnly, onSelect, hovering, needsSetup} = props
   const handleBrowse = useCallback(() => setDialogState('select-video'), [setDialogState])
   const handleConfigureApi = useCallback(() => setDialogState('secrets'), [setDialogState])
+  const {hasConfigAccess} = useAccessControl(props.config)
 
   return (
     <Card
@@ -58,15 +62,17 @@ export default function UploadPlaceholder(props: UploadPlaceholderProps) {
           />
           <Button mode="bleed" icon={SearchIcon} text="Select" onClick={handleBrowse} />
 
-          <Button
-            padding={3}
-            radius={3}
-            tone={needsSetup ? 'critical' : undefined}
-            onClick={handleConfigureApi}
-            icon={PlugIcon}
-            mode="bleed"
-            title="Configure plugin credentials"
-          />
+          {hasConfigAccess && (
+            <Button
+              padding={3}
+              radius={3}
+              tone={needsSetup ? 'critical' : undefined}
+              onClick={handleConfigureApi}
+              icon={PlugIcon}
+              mode="bleed"
+              title="Configure plugin credentials"
+            />
+          )}
         </Inline>
       </Flex>
     </Card>

package/src/components/Uploader.tsx

@@ -364,6 +364,7 @@ export default function Uploader(props: Props) {
                   onChange={props.onChange}
                   onSelect={handleUpload}
                   readOnly={props.readOnly}
+                  config={props.config}
                 />
               }
             />
@@ -375,6 +376,7 @@ export default function Uploader(props: Props) {
             readOnly={!!props.readOnly}
             setDialogState={props.setDialogState}
             needsSetup={props.needsSetup}
+            config={props.config}
           />
         )}
       </UploadCard>

package/src/components/VideoDetails/DeleteDialog.tsx

@@ -6,7 +6,7 @@ import type {SanityDocument} from 'sanity'
 import {deleteAsset} from '../../actions/assets'
 import {useClient} from '../../hooks/useClient'
 import {DIALOGS_Z_INDEX} from '../../util/constants'
-import type {PluginPlacement, VideoAssetDocument} from '../../util/types'
+import type {VideoAssetDocument} from '../../util/types'
 import SpinnerBox from '../SpinnerBox'
 import VideoReferences from './VideoReferences'
 
@@ -15,11 +15,9 @@ export default function DeleteDialog({
   references,
   referencesLoading,
   cancelDelete,
-  placement,
   succeededDeleting,
 }: {
   asset: VideoAssetDocument
-  placement: PluginPlacement
   references?: SanityDocument[]
   referencesLoading: boolean
   cancelDelete: () => void
@@ -95,11 +93,7 @@ export default function DeleteDialog({
                 pointing to this video. Remove their references to this file or delete them before
                 proceeding.
               </Text>
-              <VideoReferences
-                references={references}
-                isLoaded={!referencesLoading}
-                placement={placement}
-              />
+              <VideoReferences references={references} isLoaded={!referencesLoading} />
             </>
           )}
           {state === 'confirm' && (

package/src/components/VideoDetails/VideoDetails.tsx

@@ -127,7 +127,6 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
         <DeleteDialog
           asset={props.asset}
           cancelDelete={() => setState('idle')}
-          placement={props.placement}
           referencesLoading={referencesLoading}
           references={references}
           succeededDeleting={() => {
@@ -295,11 +294,7 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
               id="references-panel"
               hidden={tab !== 'references'}
             >
-              <VideoReferences
-                references={references}
-                isLoaded={!referencesLoading}
-                placement={props.placement}
-              />
+              <VideoReferences references={references} isLoaded={!referencesLoading} />
             </TabPanel>
           </Stack>
         </Flex>

package/src/components/VideoDetails/VideoReferences.tsx

@@ -3,7 +3,6 @@ import {Box, Card, Text} from '@sanity/ui'
 import {collate, useSchema} from 'sanity'
 import {styled} from 'styled-components'
 
-import type {PluginPlacement} from '../../util/types'
 import {DocumentPreview} from '../documentPreview/DocumentPreview'
 import SpinnerBox from '../SpinnerBox'
 
@@ -22,7 +21,6 @@ const Container = styled(Box)`
 const VideoReferences: React.FC<{
   references?: SanityDocument[]
   isLoaded: boolean
-  placement: PluginPlacement
 }> = (props) => {
   const schema = useSchema()
   if (!props.isLoaded) {
@@ -53,11 +51,7 @@ const VideoReferences: React.FC<{
             style={{overflow: 'hidden'}}
           >
             <Box>
-              <DocumentPreview
-                documentPair={documentPair}
-                schemaType={schemaType}
-                placement={props.placement}
-              />
+              <DocumentPreview documentPair={documentPair} schemaType={schemaType} />
             </Box>
           </Card>
         )

package/src/components/VideoDetails/useVideoDetails.ts

@@ -5,10 +5,9 @@ import {useDocumentStore} from 'sanity'
 import {useClient} from '../../hooks/useClient'
 import useDocReferences from '../../hooks/useDocReferences'
 import getVideoMetadata from '../../util/getVideoMetadata'
-import {PluginPlacement, VideoAssetDocument} from '../../util/types'
+import {VideoAssetDocument} from '../../util/types'
 
 export interface VideoDetailsProps {
-  placement: PluginPlacement
   closeDialog: () => void
   asset: VideoAssetDocument & {autoPlay?: boolean}
 }

package/src/components/VideosBrowser.tsx

@@ -75,11 +75,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
         )}
       </Stack>
       {freshEditedAsset && (
-        <VideoDetails
-          closeDialog={() => setEditedAsset(null)}
-          asset={freshEditedAsset}
-          placement={placement}
-        />
+        <VideoDetails closeDialog={() => setEditedAsset(null)} asset={freshEditedAsset} />
       )}
     </>
   )

package/src/components/documentPreview/DocumentPreview.tsx

@@ -3,20 +3,16 @@
 import {DocumentIcon} from '@sanity/icons'
 import type {PropsWithChildren} from 'react'
 import React, {useMemo} from 'react'
-import type {SanityDocument} from 'sanity'
-import type {CollatedHit, FIXME, SchemaType} from 'sanity'
+import type {CollatedHit, FIXME, SanityDocument, SchemaType} from 'sanity'
 import {PreviewCard, useDocumentPresence, useDocumentPreviewStore, useSchema} from 'sanity'
-import {usePaneRouter} from 'sanity/desk'
 import {IntentLink} from 'sanity/router'
 
-import {PluginPlacement} from '../../util/types'
 import {MissingSchemaType} from './MissingSchemaType'
 import {PaneItemPreview} from './PaneItemPreview'
 
 interface DocumentPreviewProps {
   schemaType?: SchemaType
   documentPair: CollatedHit<SanityDocument>
-  placement?: PluginPlacement
 }
 
 /**
@@ -35,23 +31,7 @@ export function getIconWithFallback(
   return icon || ((schemaType && schemaType.icon) as any) || defaultIcon || false
 }
 
-/** When inside the field input, we can open the reference on a child pane */
-function DocumentPreviewInInput(props: PropsWithChildren<DocumentPreviewProps>) {
-  const {ChildLink} = usePaneRouter()
-
-  return (linkProps: PropsWithChildren) => (
-    <ChildLink
-      childId={props.documentPair.id}
-      // Pass the schemaType of the document so `paneChild` in `buildPagesStructure` can access it
-      childParameters={{type: props.documentPair.type}}
-    >
-      {linkProps.children}
-    </ChildLink>
-  )
-}
-
-/** When inside the tool, we must use a regular intent link to take users to the desk tool */
-function DocumentPreviewInRool(props: DocumentPreviewProps) {
+function DocumentPreviewLink(props: DocumentPreviewProps) {
   return (linkProps: PropsWithChildren) => (
     <IntentLink intent="edit" params={{id: props.documentPair.id}}>
       {linkProps.children}
@@ -90,11 +70,7 @@ export function DocumentPreview(props: DocumentPreviewProps) {
   return (
     <PreviewCard
       __unstable_focusRing
-      as={
-        (props.placement === 'input'
-          ? DocumentPreviewInInput(props)
-          : DocumentPreviewInRool(props)) as FIXME
-      }
+      as={DocumentPreviewLink(props) as FIXME}
       data-as="a"
       data-ui="PaneItem"
       padding={2}

package/src/hooks/useAccessControl.ts

@@ -0,0 +1,12 @@
+import {useCurrentUser} from 'sanity'
+import {PluginConfig} from '../util/types'
+
+export const useAccessControl = (config: PluginConfig) => {
+  const user = useCurrentUser()
+
+  const hasConfigAccess =
+    !config?.allowedRolesForConfiguration ||
+    user?.roles?.some((role) => config.allowedRolesForConfiguration.includes(role.name))
+
+  return {hasConfigAccess}
+}

package/src/schema.ts

@@ -141,7 +141,7 @@ const muxAssetData = {
 
 const muxVideoAsset = {
   name: 'mux.videoAsset',
-  type: 'object',
+  type: 'document',
   title: 'Video asset',
   fields: [
     {

package/src/util/types.ts

@@ -88,6 +88,14 @@ export 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[]
 }
 
 export const SUPPORTED_MUX_LANGUAGES = [