main

src/app/api/media/[...path]/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * Medya dosyalarını backend'den proxy eden API route.
+ * Docker konteyner içinde INTERNAL_API_URL üzerinden backend'e ulaşır.
+ * Tarayıcı /media/... isteklerini bu route üzerinden yönlendirir.
+ *
+ * URL formatı: /api/media/[projectId]/images/[filename]
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  const { path } = await params;
+  const mediaPath = path.join('/');
+
+  // Docker içinde backend internal URL, yoksa localhost
+  const internalUrl = process.env.INTERNAL_API_URL;
+  const backendBase = internalUrl
+    ? internalUrl.replace(/\/api$/, '')
+    : 'http://localhost:3000';
+
+  const targetUrl = `${backendBase}/media/${mediaPath}`;
+
+  try {
+    const response = await fetch(targetUrl);
+
+    if (!response.ok) {
+      return new NextResponse(null, { status: response.status });
+    }
+
+    const buffer = await response.arrayBuffer();
+    const contentType = response.headers.get('content-type') || 'application/octet-stream';
+
+    return new NextResponse(buffer, {
+      status: 200,
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=86400, immutable',
+        'Cross-Origin-Resource-Policy': 'cross-origin',
+      },
+    });
+  } catch (error) {
+    console.error(`Media proxy error: ${targetUrl}`, error);
+    return new NextResponse(null, { status: 502 });
+  }
+}

src/components/project/scene-card.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Pencil, Check, X, RefreshCw, Clock, ArrowRight, Wand2, Image as ImageIcon, Mic, Maximize2, Sparkles } from 'lucide-react';
 
@@ -43,6 +44,9 @@ export function SceneCard({
   const [editNarration, setEditNarration] = useState(scene.narrationText);
   const [editVisual, setEditVisual] = useState(scene.visualPrompt);
   const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true); }, []);
 
   const handleSave = () => {
     onUpdate?.(scene.id, {
@@ -97,8 +101,7 @@ export function SceneCard({
             <div className="flex items-center gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
               <button
                 onClick={() => setIsEditing(true)}
-                disabled={!isEditable || isRendering}
+                className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:text-violet-400 hover:bg-violet-500/10 transition-colors"
-                className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:text-violet-400 hover:bg-violet-500/10 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
                 title="Düzenle"
               >
                 <Pencil size={13} />
@@ -268,7 +271,8 @@ export function SceneCard({
       {/* Sahne bağlantı çizgisi */}
       <div className="absolute left-7 -bottom-3 w-px h-3 bg-gradient-to-b from-[var(--color-border-faint)] to-transparent" />
       
-      {/* Lightbox Modal */}
+      {/* Lightbox Modal — Portal ile document.body'e render (overflow clipping önleme) */}
+      {mounted && createPortal(
         <AnimatePresence>
           {lightboxOpen && thumbnailAsset?.url && (
             <motion.div
@@ -276,27 +280,29 @@ export function SceneCard({
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
               onClick={() => setLightboxOpen(false)}
-            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 md:p-10 cursor-zoom-out"
+              className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/85 backdrop-blur-md p-4 md:p-10 cursor-zoom-out"
             >
               <motion.img 
-              initial={{ scale: 0.9, opacity: 0 }}
+                initial={{ scale: 0.85, opacity: 0 }}
                 animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.9, opacity: 0 }}
+                exit={{ scale: 0.85, opacity: 0 }}
                 transition={{ type: "spring", damping: 25, stiffness: 300 }}
                 src={thumbnailAsset.url}
                 alt="Fullscreen Scene"
-              className="max-w-full max-h-full object-contain rounded-xl shadow-2xl"
+                className="max-w-[90vw] max-h-[90vh] object-contain rounded-xl shadow-2xl"
-              onClick={(e) => e.stopPropagation()} // Click image prevents closing
+                onClick={(e) => e.stopPropagation()}
               />
               <button 
                 onClick={() => setLightboxOpen(false)}
-              className="absolute top-6 right-6 p-2 rounded-full bg-black/50 text-white/70 hover:text-white hover:bg-black/70 transition-colors"
+                className="absolute top-6 right-6 p-2.5 rounded-full bg-black/60 text-white/80 hover:text-white hover:bg-black/80 transition-colors"
               >
                 <X size={24} />
               </button>
             </motion.div>
           )}
-      </AnimatePresence>
+        </AnimatePresence>,
+        document.body
+      )}
     </motion.div>
   );
 }