lyrics-transcriber 0.40.0__py3-none-any.whl → 0.42.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -41,11 +41,14 @@ export default function TranscriptionView({
     onElementClick,
     onWordClick,
     flashingType,
+    flashingHandler,
     highlightInfo,
     mode,
     onPlaySegment,
-    currentTime = 0
+    currentTime = 0,
+    anchors = []
 }: TranscriptionViewProps) {
+    console.log('TranscriptionView props:', { flashingType, flashingHandler });
     const [selectedSegmentIndex, setSelectedSegmentIndex] = useState<number | null>(null)
 
     return (
@@ -56,31 +59,49 @@ export default function TranscriptionView({
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                 {data.corrected_segments.map((segment, segmentIndex) => {
                     const segmentWords: TranscriptionWordPosition[] = segment.words.map(word => {
+                        // Find if this word is part of a correction
+                        const correction = data.corrections?.find(c => 
+                            c.corrected_word_id === word.id || 
+                            c.word_id === word.id
+                        )
+
+                        // Find if this word is part of an anchor sequence
                         const anchor = data.anchor_sequences?.find(a =>
-                            a?.word_ids?.includes(word.id)
+                            a.transcribed_word_ids.includes(word.id)
                         )
 
-                        // If not in an anchor, check if it belongs to a gap sequence
-                        const gap = !anchor ? data.gap_sequences?.find(g =>
-                            g?.word_ids?.includes(word.id)
-                        ) : undefined
+                        // If not in anchor, check if it belongs to a gap sequence
+                        const gap = data.gap_sequences?.find(g => {
+                            // Check transcribed words
+                            const inTranscribed = g.transcribed_word_ids.includes(word.id)
 
-                        // Check if this specific word has been corrected
-                        const isWordCorrected = gap?.corrections?.some(
-                            correction => correction.word_id === word.id
-                        )
+                            // Check reference words
+                            const inReference = Object.values(g.reference_word_ids).some(ids =>
+                                ids.includes(word.id)
+                            )
+
+                            // Check if this word is a corrected version
+                            const isCorrection = data.corrections.some(c =>
+                                (c.corrected_word_id === word.id || c.word_id === word.id) &&
+                                g.transcribed_word_ids.includes(c.word_id)
+                            )
+
+                            return inTranscribed || inReference || isCorrection
+                        })
 
                         return {
                             word: {
                                 id: word.id,
                                 text: word.text,
-                                start_time: word.start_time,
-                                end_time: word.end_time
+                                start_time: word.start_time ?? undefined,
+                                end_time: word.end_time ?? undefined
                             },
                             type: anchor ? 'anchor' : gap ? 'gap' : 'other',
                             sequence: anchor || gap,
+                            sequencePosition: anchor?.transcription_position ?? gap?.transcription_position ?? undefined,
                             isInRange: true,
-                            isCorrected: isWordCorrected
+                            isCorrected: Boolean(correction),
+                            gap: gap
                         }
                     })
 
@@ -93,10 +114,10 @@ export default function TranscriptionView({
                                 >
                                     {segmentIndex}
                                 </SegmentIndex>
-                                {segment.start_time !== undefined && (
+                                {segment.start_time !== null && (
                                     <IconButton
                                         size="small"
-                                        onClick={() => onPlaySegment?.(segment.start_time)}
+                                        onClick={() => onPlaySegment?.(segment.start_time!)}
                                         sx={{ padding: '2px' }}
                                     >
                                         <PlayCircleOutlineIcon fontSize="small" />
@@ -106,14 +127,17 @@ export default function TranscriptionView({
                             <TextContainer>
                                 <HighlightedText
                                     wordPositions={segmentWords}
-                                    anchors={data.anchor_sequences}
+                                    anchors={anchors}
                                     onElementClick={onElementClick}
                                     onWordClick={onWordClick}
                                     flashingType={flashingType}
+                                    flashingHandler={flashingHandler}
                                     highlightInfo={highlightInfo}
                                     mode={mode}
                                     preserveSegments={true}
                                     currentTime={currentTime}
+                                    gaps={data.gap_sequences}
+                                    corrections={data.corrections}
                                 />
                             </TextContainer>
                         </Box>

lyrics_transcriber/frontend/src/components/WordEditControls.tsx

@@ -15,7 +15,7 @@ export function useWordEdit(content: ModalContent | null) {
 
     useEffect(() => {
         if (content) {
-            setEditedWord(content.type === 'gap' ? content.data.word : content.type === 'anchor' ? content.data.words[0] : '')
+            setEditedWord(content.data.word || '')
             setIsEditing(false)
         }
     }, [content])
@@ -37,11 +37,7 @@ export default function WordEditControls({ content, onUpdateCorrection, onClose
     } = useWordEdit(content)
 
     const handleStartEdit = () => {
-        if (content.type === 'gap') {
-            setEditedWord(content.data.word)
-        } else if (content.type === 'anchor') {
-            setEditedWord(content.data.words[0])
-        }
+        setEditedWord(content.data.word || '')
         setIsEditing(true)
     }
 
@@ -59,10 +55,8 @@ export default function WordEditControls({ content, onUpdateCorrection, onClose
     }
 
     const handleCancelEdit = () => {
-        if (content.type === 'gap') {
-            setEditedWord(content.data.word)
-            setIsEditing(false)
-        }
+        setEditedWord(content.data.word || '')
+        setIsEditing(false)
     }
 
     const handleWordChange = (event: React.ChangeEvent<HTMLInputElement>) => {

lyrics_transcriber/frontend/src/components/shared/components/HighlightedText.tsx

@@ -1,25 +1,32 @@
 import { Typography, Box } from '@mui/material'
-import { Word } from './Word'
+import { WordComponent } from './Word'
 import { useWordClick } from '../hooks/useWordClick'
-import { AnchorSequence, GapSequence, HighlightInfo, InteractionMode } from '../../../types'
+import {
+    AnchorSequence,
+    GapSequence,
+    HighlightInfo,
+    InteractionMode,
+    LyricsSegment,
+    Word,
+    WordCorrection
+} from '../../../types'
 import { ModalContent } from '../../LyricsAnalyzer'
-import { WordClickInfo, TranscriptionWordPosition, FlashType, LinePosition } from '../types'
+import type { FlashType, LinePosition, TranscriptionWordPosition, WordClickInfo } from '../types'
 import React from 'react'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import IconButton from '@mui/material/IconButton';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import IconButton from '@mui/material/IconButton'
+import { getWordsFromIds } from '../utils/wordUtils'
 
 export interface HighlightedTextProps {
-    // Input can be either raw text or pre-processed word positions
     text?: string
-    wordPositions?: TranscriptionWordPosition[]
-    // Common props
+    segments?: LyricsSegment[]
+    wordPositions: TranscriptionWordPosition[]
     anchors: AnchorSequence[]
     highlightInfo: HighlightInfo | null
     mode: InteractionMode
     onElementClick: (content: ModalContent) => void
     onWordClick?: (info: WordClickInfo) => void
     flashingType: FlashType
-    // Reference-specific props
     isReference?: boolean
     currentSource?: string
     preserveSegments?: boolean
@@ -27,11 +34,14 @@ export interface HighlightedTextProps {
     currentTime?: number
     referenceCorrections?: Map<string, string>
     gaps?: GapSequence[]
+    flashingHandler?: string | null
+    corrections?: WordCorrection[]
 }
 
 export function HighlightedText({
     text,
-    wordPositions,
+    segments,
+    wordPositions = [] as TranscriptionWordPosition[],
     anchors,
     highlightInfo,
     mode,
@@ -39,87 +49,109 @@ export function HighlightedText({
     onWordClick,
     flashingType,
     isReference,
-    currentSource,
+    currentSource = '',
     preserveSegments = false,
     linePositions = [],
     currentTime = 0,
     referenceCorrections = new Map(),
-    gaps = []
+    gaps = [],
+    flashingHandler,
+    corrections = [],
 }: HighlightedTextProps) {
+    console.log('HighlightedText props:', { flashingType, flashingHandler });
+
     const { handleWordClick } = useWordClick({
         mode,
         onElementClick,
         onWordClick,
         isReference,
         currentSource,
-        gaps
+        gaps,
+        anchors,
+        corrections
     })
 
     const shouldWordFlash = (wordPos: TranscriptionWordPosition | { word: string; id: string }): boolean => {
-        if (!flashingType) return false
+        if (!flashingType) {
+            console.log('No flashingType');
+            return false;
+        }
 
         if ('type' in wordPos) {
-            // Handle TranscriptionWordPosition
+            // Add handler-specific flashing
+            if (flashingType === 'handler' && flashingHandler) {
+                console.log('Checking handler flash for word:', wordPos.word.text);
+                console.log('Current flashingHandler:', flashingHandler);
+                console.log('Word ID:', wordPos.word.id);
+
+                const shouldFlash = corrections.some(correction =>
+                    correction.handler === flashingHandler &&
+                    (correction.corrected_word_id === wordPos.word.id ||
+                        correction.word_id === wordPos.word.id)
+                );
+
+                console.log('Should flash:', shouldFlash);
+                return shouldFlash;
+            }
+
             const gap = wordPos.sequence as GapSequence
-            const isCorrected = wordPos.type === 'gap' &&
-                gap?.corrections?.some(correction =>
-                    correction.word_id === wordPos.word.id
-                )
+            const isCorrected = (
+                // Check corrections array for this word
+                corrections.some(correction =>
+                    (correction.word_id === wordPos.word.id ||
+                        correction.corrected_word_id === wordPos.word.id) &&
+                    gap.transcribed_word_ids.includes(correction.word_id)
+                ) ||
+                // Also check if marked as corrected in wordPos
+                wordPos.isCorrected
+            )
 
             return Boolean(
                 (flashingType === 'anchor' && wordPos.type === 'anchor') ||
                 (flashingType === 'corrected' && isCorrected) ||
                 (flashingType === 'uncorrected' && wordPos.type === 'gap' && !isCorrected) ||
                 (flashingType === 'word' && (
-                    // Handle anchor highlighting
+                    // For anchors
                     (highlightInfo?.type === 'anchor' && wordPos.type === 'anchor' &&
-                        wordPos.sequence && highlightInfo.word_ids?.includes(wordPos.word.id)) ||
-                    // Handle gap highlighting - only highlight the specific word
+                        (isReference && currentSource && highlightInfo.sequence
+                            ? getWordsFromIds(segments || [],
+                                (highlightInfo.sequence as AnchorSequence).reference_word_ids[currentSource] || []
+                            ).some(w => w.id === wordPos.word.id)
+                            : getWordsFromIds(segments || [],
+                                (highlightInfo.sequence as AnchorSequence).transcribed_word_ids
+                            ).some(w => w.id === wordPos.word.id)
+                        )) ||
+                    // For gaps
                     (highlightInfo?.type === 'gap' && wordPos.type === 'gap' &&
-                        highlightInfo.word_ids?.includes(wordPos.word.id))
-                ))
-            )
-        } else {
-            // Handle reference word
-            if (!currentSource) return false
-
-            const anchor = anchors?.find(a =>
-                a?.reference_word_ids?.[currentSource]?.includes(wordPos.id)
-            )
-
-            // Check if this word should flash as part of a gap
-            const shouldFlashGap = flashingType === 'word' &&
-                highlightInfo?.type === 'gap' &&
-                // Check if this reference word corresponds to the clicked word
-                gaps?.some(gap =>
-                    gap.corrections.some(correction => {
-                        // Only flash if this correction corresponds to the clicked word
-                        if (!highlightInfo.word_ids?.includes(correction.word_id)) {
-                            return false;
-                        }
-
-                        const refPosition = correction.reference_positions?.[currentSource];
-                        const wordPosition = parseInt(wordPos.id.split('-').pop() || '', 10);
-                        return typeof refPosition === 'number' && refPosition === wordPosition;
-                    })
-                )
-
-            return Boolean(
-                (flashingType === 'anchor' && anchor) ||
-                (flashingType === 'word' && (
-                    // Handle anchor highlighting
-                    (highlightInfo?.type === 'anchor' &&
-                        highlightInfo.reference_word_ids?.[currentSource]?.includes(wordPos.id)) ||
-                    // Handle gap highlighting
-                    shouldFlashGap
+                        (isReference && currentSource && highlightInfo.sequence
+                            ? getWordsFromIds(segments || [],
+                                (highlightInfo.sequence as GapSequence).reference_word_ids[currentSource] || []
+                            ).some(w => w.id === wordPos.word.id)
+                            : getWordsFromIds(segments || [],
+                                (highlightInfo.sequence as GapSequence).transcribed_word_ids
+                            ).some(w => w.id === wordPos.word.id))
+                    ) ||
+                    // For corrections
+                    (highlightInfo?.type === 'correction' && isReference && currentSource &&
+                        highlightInfo.correction?.reference_positions?.[currentSource]?.toString() === wordPos.word.id)
                 ))
             )
         }
+        return false
     }
 
-    const shouldHighlightWord = (wordPos: TranscriptionWordPosition): boolean => {
-        if (!currentTime || !wordPos.word.start_time || !wordPos.word.end_time) return false
-        return currentTime >= wordPos.word.start_time && currentTime <= wordPos.word.end_time
+    const shouldHighlightWord = (wordPos: TranscriptionWordPosition | { word: string; id: string }): boolean => {
+        // Don't highlight words in reference view
+        if (isReference) return false
+
+        if ('type' in wordPos && currentTime !== undefined && 'start_time' in wordPos.word) {
+            const word = wordPos.word as Word
+            return word.start_time !== null &&
+                word.end_time !== null &&
+                currentTime >= word.start_time &&
+                currentTime <= word.end_time
+        }
+        return false
     }
 
     const handleCopyLine = (text: string) => {
@@ -127,16 +159,17 @@ export function HighlightedText({
     };
 
     const renderContent = () => {
-        if (wordPositions) {
+        if (wordPositions && !segments) {
             return wordPositions.map((wordPos, index) => (
                 <React.Fragment key={wordPos.word.id}>
-                    <Word
+                    <WordComponent
+                        key={`${wordPos.word.id}-${index}`}
                         word={wordPos.word.text}
                         shouldFlash={shouldWordFlash(wordPos)}
-                        isCurrentlyPlaying={shouldHighlightWord(wordPos)}
                         isAnchor={wordPos.type === 'anchor'}
-                        isCorrectedGap={wordPos.type === 'gap' && wordPos.isCorrected}
+                        isCorrectedGap={wordPos.isCorrected}
                         isUncorrectedGap={wordPos.type === 'gap' && !wordPos.isCorrected}
+                        isCurrentlyPlaying={shouldHighlightWord(wordPos)}
                         onClick={() => handleWordClick(
                             wordPos.word.text,
                             wordPos.word.id,
@@ -147,6 +180,42 @@ export function HighlightedText({
                     {index < wordPositions.length - 1 && ' '}
                 </React.Fragment>
             ))
+        } else if (segments) {
+            return segments.map((segment) => (
+                <Box key={segment.id} sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                    <Box sx={{ flex: 1 }}>
+                        {segment.words.map((word, wordIndex) => {
+                            const wordPos = wordPositions.find((pos: TranscriptionWordPosition) =>
+                                pos.word.id === word.id
+                            );
+
+                            const anchor = wordPos?.type === 'anchor' ? anchors?.find(a =>
+                                (a.reference_word_ids[currentSource] || []).includes(word.id)
+                            ) : undefined;
+
+                            const hasCorrection = referenceCorrections.has(word.id);
+                            const isUncorrectedGap = wordPos?.type === 'gap' && !hasCorrection;
+
+                            const sequence = wordPos?.type === 'gap' ? wordPos.sequence as GapSequence : undefined;
+
+                            return (
+                                <React.Fragment key={word.id}>
+                                    <WordComponent
+                                        word={word.text}
+                                        shouldFlash={shouldWordFlash(wordPos || { word: word.text, id: word.id })}
+                                        isAnchor={Boolean(anchor)}
+                                        isCorrectedGap={hasCorrection}
+                                        isUncorrectedGap={isUncorrectedGap}
+                                        isCurrentlyPlaying={shouldHighlightWord(wordPos || { word: word.text, id: word.id })}
+                                        onClick={() => handleWordClick(word.text, word.id, anchor, sequence)}
+                                    />
+                                    {wordIndex < segment.words.length - 1 && ' '}
+                                </React.Fragment>
+                            );
+                        })}
+                    </Box>
+                </Box>
+            ));
         } else if (text) {
             const lines = text.split('\n')
             let wordCount = 0
@@ -219,20 +288,20 @@ export function HighlightedText({
                                 wordCount++
 
                                 const anchor = currentSource ? anchors?.find(a =>
-                                    a?.reference_word_ids?.[currentSource]?.includes(wordId)
+                                    a.reference_word_ids[currentSource]?.includes(wordId)
                                 ) : undefined
 
-                                // Check if this word has a correction
                                 const hasCorrection = referenceCorrections.has(wordId)
 
                                 return (
-                                    <Word
+                                    <WordComponent
                                         key={wordId}
                                         word={word}
                                         shouldFlash={shouldWordFlash({ word, id: wordId })}
                                         isAnchor={Boolean(anchor)}
                                         isCorrectedGap={hasCorrection}
                                         isUncorrectedGap={false}
+                                        isCurrentlyPlaying={shouldHighlightWord({ word, id: wordId })}
                                         onClick={() => handleWordClick(word, wordId, anchor, undefined)}
                                     />
                                 )

lyrics_transcriber/frontend/src/components/shared/components/Word.tsx

@@ -3,7 +3,7 @@ import { COLORS } from '../constants'
 import { HighlightedWord } from '../styles'
 import { WordProps } from '../types'
 
-export const Word = React.memo(function Word({
+export const WordComponent = React.memo(function Word({
     word,
     shouldFlash,
     isAnchor,