lyrics-transcriber 0.43.0__py3-none-any.whl → 0.44.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/shared/types.ts

@@ -58,6 +58,11 @@ export interface WordProps {
     isCurrentlyPlaying?: boolean
     padding?: string
     onClick?: () => void
+    correction?: {
+        originalWord: string
+        handler: string
+        confidence: number
+    } | null
 }
 
 // Text segment props
@@ -100,11 +105,21 @@ export interface ReferenceViewProps extends BaseViewProps {
 // Update HighlightedTextProps to include linePositions
 export interface HighlightedTextProps extends BaseViewProps {
     text?: string
-    wordPositions?: TranscriptionWordPosition[]
+    segments?: LyricsSegment[]
+    wordPositions: TranscriptionWordPosition[] | ReferenceWordPosition[]
     anchors: AnchorSequence[]
-    gaps: GapSequence[]
+    highlightInfo: HighlightInfo | null
+    mode: InteractionMode
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    flashingType: FlashType
     isReference?: boolean
     currentSource?: string
     preserveSegments?: boolean
     linePositions?: LinePosition[]
+    currentTime?: number
+    referenceCorrections?: Map<string, string>
+    gaps?: GapSequence[]
+    flashingHandler?: string | null
+    corrections?: WordCorrection[]
 } 

lyrics_transcriber/frontend/src/components/shared/utils/keyboardHandlers.ts

@@ -4,7 +4,7 @@ let isModalOpen = false
 
 type KeyboardState = {
     setIsShiftPressed: (value: boolean) => void
-    setIsCtrlPressed: (value: boolean) => void
+    setIsCtrlPressed?: (value: boolean) => void
     modalHandler?: {
         isOpen: boolean
         onSpacebar?: (e: KeyboardEvent) => void
@@ -13,6 +13,14 @@ type KeyboardState = {
 
 // Add functions to update the modal handler state
 export const setModalHandler = (handler: ((e: KeyboardEvent) => void) | undefined, open: boolean) => {
+    console.log('setModalHandler called', {
+        hasHandler: !!handler,
+        open,
+        previousState: {
+            hadHandler: !!currentModalHandler,
+            wasOpen: isModalOpen
+        }
+    })
     currentModalHandler = handler
     isModalOpen = open
 }
@@ -22,6 +30,17 @@ export const setupKeyboardHandlers = (state: KeyboardState) => {
     console.log(`Setting up keyboard handlers [${handlerId}]`)
 
     const handleKeyDown = (e: KeyboardEvent) => {
+        console.log(`Keyboard event captured [${handlerId}]`, {
+            key: e.key,
+            code: e.code,
+            type: e.type,
+            target: e.target,
+            currentTarget: e.currentTarget,
+            eventPhase: e.eventPhase,
+            isModalOpen,
+            hasModalHandler: !!currentModalHandler
+        })
+
         if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
             console.log(`[${handlerId}] Ignoring keydown in input/textarea`)
             return
@@ -31,37 +50,67 @@ export const setupKeyboardHandlers = (state: KeyboardState) => {
             state.setIsShiftPressed(true)
             document.body.style.userSelect = 'none'
         } else if (e.key === 'Meta') {
-            state.setIsCtrlPressed(true)
+            state.setIsCtrlPressed?.(true)
         } else if (e.key === ' ' || e.code === 'Space') {
-            console.log(`[${handlerId}] Spacebar pressed:`, {
+            console.log('Keyboard handler - Spacebar pressed down', {
                 modalOpen: isModalOpen,
                 hasModalHandler: !!currentModalHandler,
-                hasGlobalToggle: !!window.toggleAudioPlayback
+                hasGlobalToggle: !!window.toggleAudioPlayback,
+                target: e.target,
+                eventPhase: e.eventPhase,
+                handlerFunction: currentModalHandler?.toString().slice(0, 100)
             })
-            
+
             e.preventDefault()
-            
-            // If modal is open and has a handler, use that
+
             if (isModalOpen && currentModalHandler) {
-                console.log(`[${handlerId}] Using modal spacebar handler`)
+                console.log('Keyboard handler - Delegating to modal handler')
                 currentModalHandler(e)
-            } 
-            // Otherwise use global audio control
-            else if (window.toggleAudioPlayback && !isModalOpen) {
-                console.log(`[${handlerId}] Using global audio toggle`)
+            } else if (window.toggleAudioPlayback && !isModalOpen) {
+                console.log('Keyboard handler - Using global audio toggle')
                 window.toggleAudioPlayback()
             }
         }
     }
 
     const handleKeyUp = (e: KeyboardEvent) => {
+        console.log(`Keyboard up event captured [${handlerId}]`, {
+            key: e.key,
+            code: e.code,
+            type: e.type,
+            target: e.target,
+            eventPhase: e.eventPhase,
+            isModalOpen,
+            hasModalHandler: !!currentModalHandler
+        })
+
         if (e.key === 'Shift') {
             state.setIsShiftPressed(false)
             document.body.style.userSelect = ''
         } else if (e.key === 'Meta') {
-            state.setIsCtrlPressed(false)
+            state.setIsCtrlPressed?.(false)
+        } else if (e.key === ' ' || e.code === 'Space') {
+            console.log('Keyboard handler - Spacebar released', {
+                modalOpen: isModalOpen,
+                hasModalHandler: !!currentModalHandler,
+                target: e.target,
+                eventPhase: e.eventPhase
+            })
+
+            e.preventDefault()
+
+            if (isModalOpen && currentModalHandler) {
+                console.log('Keyboard handler - Delegating keyup to modal handler')
+                currentModalHandler(e)
+            }
         }
     }
 
     return { handleKeyDown, handleKeyUp }
-} 
+}
+
+// Export these for external use
+export const getModalState = () => ({
+    currentModalHandler,
+    isModalOpen
+}) 

lyrics_transcriber/frontend/src/components/shared/utils/segmentOperations.ts

@@ -117,5 +117,197 @@ export const updateSegment = (
 
     newData.corrected_segments[segmentIndex] = updatedSegment
 
+    return newData
+}
+
+export function mergeSegment(data: CorrectionData, segmentIndex: number, mergeWithNext: boolean): CorrectionData {
+    const segments = [...data.corrected_segments]
+    const targetIndex = mergeWithNext ? segmentIndex + 1 : segmentIndex - 1
+
+    // Check if target segment exists
+    if (targetIndex < 0 || targetIndex >= segments.length) {
+        return data
+    }
+
+    const baseSegment = segments[segmentIndex]
+    const targetSegment = segments[targetIndex]
+    
+    // Create merged segment
+    const mergedSegment: LyricsSegment = {
+        id: nanoid(),
+        words: mergeWithNext 
+            ? [...baseSegment.words, ...targetSegment.words]
+            : [...targetSegment.words, ...baseSegment.words],
+        text: mergeWithNext
+            ? `${baseSegment.text} ${targetSegment.text}`
+            : `${targetSegment.text} ${baseSegment.text}`,
+        start_time: Math.min(
+            baseSegment.start_time ?? Infinity,
+            targetSegment.start_time ?? Infinity
+        ),
+        end_time: Math.max(
+            baseSegment.end_time ?? -Infinity,
+            targetSegment.end_time ?? -Infinity
+        )
+    }
+
+    // Replace the two segments with the merged one
+    const minIndex = Math.min(segmentIndex, targetIndex)
+    segments.splice(minIndex, 2, mergedSegment)
+
+    return {
+        ...data,
+        corrected_segments: segments
+    }
+}
+
+export function findAndReplace(
+    data: CorrectionData,
+    findText: string,
+    replaceText: string,
+    options: { caseSensitive: boolean, useRegex: boolean, fullTextMode?: boolean } = { 
+        caseSensitive: false, 
+        useRegex: false,
+        fullTextMode: false
+    }
+): CorrectionData {
+    const newData = { ...data }
+    
+    // If full text mode is enabled, perform replacements across word boundaries
+    if (options.fullTextMode) {
+        newData.corrected_segments = data.corrected_segments.map(segment => {
+            // Create a pattern for the full segment text
+            let pattern: RegExp
+            
+            if (options.useRegex) {
+                pattern = new RegExp(findText, options.caseSensitive ? 'g' : 'gi')
+            } else {
+                const escapedFindText = findText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+                pattern = new RegExp(escapedFindText, options.caseSensitive ? 'g' : 'gi')
+            }
+            
+            // Get the full segment text
+            const segmentText = segment.text
+            
+            // If no matches, return the segment unchanged
+            if (!pattern.test(segmentText)) {
+                return segment
+            }
+            
+            // Reset pattern for replacement
+            pattern.lastIndex = 0
+            
+            // Replace in the full segment text
+            const newSegmentText = segmentText.replace(pattern, replaceText)
+            
+            // Split the new text into words
+            const newWordTexts = newSegmentText.trim().split(/\s+/).filter(text => text.length > 0)
+            
+            // Create new word objects
+            // We'll try to preserve original word IDs and timing info where possible
+            const newWords = []
+            
+            // If we have the same number of words, we can preserve IDs and timing
+            if (newWordTexts.length === segment.words.length) {
+                for (let i = 0; i < newWordTexts.length; i++) {
+                    newWords.push({
+                        ...segment.words[i],
+                        text: newWordTexts[i]
+                    })
+                }
+            } 
+            // If we have fewer words than before, some words were removed
+            else if (newWordTexts.length < segment.words.length) {
+                // Try to map new words to old words
+                let oldWordIndex = 0
+                for (let i = 0; i < newWordTexts.length; i++) {
+                    // Find the next non-empty old word
+                    while (oldWordIndex < segment.words.length && 
+                           segment.words[oldWordIndex].text.trim() === '') {
+                        oldWordIndex++
+                    }
+                    
+                    if (oldWordIndex < segment.words.length) {
+                        newWords.push({
+                            ...segment.words[oldWordIndex],
+                            text: newWordTexts[i]
+                        })
+                        oldWordIndex++
+                    } else {
+                        // If we run out of old words, create new ones
+                        newWords.push({
+                            id: nanoid(),
+                            text: newWordTexts[i],
+                            start_time: null,
+                            end_time: null
+                        })
+                    }
+                }
+            }
+            // If we have more words than before, some words were added
+            else {
+                // Try to preserve original words where possible
+                for (let i = 0; i < newWordTexts.length; i++) {
+                    if (i < segment.words.length) {
+                        newWords.push({
+                            ...segment.words[i],
+                            text: newWordTexts[i]
+                        })
+                    } else {
+                        // For new words, create new IDs
+                        newWords.push({
+                            id: nanoid(),
+                            text: newWordTexts[i],
+                            start_time: null,
+                            end_time: null
+                        })
+                    }
+                }
+            }
+            
+            return {
+                ...segment,
+                words: newWords,
+                text: newSegmentText
+            }
+        })
+    } 
+    // Word-level replacement (original implementation)
+    else {
+        newData.corrected_segments = data.corrected_segments.map(segment => {
+            // Replace in each word
+            let newWords = segment.words.map(word => {
+                let pattern: RegExp
+                
+                if (options.useRegex) {
+                    // Create regex with or without case sensitivity
+                    pattern = new RegExp(findText, options.caseSensitive ? 'g' : 'gi')
+                } else {
+                    // Escape special regex characters for literal search
+                    const escapedFindText = findText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+                    pattern = new RegExp(escapedFindText, options.caseSensitive ? 'g' : 'gi')
+                }
+                
+                return {
+                    ...word,
+                    text: word.text.replace(pattern, replaceText)
+                }
+            });
+
+            // Filter out words that have become empty
+            newWords = newWords.filter(word => word.text.trim() !== '');
+
+            // Update segment text
+            return {
+                ...segment,
+                words: newWords,
+                text: newWords.map(w => w.text).join(' ')
+            }
+        });
+    }
+
+    // Filter out segments that have no words left
+    newData.corrected_segments = newData.corrected_segments.filter(segment => segment.words.length > 0);
+
     return newData
 } 

lyrics_transcriber/frontend/src/hooks/useManualSync.ts

@@ -0,0 +1,267 @@
+import { useState, useCallback, useEffect, useRef } from 'react'
+import { LyricsSegment, Word } from '../types'
+
+interface UseManualSyncProps {
+    editedSegment: LyricsSegment | null
+    currentTime: number
+    onPlaySegment?: (startTime: number) => void
+    updateSegment: (words: Word[]) => void
+}
+
+// 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 OVERLAP_BUFFER = 0.01 // Buffer to prevent word overlap (10ms)
+
+export default function useManualSync({
+    editedSegment,
+    currentTime,
+    onPlaySegment,
+    updateSegment
+}: UseManualSyncProps) {
+    const [isManualSyncing, setIsManualSyncing] = 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)
+
+    // Keep currentTimeRef up to date
+    useEffect(() => {
+        currentTimeRef.current = currentTime
+    }, [currentTime])
+
+    // Keep wordsRef up to date
+    useEffect(() => {
+        if (editedSegment) {
+            wordsRef.current = [...editedSegment.words]
+        }
+    }, [editedSegment])
+
+    const cleanupManualSync = useCallback(() => {
+        setIsManualSyncing(false)
+        setSyncWordIndex(-1)
+        setIsSpacebarPressed(false)
+        wordStartTimeRef.current = null
+        spacebarPressTimeRef.current = null
+    }, [])
+
+    const handleKeyDown = useCallback((e: KeyboardEvent) => {
+        if (e.code !== 'Space') return
+        
+        console.log('useManualSync - Spacebar pressed down', {
+            isManualSyncing,
+            hasEditedSegment: !!editedSegment,
+            syncWordIndex,
+            currentTime: currentTimeRef.current
+        })
+
+        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
+            })
+            
+            setIsSpacebarPressed(true)
+            
+            // Record the start time of the current word
+            wordStartTimeRef.current = currentTimeRef.current
+            
+            // Record when the spacebar was pressed (for tap detection)
+            spacebarPressTimeRef.current = Date.now()
+            
+            // Update the word's start time immediately
+            if (syncWordIndex < editedSegment.words.length) {
+                const newWords = [...wordsRef.current]
+                const currentWord = newWords[syncWordIndex]
+                
+                // Set the start time for the current word
+                currentWord.start_time = currentTimeRef.current
+                
+                // Update our ref
+                wordsRef.current = newWords
+                
+                // Update the segment
+                updateSegment(newWords)
+            }
+        } else if (!isManualSyncing && editedSegment && onPlaySegment) {
+            console.log('useManualSync - Handling segment playback')
+            // Toggle segment playback when not in manual sync mode
+            const startTime = editedSegment.start_time ?? 0
+            const endTime = editedSegment.end_time ?? 0
+
+            if (currentTimeRef.current >= startTime && currentTimeRef.current <= endTime) {
+                if (window.toggleAudioPlayback) {
+                    window.toggleAudioPlayback()
+                }
+            } else {
+                onPlaySegment(startTime)
+            }
+        }
+    }, [isManualSyncing, editedSegment, syncWordIndex, onPlaySegment, updateSegment, isSpacebarPressed])
+
+    const handleKeyUp = useCallback((e: KeyboardEvent) => {
+        if (e.code !== 'Space') return
+        
+        console.log('useManualSync - Spacebar released', {
+            isManualSyncing,
+            hasEditedSegment: !!editedSegment,
+            syncWordIndex,
+            currentTime: currentTimeRef.current,
+            wordStartTime: wordStartTimeRef.current
+        })
+
+        e.preventDefault()
+        e.stopPropagation()
+
+        if (isManualSyncing && editedSegment && isSpacebarPressed) {
+            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
+            
+            console.log('useManualSync - Recording word end time', {
+                wordIndex: syncWordIndex,
+                wordText: currentWord?.text,
+                startTime: wordStartTimeRef.current,
+                endTime: currentTimeRef.current,
+                pressDuration: `${pressDuration}ms`,
+                isTap,
+                duration: currentWord ? (currentTimeRef.current - (wordStartTimeRef.current || 0)).toFixed(2) + 's' : 'N/A'
+            })
+            
+            setIsSpacebarPressed(false)
+            
+            if (syncWordIndex < editedSegment.words.length) {
+                const newWords = [...wordsRef.current]
+                const currentWord = newWords[syncWordIndex]
+                
+                // Set the end time for the current word based on whether it was a tap or hold
+                if (isTap) {
+                    // For a tap, set a default duration
+                    const defaultEndTime = (wordStartTimeRef.current || currentTimeRef.current) + DEFAULT_WORD_DURATION
+                    currentWord.end_time = defaultEndTime
+                    console.log('useManualSync - Tap detected, setting default duration', {
+                        defaultEndTime,
+                        duration: DEFAULT_WORD_DURATION
+                    })
+                } else {
+                    // For a hold, use the current time as the end time
+                    currentWord.end_time = currentTimeRef.current
+                }
+                
+                // Update our ref
+                wordsRef.current = newWords
+                
+                // Move to the next word
+                if (syncWordIndex === editedSegment.words.length - 1) {
+                    // If this was the last word, finish manual sync
+                    console.log('useManualSync - Completed manual sync for all words')
+                    setIsManualSyncing(false)
+                    setSyncWordIndex(-1)
+                    wordStartTimeRef.current = null
+                    spacebarPressTimeRef.current = null
+                } else {
+                    // Otherwise, move to the next word
+                    const nextWord = editedSegment.words[syncWordIndex + 1]
+                    console.log('useManualSync - Moving to next word', {
+                        nextWordIndex: syncWordIndex + 1,
+                        nextWordText: nextWord?.text
+                    })
+                    setSyncWordIndex(syncWordIndex + 1)
+                }
+                
+                // Update the segment
+                updateSegment(newWords)
+            }
+        }
+    }, [isManualSyncing, editedSegment, syncWordIndex, updateSegment, isSpacebarPressed])
+
+    // Add a handler for when the next word starts to adjust previous word's end time if needed
+    useEffect(() => {
+        if (isManualSyncing && editedSegment && syncWordIndex > 0) {
+            const newWords = [...wordsRef.current]
+            const prevWord = newWords[syncWordIndex - 1]
+            const currentWord = newWords[syncWordIndex]
+            
+            // If the previous word's end time overlaps with the current word's start time,
+            // adjust the previous word's end time
+            if (prevWord && currentWord && 
+                prevWord.end_time !== null && currentWord.start_time !== null &&
+                prevWord.end_time > currentWord.start_time) {
+                
+                console.log('useManualSync - Adjusting previous word end time to prevent overlap', {
+                    prevWordIndex: syncWordIndex - 1,
+                    prevWordText: prevWord.text,
+                    prevWordEndTime: prevWord.end_time,
+                    currentWordStartTime: currentWord.start_time,
+                    newEndTime: currentWord.start_time - OVERLAP_BUFFER
+                })
+                
+                prevWord.end_time = currentWord.start_time - OVERLAP_BUFFER
+                
+                // Update our ref
+                wordsRef.current = newWords
+                
+                // Update the segment
+                updateSegment(newWords)
+            }
+        }
+    }, [syncWordIndex, isManualSyncing, editedSegment, updateSegment])
+
+    // Combine the key handlers into a single function for external use
+    const handleSpacebar = useCallback((e: KeyboardEvent) => {
+        if (e.type === 'keydown') {
+            handleKeyDown(e)
+        } else if (e.type === 'keyup') {
+            handleKeyUp(e)
+        }
+    }, [handleKeyDown, handleKeyUp])
+
+    const startManualSync = useCallback(() => {
+        if (isManualSyncing) {
+            cleanupManualSync()
+            return
+        }
+
+        if (!editedSegment || !onPlaySegment) return
+
+        // Make sure we have the latest words
+        wordsRef.current = [...editedSegment.words]
+        
+        setIsManualSyncing(true)
+        setSyncWordIndex(0)
+        setIsSpacebarPressed(false)
+        wordStartTimeRef.current = null
+        spacebarPressTimeRef.current = null
+        // 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
+    useEffect(() => {
+        if (!editedSegment) return
+
+        const endTime = editedSegment.end_time ?? 0
+
+        if (window.isAudioPlaying && currentTimeRef.current > endTime) {
+            console.log('Stopping playback: current time exceeded end time')
+            window.toggleAudioPlayback?.()
+            cleanupManualSync()
+        }
+    }, [isManualSyncing, editedSegment, currentTimeRef, cleanupManualSync])
+
+    return {
+        isManualSyncing,
+        syncWordIndex,
+        startManualSync,
+        cleanupManualSync,
+        handleSpacebar,
+        isSpacebarPressed
+    }
+} 

lyrics_transcriber/frontend/src/main.tsx

@@ -1,6 +1,12 @@
 import ReactDOM from 'react-dom/client'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
 import App from './App'
+import theme from './theme'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <App />
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <App />
+  </ThemeProvider>
 )