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

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect, useCallback } from 'react'
 import {
     AnchorSequence,
     CorrectionData,
@@ -7,9 +8,7 @@ import {
     LyricsSegment
 } from '../types'
 import { Box, Button, Grid, useMediaQuery, useTheme } from '@mui/material'
-import { useCallback, useState, useEffect } from 'react'
 import { ApiClient } from '../api'
-import DetailsModal from './DetailsModal'
 import ReferenceView from './ReferenceView'
 import TranscriptionView from './TranscriptionView'
 import { WordClickInfo, FlashType } from './shared/types'
@@ -19,12 +18,18 @@ import {
     addSegmentBefore,
     splitSegment,
     deleteSegment,
-    updateSegment
+    updateSegment,
+    mergeSegment,
+    findAndReplace
 } from './shared/utils/segmentOperations'
 import { loadSavedData, saveData, clearSavedData } from './shared/utils/localStorage'
-import { setupKeyboardHandlers, setModalHandler } from './shared/utils/keyboardHandlers'
+import { setupKeyboardHandlers, setModalHandler, getModalState } from './shared/utils/keyboardHandlers'
 import Header from './Header'
-import { findWordById, getWordsFromIds } from './shared/utils/wordUtils'
+import { getWordsFromIds } from './shared/utils/wordUtils'
+import AddLyricsModal from './AddLyricsModal'
+import { RestoreFromTrash, OndemandVideo } from '@mui/icons-material'
+import FindReplaceModal from './FindReplaceModal'
+import GlobalSyncEditor from './GlobalSyncEditor'
 
 // Add type for window augmentation at the top of the file
 declare global {
@@ -73,9 +78,8 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     const [isReviewComplete, setIsReviewComplete] = useState(false)
     const [data, setData] = useState(initialData)
     const [originalData] = useState(() => JSON.parse(JSON.stringify(initialData)))
-    const [interactionMode, setInteractionMode] = useState<InteractionMode>('details')
+    const [interactionMode, setInteractionMode] = useState<InteractionMode>('edit')
     const [isShiftPressed, setIsShiftPressed] = useState(false)
-    const [isCtrlPressed, setIsCtrlPressed] = useState(false)
     const [editModalSegment, setEditModalSegment] = useState<{
         segment: LyricsSegment
         index: number
@@ -85,6 +89,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     const [currentAudioTime, setCurrentAudioTime] = useState(0)
     const [isUpdatingHandlers, setIsUpdatingHandlers] = useState(false)
     const [flashingHandler, setFlashingHandler] = useState<string | null>(null)
+    const [isAddingLyrics, setIsAddingLyrics] = useState(false)
+    const [isAddLyricsModalOpen, setIsAddLyricsModalOpen] = useState(false)
+    const [isAnyModalOpen, setIsAnyModalOpen] = useState(false)
+    const [isFindReplaceModalOpen, setIsFindReplaceModalOpen] = useState(false)
+    const [isGlobalSyncEditorOpen, setIsGlobalSyncEditorOpen] = useState(false)
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
@@ -121,29 +130,50 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
 
     // Keyboard handlers
     useEffect(() => {
-        console.log('Setting up keyboard handlers in LyricsAnalyzer')
+        const { currentModalHandler } = getModalState()
+
+        console.log('LyricsAnalyzer - Setting up keyboard effect', {
+            isAnyModalOpen,
+            hasSpacebarHandler: !!currentModalHandler
+        })
 
         const { handleKeyDown, handleKeyUp } = setupKeyboardHandlers({
             setIsShiftPressed,
-            setIsCtrlPressed
         })
 
-        console.log('Adding keyboard event listeners')
+        // Always add keyboard listeners
+        console.log('LyricsAnalyzer - Adding keyboard event listeners')
         window.addEventListener('keydown', handleKeyDown)
         window.addEventListener('keyup', handleKeyUp)
 
+        // Reset modifier states when a modal opens
+        if (isAnyModalOpen) {
+            setIsShiftPressed(false)
+        }
+
+        // Cleanup function
         return () => {
-            console.log('Removing keyboard event listeners')
+            console.log('LyricsAnalyzer - Cleanup effect running')
             window.removeEventListener('keydown', handleKeyDown)
             window.removeEventListener('keyup', handleKeyUp)
             document.body.style.userSelect = ''
         }
-    }, [setIsShiftPressed, setIsCtrlPressed])
+    }, [setIsShiftPressed, isAnyModalOpen])
+
+    // Update modal state tracking
+    useEffect(() => {
+        const modalOpen = Boolean(
+            modalContent ||
+            editModalSegment ||
+            isReviewModalOpen ||
+            isAddLyricsModalOpen ||
+            isFindReplaceModalOpen
+        )
+        setIsAnyModalOpen(modalOpen)
+    }, [modalContent, editModalSegment, isReviewModalOpen, isAddLyricsModalOpen, isFindReplaceModalOpen])
 
     // Calculate effective mode based on modifier key states
-    const effectiveMode = isShiftPressed ? 'highlight' :
-        isCtrlPressed ? 'edit' :
-            interactionMode
+    const effectiveMode = isShiftPressed ? 'highlight' : interactionMode
 
     const handleFlash = useCallback((type: FlashType, info?: HighlightInfo) => {
         setFlashingType(null)
@@ -217,10 +247,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                             start_time: sourceWords[0]?.start_time ?? null,
                             end_time: sourceWords[sourceWords.length - 1]?.end_time ?? null
                         }
-                        return [
-                            source,
-                            getWordsFromIds([tempSourceSegment], ids)
-                        ]
+                        return [source, getWordsFromIds([tempSourceSegment], ids)]
                     })
                 );
 
@@ -236,13 +263,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
 
             // Find if this word is part of a gap sequence
             const gap = data.gap_sequences?.find(g =>
-                g.transcribed_word_ids.includes(info.word_id) ||
-                Object.values(g.reference_word_ids).some(ids =>
-                    ids.includes(info.word_id)
-                )
+                g.transcribed_word_ids.includes(info.word_id)
             );
 
             if (gap) {
+                // Create a temporary segment containing all words
                 const allWords = data.corrected_segments.flatMap(s => s.words)
                 const tempSegment: LyricsSegment = {
                     id: 'temp',
@@ -267,10 +292,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                             start_time: sourceWords[0]?.start_time ?? null,
                             end_time: sourceWords[sourceWords.length - 1]?.end_time ?? null
                         }
-                        return [
-                            source,
-                            getWordsFromIds([tempSourceSegment], ids)
-                        ]
+                        return [source, getWordsFromIds([tempSourceSegment], ids)]
                     })
                 );
 
@@ -297,30 +319,6 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                     originalSegment: JSON.parse(JSON.stringify(segment))
                 });
             }
-        } else if (effectiveMode === 'details') {
-            if (info.type === 'anchor' && info.anchor) {
-                const word = findWordById(data.corrected_segments, info.word_id);
-                setModalContent({
-                    type: 'anchor',
-                    data: {
-                        ...info.anchor,
-                        wordId: info.word_id,
-                        word: word?.text,
-                        anchor_sequences: data.anchor_sequences
-                    }
-                });
-            } else if (info.type === 'gap' && info.gap) {
-                const word = findWordById(data.corrected_segments, info.word_id);
-                setModalContent({
-                    type: 'gap',
-                    data: {
-                        ...info.gap,
-                        wordId: info.word_id,
-                        word: word?.text || '',
-                        anchor_sequences: data.anchor_sequences
-                    }
-                });
-            }
         }
     }, [data, effectiveMode, setModalContent]);
 
@@ -372,7 +370,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
             setModalContent(null)
             setFlashingType(null)
             setHighlightInfo(null)
-            setInteractionMode('details')
+            setInteractionMode('edit')
         }
     }, [initialData])
 
@@ -389,6 +387,12 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
         }
     }, [data])
 
+    const handleMergeSegment = useCallback((segmentIndex: number, mergeWithNext: boolean) => {
+        const newData = mergeSegment(data, segmentIndex, mergeWithNext)
+        setData(newData)
+        setEditModalSegment(null)
+    }, [data])
+
     const handleHandlerToggle = useCallback(async (handler: string, enabled: boolean) => {
         if (!apiClient) return
 
@@ -443,14 +447,35 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
 
     // Wrap setModalSpacebarHandler in useCallback
     const handleSetModalSpacebarHandler = useCallback((handler: (() => (e: KeyboardEvent) => void) | undefined) => {
+        console.log('LyricsAnalyzer - Setting modal handler:', {
+            hasHandler: !!handler
+        })
         // Update the global modal handler
         setModalHandler(handler ? handler() : undefined, !!handler)
     }, [])
 
+    // Add new handler for adding lyrics
+    const handleAddLyrics = useCallback(async (source: string, lyrics: string) => {
+        if (!apiClient) return
+
+        try {
+            setIsAddingLyrics(true)
+            const newData = await apiClient.addLyrics(source, lyrics)
+            setData(newData)
+        } finally {
+            setIsAddingLyrics(false)
+        }
+    }, [apiClient])
+
+    const handleFindReplace = (findText: string, replaceText: string, options: { caseSensitive: boolean, useRegex: boolean, fullTextMode: boolean }) => {
+        const newData = findAndReplace(data, findText, replaceText, options)
+        setData(newData)
+    }
+
     return (
         <Box sx={{
-            p: 3,
-            pb: 6,
+            p: 1,
+            pb: 3,
             maxWidth: '100%',
             overflowX: 'hidden'
         }}>
@@ -471,9 +496,12 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 onHandlerToggle={handleHandlerToggle}
                 isUpdatingHandlers={isUpdatingHandlers}
                 onHandlerClick={handleHandlerClick}
+                onAddLyrics={() => setIsAddLyricsModalOpen(true)}
+                onFindReplace={() => setIsFindReplaceModalOpen(true)}
+                onEditSync={() => setIsGlobalSyncEditorOpen(true)}
             />
 
-            <Grid container spacing={2} direction={isMobile ? 'column' : 'row'}>
+            <Grid container spacing={1} direction={isMobile ? 'column' : 'row'}>
                 <Grid item xs={12} md={6}>
                     <TranscriptionView
                         data={data}
@@ -487,6 +515,32 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                         currentTime={currentAudioTime}
                         anchors={data.anchor_sequences}
                     />
+                    {!isReadOnly && apiClient && (
+                        <Box sx={{
+                            mt: 2,
+                            mb: 3,
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '100%'
+                        }}>
+                            <Button
+                                variant="outlined"
+                                color="warning"
+                                onClick={handleResetCorrections}
+                                startIcon={<RestoreFromTrash />}
+                            >
+                                Reset Corrections
+                            </Button>
+                            <Button
+                                variant="contained"
+                                onClick={handleFinishReview}
+                                disabled={isReviewComplete}
+                                endIcon={<OndemandVideo />}
+                            >
+                                {isReviewComplete ? 'Review Complete' : 'Preview Video'}
+                            </Button>
+                        </Box>
+                    )}
                 </Grid>
                 <Grid item xs={12} md={6}>
                     <ReferenceView
@@ -506,14 +560,6 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 </Grid>
             </Grid>
 
-            <DetailsModal
-                open={modalContent !== null}
-                content={modalContent}
-                onClose={() => setModalContent(null)}
-                allCorrections={data.corrections}
-                referenceLyrics={data.reference_lyrics}
-            />
-
             <EditModal
                 open={Boolean(editModalSegment)}
                 onClose={() => {
@@ -527,9 +573,17 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 onDelete={handleDeleteSegment}
                 onAddSegment={handleAddSegment}
                 onSplitSegment={handleSplitSegment}
+                onMergeSegment={handleMergeSegment}
                 onPlaySegment={handlePlaySegment}
                 currentTime={currentAudioTime}
                 setModalSpacebarHandler={handleSetModalSpacebarHandler}
+                originalTranscribedSegment={
+                    editModalSegment?.segment && editModalSegment?.index !== null
+                        ? originalData.original_segments.find(
+                            (s: LyricsSegment) => s.id === editModalSegment.segment.id
+                          ) || null
+                        : null
+                }
             />
 
             <ReviewChangesModal
@@ -542,23 +596,35 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 setModalSpacebarHandler={handleSetModalSpacebarHandler}
             />
 
-            {!isReadOnly && apiClient && (
-                <Box sx={{ mt: 2, mb: 3, display: 'flex', gap: 2 }}>
-                    <Button
-                        variant="contained"
-                        onClick={handleFinishReview}
-                        disabled={isReviewComplete}
-                    >
-                        {isReviewComplete ? 'Review Complete' : 'Finish Review'}
-                    </Button>
-                    <Button
-                        variant="outlined"
-                        color="warning"
-                        onClick={handleResetCorrections}
-                    >
-                        Reset Corrections
-                    </Button>
-                </Box>
+            <AddLyricsModal
+                open={isAddLyricsModalOpen}
+                onClose={() => setIsAddLyricsModalOpen(false)}
+                onSubmit={handleAddLyrics}
+                isSubmitting={isAddingLyrics}
+            />
+
+            <FindReplaceModal
+                open={isFindReplaceModalOpen}
+                onClose={() => setIsFindReplaceModalOpen(false)}
+                onReplace={handleFindReplace}
+                data={data}
+            />
+
+            {/* Add GlobalSyncEditor modal */}
+            {!isReadOnly && (
+                <GlobalSyncEditor
+                    open={isGlobalSyncEditorOpen}
+                    onClose={() => setIsGlobalSyncEditorOpen(false)}
+                    segments={data.corrected_segments || []}
+                    onSave={(updatedSegments) => {
+                        const newData = { ...data, corrected_segments: updatedSegments };
+                        setData(newData);
+                        saveData(newData, initialData);
+                    }}
+                    onPlaySegment={handlePlaySegment}
+                    currentTime={currentAudioTime}
+                    setModalSpacebarHandler={handleSetModalSpacebarHandler}
+                />
             )}
         </Box>
     )

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>