generated from fahricansecer/boilerplate-fe
This commit is contained in:
Harun CAN
@@ -14,7 +14,7 @@ import {
|
||||
} from "recharts";
|
||||
import { useDashboardStats } from "@/hooks/use-api";
|
||||
|
||||
const COLORS = ["#ffffff", "#a3a3a3", "#525252", "#262626"];
|
||||
const COLORS = ["#06b6d4", "#8b5cf6", "#3b82f6", "#6366f1"];
|
||||
|
||||
function formatWeekData(stats: Record<string, unknown> | undefined) {
|
||||
if (!stats) {
|
||||
@@ -96,12 +96,12 @@ export function DashboardCharts() {
|
||||
<AreaChart data={weekData}>
|
||||
<defs>
|
||||
<linearGradient id="colorProjects" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#ffffff" stopOpacity={0.2} />
|
||||
<stop offset="95%" stopColor="#ffffff" stopOpacity={0} />
|
||||
<stop offset="5%" stopColor="#06b6d4" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#06b6d4" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorVideos" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#737373" stopOpacity={0.2} />
|
||||
<stop offset="95%" stopColor="#737373" stopOpacity={0} />
|
||||
<stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<XAxis
|
||||
@@ -123,16 +123,16 @@ export function DashboardCharts() {
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="projects"
|
||||
stroke="#ffffff"
|
||||
strokeWidth={2}
|
||||
stroke="#06b6d4"
|
||||
strokeWidth={3}
|
||||
fill="url(#colorProjects)"
|
||||
name="Projeler"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="videos"
|
||||
stroke="#737373"
|
||||
strokeWidth={2}
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth={3}
|
||||
fill="url(#colorVideos)"
|
||||
name="Videolar"
|
||||
/>
|
||||
@@ -141,56 +141,65 @@ export function DashboardCharts() {
|
||||
</div>
|
||||
|
||||
{/* Proje Durumu */}
|
||||
<div className="card-surface p-6 md:p-8">
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-secondary)] mb-6">
|
||||
<div className="card-surface p-6 md:p-8 flex flex-col">
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-secondary)] mb-2">
|
||||
Proje Durumu
|
||||
</h3>
|
||||
{pieData.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-[220px] text-sm text-[var(--color-text-ghost)]">
|
||||
<div className="flex flex-1 items-center justify-center text-sm text-[var(--color-text-ghost)]">
|
||||
Henüz proje verisi yok
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-6">
|
||||
<ResponsiveContainer width="50%" height={220}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={pieData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={80}
|
||||
innerRadius={50}
|
||||
dataKey="value"
|
||||
stroke="var(--color-bg-surface)"
|
||||
strokeWidth={2}
|
||||
>
|
||||
{pieData.map((_: unknown, index: number) => (
|
||||
<Cell key={index} fill={COLORS[index % COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "rgba(10,10,10,0.95)",
|
||||
border: "1px solid rgba(255,255,255,0.1)",
|
||||
borderRadius: 12,
|
||||
fontSize: 13,
|
||||
color: "#fff",
|
||||
}}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<div className="space-y-2">
|
||||
{pieData.map((item: { name: string; value: number }, idx: number) => (
|
||||
<div key={item.name} className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-2.5 h-2.5 rounded-full"
|
||||
style={{ backgroundColor: COLORS[idx % COLORS.length] }}
|
||||
<div className="flex flex-1 flex-row items-center justify-center gap-4 sm:gap-8 min-h-[220px]">
|
||||
<div className="w-[160px] h-[160px] sm:w-[200px] sm:h-[200px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={pieData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius="85%"
|
||||
innerRadius="65%"
|
||||
dataKey="value"
|
||||
stroke="var(--color-bg-surface)"
|
||||
strokeWidth={3}
|
||||
paddingAngle={4}
|
||||
>
|
||||
{pieData.map((_: unknown, index: number) => (
|
||||
<Cell key={index} fill={COLORS[index % COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "rgba(10,10,10,0.95)",
|
||||
border: "1px solid rgba(255,255,255,0.1)",
|
||||
borderRadius: 12,
|
||||
fontSize: 13,
|
||||
color: "#fff",
|
||||
boxShadow: "0 4px 20px rgba(0,0,0,0.3)"
|
||||
}}
|
||||
itemStyle={{
|
||||
color: "#e5e5e5"
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs text-[var(--color-text-muted)]">
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="text-xs font-bold text-[var(--color-text-secondary)] ml-auto">
|
||||
{item.value}
|
||||
</span>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center space-y-3">
|
||||
{pieData.map((item: { name: string; value: number }, idx: number) => (
|
||||
<div key={item.name} className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full shadow-sm"
|
||||
style={{ backgroundColor: COLORS[idx % COLORS.length], boxShadow: `0 0 8px ${COLORS[idx % COLORS.length]}80` }}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm text-[var(--color-text-muted)] font-medium leading-none mb-1">
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="text-base font-bold text-[var(--color-text-primary)] leading-none">
|
||||
{item.value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
Loader2,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Link2,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
|
||||
import { useCreateFromYoutube } from "@/hooks/use-api";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const YoutubeIcon = ({ size = 20, className = "" }: { size?: number; className?: string }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
interface YoutubeImportCardProps {
|
||||
onProjectCreated?: (projectId: string) => void;
|
||||
}
|
||||
|
||||
export function YoutubeImportCard({ onProjectCreated }: YoutubeImportCardProps) {
|
||||
const [youtubeUrl, setYoutubeUrl] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [createdProject, setCreatedProject] = useState<{ id: string; title: string } | null>(null);
|
||||
|
||||
const createFromYoutube = useCreateFromYoutube();
|
||||
|
||||
const isValidUrl = /https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/.+/.test(youtubeUrl);
|
||||
|
||||
const handleCreate = useCallback(async () => {
|
||||
if (!youtubeUrl.trim() || !isValidUrl) return;
|
||||
|
||||
setError(null);
|
||||
try {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const project: any = await createFromYoutube.mutateAsync({
|
||||
youtubeUrl: youtubeUrl.trim(),
|
||||
language: "tr",
|
||||
aspectRatio: "PORTRAIT_9_16",
|
||||
videoStyle: "CINEMATIC",
|
||||
targetDuration: 60,
|
||||
});
|
||||
|
||||
setCreatedProject({ id: project.id, title: project.title || "YouTube Projesi" });
|
||||
|
||||
if (onProjectCreated) {
|
||||
onProjectCreated(project.id);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err?.response?.data?.message || "YouTube videosu işlenirken bir hata oluştu.");
|
||||
}
|
||||
}, [youtubeUrl, isValidUrl, createFromYoutube, onProjectCreated]);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleCreate();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card-surface overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 p-4 md:p-5 border-b border-[var(--color-border-faint)]">
|
||||
<div className="w-9 h-9 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] flex items-center justify-center">
|
||||
<YoutubeIcon size={18} className="text-red-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-[family-name:var(--font-display)] text-sm font-semibold">
|
||||
YouTube Import
|
||||
</h3>
|
||||
<p className="text-[11px] text-[var(--color-text-ghost)]">
|
||||
YouTube → Video pipeline
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* URL Input */}
|
||||
<div className="p-4 md:p-5 space-y-4">
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-ghost)]">
|
||||
<Link2 size={16} />
|
||||
</div>
|
||||
<input
|
||||
type="url"
|
||||
value={youtubeUrl}
|
||||
onChange={(e) => {
|
||||
setYoutubeUrl(e.target.value);
|
||||
setError(null);
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="https://youtube.com/watch?v=... veya youtu.be/..."
|
||||
className="w-full h-11 pl-10 pr-28 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:border-red-500/50 focus:ring-1 focus:ring-red-500/25 outline-none transition-all"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={!isValidUrl || createFromYoutube.isPending}
|
||||
className={cn(
|
||||
"absolute right-1.5 top-1/2 -translate-y-1/2 h-8 px-3 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5",
|
||||
isValidUrl && !createFromYoutube.isPending
|
||||
? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] hover:bg-neutral-800 shadow-sm"
|
||||
: "bg-[var(--color-bg-surface)] text-[var(--color-text-ghost)] cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
{createFromYoutube.isPending ? (
|
||||
<>
|
||||
<Loader2 size={13} className="animate-spin" />
|
||||
Üretiliyor
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles size={13} />
|
||||
Oluştur
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
<AnimatePresence mode="wait">
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -8, height: 0 }}
|
||||
animate={{ opacity: 1, y: 0, height: "auto" }}
|
||||
exit={{ opacity: 0, y: -8, height: 0 }}
|
||||
className="flex items-center gap-2 text-xs text-rose-400 bg-rose-500/10 border border-rose-500/20 rounded-lg px-3 py-2 mt-2"
|
||||
>
|
||||
<XCircle size={14} />
|
||||
{error}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Success */}
|
||||
<AnimatePresence>
|
||||
{createdProject && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="flex items-center gap-3 p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/25 mt-2"
|
||||
>
|
||||
<CheckCircle2 size={18} className="text-emerald-400 shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-emerald-300">
|
||||
Proje oluşturuldu!
|
||||
</p>
|
||||
<p className="text-[11px] text-emerald-400/70 truncate">
|
||||
{createdProject.title}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (onProjectCreated) onProjectCreated(createdProject.id);
|
||||
}}
|
||||
className="text-[11px] text-emerald-400 hover:text-emerald-300 font-medium transition-colors whitespace-nowrap"
|
||||
>
|
||||
Görüntüle →
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Home, FolderOpen, LayoutGrid, Settings, Sparkles, AtSign, ShieldCheck, LogOut, Link2, FileText, Activity } from "lucide-react";
|
||||
import { Home, FolderOpen, LayoutGrid, Settings, Sparkles, AtSign, ShieldCheck, LogOut, Link2, FileText, Activity, Wrench } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useCreditBalance, useCurrentUser } from "@/hooks/use-api";
|
||||
@@ -11,13 +11,11 @@ import { signOut } from "next-auth/react";
|
||||
|
||||
const navItems = [
|
||||
{ href: "/dashboard", icon: Home, label: "Ana Sayfa" },
|
||||
{ href: "/dashboard/create-project", icon: Sparkles, label: "Yeni Proje Üret" },
|
||||
{ href: "/dashboard/projects", icon: FolderOpen, label: "Projeler" },
|
||||
{ href: "/dashboard/render-queue", icon: Activity, label: "Render Monitör" },
|
||||
{ href: "/dashboard/text-to-video", icon: FileText, label: "Metin → Video" },
|
||||
{ href: "/dashboard/x-to-video", icon: AtSign, label: "X → Video" },
|
||||
{ href: "/dashboard/youtube-to-video", icon: Link2, label: "YT → Video" },
|
||||
{ href: "/dashboard/document-to-video", icon: FileText, label: "Belge → Video" },
|
||||
{ href: "/dashboard/templates", icon: LayoutGrid, label: "Şablonlar" },
|
||||
{ href: "/dashboard/tools", icon: Wrench, label: "Araçlar" },
|
||||
{ href: "/dashboard/settings", icon: Settings, label: "Ayarlar" },
|
||||
];
|
||||
|
||||
|
||||
@@ -74,23 +74,23 @@ export function SceneCard({
|
||||
transition={{ delay: scene.order * 0.05, duration: 0.4 }}
|
||||
className="relative group"
|
||||
>
|
||||
<div className="card-surface p-4 md:p-5 hover:border-neutral-500/20 transition-all duration-300">
|
||||
<div className="card-surface p-5 md:p-6 hover:border-neutral-500/30 transition-all duration-300 shadow-sm">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-8 h-8 rounded-lg bg-[var(--color-bg-elevated)] flex items-center justify-center border border-[var(--color-border-faint)]">
|
||||
<span className="text-xs font-bold text-neutral-400">{scene.order}</span>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500/20 to-cyan-500/20 flex items-center justify-center border border-white/10 shadow-sm">
|
||||
<span className="text-sm font-bold text-[var(--color-text-primary)]">{scene.order}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[var(--color-text-primary)]">
|
||||
<h4 className="text-base font-bold text-[var(--color-text-primary)]">
|
||||
{scene.title || `Sahne ${scene.order}`}
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="flex items-center gap-1 text-[10px] text-[var(--color-text-ghost)]">
|
||||
<Clock size={10} /> {scene.duration}s
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<span className="flex items-center gap-1 text-xs font-medium text-[var(--color-text-muted)] bg-[var(--color-bg-elevated)] px-2 py-0.5 rounded-md">
|
||||
<Clock size={12} className="text-violet-400" /> {scene.duration}s
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-[10px] text-[var(--color-text-ghost)]">
|
||||
<ArrowRight size={10} /> {scene.transitionType.toLowerCase()}
|
||||
<span className="flex items-center gap-1 text-xs font-medium text-[var(--color-text-muted)] bg-[var(--color-bg-elevated)] px-2 py-0.5 rounded-md">
|
||||
<ArrowRight size={12} className="text-cyan-400" /> {scene.transitionType.toLowerCase()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,21 +98,21 @@ export function SceneCard({
|
||||
|
||||
{/* Aksiyon butonları */}
|
||||
{!isEditing && (
|
||||
<div className="flex items-center gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
|
||||
<div className="flex items-center gap-1.5 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:text-neutral-300 hover:bg-neutral-800 transition-colors"
|
||||
className="w-8 h-8 rounded-xl flex items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-elevated)] transition-all"
|
||||
title="Düzenle"
|
||||
>
|
||||
<Pencil size={13} />
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onRegenerate?.(scene.id)}
|
||||
disabled={!isEditable || isRendering || isRegenerating}
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:text-neutral-300 hover:bg-neutral-800 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
className="w-8 h-8 rounded-xl flex items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-elevated)] transition-all disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
title="AI ile yeniden üret"
|
||||
>
|
||||
<RefreshCw size={13} className={isRegenerating ? 'animate-spin' : ''} />
|
||||
<RefreshCw size={14} className={isRegenerating ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -125,77 +125,67 @@ export function SceneCard({
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="space-y-3"
|
||||
className="space-y-4"
|
||||
>
|
||||
{/* Narrasyon düzenleme */}
|
||||
<div>
|
||||
<label className="flex items-center gap-1.5 text-xs font-medium text-[var(--color-text-muted)] mb-1.5">
|
||||
<Mic size={12} /> Narrasyon
|
||||
<label className="flex items-center gap-1.5 text-sm font-medium text-violet-400 mb-2">
|
||||
<Mic size={14} /> Narrasyon
|
||||
</label>
|
||||
<textarea
|
||||
value={editNarration}
|
||||
onChange={(e) => setEditNarration(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 rounded-lg bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] resize-none focus:outline-none focus:ring-1 focus:ring-neutral-500/40 transition-all"
|
||||
className="w-full px-4 py-3 rounded-xl bg-[var(--color-bg-deep)] border border-violet-500/30 text-base font-medium text-[var(--color-text-primary)] resize-none focus:outline-none focus:border-violet-500/60 focus:ring-1 focus:ring-violet-500/60 transition-all shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Görsel prompt düzenleme */}
|
||||
<div>
|
||||
<label className="flex items-center gap-1.5 text-xs font-medium text-[var(--color-text-muted)] mb-1.5">
|
||||
<ImageIcon size={12} /> Görsel Prompt
|
||||
<label className="flex items-center gap-1.5 text-sm font-medium text-cyan-400 mb-2">
|
||||
<ImageIcon size={14} /> Görsel Prompt
|
||||
</label>
|
||||
<textarea
|
||||
value={editVisual}
|
||||
onChange={(e) => setEditVisual(e.target.value)}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 rounded-lg bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-secondary)] resize-none focus:outline-none focus:ring-1 focus:ring-neutral-500/40 transition-all"
|
||||
rows={3}
|
||||
className="w-full px-4 py-3 rounded-xl bg-[var(--color-bg-deep)] border border-cyan-500/30 text-sm font-medium text-cyan-50 resize-none focus:outline-none focus:border-cyan-500/60 focus:ring-1 focus:ring-cyan-500/60 transition-all shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Kaydet/İptal */}
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-xs font-medium hover:bg-neutral-800 transition-colors"
|
||||
className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-gradient-to-r from-violet-600 to-cyan-500 text-white text-sm font-medium hover:shadow-[0_0_15px_rgba(34,211,238,0.4)] hover:scale-[1.02] transition-all"
|
||||
>
|
||||
<Check size={13} /> Kaydet
|
||||
<Check size={14} /> Kaydet
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[var(--color-bg-elevated)] text-[var(--color-text-muted)] text-xs font-medium hover:text-[var(--color-text-secondary)] transition-colors"
|
||||
className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-[var(--color-bg-elevated)] text-[var(--color-text-muted)] text-sm font-medium hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-surface)] transition-all"
|
||||
>
|
||||
<X size={13} /> İptal
|
||||
<X size={14} /> İptal
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="viewing" className="space-y-2.5">
|
||||
<motion.div key="viewing" className="space-y-4">
|
||||
{/* Narrasyon */}
|
||||
<div className="flex gap-2">
|
||||
<div className="w-5 h-5 rounded-md bg-[var(--color-bg-elevated)] flex items-center justify-center shrink-0 mt-0.5 border border-[var(--color-border-faint)]">
|
||||
<Mic size={11} className="text-neutral-400" />
|
||||
<div className="flex gap-3">
|
||||
<div className="w-6 h-6 rounded-md bg-violet-500/10 flex items-center justify-center shrink-0 mt-1 border border-violet-500/20">
|
||||
<Mic size={14} className="text-violet-400" />
|
||||
</div>
|
||||
<p className="text-sm text-[var(--color-text-secondary)] leading-relaxed">
|
||||
{scene.narrationText}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Görsel Prompt */}
|
||||
<div className="flex gap-2">
|
||||
<div className="w-5 h-5 rounded-md bg-[var(--color-bg-elevated)] flex items-center justify-center shrink-0 mt-0.5 border border-[var(--color-border-faint)]">
|
||||
<ImageIcon size={11} className="text-neutral-400" />
|
||||
</div>
|
||||
<div className="flex-1 group/prompt relative">
|
||||
<p className="text-xs text-[var(--color-text-ghost)] leading-relaxed italic pr-6">
|
||||
{scene.visualPrompt}
|
||||
<div className="flex-1 group/narration relative bg-violet-900/10 p-3.5 md:p-5 rounded-xl border border-violet-500/20 hover:border-violet-500/40 transition-colors">
|
||||
<p className="text-lg md:text-xl font-[family-name:var(--font-display)] text-[var(--color-text-primary)] font-medium leading-relaxed tracking-wide pr-8">
|
||||
{scene.narrationText}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(scene.visualPrompt);
|
||||
navigator.clipboard.writeText(scene.narrationText);
|
||||
}}
|
||||
className="absolute top-0 right-0 p-1 opacity-0 group-hover/prompt:opacity-100 transition-opacity bg-[var(--color-bg-elevated)] rounded-md text-[var(--color-text-muted)] hover:text-neutral-300 hover:bg-neutral-800"
|
||||
title="Prompt'u Kopyala"
|
||||
className="absolute top-2 right-2 p-1.5 opacity-0 group-hover/narration:opacity-100 transition-opacity bg-violet-500/20 rounded-md text-violet-300 hover:text-violet-100 hover:bg-violet-500/40"
|
||||
title="Metni Kopyala"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
|
||||
@@ -205,62 +195,89 @@ export function SceneCard({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Görsel / Upscale Alanı */}
|
||||
<div className="flex flex-col gap-2 pt-2">
|
||||
{thumbnailAsset?.url && !isGeneratingImage ? (
|
||||
<div className="relative group/thumb rounded-lg overflow-hidden border border-[var(--color-border-faint)] aspect-video max-w-sm">
|
||||
<img
|
||||
src={thumbnailAsset.url}
|
||||
alt="Scene Thumbnail"
|
||||
className="w-full h-full object-cover cursor-pointer hover:scale-105 transition-transform duration-500"
|
||||
onClick={() => setLightboxOpen(true)}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover/thumb:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
|
||||
<Maximize2 size={24} className="text-white" />
|
||||
</div>
|
||||
{/* Görsel Prompt ve Görsel Alanı */}
|
||||
<div className="flex flex-col md:flex-row gap-4 pt-2">
|
||||
{/* Sol: Prompt */}
|
||||
<div className="flex gap-3 flex-1">
|
||||
<div className="w-6 h-6 rounded-md bg-cyan-500/10 flex items-center justify-center shrink-0 mt-1 border border-cyan-500/20">
|
||||
<ImageIcon size={14} className="text-cyan-400" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg border border-dashed border-[var(--color-border-faint)] bg-[var(--color-bg-deep)] aspect-video max-w-sm flex flex-col items-center justify-center p-4 relative overflow-hidden">
|
||||
{isGeneratingImage ? (
|
||||
<div className="flex flex-col items-center justify-center animate-in fade-in zoom-in duration-300">
|
||||
<div className="relative w-12 h-12 mb-3">
|
||||
<div className="absolute inset-0 rounded-full border-2 border-emerald-500/20"></div>
|
||||
<div className="absolute inset-0 rounded-full border-2 border-emerald-500 border-t-transparent animate-spin"></div>
|
||||
<Sparkles size={16} className="absolute inset-0 m-auto text-emerald-400 animate-pulse" />
|
||||
</div>
|
||||
<p className="text-xs font-medium text-emerald-400 text-center animate-pulse">
|
||||
AI Görsel Üretiyor...
|
||||
</p>
|
||||
<div className="flex-1 group/prompt relative bg-cyan-900/10 p-3.5 rounded-xl border border-cyan-500/20 hover:border-cyan-500/40 transition-colors">
|
||||
<p className="text-sm font-medium text-cyan-50 leading-relaxed pr-8">
|
||||
{scene.visualPrompt}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(scene.visualPrompt);
|
||||
}}
|
||||
className="absolute top-2 right-2 p-1.5 opacity-0 group-hover/prompt:opacity-100 transition-opacity bg-cyan-500/20 rounded-md text-cyan-300 hover:text-cyan-100 hover:bg-cyan-500/40"
|
||||
title="Prompt'u Kopyala"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
|
||||
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sağ: Görsel Önizleme ve Butonlar */}
|
||||
<div className="flex flex-col gap-2 w-full md:w-64 shrink-0">
|
||||
{thumbnailAsset?.url && !isGeneratingImage ? (
|
||||
<div className="relative group/thumb rounded-lg overflow-hidden border border-[var(--color-border-faint)] aspect-video w-full">
|
||||
<img
|
||||
src={thumbnailAsset.url}
|
||||
alt="Scene Thumbnail"
|
||||
className="w-full h-full object-cover cursor-pointer hover:scale-105 transition-transform duration-500"
|
||||
onClick={() => setLightboxOpen(true)}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover/thumb:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
|
||||
<Maximize2 size={24} className="text-white" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ImageIcon size={24} className="text-[var(--color-text-ghost)] mb-2" />
|
||||
<p className="text-xs text-[var(--color-text-muted)] text-center">Görsel Henüz Üretilmedi</p>
|
||||
</>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg border border-dashed border-[var(--color-border-faint)] bg-[var(--color-bg-deep)] aspect-video w-full flex flex-col items-center justify-center p-4 relative overflow-hidden">
|
||||
{isGeneratingImage ? (
|
||||
<div className="flex flex-col items-center justify-center animate-in fade-in zoom-in duration-300">
|
||||
<div className="relative w-12 h-12 mb-3">
|
||||
<div className="absolute inset-0 rounded-full border-2 border-emerald-500/20"></div>
|
||||
<div className="absolute inset-0 rounded-full border-2 border-emerald-500 border-t-transparent animate-spin"></div>
|
||||
<Sparkles size={16} className="absolute inset-0 m-auto text-emerald-400 animate-pulse" />
|
||||
</div>
|
||||
<p className="text-xs font-medium text-emerald-400 text-center animate-pulse">
|
||||
AI Görsel Üretiyor...
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ImageIcon size={24} className="text-[var(--color-text-ghost)] mb-2" />
|
||||
<p className="text-xs text-[var(--color-text-muted)] text-center">Görsel Henüz Üretilmedi</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Görsel üretim butonları */}
|
||||
<div className="flex items-center gap-2 mt-1 flex-wrap">
|
||||
<button
|
||||
onClick={() => onGenerateImage?.(scene.id, scene.visualPrompt)}
|
||||
disabled={isGeneratingImage || isUpscalingImage}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald-500/15 text-emerald-400 text-xs font-medium hover:bg-emerald-500/25 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
||||
>
|
||||
{isGeneratingImage ? <RefreshCw size={13} className="animate-spin" /> : <ImageIcon size={13} />}
|
||||
{thumbnailAsset ? "Yeniden Üret" : "Görsel Üret"}
|
||||
</button>
|
||||
{thumbnailAsset?.url && (
|
||||
<button
|
||||
onClick={() => onUpscaleImage?.(scene.id)}
|
||||
disabled={isUpscalingImage || isGeneratingImage}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg bg-orange-500/15 text-orange-400 text-xs font-medium hover:bg-orange-500/25 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
||||
>
|
||||
{isUpscalingImage ? <RefreshCw size={13} className="animate-spin" /> : <Wand2 size={13} />}
|
||||
Upscale (4K)
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Görsel üretim butonları — tüm projelerde her zaman göster, render sürecinde disable et */}
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<button
|
||||
onClick={() => onGenerateImage?.(scene.id, scene.visualPrompt)}
|
||||
disabled={isGeneratingImage || isUpscalingImage}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald-500/15 text-emerald-400 text-xs font-medium hover:bg-emerald-500/25 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isGeneratingImage ? <RefreshCw size={13} className="animate-spin" /> : <ImageIcon size={13} />}
|
||||
{thumbnailAsset ? "Görseli Yeniden Üret" : "Görsel Üret"}
|
||||
</button>
|
||||
{thumbnailAsset?.url && (
|
||||
<button
|
||||
onClick={() => onUpscaleImage?.(scene.id)}
|
||||
disabled={isUpscalingImage || isGeneratingImage}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-orange-500/15 text-orange-400 text-xs font-medium hover:bg-orange-500/25 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isUpscalingImage ? <RefreshCw size={13} className="animate-spin" /> : <Wand2 size={13} />}
|
||||
Upscale (4K)
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -304,25 +304,26 @@ export function DurationSelector({
|
||||
<input
|
||||
type="range"
|
||||
min={15}
|
||||
max={180}
|
||||
max={900}
|
||||
step={5}
|
||||
value={value}
|
||||
onChange={(e) => onChange(Number(e.target.value))}
|
||||
className={cn(
|
||||
"w-full h-1.5 rounded-full bg-[var(--color-bg-elevated)] appearance-none cursor-pointer",
|
||||
"w-full h-2 rounded-full bg-neutral-200 dark:bg-neutral-700 border border-neutral-300 dark:border-neutral-600 appearance-none cursor-pointer outline-none",
|
||||
"[&::-webkit-slider-thumb]:appearance-none",
|
||||
"[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",
|
||||
"[&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6",
|
||||
"[&::-webkit-slider-thumb]:rounded-full",
|
||||
"[&::-webkit-slider-thumb]:bg-[var(--color-bg-inverted)]",
|
||||
"[&::-webkit-slider-thumb]:shadow-md",
|
||||
"[&::-webkit-slider-thumb]:bg-cyan-400",
|
||||
"[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white",
|
||||
"[&::-webkit-slider-thumb]:shadow-[0_0_10px_rgba(34,211,238,0.6)]",
|
||||
"[&::-webkit-slider-thumb]:cursor-grab"
|
||||
)}
|
||||
/>
|
||||
<div className="flex justify-between text-[10px] text-[var(--color-text-ghost)] mt-1">
|
||||
<div className="flex justify-between text-[10px] text-[var(--color-text-ghost)] mt-2">
|
||||
<span>15s</span>
|
||||
<span>60s</span>
|
||||
<span>120s</span>
|
||||
<span>180s</span>
|
||||
<span>900s</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -348,19 +349,19 @@ export function AspectRatioSelector({
|
||||
key={ar.id}
|
||||
onClick={() => onChange(ar.id)}
|
||||
className={cn(
|
||||
"flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl text-xs transition-all",
|
||||
"flex-1 flex flex-col items-center gap-1.5 py-4 rounded-xl text-xs transition-all duration-300 relative overflow-hidden",
|
||||
value === ar.id
|
||||
? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)]"
|
||||
? "bg-gradient-to-b from-cyan-500/10 to-transparent border border-cyan-400/50 shadow-[0_0_20px_rgba(34,211,238,0.15)] text-cyan-400"
|
||||
: "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)] hover:border-[var(--color-border-default)]"
|
||||
)}
|
||||
>
|
||||
<Icon size={20} />
|
||||
<span className="font-semibold">{ar.label}</span>
|
||||
<Icon size={24} className={value === ar.id ? "drop-shadow-[0_0_8px_rgba(34,211,238,0.5)]" : ""} />
|
||||
<span className="font-semibold text-[13px]">{ar.label}</span>
|
||||
<span
|
||||
className={cn(
|
||||
"text-[10px]",
|
||||
value === ar.id
|
||||
? "text-[var(--color-text-inverted)]/70"
|
||||
? "text-cyan-400/70"
|
||||
: "text-[var(--color-text-ghost)]"
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user