sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/hooks/useResyncMuxMetadata.ts

@@ -1,176 +0,0 @@
-import {useMemo, useState} from 'react'
-import {
-  createHookFromObservableFactory,
-  type DocumentStore,
-  useClient,
-  useDocumentStore,
-} from 'sanity'
-
-import {addKeysToMuxData} from '../util/addKeysToMuxData'
-import {isEmptyOrPlaceholderTitle} from '../util/assetTitlePlaceholder'
-import type {MuxAsset, VideoAssetDocument} from '../util/types'
-import {SANITY_API_VERSION} from './useClient'
-import useMuxAssets from './useMuxAssets'
-import {useSecretsDocumentValues} from './useSecretsDocumentValues'
-
-type ResyncState = 'closed' | 'idle' | 'syncing' | 'done' | 'error'
-
-export type MatchedAsset = {
-  sanityDoc: VideoAssetDocument
-  muxAsset: MuxAsset | undefined
-  muxTitle: string | undefined
-  currentTitle: string | undefined
-}
-
-export default function useResyncMuxMetadata() {
-  const documentStore = useDocumentStore()
-  const client = useClient({
-    apiVersion: SANITY_API_VERSION,
-  })
-
-  const [sanityAssets, sanityAssetsLoading] = useSanityAssets(documentStore)
-
-  const secretDocumentValues = useSecretsDocumentValues()
-  const hasSecrets = !!secretDocumentValues.value.secrets?.secretKey
-
-  const [resyncError, setResyncError] = useState<unknown>()
-  const [resyncState, setResyncState] = useState<ResyncState>('closed')
-  const dialogOpen = resyncState !== 'closed'
-
-  const muxAssets = useMuxAssets({
-    client,
-    enabled: hasSecrets && dialogOpen,
-  })
-
-  const matchedAssets = useMemo(() => {
-    return sanityAssets && muxAssets.data
-      ? sanityAssets.map((sanityDoc) => {
-          const muxAsset = muxAssets.data?.find(
-            (m) => m.id === sanityDoc.assetId || m.id === sanityDoc.data?.id
-          )
-          return {
-            sanityDoc,
-            muxAsset,
-            muxTitle: muxAsset?.meta?.title,
-            currentTitle: sanityDoc.filename,
-          }
-        })
-      : undefined
-  }, [sanityAssets, muxAssets.data])
-
-  const closeDialog = () => {
-    if (resyncState !== 'syncing') setResyncState('closed')
-  }
-
-  const openDialog = () => {
-    if (resyncState === 'closed') setResyncState('idle')
-  }
-
-  async function syncAllVideos() {
-    if (!matchedAssets) return
-
-    setResyncState('syncing')
-
-    try {
-      const tx = client.transaction()
-
-      matchedAssets.forEach((matched) => {
-        // Update all videos with the Mux title, even if it's undefined/empty
-        const newTitle = matched.muxTitle || ''
-        tx.patch(matched.sanityDoc._id, {set: {filename: newTitle}})
-      })
-
-      await tx.commit({returnDocuments: false})
-      setResyncState('done')
-    } catch (error) {
-      setResyncState('error')
-      setResyncError(error)
-    }
-  }
-
-  async function syncOnlyEmpty() {
-    if (!matchedAssets) return
-
-    setResyncState('syncing')
-
-    try {
-      const tx = client.transaction()
-
-      matchedAssets.forEach((matched) => {
-        // Only update if the current title is empty or has the placeholder format
-        // AND there's a new title available from Mux
-        if (
-          matched.muxAsset &&
-          matched.muxTitle &&
-          isEmptyOrPlaceholderTitle(matched.currentTitle, matched.muxAsset.id)
-        ) {
-          tx.patch(matched.sanityDoc._id, {set: {filename: matched.muxTitle}})
-        }
-      })
-
-      await tx.commit({returnDocuments: false})
-      setResyncState('done')
-    } catch (error) {
-      setResyncState('error')
-      setResyncError(error)
-    }
-  }
-
-  async function syncFullData() {
-    if (!matchedAssets) return
-
-    setResyncState('syncing')
-
-    try {
-      const tx = client.transaction()
-
-      matchedAssets.forEach((matched) => {
-        if (!matched.muxAsset) return
-
-        const dataWithKeys = addKeysToMuxData(matched.muxAsset)
-
-        // Update all fields: filename, status, and full data from Mux
-        tx.patch(matched.sanityDoc._id, {
-          set: {
-            filename: matched.muxTitle || matched.currentTitle || '',
-            status: matched.muxAsset.status,
-            data: dataWithKeys,
-          },
-        })
-      })
-
-      await tx.commit({returnDocuments: false})
-      setResyncState('done')
-    } catch (error) {
-      setResyncState('error')
-      setResyncError(error)
-    }
-  }
-
-  return {
-    sanityAssetsLoading,
-    closeDialog,
-    dialogOpen,
-    resyncState,
-    resyncError,
-    hasSecrets,
-    syncAllVideos,
-    syncOnlyEmpty,
-    syncFullData,
-    matchedAssets,
-    muxAssets,
-    openDialog,
-  }
-}
-
-const useSanityAssets = createHookFromObservableFactory<VideoAssetDocument[], DocumentStore>(
-  (documentStore) => {
-    return documentStore.listenQuery(
-      /* groq */ `*[_type == "mux.videoAsset"]`,
-      {},
-      {
-        apiVersion: SANITY_API_VERSION,
-      }
-    )
-  }
-)

package/src/hooks/useSaveSecrets.ts

@@ -1,78 +0,0 @@
-import {useCallback} from 'react'
-import type {SanityClient} from 'sanity'
-
-import {createSigningKeys, haveValidSigningKeys, saveSecrets, testSecrets} from '../actions/secrets'
-import type {Secrets} from '../util/types'
-
-export const useSaveSecrets = (client: SanityClient, secrets: Secrets) => {
-  return useCallback(
-    async ({
-      token,
-      secretKey,
-      enableSignedUrls,
-      drmConfigId,
-    }: Pick<
-      Secrets,
-      'token' | 'secretKey' | 'enableSignedUrls' | 'drmConfigId'
-    >): Promise<Secrets> => {
-      let {signingKeyId, signingKeyPrivate} = secrets
-
-      try {
-        await saveSecrets(
-          client,
-          token!,
-          secretKey!,
-          enableSignedUrls,
-          signingKeyId!,
-          signingKeyPrivate!,
-          drmConfigId!
-        )
-        const valid = await testSecrets(client)
-        if (!valid?.status && token && secretKey) {
-          throw new Error('Invalid secrets')
-        }
-      } catch (err) {
-        console.error('Error while trying to save secrets:', err)
-        throw err
-      }
-
-      if (enableSignedUrls) {
-        const hasValidSigningKeys = await haveValidSigningKeys(
-          client,
-          signingKeyId!,
-          signingKeyPrivate!
-        )
-
-        if (!hasValidSigningKeys) {
-          try {
-            const {data} = await createSigningKeys(client)
-            signingKeyId = data.id
-            signingKeyPrivate = data.private_key
-            await saveSecrets(
-              client,
-              token!,
-              secretKey!,
-              enableSignedUrls,
-              signingKeyId,
-              signingKeyPrivate,
-              drmConfigId ?? ''
-            )
-          } catch (err: any) {
-            // eslint-disable-next-line no-console
-            console.log('Error while creating and saving signing key:', err?.message)
-            throw err
-          }
-        }
-      }
-      return {
-        token,
-        secretKey,
-        enableSignedUrls,
-        signingKeyId,
-        signingKeyPrivate,
-        drmConfigId,
-      }
-    },
-    [client, secrets]
-  )
-}

package/src/hooks/useSecretsDocumentValues.ts

@@ -1,38 +0,0 @@
-import {useMemo} from 'react'
-import {useDocumentValues} from 'sanity'
-
-import {muxSecretsDocumentId} from '../util/constants'
-import type {Secrets} from '../util/types'
-
-const path = [
-  'token',
-  'secretKey',
-  'enableSignedUrls',
-  'signingKeyId',
-  'signingKeyPrivate',
-  'drmConfigId',
-]
-export const useSecretsDocumentValues = () => {
-  const {error, isLoading, value} = useDocumentValues<Partial<Secrets> | null | undefined>(
-    muxSecretsDocumentId,
-    path
-  )
-  const cache = useMemo(() => {
-    const exists = Boolean(value)
-    const secrets: Secrets = {
-      token: value?.token || null,
-      secretKey: value?.secretKey || null,
-      enableSignedUrls: value?.enableSignedUrls || false,
-      signingKeyId: value?.signingKeyId || null,
-      signingKeyPrivate: value?.signingKeyPrivate || null,
-      drmConfigId: value?.drmConfigId || null,
-    }
-    return {
-      isInitialSetup: !exists,
-      needsSetup: !secrets?.token || !secrets?.secretKey,
-      secrets,
-    }
-  }, [value])
-
-  return {error, isLoading, value: cache}
-}

package/src/hooks/useSecretsFormState.ts

@@ -1,47 +0,0 @@
-import {useReducer} from 'react'
-
-import type {Secrets} from '../util/types'
-
-export interface State extends Pick<
-  Secrets,
-  'token' | 'secretKey' | 'enableSignedUrls' | 'drmConfigId'
-> {
-  submitting: boolean
-  error: string | null
-}
-export type Action =
-  | {type: 'submit'}
-  | {type: 'error'; payload: string}
-  | {type: 'reset'; payload: Secrets}
-  | {type: 'change'; payload: {name: 'token'; value: string}}
-  | {type: 'change'; payload: {name: 'secretKey'; value: string}}
-  | {type: 'change'; payload: {name: 'enableSignedUrls'; value: boolean}}
-  | {type: 'change'; payload: {name: 'drmConfigId'; value: string}}
-function init({token, secretKey, enableSignedUrls, drmConfigId}: Secrets): State {
-  return {
-    submitting: false,
-    error: null,
-    // Form inputs don't set the state back to null when clearing a field, but uses empty strings
-    // This ensures the `dirty` check works correctly
-    token: token ?? '',
-    secretKey: secretKey ?? '',
-    enableSignedUrls: enableSignedUrls ?? false,
-    drmConfigId: drmConfigId ?? '',
-  }
-}
-function reducer(state: State, action: Action) {
-  switch (action?.type) {
-    case 'submit':
-      return {...state, submitting: true, error: null}
-    case 'error':
-      return {...state, submitting: false, error: action.payload}
-    case 'reset':
-      return init(action.payload)
-    case 'change':
-      return {...state, [action.payload.name]: action.payload.value}
-    default:
-      throw new Error(`Unknown action type: ${(action as unknown as Action)?.type}`)
-  }
-}
-
-export const useSecretsFormState = (secrets: Secrets) => useReducer(reducer, secrets, init)

package/src/plugin.tsx

@@ -1,31 +0,0 @@
-import Input from './components/Input'
-import VideoThumbnail from './components/VideoThumbnail'
-import type {MuxInputProps, PluginConfig, VideoAssetDocument} from './util/types'
-
-export function muxVideoCustomRendering(config: PluginConfig) {
-  return {
-    components: {
-      input: (props: MuxInputProps) => (
-        <Input config={{...config, ...props.schemaType.options}} {...props} />
-      ),
-    },
-    preview: {
-      select: {
-        filename: 'asset.filename',
-        playbackId: 'asset.playbackId',
-        status: 'asset.status',
-        assetId: 'asset.assetId',
-        thumbTime: 'asset.thumbTime',
-        data: 'asset.data',
-      },
-      prepare: (asset: Partial<VideoAssetDocument>) => {
-        const {filename, playbackId, status} = asset
-        return {
-          title: filename || playbackId || '',
-          subtitle: status ? `status: ${status}` : null,
-          media: asset.playbackId ? <VideoThumbnail asset={asset} width={64} /> : null,
-        }
-      },
-    },
-  }
-}

package/src/sanity-ui.d.ts

@@ -1,5 +0,0 @@
-import {type Theme} from '@sanity/ui/theme'
-
-declare module 'styled-components' {
-  interface DefaultTheme extends Theme {}
-}

package/src/schema.ts

@@ -1,196 +0,0 @@
-export const muxVideoSchema = {
-  name: 'mux.video',
-  type: 'object',
-  title: 'Video asset reference',
-  fields: [
-    {
-      title: 'Video',
-      name: 'asset',
-      type: 'reference',
-      weak: true,
-      to: [{type: 'mux.videoAsset'}],
-    },
-  ],
-}
-
-const muxTrack = {
-  name: 'mux.track',
-  type: 'object',
-  fields: [
-    {type: 'string', name: 'id'},
-    {type: 'string', name: 'type'},
-    {type: 'number', name: 'max_width'},
-    {type: 'number', name: 'max_frame_rate'},
-    {type: 'number', name: 'duration'},
-    {type: 'number', name: 'max_height'},
-    {type: 'string', name: 'language_code'},
-    {type: 'string', name: 'name'},
-    {type: 'string', name: 'status'},
-    {type: 'string', name: 'text_source'},
-    {type: 'string', name: 'text_type'},
-  ],
-}
-
-const muxPlaybackId = {
-  name: 'mux.playbackId',
-  type: 'object',
-  fields: [
-    {type: 'string', name: 'id'},
-    {type: 'string', name: 'policy'},
-  ],
-}
-
-const muxStaticRenditionFile = {
-  name: 'mux.staticRenditionFile',
-  type: 'object',
-  fields: [
-    {type: 'string', name: 'name'},
-    {type: 'string', name: 'ext'},
-    {type: 'number', name: 'height'},
-    {type: 'number', name: 'width'},
-    {type: 'number', name: 'bitrate'},
-    {type: 'string', name: 'filesize'},
-    {type: 'string', name: 'type'},
-    {type: 'string', name: 'status'},
-    {type: 'string', name: 'resolution_tier'},
-    {type: 'string', name: 'resolution'},
-    {type: 'string', name: 'id'},
-    {type: 'string', name: 'passthrough'},
-  ],
-}
-
-const muxStaticRenditions = {
-  name: 'mux.staticRenditions',
-  type: 'object',
-  fields: [
-    {type: 'string', name: 'status'},
-    {
-      name: 'files',
-      type: 'array',
-      of: [{type: 'mux.staticRenditionFile'}],
-    },
-  ],
-}
-
-const muxAssetData = {
-  name: 'mux.assetData',
-  title: 'Mux asset data',
-  type: 'object',
-  fields: [
-    {
-      type: 'string',
-      name: 'resolution_tier',
-    },
-    {
-      type: 'string',
-      name: 'upload_id',
-    },
-    {
-      type: 'string',
-      name: 'created_at',
-    },
-    {
-      type: 'string',
-      name: 'id',
-    },
-    {
-      type: 'string',
-      name: 'status',
-    },
-    {
-      type: 'string',
-      name: 'max_stored_resolution',
-    },
-    {
-      type: 'string',
-      name: 'passthrough',
-    },
-    {
-      type: 'string',
-      name: 'encoding_tier',
-    },
-    {
-      type: 'string',
-      name: 'video_quality',
-    },
-    {
-      type: 'string',
-      name: 'master_access',
-    },
-    {
-      type: 'string',
-      name: 'aspect_ratio',
-    },
-    {
-      type: 'number',
-      name: 'duration',
-    },
-    {
-      type: 'number',
-      name: 'max_stored_frame_rate',
-    },
-    {
-      type: 'string',
-      name: 'mp4_support',
-    },
-    {
-      type: 'string',
-      name: 'max_resolution_tier',
-    },
-    {
-      name: 'tracks',
-      type: 'array',
-      of: [{type: 'mux.track'}],
-    },
-    {
-      name: 'playback_ids',
-      type: 'array',
-      of: [{type: 'mux.playbackId'}],
-    },
-    {
-      name: 'static_renditions',
-      type: 'mux.staticRenditions',
-    },
-  ],
-}
-
-const muxVideoAsset = {
-  name: 'mux.videoAsset',
-  type: 'document',
-  title: 'Video asset',
-  fields: [
-    {
-      type: 'string',
-      name: 'status',
-    },
-    {
-      type: 'string',
-      name: 'assetId',
-    },
-    {
-      type: 'string',
-      name: 'playbackId',
-    },
-    {
-      type: 'string',
-      name: 'filename',
-    },
-    {
-      type: 'number',
-      name: 'thumbTime',
-    },
-    {
-      type: 'mux.assetData',
-      name: 'data',
-    },
-  ],
-}
-
-export const schemaTypes = [
-  muxTrack,
-  muxPlaybackId,
-  muxStaticRenditionFile,
-  muxStaticRenditions,
-  muxAssetData,
-  muxVideoAsset,
-]

package/src/util/addKeysToMuxData.ts

@@ -1,30 +0,0 @@
-import {uuid} from '@sanity/uuid'
-
-import type {MuxAsset} from './types'
-
-/**
- * Adds _key to array items in MuxAsset data for Sanity compatibility.
- * Sanity requires _key on array items for proper editing support.
- */
-export function addKeysToMuxData(data: MuxAsset): MuxAsset {
-  return {
-    ...data,
-    tracks: data.tracks?.map((track) => ({
-      ...track,
-      _key: uuid(),
-    })),
-    playback_ids: data.playback_ids?.map((playbackId) => ({
-      ...playbackId,
-      _key: uuid(),
-    })),
-    static_renditions: data.static_renditions
-      ? {
-          ...data.static_renditions,
-          files: data.static_renditions.files?.map((file) => ({
-            ...file,
-            _key: uuid(),
-          })),
-        }
-      : undefined,
-  }
-}

package/src/util/areSecretsSignable.ts

@@ -1,5 +0,0 @@
-import type {Secrets, SignableSecrets} from './types'
-
-export function areSecretsSignable(secrets: Secrets): secrets is SignableSecrets {
-  return !!secrets.signingKeyId && !!secrets.signingKeyPrivate
-}

package/src/util/asserters.ts

@@ -1,36 +0,0 @@
-import {ServerError} from '@sanity/client'
-import {type InputProps, isObjectInputProps, type PreviewLayoutKey, type PreviewProps} from 'sanity'
-
-import type {MuxInputPreviewProps, MuxInputProps} from './types'
-
-export function isMuxInputProps(props: InputProps): props is MuxInputProps {
-  return isObjectInputProps(props) && props.schemaType.type?.name === 'mux.video'
-}
-
-export function isMuxInputPreviewProps(
-  props: PreviewProps<PreviewLayoutKey>
-): props is MuxInputPreviewProps {
-  return props.schemaType?.type?.name === 'mux.video'
-}
-
-export function isValidUrl(url: string): boolean {
-  try {
-    const parsed = new URL(url)
-    return parsed && !!parsed.protocol.match(/http:|https:/)
-  } catch {
-    return false
-  }
-}
-
-/**
- * We consider a server error one with status code 5XX.
- * Used mainly to handle unknown Proxy issues.
- */
-export function isServerError(error: Error): error is ServerError {
-  return (
-    'statusCode' in error &&
-    typeof error.statusCode === 'number' &&
-    500 <= error.statusCode &&
-    error.statusCode <= 600
-  )
-}

package/src/util/assetTitlePlaceholder.ts

@@ -1,31 +0,0 @@
-import {truncateString} from 'sanity'
-
-/**
- * Generates a placeholder title for a Mux asset when no title is available.
- * This format is used when importing assets that don't have a title in Mux.
- *
- * @param assetId - The Mux asset ID
- * @returns A placeholder title in the format "Asset #[truncated-id]"
- */
-export function generateAssetPlaceholder(assetId: string): string {
-  return `Asset #${truncateString(assetId, 15)}`
-}
-
-/**
- * Checks if a filename is empty or has the placeholder format.
- * This is used to determine if a video title should be updated during metadata sync.
- *
- * @param filename - The current filename/title of the video
- * @param assetId - The Mux asset ID to check against
- * @returns true if the filename is empty or matches the placeholder format
- */
-export function isEmptyOrPlaceholderTitle(filename: string | undefined, assetId: string): boolean {
-  // Check if filename is empty/undefined
-  if (!filename || filename.trim() === '') {
-    return true
-  }
-
-  // Check if filename matches the placeholder format for this asset
-  const placeholder = generateAssetPlaceholder(assetId)
-  return filename === placeholder
-}

package/src/util/constants.ts

@@ -1,15 +0,0 @@
-export const name = 'mux-input' as const
-
-// Caching namespace, as suspend-react might be in use by other components on the page we must ensure we don't collide
-export const cacheNs = 'sanity-plugin-mux-input' as const
-
-export const muxSecretsDocumentId = 'secrets.mux' as const
-
-export const DIALOGS_Z_INDEX = 60_000
-
-export const THUMBNAIL_ASPECT_RATIO = 16 / 9
-
-/** To prevent excessive height, thumbnails and input should not go beyond to this aspect ratio. */
-export const MIN_ASPECT_RATIO = 5 / 4
-
-export const AUDIO_ASPECT_RATIO = 5 / 1