sanity-plugin-mux-input 3.0.5 → 4.0.0

package/src/components/UploadConfiguration.tsx

@@ -1,696 +0,0 @@
-import {DocumentVideoIcon, ErrorOutlineIcon, UploadIcon} from '@sanity/icons'
-import {Box, Button, Card, Dialog, Flex, Label, Radio, Stack, Text} from '@sanity/ui'
-import {uuid} from '@sanity/uuid'
-import LanguagesList from 'iso-639-1'
-import {memo, useEffect, useId, useReducer, useRef, useState} from 'react'
-import {FormField} from 'sanity'
-
-import {useFetchFileSize} from '../hooks/useFetchFileSize'
-import {useMediaMetadata, type VideoAssetMetadata} from '../hooks/useMediaMetadata'
-import {convertWatermarkToMuxOverlay} from '../util/convertWatermarkToMux'
-import formatBytes from '../util/formatBytes'
-import {formatSeconds} from '../util/formatSeconds'
-import {
-  type AutogeneratedTextTrack,
-  type CustomTextTrack,
-  isAutogeneratedTrack,
-  isCustomTextTrack,
-  type MuxNewAssetSettings,
-  type PluginConfig,
-  type Secrets,
-  type StaticRenditionResolution,
-  type SupportedMuxLanguage,
-  type UploadConfig,
-  type UploadTextTrack,
-  type WatermarkConfig,
-} from '../util/types'
-import DraggableWatermark, {WatermarkControls} from './DraggableWatermark'
-import TextTracksEditor, {type TrackAction} from './TextTracksEditor'
-import PlaybackPolicy from './uploadConfiguration/PlaybackPolicy'
-import {
-  RESOLUTION_TIERS,
-  ResolutionTierSelector,
-} from './uploadConfiguration/ResolutionTierSelector'
-import {StaticRenditionSelector} from './uploadConfiguration/StaticRenditionSelector'
-import type {StagedUpload} from './Uploader'
-
-export type UploadConfigurationStateAction =
-  | {action: 'video_quality'; value: UploadConfig['video_quality']}
-  | {action: 'max_resolution_tier'; value: UploadConfig['max_resolution_tier']}
-  | {action: 'static_renditions'; value: UploadConfig['static_renditions']}
-  | {action: 'normalize_audio'; value: UploadConfig['normalize_audio']}
-  | {action: 'signed_policy'; value: UploadConfig['signed_policy']}
-  | {action: 'public_policy'; value: UploadConfig['public_policy']}
-  | {action: 'drm_policy'; value: UploadConfig['drm_policy']}
-  | {action: 'watermark'; value: WatermarkConfig}
-  | TrackAction
-
-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}[]
-
-/**
- * Sanitizes static renditions configuration to ensure 'highest' is not mixed with specific resolutions.
- * If both are present, only 'highest' (and 'audio-only' if present) will be kept.
- */
-function sanitizeStaticRenditions(
-  renditions: StaticRenditionResolution[],
-): StaticRenditionResolution[] {
-  const hasHighest = renditions.includes('highest')
-  const hasSpecificResolutions = renditions.some((r) => r !== 'highest' && r !== 'audio-only')
-
-  if (hasHighest && hasSpecificResolutions) {
-    return renditions.filter((r) => r === 'highest' || r === 'audio-only')
-  }
-
-  return renditions
-}
-
-/**
- * The modal for configuring a staged upload. Handles triggering of the asset
- * upload, even if no modal needs to be shown.
- *
- * @returns
- */
-export default function UploadConfiguration({
-  stagedUpload,
-  secrets,
-  pluginConfig,
-  startUpload,
-  onClose,
-}: {
-  stagedUpload: StagedUpload
-  secrets: Secrets
-  pluginConfig: PluginConfig
-  startUpload: (settings: MuxNewAssetSettings, watermark: WatermarkConfig | undefined) => void
-  onClose: () => void
-}) {
-  const id = useId()
-  const [watermarkValidationError, setWatermarkValidationError] = useState<string | null>(null)
-  const watermarkPreviewContainerRef = useRef<HTMLDivElement>(null)
-  const watermarkPreviewVideoRef = useRef<HTMLVideoElement>(null)
-  // oxlint-disable-next-line react/react-compiler
-  const autoTextTracks = useRef<NonNullable<UploadConfig['text_tracks']>>(
-    pluginConfig.video_quality === 'plus' && pluginConfig.defaultAutogeneratedSubtitleLang
-      ? [
-          {
-            _id: uuid(),
-            type: 'autogenerated',
-            language_code: pluginConfig.defaultAutogeneratedSubtitleLang,
-            name: LanguagesList.getNativeName(pluginConfig.defaultAutogeneratedSubtitleLang),
-          } satisfies AutogeneratedTextTrack,
-        ]
-      : [],
-  ).current
-
-  const [config, dispatch] = useReducer(
-    // oxlint-disable-next-line react/react-compiler
-    (prev: UploadConfig, action: UploadConfigurationStateAction) => {
-      switch (action.action) {
-        case 'video_quality':
-          // If video quality level switches to basic, remove plus-only features
-          if (action.value === 'basic') {
-            return Object.assign({}, prev, {
-              video_quality: action.value,
-              static_renditions: [],
-              max_resolution_tier: '1080p',
-              text_tracks: prev.text_tracks?.filter(({type}) => type !== 'autogenerated'),
-              public_policy: true,
-              signed_policy: false,
-              drm_policy: false,
-            })
-            // If video quality level switches to plus, add back in default plus features
-          }
-          return Object.assign({}, prev, {
-            video_quality: action.value,
-            static_renditions: sanitizeStaticRenditions(pluginConfig.static_renditions || []),
-            max_resolution_tier: pluginConfig.max_resolution_tier,
-            text_tracks: [...autoTextTracks, ...(prev.text_tracks || [])],
-          })
-
-        case 'static_renditions':
-        case 'max_resolution_tier':
-        case 'normalize_audio':
-        case 'signed_policy':
-          return Object.assign({}, prev, {[action.action]: action.value})
-        case 'public_policy':
-          return Object.assign({}, prev, {[action.action]: action.value})
-        case 'drm_policy':
-          return Object.assign({}, prev, {[action.action]: action.value})
-        case 'watermark':
-          return Object.assign({}, prev, {watermark: action.value})
-        // Updating individual tracks
-        case 'track': {
-          const text_tracks = [...prev.text_tracks]
-          const target_track_i = text_tracks.findIndex(({_id}) => _id === action.id)
-          switch (action.subAction) {
-            case 'add':
-              // Exit early if track already exists
-              if (target_track_i !== -1) break
-              text_tracks.push({
-                _id: action.id,
-                ...action.value,
-              } as AutogeneratedTextTrack)
-              break
-            case 'update':
-              if (target_track_i === -1) break
-              text_tracks[target_track_i] = {
-                ...text_tracks[target_track_i],
-                ...action.value,
-              } as UploadTextTrack
-              break
-            case 'delete':
-              if (target_track_i === -1) break
-              text_tracks.splice(target_track_i, 1)
-              break
-          }
-          return Object.assign({}, prev, {text_tracks})
-        }
-        default:
-          return prev
-      }
-    },
-    {
-      video_quality: pluginConfig.video_quality,
-      max_resolution_tier: pluginConfig.max_resolution_tier,
-      static_renditions: sanitizeStaticRenditions(pluginConfig.static_renditions || []),
-      signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
-      public_policy: pluginConfig.defaultPublic,
-      drm_policy: pluginConfig.defaultDrm && !!secrets.drmConfigId,
-      normalize_audio: pluginConfig.normalize_audio,
-      text_tracks: autoTextTracks,
-    } as UploadConfig,
-  )
-
-  // Video validations
-  const [validationError, setValidationError] = useState<string | null>(null)
-  const MAX_FILE_SIZE = pluginConfig.maxAssetFileSize
-  const MAX_DURATION_SECONDS = pluginConfig.maxAssetDuration
-
-  const {fileSize, isLoadingFileSize, canSkipFileSizeValidation} = useFetchFileSize(
-    stagedUpload,
-    MAX_FILE_SIZE,
-  )
-  const {videoAssetMetadata, setVideoAssetMetadata, isLoadingMetadata} =
-    useMediaMetadata(stagedUpload)
-
-  useEffect(() => {
-    if (fileSize) {
-      setVideoAssetMetadata((old) => ({...old, size: fileSize}))
-    }
-  }, [fileSize, setVideoAssetMetadata])
-
-  useEffect(() => {
-    const validateDuration = (duration: number) => {
-      if (MAX_DURATION_SECONDS && duration > MAX_DURATION_SECONDS) {
-        setValidationError(
-          `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`,
-        )
-        return false
-      }
-      return true
-    }
-
-    const validateFileSize = (size: number): boolean => {
-      if (MAX_FILE_SIZE === undefined || size <= MAX_FILE_SIZE) {
-        return true
-      }
-
-      setValidationError(
-        `File size (${formatBytes(size)}) exceeds maximum allowed size of ${formatBytes(MAX_FILE_SIZE)}`,
-      )
-      return false
-    }
-
-    const validateDrmAvailability = (isAudioOnly: boolean) => {
-      if (config.drm_policy && isAudioOnly) {
-        setValidationError('Audio-only asset cannot be DRM protected')
-        return false
-      }
-      return true
-    }
-
-    let valid = true
-    if (videoAssetMetadata?.size) {
-      valid = valid && (canSkipFileSizeValidation || validateFileSize(videoAssetMetadata.size))
-    }
-    if (videoAssetMetadata?.duration) {
-      valid = valid && validateDuration(videoAssetMetadata.duration)
-    }
-    if (videoAssetMetadata?.isAudioOnly != undefined) {
-      valid = valid && validateDrmAvailability(videoAssetMetadata.isAudioOnly)
-    }
-    if (valid) {
-      // oxlint-disable-next-line react/react-compiler
-      setValidationError(null)
-    }
-  }, [
-    MAX_FILE_SIZE,
-    MAX_DURATION_SECONDS,
-    canSkipFileSizeValidation,
-    videoAssetMetadata?.duration,
-    videoAssetMetadata?.size,
-    videoAssetMetadata?.height,
-    videoAssetMetadata?.width,
-    videoAssetMetadata,
-    config.drm_policy,
-    validationError,
-  ])
-
-  // If user-provided config is disabled, begin the upload immediately with
-  // the developer-specified values from the schema or config or defaults.
-  // This can include auto-generated subtitles!
-  const {disableTextTrackConfig, disableUploadConfig} = pluginConfig
-  const skipConfig = disableTextTrackConfig && disableUploadConfig
-  useEffect(() => {
-    if (skipConfig) {
-      const {settings, watermark} = formatUploadConfig(config, secrets, {
-        videoAspectRatio: videoAssetMetadata?.aspectRatio,
-      })
-      startUpload(settings, watermark)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  if (skipConfig) return null
-
-  const basicConfig = config.video_quality !== 'plus' && config.video_quality !== 'premium'
-  const playbackPolicySelected = config.public_policy || config.signed_policy || config.drm_policy
-  const maxSupportedResolution = RESOLUTION_TIERS.findIndex(
-    (rt) => rt.value === pluginConfig.max_resolution_tier,
-  )
-  return (
-    <Dialog
-      animate
-      open
-      id="upload-configuration"
-      zOffset={1000}
-      width={1}
-      header="Configure Mux Upload"
-      onClose={onClose}
-    >
-      <Stack padding={4} space={2}>
-        {(validationError || watermarkValidationError) && (
-          <Card padding={3} tone="critical" radius={2} marginBottom={2}>
-            <Flex gap={2} align="flex-start">
-              <ErrorOutlineIcon width={20} height={20} />
-              <Stack space={2}>
-                <Text size={1} weight="semibold">
-                  Validation Error
-                </Text>
-                <Text size={1}>{validationError || watermarkValidationError}</Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-        <Label size={3}>FILE TO UPLOAD</Label>
-        <Card
-          tone="transparent"
-          border
-          padding={3}
-          paddingY={4}
-          style={{borderRadius: '0.1865rem'}}
-        >
-          <Flex gap={2}>
-            <DocumentVideoIcon fontSize="2em" />
-            <Stack space={2}>
-              <Text textOverflow="ellipsis" as="h2" size={3}>
-                {stagedUpload.type === 'file' ? stagedUpload.files[0]!.name : stagedUpload.url}
-              </Text>
-              <Text as="p" size={1} muted>
-                {stagedUpload.type === 'file'
-                  ? `Direct File Upload (${formatBytes(stagedUpload.files[0]!.size)})`
-                  : (() => {
-                      if (videoAssetMetadata?.size) {
-                        return `File From URL (${formatBytes(videoAssetMetadata.size)})`
-                      }
-                      if (isLoadingFileSize) {
-                        return 'File From URL (Loading size...)'
-                      }
-                      return 'File From URL (Unknown size)'
-                    })()}
-              </Text>
-              {stagedUpload.type === 'file' && (
-                <Stack space={1}>
-                  {isLoadingMetadata && (
-                    <Text as="p" size={1} muted>
-                      Reading video metadata...
-                    </Text>
-                  )}
-                  {videoAssetMetadata?.duration && !validationError && (
-                    <Text as="p" size={1} muted>
-                      Duration: {formatSeconds(videoAssetMetadata.duration)}
-                    </Text>
-                  )}
-                </Stack>
-              )}
-            </Stack>
-          </Flex>
-        </Card>
-        {!disableUploadConfig && (
-          <Stack space={3} paddingBottom={2}>
-            <FormField
-              path={[]}
-              title="Video Quality Level"
-              description={
-                <>
-                  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"
-                    rel="noopener noreferrer"
-                  >
-                    See the Mux guide for more details.
-                  </a>
-                </>
-              }
-            >
-              <Flex gap={3}>
-                {VIDEO_QUALITY_LEVELS.map(({value, label}) => {
-                  const inputId = `${id}--encodingtier-${value}`
-                  return (
-                    <Flex key={value} align="center" gap={2}>
-                      <Radio
-                        checked={config.video_quality === value}
-                        name="asset-encodingtier"
-                        onChange={(e) =>
-                          dispatch({
-                            action: 'video_quality' as const,
-                            value: e.currentTarget.value as UploadConfig['video_quality'],
-                          })
-                        }
-                        value={value}
-                        id={inputId}
-                      />
-                      <Text as="label" htmlFor={inputId}>
-                        {label}
-                      </Text>
-                    </Flex>
-                  )
-                })}
-              </Flex>
-            </FormField>
-
-            {!basicConfig && (
-              <>
-                <FormField title="Additional Configuration" path={[]}>
-                  <Stack space={3}>
-                    <PlaybackPolicy id={id} config={config} secrets={secrets} dispatch={dispatch} />
-                    {maxSupportedResolution > 0 && (
-                      <ResolutionTierSelector
-                        id={id}
-                        config={config}
-                        dispatch={dispatch}
-                        maxSupportedResolution={maxSupportedResolution}
-                      />
-                    )}
-                    <StaticRenditionSelector id={id} config={config} dispatch={dispatch} />
-                    {!disableTextTrackConfig && (
-                      <TextTracksEditor
-                        tracks={config.text_tracks}
-                        dispatch={dispatch}
-                        defaultLang={pluginConfig.defaultAutogeneratedSubtitleLang}
-                      />
-                    )}
-                  </Stack>
-                </FormField>
-                <WatermarkSection
-                  config={config}
-                  dispatch={dispatch}
-                  stagedUpload={stagedUpload}
-                  videoAssetMetadata={videoAssetMetadata}
-                  watermarkPreviewContainerRef={watermarkPreviewContainerRef}
-                  watermarkPreviewVideoRef={watermarkPreviewVideoRef}
-                  onValidationChange={setWatermarkValidationError}
-                />
-              </>
-            )}
-          </Stack>
-        )}
-
-        <Box marginTop={4}>
-          <Button
-            disabled={
-              (!basicConfig && !playbackPolicySelected) ||
-              validationError !== null ||
-              isLoadingMetadata ||
-              (isLoadingFileSize && !canSkipFileSizeValidation)
-            }
-            icon={UploadIcon}
-            text="Upload"
-            tone="positive"
-            onClick={() => {
-              if (!validationError) {
-                const {settings, watermark} = formatUploadConfig(config, secrets, {
-                  videoAspectRatio: videoAssetMetadata?.aspectRatio,
-                })
-                startUpload(settings, watermark)
-              }
-            }}
-          />
-        </Box>
-      </Stack>
-    </Dialog>
-  )
-}
-
-function setAdvancedPlaybackPolicy(
-  config: UploadConfig,
-  secrets: Secrets,
-): MuxNewAssetSettings['advanced_playback_policies'] {
-  const advanced_playback_policies: MuxNewAssetSettings['advanced_playback_policies'] = []
-  if (config.public_policy) {
-    advanced_playback_policies.push({policy: 'public'})
-  }
-  if (config.signed_policy) {
-    advanced_playback_policies.push({policy: 'signed'})
-  }
-  if (config.drm_policy) {
-    if (secrets.drmConfigId)
-      advanced_playback_policies.push({
-        policy: 'drm',
-        drm_configuration_id: secrets.drmConfigId ?? undefined,
-      })
-    else {
-      console.error('Selected DRM Policy but missing DRM Configuration Id')
-    }
-  }
-  return advanced_playback_policies
-}
-
-function formatUploadConfig(
-  config: UploadConfig,
-  secrets: Secrets,
-  options?: {videoAspectRatio?: number | null},
-): {
-  settings: MuxNewAssetSettings
-  watermark?: WatermarkConfig
-} {
-  const generated_subtitles = config.text_tracks
-    .filter<AutogeneratedTextTrack>(isAutogeneratedTrack)
-    .map<{name: string; language_code: SupportedMuxLanguage}>((track) => ({
-      name: track.name,
-      language_code: track.language_code,
-    }))
-
-  const inputs: NonNullable<MuxNewAssetSettings['input']> = [
-    {
-      type: 'video',
-      generated_subtitles: generated_subtitles.length > 0 ? generated_subtitles : undefined,
-    },
-    ...config.text_tracks.filter<CustomTextTrack>(isCustomTextTrack).reduce(
-      (acc, track) => {
-        if (track.language_code && track.file && track.name) {
-          acc.push({
-            url: track.file.contents,
-            type: 'text',
-            text_type: track.type === 'subtitles' ? 'subtitles' : undefined,
-            language_code: track.language_code,
-            name: track.name,
-            closed_captions: track.type === 'captions',
-          })
-        }
-        return acc
-      },
-      [] as NonNullable<MuxNewAssetSettings['input']>,
-    ),
-  ]
-
-  if (config.watermark?.imageUrl) {
-    const watermarkForMux: WatermarkConfig = {...config.watermark, enabled: true}
-    const overlaySettings = convertWatermarkToMuxOverlay(watermarkForMux, {
-      videoAspectRatio: options?.videoAspectRatio ?? undefined,
-      units: 'px',
-    })
-    if (overlaySettings) {
-      inputs.push({
-        url: config.watermark.imageUrl,
-        overlay_settings: overlaySettings,
-      } as NonNullable<MuxNewAssetSettings['input']>[number])
-    }
-  }
-
-  return {
-    settings: {
-      input: inputs,
-      static_renditions:
-        config.static_renditions.length > 0
-          ? config.static_renditions.map((resolution) => ({resolution}))
-          : undefined,
-      advanced_playback_policies: setAdvancedPlaybackPolicy(config, secrets),
-      max_resolution_tier: config.max_resolution_tier,
-      video_quality: config.video_quality,
-      normalize_audio: config.normalize_audio,
-    },
-    watermark: config.watermark?.imageUrl
-      ? ({...config.watermark, enabled: true} as WatermarkConfig)
-      : undefined,
-  }
-}
-
-function WatermarkSection({
-  config,
-  dispatch,
-  stagedUpload,
-  videoAssetMetadata,
-  watermarkPreviewContainerRef,
-  watermarkPreviewVideoRef,
-  onValidationChange,
-}: {
-  config: UploadConfig
-  dispatch: (action: UploadConfigurationStateAction) => void
-  stagedUpload: StagedUpload
-  videoAssetMetadata: VideoAssetMetadata | null
-  watermarkPreviewContainerRef: React.RefObject<HTMLDivElement | null>
-  watermarkPreviewVideoRef: React.RefObject<HTMLVideoElement | null>
-  onValidationChange: (error: string | null) => void
-}) {
-  if (videoAssetMetadata?.isAudioOnly !== false) return null
-  return (
-    <FormField
-      path={[]}
-      title="Watermark"
-      description={
-        <>
-          Add a watermark overlay to your video using Mux&apos;s native watermark support.{' '}
-          <a
-            href="https://www.mux.com/docs/guides/add-watermarks-to-your-videos"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn more about Mux watermarks.
-          </a>
-        </>
-      }
-    >
-      <Stack space={3}>
-        <WatermarkControls
-          watermark={config.watermark || {enabled: false}}
-          onChange={(watermark) => {
-            dispatch({action: 'watermark', value: watermark})
-          }}
-          onValidationChange={onValidationChange}
-          previewContainerRef={watermarkPreviewContainerRef}
-          previewVideoRef={watermarkPreviewVideoRef}
-        />
-        {config.watermark?.imageUrl &&
-          stagedUpload.type === 'file' &&
-          // Canvas preview is only shown in "Canvas" mode (no explicit overlay_settings)
-          !config.watermark.overlay_settings && (
-            <WatermarkPreview
-              stagedUpload={stagedUpload}
-              watermark={config.watermark}
-              videoAspectRatio={videoAssetMetadata.aspectRatio}
-              onWatermarkChange={(watermark) => {
-                dispatch({action: 'watermark', value: watermark})
-              }}
-              previewContainerRef={watermarkPreviewContainerRef}
-              videoRef={watermarkPreviewVideoRef}
-            />
-          )}
-      </Stack>
-    </FormField>
-  )
-}
-
-// Memoized preview component to prevent unnecessary re-renders
-const WatermarkPreview = memo(function WatermarkPreview({
-  stagedUpload,
-  watermark,
-  onWatermarkChange,
-  videoAspectRatio,
-  previewContainerRef,
-  videoRef,
-}: {
-  stagedUpload: StagedUpload
-  watermark: WatermarkConfig
-  onWatermarkChange: (watermark: WatermarkConfig) => void
-  videoAspectRatio?: number | null
-  previewContainerRef: React.RefObject<HTMLDivElement | null>
-  videoRef: React.RefObject<HTMLVideoElement | null>
-}) {
-  // Initialize video source only once
-  useEffect(() => {
-    if (videoRef.current && stagedUpload.type === 'file') {
-      const file = stagedUpload.files[0]
-      const url = URL.createObjectURL(file!)
-      videoRef.current.src = url
-
-      return () => {
-        URL.revokeObjectURL(url)
-      }
-    }
-    return undefined
-  }, [stagedUpload, videoRef])
-
-  const isVertical =
-    videoAspectRatio !== null && videoAspectRatio !== undefined && videoAspectRatio < 1
-
-  return (
-    <Card
-      tone="transparent"
-      border
-      style={{
-        overflow: 'hidden',
-        // For vertical videos, center the preview and limit its width
-        display: 'flex',
-        justifyContent: 'center',
-      }}
-    >
-      {/* Inner container that exactly matches the video aspect ratio - no padding, no letterbox */}
-      <div
-        ref={previewContainerRef}
-        style={{
-          position: 'relative',
-          // For vertical videos: limit width so the preview doesn't get too tall
-          // For horizontal videos: use full width
-          width: isVertical ? 'auto' : '100%',
-          aspectRatio: videoAspectRatio ? String(videoAspectRatio) : '16/9',
-          ...(isVertical ? {height: '400px', maxHeight: '50vh'} : {minHeight: '200px'}),
-          overflow: 'hidden',
-        }}
-      >
-        <video
-          ref={videoRef}
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            objectFit: 'fill',
-            display: 'block',
-          }}
-        />
-        <DraggableWatermark
-          watermark={watermark}
-          onChange={onWatermarkChange}
-          containerRef={previewContainerRef as React.RefObject<HTMLDivElement>}
-          videoElementRef={videoRef as React.RefObject<HTMLVideoElement>}
-        />
-      </div>
-    </Card>
-  )
-})