summaryrefslogtreecommitdiff
path: root/apps/web
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web')
-rw-r--r--apps/web/src/components/editor/preview-panel.tsx29
-rw-r--r--apps/web/src/components/editor/timeline.tsx65
-rw-r--r--apps/web/src/components/ui/video-player.tsx86
-rw-r--r--apps/web/src/stores/playback-store.ts55
4 files changed, 188 insertions, 47 deletions
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 74bf5f98..132d6c06 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -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}`}
/>
);
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index d1bb3aa8..1d2df66d 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -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">
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index d31f7113..0c4f8498 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -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
+ ));
- const handleSeekEvent = (e: CustomEvent) => {
- video.currentTime = e.detail.time;
+ // Only sync if there's a significant difference
+ if (Math.abs(video.currentTime - targetVideoTime) > 0.2) {
+ video.currentTime = targetVideoTime;
+ }
};
- 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"
/>
diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index 7db1fb93..3c0bfdec 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -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 }),
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 11:34:01 +0000