259 lines
9.7 KiB
TypeScript
259 lines
9.7 KiB
TypeScript
'use client'
|
||
|
||
import { useEffect, useId, useRef, useState } from 'react'
|
||
import Image from 'next/image'
|
||
import { useGSAP } from '@gsap/react'
|
||
import gsap from 'gsap'
|
||
import { ImagePlus, LoaderCircle, RefreshCw, Trash2 } from 'lucide-react'
|
||
|
||
import {
|
||
handleDropZoneKeyDown,
|
||
hasDragLeftDropZone,
|
||
prepareFileDrag,
|
||
validateImageFiles,
|
||
} from './drag-drop-utils'
|
||
import { assertVideoPreviewImageIsSafeToDecode } from './image-processor'
|
||
import { formatBytes } from './upload-utils'
|
||
|
||
const VIDEO_PREVIEW_EXTENSIONS = ['jpg', 'jpeg', 'png', 'webp'] as const
|
||
const VIDEO_PREVIEW_MAX_BYTES = 50 * 1024 * 1024
|
||
|
||
gsap.registerPlugin(useGSAP)
|
||
|
||
interface VideoPreviewImageUploadProps {
|
||
previewUrl?: string | null
|
||
fileName?: string
|
||
fileSize?: number
|
||
disabled?: boolean
|
||
compact?: boolean
|
||
onFileSelect: (file: File) => void | Promise<void>
|
||
onRemove: () => void
|
||
onValidationError: (message: string) => void
|
||
onProcessingChange?: (processing: boolean) => void
|
||
}
|
||
|
||
export default function VideoPreviewImageUpload({
|
||
previewUrl,
|
||
fileName,
|
||
fileSize,
|
||
disabled = false,
|
||
compact = false,
|
||
onFileSelect,
|
||
onRemove,
|
||
onValidationError,
|
||
onProcessingChange,
|
||
}: VideoPreviewImageUploadProps) {
|
||
const generatedId = useId()
|
||
const inputId = `video-preview-${generatedId.replace(/:/g, '')}`
|
||
const previewPanelRef = useRef<HTMLDivElement>(null)
|
||
const inputRef = useRef<HTMLInputElement>(null)
|
||
const isMountedRef = useRef(true)
|
||
const processingRef = useRef(false)
|
||
const [isDragging, setIsDragging] = useState(false)
|
||
const [isProcessing, setIsProcessing] = useState(false)
|
||
|
||
useEffect(() => {
|
||
isMountedRef.current = true
|
||
return () => {
|
||
isMountedRef.current = false
|
||
}
|
||
}, [])
|
||
|
||
useGSAP(() => {
|
||
if (
|
||
!previewUrl
|
||
|| !previewPanelRef.current
|
||
|| typeof window.matchMedia !== 'function'
|
||
) return
|
||
|
||
const motion = gsap.matchMedia()
|
||
motion.add('(prefers-reduced-motion: no-preference)', () => {
|
||
gsap.fromTo(
|
||
previewPanelRef.current,
|
||
{ autoAlpha: 0.72, scale: 0.985, y: 4 },
|
||
{
|
||
autoAlpha: 1,
|
||
scale: 1,
|
||
y: 0,
|
||
duration: 0.22,
|
||
ease: 'power2.out',
|
||
overwrite: 'auto',
|
||
clearProps: 'transform,opacity,visibility',
|
||
},
|
||
)
|
||
})
|
||
|
||
return () => motion.revert()
|
||
}, { dependencies: [previewUrl], revertOnUpdate: true })
|
||
|
||
const openFilePicker = () => {
|
||
if (!disabled && !isProcessing) inputRef.current?.click()
|
||
}
|
||
|
||
const processFiles = async (files: FileList | File[]) => {
|
||
if (disabled || processingRef.current) {
|
||
onValidationError('当前操作尚未完成，请稍候再更换视频预览图')
|
||
return
|
||
}
|
||
|
||
const { acceptedFiles, errors } = validateImageFiles(files, {
|
||
maxBytes: VIDEO_PREVIEW_MAX_BYTES,
|
||
maxCount: 1,
|
||
allowedExtensions: VIDEO_PREVIEW_EXTENSIONS,
|
||
})
|
||
onValidationError(errors.join('；'))
|
||
|
||
const file = acceptedFiles[0]
|
||
if (!file) return
|
||
|
||
processingRef.current = true
|
||
setIsProcessing(true)
|
||
onProcessingChange?.(true)
|
||
try {
|
||
await assertVideoPreviewImageIsSafeToDecode(file)
|
||
await onFileSelect(file)
|
||
} catch (error) {
|
||
console.error('[VideoPreviewImageUpload] 预览图处理失败:', error)
|
||
onValidationError(error instanceof Error ? error.message : '视频预览图处理失败，请重试或更换图片')
|
||
} finally {
|
||
processingRef.current = false
|
||
if (isMountedRef.current) {
|
||
setIsProcessing(false)
|
||
onProcessingChange?.(false)
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
void processFiles(event.currentTarget.files || [])
|
||
event.currentTarget.value = ''
|
||
}
|
||
|
||
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
||
prepareFileDrag(event, disabled || isProcessing)
|
||
setIsDragging(false)
|
||
void processFiles(event.dataTransfer.files)
|
||
}
|
||
|
||
const dropHandlers = {
|
||
onDragEnter: (event: React.DragEvent<HTMLDivElement>) => {
|
||
prepareFileDrag(event, disabled || isProcessing)
|
||
if (!disabled && !isProcessing) setIsDragging(true)
|
||
},
|
||
onDragLeave: (event: React.DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault()
|
||
event.stopPropagation()
|
||
if (hasDragLeftDropZone(event)) setIsDragging(false)
|
||
},
|
||
onDragOver: (event: React.DragEvent<HTMLDivElement>) => {
|
||
prepareFileDrag(event, disabled || isProcessing)
|
||
},
|
||
onDrop: handleDrop,
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-2" aria-busy={isProcessing}>
|
||
<div className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
|
||
<label htmlFor={inputId} className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
视频预览图 <span className="font-normal text-gray-500 dark:text-gray-400">（选填）</span>
|
||
</label>
|
||
<p id={`${inputId}-help`} className="text-xs text-gray-500 dark:text-gray-400">
|
||
未填写时自动从视频截取
|
||
</p>
|
||
</div>
|
||
|
||
<input
|
||
ref={inputRef}
|
||
id={inputId}
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp,.jpg,.jpeg,.png,.webp"
|
||
onChange={handleFileChange}
|
||
className="hidden"
|
||
disabled={disabled || isProcessing}
|
||
aria-describedby={`${inputId}-help`}
|
||
/>
|
||
|
||
{previewUrl ? (
|
||
<div
|
||
ref={previewPanelRef}
|
||
className={`flex flex-col gap-3 rounded-apple border p-3 sm:flex-row sm:items-center ${
|
||
isDragging
|
||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||
: 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/40'
|
||
} ${disabled ? 'opacity-60' : ''}`}
|
||
{...dropHandlers}
|
||
>
|
||
<div className={`relative shrink-0 overflow-hidden rounded-apple bg-gray-200 dark:bg-gray-700 ${compact ? 'h-20 w-32' : 'aspect-video w-full sm:w-44'}`}>
|
||
<Image
|
||
src={previewUrl}
|
||
alt="已选择的视频预览图"
|
||
fill
|
||
unoptimized
|
||
className="object-cover"
|
||
sizes={compact ? '128px' : '(max-width: 640px) 100vw, 176px'}
|
||
/>
|
||
</div>
|
||
|
||
<div className="min-w-0 flex-1">
|
||
<p className="truncate text-sm font-medium text-gray-800 dark:text-gray-200">
|
||
{fileName || '已选择预览图'}
|
||
</p>
|
||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||
{fileSize ? `${formatBytes(fileSize)} · ` : ''}手动图片将优先展示
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex shrink-0 items-center gap-1 self-end sm:self-center">
|
||
<button
|
||
type="button"
|
||
onClick={openFilePicker}
|
||
disabled={disabled || isProcessing}
|
||
className="inline-flex min-h-11 items-center gap-2 rounded-apple px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus-visible:ring-offset-gray-900"
|
||
>
|
||
{isProcessing ? <LoaderCircle className="h-4 w-4 animate-spin" aria-hidden="true" /> : <RefreshCw className="h-4 w-4" aria-hidden="true" />}
|
||
更换
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={onRemove}
|
||
disabled={disabled || isProcessing}
|
||
className="inline-flex h-11 w-11 items-center justify-center rounded-apple text-red-600 transition-colors hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-red-400 dark:hover:bg-red-950/30 dark:focus-visible:ring-offset-gray-900"
|
||
aria-label="移除视频预览图"
|
||
title="移除视频预览图"
|
||
>
|
||
<Trash2 className="h-4 w-4" aria-hidden="true" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div
|
||
role="button"
|
||
tabIndex={disabled || isProcessing ? -1 : 0}
|
||
aria-disabled={disabled || isProcessing}
|
||
aria-describedby={`${inputId}-help`}
|
||
className={`flex min-h-24 items-center gap-3 rounded-apple border-2 border-dashed px-4 py-3 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 ${
|
||
isDragging
|
||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||
: 'border-gray-300 bg-gray-50 hover:border-gray-400 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-900/30 dark:hover:border-gray-500 dark:hover:bg-gray-900/60'
|
||
} ${disabled || isProcessing ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
|
||
onClick={openFilePicker}
|
||
onKeyDown={(event) => handleDropZoneKeyDown(event, openFilePicker)}
|
||
{...dropHandlers}
|
||
>
|
||
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-apple bg-white text-gray-600 shadow-sm dark:bg-gray-800 dark:text-gray-300">
|
||
{isProcessing ? <LoaderCircle className="h-5 w-5 animate-spin" aria-hidden="true" /> : <ImagePlus className="h-5 w-5" aria-hidden="true" />}
|
||
</span>
|
||
<span className="min-w-0">
|
||
<span className="block text-sm font-medium text-gray-800 dark:text-gray-200">
|
||
{isProcessing ? '正在处理预览图...' : '添加预览图'}
|
||
</span>
|
||
<span className="mt-1 block text-xs text-gray-500 dark:text-gray-400">
|
||
JPG、PNG 或 WebP，最大 50MB，也可拖拽到这里
|
||
</span>
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|