lyrics-transcriber 0.43.1__py3-none-any.whl → 0.45.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/ModeSelector.tsx

@@ -1,6 +1,5 @@
 import { ToggleButton, ToggleButtonGroup, Box, Typography } from '@mui/material';
 import HighlightIcon from '@mui/icons-material/Highlight';
-import InfoIcon from '@mui/icons-material/Info';
 import EditIcon from '@mui/icons-material/Edit';
 import { InteractionMode } from '../types';
 
@@ -11,28 +10,38 @@ interface ModeSelectorProps {
 
 export default function ModeSelector({ effectiveMode, onChange }: ModeSelectorProps) {
     return (
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Typography variant="body2" color="text.secondary">
-                Click Mode:
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.2, height: '32px' }}>
+            <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.8rem' }}>
+                Mode:
             </Typography>
             <ToggleButtonGroup
                 value={effectiveMode}
                 exclusive
                 onChange={(_, newMode) => newMode && onChange(newMode)}
                 size="small"
+                sx={{ 
+                    height: '32px',
+                    '& .MuiToggleButton-root': {
+                        padding: '3px 8px',
+                        fontSize: '0.75rem',
+                        height: '32px'
+                    }
+                }}
             >
-                <ToggleButton value="details">
-                    <InfoIcon sx={{ mr: 1 }} />
-                    Details
+                <ToggleButton 
+                    value="edit"
+                    title="Click to edit segments and make corrections in the transcription view"
+                >
+                    <EditIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
+                    Edit
                 </ToggleButton>
-                <ToggleButton value="highlight">
-                    <HighlightIcon sx={{ mr: 1 }} />
+                <ToggleButton 
+                    value="highlight"
+                    title="Click words in the transcription view to highlight the matching anchor sequence in the reference lyrics. You can also hold SHIFT to temporarily activate this mode."
+                >
+                    <HighlightIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
                     Highlight
                 </ToggleButton>
-                <ToggleButton value="edit">
-                    <EditIcon sx={{ mr: 1 }} />
-                    Edit
-                </ToggleButton>
             </ToggleButtonGroup>
         </Box>
     );

lyrics_transcriber/frontend/src/components/PreviewVideoSection.tsx

@@ -104,6 +104,7 @@ export default function PreviewVideoSection({
                     <video
                         ref={videoRef}
                         controls
+                        autoPlay
                         src={previewState.videoUrl}
                         style={{
                             display: 'block',

lyrics_transcriber/frontend/src/components/ReferenceView.tsx

@@ -12,9 +12,9 @@ import { styled } from '@mui/material/styles'
 const SegmentControls = styled(Box)({
     display: 'flex',
     alignItems: 'center',
-    gap: '4px',
-    paddingTop: '3px',
-    paddingRight: '8px'
+    gap: '2px',
+    paddingTop: '1px',
+    paddingRight: '4px'
 })
 
 const TextContainer = styled(Box)({
@@ -174,27 +174,44 @@ export default function ReferenceView({
     };
 
     return (
-        <Paper sx={{ p: 2 }}>
-            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-                <Typography variant="h6">
-                    Reference Text
+        <Paper sx={{ p: 0.8, position: 'relative' }}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
+                <Typography variant="h6" sx={{ fontSize: '0.9rem', mb: 0 }}>
+                    Reference Lyrics
                 </Typography>
                 <SourceSelector
+                    availableSources={availableSources}
                     currentSource={effectiveCurrentSource}
                     onSourceChange={onSourceChange}
-                    availableSources={availableSources}
                 />
             </Box>
-            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.2 }}>
                 {currentSourceSegments.map((segment, index) => (
-                    <Box key={index} sx={{ display: 'flex', alignItems: 'flex-start', width: '100%' }}>
+                    <Box 
+                        key={index} 
+                        sx={{ 
+                            display: 'flex', 
+                            alignItems: 'flex-start', 
+                            width: '100%', 
+                            mb: 0,
+                            '&:hover': {
+                                backgroundColor: 'rgba(0, 0, 0, 0.03)'
+                            }
+                        }}
+                    >
                         <SegmentControls>
                             <IconButton
                                 size="small"
                                 onClick={() => copyToClipboard(segment.words.map(w => w.text).join(' '))}
-                                sx={{ padding: '2px' }}
+                                sx={{ 
+                                    padding: '1px',
+                                    height: '18px',
+                                    width: '18px',
+                                    minHeight: '18px',
+                                    minWidth: '18px'
+                                }}
                             >
-                                <ContentCopyIcon fontSize="small" />
+                                <ContentCopyIcon sx={{ fontSize: '0.9rem' }} />
                             </IconButton>
                         </SegmentControls>
                         <TextContainer>

lyrics_transcriber/frontend/src/components/ReviewChangesModal.tsx

@@ -12,6 +12,7 @@ import { CorrectionData } from '../types'
 import { useMemo, useRef, useEffect } from 'react'
 import { ApiClient } from '../api'
 import PreviewVideoSection from './PreviewVideoSection'
+import { CloudUpload, ArrowBack } from '@mui/icons-material'
 
 interface ReviewChangesModalProps {
     open: boolean
@@ -73,6 +74,13 @@ export default function ReviewChangesModal({
     // Add ref to video element
     const videoRef = useRef<HTMLVideoElement>(null)
 
+    // Stop audio playback when modal opens
+    useEffect(() => {
+        if (open && window.isAudioPlaying && window.toggleAudioPlayback) {
+            window.toggleAudioPlayback()
+        }
+    }, [open])
+
     // Add effect to handle spacebar
     useEffect(() => {
         if (open) {
@@ -269,7 +277,7 @@ export default function ReviewChangesModal({
             maxWidth="md"
             fullWidth
         >
-            <DialogTitle>Review Changes</DialogTitle>
+            <DialogTitle>Preview Video (With Vocals)</DialogTitle>
             <DialogContent
                 dividers
                 sx={{
@@ -288,7 +296,7 @@ export default function ReviewChangesModal({
                     {differences.length === 0 ? (
                         <Box>
                             <Typography color="text.secondary">
-                                No changes detected. You can still submit to continue processing.
+                                No manual corrections detected. If everything looks good in the preview, click submit and the server will generate the final karaoke video.
                             </Typography>
                             <Typography variant="body2" color="text.secondary">
                                 Total segments: {updatedData.corrected_segments.length}
@@ -307,12 +315,21 @@ export default function ReviewChangesModal({
                 </Box>
             </DialogContent>
             <DialogActions>
-                <Button onClick={onClose}>Cancel</Button>
+                <Button 
+                    onClick={onClose}
+                    color="warning"
+                    startIcon={<ArrowBack />}
+                    sx={{ mr: 'auto' }}
+                >
+                    Cancel
+                </Button>
                 <Button
                     onClick={onSubmit}
                     variant="contained"
+                    color="success"
+                    endIcon={<CloudUpload />}
                 >
-                    Submit to Server
+                    Complete Review
                 </Button>
             </DialogActions>
         </Dialog>

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,16 +53,18 @@ 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
-                        const correction = data.corrections?.find(c => 
-                            c.corrected_word_id === word.id || 
+                        const correction = data.corrections?.find(c =>
+                            c.corrected_word_id === word.id ||
                             c.word_id === word.id
                         )
 
@@ -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,187 @@
+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'
+import { SxProps, Theme } from '@mui/material/styles'
+
+interface WordDividerProps {
+    onAddWord: () => void
+    onMergeWords?: () => void
+    onAddSegmentBefore?: () => void
+    onAddSegmentAfter?: () => void
+    onSplitSegment?: () => void
+    onMergeSegment?: () => void
+    canMerge?: boolean
+    isFirst?: boolean
+    isLast?: boolean
+    sx?: SxProps<Theme>
+}
+
+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 && onAddSegmentBefore && onMergeSegment && (
+                    <>
+                        <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 && onAddSegmentAfter && onMergeSegment && (
+                    <>
+                        <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>
+    )
+}