diff options
Diffstat (limited to 'apps/web/src/components/editor/timeline/timeline.tsx')
| -rw-r--r-- | apps/web/src/components/editor/timeline/timeline.tsx | 798 |
1 files changed, 0 insertions, 798 deletions
diff --git a/apps/web/src/components/editor/timeline/timeline.tsx b/apps/web/src/components/editor/timeline/timeline.tsx deleted file mode 100644 index 5f3dd5a8..00000000 --- a/apps/web/src/components/editor/timeline/timeline.tsx +++ /dev/null @@ -1,798 +0,0 @@ -"use client";
-
-import { ScrollArea } from "../../ui/scroll-area";
-import {
- SplitSquareHorizontal,
- Volume2,
- VolumeX,
- Trash2,
- Scissors,
- Copy,
-} from "lucide-react";
-import { TimelineTrackContent } from "./timeline-track-content";
-import { TimelineToolbar } from "./timeline-toolbar";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useMediaStore } from "@/stores/media-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
-import { processMediaFiles } from "@/lib/media-processing";
-import { toast } from "sonner";
-import { useState, useRef, useEffect, useCallback } from "react";
-
-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,
- getTotalDuration,
- selectedClips,
- clearSelectedClips,
- setSelectedClips,
- updateClipTrim,
- } = useTimelineStore();
- const { mediaItems, addMediaItem } = useMediaStore();
- const { currentTime, duration, seek, setDuration } = usePlaybackStore();
- const [isDragOver, setIsDragOver] = useState(false);
- const [isProcessing, setIsProcessing] = useState(false);
- const [zoomLevel, setZoomLevel] = useState(1);
- const dragCounterRef = useRef(0);
- const timelineRef = useRef<HTMLDivElement>(null);
- const [isInTimeline, setIsInTimeline] = useState(false);
-
- // Unified context menu state
- const [contextMenu, setContextMenu] = useState<{
- type: "track" | "clip";
- trackId: string;
- clipId?: string;
- x: number;
- y: number;
- } | null>(null);
-
- // Marquee selection state
- const [marquee, setMarquee] = useState<{
- startX: number;
- startY: number;
- endX: number;
- endY: number;
- active: boolean;
- additive: boolean;
- } | null>(null);
-
- // Playhead scrubbing state
- const [isScrubbing, setIsScrubbing] = useState(false);
- const [scrubTime, setScrubTime] = useState<number | null>(null);
-
- // Initialize keyboard shortcuts
- useKeyboardShortcuts();
-
- // 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);
- if (contextMenu) {
- window.addEventListener("click", handleClick);
- return () => window.removeEventListener("click", handleClick);
- }
- }, [contextMenu]);
-
- // Mouse down on timeline background to start marquee
- const handleTimelineMouseDown = (e: React.MouseEvent) => {
- if (e.target === e.currentTarget && e.button === 0) {
- setMarquee({
- startX: e.clientX,
- startY: e.clientY,
- endX: e.clientX,
- endY: e.clientY,
- active: true,
- additive: e.metaKey || e.ctrlKey || e.shiftKey,
- });
- }
- };
-
- // Mouse move to update marquee
- useEffect(() => {
- if (!marquee || !marquee.active) return;
- const handleMouseMove = (e: MouseEvent) => {
- setMarquee(
- (prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY }
- );
- };
- const handleMouseUp = (e: MouseEvent) => {
- setMarquee(
- (prev) =>
- prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false }
- );
- };
- window.addEventListener("mousemove", handleMouseMove);
- window.addEventListener("mouseup", handleMouseUp);
- return () => {
- window.removeEventListener("mousemove", handleMouseMove);
- window.removeEventListener("mouseup", handleMouseUp);
- };
- }, [marquee]);
-
- // On marquee end, select clips in box
- useEffect(() => {
- if (!marquee || marquee.active) return;
- const timeline = timelineRef.current;
- if (!timeline) return;
- const rect = timeline.getBoundingClientRect();
- const x1 = Math.min(marquee.startX, marquee.endX) - rect.left;
- const x2 = Math.max(marquee.startX, marquee.endX) - rect.left;
- const y1 = Math.min(marquee.startY, marquee.endY) - rect.top;
- const y2 = Math.max(marquee.startY, marquee.endY) - rect.top;
- // Validation: skip if too small
- if (Math.abs(x2 - x1) < 5 || Math.abs(y2 - y1) < 5) {
- setMarquee(null);
- return;
- }
- // Clamp to timeline bounds
- const clamp = (val: number, min: number, max: number) =>
- Math.max(min, Math.min(max, val));
- const bx1 = clamp(x1, 0, rect.width);
- const bx2 = clamp(x2, 0, rect.width);
- const by1 = clamp(y1, 0, rect.height);
- const by2 = clamp(y2, 0, rect.height);
- let newSelection: { trackId: string; clipId: string }[] = [];
- tracks.forEach((track, trackIdx) => {
- track.clips.forEach((clip) => {
- const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd;
- const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);
- const clipLeft = clip.startTime * 50 * zoomLevel;
- const clipTop = trackIdx * 60;
- const clipBottom = clipTop + 60;
- const clipRight = clipLeft + clipWidth;
- if (
- bx1 < clipRight &&
- bx2 > clipLeft &&
- by1 < clipBottom &&
- by2 > clipTop
- ) {
- newSelection.push({ trackId: track.id, clipId: clip.id });
- }
- });
- });
- if (newSelection.length > 0) {
- if (marquee.additive) {
- const selectedSet = new Set(
- selectedClips.map((c) => c.trackId + ":" + c.clipId)
- );
- newSelection = [
- ...selectedClips,
- ...newSelection.filter(
- (c) => !selectedSet.has(c.trackId + ":" + c.clipId)
- ),
- ];
- }
- setSelectedClips(newSelection);
- } else if (!marquee.additive) {
- clearSelectedClips();
- }
- setMarquee(null);
- }, [
- marquee,
- tracks,
- zoomLevel,
- selectedClips,
- setSelectedClips,
- clearSelectedClips,
- ]);
-
- const handleDragEnter = (e: React.DragEvent) => {
- // When something is dragged over the timeline, show overlay
- e.preventDefault();
- // Don't show overlay for timeline clips - they're handled by tracks
- if (e.dataTransfer.types.includes("application/x-timeline-clip")) {
- return;
- }
- dragCounterRef.current += 1;
- if (!isDragOver) {
- setIsDragOver(true);
- }
- };
-
- const handleDragOver = (e: React.DragEvent) => {
- e.preventDefault();
- };
-
- const handleDragLeave = (e: React.DragEvent) => {
- e.preventDefault();
-
- // Don't update state for timeline clips - they're handled by tracks
- if (e.dataTransfer.types.includes("application/x-timeline-clip")) {
- return;
- }
-
- dragCounterRef.current -= 1;
- if (dragCounterRef.current === 0) {
- setIsDragOver(false);
- }
- };
-
- const handleDrop = async (e: React.DragEvent) => {
- // When media is dropped, add it as a new track/clip
- e.preventDefault();
- setIsDragOver(false);
- dragCounterRef.current = 0;
-
- // Ignore timeline clip drags - they're handled by track-specific handlers
- const hasTimelineClip = e.dataTransfer.types.includes(
- "application/x-timeline-clip"
- );
- if (hasTimelineClip) {
- return;
- }
-
- const mediaItemData = e.dataTransfer.getData("application/x-media-item");
- if (mediaItemData) {
- // Handle media item drops by creating new tracks
- try {
- const { id, type } = JSON.parse(mediaItemData);
- const mediaItem = mediaItems.find((item) => item.id === id);
- if (!mediaItem) {
- toast.error("Media item not found");
- return;
- }
- // Add to video or audio track depending on type
- const trackType = type === "audio" ? "audio" : "video";
- const newTrackId = addTrack(trackType);
- addClipToTrack(newTrackId, {
- mediaId: mediaItem.id,
- name: mediaItem.name,
- duration: mediaItem.duration || 5,
- startTime: 0,
- trimStart: 0,
- trimEnd: 0,
- });
- toast.success(`Added ${mediaItem.name} to new ${trackType} track`);
- } catch (error) {
- // Show error if parsing fails
- console.error("Error parsing media item data:", error);
- toast.error("Failed to add media to timeline");
- }
- } else if (e.dataTransfer.files?.length > 0) {
- // Handle file drops by creating new tracks
- setIsProcessing(true);
- try {
- const processedItems = await processMediaFiles(e.dataTransfer.files);
- for (const processedItem of processedItems) {
- addMediaItem(processedItem);
- const currentMediaItems = useMediaStore.getState().mediaItems;
- const addedItem = currentMediaItems.find(
- (item) =>
- item.name === processedItem.name && item.url === processedItem.url
- );
- if (addedItem) {
- const trackType =
- processedItem.type === "audio" ? "audio" : "video";
- const newTrackId = addTrack(trackType);
- addClipToTrack(newTrackId, {
- mediaId: addedItem.id,
- name: addedItem.name,
- duration: addedItem.duration || 5,
- startTime: 0,
- trimStart: 0,
- trimEnd: 0,
- });
- }
- }
- } catch (error) {
- // Show error if file processing fails
- console.error("Error processing external files:", error);
- toast.error("Failed to process dropped files");
- } finally {
- setIsProcessing(false);
- }
- }
- };
-
- const handleSeekToPosition = (e: React.MouseEvent) => {
- const rect = e.currentTarget.getBoundingClientRect();
- const clickX = e.clientX - rect.left;
- const clickedTime = clickX / (50 * zoomLevel);
- const clampedTime = Math.max(0, Math.min(duration, clickedTime));
-
- seek(clampedTime);
- };
-
- const handleTimelineAreaClick = (e: React.MouseEvent) => {
- if (e.target === e.currentTarget) {
- clearSelectedClips();
-
- // Calculate the clicked time position and seek to it
- handleSeekToPosition(e);
- }
- };
-
- const handleWheel = (e: React.WheelEvent) => {
- // Only zoom if user is using pinch gesture (ctrlKey or metaKey is true)
- if (e.ctrlKey || e.metaKey) {
- e.preventDefault();
- const delta = e.deltaY > 0 ? -0.05 : 0.05;
- setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));
- }
- // Otherwise, allow normal scrolling
- };
-
- // --- Playhead Scrubbing Handlers ---
- const handlePlayheadMouseDown = useCallback(
- (e: React.MouseEvent) => {
- e.preventDefault();
- setIsScrubbing(true);
- handleScrub(e);
- },
- [duration, zoomLevel]
- );
-
- const handleScrub = useCallback(
- (e: MouseEvent | React.MouseEvent) => {
- const timeline = timelineRef.current;
- if (!timeline) return;
- const rect = timeline.getBoundingClientRect();
- const x = e.clientX - rect.left;
- const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
- setScrubTime(time);
- seek(time); // update video preview in real time
- },
- [duration, zoomLevel, seek]
- );
-
- useEffect(() => {
- if (!isScrubbing) return;
- const onMouseMove = (e: MouseEvent) => handleScrub(e);
- const onMouseUp = (e: MouseEvent) => {
- setIsScrubbing(false);
- if (scrubTime !== null) seek(scrubTime); // finalize seek
- setScrubTime(null);
- };
- window.addEventListener("mousemove", onMouseMove);
- window.addEventListener("mouseup", onMouseUp);
- return () => {
- window.removeEventListener("mousemove", onMouseMove);
- window.removeEventListener("mouseup", onMouseUp);
- };
- }, [isScrubbing, scrubTime, seek, handleScrub]);
-
- const playheadPosition =
- isScrubbing && scrubTime !== null ? scrubTime : currentTime;
-
- const dragProps = {
- onDragEnter: handleDragEnter,
- onDragOver: handleDragOver,
- onDragLeave: handleDragLeave,
- onDrop: handleDrop,
- };
-
- // Prevent explorer zooming in/out when in timeline
- useEffect(() => {
- const preventZoom = (e: WheelEvent) => {
- // if (isInTimeline && (e.ctrlKey || e.metaKey)) {
- if (
- isInTimeline &&
- (e.ctrlKey || e.metaKey) &&
- timelineRef.current?.contains(e.target as Node)
- ) {
- e.preventDefault();
- }
- };
-
- document.addEventListener("wheel", preventZoom, { passive: false });
-
- return () => {
- document.removeEventListener("wheel", preventZoom);
- };
- }, [isInTimeline]);
-
- return (
- <div
- className={`h-full flex flex-col transition-colors duration-200 relative ${isDragOver ? "bg-accent/30 border-accent" : ""}`}
- {...dragProps}
- onMouseEnter={() => setIsInTimeline(true)}
- onMouseLeave={() => setIsInTimeline(false)}
- onWheel={handleWheel}
- >
- {/* Show overlay when dragging media over the timeline */}
- {isDragOver && (
- <div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none">
- <div className="bg-accent/80 text-accent-foreground px-8 py-4 rounded-lg shadow-lg text-lg font-semibold border border-accent">
- Drop media here to add to timeline
- </div>
- </div>
- )}
-
- {/* Toolbar */}
- <TimelineToolbar />
-
- {/* Timeline Container */}
- <div className="flex-1 flex flex-col overflow-hidden">
- {/* Timeline Header with Ruler */}
- <div className="flex border-b bg-background sticky top-0 z-10">
- {/* Track Labels Header */}
- <div className="w-48 flex-shrink-0 bg-muted/30 border-r flex items-center justify-between px-3 py-2">
- <span className="text-sm font-medium text-muted-foreground">
- Tracks
- </span>
- <div className="text-xs text-muted-foreground">
- {zoomLevel.toFixed(1)}x
- </div>
- </div>
-
- {/* Timeline Ruler */}
- <div className="flex-1 relative overflow-hidden">
- <ScrollArea className="w-full">
- <div
- className="relative h-12 bg-muted/30 cursor-pointer"
- style={{
- width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,
- }}
- onClick={(e) => {
- // Calculate the clicked time position and seek to it
- handleSeekToPosition(e);
- }}
- >
- {/* Time markers */}
- {(() => {
- // Calculate appropriate time interval based on zoom level
- const getTimeInterval = (zoom: number) => {
- const pixelsPerSecond = 50 * zoom;
- if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
- if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
- if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
- if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
- if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
- if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
- return 30; // Every 30s when extremely zoomed out
- };
-
- const interval = getTimeInterval(zoomLevel);
- const markerCount = Math.ceil(duration / interval) + 1;
-
- return Array.from({ length: markerCount }, (_, i) => {
- const time = i * interval;
- if (time > duration) return null;
-
- const isMainMarker =
- time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
-
- return (
- <div
- key={i}
- className={`absolute top-0 bottom-0 ${
- isMainMarker
- ? "border-l border-muted-foreground/40"
- : "border-l border-muted-foreground/20"
- }`}
- style={{ left: `${time * 50 * zoomLevel}px` }}
- >
- <span
- className={`absolute top-1 left-1 text-xs ${
- isMainMarker
- ? "text-muted-foreground font-medium"
- : "text-muted-foreground/70"
- }`}
- >
- {(() => {
- const formatTime = (seconds: number) => {
- const hours = Math.floor(seconds / 3600);
- const minutes = Math.floor((seconds % 3600) / 60);
- const secs = seconds % 60;
-
- if (hours > 0) {
- return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
- } else if (minutes > 0) {
- return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
- } else if (interval >= 1) {
- return `${Math.floor(secs)}s`;
- } else {
- return `${secs.toFixed(1)}s`;
- }
- };
- return formatTime(time);
- })()}
- </span>
- </div>
- );
- }).filter(Boolean);
- })()}
-
- {/* Playhead in ruler (scrubbable) */}
- <div
- className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-auto z-10 cursor-ew-resize"
- style={{ left: `${playheadPosition * 50 * zoomLevel}px` }}
- onMouseDown={handlePlayheadMouseDown}
- >
- <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />
- </div>
- </div>
- </ScrollArea>
- </div>
- </div>
-
- {/* Tracks Area */}
- <div className="flex-1 flex overflow-hidden">
- {/* Track Labels */}
- {tracks.length > 0 && (
- <div className="w-48 flex-shrink-0 border-r bg-background overflow-y-auto">
- <div className="flex flex-col">
- {tracks.map((track) => (
- <div
- key={track.id}
- className="h-[60px] flex items-center px-3 border-b border-muted/30 bg-background group"
- onContextMenu={(e) => {
- e.preventDefault();
- setContextMenu({
- type: "track",
- trackId: track.id,
- x: e.clientX,
- y: e.clientY,
- });
- }}
- >
- <div className="flex items-center flex-1 min-w-0">
- <div
- className={`w-3 h-3 rounded-full flex-shrink-0 ${
- track.type === "video"
- ? "bg-blue-500"
- : track.type === "audio"
- ? "bg-green-500"
- : "bg-purple-500"
- }`}
- />
- <span className="ml-2 text-sm font-medium truncate">
- {track.name}
- </span>
- </div>
- {track.muted && (
- <span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">
- Muted
- </span>
- )}
- </div>
- ))}
- </div>
- </div>
- )}
-
- {/* Timeline Tracks Content */}
- <div className="flex-1 relative overflow-hidden">
- <div
- className="w-full h-full overflow-hidden flex"
- ref={timelineRef}
- style={{ position: "relative" }}
- >
- {/* Timeline grid and clips area (with left margin for sifdebar) */}
- <div
- className="relative flex-1"
- style={{
- height: `${Math.max(200, Math.min(800, tracks.length * 60))}px`,
- width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,
- }}
- onClick={handleTimelineAreaClick}
- onMouseDown={handleTimelineMouseDown}
- >
- {tracks.length === 0 ? (
- <div className="absolute inset-0 flex items-center justify-center">
- <div className="text-center">
- <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4 mx-auto">
- <SplitSquareHorizontal className="h-8 w-8 text-muted-foreground" />
- </div>
- <p className="text-sm text-muted-foreground">
- Drop media here to start
- </p>
- </div>
- </div>
- ) : (
- <>
- {tracks.map((track, index) => (
- <div
- key={track.id}
- className="absolute left-0 right-0 border-b border-muted/30"
- style={{
- top: `${index * 60}px`,
- height: "60px",
- }}
- // Show context menu on right click
- onContextMenu={(e) => {
- e.preventDefault();
- setContextMenu({
- type: "track",
- trackId: track.id,
- x: e.clientX,
- y: e.clientY,
- });
- }}
- >
- <TimelineTrackContent
- track={track}
- zoomLevel={zoomLevel}
- setContextMenu={setContextMenu}
- />
- </div>
- ))}
-
- {/* Playhead for tracks area (scrubbable) */}
- {tracks.length > 0 && (
- <div
- className="absolute top-0 w-0.5 bg-red-500 pointer-events-auto z-20 cursor-ew-resize"
- style={{
- left: `${playheadPosition * 50 * zoomLevel}px`,
- height: `${tracks.length * 60}px`,
- }}
- onMouseDown={handlePlayheadMouseDown}
- />
- )}
- </>
- )}
- </div>
- </div>
- </div>
- </div>
- </div>
-
- {/* Clean Unified Context Menu */}
- {contextMenu && (
- <div
- className="fixed z-50 min-w-[160px] bg-popover border border-border rounded-md shadow-md py-1 text-sm"
- style={{ left: contextMenu.x, top: contextMenu.y }}
- onContextMenu={(e) => e.preventDefault()}
- >
- {contextMenu.type === "track" ? (
- // Track context menu
- <>
- <button
- className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
- onClick={() => {
- const track = tracks.find(
- (t) => t.id === contextMenu.trackId
- );
- if (track) toggleTrackMute(track.id);
- setContextMenu(null);
- }}
- >
- {(() => {
- const track = tracks.find(
- (t) => t.id === contextMenu.trackId
- );
- return track?.muted ? (
- <>
- <Volume2 className="h-4 w-4 mr-2" />
- Unmute Track
- </>
- ) : (
- <>
- <VolumeX className="h-4 w-4 mr-2" />
- Mute Track
- </>
- );
- })()}
- </button>
- <div className="h-px bg-border mx-1 my-1" />
- <button
- className="flex items-center w-full px-3 py-2 text-destructive hover:bg-destructive/10 transition-colors text-left"
- onClick={() => {
- removeTrack(contextMenu.trackId);
- setContextMenu(null);
- toast.success("Track deleted");
- }}
- >
- <Trash2 className="h-4 w-4 mr-2" />
- Delete Track
- </button>
- </>
- ) : (
- // Clip context menu
- <>
- <button
- className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
- onClick={() => {
- if (contextMenu.clipId) {
- const track = tracks.find(
- (t) => t.id === contextMenu.trackId
- );
- const clip = track?.clips.find(
- (c) => c.id === contextMenu.clipId
- );
- if (clip && track) {
- const splitTime = currentTime;
- const effectiveStart = clip.startTime;
- const effectiveEnd =
- clip.startTime +
- (clip.duration - clip.trimStart - clip.trimEnd);
-
- if (
- splitTime > effectiveStart &&
- splitTime < effectiveEnd
- ) {
- updateClipTrim(
- track.id,
- clip.id,
- clip.trimStart,
- clip.trimEnd + (effectiveEnd - splitTime)
- );
- useTimelineStore.getState().addClipToTrack(track.id, {
- mediaId: clip.mediaId,
- name: clip.name + " (split)",
- duration: clip.duration,
- startTime: splitTime,
- trimStart:
- clip.trimStart + (splitTime - effectiveStart),
- trimEnd: clip.trimEnd,
- });
- toast.success("Clip split successfully");
- } else {
- toast.error("Playhead must be within clip to split");
- }
- }
- }
- setContextMenu(null);
- }}
- >
- <Scissors className="h-4 w-4 mr-2" />
- Split at Playhead
- </button>
- <button
- className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
- onClick={() => {
- if (contextMenu.clipId) {
- const track = tracks.find(
- (t) => t.id === contextMenu.trackId
- );
- const clip = track?.clips.find(
- (c) => c.id === contextMenu.clipId
- );
- if (clip && track) {
- useTimelineStore.getState().addClipToTrack(track.id, {
- mediaId: clip.mediaId,
- name: clip.name + " (copy)",
- duration: clip.duration,
- startTime:
- clip.startTime +
- (clip.duration - clip.trimStart - clip.trimEnd) +
- 0.1,
- trimStart: clip.trimStart,
- trimEnd: clip.trimEnd,
- });
- toast.success("Clip duplicated");
- }
- }
- setContextMenu(null);
- }}
- >
- <Copy className="h-4 w-4 mr-2" />
- Duplicate Clip
- </button>
- <div className="h-px bg-border mx-1 my-1" />
- <button
- className="flex items-center w-full px-3 py-2 text-destructive hover:bg-destructive/10 transition-colors text-left"
- onClick={() => {
- if (contextMenu.clipId) {
- removeClipFromTrack(
- contextMenu.trackId,
- contextMenu.clipId
- );
- toast.success("Clip deleted");
- }
- setContextMenu(null);
- }}
- >
- <Trash2 className="h-4 w-4 mr-2" />
- Delete Clip
- </button>
- </>
- )}
- </div>
- )}
- </div>
- );
-}
|