xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: proper video playback including images and videos on the timeline

Browse Source
This commit is contained in:
Hyteq
2025-06-23 14:40:34 +03:00
parent 7b6ab8f152
commit 61c172c9cc
4 changed files with 188 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/web/src/components/editor/preview-panel.tsx
View File

@ -36,7 +36,7 @@ export function PreviewPanel() {
const aspectRatio = activeMediaItem?.aspectRatio || 16 / 9;
const renderContent = () => {
if (!activeMediaItem || !activeClip) {
if (!activeClip) {
return (
<div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50">
{tracks.length === 0 ? "Drop media to start editing" : "No clip at current time"}
@ -44,8 +44,26 @@ export function PreviewPanel() {
);
}
// Calculate the relative time within the clip (accounting for trim)
const relativeTime = Math.max(0, currentTime - activeClip.startTime + activeClip.trimStart);
// Handle test clips without media items
if (!activeMediaItem && activeClip.mediaId === "test") {
return (
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500/20 to-purple-500/20">
<div className="text-center">
<div className="text-6xl mb-4">🎬</div>
<p className="text-muted-foreground">{activeClip.name}</p>
<p className="text-xs text-muted-foreground/70 mt-2">Test clip for playback</p>
</div>
</div>
);
}
if (!activeMediaItem) {
return (
<div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50">
Media not found
</div>
);
}
if (activeMediaItem.type === "video") {
return (
@ -53,7 +71,10 @@ export function PreviewPanel() {
src={activeMediaItem.url}
poster={activeMediaItem.thumbnailUrl}
className="w-full h-full"
startTime={relativeTime}
clipStartTime={activeClip.startTime}
trimStart={activeClip.trimStart}
trimEnd={activeClip.trimEnd}
clipDuration={activeClip.duration}
key={`${activeClip.id}-${activeClip.trimStart}-${activeClip.trimEnd}`}
/>
);

65
apps/web/src/components/editor/timeline.tsx
View File

@ -13,6 +13,8 @@ import {
MoreVertical,
Volume2,
VolumeX,
Pause,
Play,
} from "lucide-react";
import {
Tooltip,
@ -31,10 +33,10 @@ export function Timeline() {
// Timeline shows all tracks (video, audio, effects) and their clips.
// You can drag media here to add it to your project.
// Clips can be trimmed, deleted, and moved.
const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack } =
const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration } =
useTimelineStore();
const { mediaItems, addMediaItem } = useMediaStore();
const { currentTime, duration, seek } = usePlaybackStore();
const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle } = usePlaybackStore();
const [isDragOver, setIsDragOver] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
const [zoomLevel, setZoomLevel] = useState(1);
@ -50,6 +52,12 @@ export function Timeline() {
y: number;
} | null>(null);
// Update timeline duration when tracks change
useEffect(() => {
const totalDuration = getTotalDuration();
setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline
}, [tracks, setDuration, getTotalDuration]);
// Close context menu on click elsewhere
useEffect(() => {
const handleClick = () => setContextMenu(null);
@ -208,6 +216,59 @@ export function Timeline() {
{/* Toolbar */}
<div className="border-b flex items-center px-2 py-1 gap-1">
<TooltipProvider delayDuration={500}>
{/* Play/Pause Button */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={toggle}
className="mr-2"
>
{isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
</Button>
</TooltipTrigger>
<TooltipContent>{isPlaying ? "Pause (Space)" : "Play (Space)"}</TooltipContent>
</Tooltip>
<div className="w-px h-6 bg-border mx-1" />
{/* Time Display */}
<div className="text-xs text-muted-foreground font-mono px-2">
{Math.floor(currentTime * 10) / 10}s / {Math.floor(duration * 10) / 10}s
</div>
<div className="w-px h-6 bg-border mx-1" />
{/* Test Clip Button - for debugging */}
{tracks.length === 0 && (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={() => {
const trackId = addTrack("video");
addClipToTrack(trackId, {
mediaId: "test",
name: "Test Clip",
duration: 5,
startTime: 0,
trimStart: 0,
trimEnd: 0,
});
}}
className="text-xs"
>
Add Test Clip
</Button>
</TooltipTrigger>
<TooltipContent>Add a test clip to try playback</TooltipContent>
</Tooltip>
)}
<div className="w-px h-6 bg-border mx-1" />
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">

86
apps/web/src/components/ui/video-player.tsx
View File

@ -9,81 +9,97 @@ interface VideoPlayerProps {
src: string;
poster?: string;
className?: string;
startTime?: number;
clipStartTime: number;
trimStart: number;
trimEnd: number;
clipDuration: number;
}
export function VideoPlayer({ src, poster, className = "", startTime = 0 }: VideoPlayerProps) {
export function VideoPlayer({
src,
poster,
className = "",
clipStartTime,
trimStart,
trimEnd,
clipDuration
}: VideoPlayerProps) {
const videoRef = useRef<HTMLVideoElement>(null);
const { isPlaying, currentTime, volume, play, pause, setVolume, setDuration, setCurrentTime } = usePlaybackStore();
const { isPlaying, currentTime, volume, play, pause, setVolume } = usePlaybackStore();
// Calculate if we're within this clip's timeline range
const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
const isInClipRange = currentTime >= clipStartTime && currentTime < clipEndTime;
// Calculate the video's internal time based on timeline position
const videoTime = Math.max(trimStart, Math.min(
clipDuration - trimEnd,
currentTime - clipStartTime + trimStart
));
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const handleTimeUpdate = () => {
setCurrentTime(video.currentTime);
const handleSeekEvent = (e: CustomEvent) => {
if (!isInClipRange) return;
const timelineTime = e.detail.time;
const newVideoTime = Math.max(trimStart, Math.min(
clipDuration - trimEnd,
timelineTime - clipStartTime + trimStart
));
video.currentTime = newVideoTime;
};
const handleLoadedMetadata = () => {
setDuration(video.duration);
if (startTime > 0) {
video.currentTime = startTime;
const handleUpdateEvent = (e: CustomEvent) => {
if (!isInClipRange) return;
const timelineTime = e.detail.time;
const targetVideoTime = Math.max(trimStart, Math.min(
clipDuration - trimEnd,
timelineTime - clipStartTime + trimStart
));
// Only sync if there's a significant difference
if (Math.abs(video.currentTime - targetVideoTime) > 0.2) {
video.currentTime = targetVideoTime;
}
};
const handleSeekEvent = (e: CustomEvent) => {
video.currentTime = e.detail.time;
};
video.addEventListener("timeupdate", handleTimeUpdate);
video.addEventListener("loadedmetadata", handleLoadedMetadata);
window.addEventListener("playback-seek", handleSeekEvent as EventListener);
window.addEventListener("playback-update", handleUpdateEvent as EventListener);
return () => {
video.removeEventListener("timeupdate", handleTimeUpdate);
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
window.removeEventListener("playback-seek", handleSeekEvent as EventListener);
window.removeEventListener("playback-update", handleUpdateEvent as EventListener);
};
}, [setCurrentTime, setDuration]);
}, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
// Sync video playback state - only play if in clip range
useEffect(() => {
const video = videoRef.current;
if (!video) return;
if (isPlaying) {
if (isPlaying && isInClipRange) {
video.play().catch(console.error);
} else {
video.pause();
}
}, [isPlaying]);
}, [isPlaying, isInClipRange]);
// Sync volume
useEffect(() => {
const video = videoRef.current;
if (!video) return;
video.volume = volume;
}, [volume]);
const handleSeek = (e: React.MouseEvent<HTMLVideoElement>) => {
const video = videoRef.current;
if (!video) return;
const rect = video.getBoundingClientRect();
const x = e.clientX - rect.left;
const percentage = x / rect.width;
const newTime = percentage * video.duration;
video.currentTime = newTime;
setCurrentTime(newTime);
};
return (
<div className={`relative group ${className}`}>
<video
ref={videoRef}
src={src}
poster={poster}
className="w-full h-full object-cover cursor-pointer"
onClick={handleSeek}
className="w-full h-full object-cover"
playsInline
preload="metadata"
/>

55
apps/web/src/stores/playback-store.ts
View File

@ -6,24 +6,67 @@ interface PlaybackStore extends PlaybackState, PlaybackControls {
setCurrentTime: (time: number) => void;
}
let playbackTimer: NodeJS.Timeout | null = null;
const startTimer = (store: any) => {
if (playbackTimer) clearInterval(playbackTimer);
playbackTimer = setInterval(() => {
const state = store();
if (state.isPlaying && state.currentTime < state.duration) {
const newTime = state.currentTime + 0.1;
if (newTime >= state.duration) {
state.pause();
} else {
state.setCurrentTime(newTime);
// Notify video elements to sync
window.dispatchEvent(new CustomEvent('playback-update', { detail: { time: newTime } }));
}
}
}, 100);
};
const stopTimer = () => {
if (playbackTimer) {
clearInterval(playbackTimer);
playbackTimer = null;
}
};
export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
isPlaying: false,
currentTime: 0,
duration: 0,
volume: 1,
play: () => set({ isPlaying: true }),
pause: () => set({ isPlaying: false }),
toggle: () => set((state) => ({ isPlaying: !state.isPlaying })),
play: () => {
set({ isPlaying: true });
startTimer(get);
},
pause: () => {
set({ isPlaying: false });
stopTimer();
},
toggle: () => {
const { isPlaying } = get();
if (isPlaying) {
get().pause();
} else {
get().play();
}
},
seek: (time: number) => {
const { duration } = get();
const clampedTime = Math.max(0, Math.min(duration, time));
set({ currentTime: clampedTime });
// Notify video element to seek
const event = new CustomEvent('playback-seek', { detail: { time: clampedTime } });
window.dispatchEvent(event);
// Notify video elements to seek
window.dispatchEvent(new CustomEvent('playback-seek', { detail: { time: clampedTime } }));
},
setVolume: (volume: number) => set({ volume: Math.max(0, Math.min(1, volume)) }),
setDuration: (duration: number) => set({ duration }),
setCurrentTime: (time: number) => set({ currentTime: time }),