forked from 77media/video-flow
处理编译
This commit is contained in:
Xin Wang
parent
f6018e7f46
commit
3f61f0ef7e
@ -1,12 +1,9 @@
|
||||
import './globals.css';
|
||||
import type { Metadata } from 'next';
|
||||
import { Inter } from 'next/font/google';
|
||||
import { ThemeProvider } from '@/components/theme-provider';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
// Import the OAuthCallbackHandler dynamically to ensure it only runs on the client
|
||||
const OAuthCallbackHandler = dynamic(
|
||||
() => import('@/components/ui/oauth-callback-handler'),
|
||||
@ -25,7 +22,7 @@ export default function RootLayout({
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={inter.className}>
|
||||
<body className="font-sans antialiased">
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
|
||||
224
components/pages/history-page.tsx
Normal file
224
components/pages/history-page.tsx
Normal file
@ -0,0 +1,224 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Search,
|
||||
Filter,
|
||||
Video,
|
||||
Calendar,
|
||||
Eye,
|
||||
Edit,
|
||||
Trash2,
|
||||
MoreHorizontal,
|
||||
Play
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
|
||||
interface HistoryItem {
|
||||
id: number;
|
||||
title: string;
|
||||
type: 'script-to-video' | 'video-to-video';
|
||||
status: 'completed' | 'processing' | 'failed';
|
||||
createdAt: string;
|
||||
duration?: string;
|
||||
thumbnail?: string;
|
||||
}
|
||||
|
||||
export function HistoryPage() {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
|
||||
const [filteredItems, setFilteredItems] = useState<HistoryItem[]>([]);
|
||||
|
||||
// Mock data - replace with actual API call
|
||||
useEffect(() => {
|
||||
const mockData: HistoryItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Sample Script Video",
|
||||
type: "script-to-video",
|
||||
status: "completed",
|
||||
createdAt: "2024-01-15",
|
||||
duration: "2:30",
|
||||
thumbnail: "/assets/empty_video.png"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Video Enhancement Project",
|
||||
type: "video-to-video",
|
||||
status: "processing",
|
||||
createdAt: "2024-01-14",
|
||||
duration: "1:45"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Marketing Video",
|
||||
type: "script-to-video",
|
||||
status: "completed",
|
||||
createdAt: "2024-01-13",
|
||||
duration: "3:15",
|
||||
thumbnail: "/assets/empty_video.png"
|
||||
}
|
||||
];
|
||||
setHistoryItems(mockData);
|
||||
setFilteredItems(mockData);
|
||||
}, []);
|
||||
|
||||
// Filter items based on search term
|
||||
useEffect(() => {
|
||||
const filtered = historyItems.filter(item =>
|
||||
item.title.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
setFilteredItems(filtered);
|
||||
}, [searchTerm, historyItems]);
|
||||
|
||||
const getStatusBadgeVariant = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'default';
|
||||
case 'processing':
|
||||
return 'secondary';
|
||||
case 'failed':
|
||||
return 'destructive';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeIcon = (type: string) => {
|
||||
return type === 'script-to-video' ? '📝' : '🎥';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Project History</h1>
|
||||
<p className="text-white/70">View and manage your video projects</p>
|
||||
</div>
|
||||
|
||||
{/* Search and Filter */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
|
||||
<Input
|
||||
placeholder="Search projects..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 bg-white/5 border-white/20 text-white placeholder:text-white/40"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white/10">
|
||||
<Filter className="h-4 w-4 mr-2" />
|
||||
Filter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Grid */}
|
||||
{filteredItems.length === 0 ? (
|
||||
<Card className="p-12 text-center bg-white/5 border-white/10">
|
||||
<Video className="h-12 w-12 text-white/40 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-white/70 mb-2">
|
||||
{searchTerm ? 'No projects found' : 'No projects yet'}
|
||||
</h3>
|
||||
<p className="text-white/50">
|
||||
{searchTerm
|
||||
? 'Try adjusting your search terms'
|
||||
: 'Create your first video project to see it here'
|
||||
}
|
||||
</p>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredItems.map((item) => (
|
||||
<Card key={item.id} className="bg-white/5 border-white/10 overflow-hidden hover:bg-white/10 transition-colors">
|
||||
{/* Thumbnail */}
|
||||
<div className="aspect-video bg-gradient-to-br from-purple-900/20 to-blue-900/20 relative">
|
||||
{item.thumbnail ? (
|
||||
<img
|
||||
src={item.thumbnail}
|
||||
alt={item.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Video className="h-12 w-12 text-white/40" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Play overlay */}
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-black/50">
|
||||
<Button size="sm" className="bg-white/20 hover:bg-white/30">
|
||||
<Play className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Type indicator */}
|
||||
<div className="absolute top-2 left-2">
|
||||
<span className="text-lg">{getTypeIcon(item.type)}</span>
|
||||
</div>
|
||||
|
||||
{/* Duration */}
|
||||
{item.duration && (
|
||||
<div className="absolute bottom-2 right-2 bg-black/70 px-2 py-1 rounded text-xs text-white">
|
||||
{item.duration}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="font-medium text-white truncate flex-1" title={item.title}>
|
||||
{item.title}
|
||||
</h3>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-white/60 hover:text-white">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
View
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-red-500">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm text-white/60">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{item.createdAt}
|
||||
</div>
|
||||
<Badge variant={getStatusBadgeVariant(item.status)}>
|
||||
{item.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
168
components/pages/script-to-video.tsx
Normal file
168
components/pages/script-to-video.tsx
Normal file
@ -0,0 +1,168 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { ArrowLeft, Loader2 } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ModeEnum, ResolutionEnum } from "@/api/enums";
|
||||
import { createScriptEpisode, CreateScriptEpisodeRequest, updateScriptEpisode, UpdateScriptEpisodeRequest } from "@/api/script_episode";
|
||||
import { convertScriptToScene } from "@/api/video_flow";
|
||||
|
||||
export function ScriptToVideo() {
|
||||
const router = useRouter();
|
||||
const [script, setScript] = useState('');
|
||||
const [selectedMode, setSelectedMode] = useState<ModeEnum>(ModeEnum.AUTOMATIC);
|
||||
const [selectedResolution, setSelectedResolution] = useState<ResolutionEnum>(ResolutionEnum.HD_720P);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
|
||||
const handleBack = () => {
|
||||
router.push('/create');
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!script.trim()) {
|
||||
alert('请输入剧本内容');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsCreating(true);
|
||||
|
||||
// Create episode
|
||||
const episodeData: CreateScriptEpisodeRequest = {
|
||||
title: "Script Episode",
|
||||
script_id: 0, // This should come from a project
|
||||
status: 1,
|
||||
summary: script
|
||||
};
|
||||
|
||||
const episodeResponse = await createScriptEpisode(episodeData);
|
||||
if (episodeResponse.code !== 0) {
|
||||
alert(`创建剧集失败: ${episodeResponse.message}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const episodeId = episodeResponse.data.id;
|
||||
|
||||
// Convert script to scenes
|
||||
const convertResponse = await convertScriptToScene(script, episodeId, 0);
|
||||
|
||||
if (convertResponse.code === 0) {
|
||||
// Update episode with generated data
|
||||
const updateEpisodeData: UpdateScriptEpisodeRequest = {
|
||||
id: episodeId,
|
||||
atmosphere: convertResponse.data.atmosphere,
|
||||
summary: convertResponse.data.summary,
|
||||
scene: convertResponse.data.scene,
|
||||
characters: convertResponse.data.characters,
|
||||
};
|
||||
|
||||
await updateScriptEpisode(updateEpisodeData);
|
||||
|
||||
// Navigate to workflow
|
||||
router.push(`/create/work-flow?episodeId=${episodeId}`);
|
||||
} else {
|
||||
alert(`转换失败: ${convertResponse.message}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建过程出错:', error);
|
||||
alert("创建项目时发生错误，请稍后重试");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleBack}
|
||||
className="text-white/70 hover:text-white"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<h1 className="text-2xl font-bold text-white">Script to Video</h1>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<Card className="p-6 bg-white/5 border-white/10">
|
||||
<div className="space-y-6">
|
||||
{/* Script Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Script Content
|
||||
</label>
|
||||
<Textarea
|
||||
value={script}
|
||||
onChange={(e) => setScript(e.target.value)}
|
||||
placeholder="Enter your script here..."
|
||||
className="min-h-[200px] bg-white/5 border-white/20 text-white placeholder:text-white/50"
|
||||
rows={10}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Settings */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Mode
|
||||
</label>
|
||||
<Select value={selectedMode.toString()} onValueChange={(value) => setSelectedMode(Number(value) as ModeEnum)}>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={ModeEnum.AUTOMATIC.toString()}>Automatic</SelectItem>
|
||||
<SelectItem value={ModeEnum.MANUAL.toString()}>Manual</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Resolution
|
||||
</label>
|
||||
<Select value={selectedResolution.toString()} onValueChange={(value) => setSelectedResolution(Number(value) as ResolutionEnum)}>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={ResolutionEnum.HD_720P.toString()}>720P HD</SelectItem>
|
||||
<SelectItem value={ResolutionEnum.FULL_HD_1080P.toString()}>1080P Full HD</SelectItem>
|
||||
<SelectItem value={ResolutionEnum.UHD_2K.toString()}>2K UHD</SelectItem>
|
||||
<SelectItem value={ResolutionEnum.UHD_4K.toString()}>4K UHD</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Button */}
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={handleCreate}
|
||||
disabled={isCreating || !script.trim()}
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
{isCreating ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
'Create Video'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
233
components/pages/video-to-video.tsx
Normal file
233
components/pages/video-to-video.tsx
Normal file
@ -0,0 +1,233 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { ArrowLeft, Upload, Loader2 } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ModeEnum, ResolutionEnum } from "@/api/enums";
|
||||
import { createScriptEpisode, CreateScriptEpisodeRequest, updateScriptEpisode, UpdateScriptEpisodeRequest } from "@/api/script_episode";
|
||||
import { convertVideoToScene } from "@/api/video_flow";
|
||||
import { getUploadTokenWithDomain, uploadToQiniu } from "@/api/common";
|
||||
|
||||
export function VideoToVideo() {
|
||||
const router = useRouter();
|
||||
const [videoUrl, setVideoUrl] = useState('');
|
||||
const [selectedMode, setSelectedMode] = useState<ModeEnum>(ModeEnum.AUTOMATIC);
|
||||
const [selectedResolution, setSelectedResolution] = useState<ResolutionEnum>(ResolutionEnum.HD_720P);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
|
||||
const handleBack = () => {
|
||||
router.push('/create');
|
||||
};
|
||||
|
||||
const handleUploadVideo = async () => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'video/*';
|
||||
input.onchange = async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (file) {
|
||||
try {
|
||||
setIsUploading(true);
|
||||
|
||||
// Get upload token
|
||||
const { token } = await getUploadTokenWithDomain();
|
||||
|
||||
// Upload to Qiniu
|
||||
const uploadedVideoUrl = await uploadToQiniu(file, token);
|
||||
|
||||
setVideoUrl(uploadedVideoUrl);
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error);
|
||||
alert('Upload failed, please try again');
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!videoUrl) {
|
||||
alert('请先上传视频');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsCreating(true);
|
||||
|
||||
// Create episode
|
||||
const episodeData: CreateScriptEpisodeRequest = {
|
||||
title: "Video Episode",
|
||||
script_id: 0, // This should come from a project
|
||||
status: 1,
|
||||
summary: "Video conversion"
|
||||
};
|
||||
|
||||
const episodeResponse = await createScriptEpisode(episodeData);
|
||||
if (episodeResponse.code !== 0) {
|
||||
alert(`创建剧集失败: ${episodeResponse.message}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const episodeId = episodeResponse.data.id;
|
||||
|
||||
// Convert video to scenes
|
||||
const convertResponse = await convertVideoToScene(videoUrl, episodeId, 0);
|
||||
|
||||
if (convertResponse.code === 0) {
|
||||
// Update episode with generated data
|
||||
const updateEpisodeData: UpdateScriptEpisodeRequest = {
|
||||
id: episodeId,
|
||||
atmosphere: convertResponse.data.atmosphere,
|
||||
summary: convertResponse.data.summary,
|
||||
scene: convertResponse.data.scene,
|
||||
characters: convertResponse.data.characters,
|
||||
};
|
||||
|
||||
await updateScriptEpisode(updateEpisodeData);
|
||||
|
||||
// Navigate to workflow
|
||||
router.push(`/create/work-flow?episodeId=${episodeId}`);
|
||||
} else {
|
||||
alert(`转换失败: ${convertResponse.message}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建过程出错:', error);
|
||||
alert("创建项目时发生错误，请稍后重试");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleBack}
|
||||
className="text-white/70 hover:text-white"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<h1 className="text-2xl font-bold text-white">Video to Video</h1>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<Card className="p-6 bg-white/5 border-white/10">
|
||||
<div className="space-y-6">
|
||||
{/* Video Upload */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Upload Video
|
||||
</label>
|
||||
<div className="border-2 border-dashed border-white/20 rounded-lg p-8 text-center">
|
||||
{videoUrl ? (
|
||||
<div className="space-y-4">
|
||||
<video
|
||||
src={videoUrl}
|
||||
controls
|
||||
className="max-w-full h-64 mx-auto rounded-lg"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleUploadVideo}
|
||||
disabled={isUploading}
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
>
|
||||
Replace Video
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<Upload className="h-12 w-12 text-white/40 mx-auto" />
|
||||
<div>
|
||||
<p className="text-white/70 mb-2">Click to upload a video file</p>
|
||||
<Button
|
||||
onClick={handleUploadVideo}
|
||||
disabled={isUploading}
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
{isUploading ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Uploading...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
Choose Video
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Settings */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Mode
|
||||
</label>
|
||||
<Select value={selectedMode.toString()} onValueChange={(value) => setSelectedMode(Number(value) as ModeEnum)}>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={ModeEnum.AUTOMATIC.toString()}>Automatic</SelectItem>
|
||||
<SelectItem value={ModeEnum.MANUAL.toString()}>Manual</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Resolution
|
||||
</label>
|
||||
<Select value={selectedResolution.toString()} onValueChange={(value) => setSelectedResolution(Number(value) as ResolutionEnum)}>
|
||||
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={ResolutionEnum.HD_720P.toString()}>720P HD</SelectItem>
|
||||
<SelectItem value={ResolutionEnum.FULL_HD_1080P.toString()}>1080P Full HD</SelectItem>
|
||||
<SelectItem value={ResolutionEnum.UHD_2K.toString()}>2K UHD</SelectItem>
|
||||
<SelectItem value={ResolutionEnum.UHD_4K.toString()}>4K UHD</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Button */}
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={handleCreate}
|
||||
disabled={isCreating || !videoUrl}
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
{isCreating ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
'Create Video'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -77,7 +77,6 @@ export function AudioVisualizer({
|
||||
cursorColor: '#ffffff',
|
||||
barWidth: 2,
|
||||
barRadius: 3,
|
||||
responsive: true,
|
||||
height: 50,
|
||||
normalize: true,
|
||||
backend: 'WebAudio',
|
||||
@ -92,20 +91,7 @@ export function AudioVisualizer({
|
||||
console.warn('音频文件加载失败，使用模拟数据');
|
||||
setHasError(true);
|
||||
setIsLoading(false);
|
||||
|
||||
// 如果加载失败，创建空的音频上下文用于演示
|
||||
if (wavesurfer.current) {
|
||||
wavesurfer.current.empty();
|
||||
// 创建模拟的峰值数据
|
||||
const peaks = Array.from({ length: 1000 }, () => Math.random() * 2 - 1);
|
||||
wavesurfer.current.loadDecodedBuffer({
|
||||
getChannelData: () => new Float32Array(peaks),
|
||||
length: peaks.length,
|
||||
sampleRate: 44100,
|
||||
numberOfChannels: 1,
|
||||
duration: 120
|
||||
} as any);
|
||||
}
|
||||
setDuration(120); // Set a default duration for demo mode
|
||||
});
|
||||
|
||||
// 事件监听
|
||||
@ -117,11 +103,7 @@ export function AudioVisualizer({
|
||||
}
|
||||
});
|
||||
|
||||
wavesurfer.current.on('audioprocess', () => {
|
||||
setCurrentTime(wavesurfer.current?.getCurrentTime() || 0);
|
||||
});
|
||||
|
||||
wavesurfer.current.on('seek', () => {
|
||||
wavesurfer.current.on('timeupdate', () => {
|
||||
setCurrentTime(wavesurfer.current?.getCurrentTime() || 0);
|
||||
});
|
||||
|
||||
@ -152,14 +134,8 @@ export function AudioVisualizer({
|
||||
}, [audioUrl]);
|
||||
|
||||
// 更新波形颜色当 isActive 改变时
|
||||
useEffect(() => {
|
||||
if (wavesurfer.current && !hasError) {
|
||||
wavesurfer.current.setOptions({
|
||||
waveColor: isActive ? '#3b82f6' : '#6b7280',
|
||||
progressColor: isActive ? '#1d4ed8' : '#374151',
|
||||
});
|
||||
}
|
||||
}, [isActive, hasError]);
|
||||
// Note: setOptions method might not be available in all WaveSurfer versions
|
||||
// Colors are already set during initialization
|
||||
|
||||
// 更新音量
|
||||
useEffect(() => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user