sanity-plugin-mux-input 3.0.4 → 3.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/README.md +0 -2
  2. package/dist/index.cjs +2876 -4400
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +134 -193
  5. package/dist/index.d.cts.map +1 -0
  6. package/dist/index.d.ts +134 -193
  7. package/dist/index.d.ts.map +1 -0
  8. package/dist/index.js +2877 -4401
  9. package/dist/index.js.map +1 -1
  10. package/package.json +36 -36
  11. package/src/_exports/index.ts +1 -1
  12. package/src/actions/assets.ts +5 -5
  13. package/src/actions/secrets.ts +5 -6
  14. package/src/actions/upload.ts +32 -34
  15. package/src/components/AddCaptionDialog.tsx +3 -3
  16. package/src/components/ConfigureApi.tsx +7 -7
  17. package/src/components/DraggableWatermark.tsx +15 -7
  18. package/src/components/EditCaptionDialog.tsx +6 -5
  19. package/src/components/EditThumbnailDialog.tsx +4 -5
  20. package/src/components/ErrorBoundaryCard.tsx +1 -0
  21. package/src/components/FileInputButton.tsx +1 -1
  22. package/src/components/FileInputMenuItem.tsx +10 -10
  23. package/src/components/ImportVideosFromMux.tsx +0 -3
  24. package/src/components/MuxLogo.tsx +1 -1
  25. package/src/components/Onboard.tsx +1 -1
  26. package/src/components/PageSelector.tsx +1 -1
  27. package/src/components/Player.styled.tsx +0 -44
  28. package/src/components/Player.tsx +1 -1
  29. package/src/components/PlayerActionsMenu.tsx +3 -2
  30. package/src/components/ResyncMetadata.tsx +4 -6
  31. package/src/components/SelectAsset.tsx +2 -2
  32. package/src/components/SelectSortOptions.tsx +3 -3
  33. package/src/components/TextTracksEditor.tsx +2 -2
  34. package/src/components/TextTracksManager.tsx +5 -4
  35. package/src/components/UploadConfiguration.tsx +17 -15
  36. package/src/components/UploadPlaceholder.tsx +1 -1
  37. package/src/components/UploadProgress.tsx +4 -4
  38. package/src/components/Uploader.styled.tsx +1 -2
  39. package/src/components/Uploader.tsx +15 -14
  40. package/src/components/VideoDetails/DeleteDialog.tsx +2 -1
  41. package/src/components/VideoDetails/VideoDetails.tsx +3 -3
  42. package/src/components/VideoDetails/useVideoDetails.ts +2 -2
  43. package/src/components/VideoInBrowser.tsx +1 -1
  44. package/src/components/VideoMetadata.tsx +1 -1
  45. package/src/components/VideoPlayer.tsx +12 -6
  46. package/src/components/VideoThumbnail.tsx +4 -3
  47. package/src/components/VideosBrowser.tsx +1 -1
  48. package/src/components/documentPreview/DocumentPreview.tsx +4 -3
  49. package/src/components/documentPreview/PaneItemPreview.tsx +5 -12
  50. package/src/components/uploadConfiguration/PlaybackPolicy.tsx +3 -3
  51. package/src/components/uploadConfiguration/PlaybackPolicyOption.tsx +2 -2
  52. package/src/components/uploadConfiguration/PlaybackPolicyWarning.tsx +1 -1
  53. package/src/components/uploadConfiguration/ResolutionTierSelector.tsx +2 -2
  54. package/src/components/uploadConfiguration/StaticRenditionSelector.tsx +4 -4
  55. package/src/components/withFocusRing/withFocusRing.ts +1 -1
  56. package/src/context/DialogStateContext.tsx +3 -6
  57. package/src/context/DrmPlaybackWarningContext.tsx +14 -10
  58. package/src/hooks/useAccessControl.ts +1 -1
  59. package/src/hooks/useAssetDocumentValues.ts +2 -2
  60. package/src/hooks/useAssets.ts +11 -6
  61. package/src/hooks/useCancelUpload.ts +2 -2
  62. package/src/hooks/useDocReferences.ts +2 -2
  63. package/src/hooks/useFetchFileSize.ts +4 -3
  64. package/src/hooks/useImportMuxAssets.ts +3 -3
  65. package/src/hooks/useInView.ts +3 -4
  66. package/src/hooks/useMediaMetadata.ts +5 -4
  67. package/src/hooks/useMuxAssets.ts +15 -15
  68. package/src/hooks/useMuxPolling.ts +6 -3
  69. package/src/hooks/useResyncAsset.ts +1 -1
  70. package/src/hooks/useResyncMuxMetadata.ts +4 -11
  71. package/src/hooks/useSaveSecrets.ts +4 -4
  72. package/src/hooks/useSecretsDocumentValues.ts +1 -1
  73. package/src/util/asserters.ts +0 -13
  74. package/src/util/convertWatermarkToMux.ts +4 -4
  75. package/src/util/createUrlParamsObject.ts +3 -3
  76. package/src/util/extractFiles.ts +3 -3
  77. package/src/util/formatBytes.ts +0 -1
  78. package/src/util/formatSeconds.ts +0 -1
  79. package/src/util/generateJwt.ts +3 -3
  80. package/src/util/getAnimatedPosterSrc.ts +1 -1
  81. package/src/util/getPlaybackPolicy.ts +6 -6
  82. package/src/util/getPosterSrc.ts +1 -1
  83. package/src/util/pluginVersion.ts +5 -1
  84. package/src/util/readSecrets.ts +1 -1
  85. package/src/util/textTracks.ts +5 -5
  86. package/src/util/tryWithSuspend.ts +1 -1
  87. package/src/util/types.ts +2 -32
  88. package/src/components/InputError.tsx +0 -17
  89. package/src/components/documentPreview/paneItemTypes.ts +0 -7
  90. package/src/util/areSecretsSignable.ts +0 -5
  91. package/src/util/getStoryboardSrc.ts +0 -27
  92. package/src/util/isSigned.ts +0 -20
@@ -1,5 +1,5 @@
1
1
  import {ErrorOutlineIcon} from '@sanity/icons'
2
- import {Button, CardTone, Flex, Text, useToast} from '@sanity/ui'
2
+ import {Button, type CardTone, Flex, Text, useToast} from '@sanity/ui'
3
3
  import React, {useCallback, useEffect, useReducer, useRef, useState} from 'react'
4
4
  import {type Observable, Subject, Subscription} from 'rxjs'
5
5
  import {takeUntil, tap} from 'rxjs/operators'
@@ -89,12 +89,13 @@ export default function Uploader(props: Props) {
89
89
  observable: events$.asObservable(),
90
90
  handleClick: ((event) => events$.next(event)) as React.MouseEventHandler<HTMLButtonElement>,
91
91
  }
92
- })()
92
+ })(),
93
93
  ).current
94
94
 
95
95
  const uploadRef = useRef<Subscription | null>(null)
96
96
  const uploadingDocumentId = useRef<string | null>(null)
97
97
  const [state, dispatch] = useReducer(
98
+ // oxlint-disable-next-line react/react-compiler
98
99
  (prev: State, action: UploaderStateAction) => {
99
100
  switch (action.action) {
100
101
  case 'stageUpload':
@@ -135,7 +136,7 @@ export default function Uploader(props: Props) {
135
136
  let error = action.error
136
137
  if (isServerError(action.error) && hasPlaybackPolicy(action.settings, 'drm')) {
137
138
  error = new Error(
138
- 'Unknown Error while uploading DRM protected content. Make sure your DRM configuration ID is valid and set correctly'
139
+ 'Unknown Error while uploading DRM protected content. Make sure your DRM configuration ID is valid and set correctly',
139
140
  )
140
141
  }
141
142
 
@@ -149,7 +150,7 @@ export default function Uploader(props: Props) {
149
150
  stagedUpload: null,
150
151
  uploadStatus: null,
151
152
  error: null,
152
- }
153
+ },
153
154
  )
154
155
 
155
156
  // Make sure we close out the upload observer on dismount
@@ -202,13 +203,12 @@ export default function Uploader(props: Props) {
202
203
  */
203
204
  const startUpload = (
204
205
  settings: MuxNewAssetSettings,
205
- watermark?: import('../util/types').WatermarkConfig
206
+ watermark?: import('../util/types').WatermarkConfig,
206
207
  ) => {
207
208
  const {stagedUpload} = state
208
209
  if (!stagedUpload || uploadRef.current) return
209
210
  dispatch({action: 'commitUpload'})
210
211
  let uploadObservable: Observable<UploadFileEvent | UploadUrlEvent>
211
- // eslint-disable-next-line default-case
212
212
  switch (stagedUpload.type) {
213
213
  case 'url':
214
214
  uploadObservable = uploadUrl({
@@ -221,7 +221,7 @@ export default function Uploader(props: Props) {
221
221
  case 'file':
222
222
  uploadObservable = uploadFile({
223
223
  client: props.client,
224
- file: stagedUpload.files[0],
224
+ file: stagedUpload.files[0]!,
225
225
  settings,
226
226
  watermark,
227
227
  }).pipe(
@@ -229,12 +229,12 @@ export default function Uploader(props: Props) {
229
229
  cancelUploadButton.observable.pipe(
230
230
  tap(() => {
231
231
  if (uploadingDocumentId.current) {
232
- props.client.delete(uploadingDocumentId.current)
232
+ void props.client.delete(uploadingDocumentId.current)
233
233
  uploadingDocumentId.current = null
234
234
  }
235
- })
236
- )
237
- )
235
+ }),
236
+ ),
237
+ ),
238
238
  )
239
239
  break
240
240
  }
@@ -260,7 +260,7 @@ export default function Uploader(props: Props) {
260
260
  PatchEvent.from([
261
261
  setIfMissing({asset: {}}),
262
262
  set({_type: 'reference', _weak: true, _ref: event.asset._id}, ['asset']),
263
- ])
263
+ ]),
264
264
  )
265
265
  break
266
266
  case 'pause':
@@ -342,7 +342,7 @@ export default function Uploader(props: Props) {
342
342
  return
343
343
  }
344
344
  setDragState(null)
345
- extractDroppedFiles(event.nativeEvent.dataTransfer!).then((files) => {
345
+ void extractDroppedFiles(event.nativeEvent.dataTransfer!).then((files) => {
346
346
  dispatch({
347
347
  action: 'stageUpload',
348
348
  input: {type: 'file', files},
@@ -367,7 +367,7 @@ export default function Uploader(props: Props) {
367
367
  const isValidType = mimeTypes?.some((acceptedType) => {
368
368
  // Convert mime type pattern to regex (e.g., 'video/*' -> /^video\/.*$/)
369
369
  const pattern = `^${acceptedType.replace('*', '.*')}$`
370
- return new RegExp(pattern).test(type)
370
+ return new RegExp(pattern).test(type!)
371
371
  })
372
372
 
373
373
  setDragState(isValidType ? 'valid' : 'invalid')
@@ -410,6 +410,7 @@ export default function Uploader(props: Props) {
410
410
  const {uploadStatus} = state
411
411
  return (
412
412
  <UploadProgress
413
+ // oxlint-disable-next-line react/react-compiler
413
414
  onCancel={cancelUploadButton.handleClick}
414
415
  progress={uploadStatus.progress}
415
416
  filename={uploadStatus.file?.name || uploadStatus.url}
@@ -33,6 +33,7 @@ export default function DeleteDialog({
33
33
  useEffect(() => {
34
34
  if (state !== 'checkingReferences' || referencesLoading) return
35
35
 
36
+ // oxlint-disable-next-line react/react-compiler
36
37
  setState(references?.length ? 'cantDelete' : 'confirm')
37
38
  }, [state, references, referencesLoading])
38
39
 
@@ -121,7 +122,7 @@ export default function DeleteDialog({
121
122
  tone="critical"
122
123
  onClick={confirmDelete}
123
124
  disabled={['processing_deletion', 'checkingReferences', 'cantDelete'].some(
124
- (s) => s === state
125
+ (s) => s === state,
125
126
  )}
126
127
  />
127
128
  </Box>
@@ -28,7 +28,7 @@ import {
28
28
  import React, {useEffect, useState} from 'react'
29
29
 
30
30
  import {DIALOGS_Z_INDEX} from '../../util/constants'
31
- import {MuxPlaybackId, MuxTextTrack, PlaybackPolicy} from '../../util/types'
31
+ import type {MuxPlaybackId, MuxTextTrack, PlaybackPolicy} from '../../util/types'
32
32
  import FormField from '../FormField'
33
33
  import IconInfo from '../IconInfo'
34
34
  import {ResolutionIcon} from '../icons/Resolution'
@@ -36,7 +36,7 @@ import {StopWatchIcon} from '../icons/StopWatch'
36
36
  import TextTracksManager from '../TextTracksManager'
37
37
  import VideoPlayer from '../VideoPlayer'
38
38
  import DeleteDialog from './DeleteDialog'
39
- import useVideoDetails, {VideoDetailsProps} from './useVideoDetails'
39
+ import useVideoDetails, {type VideoDetailsProps} from './useVideoDetails'
40
40
  import VideoReferences from './VideoReferences'
41
41
 
42
42
  const AssetInput: React.FC<{
@@ -229,7 +229,7 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
229
229
  tracks={
230
230
  displayInfo?.text_tracks ||
231
231
  props.asset.data?.tracks?.filter(
232
- (track): track is MuxTextTrack => track.type === 'text'
232
+ (track): track is MuxTextTrack => track.type === 'text',
233
233
  ) ||
234
234
  []
235
235
  }
@@ -6,7 +6,7 @@ import {useClient} from '../../hooks/useClient'
6
6
  import useDocReferences from '../../hooks/useDocReferences'
7
7
  import {useResyncAsset} from '../../hooks/useResyncAsset'
8
8
  import getVideoMetadata from '../../util/getVideoMetadata'
9
- import {VideoAssetDocument} from '../../util/types'
9
+ import {type VideoAssetDocument} from '../../util/types'
10
10
 
11
11
  type VideoDetailsState = 'idle' | 'saving' | 'deleting' | 'closing' | 'resyncing'
12
12
 
@@ -21,7 +21,7 @@ export default function useVideoDetails(props: VideoDetailsProps) {
21
21
  const client = useClient()
22
22
 
23
23
  const [references, referencesLoading] = useDocReferences(
24
- useMemo(() => ({documentStore, id: props.asset._id}), [documentStore, props.asset._id])
24
+ useMemo(() => ({documentStore, id: props.asset._id}), [documentStore, props.asset._id]),
25
25
  )
26
26
 
27
27
  const [originalAsset, setOriginalAsset] = useState(() => props.asset)
@@ -6,7 +6,7 @@ import {styled} from 'styled-components'
6
6
  import {DRMWarningDialog, useDrmPlaybackWarningContext} from '../context/DrmPlaybackWarningContext'
7
7
  import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
8
8
  import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
9
- import {VideoAssetDocument} from '../util/types'
9
+ import {type VideoAssetDocument} from '../util/types'
10
10
  import IconInfo from './IconInfo'
11
11
  import {AudioIcon} from './icons/Audio'
12
12
  import VideoMetadata from './VideoMetadata'
@@ -29,7 +29,7 @@ const VideoMetadata = (props: {asset: VideoAssetDocument}) => {
29
29
  <IconInfo text={displayInfo.duration} icon={ClockIcon} size={1} muted />
30
30
  )}
31
31
  <IconInfo
32
- text={displayInfo.createdAt.toISOString().split('T')[0]}
32
+ text={displayInfo.createdAt.toISOString().split('T')[0]!}
33
33
  icon={CalendarIcon}
34
34
  size={1}
35
35
  muted
@@ -45,7 +45,8 @@ export default function VideoPlayer({
45
45
  try {
46
46
  return getPlaybackId(asset, ['public', 'signed', 'drm'])
47
47
  } catch (e) {
48
- setError(new TypeError('Asset has no playback ID'))
48
+ // oxlint-disable-next-line react/react-compiler
49
+ setError(new TypeError('Asset has no playback ID', {cause: e}))
49
50
  return undefined
50
51
  }
51
52
  }, [asset])
@@ -63,7 +64,7 @@ export default function VideoPlayer({
63
64
  (e: Error) => {
64
65
  setError(e)
65
66
  return undefined
66
- }
67
+ },
67
68
  )
68
69
  }, [muxPlaybackId, playbackId, client])
69
70
 
@@ -73,7 +74,7 @@ export default function VideoPlayer({
73
74
  (e: Error) => {
74
75
  setError(e)
75
76
  return undefined
76
- }
77
+ },
77
78
  )
78
79
  }, [asset, client, thumbnailWidth])
79
80
 
@@ -94,7 +95,7 @@ export default function VideoPlayer({
94
95
  (e: Error) => {
95
96
  setError(e)
96
97
  return undefined
97
- }
98
+ },
98
99
  )
99
100
  }, [client, muxPlaybackId?.policy, playbackId])
100
101
  const tokens:
@@ -136,7 +137,7 @@ export default function VideoPlayer({
136
137
 
137
138
  const [width, height] = (asset?.data?.aspect_ratio ?? '16:9').split(':').map(Number)
138
139
  const targetAspectRatio =
139
- props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height)
140
+ props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width! / height!)
140
141
  let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio)
141
142
  if (isAudio) {
142
143
  aspectRatio = props.forceAspectRatio
@@ -185,6 +186,7 @@ export default function VideoPlayer({
185
186
  crossOrigin="anonymous"
186
187
  metadata={{
187
188
  player_name: 'Sanity Admin Dashboard',
189
+ // @ts-expect-error - this constant is search/replaced so must be exact, not accessed with an index signature
188
190
  player_version: process.env.PKG_VERSION,
189
191
  page_type: 'Preview Player',
190
192
  }}
@@ -223,7 +225,11 @@ export default function VideoPlayer({
223
225
  </Card>
224
226
 
225
227
  {dialogState === 'edit-thumbnail' && (
226
- <EditThumbnailDialog asset={asset} currentTime={muxPlayer?.current?.currentTime} />
228
+ <EditThumbnailDialog
229
+ asset={asset}
230
+ // oxlint-disable-next-line react/react-compiler
231
+ currentTime={muxPlayer?.current?.currentTime}
232
+ />
227
233
  )}
228
234
  {dialogState === 'edit-captions' && <CaptionsDialog asset={asset} />}
229
235
  </>
@@ -1,5 +1,5 @@
1
1
  import {ErrorOutlineIcon} from '@sanity/icons'
2
- import {Box, Card, CardTone, Spinner, Stack, Text} from '@sanity/ui'
2
+ import {Box, Card, type CardTone, Spinner, Stack, Text} from '@sanity/ui'
3
3
  import {Suspense, useMemo, useRef, useState} from 'react'
4
4
  import {styled} from 'styled-components'
5
5
 
@@ -9,7 +9,7 @@ import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
9
9
  import {getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
10
10
  import {getPosterSrc} from '../util/getPosterSrc'
11
11
  import {tryWithSuspend} from '../util/tryWithSuspend'
12
- import {AssetThumbnailOptions, MuxAnimatedThumbnailUrl, MuxThumbnailUrl} from '../util/types'
12
+ import type {AssetThumbnailOptions, MuxAnimatedThumbnailUrl, MuxThumbnailUrl} from '../util/types'
13
13
 
14
14
  const Image = styled.img`
15
15
  transition: opacity 0.175s ease-out 0s;
@@ -28,6 +28,7 @@ const STATUS_TO_TONE: Record<ImageStatus, CardTone> = {
28
28
  loaded: 'default',
29
29
  }
30
30
 
31
+ // oxlint-disable-next-line react/react-compiler
31
32
  export default function VideoThumbnail({
32
33
  asset,
33
34
  width,
@@ -57,7 +58,7 @@ export default function VideoThumbnail({
57
58
  (err: Error) => {
58
59
  handleError(err.message)
59
60
  return undefined
60
- }
61
+ },
61
62
  )
62
63
  }, [asset, client, posterWidth, staticImage])
63
64
 
@@ -28,7 +28,7 @@ export default function VideosBrowser({onSelect, config}: VideosBrowserProps) {
28
28
  const [editedAsset, setEditedAsset] = useState<VideoDetailsProps['asset'] | null>(null)
29
29
  const freshEditedAsset = useMemo(
30
30
  () => assets.find((a) => a._id === editedAsset?._id) || editedAsset,
31
- [editedAsset, assets]
31
+ [editedAsset, assets],
32
32
  )
33
33
 
34
34
  const pageStart = page * pageLimit
@@ -19,10 +19,10 @@ interface DocumentPreviewProps {
19
19
  * Return `false` if we explicitly disable the icon.
20
20
  * Otherwise return the passed icon or the schema type icon as a backup.
21
21
  */
22
- export function getIconWithFallback(
22
+ function getIconWithFallback(
23
23
  icon: React.ComponentType<any> | false | undefined,
24
24
  schemaType: SchemaType | undefined,
25
- defaultIcon: React.ComponentType<any>
25
+ defaultIcon: React.ComponentType<any>,
26
26
  ): React.ComponentType<any> | false {
27
27
  if (icon === false) {
28
28
  return false
@@ -52,7 +52,7 @@ export function DocumentPreview(props: DocumentPreviewProps) {
52
52
  if (!doc) return null
53
53
 
54
54
  if (!schemaType || !hasSchemaType) {
55
- return <MissingSchemaType value={doc as SanityDocument} />
55
+ return <MissingSchemaType value={doc} />
56
56
  }
57
57
 
58
58
  return (
@@ -70,6 +70,7 @@ export function DocumentPreview(props: DocumentPreviewProps) {
70
70
  return (
71
71
  <PreviewCard
72
72
  __unstable_focusRing
73
+ // oxlint-disable-next-line react/react-compiler
73
74
  as={DocumentPreviewLink(props) as FIXME}
74
75
  data-as="a"
75
76
  data-ui="PaneItem"
@@ -5,7 +5,6 @@ import {isNumber, isString} from 'lodash'
5
5
  import {isValidElement, useMemo} from 'react'
6
6
  import {useObservable} from 'react-rx'
7
7
  import type {SanityDocument, SchemaType} from 'sanity'
8
- import type {PreviewValue} from 'sanity'
9
8
  import {
10
9
  type DocumentPresence,
11
10
  DocumentPreviewPresence,
@@ -20,12 +19,6 @@ import {
20
19
  import {DraftStatus} from './DraftStatus'
21
20
  import {PublishedStatus} from './PublishedStatus'
22
21
 
23
- export interface PaneItemPreviewState {
24
- isLoading?: boolean
25
- draft?: PreviewValue | Partial<SanityDocument> | null
26
- published?: PreviewValue | Partial<SanityDocument> | null
27
- }
28
-
29
22
  export interface PaneItemPreviewProps {
30
23
  documentPreviewStore: DocumentPreviewStore
31
24
  icon: React.ComponentType | false
@@ -38,15 +31,15 @@ export interface PaneItemPreviewProps {
38
31
  export function PaneItemPreview(props: PaneItemPreviewProps) {
39
32
  const {icon, layout, presence, schemaType, value} = props
40
33
  const title =
41
- (isRecord(value.title) && isValidElement(value.title)) ||
42
- isString(value.title) ||
43
- isNumber(value.title)
44
- ? value.title
34
+ (isRecord(value['title']) && isValidElement(value['title'])) ||
35
+ isString(value['title']) ||
36
+ isNumber(value['title'])
37
+ ? value['title']
45
38
  : null
46
39
 
47
40
  const observable = useMemo(
48
41
  () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id),
49
- [props.documentPreviewStore, schemaType, value._id]
42
+ [props.documentPreviewStore, schemaType, value._id],
50
43
  )
51
44
  const {snapshot, original, isLoading} = useObservable(observable, {
52
45
  isLoading: true,
@@ -1,8 +1,8 @@
1
1
  import {Code, Grid, Text} from '@sanity/ui'
2
- import {ActionDispatch} from 'react'
2
+ import {type ActionDispatch} from 'react'
3
3
 
4
- import {Secrets, UploadConfig} from '../../util/types'
5
- import {UploadConfigurationStateAction} from '../UploadConfiguration'
4
+ import {type Secrets, type UploadConfig} from '../../util/types'
5
+ import {type UploadConfigurationStateAction} from '../UploadConfiguration'
6
6
  import PlaybackPolicyOption from './PlaybackPolicyOption'
7
7
  import PlaybackPolicyWarning from './PlaybackPolicyWarning'
8
8
 
@@ -1,7 +1,7 @@
1
1
  import {Checkbox, Flex, Grid, Text} from '@sanity/ui'
2
- import {ActionDispatch, CSSProperties, ReactNode, useState} from 'react'
2
+ import {type ActionDispatch, type CSSProperties, type ReactNode, useState} from 'react'
3
3
 
4
- import {UploadConfigurationStateAction} from '../UploadConfiguration'
4
+ import {type UploadConfigurationStateAction} from '../UploadConfiguration'
5
5
 
6
6
  export default function PlaybackPolicyOption({
7
7
  id,
@@ -1,6 +1,6 @@
1
1
  import {WarningFilledIcon} from '@sanity/icons'
2
2
  import {Box, Flex, Text} from '@sanity/ui'
3
- import {CSSProperties} from 'react'
3
+ import {type CSSProperties} from 'react'
4
4
 
5
5
  export default function PlaybackPolicyWarning() {
6
6
  const textStyle: CSSProperties = {
@@ -1,9 +1,9 @@
1
1
  import {Flex, Radio, Text} from '@sanity/ui'
2
- import {ActionDispatch} from 'react'
2
+ import {type ActionDispatch} from 'react'
3
3
  import {FormField} from 'sanity'
4
4
 
5
5
  import {type UploadConfig} from '../../util/types'
6
- import {UploadConfigurationStateAction} from '../UploadConfiguration'
6
+ import {type UploadConfigurationStateAction} from '../UploadConfiguration'
7
7
 
8
8
  export const RESOLUTION_TIERS = [
9
9
  {value: '1080p', label: '1080p'},
@@ -1,9 +1,9 @@
1
1
  import {Checkbox, Flex, Label, Radio, Stack, Text} from '@sanity/ui'
2
- import {ActionDispatch, useMemo, useState} from 'react'
2
+ import {type ActionDispatch, useMemo, useState} from 'react'
3
3
  import {FormField} from 'sanity'
4
4
 
5
5
  import {type StaticRenditionResolution, type UploadConfig} from '../../util/types'
6
- import {UploadConfigurationStateAction} from '../UploadConfiguration'
6
+ import {type UploadConfigurationStateAction} from '../UploadConfiguration'
7
7
 
8
8
  const ADVANCED_RESOLUTIONS: {value: StaticRenditionResolution; label: string}[] = [
9
9
  {value: '270p', label: '270p'},
@@ -28,13 +28,13 @@ export const StaticRenditionSelector = ({
28
28
  // Determine if user is in advanced mode based on selected renditions
29
29
  const isAdvancedMode = useMemo(() => {
30
30
  const specificResolutions = config.static_renditions.filter(
31
- (r) => r !== 'highest' && r !== 'audio-only'
31
+ (r) => r !== 'highest' && r !== 'audio-only',
32
32
  )
33
33
  return specificResolutions.length > 0
34
34
  }, [config.static_renditions])
35
35
 
36
36
  const [renditionMode, setRenditionMode] = useState<'standard' | 'advanced'>(
37
- isAdvancedMode ? 'advanced' : 'standard'
37
+ isAdvancedMode ? 'advanced' : 'standard',
38
38
  )
39
39
 
40
40
  // Helper to toggle a rendition
@@ -14,7 +14,7 @@ export function withFocusRing<Props>(component: ComponentType<Props>) {
14
14
  return css`
15
15
  --card-focus-box-shadow: ${focusRingBorderStyle(border)};
16
16
 
17
- border-radius: ${rem(props.theme.sanity.radius[1])};
17
+ border-radius: ${rem(props.theme.sanity.radius[1]!)};
18
18
  outline: none;
19
19
  box-shadow: var(--card-focus-box-shadow);
20
20
 
@@ -1,4 +1,4 @@
1
- import React, {createContext, useContext} from 'react'
1
+ import React, {createContext, useContext, useMemo} from 'react'
2
2
 
3
3
  import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
4
4
 
@@ -23,11 +23,8 @@ export const DialogStateProvider = ({
23
23
  setDialogState,
24
24
  children,
25
25
  }: DialogStateProviderProps) => {
26
- return (
27
- <DialogStateContext.Provider value={{dialogState, setDialogState}}>
28
- {children}
29
- </DialogStateContext.Provider>
30
- )
26
+ const value = useMemo(() => ({dialogState, setDialogState}), [dialogState, setDialogState])
27
+ return <DialogStateContext.Provider value={value}>{children}</DialogStateContext.Provider>
31
28
  }
32
29
 
33
30
  export const useDialogStateContext = () => {
@@ -1,7 +1,7 @@
1
1
  import {Button, Card, Dialog, Stack, Text} from '@sanity/ui'
2
- import React, {createContext, useContext, useState} from 'react'
2
+ import React, {createContext, useCallback, useContext, useMemo, useState} from 'react'
3
3
 
4
- import {PluginConfig} from '../util/types'
4
+ import {type PluginConfig} from '../util/types'
5
5
 
6
6
  const LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY = 'mux-plugin-has-shown-drm-playback-warning'
7
7
 
@@ -31,17 +31,21 @@ export const DrmPlaybackWarningContextProvider = ({
31
31
  warningDisabled || window.localStorage.getItem(LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY) === 'true'
32
32
  const [hasWarnedAboutDrmPlayback, setHasWarnedAboutDrmPlayback] = useState(hasWarned)
33
33
 
34
- const setHasShownWarning = (b: boolean) => {
34
+ const setHasShownWarning = useCallback((b: boolean) => {
35
35
  window.localStorage.setItem(LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY, b.toString())
36
36
  setHasWarnedAboutDrmPlayback(b)
37
- }
37
+ }, [])
38
+
39
+ const value = useMemo(
40
+ () => ({
41
+ hasShownWarning: hasWarnedAboutDrmPlayback,
42
+ setHasWarnedAboutDrmPlayback: setHasShownWarning,
43
+ }),
44
+ [hasWarnedAboutDrmPlayback, setHasShownWarning],
45
+ )
46
+
38
47
  return (
39
- <DrmPlaybackWarningContext.Provider
40
- value={{
41
- hasShownWarning: hasWarnedAboutDrmPlayback,
42
- setHasWarnedAboutDrmPlayback: setHasShownWarning,
43
- }}
44
- >
48
+ <DrmPlaybackWarningContext.Provider value={value}>
45
49
  {children}
46
50
  </DrmPlaybackWarningContext.Provider>
47
51
  )
@@ -1,6 +1,6 @@
1
1
  import {useCurrentUser} from 'sanity'
2
2
 
3
- import {PluginConfig} from '../util/types'
3
+ import {type PluginConfig} from '../util/types'
4
4
 
5
5
  export const useAccessControl = (config: PluginConfig) => {
6
6
  const user = useCurrentUser()
@@ -6,6 +6,6 @@ import type {Reference, VideoAssetDocument} from '../util/types'
6
6
  const path = ['assetId', 'data', 'playbackId', 'status', 'thumbTime', 'filename']
7
7
  export const useAssetDocumentValues = (asset: Reference | null | undefined) =>
8
8
  useDocumentValues<VideoAssetDocument | null | undefined>(
9
- isReference(asset) ? asset._ref! : '',
10
- path
9
+ isReference(asset) ? asset._ref : '',
10
+ path,
11
11
  )
@@ -1,5 +1,10 @@
1
1
  import {useMemo, useState} from 'react'
2
- import {collate, createHookFromObservableFactory, DocumentStore, useDocumentStore} from 'sanity'
2
+ import {
3
+ collate,
4
+ createHookFromObservableFactory,
5
+ type DocumentStore,
6
+ useDocumentStore,
7
+ } from 'sanity'
3
8
 
4
9
  import {SANITY_API_VERSION} from '../hooks/useClient'
5
10
  import {createSearchFilter} from '../util/createSearchFilter'
@@ -31,7 +36,7 @@ const useAssetDocuments = createHookFromObservableFactory<
31
36
  search.params,
32
37
  {
33
38
  apiVersion: SANITY_API_VERSION,
34
- }
39
+ },
35
40
  )
36
41
  })
37
42
 
@@ -41,7 +46,7 @@ export default function useAssets() {
41
46
  const [searchQuery, setSearchQuery] = useState('')
42
47
 
43
48
  const [assetDocuments = [], isLoading] = useAssetDocuments(
44
- useMemo(() => ({documentStore, sort, searchQuery}), [documentStore, sort, searchQuery])
49
+ useMemo(() => ({documentStore, sort, searchQuery}), [documentStore, sort, searchQuery]),
45
50
  )
46
51
 
47
52
  const assets = useMemo(
@@ -50,11 +55,11 @@ export default function useAssets() {
50
55
  collate<VideoAssetDocument>(assetDocuments).map(
51
56
  (collated) =>
52
57
  ({
53
- ...(collated.draft || collated.published || {}),
58
+ ...(collated.draft || collated.published),
54
59
  _id: collated.id,
55
- }) as VideoAssetDocument
60
+ }) as VideoAssetDocument,
56
61
  ),
57
- [assetDocuments]
62
+ [assetDocuments],
58
63
  )
59
64
 
60
65
  return {
@@ -13,10 +13,10 @@ export const useCancelUpload = (asset: VideoAssetDocument, onChange: MuxInputPro
13
13
  }
14
14
  onChange(PatchEvent.from(unset()))
15
15
  if (asset.assetId) {
16
- deleteAssetOnMux(client, asset.assetId)
16
+ void deleteAssetOnMux(client, asset.assetId)
17
17
  }
18
18
  if (asset._id) {
19
- client.delete(asset._id)
19
+ void client.delete(asset._id)
20
20
  }
21
21
  }, [asset, client, onChange])
22
22
  }
@@ -1,4 +1,4 @@
1
- import {createHookFromObservableFactory, DocumentStore, SanityDocument} from 'sanity'
1
+ import {createHookFromObservableFactory, type DocumentStore, type SanityDocument} from 'sanity'
2
2
 
3
3
  import {SANITY_API_VERSION} from './useClient'
4
4
 
@@ -14,7 +14,7 @@ const useDocReferences = createHookFromObservableFactory<
14
14
  {id},
15
15
  {
16
16
  apiVersion: SANITY_API_VERSION,
17
- }
17
+ },
18
18
  )
19
19
  })
20
20
 
@@ -1,6 +1,6 @@
1
1
  import {useEffect, useState} from 'react'
2
2
 
3
- import {StagedUpload} from '../components/Uploader'
3
+ import {type StagedUpload} from '../components/Uploader'
4
4
 
5
5
  export function useFetchFileSize(stagedUpload: StagedUpload, maxFileSize?: number) {
6
6
  const [fileSize, setFileSize] = useState<number | null>(null)
@@ -10,6 +10,7 @@ export function useFetchFileSize(stagedUpload: StagedUpload, maxFileSize?: numbe
10
10
  useEffect(() => {
11
11
  // Fetch URL Upload file size
12
12
  if (stagedUpload.type === 'url') {
13
+ // oxlint-disable-next-line react/react-compiler
13
14
  setIsLoadingFileSize(false)
14
15
  setCanSkipFileSizeValidation(false)
15
16
  setFileSize(null)
@@ -39,10 +40,10 @@ export function useFetchFileSize(stagedUpload: StagedUpload, maxFileSize?: numbe
39
40
  }
40
41
  }
41
42
 
42
- fetchFileSize()
43
+ void fetchFileSize()
43
44
  }
44
45
  if (stagedUpload.type === 'file') {
45
- setFileSize(stagedUpload.files[0].size)
46
+ setFileSize(stagedUpload.files[0]!.size)
46
47
  }
47
48
  }, [maxFileSize, stagedUpload, stagedUpload.type])
48
49