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

lyrics_transcriber/frontend/src/components/TimelineEditor.tsx

@@ -9,14 +9,15 @@ interface TimelineEditorProps {
     onWordUpdate: (index: number, updates: Partial<Word>) => void
     currentTime?: number
     onPlaySegment?: (time: number) => void
+    showPlaybackIndicator?: boolean
 }
 
 const TimelineContainer = styled(Box)(({ theme }) => ({
     position: 'relative',
-    height: '80px',
+    height: '75px',
     backgroundColor: theme.palette.grey[200],
     borderRadius: theme.shape.borderRadius,
-    margin: theme.spacing(2, 0),
+    margin: theme.spacing(1, 0),
     padding: theme.spacing(0, 1),
 }))
 
@@ -68,6 +69,7 @@ const TimelineWord = styled(Box)(({ theme }) => ({
     fontSize: '0.875rem',
     fontFamily: 'sans-serif',
     transition: 'background-color 0.1s ease',
+    boxSizing: 'border-box',
     '&.highlighted': {
         backgroundColor: theme.palette.secondary.main,
     }
@@ -76,17 +78,27 @@ const TimelineWord = styled(Box)(({ theme }) => ({
 const ResizeHandle = styled(Box)(({ theme }) => ({
     position: 'absolute',
     top: 0,
-    width: 8,
+    width: 10,
     height: '100%',
     cursor: 'col-resize',
     '&:hover': {
         backgroundColor: theme.palette.primary.light,
+        opacity: 0.8,
+        boxShadow: `0 0 0 1px ${theme.palette.primary.dark}`,
     },
     '&.left': {
-        left: -4,
+        left: 0,
+        right: 'auto',
+        paddingRight: 0,
+        borderTopLeftRadius: theme.shape.borderRadius,
+        borderBottomLeftRadius: theme.shape.borderRadius,
     },
     '&.right': {
-        right: -4,
+        right: 0,
+        left: 'auto',
+        paddingLeft: 0,
+        borderTopRightRadius: theme.shape.borderRadius,
+        borderBottomRightRadius: theme.shape.borderRadius,
     }
 }))
 
@@ -102,7 +114,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 }: TimelineEditorProps) {
+export default function TimelineEditor({ words, startTime, endTime, onWordUpdate, currentTime = 0, onPlaySegment, showPlaybackIndicator = true }: TimelineEditorProps) {
     const containerRef = useRef<HTMLDivElement>(null)
     const [dragState, setDragState] = useState<{
         wordIndex: number
@@ -297,12 +309,14 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
             </TimelineRuler>
 
             {/* Add cursor line */}
-            <TimelineCursor
-                sx={{
-                    left: `${timeToPosition(currentTime)}%`,
-                    display: currentTime >= startTime && currentTime <= endTime ? 'block' : 'none'
-                }}
-            />
+            {showPlaybackIndicator && (
+                <TimelineCursor
+                    sx={{
+                        left: `${timeToPosition(currentTime)}%`,
+                        display: currentTime >= startTime && currentTime <= endTime ? 'block' : 'none'
+                    }}
+                />
+            )}
 
             {words.map((word, index) => {
                 // Skip words with null timestamps
@@ -311,8 +325,8 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
                 const leftPosition = timeToPosition(word.start_time)
                 const rightPosition = timeToPosition(word.end_time)
                 const width = rightPosition - leftPosition
-                const visualPadding = 2
-                const adjustedWidth = Math.max(0, width - visualPadding)
+                // Remove the visual padding that creates gaps
+                const adjustedWidth = width
 
                 return (
                     <TimelineWord
@@ -321,7 +335,7 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
                         sx={{
                             left: `${leftPosition}%`,
                             width: `${adjustedWidth}%`,
-                            maxWidth: `calc(${100 - leftPosition}% - 2px)`,
+                            maxWidth: `calc(${100 - leftPosition}%)`,
                         }}
                         onMouseDown={(e) => {
                             e.stopPropagation()

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -9,14 +9,16 @@ import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'
 
 const SegmentIndex = styled(Typography)(({ theme }) => ({
     color: theme.palette.text.secondary,
-    width: '2em',
-    minWidth: '2em',
+    width: '1.8em',
+    minWidth: '1.8em',
     textAlign: 'right',
-    marginRight: theme.spacing(1),
+    marginRight: theme.spacing(0.8),
     userSelect: 'none',
     fontFamily: 'monospace',
     cursor: 'pointer',
-    paddingTop: '3px',
+    paddingTop: '1px',
+    fontSize: '0.8rem',
+    lineHeight: 1.2,
     '&:hover': {
         textDecoration: 'underline',
     },
@@ -30,10 +32,10 @@ const TextContainer = styled(Box)({
 const SegmentControls = styled(Box)({
     display: 'flex',
     alignItems: 'center',
-    gap: '4px',
-    minWidth: '3em',
-    paddingTop: '3px',
-    paddingRight: '8px'
+    gap: '2px',
+    minWidth: '2.5em',
+    paddingTop: '1px',
+    paddingRight: '4px'
 })
 
 export default function TranscriptionView({
@@ -51,11 +53,13 @@ export default function TranscriptionView({
     const [selectedSegmentIndex, setSelectedSegmentIndex] = useState<number | null>(null)
 
     return (
-        <Paper sx={{ p: 2 }}>
-            <Typography variant="h6" gutterBottom>
-                Corrected Transcription
-            </Typography>
-            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Paper sx={{ p: 0.8 }}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
+                <Typography variant="h6" sx={{ fontSize: '0.9rem', mb: 0 }}>
+                    Corrected Transcription
+                </Typography>
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.2 }}>
                 {data.corrected_segments.map((segment, segmentIndex) => {
                     const segmentWords: TranscriptionWordPosition[] = segment.words.map(word => {
                         // Find if this word is part of a correction
@@ -105,7 +109,15 @@ export default function TranscriptionView({
                     })
 
                     return (
-                        <Box key={segment.id} sx={{ display: 'flex', alignItems: 'flex-start', width: '100%' }}>
+                        <Box key={segment.id} sx={{ 
+                            display: 'flex', 
+                            alignItems: 'flex-start', 
+                            width: '100%', 
+                            mb: 0,
+                            '&:hover': {
+                                backgroundColor: 'rgba(0, 0, 0, 0.03)'
+                            }
+                        }}>
                             <SegmentControls>
                                 <SegmentIndex
                                     variant="body2"
@@ -117,9 +129,15 @@ export default function TranscriptionView({
                                     <IconButton
                                         size="small"
                                         onClick={() => onPlaySegment?.(segment.start_time!)}
-                                        sx={{ padding: '2px' }}
+                                        sx={{ 
+                                            padding: '1px',
+                                            height: '18px',
+                                            width: '18px',
+                                            minHeight: '18px',
+                                            minWidth: '18px'
+                                        }}
                                     >
-                                        <PlayCircleOutlineIcon fontSize="small" />
+                                        <PlayCircleOutlineIcon sx={{ fontSize: '0.9rem' }} />
                                     </IconButton>
                                 )}
                             </SegmentControls>

lyrics_transcriber/frontend/src/components/WordDivider.tsx

@@ -0,0 +1,186 @@
+import { Box, Button, Typography } from '@mui/material'
+import AddIcon from '@mui/icons-material/Add'
+import MergeIcon from '@mui/icons-material/CallMerge'
+import CallSplitIcon from '@mui/icons-material/CallSplit'
+
+interface WordDividerProps {
+    onAddWord: () => void
+    onMergeWords?: () => void
+    onAddSegmentBefore?: () => void
+    onAddSegmentAfter?: () => void
+    onSplitSegment?: () => void
+    onMergeSegment?: () => void
+    canMerge?: boolean
+    isFirst?: boolean
+    isLast?: boolean
+    sx?: any
+}
+
+const buttonTextStyle = {
+    color: 'rgba(0, 0, 0, 0.6)',
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    fontWeight: 400,
+    fontSize: '0.7rem',
+    lineHeight: '1.4375em',
+    textTransform: 'none'
+}
+
+const buttonBaseStyle = {
+    minHeight: 0,
+    padding: '2px 8px',
+    '& .MuiButton-startIcon': {
+        marginRight: 0.5
+    },
+    '& .MuiSvgIcon-root': {
+        fontSize: '1.2rem'
+    }
+}
+
+export default function WordDivider({
+    onAddWord,
+    onMergeWords,
+    onAddSegmentBefore,
+    onAddSegmentAfter,
+    onSplitSegment,
+    onMergeSegment,
+    canMerge = false,
+    isFirst = false,
+    isLast = false,
+    sx = {}
+}: WordDividerProps) {
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '20px',
+                my: -0.5,
+                width: '50%',
+                backgroundColor: '#fff',
+                ...sx
+            }}
+        >
+            <Box sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                backgroundColor: '#fff',
+                padding: '0 8px',
+                zIndex: 1
+            }}>
+                <Button
+                    onClick={onAddWord}
+                    title="Add Word"
+                    size="small"
+                    startIcon={<AddIcon />}
+                    sx={{
+                        ...buttonBaseStyle,
+                        color: 'primary.main',
+                    }}
+                >
+                    <Typography sx={buttonTextStyle}>
+                        Add Word
+                    </Typography>
+                </Button>
+                {isFirst && (
+                    <>
+                        <Button
+                            onClick={onAddSegmentBefore}
+                            title="Add Segment"
+                            size="small"
+                            startIcon={<AddIcon sx={{ transform: 'rotate(90deg)' }} />}
+                            sx={{
+                                ...buttonBaseStyle,
+                                color: 'success.main',
+                            }}
+                        >
+                            <Typography sx={buttonTextStyle}>
+                                Add Segment
+                            </Typography>
+                        </Button>
+                        <Button
+                            onClick={onMergeSegment}
+                            title="Merge with Previous Segment"
+                            size="small"
+                            startIcon={<MergeIcon sx={{ transform: 'rotate(90deg)' }} />}
+                            sx={{
+                                ...buttonBaseStyle,
+                                color: 'warning.main',
+                            }}
+                        >
+                            <Typography sx={buttonTextStyle}>
+                                Merge Segment
+                            </Typography>
+                        </Button>
+                    </>
+                )}
+                {onMergeWords && !isLast && (
+                    <Button
+                        onClick={onMergeWords}
+                        title="Merge Words"
+                        size="small"
+                        startIcon={<MergeIcon sx={{ transform: 'rotate(90deg)' }} />}
+                        disabled={!canMerge}
+                        sx={{
+                            ...buttonBaseStyle,
+                            color: 'primary.main',
+                        }}
+                    >
+                        <Typography sx={buttonTextStyle}>
+                            Merge Words
+                        </Typography>
+                    </Button>
+                )}
+                {onSplitSegment && !isLast && (
+                    <Button
+                        onClick={onSplitSegment}
+                        title="Split Segment"
+                        size="small"
+                        startIcon={<CallSplitIcon sx={{ transform: 'rotate(90deg)' }} />}
+                        sx={{
+                            ...buttonBaseStyle,
+                            color: 'warning.main',
+                        }}
+                    >
+                        <Typography sx={buttonTextStyle}>
+                            Split Segment
+                        </Typography>
+                    </Button>
+                )}
+                {isLast && (
+                    <>
+                        <Button
+                            onClick={onAddSegmentAfter}
+                            title="Add Segment"
+                            size="small"
+                            startIcon={<AddIcon sx={{ transform: 'rotate(90deg)' }} />}
+                            sx={{
+                                ...buttonBaseStyle,
+                                color: 'success.main',
+                            }}
+                        >
+                            <Typography sx={buttonTextStyle}>
+                                Add Segment
+                            </Typography>
+                        </Button>
+                        <Button
+                            onClick={onMergeSegment}
+                            title="Merge with Next Segment"
+                            size="small"
+                            startIcon={<MergeIcon sx={{ transform: 'rotate(90deg)' }} />}
+                            sx={{
+                                ...buttonBaseStyle,
+                                color: 'warning.main',
+                            }}
+                        >
+                            <Typography sx={buttonTextStyle}>
+                                Merge Segment
+                            </Typography>
+                        </Button>
+                    </>
+                )}
+            </Box>
+        </Box>
+    )
+} 

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

@@ -173,13 +173,28 @@ export function HighlightedText({
                             wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
                             wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
                         )}
+                        correction={(() => {
+                            const correction = corrections?.find(c => 
+                                c.corrected_word_id === wordPos.word.id || 
+                                c.word_id === wordPos.word.id
+                            );
+                            return correction ? {
+                                originalWord: correction.original_word,
+                                handler: correction.handler,
+                                confidence: correction.confidence
+                            } : null;
+                        })()}
                     />
                     {index < wordPositions.length - 1 && ' '}
                 </React.Fragment>
             ))
         } else if (segments) {
             return segments.map((segment) => (
-                <Box key={segment.id} sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                <Box key={segment.id} sx={{ 
+                    display: 'flex', 
+                    alignItems: 'flex-start',
+                    mb: 0
+                }}>
                     <Box sx={{ flex: 1 }}>
                         {segment.words.map((word, wordIndex) => {
                             const wordPos = wordPositions.find((pos: TranscriptionWordPosition) =>
@@ -195,6 +210,18 @@ export function HighlightedText({
 
                             const sequence = wordPos?.type === 'gap' ? wordPos.sequence as GapSequence : undefined;
 
+                            // Find correction information for the tooltip
+                            const correction = corrections?.find(c => 
+                                c.corrected_word_id === word.id || 
+                                c.word_id === word.id
+                            );
+                            
+                            const correctionInfo = correction ? {
+                                originalWord: correction.original_word,
+                                handler: correction.handler,
+                                confidence: correction.confidence
+                            } : null;
+
                             return (
                                 <React.Fragment key={word.id}>
                                     <WordComponent
@@ -205,6 +232,7 @@ export function HighlightedText({
                                         isUncorrectedGap={isUncorrectedGap}
                                         isCurrentlyPlaying={shouldHighlightWord(wordPos || { word: word.text, id: word.id })}
                                         onClick={() => handleWordClick(word.text, word.id, anchor, sequence)}
+                                        correction={correctionInfo}
                                     />
                                     {wordIndex < segment.words.length - 1 && ' '}
                                 </React.Fragment>
@@ -222,7 +250,12 @@ export function HighlightedText({
                 if (currentLinePosition?.isEmpty) {
                     wordCount++
                     return (
-                        <Box key={`empty-${lineIndex}`} sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                        <Box key={`empty-${lineIndex}`} sx={{ 
+                            display: 'flex', 
+                            alignItems: 'flex-start',
+                            mb: 0,
+                            lineHeight: 1
+                        }}>
                             <Typography
                                 component="span"
                                 sx={{
@@ -233,20 +266,58 @@ export function HighlightedText({
                                     marginRight: 1,
                                     userSelect: 'none',
                                     fontFamily: 'monospace',
-                                    paddingTop: '4px',
+                                    paddingTop: '1px',
+                                    fontSize: '0.8rem',
+                                    lineHeight: 1
                                 }}
                             >
                                 {currentLinePosition.lineNumber}
                             </Typography>
-                            <Box sx={{ width: '28px' }} /> {/* Space for copy button */}
-                            <Box sx={{ flex: 1, height: '1.5em' }} />
+                            <Box sx={{ width: '18px' }} />
+                            <Box sx={{ flex: 1, height: '1em' }} />
                         </Box>
                     )
                 }
 
-                const lineContent = line.split(/(\s+)/)
+                const words = line.split(' ')
+                const lineWords: React.ReactNode[] = []
+                
+                words.forEach((word, wordIndex) => {
+                    if (word === '') return null
+                    if (/^\s+$/.test(word)) {
+                        return lineWords.push(<span key={`space-${lineIndex}-${wordIndex}`}> </span>)
+                    }
+
+                    const wordId = `${currentSource}-word-${wordCount}`
+                    wordCount++
+
+                    const anchor = currentSource ? anchors?.find(a =>
+                        a.reference_word_ids[currentSource]?.includes(wordId)
+                    ) : undefined
+
+                    const hasCorrection = referenceCorrections.has(wordId)
+
+                    lineWords.push(
+                        <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)}
+                        />
+                    )
+                })
+
                 return (
-                    <Box key={`line-${lineIndex}`} sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                    <Box key={`line-${lineIndex}`} sx={{ 
+                        display: 'flex', 
+                        alignItems: 'flex-start',
+                        mb: 0,
+                        lineHeight: 1
+                    }}>
                         <Typography
                             component="span"
                             sx={{
@@ -257,7 +328,9 @@ export function HighlightedText({
                                 marginRight: 1,
                                 userSelect: 'none',
                                 fontFamily: 'monospace',
-                                paddingTop: '4px',
+                                paddingTop: '1px',
+                                fontSize: '0.8rem',
+                                lineHeight: 1
                             }}
                         >
                             {currentLinePosition?.lineNumber ?? lineIndex}
@@ -266,43 +339,18 @@ export function HighlightedText({
                             size="small"
                             onClick={() => handleCopyLine(line)}
                             sx={{
-                                padding: '2px',
-                                marginRight: 1,
-                                height: '24px',
-                                width: '24px'
+                                padding: '1px',
+                                marginRight: 0.5,
+                                height: '18px',
+                                width: '18px',
+                                minHeight: '18px',
+                                minWidth: '18px'
                             }}
                         >
-                            <ContentCopyIcon sx={{ fontSize: '1rem' }} />
+                            <ContentCopyIcon sx={{ fontSize: '0.9rem' }} />
                         </IconButton>
                         <Box sx={{ flex: 1 }}>
-                            {lineContent.map((word, wordIndex) => {
-                                if (word === '') return null
-                                if (/^\s+$/.test(word)) {
-                                    return <span key={`space-${lineIndex}-${wordIndex}`}> </span>
-                                }
-
-                                const wordId = `${currentSource}-word-${wordCount}`
-                                wordCount++
-
-                                const anchor = currentSource ? anchors?.find(a =>
-                                    a.reference_word_ids[currentSource]?.includes(wordId)
-                                ) : undefined
-
-                                const hasCorrection = referenceCorrections.has(wordId)
-
-                                return (
-                                    <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)}
-                                    />
-                                )
-                            })}
+                            {lineWords}
                         </Box>
                     </Box>
                 )

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

@@ -8,14 +8,21 @@ export interface SourceSelectorProps {
 
 export function SourceSelector({ currentSource, onSourceChange, availableSources }: SourceSelectorProps) {
     return (
-        <Box>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.3 }}>
             {availableSources.map((source) => (
                 <Button
                     key={source}
                     size="small"
                     variant={currentSource === source ? 'contained' : 'outlined'}
                     onClick={() => onSourceChange(source)}
-                    sx={{ mr: 1 }}
+                    sx={{ 
+                        mr: 0,
+                        py: 0.2,
+                        px: 0.8,
+                        minWidth: 'auto',
+                        fontSize: '0.7rem',
+                        lineHeight: 1.2
+                    }}
                 >
                     {/* Capitalize first letter of source */}
                     {source.charAt(0).toUpperCase() + source.slice(1)}

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

@@ -2,6 +2,7 @@ import React from 'react'
 import { COLORS } from '../constants'
 import { HighlightedWord } from '../styles'
 import { WordProps } from '../types'
+import { Tooltip } from '@mui/material'
 
 export const WordComponent = React.memo(function Word({
     word,
@@ -10,8 +11,9 @@ export const WordComponent = React.memo(function Word({
     isCorrectedGap,
     isUncorrectedGap,
     isCurrentlyPlaying,
-    padding = '2px 4px',
+    padding = '1px 3px',
     onClick,
+    correction
 }: WordProps) {
     if (/^\s+$/.test(word)) {
         return word
@@ -29,15 +31,20 @@ export const WordComponent = React.memo(function Word({
                         ? COLORS.uncorrectedGap
                         : 'transparent'
 
-    return (
+    const wordElement = (
         <HighlightedWord
             shouldFlash={shouldFlash}
             style={{
                 backgroundColor,
                 padding,
                 cursor: 'pointer',
-                borderRadius: '3px',
+                borderRadius: '2px',
                 color: isCurrentlyPlaying ? '#ffffff' : 'inherit',
+                textDecoration: correction ? 'underline dotted' : 'none',
+                textDecorationColor: correction ? '#666' : 'inherit',
+                textUnderlineOffset: '2px',
+                fontSize: '0.85rem',
+                lineHeight: 1.2
             }}
             sx={{
                 '&:hover': {
@@ -49,4 +56,22 @@ export const WordComponent = React.memo(function Word({
             {word}
         </HighlightedWord>
     )
+
+    if (correction) {
+        const tooltipContent = (
+            <>
+                <strong>Original:</strong> "{correction.originalWord}"<br />
+                <strong>Corrected by:</strong> {correction.handler}<br />
+                <strong>Confidence:</strong> {(correction.confidence * 100).toFixed(0)}%
+            </>
+        )
+        
+        return (
+            <Tooltip title={tooltipContent} arrow placement="top">
+                {wordElement}
+            </Tooltip>
+        )
+    }
+
+    return wordElement
 })