sanity-plugin-mux-input 2.9.1 → 2.10.0

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/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
+}