sanity-plugin-mux-input 2.15.0 → 2.17.0

package/src/hooks/useResyncAsset.ts

@@ -0,0 +1,110 @@
+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',
+  }
+}

package/src/hooks/useResyncMuxMetadata.ts

@@ -6,6 +6,7 @@ import {
   useDocumentStore,
 } from 'sanity'
 
+import {addKeysToMuxData} from '../util/addKeysToMuxData'
 import {isEmptyOrPlaceholderTitle} from '../util/assetTitlePlaceholder'
 import type {MuxAsset, VideoAssetDocument} from '../util/types'
 import {SANITY_API_VERSION} from './useClient'
@@ -115,6 +116,37 @@ export default function useResyncMuxMetadata() {
     }
   }
 
+  async function syncFullData() {
+    if (!matchedAssets) return
+
+    setResyncState('syncing')
+
+    try {
+      const tx = client.transaction()
+
+      matchedAssets.forEach((matched) => {
+        if (!matched.muxAsset) return
+
+        const dataWithKeys = addKeysToMuxData(matched.muxAsset)
+
+        // Update all fields: filename, status, and full data from Mux
+        tx.patch(matched.sanityDoc._id, {
+          set: {
+            filename: matched.muxTitle || matched.currentTitle || '',
+            status: matched.muxAsset.status,
+            data: dataWithKeys,
+          },
+        })
+      })
+
+      await tx.commit({returnDocuments: false})
+      setResyncState('done')
+    } catch (error) {
+      setResyncState('error')
+      setResyncError(error)
+    }
+  }
+
   return {
     sanityAssetsLoading,
     closeDialog,
@@ -124,6 +156,7 @@ export default function useResyncMuxMetadata() {
     hasSecrets,
     syncAllVideos,
     syncOnlyEmpty,
+    syncFullData,
     matchedAssets,
     muxAssets,
     openDialog,

package/src/schema.ts

@@ -23,6 +23,11 @@ const muxTrack = {
     {type: 'number', name: 'max_frame_rate'},
     {type: 'number', name: 'duration'},
     {type: 'number', name: 'max_height'},
+    {type: 'string', name: 'language_code'},
+    {type: 'string', name: 'name'},
+    {type: 'string', name: 'status'},
+    {type: 'string', name: 'text_source'},
+    {type: 'string', name: 'text_type'},
   ],
 }
 

package/src/util/addKeysToMuxData.ts

@@ -0,0 +1,30 @@
+import {uuid} from '@sanity/uuid'
+
+import type {MuxAsset} from './types'
+
+/**
+ * Adds _key to array items in MuxAsset data for Sanity compatibility.
+ * Sanity requires _key on array items for proper editing support.
+ */
+export function addKeysToMuxData(data: MuxAsset): MuxAsset {
+  return {
+    ...data,
+    tracks: data.tracks?.map((track) => ({
+      ...track,
+      _key: uuid(),
+    })),
+    playback_ids: data.playback_ids?.map((playbackId) => ({
+      ...playbackId,
+      _key: uuid(),
+    })),
+    static_renditions: data.static_renditions
+      ? {
+          ...data.static_renditions,
+          files: data.static_renditions.files?.map((file) => ({
+            ...file,
+            _key: uuid(),
+          })),
+        }
+      : undefined,
+  }
+}

package/src/util/convertWatermarkToMux.ts

@@ -0,0 +1,160 @@
+import {roundPxString} from './roundPxString'
+import type {MuxOverlaySettings, WatermarkConfig} from './types'
+
+/**
+ * Converts a draggable watermark position (x, y percentages) to Mux's overlay_settings format.
+ *
+ * @param watermark - The watermark configuration with position, size, and opacity
+ * @returns Mux overlay_settings object
+ * @see {@link https://www.mux.com/docs/guides/add-watermarks-to-your-videos}
+ */
+export function convertWatermarkToMuxOverlay(
+  watermark: WatermarkConfig,
+  options?: {
+    /**
+     * Video aspect ratio (width / height). Needed for correct vertical positioning,
+     * especially on vertical videos.
+     */
+    videoAspectRatio?: number
+    /**
+     * Unit to emit for margins/width when generating overlay_settings from Canvas mode.
+     * - 'px' will generate pixel strings according to Mux's scaling rules:
+     *   values are applied as if the video were scaled to 1920x1080 (horizontal)
+     *   or 1080x1920 (vertical).
+     * - '%' preserves existing behavior.
+     */
+    units?: '%' | 'px'
+  }
+): MuxOverlaySettings | null {
+  if (!watermark.enabled || !watermark.imageUrl) {
+    return null
+  }
+
+  const size = watermark.size || 20
+  const opacity = watermark.opacity ?? 0.7
+
+  /**
+   * Convert a percentage to whole-pixel string, using Mux's base dimensions:
+   * - Horizontal video: 1920x1080
+   * - Vertical video:   1080x1920
+   */
+  const toPxString = (valuePercent: number, axis: 'x' | 'y') => {
+    const videoAspectRatio = options?.videoAspectRatio ?? 16 / 9
+    const isVertical = videoAspectRatio > 0 && videoAspectRatio < 1
+    const baseW = isVertical ? 1080 : 1920
+    const baseH = isVertical ? 1920 : 1080
+    const base = axis === 'x' ? baseW : baseH
+    const px = (valuePercent / 100) * base
+    let rounded = Math.round(px)
+    // Avoid sending 0px (and JS -0); keep sign for negative margins.
+    if (rounded === 0) rounded = px < 0 ? -1 : 1
+    return `${rounded}px`
+  }
+
+  const normalizeToPixels = (value: string | undefined, axis: 'x' | 'y'): string | undefined => {
+    if (!value) return value
+    const trimmed = value.trim()
+    if (trimmed.endsWith('px')) {
+      return roundPxString(trimmed)
+    }
+    if (trimmed.endsWith('%')) {
+      const n = Number(trimmed.slice(0, -1))
+      if (!Number.isFinite(n)) return value
+      return toPxString(n, axis)
+    }
+    return value
+  }
+
+  // If user provided explicit overlay settings, use them (Mux-documented format).
+  // When `options.units === 'px'`, we normalize both % and px to whole-pixel strings,
+  // honoring vertical vs horizontal video bases.
+  if (watermark.overlay_settings) {
+    const widthValue = watermark.overlay_settings.width
+    const widthNormalized =
+      options?.units === 'px' ? normalizeToPixels(widthValue, 'x') : widthValue
+    return {
+      ...watermark.overlay_settings,
+      horizontal_margin:
+        options?.units === 'px'
+          ? (normalizeToPixels(watermark.overlay_settings.horizontal_margin, 'x') ??
+            watermark.overlay_settings.horizontal_margin)
+          : watermark.overlay_settings.horizontal_margin,
+      vertical_margin:
+        options?.units === 'px'
+          ? (normalizeToPixels(watermark.overlay_settings.vertical_margin, 'y') ??
+            watermark.overlay_settings.vertical_margin)
+          : watermark.overlay_settings.vertical_margin,
+      width: widthNormalized ?? `${size}%`,
+      opacity: watermark.overlay_settings.opacity ?? `${Math.round(opacity * 100)}%`,
+    }
+  }
+
+  const position = watermark.position || {x: 50, y: 50}
+
+  /**
+   * Our UI stores watermark position as the *center point* in percentages.
+   * Mux margins are interpreted relative to an *edge* (based on align).
+   *
+   * To make "corner" placements match what the user dragged, we convert from
+   * center-position to top-left margins by subtracting half the watermark size.
+   *
+   * Note: `size` is a percentage of video width. Mux `width` is also expressed
+   * as a percentage of the video width, so we can reuse it for horizontal math.
+   * For vertical math, we approximate using the same percentage to keep behavior
+   * consistent with the current draggable UI (which also uses `size` in both axes
+   * for bounds).
+   */
+  // Allow negative margins to compensate for rounding / letterboxing edge-cases.
+  // We still clamp to a sane range so values don't explode.
+  const clampPercent = (value: number) => Math.max(-100, Math.min(100, value))
+
+  // Mux accepts percentage strings; avoid sending an exact "0%" by nudging to 0.01%.
+  // This also handles the JS -0 edge case and tiny floating point remnants.
+  const toPercentString = (value: number) => {
+    const epsilon = 1e-9
+    const isZeroish = value === 0 || Object.is(value, -0) || Math.abs(value) < epsilon
+    return `${isZeroish ? 0.01 : value}%`
+  }
+
+  const watermarkWidthPercentOfVideoWidth = size
+
+  /**
+   * Convert watermark height into % of video height.
+   * height% = (watermarkWidthPx / imageAspectRatio) / videoHeightPx
+   *         = (size% * videoWidthPx / imageAspectRatio) / videoHeightPx
+   *         = size% * (videoWidthPx/videoHeightPx) / imageAspectRatio
+   *         = size% * videoAspectRatio / imageAspectRatio
+   */
+  const videoAspectRatio = options?.videoAspectRatio ?? 16 / 9
+  const imageAspectRatio = watermark.imageAspectRatio ?? 1
+  const watermarkHeightPercentOfVideoHeight = Math.max(
+    0,
+    Math.min(100, (size * videoAspectRatio) / imageAspectRatio)
+  )
+
+  const halfWidth = watermarkWidthPercentOfVideoWidth / 2
+  const halfHeight = watermarkHeightPercentOfVideoHeight / 2
+
+  const leftMargin = clampPercent(
+    Math.min(position.x - halfWidth, 100 - watermarkWidthPercentOfVideoWidth)
+  )
+  const topMargin = clampPercent(
+    Math.min(position.y - halfHeight, 100 - watermarkHeightPercentOfVideoHeight)
+  )
+
+  const units = options?.units ?? '%'
+  const marginX = units === 'px' ? toPxString(leftMargin, 'x') : toPercentString(leftMargin)
+  const marginY = units === 'px' ? toPxString(topMargin, 'y') : toPercentString(topMargin)
+  const width = units === 'px' ? toPxString(size, 'x') : `${size}%`
+
+  const overlaySettings: MuxOverlaySettings = {
+    vertical_align: 'top',
+    vertical_margin: marginY,
+    horizontal_align: 'left',
+    horizontal_margin: marginX,
+    width,
+    opacity: `${Math.round(opacity * 100)}%`,
+  }
+
+  return overlaySettings
+}

package/src/util/roundPxString.ts

@@ -0,0 +1,16 @@
+/**
+ * Rounds the numeric part of a px string to the nearest integer.
+ * Returns undefined if the value is not a valid px string or not a finite number.
+ * Avoids sending 0px (and JS -0); snaps to ±1 instead.
+ */
+export function roundPxString(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined
+  const trimmed = value.trim()
+  if (!trimmed.endsWith('px')) return undefined
+  const n = Number(trimmed.slice(0, -2))
+  if (!Number.isFinite(n)) return undefined
+  let rounded = Math.round(n)
+  // Avoid sending 0px (and JS -0); keep sign when negative.
+  if (rounded === 0) rounded = n < 0 ? -1 : 1
+  return `${rounded}px`
+}

package/src/util/types.ts

@@ -274,12 +274,52 @@ export function isAutogeneratedTrack(
 
 export type UploadTextTrack = AutogeneratedTextTrack | CustomTextTrack
 
+/**
+ * Watermark configuration for UI (draggable position)
+ */
+export interface WatermarkConfig {
+  enabled: boolean
+  imageUrl?: string
+  /**
+   * Aspect ratio (width / height) of the watermark image.
+   * Used to convert between our center-based UI coords and Mux overlay margins.
+   */
+  imageAspectRatio?: number
+  /**
+   * Optional explicit Mux `overlay_settings`.
+   * When set, these values should be used as-is for the upload request and preview.
+   * @see {@link https://www.mux.com/docs/guides/add-watermarks-to-your-videos}
+   */
+  overlay_settings?: MuxOverlaySettings
+  position?: {
+    x: number // percentage (0-100)
+    y: number // percentage (0-100)
+  }
+  size?: number // percentage of video width (0-100)
+  opacity?: number // 0-1 (converted to percentage string for Mux API)
+}
+
+/**
+ * Mux overlay_settings format for watermark API
+ * @see {@link https://www.mux.com/docs/guides/add-watermarks-to-your-videos}
+ */
+export interface MuxOverlaySettings {
+  vertical_align: 'top' | 'middle' | 'bottom'
+  vertical_margin: string // percentage (e.g., "10%") or pixels (e.g., "40px")
+  horizontal_align: 'left' | 'center' | 'right'
+  horizontal_margin: string // percentage (e.g., "10%") or pixels (e.g., "40px")
+  width?: string // percentage (e.g., "25%") or pixels (e.g., "80px")
+  height?: string // percentage or pixels
+  opacity?: string // percentage string (e.g., "90%")
+}
+
 export interface UploadConfig
   extends Pick<MuxInputConfig, 'max_resolution_tier' | 'normalize_audio' | 'video_quality'> {
   static_renditions: StaticRenditionResolution[]
   text_tracks: UploadTextTrack[]
   signed_policy: boolean
   public_policy: boolean
+  watermark?: WatermarkConfig
   drm_policy: boolean
 }
 
@@ -309,7 +349,7 @@ export interface MuxNewAssetSettings
     /** The time offset in seconds from the beginning of the video indicating the clip's ending marker. */
     end_time?: number
     /** This parameter is required for text type tracks. */
-    type: 'video' | 'audio' | 'text'
+    type?: 'video' | 'audio' | 'text'
     /** Type of text track. This parameter only supports subtitles value. */
     text_type?: 'subtitles'
     /** The language code value must be a valid BCP 47 specification compliant value. */
@@ -320,6 +360,8 @@ export interface MuxNewAssetSettings
     closed_captions?: boolean
     /** This optional parameter should be used tracks with type of text and text_type set to subtitles. */
     passthrough?: string
+    /** Overlay settings for watermarks. Used when adding a watermark image as a second input. */
+    overlay_settings?: MuxOverlaySettings
   }[]
 
   /** An array of playback policy names that you want applied to this asset and available through playback_ids. */