From e29e0892ac92402dc6258aed2d0bc7e8cc5085b7 Mon Sep 17 00:00:00 2001
From: Hyteq <DerpsDer.es@gmail.com>
Date: Tue, 24 Jun 2025 08:21:36 +0300
Subject: [PATCH] debug logic for the overlaying / active clips on preview

---
 .../src/components/editor/preview-panel.tsx   | 54 +++++++++++++------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 101f1ff..5c27da5 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -8,11 +8,15 @@ import { Button } from "@/components/ui/button";
 import { Play, Pause } from "lucide-react";
 import { useState, useRef } from "react";
 
+// Debug flag - set to false to hide active clips info
+const SHOW_DEBUG_INFO = process.env.NODE_ENV === 'development';
+
 export function PreviewPanel() {
   const { tracks } = useTimelineStore();
   const { mediaItems } = useMediaStore();
   const { isPlaying, toggle, currentTime } = usePlaybackStore();
   const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
+  const [showDebug, setShowDebug] = useState(SHOW_DEBUG_INFO);
   const previewRef = useRef<HTMLDivElement>(null);
 
   // Get active clips at current time
@@ -142,6 +146,18 @@ export function PreviewPanel() {
           ))}
         </select>
 
+        {/* Debug Toggle - Only show in development */}
+        {SHOW_DEBUG_INFO && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowDebug(!showDebug)}
+            className="text-xs"
+          >
+            Debug {showDebug ? 'ON' : 'OFF'}
+          </Button>
+        )}
+
         <Button variant="outline" size="sm" onClick={toggle} className="ml-auto">
           {isPlaying ? <Pause className="h-3 w-3 mr-1" /> : <Play className="h-3 w-3 mr-1" />}
           {isPlaying ? "Pause" : "Play"}
@@ -169,23 +185,29 @@ export function PreviewPanel() {
         </div>
       </div>
 
-      {/* Info Panel */}
-      <div className="border-t bg-background p-2 flex-shrink-0">
-        <div className="text-xs font-medium mb-1">Active Clips ({activeClips.length})</div>
-        <div className="flex gap-2 overflow-x-auto">
-          {activeClips.map((clipData, index) => (
-            <div
-              key={clipData.clip.id}
-              className="flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs whitespace-nowrap"
-            >
-              <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4">
-                {index + 1}
-              </span>
-              <span>{clipData.clip.name}</span>
-            </div>
-          ))}
+      {/* Debug Info Panel - Conditionally rendered */}
+      {showDebug && (
+        <div className="border-t bg-background p-2 flex-shrink-0">
+          <div className="text-xs font-medium mb-1">Debug: Active Clips ({activeClips.length})</div>
+          <div className="flex gap-2 overflow-x-auto">
+            {activeClips.map((clipData, index) => (
+              <div
+                key={clipData.clip.id}
+                className="flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs whitespace-nowrap"
+              >
+                <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4">
+                  {index + 1}
+                </span>
+                <span>{clipData.clip.name}</span>
+                <span className="text-muted-foreground">({clipData.mediaItem?.type || 'test'})</span>
+              </div>
+            ))}
+            {activeClips.length === 0 && (
+              <span className="text-muted-foreground">No active clips</span>
+            )}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }