lyrics-transcriber 0.68.0__py3-none-any.whl → 0.69.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/TimelineEditor.tsx

@@ -7,6 +7,7 @@ interface TimelineEditorProps {
     startTime: number
     endTime: number
     onWordUpdate: (index: number, updates: Partial<Word>) => void
+    onUnsyncWord?: (index: number) => void
     currentTime?: number
     onPlaySegment?: (time: number) => void
     showPlaybackIndicator?: boolean
@@ -114,7 +115,7 @@ const TimelineCursor = styled(Box)(({ theme }) => ({
     zIndex: 1, // Ensure it's above other elements
 }))
 
-export default function TimelineEditor({ words, startTime, endTime, onWordUpdate, currentTime = 0, onPlaySegment, showPlaybackIndicator = true }: TimelineEditorProps) {
+export default function TimelineEditor({ words, startTime, endTime, onWordUpdate, onUnsyncWord, currentTime = 0, onPlaySegment, showPlaybackIndicator = true }: TimelineEditorProps) {
     const containerRef = useRef<HTMLDivElement>(null)
     const [dragState, setDragState] = useState<{
         wordIndex: number
@@ -157,29 +158,21 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
         const position = ((time - startTime) / duration) * 100
         return Math.max(0, Math.min(100, position))
     }
-
     const generateTimelineMarks = () => {
         const marks = []
         const startSecond = Math.floor(startTime)
         const endSecond = Math.ceil(endTime)
 
-        // Generate marks for each 0.1 second interval
-        for (let time = startSecond; time <= endSecond; time += 0.1) {
+        // Generate marks for each second
+        for (let time = startSecond; time <= endSecond; time++) {
             if (time >= startTime && time <= endTime) {
                 const position = timeToPosition(time)
-                const isFullSecond = Math.abs(time - Math.round(time)) < 0.001
-
                 marks.push(
                     <Box key={time}>
-                        <TimelineMark
-                            className={isFullSecond ? '' : 'subsecond'}
-                            sx={{ left: `${position}%` }}
-                        />
-                        {isFullSecond && (
-                            <TimelineLabel sx={{ left: `${position}%` }}>
-                                {Math.round(time)}s
-                            </TimelineLabel>
-                        )}
+                        <TimelineMark sx={{ left: `${position}%` }} />
+                        <TimelineLabel sx={{ left: `${position}%` }}>
+                            {time}s
+                        </TimelineLabel>
                     </Box>
                 )
             }
@@ -276,6 +269,24 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
         setDragState(null)
     }
 
+    const handleContextMenu = (e: React.MouseEvent, wordIndex: number) => {
+        e.preventDefault()
+        e.stopPropagation()
+        
+        // Only unsync synced words
+        const word = words[wordIndex]
+        if (word.start_time === null || word.end_time === null) return
+        
+        // Directly unsync the word without showing a menu
+        if (onUnsyncWord) {
+            console.log('TimelineEditor - Right-click unsync word', {
+                wordIndex,
+                wordText: word.text
+            })
+            onUnsyncWord(wordIndex)
+        }
+    }
+
     const isWordHighlighted = (word: Word): boolean => {
         if (!currentTime || word.start_time === null || word.end_time === null) return false
         return currentTime >= word.start_time && currentTime <= word.end_time
@@ -319,13 +330,12 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
             )}
 
             {words.map((word, index) => {
-                // Skip words with null timestamps
+                // Only render synced words on the timeline
                 if (word.start_time === null || word.end_time === null) return null;
-
+                
                 const leftPosition = timeToPosition(word.start_time)
                 const rightPosition = timeToPosition(word.end_time)
                 const width = rightPosition - leftPosition
-                // Remove the visual padding that creates gaps
                 const adjustedWidth = width
 
                 return (
@@ -341,6 +351,7 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
                             e.stopPropagation()
                             handleMouseDown(e, index, 'move')
                         }}
+                        onContextMenu={(e) => handleContextMenu(e, index)}
                     >
                         <ResizeHandle
                             className="left"

lyrics_transcriber/frontend/src/hooks/useManualSync.ts

@@ -10,7 +10,7 @@ interface UseManualSyncProps {
 
 // Constants for tap detection
 const TAP_THRESHOLD_MS = 200 // If spacebar is pressed for less than this time, it's considered a tap
-const DEFAULT_WORD_DURATION = 1.0 // Default duration in seconds when tapping
+const DEFAULT_WORD_DURATION = 0.5 // Default duration in seconds when tapping (500ms)
 const OVERLAP_BUFFER = 0.01 // Buffer to prevent word overlap (10ms)
 
 export default function useManualSync({
@@ -20,12 +20,16 @@ export default function useManualSync({
     updateSegment
 }: UseManualSyncProps) {
     const [isManualSyncing, setIsManualSyncing] = useState(false)
+    const [isPaused, setIsPaused] = useState(false)
     const [syncWordIndex, setSyncWordIndex] = useState<number>(-1)
     const currentTimeRef = useRef(currentTime)
     const [isSpacebarPressed, setIsSpacebarPressed] = useState(false)
     const wordStartTimeRef = useRef<number | null>(null)
     const wordsRef = useRef<Word[]>([])
     const spacebarPressTimeRef = useRef<number | null>(null)
+    
+    // Use ref to track if we need to update segment to avoid calling it too frequently
+    const needsSegmentUpdateRef = useRef(false)
 
     // Keep currentTimeRef up to date
     useEffect(() => {
@@ -39,14 +43,70 @@ export default function useManualSync({
         }
     }, [editedSegment])
 
+    // Debounced segment update to batch multiple word changes
+    useEffect(() => {
+        if (needsSegmentUpdateRef.current) {
+            needsSegmentUpdateRef.current = false
+            updateSegment(wordsRef.current)
+        }
+    }, [updateSegment, syncWordIndex]) // Only update when syncWordIndex changes
+
     const cleanupManualSync = useCallback(() => {
         setIsManualSyncing(false)
+        setIsPaused(false)
         setSyncWordIndex(-1)
         setIsSpacebarPressed(false)
         wordStartTimeRef.current = null
         spacebarPressTimeRef.current = null
+        needsSegmentUpdateRef.current = false
+        
+        // Stop audio playback when cleaning up manual sync
+        if (window.toggleAudioPlayback && window.isAudioPlaying) {
+            window.toggleAudioPlayback()
+        }
     }, [])
 
+    const pauseManualSync = useCallback(() => {
+        if (isManualSyncing && !isPaused) {
+            console.log('useManualSync - Pausing manual sync')
+            setIsPaused(true)
+            // Pause audio playback
+            if (window.toggleAudioPlayback && window.isAudioPlaying) {
+                window.toggleAudioPlayback()
+            }
+        }
+    }, [isManualSyncing, isPaused])
+
+    const resumeManualSync = useCallback(() => {
+        if (isManualSyncing && isPaused) {
+            console.log('useManualSync - Resuming manual sync')
+            setIsPaused(false)
+            
+            // Find the first unsynced word and resume from there
+            if (editedSegment) {
+                const firstUnsyncedIndex = editedSegment.words.findIndex(word => 
+                    word.start_time === null || word.end_time === null
+                )
+                
+                if (firstUnsyncedIndex !== -1 && firstUnsyncedIndex !== syncWordIndex) {
+                    console.log('useManualSync - Resuming from first unsynced word', {
+                        previousIndex: syncWordIndex,
+                        newIndex: firstUnsyncedIndex,
+                        wordText: editedSegment.words[firstUnsyncedIndex]?.text
+                    })
+                    setSyncWordIndex(firstUnsyncedIndex)
+                } else {
+                    console.log('useManualSync - Resuming from current position', { syncWordIndex })
+                }
+            }
+            
+            // Resume audio playback if we have an onPlaySegment function
+            if (onPlaySegment && currentTimeRef.current !== undefined) {
+                onPlaySegment(currentTimeRef.current)
+            }
+        }
+    }, [isManualSyncing, isPaused, onPlaySegment, editedSegment, syncWordIndex])
+
     const handleKeyDown = useCallback((e: KeyboardEvent) => {
         if (e.code !== 'Space') return
         
@@ -60,14 +120,7 @@ export default function useManualSync({
         e.preventDefault()
         e.stopPropagation()
 
-        if (isManualSyncing && editedSegment && !isSpacebarPressed) {
-            const currentWord = syncWordIndex < editedSegment.words.length ? editedSegment.words[syncWordIndex] : null
-            console.log('useManualSync - Recording word start time', {
-                wordIndex: syncWordIndex,
-                wordText: currentWord?.text,
-                time: currentTimeRef.current
-            })
-            
+        if (isManualSyncing && editedSegment && !isSpacebarPressed && !isPaused) {
             setIsSpacebarPressed(true)
             
             // Record the start time of the current word
@@ -80,18 +133,86 @@ export default function useManualSync({
             if (syncWordIndex < editedSegment.words.length) {
                 const newWords = [...wordsRef.current]
                 const currentWord = newWords[syncWordIndex]
+                const currentStartTime = currentTimeRef.current
                 
                 // Set the start time for the current word
-                currentWord.start_time = currentTimeRef.current
+                currentWord.start_time = currentStartTime
+                
+                // Handle the end time of the previous word (if it exists)
+                if (syncWordIndex > 0) {
+                    const previousWord = newWords[syncWordIndex - 1]
+                    if (previousWord.start_time !== null) {
+                        const timeSincePreviousStart = currentStartTime - previousWord.start_time
+                        
+                        // Only adjust previous word's end time if:
+                        // 1. It doesn't have an end time set yet (was never released), OR
+                        // 2. The current start would overlap with existing end time
+                        const needsAdjustment = previousWord.end_time === null || 
+                                              (previousWord.end_time !== null && previousWord.end_time > currentStartTime)
+                        
+                        if (needsAdjustment) {
+                            if (timeSincePreviousStart > 1.0) {
+                                // Gap of over 1 second - set previous word's end time to 500ms after its start
+                                previousWord.end_time = previousWord.start_time + 0.5
+                                console.log('useManualSync - Gap detected, setting previous word end time to +500ms', {
+                                    previousWordIndex: syncWordIndex - 1,
+                                    previousWordText: previousWord.text,
+                                    previousStartTime: previousWord.start_time,
+                                    previousEndTime: previousWord.end_time,
+                                    gap: timeSincePreviousStart.toFixed(2) + 's',
+                                    reason: 'gap > 1s'
+                                })
+                            } else {
+                                // Normal flow - set previous word's end time to current word's start time minus 5ms
+                                previousWord.end_time = currentStartTime - 0.005
+                                console.log('useManualSync - Setting previous word end time to current start - 5ms', {
+                                    previousWordIndex: syncWordIndex - 1,
+                                    previousWordText: previousWord.text,
+                                    previousEndTime: previousWord.end_time,
+                                    currentStartTime: currentStartTime,
+                                    gap: timeSincePreviousStart.toFixed(2) + 's',
+                                    reason: 'normal flow'
+                                })
+                            }
+                        } else {
+                            console.log('useManualSync - Preserving previous word timing (manually set)', {
+                                previousWordIndex: syncWordIndex - 1,
+                                previousWordText: previousWord.text,
+                                previousStartTime: previousWord.start_time,
+                                previousEndTime: previousWord.end_time,
+                                preservedDuration: previousWord.end_time !== null ? 
+                                    (previousWord.end_time - previousWord.start_time).toFixed(2) + 's' : 'N/A',
+                                reason: 'already timed correctly'
+                            })
+                        }
+                    }
+                }
+                
+                console.log('useManualSync - Recording word start time', {
+                    wordIndex: syncWordIndex,
+                    wordText: currentWord?.text,
+                    time: currentStartTime
+                })
                 
                 // Update our ref
                 wordsRef.current = newWords
                 
-                // Update the segment
-                updateSegment(newWords)
+                // Mark that we need to update the segment
+                needsSegmentUpdateRef.current = true
             }
         } else if (!isManualSyncing && editedSegment && onPlaySegment) {
-            console.log('useManualSync - Handling segment playback')
+            console.log('useManualSync - Handling segment playback', {
+                editedSegmentId: editedSegment.id,
+                isGlobalReplacement: editedSegment.id === 'global-replacement'
+            })
+            
+            // For global replacement segments, don't handle general playback
+            // since we want the user to use Manual Sync instead
+            if (editedSegment.id === 'global-replacement') {
+                console.log('useManualSync - Ignoring playback for global replacement - please use Manual Sync')
+                return
+            }
+            
             // Toggle segment playback when not in manual sync mode
             const startTime = editedSegment.start_time ?? 0
             const endTime = editedSegment.end_time ?? 0
@@ -104,7 +225,7 @@ export default function useManualSync({
                 onPlaySegment(startTime)
             }
         }
-    }, [isManualSyncing, editedSegment, syncWordIndex, onPlaySegment, updateSegment, isSpacebarPressed])
+    }, [isManualSyncing, editedSegment, syncWordIndex, onPlaySegment, isSpacebarPressed, isPaused])
 
     const handleKeyUp = useCallback((e: KeyboardEvent) => {
         if (e.code !== 'Space') return
@@ -120,7 +241,7 @@ export default function useManualSync({
         e.preventDefault()
         e.stopPropagation()
 
-        if (isManualSyncing && editedSegment && isSpacebarPressed) {
+        if (isManualSyncing && editedSegment && isSpacebarPressed && !isPaused) {
             const currentWord = syncWordIndex < editedSegment.words.length ? editedSegment.words[syncWordIndex] : null
             const pressDuration = spacebarPressTimeRef.current ? Date.now() - spacebarPressTimeRef.current : 0
             const isTap = pressDuration < TAP_THRESHOLD_MS
@@ -132,6 +253,7 @@ export default function useManualSync({
                 endTime: currentTimeRef.current,
                 pressDuration: `${pressDuration}ms`,
                 isTap,
+                tapThreshold: TAP_THRESHOLD_MS,
                 duration: currentWord ? (currentTimeRef.current - (wordStartTimeRef.current || 0)).toFixed(2) + 's' : 'N/A'
             })
             
@@ -147,12 +269,20 @@ export default function useManualSync({
                     const defaultEndTime = (wordStartTimeRef.current || currentTimeRef.current) + DEFAULT_WORD_DURATION
                     currentWord.end_time = defaultEndTime
                     console.log('useManualSync - Tap detected, setting default duration', {
+                        wordText: currentWord.text,
+                        startTime: wordStartTimeRef.current,
                         defaultEndTime,
                         duration: DEFAULT_WORD_DURATION
                     })
                 } else {
                     // For a hold, use the current time as the end time
                     currentWord.end_time = currentTimeRef.current
+                    console.log('useManualSync - Hold detected, using actual timing', {
+                        wordText: currentWord.text,
+                        startTime: wordStartTimeRef.current,
+                        endTime: currentTimeRef.current,
+                        actualDuration: (currentTimeRef.current - (wordStartTimeRef.current || 0)).toFixed(2) + 's'
+                    })
                 }
                 
                 // Update our ref
@@ -176,11 +306,11 @@ export default function useManualSync({
                     setSyncWordIndex(syncWordIndex + 1)
                 }
                 
-                // Update the segment
-                updateSegment(newWords)
+                // Mark that we need to update the segment
+                needsSegmentUpdateRef.current = true
             }
         }
-    }, [isManualSyncing, editedSegment, syncWordIndex, updateSegment, isSpacebarPressed])
+    }, [isManualSyncing, editedSegment, syncWordIndex, isSpacebarPressed, isPaused])
 
     // Add a handler for when the next word starts to adjust previous word's end time if needed
     useEffect(() => {
@@ -208,11 +338,11 @@ export default function useManualSync({
                 // Update our ref
                 wordsRef.current = newWords
                 
-                // Update the segment
-                updateSegment(newWords)
+                // Mark that we need to update the segment
+                needsSegmentUpdateRef.current = true
             }
         }
-    }, [syncWordIndex, isManualSyncing, editedSegment, updateSegment])
+    }, [syncWordIndex, isManualSyncing, editedSegment])
 
     // Combine the key handlers into a single function for external use
     const handleSpacebar = useCallback((e: KeyboardEvent) => {
@@ -234,32 +364,70 @@ export default function useManualSync({
         // Make sure we have the latest words
         wordsRef.current = [...editedSegment.words]
         
+        // Find the first unsynced word to start from
+        const firstUnsyncedIndex = editedSegment.words.findIndex(word => 
+            word.start_time === null || word.end_time === null
+        )
+        
+        const startIndex = firstUnsyncedIndex !== -1 ? firstUnsyncedIndex : 0
+        
+        console.log('useManualSync - Starting manual sync', {
+            totalWords: editedSegment.words.length,
+            startingFromIndex: startIndex,
+            startingWord: editedSegment.words[startIndex]?.text
+        })
+        
         setIsManualSyncing(true)
-        setSyncWordIndex(0)
+        setSyncWordIndex(startIndex)
         setIsSpacebarPressed(false)
         wordStartTimeRef.current = null
         spacebarPressTimeRef.current = null
+        needsSegmentUpdateRef.current = false
         // Start playing 3 seconds before segment start
         onPlaySegment((editedSegment.start_time ?? 0) - 3)
     }, [isManualSyncing, editedSegment, onPlaySegment, cleanupManualSync])
 
-    // Auto-stop sync if we go past the end time
+    // Auto-stop sync if we go past the end time (but not for global replacement segments)
     useEffect(() => {
-        if (!editedSegment) return
+        if (!editedSegment || !isManualSyncing) return
 
-        const endTime = editedSegment.end_time ?? 0
+        // Don't auto-stop for global replacement segments - let user manually finish
+        if (editedSegment.id === 'global-replacement') {
+            console.log('useManualSync - Skipping auto-stop for global replacement segment')
+            return
+        }
 
-        if (window.isAudioPlaying && currentTimeRef.current > endTime) {
-            console.log('Stopping playback: current time exceeded end time')
-            window.toggleAudioPlayback?.()
-            cleanupManualSync()
+        // Set up an interval to check if we should auto-stop
+        const checkAutoStop = () => {
+            const endTime = editedSegment.end_time ?? 0
+            
+            if (window.isAudioPlaying && currentTimeRef.current > endTime) {
+                console.log('useManualSync - Auto-stopping: current time exceeded end time', {
+                    currentTime: currentTimeRef.current,
+                    endTime,
+                    segmentId: editedSegment.id
+                })
+                window.toggleAudioPlayback?.()
+                cleanupManualSync()
+            }
+        }
+
+        // Check immediately and then every 100ms
+        checkAutoStop()
+        const intervalId = setInterval(checkAutoStop, 100)
+
+        return () => {
+            clearInterval(intervalId)
         }
-    }, [isManualSyncing, editedSegment, currentTimeRef, cleanupManualSync])
+    }, [isManualSyncing, editedSegment, cleanupManualSync])
 
     return {
         isManualSyncing,
+        isPaused,
         syncWordIndex,
         startManualSync,
+        pauseManualSync,
+        resumeManualSync,
         cleanupManualSync,
         handleSpacebar,
         isSpacebarPressed

lyrics_transcriber/frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/api.ts","./src/main.tsx","./src/theme.ts","./src/types.ts","./src/validation.ts","./src/vite-env.d.ts","./src/components/AddLyricsModal.tsx","./src/components/AudioPlayer.tsx","./src/components/CorrectionMetrics.tsx","./src/components/EditActionBar.tsx","./src/components/EditModal.tsx","./src/components/EditTimelineSection.tsx","./src/components/EditWordList.tsx","./src/components/FileUpload.tsx","./src/components/FindReplaceModal.tsx","./src/components/Header.tsx","./src/components/LyricsAnalyzer.tsx","./src/components/ModeSelector.tsx","./src/components/PreviewVideoSection.tsx","./src/components/ReferenceView.tsx","./src/components/ReviewChangesModal.tsx","./src/components/SegmentDetailsModal.tsx","./src/components/TimelineEditor.tsx","./src/components/TimingOffsetModal.tsx","./src/components/TranscriptionView.tsx","./src/components/WordDivider.tsx","./src/components/shared/constants.ts","./src/components/shared/styles.ts","./src/components/shared/types.ts","./src/components/shared/components/HighlightedText.tsx","./src/components/shared/components/SourceSelector.tsx","./src/components/shared/components/Word.tsx","./src/components/shared/hooks/useWordClick.ts","./src/components/shared/utils/keyboardHandlers.ts","./src/components/shared/utils/localStorage.ts","./src/components/shared/utils/referenceLineCalculator.ts","./src/components/shared/utils/segmentOperations.ts","./src/components/shared/utils/timingUtils.ts","./src/components/shared/utils/wordUtils.ts","./src/hooks/useManualSync.ts","./src/types/global.d.ts"],"version":"5.6.3"}
+{"root":["./src/App.tsx","./src/api.ts","./src/main.tsx","./src/theme.ts","./src/types.ts","./src/validation.ts","./src/vite-env.d.ts","./src/components/AddLyricsModal.tsx","./src/components/AudioPlayer.tsx","./src/components/CorrectionMetrics.tsx","./src/components/EditActionBar.tsx","./src/components/EditModal.tsx","./src/components/EditTimelineSection.tsx","./src/components/EditWordList.tsx","./src/components/FileUpload.tsx","./src/components/FindReplaceModal.tsx","./src/components/Header.tsx","./src/components/LyricsAnalyzer.tsx","./src/components/ModeSelector.tsx","./src/components/PreviewVideoSection.tsx","./src/components/ReferenceView.tsx","./src/components/ReplaceAllLyricsModal.tsx","./src/components/ReviewChangesModal.tsx","./src/components/SegmentDetailsModal.tsx","./src/components/TimelineEditor.tsx","./src/components/TimingOffsetModal.tsx","./src/components/TranscriptionView.tsx","./src/components/WordDivider.tsx","./src/components/shared/constants.ts","./src/components/shared/styles.ts","./src/components/shared/types.ts","./src/components/shared/components/HighlightedText.tsx","./src/components/shared/components/SourceSelector.tsx","./src/components/shared/components/Word.tsx","./src/components/shared/hooks/useWordClick.ts","./src/components/shared/utils/keyboardHandlers.ts","./src/components/shared/utils/localStorage.ts","./src/components/shared/utils/referenceLineCalculator.ts","./src/components/shared/utils/segmentOperations.ts","./src/components/shared/utils/timingUtils.ts","./src/components/shared/utils/wordUtils.ts","./src/hooks/useManualSync.ts","./src/types/global.d.ts"],"version":"5.6.3"}