sanity-plugin-mux-input 3.0.5 → 4.0.0

package/src/hooks/useImportMuxAssets.ts

@@ -1,132 +0,0 @@
-import {uuid} from '@sanity/uuid'
-import {useMemo, useState} from 'react'
-import {
-  createHookFromObservableFactory,
-  type DocumentStore,
-  useClient,
-  useDocumentStore,
-} from 'sanity'
-
-import {generateAssetPlaceholder} from '../util/assetTitlePlaceholder'
-import {parseMuxDate} from '../util/parsers'
-import type {MuxAsset, VideoAssetDocument} from '../util/types'
-import {SANITY_API_VERSION} from './useClient'
-import useMuxAssets from './useMuxAssets'
-import {useSecretsDocumentValues} from './useSecretsDocumentValues'
-
-type ImportState = 'closed' | 'idle' | 'importing' | 'done' | 'error'
-
-export type AssetInSanity = {
-  uploadId: string
-  assetId: string
-}
-
-export default function useImportMuxAssets() {
-  const documentStore = useDocumentStore()
-  const client = useClient({
-    apiVersion: SANITY_API_VERSION,
-  })
-
-  const [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore)
-
-  const secretDocumentValues = useSecretsDocumentValues()
-  const hasSecrets = !!secretDocumentValues.value.secrets?.secretKey
-
-  const [importError, setImportError] = useState<unknown>()
-  const [importState, setImportState] = useState<ImportState>('closed')
-  const dialogOpen = importState !== 'closed'
-
-  const muxAssets = useMuxAssets({
-    client,
-    enabled: hasSecrets && dialogOpen,
-  })
-
-  const missingAssets = useMemo(() => {
-    return assetsInSanity && muxAssets.data
-      ? muxAssets.data.filter((a) => !assetExistsInSanity(a, assetsInSanity))
-      : undefined
-  }, [assetsInSanity, muxAssets.data])
-
-  const [selectedAssets, setSelectedAssets] = useState<MuxAsset[]>([])
-
-  const closeDialog = () => {
-    if (importState !== 'importing') setImportState('closed')
-  }
-  const openDialog = () => {
-    if (importState === 'closed') setImportState('idle')
-  }
-
-  async function importAssets() {
-    setImportState('importing')
-    const documents = selectedAssets.flatMap((asset) => muxAssetToSanityDocument(asset) || [])
-
-    const tx = client.transaction()
-    documents.forEach((doc) => tx.create(doc))
-
-    try {
-      await tx.commit({returnDocuments: false})
-      setSelectedAssets([])
-      setImportState('done')
-    } catch (error) {
-      setImportState('error')
-      setImportError(error)
-    }
-  }
-
-  return {
-    assetsInSanityLoading,
-    closeDialog,
-    dialogOpen,
-    importState,
-    importError,
-    hasSecrets,
-    importAssets,
-    missingAssets,
-    muxAssets,
-    openDialog,
-    selectedAssets,
-    setSelectedAssets,
-  }
-}
-
-function muxAssetToSanityDocument(asset: MuxAsset): VideoAssetDocument | undefined {
-  const playbackId = (asset.playback_ids || []).find((p) => p.id)?.id
-
-  if (!playbackId) return undefined
-
-  return {
-    _id: uuid(),
-    _type: 'mux.videoAsset',
-    _updatedAt: new Date().toISOString(),
-    _createdAt: parseMuxDate(asset.created_at).toISOString(),
-    assetId: asset.id,
-    playbackId,
-    filename: asset.meta?.title ?? generateAssetPlaceholder(asset.id),
-    status: asset.status,
-    data: asset,
-  }
-}
-
-const useAssetsInSanity = createHookFromObservableFactory<AssetInSanity[], DocumentStore>(
-  (documentStore) => {
-    return documentStore.listenQuery(
-      /* groq */ `*[_type == "mux.videoAsset"] {
-      "uploadId": coalesce(uploadId, data.upload_id),
-      "assetId": coalesce(assetId, data.id),
-    }`,
-      {},
-      {
-        apiVersion: SANITY_API_VERSION,
-      },
-    )
-  },
-)
-
-function assetExistsInSanity(asset: MuxAsset, existingAssets: AssetInSanity[]) {
-  // Don't allow importing assets that are not ready
-  if (asset.status !== 'ready') return false
-
-  return existingAssets.some(
-    (existing) => existing.assetId === asset.id || existing.uploadId === asset.upload_id,
-  )
-}

package/src/hooks/useInView.ts

@@ -1,41 +0,0 @@
-import {useEffect, useState} from 'react'
-
-type IntersectionOptions = {
-  root?: Element | null
-  rootMargin?: string
-  threshold?: number
-  onChange?: (inView: boolean) => void
-}
-
-export function useInView(
-  ref: React.RefObject<HTMLDivElement | null>,
-  options: IntersectionOptions = {},
-) {
-  const [inView, setInView] = useState(false)
-
-  useEffect(() => {
-    if (!ref.current) return
-
-    const observer = new IntersectionObserver(([entry], obs) => {
-      // ==== from react-intersection-observer ====
-      // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.
-      // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0
-      const nowInView =
-        entry!.isIntersecting &&
-        obs.thresholds.some((threshold) => entry!.intersectionRatio >= threshold)
-
-      // Update our state when observer callback fires
-      setInView(nowInView)
-      options?.onChange?.(nowInView)
-    }, options)
-
-    const toObserve = ref.current
-    observer.observe(toObserve)
-
-    return () => {
-      if (toObserve) observer.unobserve(toObserve)
-    }
-  }, [options, ref])
-
-  return inView
-}

package/src/hooks/useMediaMetadata.ts

@@ -1,104 +0,0 @@
-import {useEffect, useState} from 'react'
-
-import {type StagedUpload} from '../components/Uploader'
-
-export interface VideoAssetMetadata {
-  width?: number
-  height?: number
-  isAudioOnly?: boolean
-  duration?: number
-  size?: number
-  aspectRatio?: number
-}
-
-export function useMediaMetadata(stagedUpload: StagedUpload) {
-  const [videoAssetMetadata, setVideoAssetMetadata] = useState<VideoAssetMetadata | null>(null)
-  const [isLoadingMetadata, setIsLoadingMetadata] = useState(false)
-  useEffect(() => {
-    let videoSrc = null
-    // Validate file uploads
-    if (stagedUpload.type === 'file') {
-      const file = stagedUpload.files[0]
-      videoSrc = URL.createObjectURL(file!)
-    }
-
-    // Validate URL uploads
-    if (stagedUpload.type === 'url') {
-      videoSrc = stagedUpload.url
-    }
-
-    // oxlint-disable-next-line react/react-compiler
-    setVideoAssetMetadata((old) => ({
-      ...old,
-      duration: undefined,
-      width: undefined,
-      height: undefined,
-    }))
-
-    if (!videoSrc) return () => null
-
-    setIsLoadingMetadata(true)
-    const videoElement = document.createElement('video')
-    videoElement.preload = 'metadata'
-
-    const metadataListeners = [
-      () => {
-        setIsLoadingMetadata(false)
-      },
-      () => {
-        const duration = videoElement.duration
-        const width = videoElement.videoWidth
-        const height = videoElement.videoHeight
-        const isAudioOnly = width <= 0 && height <= 0
-        const aspectRatio = width / height
-        setVideoAssetMetadata((old) => {
-          return {
-            ...old,
-            duration: duration,
-            width: width,
-            height: height,
-            isAudioOnly: isAudioOnly,
-            aspectRatio: aspectRatio,
-          }
-        })
-      },
-    ]
-
-    const cleanupVideo = (videoEl: HTMLVideoElement) => {
-      const currentVideoSrc = videoEl?.src
-      if (videoEl) {
-        metadataListeners.forEach((listener) =>
-          videoEl.removeEventListener('loadedmetadata', listener),
-        )
-        videoEl.onerror = null
-        videoEl.src = ''
-        videoEl.load()
-      }
-      if (currentVideoSrc?.startsWith('blob:')) {
-        URL.revokeObjectURL(currentVideoSrc)
-      }
-    }
-    metadataListeners.push(() => setTimeout(() => cleanupVideo(videoElement), 0))
-
-    videoElement.onerror = () => {
-      setIsLoadingMetadata(false)
-      console.warn('Could not read video metadata for validation')
-      cleanupVideo(videoElement)
-    }
-
-    metadataListeners.forEach((listener) =>
-      videoElement.addEventListener('loadedmetadata', listener),
-    )
-    videoElement.src = videoSrc
-
-    return () => {
-      cleanupVideo(videoElement)
-    }
-  }, [stagedUpload.type, stagedUpload])
-
-  return {
-    videoAssetMetadata,
-    setVideoAssetMetadata,
-    isLoadingMetadata,
-  }
-}

package/src/hooks/useMuxAssets.ts

@@ -1,179 +0,0 @@
-import {useEffect, useState} from 'react'
-import {defer, of, timer} from 'rxjs'
-import {concatMap, expand, tap} from 'rxjs/operators'
-import type {SanityClient} from 'sanity'
-
-import {listAssets} from '../actions/assets'
-import type {MuxAsset} from '../util/types'
-
-const ASSETS_PER_PAGE = 100
-
-type MuxAssetsState = {
-  cursor: string | null
-  loading: boolean
-  data?: MuxAsset[]
-  error?: FetchError
-  hasSkippedAssetsWithoutPlayback?: boolean
-}
-
-type FetchError =
-  | {
-      _tag: 'FetchError'
-    }
-  | {_tag: 'MuxError'; error: unknown}
-
-type PageResult = (
-  | {
-      data: MuxAsset[]
-      next_cursor: string | null
-    }
-  | {
-      error: FetchError
-    }
-) & {
-  cursor: string | null
-}
-
-/**
- * @docs {@link https://docs.mux.com/api-reference#video/operation/list-assets}
- */
-async function fetchMuxAssetsPage(
-  client: SanityClient,
-  cursor: string | null,
-): Promise<PageResult> {
-  try {
-    const response = await listAssets(client, {
-      limit: ASSETS_PER_PAGE,
-      cursor,
-    })
-
-    return {
-      cursor,
-      data: response.data,
-      next_cursor: response.next_cursor || null,
-    }
-  } catch {
-    return {
-      cursor,
-      error: {_tag: 'FetchError'},
-    }
-  }
-}
-
-function accumulateIntermediateState(
-  currentState: MuxAssetsState,
-  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, ...validAssets],
-    error:
-      'error' in pageResult
-        ? pageResult.error
-        : // Reset error if current page is successful
-          undefined,
-    cursor: 'next_cursor' in pageResult ? pageResult.next_cursor : pageResult.cursor,
-    loading: true,
-    hasSkippedAssetsWithoutPlayback:
-      currentState.hasSkippedAssetsWithoutPlayback || skippedInThisPage,
-  }
-}
-
-function hasMorePages(pageResult: PageResult) {
-  return (
-    typeof pageResult === 'object' && 'next_cursor' in pageResult && pageResult.next_cursor !== null
-  )
-}
-
-/**
- * Fetches all assets from a Mux environment. Rules:
- * - One page at a time
- * - 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({client, enabled}: {client: SanityClient; enabled: boolean}) {
-  const [state, setState] = useState<MuxAssetsState>({loading: true, cursor: null})
-
-  useEffect(() => {
-    if (!enabled) return
-
-    const subscription = defer(() =>
-      fetchMuxAssetsPage(
-        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 use "expand" to recursively fetch next pages
-        expand((pageResult) => {
-          // 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(
-              concatMap(() =>
-                defer(() =>
-                  fetchMuxAssetsPage(
-                    client,
-                    'next_cursor' in pageResult ? pageResult.next_cursor : null,
-                  ),
-                ),
-              ),
-            )
-          }
-
-          // Else, we stop emitting
-          return of()
-        }),
-
-        // On each iteration, persist intermediate states to give feedback to users
-        tap((pageResult) =>
-          setState((prevState) => accumulateIntermediateState(prevState, pageResult)),
-        ),
-      )
-      .subscribe({
-        // Once done, let the user know we've stopped loading
-        complete: () => {
-          setState((prev) => ({
-            ...prev,
-            loading: false,
-          }))
-        },
-      })
-
-    // Unsubscribe on component unmount to prevent memory leaks or fetching unnecessarily
-    return () => subscription.unsubscribe()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled])
-
-  return state
-}

package/src/hooks/useMuxPolling.ts

@@ -1,52 +0,0 @@
-import {useMemo} from 'react'
-import {useDataset, useProjectId} from 'sanity'
-import useSWR from 'swr'
-
-import {useClient} from '../hooks/useClient'
-import {PLUGIN_VERSION_QUERY} from '../util/pluginVersion'
-import type {MuxAsset, VideoAssetDocument} from '../util/types'
-
-// Poll MUX if it's preparing the main document or its own static renditions
-export const useMuxPolling = (asset?: VideoAssetDocument) => {
-  const client = useClient()
-  const projectId = useProjectId()
-  const dataset = useDataset()
-  const isPreparingStaticRenditions = useMemo(() => {
-    // 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
-    // Note: 'disabled' status is valid in the new format when no renditions were requested
-    if (
-      asset?.data?.static_renditions?.status &&
-      asset?.data?.static_renditions?.status !== 'disabled'
-    ) {
-      return false
-    }
-
-    const files = asset?.data?.static_renditions?.files
-    if (!files || files.length === 0) {
-      return false
-    }
-    return files.some((file) => file.status === 'preparing')
-  }, [asset?.data?.static_renditions?.status, asset?.data?.static_renditions?.files])
-
-  const shouldFetch = useMemo(
-    () => !!asset?.assetId && (asset?.status === 'preparing' || isPreparingStaticRenditions),
-    [asset?.assetId, asset?.status, isPreparingStaticRenditions],
-  )
-  return useSWR(
-    shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset?.assetId}` : null,
-    async () => {
-      const {data} = await client.request<{data: MuxAsset}>({
-        url: `/addons/mux/assets/${dataset}/data/${asset!.assetId}`,
-        withCredentials: true,
-        method: 'GET',
-        query: PLUGIN_VERSION_QUERY,
-      })
-      await client
-        .patch(asset!._id)
-        .set({status: data.status, data})
-        .commit({returnDocuments: false})
-    },
-    {refreshInterval: 2000, refreshWhenHidden: true, dedupingInterval: 1000},
-  )
-}

package/src/hooks/useResyncAsset.ts

@@ -1,110 +0,0 @@
-import {useToast} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-import {getAsset} from '../actions/assets'
-import {addKeysToMuxData} from '../util/addKeysToMuxData'
-import type {MuxAsset, VideoAssetDocument} from '../util/types'
-import {useClient} from './useClient'
-
-type ResyncAssetState = 'idle' | 'syncing' | 'success' | 'error'
-
-interface UseResyncAssetOptions {
-  showToast?: boolean
-  onSuccess?: (updatedData: MuxAsset) => void
-  onError?: (error: unknown) => void
-}
-
-interface UseResyncAssetReturn {
-  resyncState: ResyncAssetState
-  resyncError: unknown
-  resyncAsset: (asset: VideoAssetDocument) => Promise<MuxAsset | undefined>
-  isResyncing: boolean
-}
-
-export function useResyncAsset(options?: UseResyncAssetOptions): UseResyncAssetReturn {
-  const client = useClient()
-  const toast = useToast()
-  const [resyncState, setResyncState] = useState<ResyncAssetState>('idle')
-  const [resyncError, setResyncError] = useState<unknown>(null)
-
-  const showToast = options?.showToast ?? false
-
-  const resyncAsset = useCallback(
-    async (asset: VideoAssetDocument) => {
-      if (!asset.assetId) {
-        if (showToast) {
-          toast.push({
-            title: 'Cannot resync',
-            description: 'Asset has no Mux ID',
-            status: 'error',
-          })
-        }
-        options?.onError?.(new Error('Asset has no Mux ID'))
-        return undefined
-      }
-
-      if (!asset._id) {
-        if (showToast) {
-          toast.push({
-            title: 'Cannot resync',
-            description: 'Asset has no document ID',
-            status: 'error',
-          })
-        }
-        options?.onError?.(new Error('Asset has no document ID'))
-        return undefined
-      }
-
-      setResyncState('syncing')
-      setResyncError(null)
-
-      try {
-        const response = await getAsset(client, asset.assetId)
-        const muxData = response.data
-        const dataWithKeys = addKeysToMuxData(muxData)
-
-        await client
-          .patch(asset._id)
-          .set({
-            status: muxData.status,
-            data: dataWithKeys,
-            ...(muxData.meta?.title && {filename: muxData.meta.title}),
-          })
-          .commit({returnDocuments: false})
-
-        setResyncState('success')
-        if (showToast) {
-          toast.push({
-            title: 'Asset synced',
-            description: 'Data has been updated from Mux',
-            status: 'success',
-          })
-        }
-
-        options?.onSuccess?.(muxData)
-        return muxData
-      } catch (error) {
-        setResyncState('error')
-        setResyncError(error)
-        console.error('Failed to refresh asset data:', error)
-        if (showToast) {
-          toast.push({
-            title: 'Sync failed',
-            description: 'Could not sync asset from Mux',
-            status: 'error',
-          })
-        }
-        options?.onError?.(error)
-        return undefined
-      }
-    },
-    [client, toast, options, showToast],
-  )
-
-  return {
-    resyncState,
-    resyncError,
-    resyncAsset,
-    isResyncing: resyncState === 'syncing',
-  }
-}