diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/src/components/editor/preview-panel.tsx | 540 |
1 files changed, 290 insertions, 250 deletions
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index fafb26bd..5ee57487 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -1,250 +1,290 @@ -"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 { VideoPlayer } from "@/components/ui/video-player";
-import { Button } from "@/components/ui/button";
-import { Play, Pause, Volume2, VolumeX } 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";
-
-interface ActiveClip {
- clip: TimelineClip;
- track: TimelineTrack;
- mediaItem: MediaItem | null;
-}
-
-export function PreviewPanel() {
- const { tracks } = useTimelineStore();
- const { mediaItems } = useMediaStore();
- 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);
-
- // 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();
- const aspectRatio = canvasSize.width / canvasSize.height;
-
- // Render a clip
- const renderClip = (clipData: ActiveClip, index: number) => {
- const { clip, mediaItem } = clipData;
-
- // Test clips
- if (!mediaItem || clip.mediaId === "test") {
- return (
- <div
- key={clip.id}
- className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
- >
- <div className="text-center">
- <div className="text-2xl mb-2">🎬</div>
- <p className="text-xs text-white">{clip.name}</p>
- </div>
- </div>
- );
- }
-
- // Video clips
- if (mediaItem.type === "video") {
- return (
- <div key={clip.id} className="absolute inset-0">
- <VideoPlayer
- src={mediaItem.url}
- poster={mediaItem.thumbnailUrl}
- clipStartTime={clip.startTime}
- trimStart={clip.trimStart}
- trimEnd={clip.trimEnd}
- clipDuration={clip.duration}
- />
- </div>
- );
- }
-
- // Image clips
- if (mediaItem.type === "image") {
- return (
- <div key={clip.id} className="absolute inset-0">
- <img
- src={mediaItem.url}
- alt={mediaItem.name}
- className="w-full h-full object-cover"
- draggable={false}
- />
- </div>
- );
- }
-
- // Audio clips (visual representation)
- if (mediaItem.type === "audio") {
- return (
- <div
- key={clip.id}
- className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"
- >
- <div className="text-center">
- <div className="text-2xl mb-2">🎵</div>
- <p className="text-xs text-white">{mediaItem.name}</p>
- </div>
- </div>
- );
- }
-
- return null;
- };
-
- // Canvas presets
- const canvasPresets = [
- { name: "16:9 HD", width: 1920, height: 1080 },
- { name: "16:9 4K", width: 3840, height: 2160 },
- { name: "9:16 Mobile", width: 1080, height: 1920 },
- { name: "1:1 Square", width: 1080, height: 1080 },
- { name: "4:3 Standard", width: 1440, height: 1080 },
- ];
-
- return (
- <div className="h-full w-full flex flex-col min-h-0 min-w-0">
- {/* Controls */}
- <div className="border-b p-2 flex items-center gap-2 text-xs flex-shrink-0">
- <span className="text-muted-foreground">Canvas:</span>
- <select
- value={`${canvasSize.width}x${canvasSize.height}`}
- onChange={(e) => {
- const preset = canvasPresets.find(
- (p) => `${p.width}x${p.height}` === e.target.value
- );
- if (preset)
- setCanvasSize({ width: preset.width, height: preset.height });
- }}
- className="bg-background border rounded px-2 py-1 text-xs"
- >
- {canvasPresets.map((preset) => (
- <option
- key={preset.name}
- value={`${preset.width}x${preset.height}`}
- >
- {preset.name} ({preset.width}×{preset.height})
- </option>
- ))}
- </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"
- onClick={toggleMute}
- className="ml-auto"
- >
- {muted || volume === 0 ? (
- <VolumeX className="h-3 w-3 mr-1" />
- ) : (
- <Volume2 className="h-3 w-3 mr-1" />
- )}
- {muted || volume === 0 ? "Unmute" : "Mute"}
- </Button>
-
- <Button variant="outline" size="sm" onClick={toggle}>
- {isPlaying ? (
- <Pause className="h-3 w-3 mr-1" />
- ) : (
- <Play className="h-3 w-3 mr-1" />
- )}
- {isPlaying ? "Pause" : "Play"}
- </Button>
- </div>
-
- {/* Preview Area */}
- <div className="flex-1 flex items-center justify-center p-2 sm:p-4 min-h-0 min-w-0">
- <div
- ref={previewRef}
- className="relative overflow-hidden rounded-sm max-w-full max-h-full bg-black border"
- style={{
- aspectRatio: aspectRatio.toString(),
- width: "100%",
- height: "100%",
- }}
- >
- {activeClips.length === 0 ? (
- <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
- {tracks.length === 0
- ? "Drop media to start editing"
- : "No clips at current time"}
- </div>
- ) : (
- activeClips.map((clipData, index) => renderClip(clipData, index))
- )}
- </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>
- );
-}
+"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 { VideoPlayer } from "@/components/ui/video-player"; +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; + mediaItem: MediaItem | null; +} + +export function PreviewPanel() { + const { tracks } = useTimelineStore(); + const { mediaItems } = useMediaStore(); + 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({ + width: 0, + height: 0, + }); + + // Calculate optimal preview size that fits in container while maintaining aspect ratio + useEffect(() => { + const updatePreviewSize = () => { + if (!containerRef.current) return; + + const container = containerRef.current.getBoundingClientRect(); + const targetRatio = canvasSize.width / canvasSize.height; + const containerRatio = container.width / container.height; + + let width, height; + + if (containerRatio > targetRatio) { + // Container is wider - constrain by height + height = container.height; + width = height * targetRatio; + } else { + // Container is taller - constrain by width + width = container.width; + height = width / targetRatio; + } + + setPreviewDimensions({ width, height }); + }; + + updatePreviewSize(); + + const resizeObserver = new ResizeObserver(updatePreviewSize); + if (containerRef.current) { + resizeObserver.observe(containerRef.current); + } + + return () => resizeObserver.disconnect(); + }, [canvasSize.width, canvasSize.height]); + + // 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(); + + // Render a clip + const renderClip = (clipData: ActiveClip, index: number) => { + const { clip, mediaItem } = clipData; + + // Test clips + if (!mediaItem || clip.mediaId === "test") { + return ( + <div + key={clip.id} + className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center" + > + <div className="text-center"> + <div className="text-2xl mb-2">🎬</div> + <p className="text-xs text-white">{clip.name}</p> + </div> + </div> + ); + } + + // Video clips + if (mediaItem.type === "video") { + return ( + <div key={clip.id} className="absolute inset-0"> + <VideoPlayer + src={mediaItem.url} + poster={mediaItem.thumbnailUrl} + clipStartTime={clip.startTime} + trimStart={clip.trimStart} + trimEnd={clip.trimEnd} + clipDuration={clip.duration} + /> + </div> + ); + } + + // Image clips + if (mediaItem.type === "image") { + return ( + <div key={clip.id} className="absolute inset-0"> + <img + src={mediaItem.url} + alt={mediaItem.name} + className="w-full h-full object-cover" + draggable={false} + /> + </div> + ); + } + + // Audio clips (visual representation) + if (mediaItem.type === "audio") { + return ( + <div + key={clip.id} + className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center" + > + <div className="text-center"> + <div className="text-2xl mb-2">🎵</div> + <p className="text-xs text-white">{mediaItem.name}</p> + </div> + </div> + ); + } + + return null; + }; + + // Canvas presets + const canvasPresets = [ + { name: "16:9 HD", width: 1920, height: 1080 }, + { name: "16:9 4K", width: 3840, height: 2160 }, + { name: "9:16 Mobile", width: 1080, height: 1920 }, + { name: "1:1 Square", width: 1080, height: 1080 }, + { name: "4:3 Standard", width: 1440, height: 1080 }, + ]; + + return ( + <div className="h-full w-full flex flex-col min-h-0 min-w-0"> + {/* Controls */} + <div className="border-b p-2 flex items-center gap-2 text-xs flex-shrink-0"> + <span className="text-muted-foreground">Canvas:</span> + <select + value={`${canvasSize.width}x${canvasSize.height}`} + onChange={(e) => { + const preset = canvasPresets.find( + (p) => `${p.width}x${p.height}` === e.target.value + ); + if (preset) + setCanvasSize({ width: preset.width, height: preset.height }); + }} + className="bg-background border rounded px-2 py-1 text-xs" + > + {canvasPresets.map((preset) => ( + <option + key={preset.name} + value={`${preset.width}x${preset.height}`} + > + {preset.name} ({preset.width}×{preset.height}) + </option> + ))} + </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" + onClick={toggleMute} + className="ml-auto" + > + {muted || volume === 0 ? ( + <VolumeX className="h-3 w-3 mr-1" /> + ) : ( + <Volume2 className="h-3 w-3 mr-1" /> + )} + {muted || volume === 0 ? "Unmute" : "Mute"} + </Button> + + <Button variant="outline" size="sm" onClick={toggle}> + {isPlaying ? ( + <Pause className="h-3 w-3 mr-1" /> + ) : ( + <Play className="h-3 w-3 mr-1" /> + )} + {isPlaying ? "Pause" : "Play"} + </Button> + </div> + + {/* Preview Area */} + <div + ref={containerRef} + className="flex-1 flex items-center justify-center p-2 sm:p-4 min-h-0 min-w-0" + > + <div + ref={previewRef} + className="relative overflow-hidden rounded-sm bg-black border" + style={{ + width: previewDimensions.width, + height: previewDimensions.height, + }} + > + {activeClips.length === 0 ? ( + <div className="absolute inset-0 flex items-center justify-center text-muted-foreground"> + {tracks.length === 0 + ? "Drop media to start editing" + : "No clips at current time"} + </div> + ) : ( + activeClips.map((clipData, index) => renderClip(clipData, index)) + )} + </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> + ); +} |