lyrics-transcriber 0.36.1__py3-none-any.whl → 0.39.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/TimelineEditor.tsx

@@ -8,11 +8,12 @@ interface TimelineEditorProps {
     endTime: number
     onWordUpdate: (index: number, updates: Partial<Word>) => void
     currentTime?: number
+    onPlaySegment?: (time: number) => void
 }
 
 const TimelineContainer = styled(Box)(({ theme }) => ({
     position: 'relative',
-    height: '60px',
+    height: '80px',
     backgroundColor: theme.palette.grey[200],
     borderRadius: theme.shape.borderRadius,
     margin: theme.spacing(2, 0),
@@ -24,30 +25,38 @@ const TimelineRuler = styled(Box)(({ theme }) => ({
     top: 0,
     left: 0,
     right: 0,
-    height: '16px',
+    height: '40px',
     borderBottom: `1px solid ${theme.palette.grey[300]}`,
+    cursor: 'pointer',
 }))
 
 const TimelineMark = styled(Box)(({ theme }) => ({
     position: 'absolute',
-    top: '10px',
+    top: '20px',
     width: '1px',
-    height: '6px',
-    backgroundColor: theme.palette.grey[400],
+    height: '18px',
+    backgroundColor: theme.palette.grey[700],
+    '&.subsecond': {
+        top: '25px',
+        height: '13px',
+        backgroundColor: theme.palette.grey[500],
+    }
 }))
 
 const TimelineLabel = styled(Box)(({ theme }) => ({
     position: 'absolute',
-    top: 0,
+    top: '5px',
     transform: 'translateX(-50%)',
-    fontSize: '0.6rem',
-    color: theme.palette.grey[600],
+    fontSize: '0.8rem',
+    color: theme.palette.text.primary,
+    fontWeight: 700,
+    backgroundColor: theme.palette.grey[200],
 }))
 
 const TimelineWord = styled(Box)(({ theme }) => ({
     position: 'absolute',
     height: '30px',
-    top: '22px',
+    top: '40px',
     backgroundColor: theme.palette.primary.main,
     borderRadius: theme.shape.borderRadius,
     color: theme.palette.primary.contrastText,
@@ -57,6 +66,7 @@ const TimelineWord = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     fontSize: '0.875rem',
+    fontFamily: 'sans-serif',
     transition: 'background-color 0.1s ease',
     '&.highlighted': {
         backgroundColor: theme.palette.secondary.main,
@@ -75,7 +85,19 @@ const ResizeHandle = styled(Box)(({ theme }) => ({
     },
 }))
 
-export default function TimelineEditor({ words, startTime, endTime, onWordUpdate, currentTime = 0 }: TimelineEditorProps) {
+// Add new styled component for the cursor
+const TimelineCursor = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    top: 0,
+    width: '2px',
+    height: '100%', // Full height of container
+    backgroundColor: theme.palette.error.main, // Red color
+    pointerEvents: 'none', // Ensure it doesn't interfere with clicks
+    transition: 'left 0.1s linear', // Smooth movement
+    zIndex: 1, // Ensure it's above other elements
+}))
+
+export default function TimelineEditor({ words, startTime, endTime, onWordUpdate, currentTime = 0, onPlaySegment }: TimelineEditorProps) {
     const containerRef = useRef<HTMLDivElement>(null)
     const [dragState, setDragState] = useState<{
         wordIndex: number
@@ -142,15 +164,23 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
         const startSecond = Math.floor(startTime)
         const endSecond = Math.ceil(endTime)
 
-        for (let time = startSecond; time <= endSecond; time++) {
+        // Generate marks for each 0.1 second interval
+        for (let time = startSecond; time <= endSecond; time += 0.1) {
             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 sx={{ left: `${position}%` }} />
-                        <TimelineLabel sx={{ left: `${position}%` }}>
-                            {time}s
-                        </TimelineLabel>
+                        <TimelineMark
+                            className={isFullSecond ? '' : 'subsecond'}
+                            sx={{ left: `${position}%` }}
+                        />
+                        {isFullSecond && (
+                            <TimelineLabel sx={{ left: `${position}%` }}>
+                                {Math.round(time)}s
+                            </TimelineLabel>
+                        )}
                     </Box>
                 )
             }
@@ -266,6 +296,22 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
         return currentTime >= word.start_time && currentTime <= word.end_time
     }
 
+    const handleTimelineClick = (e: React.MouseEvent) => {
+        const rect = containerRef.current?.getBoundingClientRect()
+        if (!rect || !onPlaySegment) return
+
+        const x = e.clientX - rect.left
+        const clickedPosition = (x / rect.width) * (endTime - startTime) + startTime
+
+        console.log('Timeline clicked:', {
+            x,
+            width: rect.width,
+            clickedTime: clickedPosition
+        })
+
+        onPlaySegment(clickedPosition)
+    }
+
     return (
         <TimelineContainer
             ref={containerRef}
@@ -273,9 +319,18 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
             onMouseUp={handleMouseUp}
             onMouseLeave={handleMouseUp}
         >
-            <TimelineRuler>
+            <TimelineRuler onClick={handleTimelineClick}>
                 {generateTimelineMarks()}
             </TimelineRuler>
+
+            {/* Add cursor line */}
+            <TimelineCursor
+                sx={{
+                    left: `${timeToPosition(currentTime)}%`,
+                    display: currentTime >= startTime && currentTime <= endTime ? 'block' : 'none'
+                }}
+            />
+
             {words.map((word, index) => {
                 const leftPosition = timeToPosition(word.start_time)
                 const rightPosition = timeToPosition(word.end_time)

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -48,9 +48,6 @@ export default function TranscriptionView({
 }: TranscriptionViewProps) {
     const [selectedSegmentIndex, setSelectedSegmentIndex] = useState<number | null>(null)
 
-    // Keep track of global word position
-    let globalWordPosition = 0
-
     return (
         <Paper sx={{ p: 2 }}>
             <Typography variant="h6" gutterBottom>
@@ -58,36 +55,37 @@ export default function TranscriptionView({
             </Typography>
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                 {data.corrected_segments.map((segment, segmentIndex) => {
-                    // Convert segment words to TranscriptionWordPosition format
-                    const segmentWords: TranscriptionWordPosition[] = segment.words.map((word, idx) => {
-                        const position = globalWordPosition + idx
-                        const anchor = data.anchor_sequences.find(a =>
-                            position >= a.transcription_position &&
-                            position < a.transcription_position + a.length
+                    const segmentWords: TranscriptionWordPosition[] = segment.words.map(word => {
+                        const anchor = data.anchor_sequences?.find(a =>
+                            a?.word_ids?.includes(word.id)
                         )
-                        const gap = !anchor ? data.gap_sequences.find(g =>
-                            position >= g.transcription_position &&
-                            position < g.transcription_position + g.length
+
+                        // 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
 
+                        // Check if this specific word has been corrected
+                        const isWordCorrected = gap?.corrections?.some(
+                            correction => correction.word_id === word.id
+                        )
+
                         return {
                             word: {
+                                id: word.id,
                                 text: word.text,
                                 start_time: word.start_time,
                                 end_time: word.end_time
                             },
-                            position,
                             type: anchor ? 'anchor' : gap ? 'gap' : 'other',
                             sequence: anchor || gap,
-                            isInRange: true
+                            isInRange: true,
+                            isCorrected: isWordCorrected
                         }
                     })
 
-                    // Update global position counter for next segment
-                    globalWordPosition += segment.words.length
-
                     return (
-                        <Box key={segmentIndex} sx={{ display: 'flex', alignItems: 'flex-start', width: '100%' }}>
+                        <Box key={segment.id} sx={{ display: 'flex', alignItems: 'flex-start', width: '100%' }}>
                             <SegmentControls>
                                 <SegmentIndex
                                     variant="body2"
@@ -109,7 +107,6 @@ export default function TranscriptionView({
                                 <HighlightedText
                                     wordPositions={segmentWords}
                                     anchors={data.anchor_sequences}
-                                    gaps={data.gap_sequences}
                                     onElementClick={onElementClick}
                                     onWordClick={onWordClick}
                                     flashingType={flashingType}

lyrics_transcriber/frontend/src/components/WordEditControls.tsx

@@ -5,7 +5,7 @@ import { ModalContent } from './LyricsAnalyzer'
 
 interface WordEditControlsProps {
     content: ModalContent
-    onUpdateCorrection?: (position: number, updatedWords: string[]) => void
+    onUpdateCorrection?: (wordId: string, updatedWords: string[]) => void
     onClose: () => void
 }
 
@@ -47,13 +47,13 @@ export default function WordEditControls({ content, onUpdateCorrection, onClose
 
     const handleDelete = () => {
         if (!onUpdateCorrection) return
-        onUpdateCorrection(content.data.position, [])
+        onUpdateCorrection(content.data.wordId, [])
         onClose()
     }
 
     const handleSaveEdit = () => {
         if (onUpdateCorrection) {
-            onUpdateCorrection(content.data.position, [editedWord])
+            onUpdateCorrection(content.data.wordId, [editedWord])
         }
         onClose()
     }

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

@@ -14,7 +14,6 @@ export interface HighlightedTextProps {
     wordPositions?: TranscriptionWordPosition[]
     // Common props
     anchors: AnchorSequence[]
-    gaps: GapSequence[]
     highlightInfo: HighlightInfo | null
     mode: InteractionMode
     onElementClick: (content: ModalContent) => void
@@ -26,6 +25,8 @@ export interface HighlightedTextProps {
     preserveSegments?: boolean
     linePositions?: LinePosition[]
     currentTime?: number
+    referenceCorrections?: Map<string, string>
+    gaps?: GapSequence[]
 }
 
 export function HighlightedText({
@@ -41,54 +42,76 @@ export function HighlightedText({
     currentSource,
     preserveSegments = false,
     linePositions = [],
-    currentTime = 0
+    currentTime = 0,
+    referenceCorrections = new Map(),
+    gaps = []
 }: HighlightedTextProps) {
     const { handleWordClick } = useWordClick({
         mode,
         onElementClick,
         onWordClick,
         isReference,
-        currentSource
+        currentSource,
+        gaps
     })
 
-    const shouldWordFlash = (wordPos: TranscriptionWordPosition | { word: string; index: number }): boolean => {
+    const shouldWordFlash = (wordPos: TranscriptionWordPosition | { word: string; id: string }): boolean => {
         if (!flashingType) return false
 
         if ('type' in wordPos) {
             // Handle TranscriptionWordPosition
-            const hasCorrections = wordPos.type === 'gap' &&
-                Boolean((wordPos.sequence as GapSequence)?.corrections?.length)
+            const gap = wordPos.sequence as GapSequence
+            const isCorrected = wordPos.type === 'gap' &&
+                gap?.corrections?.some(correction =>
+                    correction.word_id === wordPos.word.id
+                )
 
             return Boolean(
                 (flashingType === 'anchor' && wordPos.type === 'anchor') ||
-                (flashingType === 'corrected' && hasCorrections) ||
-                (flashingType === 'uncorrected' && wordPos.type === 'gap' && !hasCorrections) ||
-                (flashingType === 'word' && highlightInfo?.type === 'anchor' &&
-                    wordPos.type === 'anchor' && wordPos.sequence && (
-                        (wordPos.sequence as AnchorSequence).transcription_position === highlightInfo.transcriptionIndex ||
-                        (isReference && currentSource &&
-                            (wordPos.sequence as AnchorSequence).reference_positions[currentSource as keyof typeof highlightInfo.referenceIndices] === 
-                            highlightInfo.referenceIndices?.[currentSource as keyof typeof highlightInfo.referenceIndices])
-                    ))
+                (flashingType === 'corrected' && isCorrected) ||
+                (flashingType === 'uncorrected' && wordPos.type === 'gap' && !isCorrected) ||
+                (flashingType === 'word' && (
+                    // Handle anchor highlighting
+                    (highlightInfo?.type === 'anchor' && wordPos.type === 'anchor' &&
+                        wordPos.sequence && highlightInfo.word_ids?.includes(wordPos.word.id)) ||
+                    // Handle gap highlighting - only highlight the specific word
+                    (highlightInfo?.type === 'gap' && wordPos.type === 'gap' &&
+                        highlightInfo.word_ids?.includes(wordPos.word.id))
+                ))
             )
         } else {
             // Handle reference word
-            const thisWordIndex = wordPos.index
-            const anchor = anchors.find(a => {
-                const position = isReference
-                    ? a.reference_positions[currentSource!]
-                    : a.transcription_position
-                if (position === undefined) return false
-                return thisWordIndex >= position && thisWordIndex < position + a.length
-            })
+            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' && highlightInfo?.type === 'anchor' && anchor && (
-                    anchor.transcription_position === highlightInfo.transcriptionIndex ||
-                    (isReference && currentSource && 
-                        anchor.reference_positions[currentSource as keyof typeof highlightInfo.referenceIndices] === 
-                        highlightInfo.referenceIndices?.[currentSource as keyof typeof highlightInfo.referenceIndices])
+                (flashingType === 'word' && (
+                    // Handle anchor highlighting
+                    (highlightInfo?.type === 'anchor' &&
+                        highlightInfo.reference_word_ids?.[currentSource]?.includes(wordPos.id)) ||
+                    // Handle gap highlighting
+                    shouldFlashGap
                 ))
             )
         }
@@ -106,17 +129,17 @@ export function HighlightedText({
     const renderContent = () => {
         if (wordPositions) {
             return wordPositions.map((wordPos, index) => (
-                <React.Fragment key={`${wordPos.word.text}-${index}`}>
+                <React.Fragment key={wordPos.word.id}>
                     <Word
                         word={wordPos.word.text}
                         shouldFlash={shouldWordFlash(wordPos)}
                         isCurrentlyPlaying={shouldHighlightWord(wordPos)}
                         isAnchor={wordPos.type === 'anchor'}
-                        isCorrectedGap={wordPos.type === 'gap' && Boolean((wordPos.sequence as GapSequence)?.corrections?.length)}
-                        isUncorrectedGap={wordPos.type === 'gap' && !(wordPos.sequence as GapSequence)?.corrections?.length}
+                        isCorrectedGap={wordPos.type === 'gap' && wordPos.isCorrected}
+                        isUncorrectedGap={wordPos.type === 'gap' && !wordPos.isCorrected}
                         onClick={() => handleWordClick(
                             wordPos.word.text,
-                            wordPos.position,
+                            wordPos.word.id,
                             wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
                             wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
                         )}
@@ -126,12 +149,12 @@ export function HighlightedText({
             ))
         } else if (text) {
             const lines = text.split('\n')
-            let globalWordIndex = 0
+            let wordCount = 0
 
             return lines.map((line, lineIndex) => {
-                const currentLinePosition = linePositions?.find((pos: LinePosition) => pos.position === globalWordIndex)
+                const currentLinePosition = linePositions?.find(pos => pos.position === wordCount)
                 if (currentLinePosition?.isEmpty) {
-                    globalWordIndex++
+                    wordCount++
                     return (
                         <Box key={`empty-${lineIndex}`} sx={{ display: 'flex', alignItems: 'flex-start' }}>
                             <Typography
@@ -171,7 +194,7 @@ export function HighlightedText({
                                 paddingTop: '4px',
                             }}
                         >
-                            {lineIndex}
+                            {currentLinePosition?.lineNumber ?? lineIndex}
                         </Typography>
                         <IconButton
                             size="small"
@@ -192,32 +215,25 @@ export function HighlightedText({
                                     return <span key={`space-${lineIndex}-${wordIndex}`}> </span>
                                 }
 
-                                const position = globalWordIndex++
-                                const anchor = anchors.find(a => {
-                                    const refPos = a.reference_positions[currentSource!]
-                                    if (refPos === undefined) return false
-                                    return position >= refPos && position < refPos + a.length
-                                })
-
-                                // Create a mock TranscriptionWordPosition for highlighting
-                                const wordPos: TranscriptionWordPosition = {
-                                    word: { text: word },
-                                    position,
-                                    type: anchor ? 'anchor' : 'other',
-                                    sequence: anchor,
-                                    isInRange: true
-                                }
+                                const wordId = `${currentSource}-word-${wordCount}`
+                                wordCount++
+
+                                const anchor = currentSource ? anchors?.find(a =>
+                                    a?.reference_word_ids?.[currentSource]?.includes(wordId)
+                                ) : undefined
+
+                                // Check if this word has a correction
+                                const hasCorrection = referenceCorrections.has(wordId)
 
                                 return (
                                     <Word
-                                        key={`${word}-${lineIndex}-${wordIndex}`}
+                                        key={wordId}
                                         word={word}
-                                        shouldFlash={shouldWordFlash({ word, index: position })}
-                                        isCurrentlyPlaying={shouldHighlightWord(wordPos)}
+                                        shouldFlash={shouldWordFlash({ word, id: wordId })}
                                         isAnchor={Boolean(anchor)}
-                                        isCorrectedGap={false}
+                                        isCorrectedGap={hasCorrection}
                                         isUncorrectedGap={false}
-                                        onClick={() => handleWordClick(word, position, anchor, undefined)}
+                                        onClick={() => handleWordClick(word, wordId, anchor, undefined)}
                                     />
                                 )
                             })}
@@ -226,7 +242,6 @@ export function HighlightedText({
                 )
             })
         }
-
         return null
     }