debug logic for the overlaying / active clips on preview
This commit is contained in:
@ -8,11 +8,15 @@ import { Button } from "@/components/ui/button";
|
|||||||
import { Play, Pause } from "lucide-react";
|
import { Play, Pause } from "lucide-react";
|
||||||
import { useState, useRef } from "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() {
|
export function PreviewPanel() {
|
||||||
const { tracks } = useTimelineStore();
|
const { tracks } = useTimelineStore();
|
||||||
const { mediaItems } = useMediaStore();
|
const { mediaItems } = useMediaStore();
|
||||||
const { isPlaying, toggle, currentTime } = usePlaybackStore();
|
const { isPlaying, toggle, currentTime } = usePlaybackStore();
|
||||||
const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
|
const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
|
||||||
|
const [showDebug, setShowDebug] = useState(SHOW_DEBUG_INFO);
|
||||||
const previewRef = useRef<HTMLDivElement>(null);
|
const previewRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
// Get active clips at current time
|
// Get active clips at current time
|
||||||
@ -142,6 +146,18 @@ export function PreviewPanel() {
|
|||||||
))}
|
))}
|
||||||
</select>
|
</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">
|
<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 className="h-3 w-3 mr-1" /> : <Play className="h-3 w-3 mr-1" />}
|
||||||
{isPlaying ? "Pause" : "Play"}
|
{isPlaying ? "Pause" : "Play"}
|
||||||
@ -169,9 +185,10 @@ export function PreviewPanel() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Info Panel */}
|
{/* Debug Info Panel - Conditionally rendered */}
|
||||||
|
{showDebug && (
|
||||||
<div className="border-t bg-background p-2 flex-shrink-0">
|
<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="text-xs font-medium mb-1">Debug: Active Clips ({activeClips.length})</div>
|
||||||
<div className="flex gap-2 overflow-x-auto">
|
<div className="flex gap-2 overflow-x-auto">
|
||||||
{activeClips.map((clipData, index) => (
|
{activeClips.map((clipData, index) => (
|
||||||
<div
|
<div
|
||||||
@ -182,10 +199,15 @@ export function PreviewPanel() {
|
|||||||
{index + 1}
|
{index + 1}
|
||||||
</span>
|
</span>
|
||||||
<span>{clipData.clip.name}</span>
|
<span>{clipData.clip.name}</span>
|
||||||
|
<span className="text-muted-foreground">({clipData.mediaItem?.type || 'test'})</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
{activeClips.length === 0 && (
|
||||||
|
<span className="text-muted-foreground">No active clips</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user