diff options
| author | Priyankar Pal <88102392+priyankarpal@users.noreply.github.com> | 2025-06-26 11:35:55 +0530 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-06-26 11:35:55 +0530 |
| commit | 4ed9858725ebfbc95f6e470e118b37aa1079f7d0 (patch) | |
| tree | ae63f6e77cf738cab0a56e9eb865839742b9d163 /apps/web/src/components/development-debug.tsx | |
| parent | c322ad1124aea02169b2094498cac5b6da54dd5b (diff) | |
| parent | a8d6bbd03a4c5a89075d75ea37b61afa5efe373a (diff) | |
| download | opencut-4ed9858725ebfbc95f6e470e118b37aa1079f7d0.tar.gz | |
Merge branch 'main' into split-issue-83
Diffstat (limited to 'apps/web/src/components/development-debug.tsx')
| -rw-r--r-- | apps/web/src/components/development-debug.tsx | 107 |
1 files changed, 107 insertions, 0 deletions
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>
+ );
+}
|