sanity-plugin-mux-input 2.15.0 → 2.16.0

package/package.json

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

package/src/components/PlayerActionsMenu.tsx

@@ -5,6 +5,7 @@ import {
   PlugIcon,
   ResetIcon,
   SearchIcon,
+  SyncIcon,
   TranslateIcon,
   UploadIcon,
 } from '@sanity/icons'
@@ -28,6 +29,7 @@ import {styled} from 'styled-components'
 
 import {useAccessControl} from '../hooks/useAccessControl'
 import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
+import {useResyncAsset} from '../hooks/useResyncAsset'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
 import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
 import {FileInputMenuItem} from './FileInputMenuItem'
@@ -66,9 +68,15 @@ function PlayerActionsMenu(
   const [menuElement, setMenuRef] = useState<HTMLDivElement | null>(null)
   const isSigned = useMemo(() => getPlaybackPolicy(asset)?.policy === 'signed', [asset])
   const {hasConfigAccess} = useAccessControl(props.config)
+  const {resyncAsset, isResyncing} = useResyncAsset({showToast: true})
 
   const onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange])
 
+  const handleResync = useCallback(async () => {
+    setOpen(false)
+    await resyncAsset(asset)
+  }, [resyncAsset, asset])
+
   useEffect(() => {
     if (open && dialogState) {
       setOpen(false)
@@ -134,6 +142,12 @@ function PlayerActionsMenu(
                   text="Captions"
                   onClick={() => setDialogState('edit-captions')}
                 />
+                <MenuItem
+                  icon={SyncIcon}
+                  text="Resync from Mux"
+                  onClick={handleResync}
+                  disabled={readOnly || isResyncing}
+                />
               </>
             )}
             <MenuDivider />

package/src/components/ResyncMetadata.tsx

@@ -1,28 +1,106 @@
 import {CheckmarkCircleIcon, ErrorOutlineIcon, SyncIcon} from '@sanity/icons'
-import {Box, Button, Card, Dialog, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+import {Box, Button, Card, Dialog, Flex, Heading, Radio, Spinner, Stack, Text} from '@sanity/ui'
+import {useState} from 'react'
 
 import useResyncMuxMetadata from '../hooks/useResyncMuxMetadata'
 import {isEmptyOrPlaceholderTitle} from '../util/assetTitlePlaceholder'
 import {DIALOGS_Z_INDEX} from '../util/constants'
 
-// eslint-disable-next-line complexity
+type SyncOption = 'fillEmpty' | 'syncTitles' | 'fullResync'
+
+interface OptionCardProps {
+  id: SyncOption
+  selected: boolean
+  onSelect: (id: SyncOption) => void
+  title: string
+  count: number
+  description: string
+  disabled?: boolean
+}
+
+function OptionCard({
+  id,
+  selected,
+  onSelect,
+  title,
+  count,
+  description,
+  disabled,
+}: OptionCardProps) {
+  return (
+    <Card
+      as="label"
+      padding={3}
+      radius={2}
+      border
+      tone={selected ? 'primary' : 'default'}
+      style={{
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      <Flex gap={3} align="flex-start">
+        <Box paddingTop={1}>
+          <Radio
+            checked={selected}
+            onChange={() => onSelect(id)}
+            disabled={disabled}
+            name="sync-option"
+          />
+        </Box>
+        <Stack space={2} flex={1}>
+          <Flex align="center" gap={2}>
+            <Text size={2} weight="semibold">
+              {title} ({count})
+            </Text>
+          </Flex>
+          <Text size={1} muted>
+            {description}
+          </Text>
+        </Stack>
+      </Flex>
+    </Card>
+  )
+}
+
 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
 
+  const hasEmptyTitles = videosWithEmptyOrPlaceholder > 0
+  const defaultOption: SyncOption = hasEmptyTitles ? 'fillEmpty' : 'syncTitles'
+  const [selectedOption, setSelectedOption] = useState<SyncOption>(defaultOption)
+
+  const canTriggerResync = resyncState === 'idle' || resyncState === 'error'
+  const isResyncing = resyncState === 'syncing'
+  const isDone = resyncState === 'done'
+  const isLoading = props.muxAssets.loading || props.sanityAssetsLoading
+
+  const handleSync = () => {
+    switch (selectedOption) {
+      case 'fillEmpty':
+        props.syncOnlyEmpty()
+        break
+      case 'syncTitles':
+        props.syncAllVideos()
+        break
+      case 'fullResync':
+        props.syncFullData()
+        break
+      default:
+        break
+    }
+  }
+
   return (
     <Dialog
       animate
-      header={'Resync Metadata from Mux'}
+      header="Sync with Mux"
       zOffset={DIALOGS_Z_INDEX}
       id="resync-metadata-dialog"
       onClose={props.closeDialog}
@@ -32,40 +110,25 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
       footer={
         !isDone && (
           <Card padding={3}>
-            <Flex justify="space-between" align="center">
+            <Flex justify="flex-end" gap={2}>
               <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>
+              <Button
+                icon={SyncIcon}
+                fontSize={2}
+                padding={3}
+                text="Run sync"
+                tone="primary"
+                onClick={handleSync}
+                iconRight={isResyncing && Spinner}
+                disabled={!canTriggerResync || isLoading}
+              />
             </Flex>
           </Card>
         )
@@ -73,15 +136,17 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
     >
       <Box padding={4}>
         {/* LOADING ASSETS STATE */}
-        {(props.muxAssets.loading || props.sanityAssetsLoading) && (
-          <Card tone="primary" marginBottom={5} padding={3} border>
+        {isLoading && (
+          <Card tone="primary" marginBottom={4} padding={3} border radius={2}>
             <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>
+                <Text size={1} muted>
+                  This may take a while.
+                </Text>
               </Stack>
             </Flex>
           </Card>
@@ -89,7 +154,7 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
 
         {/* ERROR LOADING MUX */}
         {props.muxAssets.error && (
-          <Card tone="critical" marginBottom={5} padding={3} border>
+          <Card tone="critical" marginBottom={4} padding={3} border radius={2}>
             <Flex align="center" gap={2}>
               <ErrorOutlineIcon fontSize={36} />
               <Stack space={2}>
@@ -104,14 +169,16 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
 
         {/* SYNCING STATE */}
         {resyncState === 'syncing' && (
-          <Card tone="primary" marginBottom={5} padding={3} border>
+          <Card tone="primary" marginBottom={4} padding={3} border radius={2}>
             <Flex align="center" gap={4}>
               <Spinner muted size={4} />
               <Stack space={2}>
                 <Text size={2} weight="semibold">
-                  Updating video metadata
+                  Syncing metadata
+                </Text>
+                <Text size={1} muted>
+                  Updating videos from Mux...
                 </Text>
-                <Text size={1}>Syncing titles from Mux...</Text>
               </Stack>
             </Flex>
           </Card>
@@ -119,7 +186,7 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
 
         {/* ERROR SYNCING */}
         {resyncState === 'error' && (
-          <Card tone="critical" marginBottom={5} padding={3} border>
+          <Card tone="critical" marginBottom={4} padding={3} border radius={2}>
             <Flex align="center" gap={2}>
               <ErrorOutlineIcon fontSize={36} />
               <Stack space={2}>
@@ -138,45 +205,57 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
 
         {/* SUCCESS STATE */}
         {resyncState === 'done' && (
-          <Stack paddingY={5} marginBottom={4} space={3} style={{textAlign: 'center'}}>
+          <Stack paddingY={5} 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>
+            <Heading size={2}>Sync completed</Heading>
+            <Text size={2} muted>
+              Videos have been updated from Mux.
+            </Text>
           </Stack>
         )}
 
-        {/* CONFIRMATION MESSAGE */}
-        {resyncState === 'idle' && !props.muxAssets.loading && !props.sanityAssetsLoading && (
+        {/* OPTIONS */}
+        {!isDone && !isLoading && !props.muxAssets.error && (
           <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 size={1} muted>
+              Found {videosToUpdate} video{videosToUpdate === 1 ? '' : 's'} linked to Mux.
             </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 space={3}>
+              {hasEmptyTitles && (
+                <OptionCard
+                  id="fillEmpty"
+                  selected={selectedOption === 'fillEmpty'}
+                  onSelect={setSelectedOption}
+                  title="Fill missing titles only"
+                  count={videosWithEmptyOrPlaceholder}
+                  description="Updates only videos without a title or with placeholder titles (e.g., 'Asset #123') using the title from Mux."
+                  disabled={isResyncing}
+                />
+              )}
+
+              <OptionCard
+                id="syncTitles"
+                selected={selectedOption === 'syncTitles'}
+                onSelect={setSelectedOption}
+                title="Sync all titles"
+                count={videosToUpdate}
+                description="Replaces the title in Sanity with the title from Mux for all videos."
+                disabled={isResyncing}
+              />
+
+              <OptionCard
+                id="fullResync"
+                selected={selectedOption === 'fullResync'}
+                onSelect={setSelectedOption}
+                title="Full resync"
+                count={videosToUpdate}
+                description="Updates all fields from Mux including status, duration, tracks, captions, and renditions."
+                disabled={isResyncing}
+              />
+            </Stack>
           </Stack>
         )}
       </Box>
@@ -197,5 +276,5 @@ export default function ResyncMetadata() {
   }
 
   // eslint-disable-next-line consistent-return
-  return <Button mode="bleed" text="Resync Metadata" onClick={resyncMetadata.openDialog} />
+  return <Button mode="bleed" text="Sync with Mux" onClick={resyncMetadata.openDialog} />
 }

package/src/components/TextTracksManager.tsx

@@ -10,8 +10,9 @@ import {
 import {Box, Button, Card, Dialog, Flex, Heading, Spinner, Stack, Text, useToast} from '@sanity/ui'
 import {useEffect, useId, useMemo, useState} from 'react'
 
-import {deleteTextTrack, getAsset} from '../actions/assets'
+import {deleteTextTrack} from '../actions/assets'
 import {useClient} from '../hooks/useClient'
+import {useResyncAsset} from '../hooks/useResyncAsset'
 import {downloadVttFile} from '../util/textTracks'
 import type {MuxTextTrack, VideoAssetDocument} from '../util/types'
 import AddCaptionDialog from './AddCaptionDialog'
@@ -203,6 +204,7 @@ export default function TextTracksManager({
   const client = useClient()
   const toast = useToast()
   const dialogId = `DeleteCaptionDialog${useId()}`
+  const {resyncAsset} = useResyncAsset()
   const [downloadingTrackId, setDownloadingTrackId] = useState<string | null>(null)
   const [deletingTrackId, setDeletingTrackId] = useState<string | null>(null)
   const [addedTracks, setAddedTracks] = useState<MuxTextTrack[]>([])
@@ -216,27 +218,6 @@ export default function TextTracksManager({
 
   const MAX_VISIBLE_TRACKS = 4
 
-  useEffect(() => {
-    if (!asset.assetId || !asset._id) return
-
-    const assetId = asset.assetId
-    const documentId = asset._id
-
-    const refreshAsset = async () => {
-      try {
-        const response = await getAsset(client, assetId)
-        await client
-          .patch(documentId)
-          .set({data: response.data, status: response.data.status})
-          .commit()
-      } catch (error) {
-        console.error('Failed to refresh asset data:', error)
-      }
-    }
-
-    refreshAsset()
-  }, [asset.assetId, asset._id, client])
-
   const realTracks: MuxTextTrack[] = propTracks
     ? propTracks
     : asset.data?.tracks?.filter((track): track is MuxTextTrack => track.type === 'text') || []
@@ -344,20 +325,13 @@ export default function TextTracksManager({
       return undefined
     }
 
-    const assetId = asset.assetId
-    const documentId = asset._id
-
     const interval = setInterval(async () => {
       try {
-        const response = await getAsset(client, assetId)
-        await client
-          .patch(documentId)
-          .set({data: response.data, status: response.data.status})
-          .commit()
+        const muxData = await resyncAsset(asset)
+        if (!muxData) return
 
         const fetchedTracks =
-          response.data.tracks?.filter((track): track is MuxTextTrack => track.type === 'text') ||
-          []
+          muxData.tracks?.filter((track): track is MuxTextTrack => track.type === 'text') || []
 
         const isMockTrackReplaced = (
           mockTrack: MuxTextTrack,
@@ -444,7 +418,7 @@ export default function TextTracksManager({
     }, 3000) // Poll every 3 seconds
 
     return () => clearInterval(interval)
-  }, [allTracks, asset.assetId, asset._id, client])
+  }, [allTracks, asset, resyncAsset])
 
   const visibleTracks = allTracks
     .filter(
@@ -506,17 +480,8 @@ export default function TextTracksManager({
       }
       await deleteTextTrack(client, asset.assetId, track.id)
 
-      if (asset._id) {
-        try {
-          const response = await getAsset(client, asset.assetId)
-          await client
-            .patch(asset._id)
-            .set({data: response.data, status: response.data.status})
-            .commit()
-        } catch (refreshError) {
-          console.error('Failed to refresh asset data:', refreshError)
-        }
-      }
+      // Refresh asset data after deletion
+      await resyncAsset(asset)
 
       toast.push({
         title: 'Successfully deleted caption track',
@@ -600,17 +565,8 @@ export default function TextTracksManager({
 
     setTrackToEdit(null)
 
-    if (asset._id && asset.assetId) {
-      try {
-        const response = await getAsset(client, asset.assetId)
-        await client
-          .patch(asset._id)
-          .set({data: response.data, status: response.data.status})
-          .commit()
-      } catch (refreshError) {
-        console.error('Failed to refresh asset data:', refreshError)
-      }
-    }
+    // Refresh asset data after update
+    await resyncAsset(asset)
   }
 
   const getTrackSourceLabel = (track: MuxTextTrack) => {

package/src/components/VideoDetails/VideoDetails.tsx

@@ -7,6 +7,7 @@ import {
   ErrorOutlineIcon,
   RevertIcon,
   SearchIcon,
+  SyncIcon,
   TagIcon,
   TrashIcon,
 } from '@sanity/icons'
@@ -71,6 +72,8 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
     handleClose,
     confirmClose,
     saveChanges,
+    handleResync,
+    isResyncing,
   } = useVideoDetails(props)
 
   const isSaving = state === 'saving'
@@ -97,16 +100,29 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
       footer={
         <Card padding={3}>
           <Flex justify="space-between" align="center">
-            <Button
-              icon={TrashIcon}
-              fontSize={2}
-              padding={3}
-              mode="bleed"
-              text="Delete"
-              tone="critical"
-              onClick={() => setState('deleting')}
-              disabled={isSaving}
-            />
+            <Flex gap={2}>
+              <Button
+                icon={TrashIcon}
+                fontSize={2}
+                padding={3}
+                mode="bleed"
+                text="Delete"
+                tone="critical"
+                onClick={() => setState('deleting')}
+                disabled={isSaving || isResyncing}
+              />
+              <Button
+                icon={SyncIcon}
+                fontSize={2}
+                padding={3}
+                mode="bleed"
+                text="Resync"
+                tone="primary"
+                onClick={handleResync}
+                disabled={isSaving || isResyncing}
+                iconRight={isResyncing && Spinner}
+              />
+            </Flex>
             {modified && (
               <Button
                 icon={CheckmarkIcon}
@@ -117,7 +133,7 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
                 tone="positive"
                 onClick={saveChanges}
                 iconRight={isSaving && Spinner}
-                disabled={isSaving}
+                disabled={isSaving || isResyncing}
               />
             )}
           </Flex>

package/src/components/VideoDetails/useVideoDetails.ts

@@ -4,9 +4,12 @@ import {useDocumentStore} from 'sanity'
 
 import {useClient} from '../../hooks/useClient'
 import useDocReferences from '../../hooks/useDocReferences'
+import {useResyncAsset} from '../../hooks/useResyncAsset'
 import getVideoMetadata from '../../util/getVideoMetadata'
 import {VideoAssetDocument} from '../../util/types'
 
+type VideoDetailsState = 'idle' | 'saving' | 'deleting' | 'closing' | 'resyncing'
+
 export interface VideoDetailsProps {
   closeDialog: () => void
   asset: VideoAssetDocument & {autoPlay?: boolean}
@@ -27,7 +30,16 @@ export default function useVideoDetails(props: VideoDetailsProps) {
 
   const displayInfo = getVideoMetadata({...props.asset, filename})
 
-  const [state, setState] = useState<'deleting' | 'closing' | 'idle' | 'saving'>('idle')
+  const [state, setState] = useState<VideoDetailsState>('idle')
+
+  const {resyncAsset, isResyncing} = useResyncAsset({showToast: true})
+
+  async function handleResync() {
+    if (state !== 'idle') return
+    setState('resyncing')
+    await resyncAsset(props.asset)
+    setState('idle')
+  }
 
   function handleClose() {
     if (state !== 'idle') return
@@ -85,5 +97,7 @@ export default function useVideoDetails(props: VideoDetailsProps) {
     handleClose,
     confirmClose,
     saveChanges,
+    handleResync,
+    isResyncing,
   }
 }