From 2a036687b89dcef384064d18bcad02e058c874b6 Mon Sep 17 00:00:00 2001
From: En-gui <wlsdml1114@gmail.com>
Date: Thu, 22 Jan 2026 13:20:36 +0900
Subject: [PATCH 1/5] fix merge

---
 package-lock.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 3e968b1..ccfbace 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14035,7 +14035,6 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"

From a4ce80ea78712ccb04f52e2276f272cd2e523a9e Mon Sep 17 00:00:00 2001
From: En-gui <wlsdml1114@gmail.com>
Date: Fri, 30 Jan 2026 04:54:37 +0900
Subject: [PATCH 2/5] timeline enhanced

---
 src/components/video-editor/TimelineRuler.tsx |  43 +--
 src/components/video-editor/VideoTimeline.tsx | 311 ++++++++++--------
 2 files changed, 196 insertions(+), 158 deletions(-)

diff --git a/src/components/video-editor/TimelineRuler.tsx b/src/components/video-editor/TimelineRuler.tsx
index 6041598..de38dfe 100644
--- a/src/components/video-editor/TimelineRuler.tsx
+++ b/src/components/video-editor/TimelineRuler.tsx
@@ -32,40 +32,25 @@ const MIN_MAJOR_SPACING_PX = 96;
 const EPSILON = 0.000_01;
 
 function formatTickLabel(seconds: number, majorInterval: number) {
-  if (seconds < EPSILON) {
-    return "0s";
+  if (Math.abs(seconds) < EPSILON) {
+    return "0:00";
   }
 
-  if (seconds >= 3600) {
-    const hours = seconds / 3600;
-    const decimals = majorInterval < 3600 ? 1 : 0;
-    return `${hours.toFixed(decimals)}h`;
-  }
-
-  if (seconds >= 60) {
-    const minutes = seconds / 60;
-    const decimals = majorInterval < 60 ? 1 : 0;
-    return `${minutes.toFixed(decimals)}m`;
-  }
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
 
-  if (seconds >= 1) {
-    const isNearInteger = Math.abs(seconds - Math.round(seconds)) < 0.005;
-    const decimals =
-      isNearInteger && majorInterval >= 1
-        ? 0
-        : majorInterval < 1
-          ? Math.ceil(-Math.log10(majorInterval))
-          : Math.min(
-              2,
-              Math.max(
-                1,
-                Math.ceil(-Math.log10(seconds - Math.floor(seconds))),
-              ),
-            );
-    return `${seconds.toFixed(decimals)}s`;
+  // Decide on decimal places based on interval
+  // If interval is less than 1 second, we likely need decimals
+  if (majorInterval < 1) {
+    // Show decimals - e.g. 0:00.50
+    // Keep seconds part fixed width if possible, or just standard numeric
+    const s = remainingSeconds.toFixed(2).padStart(5, '0');
+    return `${minutes}:${s}`;
   }
 
-  return `${Math.round(seconds * 1000)}ms`;
+  // Integer seconds - e.g. 0:10, 1:05
+  const s = Math.floor(remainingSeconds).toString().padStart(2, '0');
+  return `${minutes}:${s}`;
 }
 
 function chooseMajorInterval(pixelsPerSecond: number) {
diff --git a/src/components/video-editor/VideoTimeline.tsx b/src/components/video-editor/VideoTimeline.tsx
index 64e77d4..2217e24 100644
--- a/src/components/video-editor/VideoTimeline.tsx
+++ b/src/components/video-editor/VideoTimeline.tsx
@@ -35,7 +35,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
   className,
   ...props
 }: VideoTimelineProps) {
-  const { setCurrentTimestamp, addKeyframe, addTrack, updateKeyframe, removeKeyframe, player, setZoom, clearSelection } = useStudio();
+  const { setCurrentTimestamp, addKeyframe, addTrack, updateKeyframe, removeKeyframe, player, setZoom, clearSelection, updateProject } = useStudio();
   const { t } = useI18n();
   const timelineRef = useRef<HTMLDivElement>(null);
   const [validationError, setValidationError] = useState<string | null>(null);
@@ -47,6 +47,14 @@ export const VideoTimeline = React.memo(function VideoTimeline({
   const timelineWidth = useMemo(() => pixelsPerSecond * durationSeconds, [pixelsPerSecond, durationSeconds]);
   const pixelsPerMs = useMemo(() => pixelsPerSecond / 1000, [pixelsPerSecond]);
 
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  // Calculate actual display width (max of content and container)
+  const displayWidth = useMemo(() => Math.max(timelineWidth, containerWidth), [timelineWidth, containerWidth]);
+
+  // Calculate visual duration for Ruler to match the stretched width
+  const visualDuration = useMemo(() => displayWidth / pixelsPerSecond, [displayWidth, pixelsPerSecond]);
+
   // Sort tracks by type order - memoized
   const sortedTracks = useMemo(() => {
     return [...tracks].sort((a, b) => {
@@ -65,6 +73,32 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     [currentTimestamp, pixelsPerSecond]
   );
 
+  // Auto-expand timeline duration based on content
+  useEffect(() => {
+    if (!project) return;
+
+    const bufferMs = 60000; // 60 seconds buffer to allow "infinite" feel
+    const minDurationMs = 60000; // 60 seconds minimum base
+
+    // Find the end time of the last keyframe
+    let maxContentTime = 0;
+    Object.values(keyframes).flat().forEach(kf => {
+      const outputEnd = kf.timestamp + kf.duration;
+      if (outputEnd > maxContentTime) {
+        maxContentTime = outputEnd;
+      }
+    });
+
+    // Desired duration is content end + buffer
+    const desiredDuration = Math.max(minDurationMs, maxContentTime + bufferMs);
+
+    // Only update if difference is significant (> 1s) to prevent jitter/loops
+    if (Math.abs(project.duration - desiredDuration) > 1000) {
+      // console.log('VideoTimeline: Auto-expanding duration from', project.duration, 'to', desiredDuration);
+      updateProject(project.id, { duration: desiredDuration });
+    }
+  }, [keyframes, project.duration, project.id, updateProject]);
+
   const handleTimelineClick = useCallback((event: MouseEvent<HTMLDivElement>) => {
     const rect = timelineRef.current?.getBoundingClientRect();
     if (!rect) return;
@@ -72,16 +106,17 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     // Check if click was on empty space (not on a keyframe)
     const target = event.target as HTMLElement;
     const isKeyframeClick = target.closest('[aria-checked]');
-    
+
     // Clear selection when clicking on empty space
     if (!isKeyframeClick) {
       clearSelection();
     }
 
-    const relativeX = event.clientX - rect.left;
+    const scrollLeft = timelineRef.current?.scrollLeft || 0;
+    const relativeX = (event.clientX - rect.left) + scrollLeft;
     // Convert pixels to seconds
     const timestamp = relativeX / pixelsPerSecond;
-    
+
     // Clamp timestamp to valid range
     const clampedTimestamp = Math.max(0, Math.min(durationSeconds, timestamp));
     setCurrentTimestamp(clampedTimestamp);
@@ -92,6 +127,20 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     }
   }, [pixelsPerSecond, durationSeconds, setCurrentTimestamp, player, clearSelection]);
 
+  // Observer for container width
+  useEffect(() => {
+    if (!timelineRef.current) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+
+    observer.observe(timelineRef.current);
+    return () => observer.disconnect();
+  }, []);
+
   const getTrackIdForMediaType = useCallback(async (mediaType: string): Promise<string> => {
     // Map media type to track type
     let trackType: 'video' | 'music' | 'voiceover';
@@ -99,8 +148,10 @@ export const VideoTimeline = React.memo(function VideoTimeline({
       trackType = 'video';
     } else if (mediaType === 'music') {
       trackType = 'music';
-    } else {
+    } else if (mediaType === 'tts' || mediaType === 'voiceover') {
       trackType = 'voiceover';
+    } else {
+      trackType = 'voiceover'; // fallback
     }
 
     // Find existing track of this type
@@ -128,10 +179,10 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     return new Promise((resolve) => {
       const TIMEOUT_MS = 15000; // Increased timeout for blob URLs
       let resolved = false;
-      
+
       // Normalize URL to handle relative paths (especially on Windows)
       const normalizedUrl = normalizeUrl(url);
-      
+
       const resolveOnce = (duration: number, source: string) => {
         if (!resolved) {
           resolved = true;
@@ -139,17 +190,17 @@ export const VideoTimeline = React.memo(function VideoTimeline({
           resolve(duration);
         }
       };
-      
+
       // Timeout fallback
       const timeoutId = setTimeout(() => {
         console.warn(`Media duration detection timed out for: ${normalizedUrl}`);
         resolveOnce(5000, 'timeout');
       }, TIMEOUT_MS);
-      
+
       if (type === 'music' || type === 'voiceover') {
         const audio = new Audio();
         audio.preload = 'auto'; // Changed from 'metadata' to 'auto' for better blob URL support
-        
+
         // Try multiple events for duration detection
         const handleDurationChange = () => {
           if (audio.duration && isFinite(audio.duration) && audio.duration > 0) {
@@ -158,7 +209,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
             resolveOnce(durationMs, 'durationchange');
           }
         };
-        
+
         const handleLoadedMetadata = () => {
           if (audio.duration && isFinite(audio.duration) && audio.duration > 0) {
             clearTimeout(timeoutId);
@@ -166,7 +217,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
             resolveOnce(durationMs, 'loadedmetadata');
           }
         };
-        
+
         const handleCanPlayThrough = () => {
           if (audio.duration && isFinite(audio.duration) && audio.duration > 0) {
             clearTimeout(timeoutId);
@@ -174,18 +225,18 @@ export const VideoTimeline = React.memo(function VideoTimeline({
             resolveOnce(durationMs, 'canplaythrough');
           }
         };
-        
+
         audio.addEventListener('durationchange', handleDurationChange);
         audio.addEventListener('loadedmetadata', handleLoadedMetadata);
         audio.addEventListener('canplaythrough', handleCanPlayThrough);
         audio.addEventListener('loadeddata', handleCanPlayThrough);
-        
+
         audio.addEventListener('error', (e) => {
           clearTimeout(timeoutId);
           console.error('Audio duration detection error:', e);
           resolveOnce(5000, 'error');
         });
-        
+
         audio.src = normalizedUrl;
         // Force load for some browsers (skip in test environment where load() is not implemented)
         if (typeof audio.load === 'function') {
@@ -198,7 +249,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
       } else if (type === 'video') {
         const video = document.createElement('video');
         video.preload = 'auto'; // Changed from 'metadata' to 'auto'
-        
+
         const handleDurationChange = () => {
           if (video.duration && isFinite(video.duration) && video.duration > 0) {
             clearTimeout(timeoutId);
@@ -206,7 +257,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
             resolveOnce(durationMs, 'durationchange');
           }
         };
-        
+
         const handleLoadedMetadata = () => {
           if (video.duration && isFinite(video.duration) && video.duration > 0) {
             clearTimeout(timeoutId);
@@ -214,7 +265,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
             resolveOnce(durationMs, 'loadedmetadata');
           }
         };
-        
+
         const handleCanPlayThrough = () => {
           if (video.duration && isFinite(video.duration) && video.duration > 0) {
             clearTimeout(timeoutId);
@@ -222,18 +273,18 @@ export const VideoTimeline = React.memo(function VideoTimeline({
             resolveOnce(durationMs, 'canplaythrough');
           }
         };
-        
+
         video.addEventListener('durationchange', handleDurationChange);
         video.addEventListener('loadedmetadata', handleLoadedMetadata);
         video.addEventListener('canplaythrough', handleCanPlayThrough);
         video.addEventListener('loadeddata', handleCanPlayThrough);
-        
+
         video.addEventListener('error', (e) => {
           clearTimeout(timeoutId);
           console.error('Video duration detection error:', e);
           resolveOnce(5000, 'error');
         });
-        
+
         video.src = normalizedUrl;
         // Force load for some browsers (skip in test environment where load() is not implemented)
         if (typeof video.load === 'function') {
@@ -254,7 +305,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     event.preventDefault();
     setValidationError(null);
     setNotification(null);
-    
+
     try {
       const mediaDataStr = event.dataTransfer.getData('application/json');
       if (!mediaDataStr) return;
@@ -272,17 +323,20 @@ export const VideoTimeline = React.memo(function VideoTimeline({
       const mediaUrl = rawMediaUrl ? normalizeUrl(rawMediaUrl) : null;
       const mediaId = rawMediaData.id || rawMediaData.jobId || `media-${Date.now()}`;
       const mediaName = rawMediaData.prompt || rawMediaData.audioName || rawMediaData.name || '';
-      
-      // Map 'audio' type to 'music' - user can drag to voiceover track later
+
+      // Map 'audio' to 'music', and 'tts' to 'voiceover'
       let normalizedType: 'image' | 'video' | 'music' | 'voiceover' = mediaType;
       if (mediaType === 'audio') {
         normalizedType = 'music';
+      } else if (mediaType === 'tts') {
+        normalizedType = 'voiceover';
       }
-      
+
       console.log('Drop data normalized:', { mediaType, normalizedType, mediaUrl, rawMediaUrl, mediaId, mediaName });
 
-      const relativeX = event.clientX - rect.left;
-      const timestamp = Math.max(0, (relativeX / timelineWidth) * durationSeconds * 1000);
+      const scrollLeft = timelineRef.current?.scrollLeft || 0;
+      const relativeX = (event.clientX - rect.left) + scrollLeft;
+      const timestamp = Math.max(0, (relativeX / displayWidth) * visualDuration * 1000);
 
       // Get or create appropriate track
       const trackId = await getTrackIdForMediaType(normalizedType);
@@ -291,7 +345,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
       // This ensures the keyframe duration matches the actual media length
       let duration: number;
       let originalDuration: number;
-      
+
       if (mediaUrl && (normalizedType === 'music' || normalizedType === 'voiceover' || normalizedType === 'video')) {
         // For audio and video, always detect duration from the actual file
         console.log(`Detecting duration for ${normalizedType} from: ${mediaUrl}`);
@@ -316,7 +370,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
         data: {
           type: normalizedType,
           mediaId: mediaId,
-          url: mediaUrl,
+          url: mediaUrl || '',
           prompt: rawMediaData.prompt,
           originalDuration, // Store original duration for waveform scaling
         },
@@ -336,7 +390,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
       if (normalizedType === 'video' && mediaUrl) {
         // Skip audio processing for blob URLs (browser-only, can't be processed server-side)
         const isBlobUrl = mediaUrl.startsWith('blob:');
-        
+
         if (isBlobUrl) {
           console.log('Blob URL detected, skipping server-side audio processing:', mediaUrl);
           // For blob URLs, use client-side detection only
@@ -373,88 +427,88 @@ export const VideoTimeline = React.memo(function VideoTimeline({
               // Fallback to client-side detection
               hasAudio = await hasAudioTrack(mediaUrl);
             }
-          
-          if (hasAudio) {
-            console.log('Video has audio, creating muted version...');
-            // Create muted version of the video for the video track
-            const mutedResponse = await fetch('/api/video-tracks/create-muted', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ videoPath: mediaUrl }),
-            });
 
-            if (mutedResponse.ok) {
-              const { mutedVideoPath } = await mutedResponse.json();
-              console.log('[VideoTimeline] Received mutedVideoPath from API:', mutedVideoPath);
-              // Normalize URL to handle relative paths (especially on Windows)
-              finalVideoUrl = normalizeUrl(mutedVideoPath);
-              console.log('[VideoTimeline] Normalized mutedVideoPath:', finalVideoUrl);
-              console.log('✓ Using muted video for video track:', finalVideoUrl);
-            } else {
-              const errorData = await mutedResponse.json();
-              console.error('Failed to create muted video:', errorData);
-              console.warn('Using original video with audio');
-            }
+            if (hasAudio) {
+              console.log('Video has audio, creating muted version...');
+              // Create muted version of the video for the video track
+              const mutedResponse = await fetch('/api/video-tracks/create-muted', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ videoPath: mediaUrl }),
+              });
 
-            console.log('Extracting audio from video...');
+              if (mutedResponse.ok) {
+                const { mutedVideoPath } = await mutedResponse.json();
+                console.log('[VideoTimeline] Received mutedVideoPath from API:', mutedVideoPath);
+                // Normalize URL to handle relative paths (especially on Windows)
+                finalVideoUrl = normalizeUrl(mutedVideoPath);
+                console.log('[VideoTimeline] Normalized mutedVideoPath:', finalVideoUrl);
+                console.log('✓ Using muted video for video track:', finalVideoUrl);
+              } else {
+                const errorData = await mutedResponse.json();
+                console.error('Failed to create muted video:', errorData);
+                console.warn('Using original video with audio');
+              }
+
+              console.log('Extracting audio from video...');
+
+              // Extract audio asynchronously
+              // Note: This requires server-side API call since FFmpeg runs on server
+              const audioResponse = await fetch('/api/video-tracks/extract-audio', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ videoPath: mediaUrl }),
+              });
 
-            // Extract audio asynchronously
-            // Note: This requires server-side API call since FFmpeg runs on server
-            const audioResponse = await fetch('/api/video-tracks/extract-audio', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ videoPath: mediaUrl }),
-            });
+              if (!audioResponse.ok) {
+                throw new Error('Failed to extract audio from video');
+              }
 
-            if (!audioResponse.ok) {
-              throw new Error('Failed to extract audio from video');
-            }
-
-            const { audioPath } = await audioResponse.json();
-            console.log('[VideoTimeline] Received audioPath from API:', audioPath);
-            // Normalize URL to handle relative paths (especially on Windows)
-            const normalizedAudioPath = normalizeUrl(audioPath);
-            console.log('[VideoTimeline] Normalized audioPath:', normalizedAudioPath);
-            console.log('✓ Audio extracted:', normalizedAudioPath);
-            
-            // Find available audio track
-            const audioTrackId = findAvailableAudioTrack(
-              tracks,
-              keyframes,
-              timestamp,
-              duration
-            );
-            
-            console.log('Available audio track:', audioTrackId);
-            
-            if (audioTrackId) {
-              // Determine track type for audio keyframe
-              const audioTrack = tracks.find(t => t.id === audioTrackId);
-              const audioType = audioTrack?.type === 'voiceover' ? 'voiceover' : 'music';
-              
-              // Add synchronized audio keyframe
-              await addKeyframe({
-                trackId: audioTrackId,
+              const { audioPath } = await audioResponse.json();
+              console.log('[VideoTimeline] Received audioPath from API:', audioPath);
+              // Normalize URL to handle relative paths (especially on Windows)
+              const normalizedAudioPath = normalizeUrl(audioPath);
+              console.log('[VideoTimeline] Normalized audioPath:', normalizedAudioPath);
+              console.log('✓ Audio extracted:', normalizedAudioPath);
+
+              // Find available audio track
+              const audioTrackId = findAvailableAudioTrack(
+                tracks,
+                keyframes,
                 timestamp,
-                duration,
-                data: {
-                  type: audioType,
-                  mediaId: `${mediaId}-audio`,
-                  url: normalizedAudioPath,
-                  prompt: `${mediaName} (audio)`,
-                  originalDuration: duration,
-                },
-              });
-              
-              console.log('✓ Audio keyframe added to track:', audioTrackId);
-            } else {
-              console.warn('No available audio track found');
-              // Show warning notification
-              setNotification({
-                message: 'No available audio track for extracted audio',
-                type: 'warning',
-              });
-            }
+                duration
+              );
+
+              console.log('Available audio track:', audioTrackId);
+
+              if (audioTrackId) {
+                // Determine track type for audio keyframe
+                const audioTrack = tracks.find(t => t.id === audioTrackId);
+                const audioType = audioTrack?.type === 'voiceover' ? 'voiceover' : 'music';
+
+                // Add synchronized audio keyframe
+                await addKeyframe({
+                  trackId: audioTrackId,
+                  timestamp,
+                  duration,
+                  data: {
+                    type: audioType,
+                    mediaId: `${mediaId}-audio`,
+                    url: normalizedAudioPath,
+                    prompt: `${mediaName} (audio)`,
+                    originalDuration: duration,
+                  },
+                });
+
+                console.log('✓ Audio keyframe added to track:', audioTrackId);
+              } else {
+                console.warn('No available audio track found');
+                // Show warning notification
+                setNotification({
+                  message: 'No available audio track for extracted audio',
+                  type: 'warning',
+                });
+              }
             } else {
               console.log('Video has no audio, skipping extraction');
             }
@@ -470,7 +524,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
       }
 
       // Update keyframe data with final video URL (muted if audio was present)
-      keyframeData.data.url = finalVideoUrl;
+      keyframeData.data.url = finalVideoUrl || '';
 
       // Add video keyframe with muted video URL if audio was present
       await addKeyframe(keyframeData);
@@ -479,7 +533,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
       setValidationError(errorMessage);
       console.error('Failed to handle drop:', error);
     }
-  }, [timelineWidth, durationSeconds, getTrackIdForMediaType, addKeyframe, getMediaDuration, tracks, keyframes]);
+  }, [displayWidth, visualDuration, getTrackIdForMediaType, addKeyframe, getMediaDuration, tracks, keyframes]);
 
   const handleDragOver = useCallback((event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -491,7 +545,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     // Find the keyframe in all tracks
     let sourceKeyframe: VideoKeyFrame | null = null;
     let sourceTrackId: string | null = null;
-    
+
     for (const [trackId, trackKeyframes] of Object.entries(keyframes)) {
       const found = trackKeyframes.find(kf => kf.id === keyframeId);
       if (found) {
@@ -500,12 +554,12 @@ export const VideoTimeline = React.memo(function VideoTimeline({
         break;
       }
     }
-    
+
     if (!sourceKeyframe || !sourceTrackId) {
       console.warn('Source keyframe not found:', keyframeId);
       return;
     }
-    
+
     // If same track, just update timestamp (position change within track)
     if (sourceTrackId === targetTrackId) {
       if (Math.round(timestamp) !== sourceKeyframe.timestamp) {
@@ -514,17 +568,17 @@ export const VideoTimeline = React.memo(function VideoTimeline({
       }
       return;
     }
-    
+
     // Get target track to update media type
     const targetTrack = tracks.find(t => t.id === targetTrackId);
     if (!targetTrack) {
       console.warn('Target track not found:', targetTrackId);
       return;
     }
-    
+
     // Update the keyframe's trackId and media type
     const newMediaType = targetTrack.type === 'voiceover' ? 'voiceover' : 'music';
-    
+
     // Remove from source and add to target
     await removeKeyframe(keyframeId);
     await addKeyframe({
@@ -536,7 +590,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
         type: newMediaType,
       },
     });
-    
+
     console.log(`Moved keyframe ${keyframeId} from ${sourceTrackId} to ${targetTrackId} at ${timestamp}ms`);
   }, [keyframes, tracks, removeKeyframe, addKeyframe, updateKeyframe]);
 
@@ -559,12 +613,12 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     // Or if it's a pinch gesture (ctrlKey is true for trackpad pinch on macOS)
     if (event.altKey || event.ctrlKey) {
       event.preventDefault();
-      
+
       // Calculate zoom delta
       // For trackpad pinch, deltaY is typically smaller and smoother
       // For mouse wheel, deltaY is larger (usually 100 or -100)
       const delta = -event.deltaY * ZOOM_SENSITIVITY;
-      
+
       // Apply zoom with exponential scaling for smoother feel
       const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom * (1 + delta)));
       setZoom(newZoom);
@@ -647,7 +701,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     >
       {/* Validation Error Display */}
       {validationError && (
-        <div 
+        <div
           className="bg-destructive/10 border-l-4 border-destructive p-3 flex items-start gap-2"
           role="alert"
           aria-live="assertive"
@@ -669,7 +723,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
 
       {/* Notification Display */}
       {notification && (
-        <div 
+        <div
           className={cn(
             "border-l-4 p-3 flex items-start gap-2",
             notification.type === 'success' && "bg-green-500/10 border-green-500",
@@ -679,14 +733,14 @@ export const VideoTimeline = React.memo(function VideoTimeline({
           role="status"
           aria-live="polite"
         >
-          <AlertCircle 
+          <AlertCircle
             className={cn(
               "w-5 h-5 flex-shrink-0 mt-0.5",
               notification.type === 'success' && "text-green-500",
               notification.type === 'warning' && "text-yellow-500",
               notification.type === 'error' && "text-destructive"
-            )} 
-            aria-hidden="true" 
+            )}
+            aria-hidden="true"
           />
           <div className="flex-1">
             <p className={cn(
@@ -720,7 +774,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
         zoom={zoom}
         onZoomChange={setZoom}
       />
-      
+
       <div
         ref={timelineRef}
         className="relative overflow-x-auto overflow-y-auto flex-1"
@@ -733,14 +787,13 @@ export const VideoTimeline = React.memo(function VideoTimeline({
         tabIndex={0}
         aria-describedby="timeline-instructions"
       >
-        {/* Timeline content wrapper */}
-        <div className="relative" style={{ width: timelineWidth, minHeight: `${32 + (sortedTracks.length * 68) + 12}px` }}>
+        <div className="relative" style={{ width: displayWidth, minWidth: '100%', minHeight: `${32 + (sortedTracks.length * 68) + 12}px` }}>
           {/* Timeline Ruler - Fixed height area above tracks */}
           <div className="sticky top-0 z-50 bg-zinc-900 border-b border-zinc-700" style={{ height: '32px' }}>
             <TimelineRuler
-              duration={durationSeconds}
+              duration={visualDuration}
               zoom={zoom}
-              timelineWidth={timelineWidth}
+              timelineWidth={displayWidth}
             />
           </div>
 
@@ -771,7 +824,7 @@ export const VideoTimeline = React.memo(function VideoTimeline({
 
           {/* Empty state */}
           {sortedTracks.length === 0 && (
-            <div 
+            <div
               className="absolute inset-0 flex items-center justify-center text-muted-foreground pt-8"
               role="status"
             >

From 79772a52023268e0cfd2a8af30a8ae73423a0835 Mon Sep 17 00:00:00 2001
From: En-gui <wlsdml1114@gmail.com>
Date: Fri, 30 Jan 2026 04:59:12 +0900
Subject: [PATCH 3/5] update slide bar drag

---
 src/components/video-editor/VideoTimeline.tsx | 54 +++++++++++++++++--
 1 file changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/components/video-editor/VideoTimeline.tsx b/src/components/video-editor/VideoTimeline.tsx
index 2217e24..fbebc77 100644
--- a/src/components/video-editor/VideoTimeline.tsx
+++ b/src/components/video-editor/VideoTimeline.tsx
@@ -607,6 +607,44 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     }
   }, []);
 
+  // Handle playhead dragging
+  const handlePlayheadMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const timelineEl = timelineRef.current;
+    if (!timelineEl) return;
+
+    const startX = e.clientX;
+    const rect = timelineEl.getBoundingClientRect();
+
+    // We want to continue tracking mouse anywhere
+    const handleMouseMove = (moveEvent: globalThis.MouseEvent) => {
+      // Calculate relative position including scroll
+      const scrollLeft = timelineEl.scrollLeft || 0;
+      const relativeX = (moveEvent.clientX - rect.left) + scrollLeft;
+
+      // Convert to timestamp
+      const timestamp = Math.max(0, relativeX / pixelsPerSecond);
+
+      // Update timestamp
+      setCurrentTimestamp(timestamp);
+
+      // Seek player
+      if (player && typeof player.seekTo === 'function') {
+        player.seekTo(Math.floor(timestamp * 30)); // 30fps assumption
+      }
+    };
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [pixelsPerSecond, player, setCurrentTimestamp]);
+
   // Handle wheel zoom (Alt+Wheel or Ctrl+Wheel for mouse, pinch for trackpad)
   const handleWheel = useCallback((event: WheelEvent) => {
     // Check if Alt or Ctrl is pressed (for mouse wheel zoom)
@@ -797,14 +835,22 @@ export const VideoTimeline = React.memo(function VideoTimeline({
             />
           </div>
 
-          {/* Playhead indicator */}
+          {/* Playhead indicator - Draggable */}
           <div
-            className="absolute top-0 bottom-0 w-0.5 bg-red-500 z-30 pointer-events-none"
+            className="absolute top-0 bottom-0 z-30 flex justify-center w-4 -ml-2 cursor-ew-resize group touch-none"
             style={{ left: `${playheadPosition}px` }}
-            role="presentation"
+            onMouseDown={handlePlayheadMouseDown}
+            role="slider"
+            aria-valuenow={currentTimestamp}
+            aria-valuemin={0}
+            aria-valuemax={durationSeconds}
             aria-label={t('videoEditor.messages.playheadAt', { time: formatTime(currentTimestamp) })}
+            tabIndex={0}
           >
-            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full" aria-hidden="true" />
+            {/* Visual line */}
+            <div className="w-0.5 h-full bg-red-500 pointer-events-none group-hover:bg-red-400 transition-colors" />
+            {/* Knob */}
+            <div className="absolute top-0 w-3 h-3 bg-red-500 rounded-full pointer-events-none group-hover:bg-red-400 transition-colors shadow-sm" />
           </div>
 
           {/* Track rows - positioned below ruler */}

From d17bc280d5f190f3b1877abe2f71d00554159646 Mon Sep 17 00:00:00 2001
From: En-gui <wlsdml1114@gmail.com>
Date: Fri, 30 Jan 2026 05:24:51 +0900
Subject: [PATCH 4/5] export optimize

---
 src/app/api/video-export/route.ts             | 107 ++++++++++------
 .../video-editor/VideoComposition.tsx         |  94 +++++++-------
 .../video-editor/VideoEditorView.tsx          |  32 ++++-
 src/components/video-editor/VideoTrackRow.tsx |  71 +++++++----
 src/lib/context/StudioContext.tsx             | 115 +++++++++++++++---
 5 files changed, 287 insertions(+), 132 deletions(-)

diff --git a/src/app/api/video-export/route.ts b/src/app/api/video-export/route.ts
index dde43dd..1dafa33 100644
--- a/src/app/api/video-export/route.ts
+++ b/src/app/api/video-export/route.ts
@@ -31,9 +31,9 @@ export async function POST(request: NextRequest) {
     console.log(`📊 Project: ${project.title}, tracks: ${tracks?.length || 0}`);
 
     // Check if there's content
-    const hasContent = tracks?.length > 0 && 
+    const hasContent = tracks?.length > 0 &&
       Object.values(keyframes || {}).some((kfs: any) => kfs?.length > 0);
-    
+
     if (!hasContent) {
       return NextResponse.json({
         success: true,
@@ -77,26 +77,26 @@ export async function POST(request: NextRequest) {
 
     // Convert relative URLs to absolute file paths for Remotion
     const processedKeyframes: Record<string, any[]> = {};
-    
+
     for (const [trackId, kfs] of Object.entries(keyframes || {})) {
       processedKeyframes[trackId] = (kfs as any[]).map((kf: any) => {
         let url = kf.data?.url || kf.url;
-        
+
         // Skip blob URLs - they won't work in server-side rendering
         if (url?.startsWith('blob:')) {
           console.warn(`⚠️ Skipping blob URL for keyframe ${kf.id}`);
           return { ...kf, data: { ...kf.data, url: null } };
         }
-        
+
         // Convert relative URLs to absolute http:// URLs using localhost
         if (url && !url.startsWith('http')) {
           // Ensure URL starts with /
           const urlPath = url.startsWith('/') ? url : `/${url}`;
           url = `http://localhost:3000${urlPath}`;
         }
-        
+
         console.log(`📁 URL for keyframe ${kf.id}: ${url}`);
-        
+
         return {
           ...kf,
           data: { ...kf.data, url },
@@ -117,7 +117,7 @@ export async function POST(request: NextRequest) {
     // Use project's width and height if available, otherwise calculate from aspect ratio
     let outputWidth = project.width;
     let outputHeight = project.height;
-    
+
     if (!outputWidth || !outputHeight) {
       // Fallback to aspect ratio calculation
       switch (project.aspectRatio) {
@@ -138,7 +138,7 @@ export async function POST(request: NextRequest) {
           outputHeight = 1080;
       }
     }
-    
+
     console.log(`📐 Output resolution: ${outputWidth}x${outputHeight} (${project.aspectRatio})`);
 
     // Select composition with explicit dimensions
@@ -147,43 +147,65 @@ export async function POST(request: NextRequest) {
       id: 'MainComposition',
       inputProps,
     });
-    
+
     // Override composition dimensions with project settings
     composition.width = outputWidth;
     composition.height = outputHeight;
 
+    // Calculate duration based on content (latest keyframe end time)
+    let maxDurationMs = 0;
+    for (const [trackId, kfs] of Object.entries(processedKeyframes)) {
+      for (const kf of kfs as any[]) {
+        // Use visual duration (kf.duration) not original data duration
+        const duration = kf.duration || 0;
+        const endTime = (kf.timestamp || 0) + duration;
+        if (endTime > maxDurationMs) {
+          maxDurationMs = endTime;
+        }
+      }
+    }
+
+    // Convert to frames (30 FPS default)
+    const fps = composition.fps || 30;
+    const durationInFrames = Math.max(Math.ceil((maxDurationMs / 1000) * fps), 1);
+    composition.durationInFrames = durationInFrames;
+
+    console.log(`⏱️  Auto-calculated duration: ${maxDurationMs}ms (${durationInFrames} frames)`);
+
     console.log('🎥 Rendering video...');
 
     // Collect audio files for later merging with volume info
     // Audio keyframes have their own timestamps, which are used directly for synchronization
-    const audioFiles: { url: string; startTime: number; volume: number }[] = [];
+    const audioFiles: { url: string; startTime: number; duration: number; volume: number }[] = [];
     for (const [trackId, kfs] of Object.entries(processedKeyframes)) {
       const track = tracks.find((t: any) => t.id === trackId);
       if (track?.type === 'music' || track?.type === 'voiceover') {
         // Skip if track is muted
         if (track.muted) continue;
-        
+
         const trackVolume = track.volume ?? 100;
-        
+
         for (const kf of kfs as any[]) {
           if (kf.data?.url) {
             // Use keyframe volume if set, otherwise use track volume
             const keyframeVolume = kf.data.volume ?? null;
             const finalVolume = keyframeVolume !== null ? keyframeVolume : trackVolume;
-            
+
             // Use the audio keyframe's own timestamp directly
             // This ensures audio starts at the correct time relative to the video timeline
             const audioStartTime = kf.timestamp / 1000; // Convert milliseconds to seconds
-            
+            const audioDuration = kf.duration / 1000; // keyframe duration in seconds
+
             audioFiles.push({
               url: kf.data.url,
               startTime: audioStartTime, // Audio keyframe's timestamp in seconds
+              duration: audioDuration, // Audio duration (trimmed)
               volume: finalVolume / 100, // Convert to 0-2 range (100% = 1.0)
             });
           }
         }
       }
-     }
+    }
 
     // Render the video (without audio from AudioKeyFrame since it uses HTML5 Audio)
     await renderMedia({
@@ -196,51 +218,66 @@ export async function POST(request: NextRequest) {
 
     console.log('✅ Video rendered to:', outputPath);
 
-     // If there are audio files, merge them with FFmpeg
-     if (audioFiles.length > 0) {
+    // If there are audio files, merge them with FFmpeg
+    if (audioFiles.length > 0) {
 
-       const { execSync } = await import('child_process');
+      const { execSync } = await import('child_process');
       const tempVideoPath = outputPath.replace(`.${format}`, `_temp.${format}`);
-      
+
       // Rename original video to temp
       const fs = await import('fs/promises');
       await fs.rename(outputPath, tempVideoPath);
-      
+
       try {
         // Convert URLs to file paths
         const audioPaths = audioFiles.map(af => {
           const audioPath = af.url.startsWith('http://localhost:3000/')
             ? path.join(publicDir, af.url.replace('http://localhost:3000/', ''))
             : af.url;
-          return { path: audioPath, startTime: af.startTime, volume: af.volume };
-         });
+          return { path: audioPath, startTime: af.startTime, duration: af.duration, volume: af.volume };
+        });
 
         if (audioPaths.length === 1) {
           // Single audio file - merge with volume and delay
           const ap = audioPaths[0];
           const delayMs = Math.round(ap.startTime * 1000);
-          // Apply delay and volume using filter_complex
-          const filterComplex = delayMs > 0 || ap.volume !== 1.0
-            ? `-filter_complex "[1:a]volume=${ap.volume}${delayMs > 0 ? `,adelay=${delayMs}|${delayMs}` : ''}[aout]"`
-            : '';
-          const mapAudio = delayMs > 0 || ap.volume !== 1.0 ? '-map "[aout]"' : '-map 1:a:0';
-          const ffmpegCmd = `ffmpeg -y -i "${tempVideoPath}" -i "${ap.path}" ${filterComplex} -c:v copy -c:a aac -map 0:v:0 ${mapAudio} -shortest "${outputPath}"`;
+
+          // Build filter chain: trim -> reset timestamps -> volume -> delay
+          const filters = [];
+          if (ap.duration) filters.push(`atrim=duration=${ap.duration}`);
+          filters.push('asetpts=PTS-STARTPTS');
+          if (ap.volume !== 1.0) filters.push(`volume=${ap.volume}`);
+          if (delayMs > 0) filters.push(`adelay=${delayMs}|${delayMs}`);
+
+          const filterString = filters.join(',');
+          const filterComplex = `-filter_complex "[1:a]${filterString}[aout]"`;
+
+          const ffmpegCmd = `ffmpeg -y -i "${tempVideoPath}" -i "${ap.path}" ${filterComplex} -c:v copy -c:a aac -map 0:v:0 -map "[aout]" -shortest "${outputPath}"`;
           execSync(ffmpegCmd, { stdio: 'pipe' });
         } else {
           // Multiple audio files - mix them together with individual volumes
           // Build FFmpeg filter complex to mix all audio tracks with volume control
           const inputs = audioPaths.map((ap, i) => `-i "${ap.path}"`).join(' ');
-          // Apply volume and delay to each audio track
-          const volumeAndDelays = audioPaths.map((ap, i) => 
-            `[${i + 1}:a]volume=${ap.volume},adelay=${Math.round(ap.startTime * 1000)}|${Math.round(ap.startTime * 1000)}[a${i}]`
-          ).join(';');
+
+          // Apply trim, reset pts, volume, and delay to each audio track
+          const processedInputs = audioPaths.map((ap, i) => {
+            const filters = [];
+            if (ap.duration) filters.push(`atrim=duration=${ap.duration}`);
+            filters.push('asetpts=PTS-STARTPTS');
+            filters.push(`volume=${ap.volume}`);
+            const delayMs = Math.round(ap.startTime * 1000);
+            filters.push(`adelay=${delayMs}|${delayMs}`);
+
+            return `[${i + 1}:a]${filters.join(',')}[a${i}]`;
+          }).join(';');
+
           const mixInputs = audioPaths.map((_, i) => `[a${i}]`).join('');
-           const filterComplex = `${volumeAndDelays};${mixInputs}amix=inputs=${audioPaths.length}:duration=longest[aout]`;
+          const filterComplex = `${processedInputs};${mixInputs}amix=inputs=${audioPaths.length}:duration=longest[aout]`;
 
           const ffmpegCmd = `ffmpeg -y -i "${tempVideoPath}" ${inputs} -filter_complex "${filterComplex}" -map 0:v:0 -map "[aout]" -c:v copy -c:a aac "${outputPath}"`;
           execSync(ffmpegCmd, { stdio: 'pipe' });
         }
-        
+
         // Clean up temp file
         await fs.unlink(tempVideoPath);
         console.log('✅ Audio merged successfully');
diff --git a/src/components/video-editor/VideoComposition.tsx b/src/components/video-editor/VideoComposition.tsx
index cca512c..48928db 100644
--- a/src/components/video-editor/VideoComposition.tsx
+++ b/src/components/video-editor/VideoComposition.tsx
@@ -52,11 +52,11 @@ interface MediaKeyFrameProps {
 function MediaKeyFrame({ keyframe, canvasWidth, canvasHeight }: MediaKeyFrameProps) {
   // Get fit mode from keyframe data, default to 'contain'
   const fitMode: FitMode = keyframe.data.fitMode || 'contain';
-  
+
   // For now, we'll use a placeholder for media dimensions
   // In a real implementation, we would need to load the media to get its actual dimensions
   // For this implementation, we'll use CSS object-fit which handles this automatically
-  
+
   const getObjectFit = (mode: FitMode): 'contain' | 'cover' | 'fill' => {
     switch (mode) {
       case 'contain':
@@ -69,17 +69,17 @@ function MediaKeyFrame({ keyframe, canvasWidth, canvasHeight }: MediaKeyFramePro
         return 'contain';
     }
   };
-  
+
   const objectFit = getObjectFit(fitMode);
-  
+
   // Normalize URL to handle relative paths (especially on Windows)
   const normalizedUrl = keyframe.data.url ? normalizeUrl(keyframe.data.url) : '';
-  
+
   // Debug log for video URLs
   if (keyframe.data.type === 'video' && normalizedUrl) {
     console.log('[VideoComposition] Video URL - original:', keyframe.data.url, 'normalized:', normalizedUrl);
   }
-  
+
   if (keyframe.data.type === 'video') {
     return (
       <OffthreadVideo
@@ -92,7 +92,7 @@ function MediaKeyFrame({ keyframe, canvasWidth, canvasHeight }: MediaKeyFramePro
       />
     );
   }
-  
+
   if (keyframe.data.type === 'image') {
     return (
       <Img
@@ -105,7 +105,7 @@ function MediaKeyFrame({ keyframe, canvasWidth, canvasHeight }: MediaKeyFramePro
       />
     );
   }
-  
+
   return null;
 }
 
@@ -124,7 +124,7 @@ function AudioKeyFrame({ keyframe, trackVolume, trackMuted }: AudioKeyFrameProps
   const lastFrameTimeRef = useRef<number>(Date.now());
   const pauseCheckIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const detectedDurationRef = useRef<number | null>(null);
-  
+
   // Calculate the original audio duration (in seconds)
   // Priority: detected duration > originalDuration > keyframe duration
   const getEffectiveDuration = () => {
@@ -136,15 +136,15 @@ function AudioKeyFrame({ keyframe, trackVolume, trackMuted }: AudioKeyFrameProps
     }
     return keyframe.duration / 1000;
   };
-  
+
   const originalDurationSec = getEffectiveDuration();
-  
+
   // Set up interval to check if playback has stopped (frame not changing)
   useEffect(() => {
     if (keyframe.data.type !== 'music' && keyframe.data.type !== 'voiceover') {
       return;
     }
-    
+
     // Check every 100ms if frame has stopped changing (player paused)
     pauseCheckIntervalRef.current = setInterval(() => {
       const timeSinceLastFrame = Date.now() - lastFrameTimeRef.current;
@@ -153,29 +153,29 @@ function AudioKeyFrame({ keyframe, trackVolume, trackMuted }: AudioKeyFrameProps
         audioRef.current.pause();
       }
     }, 100);
-    
+
     return () => {
       if (pauseCheckIntervalRef.current) {
         clearInterval(pauseCheckIntervalRef.current);
       }
     };
   }, [keyframe.data.type]);
-  
+
   useEffect(() => {
     if (keyframe.data.type !== 'music' && keyframe.data.type !== 'voiceover') {
       return;
     }
-    
+
     // Update last frame time
     lastFrameTimeRef.current = Date.now();
-    
+
     // Create audio element if not exists
     if (!audioRef.current && keyframe.data.url) {
       // Normalize URL to handle relative paths (especially on Windows)
       const normalizedUrl = normalizeUrl(keyframe.data.url);
       audioRef.current = new Audio(normalizedUrl);
       audioRef.current.preload = 'auto';
-      
+
       // Detect actual audio duration when loaded
       audioRef.current.addEventListener('loadedmetadata', () => {
         if (audioRef.current && audioRef.current.duration && isFinite(audioRef.current.duration)) {
@@ -183,33 +183,33 @@ function AudioKeyFrame({ keyframe, trackVolume, trackMuted }: AudioKeyFrameProps
           console.log(`AudioKeyFrame: Detected duration ${audioRef.current.duration}s for ${keyframe.data.url?.substring(0, 50)}...`);
         }
       });
-      
+
       audioRef.current.addEventListener('durationchange', () => {
         if (audioRef.current && audioRef.current.duration && isFinite(audioRef.current.duration)) {
           detectedDurationRef.current = audioRef.current.duration;
         }
       });
     }
-    
+
     const audio = audioRef.current;
-    
+    if (!audio) return;
     // Calculate and apply final volume
     const keyframeVolume = keyframe.data.volume;
     const finalVolume = calculateFinalVolume(trackVolume, keyframeVolume, trackMuted);
     const gain = volumeToGain(finalVolume);
     audio.volume = Math.max(0, Math.min(1, gain)); // Clamp to 0-1 for HTML5 Audio
-    
+
     const currentTimeSec = frame / fps;
-    
+
     // Only update if frame changed significantly (avoid micro-updates)
     if (Math.abs(frame - lastFrameRef.current) < 2 && lastFrameRef.current !== -1) {
       return;
     }
     lastFrameRef.current = frame;
-    
+
     // Use detected duration if available, otherwise fall back to stored duration
     const effectiveDuration = detectedDurationRef.current || originalDurationSec;
-    
+
     // Check if current time is within the audio's actual duration
     if (currentTimeSec >= 0 && currentTimeSec < effectiveDuration) {
       // Sync audio position if it drifted too much (more than 0.3 seconds)
@@ -217,7 +217,7 @@ function AudioKeyFrame({ keyframe, trackVolume, trackMuted }: AudioKeyFrameProps
       if (drift > 0.3 || audio.paused) {
         audio.currentTime = currentTimeSec;
       }
-      
+
       // Play if paused
       if (audio.paused) {
         audio.play().catch(() => {
@@ -231,7 +231,7 @@ function AudioKeyFrame({ keyframe, trackVolume, trackMuted }: AudioKeyFrameProps
       }
     }
   }, [frame, fps, keyframe.data.type, keyframe.data.url, originalDurationSec]);
-  
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {
@@ -245,7 +245,7 @@ function AudioKeyFrame({ keyframe, trackVolume, trackMuted }: AudioKeyFrameProps
       }
     };
   }, []);
-  
+
   // This component doesn't render anything visible
   return null;
 }
@@ -261,13 +261,13 @@ interface TrackSequenceProps {
 function VideoTrackSequence({ track, keyframes, canvasWidth, canvasHeight }: TrackSequenceProps) {
   // Sort keyframes by timestamp
   const sortedKeyframes = [...keyframes].sort((a, b) => a.timestamp - b.timestamp);
-  
+
   return (
     <>
       {sortedKeyframes.map((keyframe) => {
         const startFrame = msToFrames(keyframe.timestamp);
         const durationFrames = msToFrames(keyframe.duration);
-        
+
         return (
           <Sequence
             key={keyframe.id}
@@ -275,10 +275,10 @@ function VideoTrackSequence({ track, keyframes, canvasWidth, canvasHeight }: Tra
             durationInFrames={durationFrames}
           >
             <AbsoluteFill>
-              <MediaKeyFrame 
-                keyframe={keyframe} 
-                canvasWidth={canvasWidth} 
-                canvasHeight={canvasHeight} 
+              <MediaKeyFrame
+                keyframe={keyframe}
+                canvasWidth={canvasWidth}
+                canvasHeight={canvasHeight}
               />
             </AbsoluteFill>
           </Sequence>
@@ -291,28 +291,28 @@ function VideoTrackSequence({ track, keyframes, canvasWidth, canvasHeight }: Tra
 function AudioTrackSequence({ track, keyframes, canvasWidth, canvasHeight }: TrackSequenceProps) {
   // Sort keyframes by timestamp
   const sortedKeyframes = [...keyframes].sort((a, b) => a.timestamp - b.timestamp);
-  
+
   // Get track volume and muted state, with defaults
   const trackVolume = track.volume ?? 100;
   const trackMuted = track.muted ?? false;
-  
+
   return (
     <>
       {sortedKeyframes.map((keyframe) => {
         const startFrame = msToFrames(keyframe.timestamp);
-        // For audio, use originalDuration if available (actual audio length)
-        // This ensures the Sequence doesn't end before the audio finishes
-        const audioDuration = keyframe.data.originalDuration || keyframe.duration;
+        // Use the keyframe's duration (visual duration on timeline) for the Sequence length
+        // This ensures the component unmounts (and audio stops) when the keyframe ends
+        const audioDuration = keyframe.duration;
         const durationFrames = msToFrames(audioDuration);
-        
-        console.log(`AudioTrackSequence: keyframe ${keyframe.id}, duration=${keyframe.duration}ms, originalDuration=${keyframe.data.originalDuration}ms, using=${audioDuration}ms, frames=${durationFrames}`);
-        
+
+        console.log(`AudioTrackSequence: keyframe ${keyframe.id}, duration=${keyframe.duration}ms, frames=${durationFrames}`);
+
         // Skip if no valid URL
         if (!keyframe.data.url) {
           console.warn(`Skipping audio keyframe ${keyframe.id} - no URL`);
           return null;
         }
-        
+
         return (
           <Sequence
             key={keyframe.id}
@@ -320,8 +320,8 @@ function AudioTrackSequence({ track, keyframes, canvasWidth, canvasHeight }: Tra
             durationInFrames={durationFrames}
           >
             {/* HTML5 audio for preview playback */}
-            <AudioKeyFrame 
-              keyframe={keyframe} 
+            <AudioKeyFrame
+              keyframe={keyframe}
               trackVolume={trackVolume}
               trackMuted={trackMuted}
             />
@@ -339,11 +339,11 @@ export function MainComposition({ project, tracks, keyframes }: VideoComposition
   const { width: canvasWidth, height: canvasHeight } = project.width && project.height
     ? { width: project.width, height: project.height }
     : getAspectRatioDimensions(project.aspectRatio);
-  
+
   // Separate tracks by type
   const videoTracks = tracks.filter(t => t.type === 'video');
   const audioTracks = tracks.filter(t => t.type === 'music' || t.type === 'voiceover');
-  
+
   return (
     <AbsoluteFill style={{ backgroundColor: '#000' }}>
       {/* Render video tracks (layered) */}
@@ -359,7 +359,7 @@ export function MainComposition({ project, tracks, keyframes }: VideoComposition
           />
         );
       })}
-      
+
       {/* Render audio tracks */}
       {audioTracks.map((track) => {
         const trackKeyframes = keyframes[track.id] || [];
diff --git a/src/components/video-editor/VideoEditorView.tsx b/src/components/video-editor/VideoEditorView.tsx
index adaa820..e7f763b 100644
--- a/src/components/video-editor/VideoEditorView.tsx
+++ b/src/components/video-editor/VideoEditorView.tsx
@@ -27,6 +27,8 @@ const VideoEditorViewInternal = React.memo(function VideoEditorViewInternal({ pr
     setPlayer,
     setPlayerState,
     setCurrentTimestamp,
+    undo,
+    redo,
   } = useStudio();
 
   const [isLoading, setIsLoading] = useState(true);
@@ -49,14 +51,34 @@ const VideoEditorViewInternal = React.memo(function VideoEditorViewInternal({ pr
 
     loadProjectData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
+    loadProjectData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId]); // Only re-run when projectId changes, not when loadProject reference changes
 
+  // Undo/Redo Keyboard Shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Check for Ctrl+Z or Cmd+Z
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {
+        e.preventDefault();
+        if (e.shiftKey) {
+          redo();
+        } else {
+          undo();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [undo, redo]);
+
   // Note: Tracks are no longer auto-created. Use Import or Add Media to create tracks.
 
   // Loading state - show first
   if (isLoading) {
     return (
-      <div 
+      <div
         className={cn('flex flex-col h-full items-center justify-center', className)}
         role="status"
         aria-live="polite"
@@ -73,7 +95,7 @@ const VideoEditorViewInternal = React.memo(function VideoEditorViewInternal({ pr
   // Error state - check before project not found
   if (error) {
     return (
-      <div 
+      <div
         className={cn('flex flex-col h-full items-center justify-center', className)}
         role="alert"
         aria-live="assertive"
@@ -115,7 +137,7 @@ const VideoEditorViewInternal = React.memo(function VideoEditorViewInternal({ pr
 
   // Main editor view
   return (
-    <div 
+    <div
       className={cn('flex flex-col h-full bg-background overflow-hidden', className)}
       role="application"
       aria-label="Video editor"
@@ -128,7 +150,7 @@ const VideoEditorViewInternal = React.memo(function VideoEditorViewInternal({ pr
         {/* Preview - Lazy loaded - takes remaining space */}
         <div className="flex-1 min-h-[200px] overflow-hidden">
           <Suspense fallback={
-            <div 
+            <div
               className="h-full flex items-center justify-center bg-black/20"
               role="status"
               aria-label="Loading video preview"
@@ -150,7 +172,7 @@ const VideoEditorViewInternal = React.memo(function VideoEditorViewInternal({ pr
         {/* Timeline - Lazy loaded - fixed minimum height based on tracks */}
         <div className="shrink-0" style={{ minHeight: `${timelineMinHeight}px` }}>
           <Suspense fallback={
-            <div 
+            <div
               className="border-t border-border bg-background p-4 text-center"
               role="status"
               aria-label="Loading timeline"
diff --git a/src/components/video-editor/VideoTrackRow.tsx b/src/components/video-editor/VideoTrackRow.tsx
index 39d590f..45990b5 100644
--- a/src/components/video-editor/VideoTrackRow.tsx
+++ b/src/components/video-editor/VideoTrackRow.tsx
@@ -106,7 +106,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
     if (e.detail > 1) {
       return;
     }
-    
+
     // Only select if we didn't drag (click without movement)
     if (!isDraggingRef.current) {
       selectKeyframe(frame.id);
@@ -125,7 +125,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
     return undefined;
   }, [frame.data]);
 
-  const isAudio = useMemo(() => 
+  const isAudio = useMemo(() =>
     frame.data.type === 'music' || frame.data.type === 'voiceover',
     [frame.data.type]
   );
@@ -148,14 +148,14 @@ export const VideoTrackView = React.memo(function VideoTrackView({
     }
 
     e.preventDefault();
-    
+
     const trackElement = trackRef.current;
     if (!trackElement) return;
 
     // Reset drag state
     isDraggingRef.current = false;
     dragStartPosRef.current = { x: e.clientX, y: e.clientY };
-    
+
     const startX = e.clientX;
     const startY = e.clientY;
     const startLeft = trackElement.offsetLeft;
@@ -168,7 +168,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
     // Get all other keyframes for snapping
     const otherKeyframes = allKeyframes.filter(kf => kf.id !== frame.id);
     const snapPoints: number[] = [0];
-    
+
     otherKeyframes.forEach(kf => {
       snapPoints.push(kf.timestamp);
       snapPoints.push(kf.timestamp + kf.duration);
@@ -177,7 +177,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
     const handleMouseMove = (moveEvent: MouseEvent) => {
       const deltaX = moveEvent.clientX - startX;
       const deltaY = moveEvent.clientY - startY;
-      
+
       // Check if we've moved enough to consider it a drag
       if (!isDraggingRef.current && dragStartPosRef.current) {
         const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -185,9 +185,9 @@ export const VideoTrackView = React.memo(function VideoTrackView({
           isDraggingRef.current = true;
         }
       }
-      
+
       if (!isDraggingRef.current) return;
-      
+
       const newLeft = startLeft + deltaX;
       let newTimestamp = Math.max(0, newLeft / pixelsPerMs);
       const clipEnd = newTimestamp + frame.duration;
@@ -206,17 +206,17 @@ export const VideoTrackView = React.memo(function VideoTrackView({
 
       newTimestamp = Math.max(0, newTimestamp);
       trackElement.style.left = `${newTimestamp * pixelsPerMs}px`;
-      
+
       // For audio clips, check if we're hovering over a different track
       if (isAudio) {
         // Find the track element under the mouse
         const elementsUnderMouse = document.elementsFromPoint(moveEvent.clientX, moveEvent.clientY);
         const trackRowElement = elementsUnderMouse.find(el => el.hasAttribute('data-track-id'));
-        
+
         if (trackRowElement) {
           const hoveredTrackId = trackRowElement.getAttribute('data-track-id');
           const hoveredTrackType = trackRowElement.getAttribute('data-track-type');
-          
+
           // Only allow moving to audio tracks
           if (hoveredTrackId && (hoveredTrackType === 'music' || hoveredTrackType === 'voiceover')) {
             targetTrackId = hoveredTrackId;
@@ -224,7 +224,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
             trackRowElement.classList.add('ring-2', 'ring-blue-500');
           }
         }
-        
+
         // Remove highlight from other tracks
         document.querySelectorAll('[data-track-id].ring-2').forEach(el => {
           if (el.getAttribute('data-track-id') !== targetTrackId) {
@@ -237,18 +237,18 @@ export const VideoTrackView = React.memo(function VideoTrackView({
     const handleMouseUp = async () => {
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
-      
+
       // Remove all track highlights
       document.querySelectorAll('[data-track-id].ring-2').forEach(el => {
         el.classList.remove('ring-2', 'ring-blue-500');
       });
-      
+
       const wasDragging = isDraggingRef.current;
-      
+
       // Reset drag state
       isDraggingRef.current = false;
       dragStartPosRef.current = null;
-      
+
       if (!wasDragging) return;
 
       const finalLeft = trackElement.offsetLeft;
@@ -274,7 +274,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
   ) => {
     e.preventDefault();
     e.stopPropagation();
-    
+
     const trackElement = trackRef.current;
     if (!trackElement) return;
 
@@ -295,34 +295,34 @@ export const VideoTrackView = React.memo(function VideoTrackView({
 
     const handleMouseMove = (moveEvent: MouseEvent) => {
       if (!isResizingRef.current) return;
-      
+
       const deltaX = moveEvent.clientX - startX;
       const deltaMs = deltaX / pixelsPerMs;
 
       if (direction === 'right') {
         let newDuration = Math.max(minDuration, startDuration + deltaMs);
         const newEnd = startTimestamp + newDuration;
-        
+
         for (const snapPoint of snapPoints) {
           if (Math.abs(newEnd - snapPoint) < SNAP_THRESHOLD_MS) {
             newDuration = snapPoint - startTimestamp;
             break;
           }
         }
-        
+
         newDuration = Math.max(minDuration, newDuration);
         trackElement.style.width = `${newDuration * pixelsPerMs}px`;
       } else {
         const rightEdge = startTimestamp + startDuration;
         let newTimestamp = Math.max(0, startTimestamp + deltaMs);
-        
+
         for (const snapPoint of snapPoints) {
           if (Math.abs(newTimestamp - snapPoint) < SNAP_THRESHOLD_MS) {
             newTimestamp = snapPoint;
             break;
           }
         }
-        
+
         newTimestamp = Math.max(0, newTimestamp);
         const newDuration = Math.max(minDuration, rightEdge - newTimestamp);
 
@@ -334,7 +334,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
     const handleMouseUp = async () => {
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
-      
+
       if (!isResizingRef.current) return;
       isResizingRef.current = false;
 
@@ -417,9 +417,9 @@ export const VideoTrackView = React.memo(function VideoTrackView({
           style={
             imageUrl
               ? {
-                  background: `url(${imageUrl})`,
-                  backgroundSize: 'auto 100%',
-                }
+                background: `url(${imageUrl})`,
+                backgroundSize: 'auto 100%',
+              }
               : undefined
           }
         >
@@ -437,7 +437,24 @@ export const VideoTrackView = React.memo(function VideoTrackView({
               />
             </div>
           )}
-          
+
+          {/* Left trim handle */}
+          <div
+            data-resize-handle="left"
+            className={cn(
+              'absolute left-0 z-50 top-0 bg-black/20 group-hover:bg-black/40',
+              'rounded-md bottom-0 w-2 m-1 p-px cursor-ew-resize backdrop-blur-md text-white/40',
+              'transition-colors flex flex-col items-center justify-center text-xs tracking-tighter',
+            )}
+            onMouseDown={(e) => handleResize(e, 'left')}
+            draggable={false}
+          >
+            <span className="flex gap-[1px]">
+              <span className="w-px h-2 rounded bg-white/40" />
+              <span className="w-px h-2 rounded bg-white/40" />
+            </span>
+          </div>
+
           {/* Right trim handle */}
           <div
             data-resize-handle="right"
diff --git a/src/lib/context/StudioContext.tsx b/src/lib/context/StudioContext.tsx
index ed400ca..0228e25 100644
--- a/src/lib/context/StudioContext.tsx
+++ b/src/lib/context/StudioContext.tsx
@@ -186,6 +186,12 @@ interface StudioContextType {
     deselectKeyframe: (keyframeId: string) => void;
     clearSelection: () => void;
     setExportDialogOpen: (open: boolean) => void;
+
+    // History
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
 }
 
 const StudioContext = createContext<StudioContextType | undefined>(undefined);
@@ -212,6 +218,65 @@ export function StudioProvider({ children }: { children: ReactNode }) {
     const [selectedKeyframeIds, setSelectedKeyframeIds] = useState<string[]>([]);
     const [exportDialogOpen, setExportDialogOpen] = useState<boolean>(false);
 
+    // History State
+    const [history, setHistory] = useState<Record<string, VideoKeyFrame[]>[]>([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+
+    // Helper to record history
+    // Helper to record history
+    const recordHistory = (newState: Record<string, VideoKeyFrame[]>) => {
+        // Deep clone to ensure immutability
+        const snapshot = JSON.parse(JSON.stringify(newState));
+
+        setHistory(prev => {
+            // If this is the first action, save the INITIAL state (which is 'keyframes' before this action)
+            // But we can't access 'keyframes' clean state easily here if we are in a callback.
+            // We rely on the fact that when we start editing, we trust the history flow.
+            // To fix "first undo", we ensure history starts populated or we push [old, new].
+
+            const slicedHistory = prev.slice(0, historyIndex + 1);
+
+            // If history was empty, we need the base state.
+            // We use the current 'keyframes' state as the base.
+            let newHistory = slicedHistory;
+            if (slicedHistory.length === 0) {
+                const baseState = JSON.parse(JSON.stringify(keyframes));
+                newHistory = [baseState];
+            }
+
+            return [...newHistory, snapshot];
+        });
+
+        setHistoryIndex(prev => {
+            if (prev === -1) return 1; // 0 was base, 1 is new
+            return prev + 1;
+        });
+    };
+
+    const undo = () => {
+        if (historyIndex > 0) {
+            const prevIndex = historyIndex - 1;
+            setKeyframes(history[prevIndex]);
+            setHistoryIndex(prevIndex);
+        } else if (historyIndex === 0) {
+            // Undo to initial empty state or initial loaded state if we tracked it?
+            // Currently we only track changes.
+            // Let's assume history[0] is the first state pushed.
+            // If we are at index 0, we can't undo further unless we saved initial state.
+        }
+    };
+
+    const redo = () => {
+        if (historyIndex < history.length - 1) {
+            const nextIndex = historyIndex + 1;
+            setKeyframes(history[nextIndex]);
+            setHistoryIndex(nextIndex);
+        }
+    };
+
+    const canUndo = historyIndex > 0;
+    const canRedo = historyIndex < history.length - 1;
+
     // Jobs should always come from DB, not localStorage
     const [jobs, setJobs] = useState<Job[]>([]);
 
@@ -697,6 +762,11 @@ export function StudioProvider({ children }: { children: ReactNode }) {
         }
     };
 
+    // Initialize history with loaded keyframes?
+    // We should probably clear history when a project is loaded contextually.
+    // The loadProject function is where we should reset history.
+
+
     // Initial Load
     useEffect(() => {
         console.log('🚀 StudioContext: Initial load, fetching workspaces and projects...');
@@ -1299,10 +1369,13 @@ export function StudioProvider({ children }: { children: ReactNode }) {
             id: `keyframe-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
         };
 
-        setKeyframes(prev => ({
-            ...prev,
-            [keyframe.trackId]: [...(prev[keyframe.trackId] || []), newKeyframe],
-        }));
+        const nextKeyframes = { ...keyframes };
+        nextKeyframes[keyframe.trackId] = [...(nextKeyframes[keyframe.trackId] || []), newKeyframe];
+
+        // Record history
+        recordHistory(nextKeyframes);
+
+        setKeyframes(nextKeyframes);
 
         try {
             // Transform keyframe data to match API expectations
@@ -1340,16 +1413,16 @@ export function StudioProvider({ children }: { children: ReactNode }) {
     };
 
     const updateKeyframe = async (keyframeId: string, updates: Partial<VideoKeyFrame>): Promise<void> => {
-        setKeyframes(prev => {
-            const updated = { ...prev };
-            Object.keys(updated).forEach(trackId => {
-                updated[trackId] = updated[trackId].map(kf =>
-                    kf.id === keyframeId ? { ...kf, ...updates } : kf
-                );
-            });
-            return updated;
+        const nextKeyframes = { ...keyframes };
+        Object.keys(nextKeyframes).forEach(trackId => {
+            nextKeyframes[trackId] = nextKeyframes[trackId].map(kf =>
+                kf.id === keyframeId ? { ...kf, ...updates } : kf
+            );
         });
 
+        recordHistory(nextKeyframes);
+        setKeyframes(nextKeyframes);
+
         try {
             // Transform updates for API - extract data fields to top level
             const apiUpdates: any = {};
@@ -1378,14 +1451,14 @@ export function StudioProvider({ children }: { children: ReactNode }) {
     };
 
     const removeKeyframe = async (keyframeId: string): Promise<void> => {
-        setKeyframes(prev => {
-            const updated = { ...prev };
-            Object.keys(updated).forEach(trackId => {
-                updated[trackId] = updated[trackId].filter(kf => kf.id !== keyframeId);
-            });
-            return updated;
+        const nextKeyframes = { ...keyframes };
+        Object.keys(nextKeyframes).forEach(trackId => {
+            nextKeyframes[trackId] = nextKeyframes[trackId].filter(kf => kf.id !== keyframeId);
         });
 
+        recordHistory(nextKeyframes);
+        setKeyframes(nextKeyframes);
+
         try {
             await fetch(`/api/video-keyframes/${keyframeId}`, {
                 method: 'DELETE',
@@ -1466,6 +1539,12 @@ export function StudioProvider({ children }: { children: ReactNode }) {
             deselectKeyframe,
             clearSelection,
             setExportDialogOpen,
+
+            // History
+            undo,
+            redo,
+            canUndo,
+            canRedo,
         }}>
             {children}
         </StudioContext.Provider>

From 70b99ccd76bccb66a052c395a599d8f2f32b8d5f Mon Sep 17 00:00:00 2001
From: En-gui <wlsdml1114@gmail.com>
Date: Tue, 3 Feb 2026 17:38:07 +0900
Subject: [PATCH 5/5] optimize track management & background color

---
 .../video-editor/TimelineControls.tsx         | 54 ++++++++++++++++++-
 src/components/video-editor/VideoTimeline.tsx | 27 +++++-----
 src/components/video-editor/VideoTrackRow.tsx | 39 ++++++++++----
 src/lib/context/StudioContext.tsx             |  2 +-
 src/lib/i18n/translations.ts                  | 10 ++++
 5 files changed, 107 insertions(+), 25 deletions(-)

diff --git a/src/components/video-editor/TimelineControls.tsx b/src/components/video-editor/TimelineControls.tsx
index 85c02e5..d04ae62 100644
--- a/src/components/video-editor/TimelineControls.tsx
+++ b/src/components/video-editor/TimelineControls.tsx
@@ -12,7 +12,17 @@ import {
   SkipForward,
   ChevronsLeft,
   ChevronsRight,
+  Plus,
+  Video,
+  Music,
+  Mic,
 } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 
 const MIN_ZOOM = 0.1;
 const MAX_ZOOM = 10;
@@ -33,9 +43,23 @@ export const TimelineControls = React.memo(function TimelineControls({
   className,
   ...props
 }: TimelineControlsProps) {
-  const { player, playerState, setPlayerState, setCurrentTimestamp } = useStudio();
+  const { player, playerState, setPlayerState, setCurrentTimestamp, addTrack, currentProject } = useStudio();
   const { t } = useI18n();
 
+  const handleAddTrack = useCallback(async (type: 'video' | 'audio') => {
+    if (!currentProject) return;
+
+    await addTrack({
+      projectId: currentProject.id,
+      type,
+      label: type === 'video' ? 'Video Track' : 'Audio Track',
+      locked: false,
+      muted: false,
+      order: 0, // Order is handled by backend or reducer usually, but providing 0 is safe
+      volume: 100
+    });
+  }, [addTrack, currentProject]);
+
   // Format time as MM:SS.ms - memoized
   const formatTime = useCallback((seconds: number): string => {
     const mins = Math.floor(seconds / 60);
@@ -254,7 +278,33 @@ export const TimelineControls = React.memo(function TimelineControls({
       </div>
 
       {/* Empty spacer for balance */}
-      <div className="w-[150px]" />
+      {/* Track Controls */}
+      <div className="flex items-center gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="h-8 gap-1.5 bg-zinc-800 border-zinc-700 hover:bg-zinc-700">
+              <Plus className="h-3.5 w-3.5" />
+              <span className="text-xs">{t('videoEditor.tracks.addTrack')}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48 bg-zinc-900 border-zinc-800">
+            <DropdownMenuItem
+              className="cursor-pointer focus:bg-zinc-800 focus:text-white"
+              onClick={() => handleAddTrack('video')}
+            >
+              <Video className="mr-2 h-4 w-4" />
+              <span>{t('videoEditor.tracks.addVideoTrack')}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer focus:bg-zinc-800 focus:text-white"
+              onClick={() => handleAddTrack('audio')}
+            >
+              <Music className="mr-2 h-4 w-4" />
+              <span>{t('videoEditor.tracks.addAudioTrack')}</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
     </div>
   );
 });
diff --git a/src/components/video-editor/VideoTimeline.tsx b/src/components/video-editor/VideoTimeline.tsx
index fbebc77..76fcdb7 100644
--- a/src/components/video-editor/VideoTimeline.tsx
+++ b/src/components/video-editor/VideoTimeline.tsx
@@ -143,19 +143,20 @@ export const VideoTimeline = React.memo(function VideoTimeline({
 
   const getTrackIdForMediaType = useCallback(async (mediaType: string): Promise<string> => {
     // Map media type to track type
-    let trackType: 'video' | 'music' | 'voiceover';
-    if (mediaType === 'image' || mediaType === 'video') {
-      trackType = 'video';
-    } else if (mediaType === 'music') {
-      trackType = 'music';
-    } else if (mediaType === 'tts' || mediaType === 'voiceover') {
-      trackType = 'voiceover';
-    } else {
-      trackType = 'voiceover'; // fallback
-    }
+    // Map media type to track type
+    const isVideoType = mediaType === 'image' || mediaType === 'video';
+    const targetTrackType = isVideoType ? 'video' : 'audio';
 
     // Find existing track of this type
-    const existingTrack = tracks.find(t => t.type === trackType);
+    // For audio, we allow dropping on audio, music, or voiceover tracks
+    const existingTrack = tracks.find(t => {
+      if (isVideoType) {
+        return t.type === 'video';
+      } else {
+        return t.type === 'audio' || t.type === 'music' || t.type === 'voiceover';
+      }
+    });
+
     if (existingTrack) {
       return existingTrack.id;
     }
@@ -163,8 +164,8 @@ export const VideoTimeline = React.memo(function VideoTimeline({
     // Create new track
     const trackId = await addTrack({
       projectId: project.id,
-      type: trackType,
-      label: `${trackType.charAt(0).toUpperCase() + trackType.slice(1)} Track`,
+      type: targetTrackType,
+      label: isVideoType ? 'Video Track' : 'Audio Track',
       locked: false,
       order: tracks.length,
       volume: 100, // Default volume
diff --git a/src/components/video-editor/VideoTrackRow.tsx b/src/components/video-editor/VideoTrackRow.tsx
index 45990b5..61d9666 100644
--- a/src/components/video-editor/VideoTrackRow.tsx
+++ b/src/components/video-editor/VideoTrackRow.tsx
@@ -11,6 +11,7 @@ const trackIcons = {
   video: VideoIcon,
   music: MusicIcon,
   voiceover: MicIcon,
+  audio: MusicIcon,
 };
 
 type VideoTrackRowProps = {
@@ -33,7 +34,14 @@ export const VideoTrackRow = React.memo(function VideoTrackRow({
   const trackRowRef = useRef<HTMLDivElement>(null);
 
   // Check if this track can accept audio drops (for visual styling)
-  const canAcceptAudioDrop = track.type === 'music' || track.type === 'voiceover';
+  const canAcceptAudioDrop = track.type === 'music' || track.type === 'voiceover' || track.type === 'audio';
+  const { removeTrack } = useStudio();
+
+  const handleRemoveTrack = useCallback(() => {
+    if (confirm('Are you sure you want to delete this track?')) {
+      removeTrack(track.id);
+    }
+  }, [removeTrack, track.id]);
 
   return (
     <div className="flex flex-col">
@@ -42,15 +50,29 @@ export const VideoTrackRow = React.memo(function VideoTrackRow({
         ref={trackRowRef}
         className={cn(
           'relative w-full timeline-container h-16',
-          'flex flex-col select-none rounded shrink-0',
-          // Add subtle background for audio tracks to show drop zone
-          canAcceptAudioDrop ? 'bg-white/5' : 'bg-transparent',
+          'flex flex-col select-none rounded shrink-0 group',
+          // Add subtle background for tracks to distinguish lanes
+          track.type === 'video' ? 'bg-sky-500/10 border-l-4 border-l-sky-500/20' :
+            'bg-teal-500/10 border-l-4 border-l-teal-500/20',
           className
         )}
         data-track-id={track.id}
         data-track-type={track.type}
         {...props}
       >
+        <div className="sticky left-2 z-10 w-6 h-6 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleRemoveTrack();
+            }}
+            className="w-6 h-6 flex items-center justify-center rounded-full bg-red-500/20 hover:bg-red-500 text-red-200 hover:text-white transition-colors"
+            title="Delete Track"
+          >
+            <TrashIcon className="w-3.5 h-3.5" />
+          </button>
+        </div>
+
         {(keyframes || []).map((frame) => (
           <VideoTrackView
             key={frame.id}
@@ -126,7 +148,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
   }, [frame.data]);
 
   const isAudio = useMemo(() =>
-    frame.data.type === 'music' || frame.data.type === 'voiceover',
+    frame.data.type === 'music' || frame.data.type === 'voiceover' || (frame.data.type as string) === 'audio',
     [frame.data.type]
   );
 
@@ -218,7 +240,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
           const hoveredTrackType = trackRowElement.getAttribute('data-track-type');
 
           // Only allow moving to audio tracks
-          if (hoveredTrackId && (hoveredTrackType === 'music' || hoveredTrackType === 'voiceover')) {
+          if (hoveredTrackId && (hoveredTrackType === 'music' || hoveredTrackType === 'voiceover' || hoveredTrackType === 'audio')) {
             targetTrackId = hoveredTrackId;
             // Visual feedback - highlight the target track
             trackRowElement.classList.add('ring-2', 'ring-blue-500');
@@ -380,8 +402,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
           'flex flex-col select-none rounded overflow-hidden group h-full',
           {
             'bg-sky-600': track.type === 'video',
-            'bg-teal-500': track.type === 'music',
-            'bg-indigo-500': track.type === 'voiceover',
+            'bg-teal-500': track.type === 'music' || track.type === 'voiceover' || track.type === 'audio',
           },
         )}
       >
@@ -430,7 +451,7 @@ export const VideoTrackView = React.memo(function VideoTrackView({
                 url={frame.data.url}
                 width={Math.max(50, clipWidth - 20)}
                 height={36}
-                color={track.type === 'music' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 255, 255, 0.6)'}
+                color={'rgba(255, 255, 255, 0.5)'}
                 clipDuration={frame.duration}
                 originalDuration={frame.data.originalDuration}
                 volume={frame.data.volume ?? track.volume ?? 100}
diff --git a/src/lib/context/StudioContext.tsx b/src/lib/context/StudioContext.tsx
index 0228e25..92c52a2 100644
--- a/src/lib/context/StudioContext.tsx
+++ b/src/lib/context/StudioContext.tsx
@@ -95,7 +95,7 @@ export interface VideoProject {
 export interface VideoTrack {
     id: string;
     projectId: string;
-    type: 'video' | 'music' | 'voiceover';
+    type: 'video' | 'audio' | 'music' | 'voiceover';
     label: string;
     locked: boolean;
     order: number;
diff --git a/src/lib/i18n/translations.ts b/src/lib/i18n/translations.ts
index 0527039..d37ba96 100644
--- a/src/lib/i18n/translations.ts
+++ b/src/lib/i18n/translations.ts
@@ -777,6 +777,11 @@ export const translations = {
         emptyTimeline: '타임라인이 비어 있습니다',
         dragMediaHere: '미디어를 여기에 드래그하세요'
       },
+      tracks: {
+        addTrack: '트랙 추가',
+        addVideoTrack: '비디오 트랙 추가',
+        addAudioTrack: '오디오 트랙 추가'
+      },
       controls: {
         play: '재생 (Space)',
         pause: '일시정지 (Space)',
@@ -1846,6 +1851,11 @@ export const translations = {
         emptyTimeline: 'Timeline is empty',
         dragMediaHere: 'Drag media here'
       },
+      tracks: {
+        addTrack: 'Add Track',
+        addVideoTrack: 'Add Video Track',
+        addAudioTrack: 'Add Audio Track'
+      },
       controls: {
         play: 'Play (Space)',
         pause: 'Pause (Space)',