sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/components/uploadConfiguration/PlaybackPolicyWarning.tsx

@@ -1,29 +0,0 @@
-import {WarningFilledIcon} from '@sanity/icons'
-import {Box, Flex, Text} from '@sanity/ui'
-import {CSSProperties} from 'react'
-
-export default function PlaybackPolicyWarning() {
-  const textStyle: CSSProperties = {
-    color: '#13141A',
-    fontWeight: 500,
-  }
-
-  const boxStyle: CSSProperties = {
-    outline: '0.01rem solid grey',
-    backgroundColor: '#979cb0',
-    borderRadius: '0.5rem',
-    width: 'max-content',
-    color: '#13141A',
-  }
-
-  return (
-    <Box padding={2} style={boxStyle}>
-      <Flex align="center" gap={2}>
-        <WarningFilledIcon />
-        <Text size={1} style={textStyle}>
-          Please select at least one Playback Policy
-        </Text>
-      </Flex>
-    </Box>
-  )
-}

package/src/components/uploadConfiguration/ResolutionTierSelector.tsx

@@ -1,72 +0,0 @@
-import {Flex, Radio, Text} from '@sanity/ui'
-import {ActionDispatch} from 'react'
-import {FormField} from 'sanity'
-
-import {type UploadConfig} from '../../util/types'
-import {UploadConfigurationStateAction} from '../UploadConfiguration'
-
-export const RESOLUTION_TIERS = [
-  {value: '1080p', label: '1080p'},
-  {value: '1440p', label: '1440p (2k)'},
-  {value: '2160p', label: '2160p (4k)'},
-] as const satisfies {value: UploadConfig['max_resolution_tier']; label: string}[]
-
-export const ResolutionTierSelector = ({
-  id,
-  config,
-  dispatch,
-  maxSupportedResolution,
-}: {
-  id: string
-  config: UploadConfig
-  dispatch: ActionDispatch<[action: UploadConfigurationStateAction]>
-  maxSupportedResolution: number
-}) => {
-  return (
-    <FormField
-      path={[]}
-      title="Resolution Tier"
-      description={
-        <>
-          The maximum{' '}
-          <a
-            href="https://docs.mux.com/api-reference#video/operation/create-direct-upload"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            resolution_tier
-          </a>{' '}
-          your asset is encoded, stored, and streamed at.
-        </>
-      }
-    >
-      <Flex gap={3} wrap={'wrap'}>
-        {RESOLUTION_TIERS.map(({value, label}, index) => {
-          const inputId = `${id}--type-${value}`
-
-          if (index > maxSupportedResolution) return null
-
-          return (
-            <Flex key={value} align="center" gap={2}>
-              <Radio
-                checked={config.max_resolution_tier === value}
-                name="asset-resolutiontier"
-                onChange={(e) =>
-                  dispatch({
-                    action: 'max_resolution_tier',
-                    value: e.currentTarget.value as UploadConfig['max_resolution_tier'],
-                  })
-                }
-                value={value}
-                id={inputId}
-              />
-              <Text as="label" htmlFor={inputId}>
-                {label}
-              </Text>
-            </Flex>
-          )
-        })}
-      </Flex>
-    </FormField>
-  )
-}

package/src/components/uploadConfiguration/StaticRenditionSelector.tsx

@@ -1,180 +0,0 @@
-import {Checkbox, Flex, Label, Radio, Stack, Text} from '@sanity/ui'
-import {ActionDispatch, useMemo, useState} from 'react'
-import {FormField} from 'sanity'
-
-import {type StaticRenditionResolution, type UploadConfig} from '../../util/types'
-import {UploadConfigurationStateAction} from '../UploadConfiguration'
-
-const ADVANCED_RESOLUTIONS: {value: StaticRenditionResolution; label: string}[] = [
-  {value: '270p', label: '270p'},
-  {value: '360p', label: '360p'},
-  {value: '480p', label: '480p'},
-  {value: '540p', label: '540p'},
-  {value: '720p', label: '720p'},
-  {value: '1080p', label: '1080p'},
-  {value: '1440p', label: '1440p'},
-  {value: '2160p', label: '2160p'},
-]
-
-export const StaticRenditionSelector = ({
-  id,
-  config,
-  dispatch,
-}: {
-  id: string
-  config: UploadConfig
-  dispatch: ActionDispatch<[action: UploadConfigurationStateAction]>
-}) => {
-  // Determine if user is in advanced mode based on selected renditions
-  const isAdvancedMode = useMemo(() => {
-    const specificResolutions = config.static_renditions.filter(
-      (r) => r !== 'highest' && r !== 'audio-only'
-    )
-    return specificResolutions.length > 0
-  }, [config.static_renditions])
-
-  const [renditionMode, setRenditionMode] = useState<'standard' | 'advanced'>(
-    isAdvancedMode ? 'advanced' : 'standard'
-  )
-
-  // Helper to toggle a rendition
-  const toggleRendition = (rendition: StaticRenditionResolution) => {
-    const current = config.static_renditions
-    const hasRendition = current.includes(rendition)
-
-    if (hasRendition) {
-      dispatch({
-        action: 'static_renditions',
-        value: current.filter((r) => r !== rendition),
-      })
-    } else {
-      dispatch({
-        action: 'static_renditions',
-        value: [...current, rendition],
-      })
-    }
-  }
-
-  // When switching modes, clear renditions that don't apply
-  const handleModeChange = (mode: 'standard' | 'advanced') => {
-    setRenditionMode(mode)
-    if (mode === 'standard') {
-      // Remove specific resolutions, keep only highest and audio-only
-      dispatch({
-        action: 'static_renditions',
-        value: config.static_renditions.filter((r) => r === 'highest' || r === 'audio-only'),
-      })
-    } else {
-      // Remove highest, keep specific resolutions and audio-only
-      dispatch({
-        action: 'static_renditions',
-        value: config.static_renditions.filter((r) => r !== 'highest'),
-      })
-    }
-  }
-  return (
-    <Stack space={3}>
-      <FormField
-        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."
-      >
-        <Stack space={3}>
-          {/* Mode Selector */}
-          <Flex gap={3}>
-            <Flex align="center" gap={2}>
-              <Radio
-                checked={renditionMode === 'standard'}
-                name="rendition-mode"
-                onChange={() => handleModeChange('standard')}
-                value="standard"
-                id={`${id}--mode-standard`}
-              />
-              <Text as="label" htmlFor={`${id}--mode-standard`}>
-                Standard
-              </Text>
-            </Flex>
-            <Flex align="center" gap={2}>
-              <Radio
-                checked={renditionMode === 'advanced'}
-                name="rendition-mode"
-                onChange={() => handleModeChange('advanced')}
-                value="advanced"
-                id={`${id}--mode-advanced`}
-              />
-              <Text as="label" htmlFor={`${id}--mode-advanced`}>
-                Advanced
-              </Text>
-            </Flex>
-          </Flex>
-
-          {/* Standard Mode Options */}
-          {renditionMode === 'standard' && (
-            <Stack space={2}>
-              <Flex align="center" gap={2} padding={[0, 2]}>
-                <Checkbox
-                  id={`${id}--highest`}
-                  style={{display: 'block'}}
-                  checked={config.static_renditions.includes('highest')}
-                  onChange={() => toggleRendition('highest')}
-                />
-                <Text as="label" htmlFor={`${id}--highest`}>
-                  Highest Resolution (up to 4K)
-                </Text>
-              </Flex>
-              <Flex align="center" gap={2} padding={[0, 2]}>
-                <Checkbox
-                  id={`${id}--audio-only-standard`}
-                  style={{display: 'block'}}
-                  checked={config.static_renditions.includes('audio-only')}
-                  onChange={() => toggleRendition('audio-only')}
-                />
-                <Text as="label" htmlFor={`${id}--audio-only-standard`}>
-                  Audio Only (M4A)
-                </Text>
-              </Flex>
-            </Stack>
-          )}
-
-          {/* Advanced Mode Options */}
-          {renditionMode === 'advanced' && (
-            <Stack space={2}>
-              <Label size={1} muted>
-                Select specific resolutions:
-              </Label>
-              <Flex gap={2} wrap="wrap">
-                {ADVANCED_RESOLUTIONS.map(({value, label}) => {
-                  const inputId = `${id}--resolution-${value}`
-                  return (
-                    <Flex key={value} align="center" gap={2}>
-                      <Checkbox
-                        id={inputId}
-                        style={{display: 'block'}}
-                        checked={config.static_renditions.includes(value)}
-                        onChange={() => toggleRendition(value)}
-                      />
-                      <Text as="label" htmlFor={inputId} size={1}>
-                        {label}
-                      </Text>
-                    </Flex>
-                  )
-                })}
-              </Flex>
-              <Flex align="center" gap={2} padding={[2, 2, 0, 2]}>
-                <Checkbox
-                  id={`${id}--audio-only-advanced`}
-                  style={{display: 'block'}}
-                  checked={config.static_renditions.includes('audio-only')}
-                  onChange={() => toggleRendition('audio-only')}
-                />
-                <Text as="label" htmlFor={`${id}--audio-only-advanced`}>
-                  Audio Only (M4A)
-                </Text>
-              </Flex>
-            </Stack>
-          )}
-        </Stack>
-      </FormField>
-    </Stack>
-  )
-}

package/src/components/withFocusRing/helpers.ts

@@ -1,24 +0,0 @@
-// todo: get these utils from @sanity/ui instead
-export function focusRingBorderStyle(border: {color: string; width: number}): string {
-  return `inset 0 0 0 ${border.width}px ${border.color}`
-}
-
-export function focusRingStyle(opts: {
-  base?: {bg: string}
-  border?: {color: string; width: number}
-  focusRing: {offset: number; width: number}
-}): string {
-  const {base, border, focusRing} = opts
-  const focusRingOutsetWidth = focusRing.offset + focusRing.width
-  const focusRingInsetWidth = 0 - focusRing.offset
-  const bgColor = base ? base.bg : 'var(--card-bg-color)'
-
-  return [
-    focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
-    border && focusRingBorderStyle(border),
-    focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
-    focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`,
-  ]
-    .filter(Boolean)
-    .join(',')
-}

package/src/components/withFocusRing/index.ts

@@ -1 +0,0 @@
-export * from './withFocusRing'

package/src/components/withFocusRing/withFocusRing.ts

@@ -1,30 +0,0 @@
-import {rem} from '@sanity/ui'
-import type {ComponentType} from 'react'
-import {css, styled} from 'styled-components'
-
-import {focusRingBorderStyle, focusRingStyle} from './helpers'
-
-export function withFocusRing<Props>(component: ComponentType<Props>) {
-  return styled(component as unknown as any)<Props & {$border?: boolean}>((props) => {
-    const border = {
-      width: props.$border ? 1 : 0,
-      color: 'var(--card-border-color)',
-    }
-
-    return css`
-      --card-focus-box-shadow: ${focusRingBorderStyle(border)};
-
-      border-radius: ${rem(props.theme.sanity.radius[1])};
-      outline: none;
-      box-shadow: var(--card-focus-box-shadow);
-
-      &:focus {
-        --card-focus-box-shadow: ${focusRingStyle({
-          base: props.theme.sanity.color.base,
-          border,
-          focusRing: props.theme.sanity.focusRing,
-        })};
-      }
-    `
-  })
-}

package/src/context/DialogStateContext.tsx

@@ -1,36 +0,0 @@
-import React, {createContext, useContext} from 'react'
-
-import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
-
-type DialogStateContextProps = {
-  dialogState: DialogState
-  setDialogState: SetDialogState
-}
-
-const DialogStateContext = createContext<DialogStateContextProps>({
-  dialogState: false,
-  setDialogState: () => {
-    return null
-  },
-})
-
-interface DialogStateProviderProps extends DialogStateContextProps {
-  children: React.ReactNode
-}
-
-export const DialogStateProvider = ({
-  dialogState,
-  setDialogState,
-  children,
-}: DialogStateProviderProps) => {
-  return (
-    <DialogStateContext.Provider value={{dialogState, setDialogState}}>
-      {children}
-    </DialogStateContext.Provider>
-  )
-}
-
-export const useDialogStateContext = () => {
-  const context = useContext(DialogStateContext)
-  return context
-}

package/src/context/DrmPlaybackWarningContext.tsx

@@ -1,93 +0,0 @@
-import {Button, Card, Dialog, Stack, Text} from '@sanity/ui'
-import React, {createContext, useContext, useState} from 'react'
-
-import {PluginConfig} from '../util/types'
-
-const LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY = 'mux-plugin-has-shown-drm-playback-warning'
-
-type DrmPlaybackWarningContextContextProps = {
-  hasShownWarning: boolean
-  setHasWarnedAboutDrmPlayback: (b: boolean) => void
-}
-
-const DrmPlaybackWarningContext = createContext<DrmPlaybackWarningContextContextProps>({
-  hasShownWarning: false,
-  setHasWarnedAboutDrmPlayback: () => {
-    return null
-  },
-})
-
-interface DrmPlaybackWarningContextProviderProps {
-  config?: PluginConfig
-  children: React.ReactNode
-}
-
-export const DrmPlaybackWarningContextProvider = ({
-  config,
-  children,
-}: DrmPlaybackWarningContextProviderProps) => {
-  const warningDisabled = config?.disableDrmPlaybackWarning ?? false
-  const hasWarned: boolean =
-    warningDisabled || window.localStorage.getItem(LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY) === 'true'
-  const [hasWarnedAboutDrmPlayback, setHasWarnedAboutDrmPlayback] = useState(hasWarned)
-
-  const setHasShownWarning = (b: boolean) => {
-    window.localStorage.setItem(LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY, b.toString())
-    setHasWarnedAboutDrmPlayback(b)
-  }
-  return (
-    <DrmPlaybackWarningContext.Provider
-      value={{
-        hasShownWarning: hasWarnedAboutDrmPlayback,
-        setHasWarnedAboutDrmPlayback: setHasShownWarning,
-      }}
-    >
-      {children}
-    </DrmPlaybackWarningContext.Provider>
-  )
-}
-
-export const useDrmPlaybackWarningContext = () => {
-  const context = useContext(DrmPlaybackWarningContext)
-  return context
-}
-
-export const DRMWarningDialog = ({onClose}: {onClose: () => void}) => {
-  const {setHasWarnedAboutDrmPlayback} = useDrmPlaybackWarningContext()
-  const _onClose = () => {
-    setHasWarnedAboutDrmPlayback(true)
-    onClose()
-  }
-  return (
-    <Dialog
-      open
-      id="drm-playback-warn"
-      onClose={_onClose}
-      header="DRM Playback Warning"
-      footer={
-        <Stack padding={3}>
-          <Button mode="ghost" tone="primary" onClick={_onClose} text="Ok" />
-        </Stack>
-      }
-    >
-      <Stack space={3} padding={3}>
-        <Card padding={[3, 3, 3]} radius={2}>
-          <Stack space={3}>
-            <Text size={1} weight="semibold">
-              DRM-protected playback will generate a license with a small associated cost. The
-              plugin will attempt to play signed or public playback IDs instead whenever possible.
-            </Text>
-          </Stack>
-        </Card>
-        <Card padding={[3, 3, 3]} radius={2} tone="suggest">
-          <Stack space={3}>
-            <Text size={1} weight="semibold">
-              This is a one time warning. If it persists, you can disable it from your plugin
-              configuration.
-            </Text>
-          </Stack>
-        </Card>
-      </Stack>
-    </Dialog>
-  )
-}

package/src/hooks/useAccessControl.ts

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

package/src/hooks/useAssetDocumentValues.ts

@@ -1,11 +0,0 @@
-import {isReference} from 'sanity'
-import {useDocumentValues} from 'sanity'
-
-import type {Reference, VideoAssetDocument} from '../util/types'
-
-const path = ['assetId', 'data', 'playbackId', 'status', 'thumbTime', 'filename']
-export const useAssetDocumentValues = (asset: Reference | null | undefined) =>
-  useDocumentValues<VideoAssetDocument | null | undefined>(
-    isReference(asset) ? asset._ref! : '',
-    path
-  )

package/src/hooks/useAssets.ts

@@ -1,68 +0,0 @@
-import {useMemo, useState} from 'react'
-import {collate, createHookFromObservableFactory, DocumentStore, useDocumentStore} from 'sanity'
-
-import {SANITY_API_VERSION} from '../hooks/useClient'
-import {createSearchFilter} from '../util/createSearchFilter'
-import type {VideoAssetDocument} from '../util/types'
-
-export const ASSET_SORT_OPTIONS = {
-  createdDesc: {groq: '_createdAt desc', label: 'Newest first'},
-  createdAsc: {groq: '_createdAt asc', label: 'First created (oldest)'},
-  filenameAsc: {groq: 'filename asc', label: 'By filename (A-Z)'},
-  filenameDesc: {groq: 'filename desc', label: 'By filename (Z-A)'},
-}
-
-export type SortOption = keyof typeof ASSET_SORT_OPTIONS
-
-const useAssetDocuments = createHookFromObservableFactory<
-  VideoAssetDocument[],
-  {
-    documentStore: DocumentStore
-    sort: SortOption
-    searchQuery: string
-  }
->(({documentStore, sort, searchQuery}) => {
-  const search = createSearchFilter(searchQuery)
-  const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
-
-  const sortFragment = ASSET_SORT_OPTIONS[sort].groq
-  return documentStore.listenQuery(
-    /* groq */ `*[${filter}] | order(${sortFragment})`,
-    search.params,
-    {
-      apiVersion: SANITY_API_VERSION,
-    }
-  )
-})
-
-export default function useAssets() {
-  const documentStore = useDocumentStore()
-  const [sort, setSort] = useState<SortOption>('createdDesc')
-  const [searchQuery, setSearchQuery] = useState('')
-
-  const [assetDocuments = [], isLoading] = useAssetDocuments(
-    useMemo(() => ({documentStore, sort, searchQuery}), [documentStore, sort, searchQuery])
-  )
-
-  const assets = useMemo(
-    () =>
-      // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-      collate<VideoAssetDocument>(assetDocuments).map(
-        (collated) =>
-          ({
-            ...(collated.draft || collated.published || {}),
-            _id: collated.id,
-          }) as VideoAssetDocument
-      ),
-    [assetDocuments]
-  )
-
-  return {
-    assets,
-    isLoading,
-    sort,
-    searchQuery,
-    setSort,
-    setSearchQuery,
-  }
-}

package/src/hooks/useCancelUpload.ts

@@ -1,22 +0,0 @@
-import {useCallback} from 'react'
-import {PatchEvent, unset} from 'sanity'
-
-import {deleteAssetOnMux} from '../actions/assets'
-import {useClient} from '../hooks/useClient'
-import type {MuxInputProps, VideoAssetDocument} from '../util/types'
-
-export const useCancelUpload = (asset: VideoAssetDocument, onChange: MuxInputProps['onChange']) => {
-  const client = useClient()
-  return useCallback(() => {
-    if (!asset) {
-      return
-    }
-    onChange(PatchEvent.from(unset()))
-    if (asset.assetId) {
-      deleteAssetOnMux(client, asset.assetId)
-    }
-    if (asset._id) {
-      client.delete(asset._id)
-    }
-  }, [asset, client, onChange])
-}

package/src/hooks/useClient.ts

@@ -1,8 +0,0 @@
-// As it's required to specify the API Version this custom hook ensures it's all using the same version
-import {useClient as useSanityClient} from 'sanity'
-
-export const SANITY_API_VERSION = '2024-03-05'
-
-export function useClient() {
-  return useSanityClient({apiVersion: SANITY_API_VERSION})
-}

package/src/hooks/useDialogState.ts

@@ -1,11 +0,0 @@
-// Handy little state machine to simplify managing which root level dialog to open
-
-import {useState} from 'react'
-
-export type DialogState = 'secrets' | 'select-video' | 'edit-thumbnail' | 'edit-captions' | false
-
-export function useDialogState() {
-  return useState<DialogState>(false)
-}
-
-export type SetDialogState = ReturnType<typeof useDialogState>[1]

package/src/hooks/useDocReferences.ts

@@ -1,21 +0,0 @@
-import {createHookFromObservableFactory, DocumentStore, SanityDocument} from 'sanity'
-
-import {SANITY_API_VERSION} from './useClient'
-
-const useDocReferences = createHookFromObservableFactory<
-  SanityDocument[],
-  {
-    documentStore: DocumentStore
-    id: string
-  }
->(({documentStore, id}) => {
-  return documentStore.listenQuery(
-    /* groq */ '*[references($id)]{_id, _type, _rev, _updatedAt, _createdAt}',
-    {id},
-    {
-      apiVersion: SANITY_API_VERSION,
-    }
-  )
-})
-
-export default useDocReferences