generated from fahricansecer/boilerplate-fe
main
Some checks failed
UI Deploy (Next-Auth Support) 🎨 / build-and-deploy (push) Has been cancelled
Some checks failed
UI Deploy (Next-Auth Support) 🎨 / build-and-deploy (push) Has been cancelled
This commit is contained in:
Harun CAN
@@ -18,7 +18,16 @@ import {
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import { useProject, useGenerateScript, useApproveAndQueue, useUpdateProject, useDeleteProject } from '@/hooks/use-api';
|
||||
import {
|
||||
useProject,
|
||||
useGenerateScript,
|
||||
useApproveAndQueue,
|
||||
useUpdateProject,
|
||||
useDeleteProject,
|
||||
useGenerateSceneImage,
|
||||
useUpscaleSceneImage,
|
||||
useRegenerateScene
|
||||
} 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';
|
||||
@@ -42,16 +51,61 @@ const STATUS_MAP: Record<string, { label: string; color: string; icon: React.Ele
|
||||
FAILED: { label: 'Başarısız', color: 'text-red-400', icon: AlertCircle, bgClass: 'bg-red-500/10 border-red-500/20' },
|
||||
};
|
||||
|
||||
const STYLE_LABELS: Record<string, string> = {
|
||||
CINEMATIC: '🎬 Sinematik',
|
||||
DOCUMENTARY: '📹 Belgesel',
|
||||
EDUCATIONAL: '📚 Eğitici',
|
||||
STORYTELLING: '📖 Hikaye',
|
||||
NEWS: '📰 Haber',
|
||||
PROMOTIONAL: '📢 Tanıtım',
|
||||
ARTISTIC: '🎨 Sanatsal',
|
||||
MINIMALIST: '✨ Minimalist',
|
||||
};
|
||||
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 },
|
||||
@@ -75,6 +129,13 @@ export default function ProjectDetailPage() {
|
||||
const approveMutation = useApproveAndQueue();
|
||||
const deleteMutation = useDeleteProject();
|
||||
|
||||
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,
|
||||
@@ -93,17 +154,37 @@ export default function ProjectDetailPage() {
|
||||
// Sahne yeniden üretim
|
||||
const handleSceneRegenerate = async (sceneId: string) => {
|
||||
setRegeneratingSceneId(sceneId);
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api'}/projects/${id}/scenes/${sceneId}/regenerate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
refetch();
|
||||
} catch (err) {
|
||||
console.error('Sahne yeniden üretim hatası:', err);
|
||||
} finally {
|
||||
setRegeneratingSceneId(null);
|
||||
}
|
||||
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
|
||||
@@ -161,12 +242,24 @@ export default function ProjectDetailPage() {
|
||||
|
||||
const statusInfo = STATUS_MAP[project.status] || STATUS_MAP.DRAFT;
|
||||
const StatusIcon = statusInfo.icon;
|
||||
const isEditable = project.status === 'DRAFT' || project.status === 'FAILED';
|
||||
const isRendering = ['PENDING', 'GENERATING_MEDIA', 'RENDERING', 'GENERATING_SCRIPT'].includes(project.status);
|
||||
const isEditable = !isRendering;
|
||||
const hasScript = project.scenes && project.scenes.length > 0;
|
||||
const isRendering = ['PENDING', 'GENERATING_MEDIA', 'RENDERING'].includes(project.status);
|
||||
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 (err) {
|
||||
console.error('Üslup (Stil) değiştirme hatası:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
@@ -246,7 +339,21 @@ export default function ProjectDetailPage() {
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={12} /> {project.targetDuration}s
|
||||
</span>
|
||||
<span>{STYLE_LABELS[project.videoStyle] || project.videoStyle}</span>
|
||||
{isEditable ? (
|
||||
<select
|
||||
value={project.videoStyle}
|
||||
onChange={(e) => handleStyleChange(e.target.value)}
|
||||
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-violet-500/50 cursor-pointer"
|
||||
>
|
||||
{videoStyles.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.emoji} {s.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<span>{currentStyle ? `${currentStyle.emoji} ${currentStyle.label}` : project.videoStyle}</span>
|
||||
)}
|
||||
<span className="uppercase text-[10px] tracking-wider">{project.language}</span>
|
||||
<span className="text-[10px]">
|
||||
{new Date(project.createdAt).toLocaleDateString('tr-TR', {
|
||||
|
||||
Reference in New Issue
Block a user