sanity-plugin-mux-input 2.9.1 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",

package/src/actions/assets.ts

@@ -47,3 +47,25 @@ export function getAsset(client: SanityClient, assetId: string) {
     method: 'GET',
   })
 }
+
+export function listAssets(
+  client: SanityClient,
+  options: {limit?: number; cursor?: string | null}
+) {
+  const {dataset} = client.config()
+  const query: {limit?: string; cursor?: string} = {}
+
+  if (options.limit) {
+    query.limit = options.limit.toString()
+  }
+  if (options.cursor) {
+    query.cursor = options.cursor
+  }
+
+  return client.request<{data: MuxAsset[]; next_cursor?: string | null}>({
+    url: `/addons/mux/assets/${dataset}/data/list`,
+    withCredentials: true,
+    method: 'GET',
+    query,
+  })
+}

package/src/components/ConfigureApi.tsx

@@ -11,25 +11,31 @@ import {
   Text,
   TextInput,
 } from '@sanity/ui'
-import React, {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
+import {useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import {clear, preload} from 'suspend-react'
 
 import {useClient} from '../hooks/useClient'
 import type {SetDialogState} from '../hooks/useDialogState'
+import {useDialogState} from '../hooks/useDialogState'
 import {useSaveSecrets} from '../hooks/useSaveSecrets'
+import {useSecretsDocumentValues} from '../hooks/useSecretsDocumentValues'
 import {useSecretsFormState} from '../hooks/useSecretsFormState'
-import {cacheNs} from '../util/constants'
+import {cacheNs, DIALOGS_Z_INDEX} from '../util/constants'
 import {_id as secretsId} from '../util/readSecrets'
 import type {Secrets} from '../util/types'
 import {Header} from './ConfigureApi.styled'
 import FormField from './FormField'
 
-export interface Props {
+// Props for the dialog component when used with external state management
+export interface ConfigureApiDialogProps {
   setDialogState: SetDialogState
   secrets: Secrets
 }
+
 const fieldNames = ['token', 'secretKey', 'enableSignedUrls'] as const
-function ConfigureApi({secrets, setDialogState}: Props) {
+
+// Internal dialog component that can be used with external state
+export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialogProps) {
   const client = useClient()
   const [state, dispatch] = useSecretsFormState(secrets)
   const hasSecretsInitially = useMemo(() => secrets.token && secrets.secretKey, [secrets])
@@ -112,13 +118,13 @@ function ConfigureApi({secrets, setDialogState}: Props) {
       animate
       id={id}
       onClose={handleClose}
+      onClickOutside={handleClose}
       header={<Header />}
+      zOffset={DIALOGS_Z_INDEX}
+      position="fixed"
       width={1}
-      style={{
-        maxWidth: '550px',
-      }}
     >
-      <Box padding={4} style={{position: 'relative'}}>
+      <Box padding={3}>
         <form onSubmit={handleSubmit} noValidate>
           <Stack space={4}>
             {!hasSecretsInitially && (
@@ -224,4 +230,21 @@ function ConfigureApi({secrets, setDialogState}: Props) {
   )
 }
 
-export default memo(ConfigureApi)
+// Wrapper component that manages its own dialog state (used in VideosBrowser)
+export default function ConfigureApi() {
+  const [dialogOpen, setDialogOpen] = useDialogState()
+  const secretDocumentValues = useSecretsDocumentValues()
+
+  const openDialog = useCallback(() => setDialogOpen('secrets'), [setDialogOpen])
+
+  if (dialogOpen === 'secrets') {
+    return (
+      <ConfigureApiDialog
+        secrets={secretDocumentValues.value.secrets}
+        setDialogState={setDialogOpen}
+      />
+    )
+  }
+
+  return <Button mode="bleed" text="Configure plugin" onClick={openDialog} />
+}

package/src/components/ImportVideosFromMux.tsx

@@ -1,4 +1,10 @@
-import {CheckmarkCircleIcon, ErrorOutlineIcon, RetrieveIcon, RetryIcon} from '@sanity/icons'
+import {
+  CheckmarkCircleIcon,
+  ErrorOutlineIcon,
+  InfoOutlineIcon,
+  RetrieveIcon,
+  RetryIcon,
+} from '@sanity/icons'
 import {
   Box,
   Button,
@@ -120,7 +126,7 @@ function ImportVideosDialog(props: ReturnType<typeof useImportMuxAssets>) {
               <Button
                 fontSize={2}
                 padding={3}
-                mode="bleed"
+                mode="ghost"
                 text="Cancel"
                 tone="critical"
                 onClick={props.closeDialog}
@@ -149,6 +155,24 @@ function ImportVideosDialog(props: ReturnType<typeof useImportMuxAssets>) {
       }
     >
       <Box padding={3}>
+        {/* WARNING: SKIPPED ASSETS WITHOUT PLAYBACK */}
+        {props.muxAssets.hasSkippedAssetsWithoutPlayback && (
+          <Card tone="caution" marginBottom={5} padding={3} border>
+            <Flex align="center" gap={2}>
+              <InfoOutlineIcon fontSize={36} />
+              <Stack space={2}>
+                <Text size={2} weight="semibold">
+                  Some videos were skipped
+                </Text>
+                <Text size={1}>
+                  Videos without playback IDs cannot be imported and have been excluded from the
+                  list.
+                </Text>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
+
         {/* LOADING ASSETS STATE */}
         {(props.muxAssets.loading || props.assetsInSanityLoading) && (
           <Card tone="primary" marginBottom={5} padding={3} border>

package/src/components/Input.tsx

@@ -1,18 +1,18 @@
 import {Card} from '@sanity/ui'
 import {memo, Suspense} from 'react'
 
+import {useAccessControl} from '../hooks/useAccessControl'
 import {useAssetDocumentValues} from '../hooks/useAssetDocumentValues'
 import {useClient} from '../hooks/useClient'
 import {useDialogState} from '../hooks/useDialogState'
 import {useMuxPolling} from '../hooks/useMuxPolling'
 import {useSecretsDocumentValues} from '../hooks/useSecretsDocumentValues'
 import type {MuxInputProps, PluginConfig} from '../util/types'
-import ConfigureApi from './ConfigureApi'
+import {ConfigureApiDialog} from './ConfigureApi'
 import ErrorBoundaryCard from './ErrorBoundaryCard'
 import {InputFallback} from './Input.styled'
 import Onboard from './Onboard'
 import Uploader from './Uploader'
-import {useAccessControl} from '../hooks/useAccessControl'
 
 export interface InputProps extends MuxInputProps {
   config: PluginConfig
@@ -62,7 +62,7 @@ const Input = (props: InputProps) => {
               )}
 
               {dialogState === 'secrets' && hasConfigAccess && (
-                <ConfigureApi
+                <ConfigureApiDialog
                   setDialogState={setDialogState}
                   secrets={secretDocumentValues.value.secrets}
                 />

package/src/components/ResyncMetadata.tsx

@@ -0,0 +1,201 @@
+import {CheckmarkCircleIcon, ErrorOutlineIcon, SyncIcon} from '@sanity/icons'
+import {Box, Button, Card, Dialog, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+
+import useResyncMuxMetadata from '../hooks/useResyncMuxMetadata'
+import {isEmptyOrPlaceholderTitle} from '../util/assetTitlePlaceholder'
+import {DIALOGS_Z_INDEX} from '../util/constants'
+
+// eslint-disable-next-line complexity
+function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
+  const {resyncState} = props
+
+  const canTriggerResync = resyncState === 'idle' || resyncState === 'error'
+  const isResyncing = resyncState === 'syncing'
+  const isDone = resyncState === 'done'
+
+  const videosToUpdate = props.matchedAssets?.filter((m) => m.muxAsset).length || 0
+  const videosWithEmptyOrPlaceholder =
+    props.matchedAssets?.filter(
+      (m) => m.muxAsset && m.muxTitle && isEmptyOrPlaceholderTitle(m.currentTitle, m.muxAsset.id)
+    ).length || 0
+
+  return (
+    <Dialog
+      animate
+      header={'Resync Metadata from Mux'}
+      zOffset={DIALOGS_Z_INDEX}
+      id="resync-metadata-dialog"
+      onClose={props.closeDialog}
+      onClickOutside={props.closeDialog}
+      width={1}
+      position="fixed"
+      footer={
+        !isDone && (
+          <Card padding={3}>
+            <Flex justify="space-between" align="center">
+              <Button
+                fontSize={2}
+                padding={3}
+                mode="ghost"
+                text="Cancel"
+                tone="critical"
+                onClick={props.closeDialog}
+                disabled={isResyncing}
+              />
+              <Flex gap={2}>
+                {videosWithEmptyOrPlaceholder > 0 && (
+                  <Button
+                    fontSize={2}
+                    padding={3}
+                    mode="ghost"
+                    text={`Update empty (${videosWithEmptyOrPlaceholder})`}
+                    tone="caution"
+                    onClick={props.syncOnlyEmpty}
+                    disabled={isResyncing || !canTriggerResync}
+                  />
+                )}
+                <Button
+                  icon={SyncIcon}
+                  fontSize={2}
+                  padding={3}
+                  mode="ghost"
+                  text={`Update all (${videosToUpdate})`}
+                  tone="positive"
+                  onClick={props.syncAllVideos}
+                  iconRight={isResyncing && Spinner}
+                  disabled={!canTriggerResync}
+                />
+              </Flex>
+            </Flex>
+          </Card>
+        )
+      }
+    >
+      <Box padding={4}>
+        {/* LOADING ASSETS STATE */}
+        {(props.muxAssets.loading || props.sanityAssetsLoading) && (
+          <Card tone="primary" marginBottom={5} padding={3} border>
+            <Flex align="center" gap={4}>
+              <Spinner muted size={4} />
+              <Stack space={2}>
+                <Text size={2} weight="semibold">
+                  Loading assets from Mux
+                </Text>
+                <Text size={1}>This may take a while.</Text>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
+
+        {/* ERROR LOADING MUX */}
+        {props.muxAssets.error && (
+          <Card tone="critical" marginBottom={5} padding={3} border>
+            <Flex align="center" gap={2}>
+              <ErrorOutlineIcon fontSize={36} />
+              <Stack space={2}>
+                <Text size={2} weight="semibold">
+                  There was an error getting data from Mux
+                </Text>
+                <Text size={1}>Please try again or contact a developer for help.</Text>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
+
+        {/* SYNCING STATE */}
+        {resyncState === 'syncing' && (
+          <Card tone="primary" marginBottom={5} padding={3} border>
+            <Flex align="center" gap={4}>
+              <Spinner muted size={4} />
+              <Stack space={2}>
+                <Text size={2} weight="semibold">
+                  Updating video metadata
+                </Text>
+                <Text size={1}>Syncing titles from Mux...</Text>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
+
+        {/* ERROR SYNCING */}
+        {resyncState === 'error' && (
+          <Card tone="critical" marginBottom={5} padding={3} border>
+            <Flex align="center" gap={2}>
+              <ErrorOutlineIcon fontSize={36} />
+              <Stack space={2}>
+                <Text size={2} weight="semibold">
+                  There was an error syncing metadata
+                </Text>
+                <Text size={1}>
+                  {props.resyncError
+                    ? `Error: ${props.resyncError}`
+                    : 'Please try again or contact a developer for help.'}
+                </Text>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
+
+        {/* SUCCESS STATE */}
+        {resyncState === 'done' && (
+          <Stack paddingY={5} marginBottom={4} space={3} style={{textAlign: 'center'}}>
+            <Box>
+              <CheckmarkCircleIcon fontSize={48} />
+            </Box>
+            <Heading size={2}>Metadata synced successfully</Heading>
+            <Text size={2}>All video titles have been updated from Mux.</Text>
+          </Stack>
+        )}
+
+        {/* CONFIRMATION MESSAGE */}
+        {resyncState === 'idle' && !props.muxAssets.loading && !props.sanityAssetsLoading && (
+          <Stack space={4}>
+            <Heading size={1}>
+              There {videosToUpdate === 1 ? 'is' : 'are'} {videosToUpdate} video
+              {videosToUpdate === 1 ? '' : 's'} with Mux metadata
+            </Heading>
+            <Text size={2}>
+              This will update video titles in Sanity to match those in Mux. No new videos will be
+              created.
+            </Text>
+            {videosWithEmptyOrPlaceholder > 0 && (
+              <Card padding={3} tone="caution" border>
+                <Flex align="flex-start" gap={2}>
+                  <Box>
+                    <ErrorOutlineIcon />
+                  </Box>
+                  <Stack space={2}>
+                    <Text size={2} weight="semibold">
+                      Videos with empty or placeholder titles
+                    </Text>
+                    <Text size={1} muted>
+                      {videosWithEmptyOrPlaceholder} video
+                      {videosWithEmptyOrPlaceholder === 1 ? '' : 's'} without titles or with
+                      placeholder titles (e.g., &quot;Asset #123&quot;) can be updated selectively.
+                    </Text>
+                  </Stack>
+                </Flex>
+              </Card>
+            )}
+          </Stack>
+        )}
+      </Box>
+    </Dialog>
+  )
+}
+
+export default function ResyncMetadata() {
+  const resyncMetadata = useResyncMuxMetadata()
+
+  if (!resyncMetadata.hasSecrets) {
+    return
+  }
+
+  if (resyncMetadata.dialogOpen) {
+    // eslint-disable-next-line consistent-return
+    return <ResyncMetadataDialog {...resyncMetadata} />
+  }
+
+  // eslint-disable-next-line consistent-return
+  return <Button mode="bleed" text="Resync Metadata" onClick={resyncMetadata.openDialog} />
+}

package/src/components/VideosBrowser.tsx

@@ -1,10 +1,12 @@
 import {SearchIcon} from '@sanity/icons'
-import {Card, Flex, Grid, Label, Stack, Text, TextInput} from '@sanity/ui'
+import {Card, Flex, Grid, Inline, Label, Stack, Text, TextInput} from '@sanity/ui'
 import {useMemo, useState} from 'react'
 
 import useAssets from '../hooks/useAssets'
 import type {VideoAssetDocument} from '../util/types'
+import ConfigureApi from './ConfigureApi'
 import ImportVideosFromMux from './ImportVideosFromMux'
+import ResyncMetadata from './ResyncMetadata'
 import {SelectSortOptions} from './SelectSortOptions'
 import SpinnerBox from './SpinnerBox'
 import type {VideoDetailsProps} from './VideoDetails/useVideoDetails'
@@ -39,7 +41,13 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
             />
             <SelectSortOptions setSort={setSort} sort={sort} />
           </Flex>
-          {placement === 'tool' && <ImportVideosFromMux />}
+          {placement === 'tool' && (
+            <Inline space={2}>
+              <ImportVideosFromMux />
+              <ResyncMetadata />
+              <ConfigureApi />
+            </Inline>
+          )}
         </Flex>
         <Stack space={3}>
           {assets?.length > 0 && (

package/src/hooks/useImportMuxAssets.ts

@@ -3,11 +3,11 @@ import {useMemo, useState} from 'react'
 import {
   createHookFromObservableFactory,
   type DocumentStore,
-  truncateString,
   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'
@@ -37,7 +37,7 @@ export default function useImportMuxAssets() {
   const dialogOpen = importState !== 'closed'
 
   const muxAssets = useMuxAssets({
-    secrets: secretDocumentValues.value.secrets,
+    client,
     enabled: hasSecrets && dialogOpen,
   })
 
@@ -101,7 +101,7 @@ function muxAssetToSanityDocument(asset: MuxAsset): VideoAssetDocument | undefin
     _createdAt: parseMuxDate(asset.created_at).toISOString(),
     assetId: asset.id,
     playbackId,
-    filename: asset.meta?.title ?? `Asset #${truncateString(asset.id, 15)}`,
+    filename: asset.meta?.title ?? generateAssetPlaceholder(asset.id),
     status: asset.status,
     data: asset,
   }

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