generated from fahricansecer/boilerplate-fe
Harun CAN
795 lines
36 KiB
TypeScript
795 lines
36 KiB
TypeScript
'use client';
|
||
|
||
import { useParams, useRouter } from 'next/navigation';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import {
|
||
ArrowLeft,
|
||
Play,
|
||
Sparkles,
|
||
RefreshCw,
|
||
Clock,
|
||
CheckCircle2,
|
||
AlertCircle,
|
||
Loader2,
|
||
FileText,
|
||
Film,
|
||
Trash2,
|
||
MoreVertical,
|
||
X,
|
||
Languages,
|
||
} from 'lucide-react';
|
||
import Link from 'next/link';
|
||
import { useState, useEffect } from 'react';
|
||
import {
|
||
useProject,
|
||
useGenerateScript,
|
||
useApproveAndQueue,
|
||
useUpdateProject,
|
||
useDeleteProject,
|
||
useGenerateSceneImage,
|
||
useUpscaleSceneImage,
|
||
useRegenerateScene,
|
||
useCancelRender
|
||
} from '@/hooks/use-api';
|
||
import { useRenderProgress } from '@/hooks/use-render-progress';
|
||
import { SceneCard } from '@/components/project/scene-card';
|
||
import { RenderProgress } from '@/components/project/render-progress';
|
||
import { VideoPlayer } from '@/components/project/video-player';
|
||
import { projectsApi, apiClient } from '@/lib/api/api-service';
|
||
import { CINEMATIC_REFERENCES } from '@/constants/cinematic-references';
|
||
import { languages } from '@/components/projects/ProjectConfiguration';
|
||
import { toaster as toast } from '@/components/ui/feedback/toaster';
|
||
|
||
// X (Twitter) ikonunu burada da tanımlıyoruz
|
||
const XIcon = ({ size = 16 }: { size?: number }) => (
|
||
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||
</svg>
|
||
);
|
||
|
||
const STATUS_MAP: Record<string, { label: string; color: string; icon: React.ElementType; bgClass: string }> = {
|
||
DRAFT: { label: 'Taslak', color: 'text-neutral-400', icon: FileText, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||
GENERATING_SCRIPT: { label: 'Senaryo Üretiliyor', color: 'text-neutral-300', icon: Sparkles, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||
PENDING: { label: 'Kuyrukta', color: 'text-neutral-400', icon: Clock, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||
GENERATING_MEDIA: { label: 'Medya Üretiliyor', color: 'text-neutral-300', icon: Sparkles, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||
RENDERING: { label: 'Video İşleniyor', color: 'text-neutral-300', icon: Film, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||
COMPLETED: { label: 'Tamamlandı', color: 'text-neutral-100', icon: CheckCircle2, bgClass: 'bg-neutral-500/20 border-neutral-500/30' },
|
||
FAILED: { label: 'Başarısız', color: 'text-neutral-500', icon: AlertCircle, bgClass: 'bg-neutral-800/50 border-neutral-800' },
|
||
};
|
||
|
||
const videoStyles = [
|
||
// Film & Sinema
|
||
{ id: "CINEMATIC", label: "Sinematik", emoji: "🎬", desc: "Film kalitesinde görseller", category: "Film & Sinema" },
|
||
{ id: "DOCUMENTARY", label: "Belgesel", emoji: "📹", desc: "Bilimsel ve ciddi ton", category: "Film & Sinema" },
|
||
{ id: "STORYTELLING", label: "Hikâye Anlatımı", emoji: "📖", desc: "Anlatı odaklı, sürükleyici", category: "Film & Sinema" },
|
||
{ id: "NEWS", label: "Haber", emoji: "📰", desc: "Güncel ve bilgilendirici", category: "Film & Sinema" },
|
||
{ id: "ARTISTIC", label: "Sanatsal", emoji: "🎨", desc: "Yaratıcı ve sıra dışı", category: "Film & Sinema" },
|
||
{ id: "NOIR", label: "Film Noir", emoji: "🖤", desc: "Karanlık, dramatik", category: "Film & Sinema" },
|
||
{ id: "VLOG", label: "Vlog", emoji: "📱", desc: "Günlük, samimi", category: "Film & Sinema" },
|
||
// Animasyon
|
||
{ id: "ANIME", label: "Anime", emoji: "⛩️", desc: "Japon animasyon stili", category: "Animasyon" },
|
||
{ id: "ANIMATION_3D", label: "3D Animasyon", emoji: "🧊", desc: "Pixar kalitesi", category: "Animasyon" },
|
||
{ id: "ANIMATION_2D", label: "2D Animasyon", emoji: "✏️", desc: "Klasik el çizimi", category: "Animasyon" },
|
||
{ id: "STOP_MOTION", label: "Stop Motion", emoji: "🧸", desc: "Kare kare animasyon", category: "Animasyon" },
|
||
{ id: "MOTION_COMIC", label: "Hareketli Çizgi Roman", emoji: "💥", desc: "Panel bazlı anlatım", category: "Animasyon" },
|
||
{ id: "CARTOON", label: "Karikatür", emoji: "🎭", desc: "Çizgi film stili", category: "Animasyon" },
|
||
{ id: "CLAYMATION", label: "Claymation", emoji: "🏺", desc: "Kil animasyon", category: "Animasyon" },
|
||
{ id: "PIXEL_ART", label: "Pixel Art", emoji: "👾", desc: "8-bit retro oyun", category: "Animasyon" },
|
||
{ id: "ISOMETRIC", label: "İzometrik", emoji: "🔷", desc: "İzometrik animasyon", category: "Animasyon" },
|
||
// Eğitim & Bilgi
|
||
{ id: "EDUCATIONAL", label: "Eğitim", emoji: "🎓", desc: "Öğretici ve açıklayıcı", category: "Eğitim & Bilgi" },
|
||
{ id: "INFOGRAPHIC", label: "İnfografik", emoji: "📊", desc: "Veri görselleştirme", category: "Eğitim & Bilgi" },
|
||
{ id: "WHITEBOARD", label: "Whiteboard", emoji: "📝", desc: "Tahta animasyonu", category: "Eğitim & Bilgi" },
|
||
{ id: "EXPLAINER", label: "Explainer", emoji: "💡", desc: "Ürün/konsept anlatımı", category: "Eğitim & Bilgi" },
|
||
{ id: "DATA_VIZ", label: "Veri Görselleştirme", emoji: "📈", desc: "Grafikler ve tablolar", category: "Eğitim & Bilgi" },
|
||
// Retro & Nostaljik
|
||
{ id: "RETRO_80S", label: "Retro 80s", emoji: "🕹️", desc: "Synthwave estetik", category: "Retro & Nostaljik" },
|
||
{ id: "VINTAGE_FILM", label: "Vintage Film", emoji: "📽️", desc: "Super 8 filmi", category: "Retro & Nostaljik" },
|
||
{ id: "VHS", label: "VHS", emoji: "📼", desc: "Kaset estetik", category: "Retro & Nostaljik" },
|
||
{ id: "POLAROID", label: "Polaroid", emoji: "📸", desc: "Analog fotoğraf", category: "Retro & Nostaljik" },
|
||
{ id: "RETRO_90S", label: "Retro 90s Y2K", emoji: "💿", desc: "Y2K & internet", category: "Retro & Nostaljik" },
|
||
// Sanat Akımları
|
||
{ id: "WATERCOLOR", label: "Suluboya", emoji: "🎨", desc: "Suluboya resim", category: "Sanat Akımları" },
|
||
{ id: "OIL_PAINTING", label: "Yağlı Boya", emoji: "🖌️", desc: "Klasik tuval", category: "Sanat Akımları" },
|
||
{ id: "IMPRESSIONIST", label: "Empresyonist", emoji: "🌅", desc: "Monet tarzı", category: "Sanat Akımları" },
|
||
{ id: "POP_ART", label: "Pop Art", emoji: "🎯", desc: "Warhol stili", category: "Sanat Akımları" },
|
||
{ id: "UKIYO_E", label: "Ukiyo-e", emoji: "🏯", desc: "Japon gravür", category: "Sanat Akımları" },
|
||
{ id: "ART_DECO", label: "Art Deco", emoji: "✨", desc: "1920s zarafet", category: "Sanat Akımları" },
|
||
{ id: "SURREAL", label: "Sürrealist", emoji: "🌀", desc: "Dalí tarzı", category: "Sanat Akımları" },
|
||
{ id: "COMIC_BOOK", label: "Çizgi Roman", emoji: "💬", desc: "Marvel/DC stili", category: "Sanat Akımları" },
|
||
{ id: "SKETCH", label: "Karakalem", emoji: "✍️", desc: "Kalem çizim", category: "Sanat Akımları" },
|
||
// Modern & Minimal
|
||
{ id: "MINIMALIST", label: "Minimalist", emoji: "⚪", desc: "Apple estetiği", category: "Modern & Minimal" },
|
||
{ id: "GLASSMORPHISM", label: "Glassmorphism", emoji: "🔮", desc: "Cam efekti", category: "Modern & Minimal" },
|
||
{ id: "NEON", label: "Neon Glow", emoji: "💜", desc: "Neon ışıkları", category: "Modern & Minimal" },
|
||
{ id: "CYBERPUNK", label: "Cyberpunk", emoji: "🤖", desc: "Gelecek distopya", category: "Modern & Minimal" },
|
||
{ id: "STEAMPUNK", label: "Steampunk", emoji: "⚙️", desc: "Viktoryan mekanik", category: "Modern & Minimal" },
|
||
{ id: "ABSTRACT", label: "Soyut", emoji: "🔵", desc: "Abstract sanat", category: "Modern & Minimal" },
|
||
// Fotoğrafik
|
||
{ id: "PRODUCT", label: "Ürün Fotoğrafı", emoji: "📦", desc: "Studio çekim", category: "Fotoğrafik" },
|
||
{ id: "FASHION", label: "Moda", emoji: "👗", desc: "Editöryal çekim", category: "Fotoğrafik" },
|
||
{ id: "AERIAL", label: "Havadan", emoji: "🚁", desc: "Drone görüntüsü", category: "Fotoğrafik" },
|
||
{ id: "MACRO", label: "Makro", emoji: "🔬", desc: "Yakın çekim", category: "Fotoğrafik" },
|
||
{ id: "PORTRAIT", label: "Portre", emoji: "🧑", desc: "Portre fotoğraf", category: "Fotoğrafik" },
|
||
];
|
||
|
||
const stagger = {
|
||
hidden: { opacity: 0 },
|
||
show: { opacity: 1, transition: { staggerChildren: 0.06 } },
|
||
};
|
||
|
||
const fadeUp = {
|
||
hidden: { opacity: 0, y: 12 },
|
||
show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] as const } },
|
||
};
|
||
|
||
export default function ProjectDetailPage() {
|
||
const { id } = useParams<{ id: string }>();
|
||
const router = useRouter();
|
||
const [showMenu, setShowMenu] = useState(false);
|
||
const [regeneratingSceneId, setRegeneratingSceneId] = useState<string | null>(null);
|
||
const [mounted, setMounted] = useState(false);
|
||
|
||
const [showTranslateModal, setShowTranslateModal] = useState(false);
|
||
const [targetLanguage, setTargetLanguage] = useState<string>("");
|
||
const [isTranslating, setIsTranslating] = useState(false);
|
||
|
||
const confirmTranslate = async () => {
|
||
if (!id || !targetLanguage) return;
|
||
try {
|
||
setIsTranslating(true);
|
||
const res = await apiClient.post(`/projects/${id}/translate`, { targetLanguage });
|
||
toast.success("Proje başarıyla çevrildi!");
|
||
setShowTranslateModal(false);
|
||
setTargetLanguage("");
|
||
// refetch() to maybe update some states, or router.push to the new project
|
||
router.push(`/dashboard/projects/${res.data.id}`);
|
||
} catch (err: any) {
|
||
toast.error(err?.response?.data?.message || "Çeviri sırasında bir hata oluştu.");
|
||
} finally {
|
||
setIsTranslating(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
setMounted(true);
|
||
}, []);
|
||
|
||
// Veri hook'ları (Aktif işlem varsa 3 saniyede bir polling yap)
|
||
const { data: project, isLoading, error, refetch } = useProject(id, {
|
||
refetchInterval: (data: any) => {
|
||
if (!data) return false;
|
||
const isGenerating = data.status === 'GENERATING_MEDIA' ||
|
||
data.renderJobs?.some((j: any) => j.status === 'QUEUED' || j.status === 'PROCESSING');
|
||
return isGenerating ? 3000 : false;
|
||
}
|
||
});
|
||
const generateScriptMutation = useGenerateScript();
|
||
const approveMutation = useApproveAndQueue();
|
||
const deleteMutation = useDeleteProject();
|
||
const cancelRenderMutation = useCancelRender();
|
||
|
||
const generateImageMutation = useGenerateSceneImage();
|
||
const upscaleImageMutation = useUpscaleSceneImage();
|
||
const regenerateSceneMutation = useRegenerateScene();
|
||
|
||
const [generatingImageId, setGeneratingImageId] = useState<string | null>(null);
|
||
const [upscalingImageId, setUpscalingImageId] = useState<string | null>(null);
|
||
|
||
// WebSocket progress
|
||
const renderState = useRenderProgress(
|
||
project?.status && ['PENDING', 'GENERATING_MEDIA', 'RENDERING'].includes(project.status) ? id : undefined,
|
||
);
|
||
|
||
// Sahne güncelleme
|
||
const handleSceneUpdate = async (sceneId: string, data: { narrationText?: string; visualPrompt?: string; subtitleText?: string }) => {
|
||
try {
|
||
await projectsApi.update(`${id}/scenes/${sceneId}` as unknown as string, data as any);
|
||
refetch();
|
||
} catch (err) {
|
||
console.error('Sahne güncelleme hatası:', err);
|
||
}
|
||
};
|
||
|
||
// Sahne yeniden üretim
|
||
const handleSceneRegenerate = async (sceneId: string) => {
|
||
setRegeneratingSceneId(sceneId);
|
||
regenerateSceneMutation.mutate(
|
||
{ projectId: id, sceneId },
|
||
{
|
||
onSettled: () => setRegeneratingSceneId(null),
|
||
onSuccess: () => refetch(),
|
||
}
|
||
);
|
||
};
|
||
|
||
// Sahne görseli oluşturma
|
||
const handleGenerateImage = (sceneId: string, customPrompt?: string) => {
|
||
setGeneratingImageId(sceneId);
|
||
generateImageMutation.mutate(
|
||
{ projectId: id, sceneId, customPrompt },
|
||
{
|
||
onSettled: () => setGeneratingImageId(null),
|
||
onSuccess: () => refetch(),
|
||
}
|
||
);
|
||
};
|
||
|
||
// Sahne görseli upscale
|
||
const handleUpscaleImage = (sceneId: string) => {
|
||
setUpscalingImageId(sceneId);
|
||
upscaleImageMutation.mutate(
|
||
{ projectId: id, sceneId },
|
||
{
|
||
onSettled: () => setUpscalingImageId(null),
|
||
onSuccess: () => refetch(),
|
||
}
|
||
);
|
||
};
|
||
|
||
// Senaryo üret
|
||
const handleGenerateScript = () => {
|
||
generateScriptMutation.mutate(id, {
|
||
onSuccess: () => refetch(),
|
||
});
|
||
};
|
||
|
||
// Onayla ve gönder
|
||
const handleApprove = () => {
|
||
approveMutation.mutate(id, {
|
||
onSuccess: () => refetch(),
|
||
});
|
||
};
|
||
|
||
// İptal et
|
||
const handleCancelRender = () => {
|
||
if (confirm('Aktif video üretimini iptal etmek istediğinize emin misiniz?')) {
|
||
cancelRenderMutation.mutate(id, {
|
||
onSuccess: () => refetch(),
|
||
});
|
||
}
|
||
};
|
||
|
||
// Sil
|
||
const handleDelete = () => {
|
||
if (confirm('Bu projeyi silmek istediğinize emin misiniz?')) {
|
||
deleteMutation.mutate(id, {
|
||
onSuccess: () => router.push('/dashboard/projects'),
|
||
});
|
||
}
|
||
};
|
||
|
||
// ── Loading ──
|
||
if (isLoading) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-[60vh]">
|
||
<div className="flex flex-col items-center gap-3">
|
||
<Loader2 size={32} className="animate-spin text-neutral-400" />
|
||
<p className="text-sm text-[var(--color-text-muted)]">Proje yükleniyor...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Error ──
|
||
if (error || !project) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-[60vh]">
|
||
<div className="card-surface p-8 text-center max-w-md">
|
||
<AlertCircle size={40} className="text-red-400 mx-auto mb-3" />
|
||
<h2 className="text-lg font-semibold mb-2">Proje Bulunamadı</h2>
|
||
<p className="text-sm text-[var(--color-text-muted)] mb-4">
|
||
Bu proje silinmiş veya erişim izniniz yok.
|
||
</p>
|
||
<Link href="/dashboard/projects" className="btn-primary text-sm">
|
||
Projelere Dön
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const statusInfo = STATUS_MAP[project.status] || STATUS_MAP.DRAFT;
|
||
const StatusIcon = statusInfo.icon;
|
||
const isRendering = ['PENDING', 'GENERATING_MEDIA', 'RENDERING', 'GENERATING_SCRIPT'].includes(project.status);
|
||
const isEditable = !isRendering; // COMPLETED, DRAFT, FAILED → editable
|
||
const hasScript = project.scenes && project.scenes.length > 0;
|
||
const isCompleted = project.status === 'COMPLETED';
|
||
const tweetData = project.sourceTweetData as Record<string, any> | undefined;
|
||
|
||
const currentStyle = videoStyles.find(s => s.id === project.videoStyle);
|
||
|
||
const handleStyleChange = async (newStyleId: string) => {
|
||
if (newStyleId === project.videoStyle) return;
|
||
try {
|
||
await projectsApi.update(id, { videoStyle: newStyleId } as any);
|
||
refetch();
|
||
} catch (error) {
|
||
console.error('Failed to update style:', error);
|
||
}
|
||
};
|
||
|
||
const handleCinematicReferenceChange = async (newRef: string) => {
|
||
if (newRef === project.cinematicReference) return;
|
||
try {
|
||
await projectsApi.update(id, { cinematicReference: newRef || undefined } as any);
|
||
refetch();
|
||
} catch (error) {
|
||
console.error('Failed to update cinematic reference:', error);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<motion.div
|
||
variants={stagger}
|
||
initial="hidden"
|
||
animate="show"
|
||
className="space-y-5 max-w-4xl mx-auto pb-8"
|
||
>
|
||
{/* ── Üst Bar — Geri + Aksiyonlar ── */}
|
||
<motion.div variants={fadeUp} className="flex items-center justify-between">
|
||
<Link
|
||
href="/dashboard/projects"
|
||
className="flex items-center gap-2 text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
|
||
>
|
||
<ArrowLeft size={16} />
|
||
Projeler
|
||
</Link>
|
||
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setShowMenu(!showMenu)}
|
||
className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-bg-elevated)] transition-colors"
|
||
>
|
||
<MoreVertical size={16} />
|
||
</button>
|
||
|
||
{showMenu && (
|
||
<div className="absolute right-0 top-10 card-surface p-1.5 min-w-[160px] z-50 shadow-xl">
|
||
<button
|
||
onClick={() => { refetch(); setShowMenu(false); }}
|
||
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-elevated)] rounded-lg transition-colors"
|
||
>
|
||
<RefreshCw size={14} /> Yenile
|
||
</button>
|
||
<button
|
||
onClick={() => { setShowMenu(false); setShowTranslateModal(true); }}
|
||
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-elevated)] rounded-lg transition-colors"
|
||
>
|
||
<Languages size={14} /> Çevir
|
||
</button>
|
||
<button
|
||
onClick={() => { handleDelete(); setShowMenu(false); }}
|
||
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
|
||
>
|
||
<Trash2 size={14} /> Sil
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* ── Proje Header ── */}
|
||
<motion.div variants={fadeUp} className="card-surface p-5 md:p-6">
|
||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
{/* Durum badge */}
|
||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border ${statusInfo.bgClass} ${statusInfo.color}`}>
|
||
<StatusIcon size={12} />
|
||
{statusInfo.label}
|
||
</span>
|
||
|
||
{/* Tweet kaynak badge */}
|
||
{project.sourceType === 'X_TWEET' && (
|
||
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-medium bg-sky-500/10 border border-sky-500/20 text-sky-400">
|
||
<XIcon size={10} /> Tweet
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<h1 className="font-[family-name:var(--font-display)] text-xl md:text-2xl font-bold tracking-tight text-[var(--color-text-primary)] truncate">
|
||
{project.title}
|
||
</h1>
|
||
|
||
{project.description && (
|
||
<p className="text-sm text-[var(--color-text-muted)] mt-1.5 line-clamp-2">
|
||
{project.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* Meta bilgiler */}
|
||
<div className="flex flex-wrap items-center gap-3 text-xs text-[var(--color-text-ghost)] shrink-0">
|
||
<span className="flex items-center gap-1">
|
||
<Clock size={12} /> {project.targetDuration}s
|
||
</span>
|
||
|
||
<select
|
||
value={project.videoStyle}
|
||
onChange={(e) => handleStyleChange(e.target.value)}
|
||
disabled={isRendering}
|
||
className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-neutral-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
|
||
>
|
||
{videoStyles.map((s) => (
|
||
<option key={s.id} value={s.id}>
|
||
{s.emoji} {s.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
|
||
{project.videoStyle === 'CINEMATIC' && (
|
||
<select
|
||
value={project.cinematicReference || ''}
|
||
onChange={(e) => handleCinematicReferenceChange(e.target.value)}
|
||
disabled={isRendering}
|
||
className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-neutral-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer w-44 truncate"
|
||
>
|
||
<option value="">🎬 Sinematik Yönetmen/Film...</option>
|
||
{CINEMATIC_REFERENCES.map(ref => (
|
||
<option key={ref.value} value={ref.value}>{ref.label}</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
|
||
<span className="uppercase text-[10px] tracking-wider">{project.language}</span>
|
||
<span className="text-[10px]">
|
||
{new Date(project.createdAt).toLocaleDateString('tr-TR', {
|
||
day: 'numeric', month: 'short', year: 'numeric',
|
||
})}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tweet kaynak bilgisi */}
|
||
{tweetData && (
|
||
<div className="mt-4 p-3 rounded-xl bg-sky-500/5 border border-sky-500/10">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<XIcon size={14} />
|
||
<span className="text-xs font-medium text-sky-400">
|
||
@{tweetData.authorUsername as string}
|
||
</span>
|
||
{tweetData.viralScore && (
|
||
<span className="text-[10px] px-1.5 py-0.5 rounded-md bg-amber-500/15 text-amber-400 font-medium">
|
||
🔥 {String(tweetData.viralScore)}/100
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-[var(--color-text-muted)] line-clamp-2">
|
||
{tweetData.text as string}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Aksiyon butonları */}
|
||
<div className="flex flex-wrap items-center gap-2 mt-4 pt-4 border-t border-[var(--color-border-faint)]">
|
||
{/* Senaryo üret (draft, senaryo yok) */}
|
||
{!hasScript && (
|
||
<button
|
||
onClick={handleGenerateScript}
|
||
disabled={isRendering || generateScriptMutation.isPending}
|
||
className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-sm font-medium hover:bg-neutral-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{generateScriptMutation.isPending ? (
|
||
<Loader2 size={15} className="animate-spin" />
|
||
) : (
|
||
<Sparkles size={15} />
|
||
)}
|
||
AI ile Senaryo Üret
|
||
</button>
|
||
)}
|
||
|
||
{/* Senaryo yeniden üret (draft/failed, senaryo var) */}
|
||
{hasScript && (
|
||
<button
|
||
onClick={handleGenerateScript}
|
||
disabled={isRendering || generateScriptMutation.isPending}
|
||
className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] text-sm font-medium hover:bg-[var(--color-bg-surface)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{generateScriptMutation.isPending ? (
|
||
<Loader2 size={15} className="animate-spin" />
|
||
) : (
|
||
<RefreshCw size={15} />
|
||
)}
|
||
Senaryoyu Yeniden Üret
|
||
</button>
|
||
)}
|
||
|
||
{/* Onayla ve video üretimini başlat */}
|
||
{hasScript && (
|
||
<button
|
||
onClick={handleApprove}
|
||
disabled={isRendering || approveMutation.isPending}
|
||
className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-sm font-medium hover:bg-neutral-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{approveMutation.isPending ? (
|
||
<Loader2 size={15} className="animate-spin" />
|
||
) : (
|
||
<Play size={15} />
|
||
)}
|
||
Onayla & Video Üret
|
||
</button>
|
||
)}
|
||
|
||
{/* Üretimi İptal Et (Sadece aktif işlem varsa) */}
|
||
{isRendering && (
|
||
<button
|
||
onClick={handleCancelRender}
|
||
disabled={cancelRenderMutation.isPending}
|
||
className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-red-500/10 text-red-400 text-sm font-medium hover:bg-red-500/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{cancelRenderMutation.isPending ? (
|
||
<Loader2 size={15} className="animate-spin" />
|
||
) : (
|
||
<X size={15} />
|
||
)}
|
||
Üretimi İptal Et
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Hata mesajı — kapatılabilir ve aksiyon butonlu */}
|
||
{project.errorMessage && (
|
||
<div className="mt-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
|
||
<div className="flex items-center justify-between mb-1">
|
||
<div className="flex items-center gap-2">
|
||
<AlertCircle size={14} className="text-red-400" />
|
||
<span className="text-xs font-medium text-red-400">Hata</span>
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
// Sayfayı yeniden yükleyerek güncel veriyi al
|
||
refetch();
|
||
}}
|
||
className="text-red-400/60 hover:text-red-400 transition-colors"
|
||
title="Kapat"
|
||
>
|
||
<X size={14} />
|
||
</button>
|
||
</div>
|
||
<p className="text-xs text-red-400/80 mb-2">{project.errorMessage}</p>
|
||
{hasScript && (
|
||
<button
|
||
onClick={handleGenerateScript}
|
||
disabled={generateScriptMutation.isPending}
|
||
className="text-xs px-3 py-1.5 rounded-md bg-red-500/20 text-red-300 hover:bg-red-500/30 transition-colors disabled:opacity-50"
|
||
>
|
||
{generateScriptMutation.isPending ? 'Üretiliyor...' : '🔄 Senaryoyu Yeniden Üret'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
|
||
{/* ── Render Progress (WebSocket) ── */}
|
||
{isRendering && (
|
||
<motion.div variants={fadeUp}>
|
||
<RenderProgress renderState={renderState} projectStatus={project.status} />
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* ── Video Player (tamamlandıysa) ── */}
|
||
{isCompleted && project.finalVideoUrl && (
|
||
<motion.div variants={fadeUp}>
|
||
<VideoPlayer
|
||
videoUrl={project.finalVideoUrl}
|
||
thumbnailUrl={project.thumbnailUrl}
|
||
title={project.title}
|
||
/>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* ── Sahneler ── */}
|
||
{hasScript && (
|
||
<motion.div variants={fadeUp}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-sm font-semibold text-[var(--color-text-primary)] flex items-center gap-2">
|
||
<Film size={15} className="text-neutral-400" />
|
||
Senaryo — {project.scenes!.length} sahne
|
||
</h2>
|
||
<span className="text-[10px] text-[var(--color-text-ghost)]">
|
||
Toplam: {project.scenes!.reduce((sum, s) => sum + s.duration, 0)}s
|
||
</span>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
{project.scenes!.map((scene) => (
|
||
<SceneCard
|
||
key={scene.id}
|
||
scene={scene}
|
||
isEditable={isEditable}
|
||
isRendering={isRendering}
|
||
onUpdate={handleSceneUpdate}
|
||
onRegenerate={handleSceneRegenerate}
|
||
onGenerateImage={handleGenerateImage}
|
||
onUpscaleImage={handleUpscaleImage}
|
||
isRegenerating={regeneratingSceneId === scene.id}
|
||
isGeneratingImage={generatingImageId === scene.id}
|
||
isUpscalingImage={upscalingImageId === scene.id}
|
||
/>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* ── Boş durum (senaryo yok) ── */}
|
||
{!hasScript && isEditable && (
|
||
<motion.div variants={fadeUp} className="card-surface p-8 text-center">
|
||
<div className="w-16 h-16 rounded-2xl bg-[var(--color-bg-elevated)] mx-auto mb-4 flex items-center justify-center">
|
||
<Sparkles size={28} className="text-neutral-400" />
|
||
</div>
|
||
<h3 className="text-base font-semibold mb-1.5">Henüz senaryo üretilmedi</h3>
|
||
<p className="text-sm text-[var(--color-text-muted)] mb-4 max-w-sm mx-auto">
|
||
AI'ın projeniz için etkileyici bir video senaryosu oluşturmasını sağlayın.
|
||
</p>
|
||
<button
|
||
onClick={handleGenerateScript}
|
||
disabled={generateScriptMutation.isPending}
|
||
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-sm font-medium hover:bg-neutral-800 transition-colors disabled:opacity-50"
|
||
>
|
||
{generateScriptMutation.isPending ? (
|
||
<Loader2 size={15} className="animate-spin" />
|
||
) : (
|
||
<Sparkles size={15} />
|
||
)}
|
||
Senaryo Üret
|
||
</button>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* ── Render Geçmişi ── */}
|
||
{project.renderJobs && project.renderJobs.length > 0 && (
|
||
<motion.div variants={fadeUp}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-sm font-semibold text-[var(--color-text-primary)] flex items-center gap-2">
|
||
<Clock size={15} className="text-neutral-400" />
|
||
Render Geçmişi
|
||
</h2>
|
||
{project.status === 'GENERATING_MEDIA' || project.renderJobs.some((j: any) => j.status === 'QUEUED' || j.status === 'PROCESSING') ? (
|
||
<button
|
||
onClick={handleCancelRender}
|
||
disabled={cancelRenderMutation.isPending}
|
||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-red-500/10 text-red-400 hover:bg-red-500/20 text-xs font-medium transition-colors"
|
||
>
|
||
{cancelRenderMutation.isPending ? <Loader2 size={13} className="animate-spin" /> : <X size={13} />}
|
||
İptal Et
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
<div className="space-y-2">
|
||
{project.renderJobs.map((job) => (
|
||
<div key={job.id} className="card-surface p-3 flex flex-col gap-2">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2.5">
|
||
<div className={`w-2 h-2 rounded-full ${
|
||
job.status === 'COMPLETED' ? 'bg-neutral-100' :
|
||
job.status === 'FAILED' ? 'bg-neutral-500' :
|
||
job.status === 'CANCELLED' ? 'bg-neutral-600' :
|
||
'bg-neutral-300 animate-pulse'
|
||
}`} />
|
||
<span className="text-xs text-[var(--color-text-secondary)]">
|
||
Deneme #{job.attemptNumber}
|
||
</span>
|
||
<span className="text-[10px] text-[var(--color-text-ghost)]">
|
||
{job.status}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-3 text-[10px] text-[var(--color-text-ghost)]">
|
||
{job.processingTimeMs && (
|
||
<span>{(job.processingTimeMs / 1000).toFixed(1)}s</span>
|
||
)}
|
||
{mounted ? (
|
||
<span>
|
||
{new Date(job.createdAt).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' })}
|
||
</span>
|
||
) : (
|
||
<span>--:--</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{(job.status === 'QUEUED' || job.status === 'PROCESSING') && (
|
||
<div className="w-full bg-[var(--color-bg-surface)] rounded-full h-1.5 mt-1 overflow-hidden">
|
||
<div
|
||
className="bg-neutral-300 h-1.5 rounded-full transition-all duration-1000 ease-out relative"
|
||
style={{ width: `${job.progress || (job.status === 'QUEUED' ? 5 : 50)}%` }}
|
||
>
|
||
<div className="absolute inset-0 bg-white/20 animate-pulse" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* ─── Çeviri Modal ─── */}
|
||
<AnimatePresence>
|
||
{showTranslateModal && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
transition={{ duration: 0.15 }}
|
||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
||
onClick={() => !isTranslating && setShowTranslateModal(false)}
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95, y: 10 }}
|
||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
exit={{ opacity: 0, scale: 0.95, y: 10 }}
|
||
transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
||
className="relative bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] rounded-2xl p-6 max-w-sm w-full mx-4 shadow-2xl"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Kapatma butonu */}
|
||
<button
|
||
onClick={() => setShowTranslateModal(false)}
|
||
disabled={isTranslating}
|
||
className="absolute top-3 right-3 p-1 rounded-lg text-[var(--color-text-ghost)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-surface)] transition-colors disabled:opacity-50"
|
||
>
|
||
<X size={16} />
|
||
</button>
|
||
|
||
{/* Icon */}
|
||
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500/10 mb-4">
|
||
<Languages size={22} className="text-blue-400" />
|
||
</div>
|
||
|
||
{/* İçerik */}
|
||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1.5">
|
||
Projeyi Çevir
|
||
</h3>
|
||
<p className="text-sm text-[var(--color-text-muted)] mb-3">
|
||
"{project?.title}" projesini başka bir dile çevirin. (1 kredi)
|
||
</p>
|
||
|
||
<select
|
||
value={targetLanguage}
|
||
onChange={(e) => setTargetLanguage(e.target.value)}
|
||
disabled={isTranslating}
|
||
className="w-full bg-[var(--color-bg-surface)] border border-[var(--color-border-default)] rounded-xl px-4 py-2.5 text-sm text-[var(--color-text-primary)] mb-5 outline-none focus:border-blue-500"
|
||
>
|
||
<option value="">Dil Seçin...</option>
|
||
{languages.map((lang) => (
|
||
<option key={lang.code} value={lang.code}>
|
||
{lang.flag} {lang.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
|
||
{/* Butonlar */}
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
onClick={() => setShowTranslateModal(false)}
|
||
disabled={isTranslating}
|
||
className="flex-1 px-4 py-2.5 rounded-xl border border-[var(--color-border-default)] text-sm font-medium text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-surface)] transition-colors disabled:opacity-50"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
onClick={confirmTranslate}
|
||
disabled={isTranslating || !targetLanguage}
|
||
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{isTranslating ? (
|
||
<>
|
||
<Loader2 size={14} className="animate-spin" />
|
||
Çevriliyor...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Languages size={14} />
|
||
Çevir (1 🪙)
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</motion.div>
|
||
);
|
||
}
|