sanity-plugin-mux-input 2.9.1 → 2.10.1

package/src/hooks/useMuxAssets.ts

@@ -1,17 +1,19 @@
 import {useEffect, useState} from 'react'
 import {defer, of, timer} from 'rxjs'
 import {concatMap, expand, tap} from 'rxjs/operators'
+import type {SanityClient} from 'sanity'
 
-import type {MuxAsset, Secrets} from '../util/types'
+import {listAssets} from '../actions/assets'
+import type {MuxAsset} from '../util/types'
 
-const FIRST_PAGE = 1
 const ASSETS_PER_PAGE = 100
 
 type MuxAssetsState = {
-  pageNum: number
+  cursor: string | null
   loading: boolean
   data?: MuxAsset[]
   error?: FetchError
+  hasSkippedAssetsWithoutPlayback?: boolean
 }
 
 type FetchError =
@@ -23,49 +25,36 @@ type FetchError =
 type PageResult = (
   | {
       data: MuxAsset[]
+      next_cursor: string | null
     }
   | {
       error: FetchError
     }
 ) & {
-  pageNum: number
+  cursor: string | null
 }
 
 /**
  * @docs {@link https://docs.mux.com/api-reference#video/operation/list-assets}
  */
 async function fetchMuxAssetsPage(
-  {secretKey, token}: Secrets,
-  pageNum: number
+  client: SanityClient,
+  cursor: string | null
 ): Promise<PageResult> {
   try {
-    const res = await fetch(
-      `https://api.mux.com/video/v1/assets?limit=${ASSETS_PER_PAGE}&page=${pageNum}`,
-      {
-        headers: {
-          Authorization: `Basic ${btoa(`${token}:${secretKey}`)}`,
-        },
-      }
-    )
-    const json = await res.json()
-
-    if (json.error) {
-      return {
-        pageNum,
-        error: {
-          _tag: 'MuxError',
-          error: json.error,
-        },
-      }
-    }
+    const response = await listAssets(client, {
+      limit: ASSETS_PER_PAGE,
+      cursor,
+    })
 
     return {
-      pageNum,
-      data: json.data as MuxAsset[],
+      cursor,
+      data: response.data as MuxAsset[],
+      next_cursor: response.next_cursor || null,
     }
   } catch (error) {
     return {
-      pageNum,
+      cursor,
       error: {_tag: 'FetchError'},
     }
   }
@@ -76,66 +65,88 @@ function accumulateIntermediateState(
   pageResult: PageResult
 ): MuxAssetsState {
   const currentData = ('data' in currentState && currentState.data) || []
+  const newAssets = ('data' in pageResult && pageResult.data) || []
+
+  // Filter assets and check for skipped items
+  const {validAssets, skippedInThisPage} = newAssets.reduce<{
+    validAssets: MuxAsset[]
+    skippedInThisPage: boolean
+  }>(
+    (acc, asset) => {
+      const hasPlaybackIds = asset.playback_ids && asset.playback_ids.length > 0
+      const isDuplicate = currentData.some((a) => a.id === asset.id)
+
+      if (!hasPlaybackIds) {
+        acc.skippedInThisPage = true
+      }
+
+      if (hasPlaybackIds && !isDuplicate) {
+        acc.validAssets.push(asset)
+      }
+
+      return acc
+    },
+    {validAssets: [], skippedInThisPage: false}
+  )
+
   return {
     ...currentState,
-    data: [
-      ...currentData,
-      ...(('data' in pageResult && pageResult.data) || []).filter(
-        // De-duplicate assets for safety
-        (asset) => !currentData.some((a) => a.id === asset.id)
-      ),
-    ],
+    data: [...currentData, ...validAssets],
     error:
       'error' in pageResult
         ? pageResult.error
         : // Reset error if current page is successful
           undefined,
-    pageNum: pageResult.pageNum,
+    cursor: 'next_cursor' in pageResult ? pageResult.next_cursor : pageResult.cursor,
     loading: true,
+    hasSkippedAssetsWithoutPlayback:
+      currentState.hasSkippedAssetsWithoutPlayback || skippedInThisPage,
   }
 }
 
 function hasMorePages(pageResult: PageResult) {
   return (
-    typeof pageResult === 'object' &&
-    'data' in pageResult &&
-    Array.isArray(pageResult.data) &&
-    pageResult.data.length > 0
+    typeof pageResult === 'object' && 'next_cursor' in pageResult && pageResult.next_cursor !== null
   )
 }
 
 /**
  * Fetches all assets from a Mux environment. Rules:
  * - One page at a time
- * - Mux has no information on pagination
- *   - We've finished fetching if a page returns `data.length === 0`
+ * - Uses cursor-based pagination
+ *   - We've finished fetching when `next_cursor` is null
  * - Rate limiting to one request per 2 seconds
  * - Update state while still fetching to give feedback to users
  */
-export default function useMuxAssets({secrets, enabled}: {enabled: boolean; secrets: Secrets}) {
-  const [state, setState] = useState<MuxAssetsState>({loading: true, pageNum: FIRST_PAGE})
+export default function useMuxAssets({client, enabled}: {client: SanityClient; enabled: boolean}) {
+  const [state, setState] = useState<MuxAssetsState>({loading: true, cursor: null})
 
   useEffect(() => {
     if (!enabled) return
 
     const subscription = defer(() =>
       fetchMuxAssetsPage(
-        secrets,
-        // When we've already successfully loaded before (fully or partially), we start from the following page to avoid re-fetching
-        'data' in state && state.data && state.data.length > 0 && !state.error
-          ? state.pageNum + 1
-          : state.pageNum
+        client,
+        // When we've already successfully loaded before (fully or partially), we start from the next cursor to avoid re-fetching
+        'data' in state && state.data && state.data.length > 0 && !state.error ? state.cursor : null
       )
     )
       .pipe(
-        // Here we replace "concatMap" with "expand" to recursively fetch next pages
+        // Here we use "expand" to recursively fetch next pages
         expand((pageResult) => {
-          // if fetched page has data, we continue emitting, requesting the next page
+          // if fetched page has next_cursor, we continue emitting, requesting the next page
           // after 2s to avoid rate limiting
           if (hasMorePages(pageResult)) {
             return timer(2000).pipe(
-              // eslint-disable-next-line max-nested-callbacks
-              concatMap(() => defer(() => fetchMuxAssetsPage(secrets, pageResult.pageNum + 1)))
+              concatMap(() =>
+                // eslint-disable-next-line max-nested-callbacks
+                defer(() =>
+                  fetchMuxAssetsPage(
+                    client,
+                    'next_cursor' in pageResult ? pageResult.next_cursor : null
+                  )
+                )
+              )
             )
           }
 

package/src/hooks/useResyncMuxMetadata.ts

@@ -0,0 +1,143 @@
+import {useMemo, useState} from 'react'
+import {
+  createHookFromObservableFactory,
+  type DocumentStore,
+  useClient,
+  useDocumentStore,
+} from 'sanity'
+
+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)
+    }
+  }
+
+  return {
+    sanityAssetsLoading,
+    closeDialog,
+    dialogOpen,
+    resyncState,
+    resyncError,
+    hasSecrets,
+    syncAllVideos,
+    syncOnlyEmpty,
+    matchedAssets,
+    muxAssets,
+    openDialog,
+  }
+}
+
+const useSanityAssets = createHookFromObservableFactory<VideoAssetDocument[], DocumentStore>(
+  (documentStore) => {
+    return documentStore.listenQuery(
+      /* groq */ `*[_type == "mux.videoAsset"]`,
+      {},
+      {
+        apiVersion: SANITY_API_VERSION,
+      }
+    )
+  }
+)

package/src/schema.ts

@@ -98,6 +98,10 @@ const muxAssetData = {
       type: 'string',
       name: 'encoding_tier',
     },
+    {
+      type: 'string',
+      name: 'video_quality',
+    },
     {
       type: 'string',
       name: 'master_access',

package/src/util/assetTitlePlaceholder.ts

@@ -0,0 +1,31 @@
+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/types.ts

@@ -4,7 +4,7 @@ import type {PartialDeep} from 'type-fest'
 export interface MuxInputConfig {
   /**
    * Enable static renditions by setting this to 'standard'. Can be overwritten on a per-asset basis.
-   * Requires `"encoding_tier": "smart"`
+   * Requires `"video_quality": "plus"`
    * @see {@link https://docs.mux.com/guides/video/enable-static-mp4-renditions#why-enable-mp4-support}
    * @defaultValue 'none'
    */
@@ -12,18 +12,27 @@ export interface MuxInputConfig {
 
   /**
    * Max resolution tier can be used to control the maximum resolution_tier your asset is encoded, stored, and streamed at.
-   * Requires `"encoding_tier": "smart"`
+   * Requires `"video_quality": "plus"`
    * @see {@link https://docs.mux.com/guides/stream-videos-in-4k}
    * @defaultValue '1080p'
    */
   max_resolution_tier: '2160p' | '1440p' | '1080p'
 
   /**
+   * @deprecated Use {@link video_quality}
+   * <br>
    * The encoding tier informs the cost, quality, and available platform features for the asset.
    * @see {@link https://docs.mux.com/guides/use-encoding-tiers}
    * @defaultValue 'smart'
    */
-  encoding_tier: 'baseline' | 'smart'
+  encoding_tier?: 'baseline' | 'smart'
+
+  /**
+   * The video quality level informs the cost, quality, and available platform features for the asset.
+   * @see {@link https://www.mux.com/docs/guides/use-video-quality-levels}
+   * @defaultValue 'plus'
+   */
+  video_quality: 'basic' | 'plus' | 'premium'
 
   /**
    * Normalize the audio track loudness level.
@@ -41,7 +50,7 @@ export interface MuxInputConfig {
 
   /**
    * Auto-generate captions for these languages by default.
-   * Requires `"encoding_tier": "smart"`
+   * Requires `"video_quality": "plus"`
    *
    * @see {@link https://docs.mux.com/guides/add-autogenerated-captions-and-use-transcripts}
    * @deprecated use `defaultAutogeneratedSubtitleLang` instead. Only a single autogenerated
@@ -50,7 +59,7 @@ export interface MuxInputConfig {
 
   /**
    * Auto-generate captions for this language by default. Users can still
-   * Requires `"encoding_tier": "smart"`
+   * Requires `"video_quality": "plus"`
    *
    * @see {@link https://docs.mux.com/guides/add-autogenerated-captions-and-use-transcripts}
    */
@@ -123,9 +132,10 @@ export const SUPPORTED_MUX_LANGUAGES = [
   {label: 'Bulgarian', code: 'bg', state: 'Beta'},
 ] as const
 
-export const ENCODING_TIERS = [
-  {label: 'Baseline', value: 'baseline'},
-  {label: 'Smart', value: 'smart'},
+export const VIDEO_QUALITY_LEVELS = [
+  {label: 'Basic', value: 'basic'},
+  {label: 'Plus', value: 'plus'},
+  {label: 'Premium', value: 'premium'},
 ] as const
 
 export const SUPPORTED_MUX_LANGUAGES_VALUES = SUPPORTED_MUX_LANGUAGES.map((l) => l.code)
@@ -168,7 +178,7 @@ export type UploadTextTrack = AutogeneratedTextTrack | CustomTextTrack
 export interface UploadConfig
   extends Pick<
     MuxInputConfig,
-    'encoding_tier' | 'max_resolution_tier' | 'mp4_support' | 'normalize_audio'
+    'max_resolution_tier' | 'mp4_support' | 'normalize_audio' | 'video_quality'
   > {
   text_tracks: UploadTextTrack[]
   signed_policy: boolean
@@ -182,7 +192,7 @@ export interface UploadConfig
 export interface MuxNewAssetSettings
   extends Pick<
     MuxInputConfig,
-    'encoding_tier' | 'max_resolution_tier' | 'mp4_support' | 'normalize_audio'
+    'max_resolution_tier' | 'mp4_support' | 'normalize_audio' | 'video_quality'
   > {
   /** An array of objects that each describe an input file to be used to create the asset.*/
   input?: {