sanity-plugin-mux-input 2.9.1 → 2.10.1

package/package.json

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

package/src/_exports/index.ts

@@ -8,7 +8,7 @@ export type {VideoAssetDocument} from '../util/types'
 
 export const defaultConfig: PluginConfig = {
   mp4_support: 'none',
-  encoding_tier: 'smart',
+  video_quality: 'plus',
   max_resolution_tier: '1080p',
   normalize_audio: false,
   defaultSigned: false,
@@ -17,6 +17,18 @@ export const defaultConfig: PluginConfig = {
 }
 
 export const muxInput = definePlugin<Partial<PluginConfig> | void>((userConfig) => {
+  // TODO: Remove this on next major version when we end support for encoding_tier
+  if (typeof userConfig === 'object' && 'encoding_tier' in userConfig) {
+    const deprecated_encoding_tier = userConfig.encoding_tier
+    if (!userConfig.video_quality) {
+      if (deprecated_encoding_tier === 'baseline') {
+        userConfig.video_quality = 'basic'
+      }
+      if (deprecated_encoding_tier === 'smart') {
+        userConfig.video_quality = 'plus'
+      }
+    }
+  }
   const config: PluginConfig = {...defaultConfig, ...(userConfig || {})}
   return {
     name: 'mux-input',

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/UploadConfiguration.tsx

@@ -23,7 +23,7 @@ import PlaybackPolicy from './uploadConfiguration/PlaybackPolicy'
 import type {StagedUpload} from './Uploader'
 
 export type UploadConfigurationStateAction =
-  | {action: 'encoding_tier'; value: UploadConfig['encoding_tier']}
+  | {action: 'video_quality'; value: UploadConfig['video_quality']}
   | {action: 'max_resolution_tier'; value: UploadConfig['max_resolution_tier']}
   | {action: 'mp4_support'; value: UploadConfig['mp4_support']}
   | {action: 'normalize_audio'; value: UploadConfig['normalize_audio']}
@@ -31,10 +31,11 @@ export type UploadConfigurationStateAction =
   | {action: 'public_policy'; value: UploadConfig['public_policy']}
   | TrackAction
 
-const ENCODING_OPTIONS = [
-  {value: 'smart', label: 'Smart'},
-  {value: 'baseline', label: 'Baseline'},
-] as const satisfies {value: UploadConfig['encoding_tier']; label: string}[]
+const VIDEO_QUALITY_LEVELS = [
+  {value: 'basic', label: 'Basic'},
+  {value: 'plus', label: 'Plus'},
+  {value: 'premium', label: 'Premium'},
+] as const satisfies {value: UploadConfig['video_quality']; label: string}[]
 
 const RESOLUTION_TIERS = [
   {value: '1080p', label: '1080p'},
@@ -63,7 +64,7 @@ export default function UploadConfiguration({
 }) {
   const id = useId()
   const autoTextTracks = useRef<NonNullable<UploadConfig['text_tracks']>>(
-    pluginConfig.encoding_tier === 'smart' && pluginConfig.defaultAutogeneratedSubtitleLang
+    pluginConfig.video_quality === 'plus' && pluginConfig.defaultAutogeneratedSubtitleLang
       ? [
           {
             _id: uuid(),
@@ -78,21 +79,21 @@ export default function UploadConfiguration({
   const [config, dispatch] = useReducer(
     (prev: UploadConfig, action: UploadConfigurationStateAction) => {
       switch (action.action) {
-        case 'encoding_tier':
-          // If encoding tier switches to baseline, remove smart-only features
-          if (action.value === 'baseline') {
+        case 'video_quality':
+          // If video quality level switches to basic, remove plus-only features
+          if (action.value === 'basic') {
             return Object.assign({}, prev, {
-              encoding_tier: action.value,
+              video_quality: action.value,
               mp4_support: 'none',
               max_resolution_tier: '1080p',
               text_tracks: prev.text_tracks?.filter(({type}) => type !== 'autogenerated'),
               public_policy: true,
               signed_policy: false,
             })
-            // If encoding tier switches to smart, add back in default smart features
+            // If video quality level switches to plus, add back in default plus features
           }
           return Object.assign({}, prev, {
-            encoding_tier: action.value,
+            video_quality: action.value,
             mp4_support: pluginConfig.mp4_support,
             max_resolution_tier: pluginConfig.max_resolution_tier,
             text_tracks: [...autoTextTracks, ...(prev.text_tracks || [])],
@@ -138,7 +139,7 @@ export default function UploadConfiguration({
       }
     },
     {
-      encoding_tier: pluginConfig.encoding_tier,
+      video_quality: pluginConfig.video_quality,
       max_resolution_tier: pluginConfig.max_resolution_tier,
       mp4_support: pluginConfig.mp4_support,
       signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
@@ -159,6 +160,7 @@ export default function UploadConfiguration({
   }, [])
   if (skipConfig) return null
 
+  const basicConfig = config.video_quality !== 'plus' && config.video_quality !== 'premium'
   const maxSupportedResolution = RESOLUTION_TIERS.findIndex(
     (rt) => rt.value === pluginConfig.max_resolution_tier
   )
@@ -198,11 +200,11 @@ export default function UploadConfiguration({
         {!disableUploadConfig && (
           <Stack space={3} paddingBottom={2}>
             <FormField
-              title="Encoding Tier"
+              title="Video Quality Level"
               description={
                 <>
-                  The encoding tier informs the cost, quality, and available platform features for
-                  the asset.{' '}
+                  The video quality level informs the cost, quality, and available platform features
+                  for the asset.{' '}
                   <a
                     href="https://docs.mux.com/guides/use-encoding-tiers"
                     target="_blank"
@@ -214,17 +216,17 @@ export default function UploadConfiguration({
               }
             >
               <Flex gap={3}>
-                {ENCODING_OPTIONS.map(({value, label}) => {
+                {VIDEO_QUALITY_LEVELS.map(({value, label}) => {
                   const inputId = `${id}--encodingtier-${value}`
                   return (
                     <Flex key={value} align="center" gap={2}>
                       <Radio
-                        checked={config.encoding_tier === value}
+                        checked={config.video_quality === value}
                         name="asset-encodingtier"
                         onChange={(e) =>
                           dispatch({
-                            action: 'encoding_tier' as const,
-                            value: e.currentTarget.value as UploadConfig['encoding_tier'],
+                            action: 'video_quality' as const,
+                            value: e.currentTarget.value as UploadConfig['video_quality'],
                           })
                         }
                         value={value}
@@ -239,7 +241,7 @@ export default function UploadConfiguration({
               </Flex>
             </FormField>
 
-            {config.encoding_tier === 'smart' && maxSupportedResolution > 0 && (
+            {!basicConfig && maxSupportedResolution > 0 && (
               <FormField
                 title="Resolution Tier"
                 description={
@@ -286,12 +288,12 @@ export default function UploadConfiguration({
               </FormField>
             )}
 
-            {config.encoding_tier === 'smart' && (
+            {!basicConfig && (
               <FormField title="Additional Configuration">
                 <Stack space={2}>
                   <PlaybackPolicy id={id} config={config} secrets={secrets} dispatch={dispatch} />
 
-                  {config.encoding_tier === 'smart' && (
+                  {!basicConfig && (
                     <Flex align="center" gap={2} padding={[0, 2]}>
                       <Checkbox
                         id={`${id}--mp4_support`}
@@ -319,7 +321,7 @@ export default function UploadConfiguration({
           </Stack>
         )}
 
-        {!disableTextTrackConfig && config.encoding_tier === 'smart' && (
+        {!disableTextTrackConfig && !basicConfig && (
           <TextTracksEditor
             tracks={config.text_tracks}
             dispatch={dispatch}
@@ -329,9 +331,7 @@ export default function UploadConfiguration({
 
         <Box marginTop={4}>
           <Button
-            disabled={
-              config.encoding_tier === 'smart' && !config.public_policy && !config.signed_policy
-            }
+            disabled={!basicConfig && !config.public_policy && !config.signed_policy}
             icon={UploadIcon}
             text="Upload"
             tone="positive"
@@ -388,7 +388,7 @@ function formatUploadConfig(config: UploadConfig): MuxNewAssetSettings {
     mp4_support: config.mp4_support,
     playback_policy: setPlaybackPolicy(config),
     max_resolution_tier: config.max_resolution_tier,
-    encoding_tier: config.encoding_tier,
+    video_quality: config.video_quality,
     normalize_audio: config.normalize_audio,
   }
 }

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,
   }