sanity-plugin-mux-input 3.0.4 → 3.0.5

package/src/components/EditThumbnailDialog.tsx

@@ -24,7 +24,7 @@ export default function EditThumbnailDialog({asset, currentTime = 0}: Props) {
   const dialogId = `EditThumbnailDialog${useId()}`
 
   const [timeFormatted, setTimeFormatted] = useState<string>(() =>
-    formatSecondsToHHMMSS(currentTime)
+    formatSecondsToHHMMSS(currentTime),
   )
   const [nextTime, setNextTime] = useState<number>(currentTime)
   const [inputError, setInputError] = useState<string>('')
@@ -35,17 +35,16 @@ export default function EditThumbnailDialog({asset, currentTime = 0}: Props) {
   const handleSave = () => {
     setSaving(true)
     client
-      .patch(asset._id!)
+      .patch(asset._id)
       .set({thumbTime: nextTime})
       .commit({returnDocuments: false})
-      .then(() => void setDialogState(false))
+      .then(() => setDialogState(false))
       .catch(setSaveThumbnailError)
-      .finally(() => void setSaving(false))
+      .finally(() => setSaving(false))
   }
   const width = 300 * getDevicePixelRatio({maxDpr: 2})
 
   if (saveThumbnailError) {
-    // eslint-disable-next-line no-warning-comments
     // @TODO handle errors more gracefully
     throw saveThumbnailError
   }

package/src/components/ErrorBoundaryCard.tsx

@@ -16,6 +16,7 @@ function ErrorBoundaryCard(props: Props) {
   const {push: pushToast} = useToast()
   const errorRef = useRef(null)
   const {ErrorBoundary, didCatch, error, reset} = useErrorBoundary({
+    // oxlint-disable-next-line no-unstable-nested-components
     onDidCatch: (err, errorInfo) => {
       console.group(err.toString())
       console.groupCollapsed('console.error')

package/src/components/FileInputButton.tsx

@@ -28,7 +28,7 @@ export const FileInputButton = ({onSelect, accept, ...props}: FileInputButtonPro
         onSelect(event.target.files!)
       }
     },
-    [onSelect]
+    [onSelect],
   )
   const handleButtonClick = useCallback(() => inputRef.current?.click(), [])
   return (

package/src/components/FileInputMenuItem.tsx

@@ -1,5 +1,5 @@
-import {Box, ButtonProps, Flex, Text} from '@sanity/ui'
-import React, {createElement, isValidElement, useId} from 'react'
+import {Box, type ButtonProps, Flex, Text} from '@sanity/ui'
+import {isValidElement, useId, forwardRef, useCallback} from 'react'
 import {isValidElementType} from 'react-is'
 
 import {FileButton} from './FileInputMenuItem.styled'
@@ -12,13 +12,13 @@ export interface FileInputMenuItemProps extends ButtonProps {
   disabled?: boolean
 }
 
-export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
+export const FileInputMenuItem = forwardRef(function FileInputMenuItem(
   props: FileInputMenuItemProps &
     Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref' | 'type' | 'value' | 'onSelect'>,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>
+  forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const {
-    icon,
+    icon: Icon,
     id: idProp,
     accept,
     capture,
@@ -34,23 +34,23 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
   const idHook = useId()
   const id = idProp || idHook
 
-  const handleChange = React.useCallback(
+  const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       if (onSelect && event.target.files) {
         onSelect(Array.from(event.target.files))
       }
     },
-    [onSelect]
+    [onSelect],
   )
 
   const content = (
     <Flex align="center" justify="flex-start">
       {/* Icon */}
-      {icon && (
+      {Icon && (
         <Box marginRight={text ? space : undefined}>
           <Text size={fontSize}>
-            {isValidElement(icon) && icon}
-            {isValidElementType(icon) && createElement(icon)}
+            {isValidElement(Icon) && Icon}
+            {isValidElementType(Icon) && <Icon />}
           </Text>
         </Box>
       )}

package/src/components/ImportVideosFromMux.tsx

@@ -98,7 +98,6 @@ function MissingAsset({
   )
 }
 
-// eslint-disable-next-line complexity
 function ImportVideosDialog(props: ReturnType<typeof useImportMuxAssets>) {
   const {importState} = props
 
@@ -333,10 +332,8 @@ export default function ImportVideosFromMux() {
   }
 
   if (importAssets.dialogOpen) {
-    // eslint-disable-next-line consistent-return
     return <ImportVideosDialog {...importAssets} />
   }
 
-  // eslint-disable-next-line consistent-return
   return <Button mode="bleed" text="Import from Mux" onClick={importAssets.openDialog} />
 }

package/src/components/MuxLogo.tsx

@@ -1,5 +1,5 @@
 import {useTheme_v2} from '@sanity/ui'
-import {CSSProperties, useId, useMemo} from 'react'
+import {type CSSProperties, useId, useMemo} from 'react'
 
 export interface Props {
   height?: number

package/src/components/Onboard.tsx

@@ -4,7 +4,7 @@ import {useCallback} from 'react'
 
 import {useAccessControl} from '../hooks/useAccessControl'
 import type {SetDialogState} from '../hooks/useDialogState'
-import {PluginConfig} from '../util/types'
+import {type PluginConfig} from '../util/types'
 import MuxLogo from './MuxLogo'
 
 interface OnboardProps {

package/src/components/PageSelector.tsx

@@ -1,6 +1,6 @@
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
 import {Button, Label} from '@sanity/ui'
-import {Dispatch, SetStateAction, useEffect} from 'react'
+import {type Dispatch, type SetStateAction, useEffect} from 'react'
 
 const PageSelector = (props: {
   page: number

package/src/components/Player.styled.tsx

@@ -1,30 +1,5 @@
-import {Suspense, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {useClient} from '../hooks/useClient'
-import {getStoryboardSrc} from '../util/getStoryboardSrc'
-import type {VideoAssetDocument} from '../util/types'
-
-export const StyledCenterControls = styled.div`
-  && {
-    --media-background-color: transparent;
-    --media-button-icon-width: 100%;
-    --media-button-icon-height: auto;
-    pointer-events: none;
-    width: 100%;
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    justify-content: center;
-    media-play-button {
-      --media-control-background: transparent;
-      --media-control-hover-background: transparent;
-      padding: 0;
-      width: max(27px, min(9%, 90px));
-    }
-  }
-`
-
 export const TopControls = styled.div`
   position: absolute;
   top: 0;
@@ -34,22 +9,3 @@ export const TopControls = styled.div`
     height: auto;
   }
 `
-
-export interface PosterImageProps {
-  asset: VideoAssetDocument
-}
-export interface ThumbnailsMetadataTrackProps {
-  asset: VideoAssetDocument
-}
-export function ThumbnailsMetadataTrack({asset}: ThumbnailsMetadataTrackProps) {
-  const client = useClient()
-  // Why useState instead of useMemo? Because we really really only want to run it exactly once and useMemo doesn't make that guarantee
-  const [src] = useState<string>(() => getStoryboardSrc({asset, client}))
-
-  return (
-    /* We use Suspense here because `getStoryboardSrc` uses suspend() under the hood */
-    <Suspense fallback={null}>
-      <track label="thumbnails" default kind="metadata" src={src} />
-    </Suspense>
-  )
-}

package/src/components/Player.tsx

@@ -33,6 +33,7 @@ const Player = ({asset, buttons, readOnly, onChange, config}: Props) => {
 
     return true
   }, [asset])
+  // oxlint-disable-next-line react/react-compiler
   const isPreparingStaticRenditions = useMemo<boolean>(() => {
     // Legacy: If static_renditions has a status field, it was created with mp4_support (deprecated)
     // We don't process this old format, just return false
@@ -70,7 +71,6 @@ const Player = ({asset, buttons, readOnly, onChange, config}: Props) => {
   useEffect(() => {
     if (asset?.status === 'errored') {
       handleCancelUpload()
-      // eslint-disable-next-line no-warning-comments
       // @TODO use better error handling
       throw new Error(asset.data?.errors?.messages?.join(' '))
     }

package/src/components/PlayerActionsMenu.tsx

@@ -61,7 +61,7 @@ function PlayerActionsMenu(
     setDialogState: SetDialogState
     config: PluginConfig
     accept: string
-  }
+  },
 ) {
   const {asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept} = props
   const [open, setOpen] = useState(false)
@@ -79,13 +79,14 @@ function PlayerActionsMenu(
 
   useEffect(() => {
     if (open && dialogState) {
+      // oxlint-disable-next-line react/react-compiler
       setOpen(false)
     }
   }, [dialogState, open])
 
   useClickOutsideEvent(
     () => setOpen(false),
-    () => [menuElement]
+    () => [menuElement],
   )
 
   return (

package/src/components/ResyncMetadata.tsx

@@ -69,7 +69,7 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
   const videosToUpdate = props.matchedAssets?.filter((m) => m.muxAsset).length || 0
   const videosWithEmptyOrPlaceholder =
     props.matchedAssets?.filter(
-      (m) => m.muxAsset && m.muxTitle && isEmptyOrPlaceholderTitle(m.currentTitle, m.muxAsset.id)
+      (m) => m.muxAsset && m.muxTitle && isEmptyOrPlaceholderTitle(m.currentTitle, m.muxAsset.id),
     ).length || 0
 
   const hasEmptyTitles = videosWithEmptyOrPlaceholder > 0
@@ -84,13 +84,13 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
   const handleSync = () => {
     switch (selectedOption) {
       case 'fillEmpty':
-        props.syncOnlyEmpty()
+        void props.syncOnlyEmpty()
         break
       case 'syncTitles':
-        props.syncAllVideos()
+        void props.syncAllVideos()
         break
       case 'fullResync':
-        props.syncFullData()
+        void props.syncFullData()
         break
       default:
         break
@@ -271,10 +271,8 @@ export default function ResyncMetadata() {
   }
 
   if (resyncMetadata.dialogOpen) {
-    // eslint-disable-next-line consistent-return
     return <ResyncMetadataDialog {...resyncMetadata} />
   }
 
-  // eslint-disable-next-line consistent-return
   return <Button mode="bleed" text="Sync with Mux" onClick={resyncMetadata.openDialog} />
 }

package/src/components/SelectAsset.tsx

@@ -27,12 +27,12 @@ export default function SelectAssets({
           PatchEvent.from([
             setIfMissing({asset: {}, _type: 'mux.video'}),
             set({_type: 'reference', _weak: true, _ref: chosenAsset._id}, ['asset']),
-          ])
+          ]),
         )
       }
       setDialogState(false)
     },
-    [onChange, setDialogState, selectedAsset]
+    [onChange, setDialogState, selectedAsset],
   )
 
   return <VideosBrowser onSelect={handleSelect} config={config} />

package/src/components/SelectSortOptions.tsx

@@ -1,10 +1,10 @@
 import {SortIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuItem, PopoverProps} from '@sanity/ui'
+import {Button, Menu, MenuButton, MenuItem, type PopoverProps} from '@sanity/ui'
 import {useId} from 'react'
 
-import {ASSET_SORT_OPTIONS, SortOption} from '../hooks/useAssets'
+import {ASSET_SORT_OPTIONS, type SortOption} from '../hooks/useAssets'
 
-export const CONTEXT_MENU_POPOVER_PROPS: PopoverProps = {
+const CONTEXT_MENU_POPOVER_PROPS: PopoverProps = {
   constrainSize: true,
   placement: 'bottom',
   portal: true,

package/src/components/TextTracksEditor.tsx

@@ -2,10 +2,10 @@ import {TranslateIcon} from '@sanity/icons'
 import {Autocomplete, Box, Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
 import LanguagesList from 'iso-639-1'
-import {Dispatch} from 'react'
+import {type Dispatch} from 'react'
 import {FormField} from 'sanity'
 
-import {type PluginConfig, SUPPORTED_MUX_LANGUAGES, UploadTextTrack} from '../util/types'
+import {type PluginConfig, SUPPORTED_MUX_LANGUAGES, type UploadTextTrack} from '../util/types'
 
 const ALL_LANGUAGE_CODES = LanguagesList.getAllCodes().map((code) => ({
   value: code,

package/src/components/TextTracksManager.tsx

@@ -225,7 +225,7 @@ export default function TextTracksManager({
   const activeTracks = realTracks.filter(
     (track) =>
       track.id &&
-      (track.status === 'ready' || track.status === 'preparing' || track.status === 'errored')
+      (track.status === 'ready' || track.status === 'preparing' || track.status === 'errored'),
   )
 
   const allTracks = useMemo(() => {
@@ -260,7 +260,7 @@ export default function TextTracksManager({
 
     const isTrackAlreadyInRealTracks = (
       addedTrack: MuxTextTrack,
-      realTracksList: MuxTextTrack[]
+      realTracksList: MuxTextTrack[],
     ) => {
       if (!addedTrack.id) return false
       if (addedTrack.id.startsWith('generating-')) {
@@ -306,6 +306,7 @@ export default function TextTracksManager({
       }
     })
 
+    // oxlint-disable-next-line react/react-compiler
     setAutogeneratedTrackIds((prev) => {
       let hasNew = false
       const updated = new Set(prev)
@@ -335,7 +336,7 @@ export default function TextTracksManager({
 
         const isMockTrackReplaced = (
           mockTrack: MuxTextTrack,
-          fetchedTracksList: MuxTextTrack[]
+          fetchedTracksList: MuxTextTrack[],
         ) => {
           if (!mockTrack.id || !mockTrack.id.startsWith('generating-')) {
             return false
@@ -423,7 +424,7 @@ export default function TextTracksManager({
   const visibleTracks = allTracks
     .filter(
       (track) =>
-        track.status === 'ready' || track.status === 'preparing' || track.status === 'errored'
+        track.status === 'ready' || track.status === 'preparing' || track.status === 'errored',
     )
     .sort((a, b) => {
       const orderA = trackActivityOrder.get(a.id) || 0

package/src/components/UploadConfiguration.tsx

@@ -22,7 +22,7 @@ import {
   type SupportedMuxLanguage,
   type UploadConfig,
   type UploadTextTrack,
-  WatermarkConfig,
+  type WatermarkConfig,
 } from '../util/types'
 import DraggableWatermark, {WatermarkControls} from './DraggableWatermark'
 import TextTracksEditor, {type TrackAction} from './TextTracksEditor'
@@ -56,7 +56,7 @@ const VIDEO_QUALITY_LEVELS = [
  * If both are present, only 'highest' (and 'audio-only' if present) will be kept.
  */
 function sanitizeStaticRenditions(
-  renditions: StaticRenditionResolution[]
+  renditions: StaticRenditionResolution[],
 ): StaticRenditionResolution[] {
   const hasHighest = renditions.includes('highest')
   const hasSpecificResolutions = renditions.some((r) => r !== 'highest' && r !== 'audio-only')
@@ -91,6 +91,7 @@ export default function UploadConfiguration({
   const [watermarkValidationError, setWatermarkValidationError] = useState<string | null>(null)
   const watermarkPreviewContainerRef = useRef<HTMLDivElement>(null)
   const watermarkPreviewVideoRef = useRef<HTMLVideoElement>(null)
+  // oxlint-disable-next-line react/react-compiler
   const autoTextTracks = useRef<NonNullable<UploadConfig['text_tracks']>>(
     pluginConfig.video_quality === 'plus' && pluginConfig.defaultAutogeneratedSubtitleLang
       ? [
@@ -101,10 +102,11 @@ export default function UploadConfiguration({
             name: LanguagesList.getNativeName(pluginConfig.defaultAutogeneratedSubtitleLang),
           } satisfies AutogeneratedTextTrack,
         ]
-      : []
+      : [],
   ).current
 
   const [config, dispatch] = useReducer(
+    // oxlint-disable-next-line react/react-compiler
     (prev: UploadConfig, action: UploadConfigurationStateAction) => {
       switch (action.action) {
         case 'video_quality':
@@ -143,7 +145,6 @@ export default function UploadConfiguration({
         case 'track': {
           const text_tracks = [...prev.text_tracks]
           const target_track_i = text_tracks.findIndex(({_id}) => _id === action.id)
-          // eslint-disable-next-line default-case
           switch (action.subAction) {
             case 'add':
               // Exit early if track already exists
@@ -180,7 +181,7 @@ export default function UploadConfiguration({
       drm_policy: pluginConfig.defaultDrm && !!secrets.drmConfigId,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks,
-    } as UploadConfig
+    } as UploadConfig,
   )
 
   // Video validations
@@ -190,7 +191,7 @@ export default function UploadConfiguration({
 
   const {fileSize, isLoadingFileSize, canSkipFileSizeValidation} = useFetchFileSize(
     stagedUpload,
-    MAX_FILE_SIZE
+    MAX_FILE_SIZE,
   )
   const {videoAssetMetadata, setVideoAssetMetadata, isLoadingMetadata} =
     useMediaMetadata(stagedUpload)
@@ -205,7 +206,7 @@ export default function UploadConfiguration({
     const validateDuration = (duration: number) => {
       if (MAX_DURATION_SECONDS && duration > MAX_DURATION_SECONDS) {
         setValidationError(
-          `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`
+          `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`,
         )
         return false
       }
@@ -218,7 +219,7 @@ export default function UploadConfiguration({
       }
 
       setValidationError(
-        `File size (${formatBytes(size)}) exceeds maximum allowed size of ${formatBytes(MAX_FILE_SIZE)}`
+        `File size (${formatBytes(size)}) exceeds maximum allowed size of ${formatBytes(MAX_FILE_SIZE)}`,
       )
       return false
     }
@@ -242,6 +243,7 @@ export default function UploadConfiguration({
       valid = valid && validateDrmAvailability(videoAssetMetadata.isAudioOnly)
     }
     if (valid) {
+      // oxlint-disable-next-line react/react-compiler
       setValidationError(null)
     }
   }, [
@@ -276,7 +278,7 @@ export default function UploadConfiguration({
   const basicConfig = config.video_quality !== 'plus' && config.video_quality !== 'premium'
   const playbackPolicySelected = config.public_policy || config.signed_policy || config.drm_policy
   const maxSupportedResolution = RESOLUTION_TIERS.findIndex(
-    (rt) => rt.value === pluginConfig.max_resolution_tier
+    (rt) => rt.value === pluginConfig.max_resolution_tier,
   )
   return (
     <Dialog
@@ -314,11 +316,11 @@ export default function UploadConfiguration({
             <DocumentVideoIcon fontSize="2em" />
             <Stack space={2}>
               <Text textOverflow="ellipsis" as="h2" size={3}>
-                {stagedUpload.type === 'file' ? stagedUpload.files[0].name : stagedUpload.url}
+                {stagedUpload.type === 'file' ? stagedUpload.files[0]!.name : stagedUpload.url}
               </Text>
               <Text as="p" size={1} muted>
                 {stagedUpload.type === 'file'
-                  ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})`
+                  ? `Direct File Upload (${formatBytes(stagedUpload.files[0]!.size)})`
                   : (() => {
                       if (videoAssetMetadata?.size) {
                         return `File From URL (${formatBytes(videoAssetMetadata.size)})`
@@ -456,7 +458,7 @@ export default function UploadConfiguration({
 
 function setAdvancedPlaybackPolicy(
   config: UploadConfig,
-  secrets: Secrets
+  secrets: Secrets,
 ): MuxNewAssetSettings['advanced_playback_policies'] {
   const advanced_playback_policies: MuxNewAssetSettings['advanced_playback_policies'] = []
   if (config.public_policy) {
@@ -481,7 +483,7 @@ function setAdvancedPlaybackPolicy(
 function formatUploadConfig(
   config: UploadConfig,
   secrets: Secrets,
-  options?: {videoAspectRatio?: number | null}
+  options?: {videoAspectRatio?: number | null},
 ): {
   settings: MuxNewAssetSettings
   watermark?: WatermarkConfig
@@ -512,7 +514,7 @@ function formatUploadConfig(
         }
         return acc
       },
-      [] as NonNullable<MuxNewAssetSettings['input']>
+      [] as NonNullable<MuxNewAssetSettings['input']>,
     ),
   ]
 
@@ -633,7 +635,7 @@ const WatermarkPreview = memo(function WatermarkPreview({
   useEffect(() => {
     if (videoRef.current && stagedUpload.type === 'file') {
       const file = stagedUpload.files[0]
-      const url = URL.createObjectURL(file)
+      const url = URL.createObjectURL(file!)
       videoRef.current.src = url
 
       return () => {

package/src/components/UploadPlaceholder.tsx

@@ -4,7 +4,7 @@ import {useCallback} from 'react'
 
 import {useAccessControl} from '../hooks/useAccessControl'
 import type {SetDialogState} from '../hooks/useDialogState'
-import {PluginConfig} from '../util/types'
+import {type PluginConfig} from '../util/types'
 import {FileInputButton, type FileInputButtonProps} from './FileInputButton'
 
 function formatAcceptString(accept: string): string {

package/src/components/UploadProgress.tsx

@@ -4,22 +4,22 @@ import {Button, Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {LinearProgress} from 'sanity'
 import {styled} from 'styled-components'
 
-export const CardWrapper = styled(Card)`
+const CardWrapper = styled(Card)`
   min-height: 82px;
   box-sizing: border-box;
 `
 
-export const FlexWrapper = styled(Flex)`
+const FlexWrapper = styled(Flex)`
   text-overflow: ellipsis;
   overflow: hidden;
 `
 
-export const LeftSection = styled(Stack)`
+const LeftSection = styled(Stack)`
   position: relative;
   width: 60%;
 `
 
-export const CodeWrapper = styled(Code)`
+const CodeWrapper = styled(Code)`
   position: relative;
   width: 100%;
 

package/src/components/Uploader.styled.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import {Card, type CardTone} from '@sanity/ui'
 import React, {forwardRef, useCallback, useRef} from 'react'
 import {styled} from 'styled-components'
@@ -51,7 +50,7 @@ export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps>(
         {children}
       </UploadCardWithFocusRing>
     )
-  }
+  },
 )
 
 const HiddenInput = styled.input.attrs({type: 'text'})`