diff options
Diffstat (limited to 'apps/web')
| -rw-r--r-- | apps/web/src/app/layout.tsx | 2 | ||||
| -rw-r--r-- | apps/web/src/components/development-debug.tsx | 107 | ||||
| -rw-r--r-- | apps/web/src/components/editor/preview-panel.tsx | 44 |
3 files changed, 109 insertions, 44 deletions
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index ee045647..8188d31b 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -5,6 +5,7 @@ import Script from "next/script"; import "./globals.css"; import { Toaster } from "../components/ui/sonner"; import { TooltipProvider } from "../components/ui/tooltip"; +import { DevelopmentDebug } from "../components/development-debug"; import { baseMetaData } from "./metadata"; const inter = Inter({ @@ -27,6 +28,7 @@ export default function RootLayout({ {children} <Analytics /> <Toaster /> + <DevelopmentDebug /> <Script src="https://app.databuddy.cc/databuddy.js" strategy="afterInteractive" diff --git a/apps/web/src/components/development-debug.tsx b/apps/web/src/components/development-debug.tsx new file mode 100644 index 00000000..aef69999 --- /dev/null +++ b/apps/web/src/components/development-debug.tsx @@ -0,0 +1,107 @@ +"use client";
+
+import {
+ useTimelineStore,
+ type TimelineClip,
+ type TimelineTrack,
+} from "@/stores/timeline-store";
+import { useMediaStore, type MediaItem } from "@/stores/media-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+// Only show in development
+const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development";
+
+interface ActiveClip {
+ clip: TimelineClip;
+ track: TimelineTrack;
+ mediaItem: MediaItem | null;
+}
+
+export function DevelopmentDebug() {
+ const { tracks } = useTimelineStore();
+ const { mediaItems } = useMediaStore();
+ const { currentTime } = usePlaybackStore();
+ const [showDebug, setShowDebug] = useState(false);
+
+ // Don't render anything in production
+ if (!SHOW_DEBUG_INFO) return null;
+
+ // Get active clips at current time
+ const getActiveClips = (): ActiveClip[] => {
+ const activeClips: ActiveClip[] = [];
+
+ tracks.forEach((track) => {
+ track.clips.forEach((clip) => {
+ const clipStart = clip.startTime;
+ const clipEnd =
+ clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+ if (currentTime >= clipStart && currentTime < clipEnd) {
+ const mediaItem =
+ clip.mediaId === "test"
+ ? null // Test clips don't have a real media item
+ : mediaItems.find((item) => item.id === clip.mediaId) || null;
+
+ activeClips.push({ clip, track, mediaItem });
+ }
+ });
+ });
+
+ return activeClips;
+ };
+
+ const activeClips = getActiveClips();
+
+ return (
+ <div className="fixed bottom-4 right-4 z-50">
+ <div className="flex flex-col items-end gap-2">
+ {/* Toggle Button */}
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => setShowDebug(!showDebug)}
+ className="text-xs backdrop-blur-md bg-background/80 border-border/50"
+ >
+ Debug {showDebug ? "ON" : "OFF"}
+ </Button>
+
+ {/* Debug Info Panel */}
+ {showDebug && (
+ <div className="backdrop-blur-md bg-background/90 border border-border/50 rounded-lg p-3 max-w-sm">
+ <div className="text-xs font-medium mb-2 text-foreground">
+ Active Clips ({activeClips.length})
+ </div>
+ <div className="space-y-1 max-h-40 overflow-y-auto">
+ {activeClips.map((clipData, index) => (
+ <div
+ key={clipData.clip.id}
+ className="flex items-center gap-2 px-2 py-1 bg-muted/60 rounded text-xs"
+ >
+ <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4 flex-shrink-0">
+ {index + 1}
+ </span>
+ <div className="min-w-0 flex-1">
+ <div className="truncate">{clipData.clip.name}</div>
+ <div className="text-muted-foreground text-[10px]">
+ {clipData.mediaItem?.type || "test"}
+ </div>
+ </div>
+ </div>
+ ))}
+ {activeClips.length === 0 && (
+ <div className="text-muted-foreground text-xs py-2 text-center">
+ No active clips
+ </div>
+ )}
+ </div>
+ <div className="mt-2 pt-2 border-t border-border/30 text-[10px] text-muted-foreground">
+ Time: {currentTime.toFixed(2)}s
+ </div>
+ </div>
+ )}
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 5ee57487..b68e5aa6 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -12,9 +12,6 @@ import { Button } from "@/components/ui/button"; import { Play, Pause, Volume2, VolumeX } from "lucide-react"; import { useState, useRef, useEffect } from "react"; -// Debug flag - set to false to hide active clips info -const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development"; - interface ActiveClip { clip: TimelineClip; track: TimelineTrack; @@ -27,7 +24,6 @@ export function PreviewPanel() { const { isPlaying, toggle, currentTime, muted, toggleMute, volume } = usePlaybackStore(); const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 }); - const [showDebug, setShowDebug] = useState(SHOW_DEBUG_INFO); const previewRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null); const [previewDimensions, setPreviewDimensions] = useState({ @@ -197,18 +193,6 @@ export function PreviewPanel() { ))} </select> - {/* Debug Toggle - Only show in development */} - {SHOW_DEBUG_INFO && ( - <Button - variant="text" - size="sm" - onClick={() => setShowDebug(!showDebug)} - className="text-xs" - > - Debug {showDebug ? "ON" : "OFF"} - </Button> - )} - <Button variant="outline" size="sm" @@ -257,34 +241,6 @@ export function PreviewPanel() { )} </div> </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> ); } |