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

lyrics_transcriber/frontend/src/components/EditModal.tsx

@@ -20,8 +20,10 @@ import RestoreIcon from '@mui/icons-material/RestoreFromTrash'
 import MoreVertIcon from '@mui/icons-material/MoreVert'
 import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'
 import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'
+import CancelIcon from '@mui/icons-material/Cancel'
+import StopIcon from '@mui/icons-material/Stop'
 import { LyricsSegment, Word } from '../types'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import TimelineEditor from './TimelineEditor'
 import { nanoid } from 'nanoid'
 
@@ -35,6 +37,9 @@ interface EditModalProps {
     onPlaySegment?: (startTime: number) => void
     currentTime?: number
     onDelete?: (segmentIndex: number) => void
+    onAddSegment?: (segmentIndex: number) => void
+    onSplitSegment?: (segmentIndex: number, afterWordIndex: number) => void
+    setModalSpacebarHandler: (handler: (() => (e: KeyboardEvent) => void) | undefined) => void
 }
 
 export default function EditModal({
@@ -47,43 +52,166 @@ export default function EditModal({
     onPlaySegment,
     currentTime = 0,
     onDelete,
+    onAddSegment,
+    onSplitSegment,
+    setModalSpacebarHandler,
 }: EditModalProps) {
+    // All useState hooks
     const [editedSegment, setEditedSegment] = useState<LyricsSegment | null>(segment)
     const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null)
     const [selectedWordIndex, setSelectedWordIndex] = useState<number | null>(null)
     const [replacementText, setReplacementText] = useState('')
+    const [isManualSyncing, setIsManualSyncing] = useState(false)
+    const [syncWordIndex, setSyncWordIndex] = useState<number>(-1)
+    const [isPlaying, setIsPlaying] = useState(false)
 
-    // Reset edited segment when modal opens with new segment
+    // Define updateSegment first since other hooks depend on it
+    const updateSegment = useCallback((newWords: Word[]) => {
+        if (!editedSegment) return;
+
+        const validStartTimes = newWords.map(w => w.start_time).filter((t): t is number => t !== null)
+        const validEndTimes = newWords.map(w => w.end_time).filter((t): t is number => t !== null)
+
+        const segmentStartTime = validStartTimes.length > 0 ? Math.min(...validStartTimes) : null
+        const segmentEndTime = validEndTimes.length > 0 ? Math.max(...validEndTimes) : null
+
+        setEditedSegment({
+            ...editedSegment,
+            words: newWords,
+            text: newWords.map(w => w.text).join(' '),
+            start_time: segmentStartTime,
+            end_time: segmentEndTime
+        })
+    }, [editedSegment])
+
+    // Other useCallback hooks
+    const cleanupManualSync = useCallback(() => {
+        setIsManualSyncing(false)
+        setSyncWordIndex(-1)
+    }, [])
+
+    const handleClose = useCallback(() => {
+        cleanupManualSync()
+        onClose()
+    }, [onClose, cleanupManualSync])
+
+    // All useEffect hooks
     useEffect(() => {
         setEditedSegment(segment)
     }, [segment])
 
+    // Update the spacebar handler when modal state changes
+    useEffect(() => {
+        if (open) {
+            setModalSpacebarHandler(() => (e: KeyboardEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+
+                if (isManualSyncing && editedSegment) {
+                    // Handle manual sync mode
+                    if (syncWordIndex < editedSegment.words.length) {
+                        const newWords = [...editedSegment.words]
+                        const currentWord = newWords[syncWordIndex]
+                        const prevWord = syncWordIndex > 0 ? newWords[syncWordIndex - 1] : null
+
+                        currentWord.start_time = currentTime
+
+                        if (prevWord) {
+                            prevWord.end_time = currentTime - 0.01
+                        }
+
+                        if (syncWordIndex === editedSegment.words.length - 1) {
+                            currentWord.end_time = editedSegment.end_time
+                            setIsManualSyncing(false)
+                            setSyncWordIndex(-1)
+                            updateSegment(newWords)
+                        } else {
+                            setSyncWordIndex(syncWordIndex + 1)
+                            updateSegment(newWords)
+                        }
+                    }
+                } else if (editedSegment && onPlaySegment) {
+                    // Toggle segment playback when not in manual sync mode
+                    const startTime = editedSegment.start_time ?? 0
+                    const endTime = editedSegment.end_time ?? 0
+
+                    if (currentTime >= startTime && currentTime <= endTime) {
+                        if (window.toggleAudioPlayback) {
+                            window.toggleAudioPlayback()
+                        }
+                    } else {
+                        onPlaySegment(startTime)
+                    }
+                }
+            })
+        } else {
+            setModalSpacebarHandler(undefined)
+        }
+
+        return () => {
+            setModalSpacebarHandler(undefined)
+        }
+    }, [
+        open,
+        isManualSyncing,
+        editedSegment,
+        syncWordIndex,
+        currentTime,
+        onPlaySegment,
+        updateSegment,
+        setModalSpacebarHandler
+    ])
+
+    // Auto-stop sync if we go past the end time
+    useEffect(() => {
+        if (!editedSegment) return
+
+        const endTime = editedSegment.end_time ?? 0
+
+        if (window.isAudioPlaying && currentTime > endTime) {
+            console.log('Stopping playback: current time exceeded end time')
+            window.toggleAudioPlayback?.()
+            setIsManualSyncing(false)
+            setSyncWordIndex(-1)
+        }
+
+    }, [isManualSyncing, editedSegment, currentTime, setSyncWordIndex])
+
+    // Update isPlaying when currentTime changes
+    useEffect(() => {
+        if (editedSegment) {
+            const startTime = editedSegment.start_time ?? 0
+            const endTime = editedSegment.end_time ?? 0
+            const isWithinSegment = currentTime >= startTime && currentTime <= endTime
+
+            // Only consider it playing if it's within the segment AND audio is actually playing
+            setIsPlaying(isWithinSegment && window.isAudioPlaying === true)
+        }
+    }, [currentTime, editedSegment])
+
+    // Add a function to get safe time values
+    const getSafeTimeRange = (segment: LyricsSegment | null) => {
+        if (!segment) return { start: 0, end: 1 }; // Default 1-second range
+        const start = segment.start_time ?? 0;
+        const end = segment.end_time ?? (start + 1);
+        return { start, end };
+    }
+
+    // Early return after all hooks and function definitions
     if (!segment || segmentIndex === null || !editedSegment || !originalSegment) return null
 
-    const handleWordChange = (index: number, field: keyof Word, value: string | number) => {
+    // Get safe time values for TimelineEditor
+    const timeRange = getSafeTimeRange(editedSegment)
+
+    const handleWordChange = (index: number, updates: Partial<Word>) => {
         const newWords = [...editedSegment.words]
         newWords[index] = {
             ...newWords[index],
-            [field]: field === 'start_time' || field === 'end_time'
-                ? parseFloat(Number(value).toFixed(4))
-                : value
+            ...updates
         }
         updateSegment(newWords)
     }
 
-    const updateSegment = (newWords: Word[]) => {
-        const segmentStartTime = Math.min(...newWords.map(w => w.start_time))
-        const segmentEndTime = Math.max(...newWords.map(w => w.end_time))
-
-        setEditedSegment({
-            ...editedSegment,
-            words: newWords,
-            text: newWords.map(w => w.text).join(' '),
-            start_time: segmentStartTime,
-            end_time: segmentEndTime
-        })
-    }
-
     const handleAddWord = (index?: number) => {
         const newWords = [...editedSegment.words]
         let newWord: Word
@@ -91,11 +219,12 @@ export default function EditModal({
         if (index === undefined) {
             // Add at end
             const lastWord = newWords[newWords.length - 1]
+            const lastEndTime = lastWord.end_time ?? 0
             newWord = {
                 id: nanoid(),
                 text: '',
-                start_time: lastWord.end_time,
-                end_time: lastWord.end_time + 0.5,
+                start_time: lastEndTime,
+                end_time: lastEndTime + 0.5,
                 confidence: 1.0
             }
             newWords.push(newWord)
@@ -104,8 +233,11 @@ export default function EditModal({
             const prevWord = newWords[index]
             const nextWord = newWords[index + 1]
             const midTime = prevWord ?
-                (nextWord ? (prevWord.end_time + nextWord.start_time) / 2 : prevWord.end_time + 0.5) :
-                (nextWord ? nextWord.start_time - 0.5 : 0)
+                (nextWord ?
+                    ((prevWord.end_time ?? 0) + (nextWord.start_time ?? 0)) / 2 :
+                    (prevWord.end_time ?? 0) + 0.5
+                ) :
+                (nextWord ? (nextWord.start_time ?? 0) - 0.5 : 0)
 
             newWord = {
                 id: nanoid(),
@@ -122,7 +254,9 @@ export default function EditModal({
 
     const handleSplitWord = (index: number) => {
         const word = editedSegment.words[index]
-        const midTime = (word.start_time + word.end_time) / 2
+        const startTime = word.start_time ?? 0
+        const endTime = word.end_time ?? startTime + 0.5
+        const midTime = (startTime + endTime) / 2
         const words = word.text.split(/\s+/)
 
         if (words.length <= 1) {
@@ -138,7 +272,7 @@ export default function EditModal({
             {
                 id: nanoid(),
                 text: words[0],
-                start_time: word.start_time,
+                start_time: startTime,
                 end_time: midTime,
                 confidence: 1.0
             },
@@ -146,7 +280,7 @@ export default function EditModal({
                 id: nanoid(),
                 text: words[1],
                 start_time: midTime,
-                end_time: word.end_time,
+                end_time: endTime,
                 confidence: 1.0
             }
         )
@@ -164,8 +298,8 @@ export default function EditModal({
         newWords.splice(index, 2, {
             id: nanoid(),
             text: `${word1.text} ${word2.text}`.trim(),
-            start_time: word1.start_time,
-            end_time: word2.end_time,
+            start_time: word1.start_time ?? null,
+            end_time: word2.end_time ?? null,
             confidence: 1.0
         })
 
@@ -198,7 +332,7 @@ export default function EditModal({
                 originalText: segment?.text,
                 editedText: editedSegment.text,
                 wordCount: editedSegment.words.length,
-                timeRange: `${editedSegment.start_time.toFixed(4)} - ${editedSegment.end_time.toFixed(4)}`
+                timeRange: `${editedSegment.start_time?.toFixed(4) ?? 'N/A'} - ${editedSegment.end_time?.toFixed(4) ?? 'N/A'}`
             })
             onSave(editedSegment)
             onClose()
@@ -209,7 +343,9 @@ export default function EditModal({
         if (!editedSegment) return
 
         const newWords = replacementText.trim().split(/\s+/)
-        const segmentDuration = editedSegment.end_time - editedSegment.start_time
+        const startTime = editedSegment.start_time ?? 0
+        const endTime = editedSegment.end_time ?? (startTime + newWords.length) // Default to 1 second per word
+        const segmentDuration = endTime - startTime
 
         let updatedWords: Word[]
 
@@ -228,8 +364,8 @@ export default function EditModal({
             updatedWords = newWords.map((text, index) => ({
                 id: nanoid(),  // Generate new ID
                 text,
-                start_time: editedSegment.start_time + (index * avgWordDuration),
-                end_time: editedSegment.start_time + ((index + 1) * avgWordDuration),
+                start_time: startTime + (index * avgWordDuration),
+                end_time: startTime + ((index + 1) * avgWordDuration),
                 confidence: 1.0
             }))
         }
@@ -252,10 +388,49 @@ export default function EditModal({
         }
     }
 
+    const handleSplitSegment = (wordIndex: number) => {
+        if (segmentIndex !== null && editedSegment) {
+            handleSave()  // Save current changes first
+            onSplitSegment?.(segmentIndex, wordIndex)
+        }
+    }
+
+    // Add this new function to handle manual sync
+    const startManualSync = () => {
+        if (isManualSyncing) {
+            setIsManualSyncing(false)
+            setSyncWordIndex(-1)
+            return
+        }
+
+        if (!editedSegment || !onPlaySegment) return
+
+        setIsManualSyncing(true)
+        setSyncWordIndex(0)
+        // Start playing 3 seconds before segment start
+        const startTime = (editedSegment.start_time ?? 0) - 3
+        onPlaySegment(startTime)
+    }
+
+    // Handle play/stop button click
+    const handlePlayButtonClick = () => {
+        if (!segment?.start_time || !onPlaySegment) return
+
+        if (isPlaying) {
+            // Stop playback
+            if (window.toggleAudioPlayback) {
+                window.toggleAudioPlayback()
+            }
+        } else {
+            // Start playback
+            onPlaySegment(segment.start_time)
+        }
+    }
+
     return (
         <Dialog
             open={open}
-            onClose={onClose}
+            onClose={handleClose}
             maxWidth="md"
             fullWidth
             onKeyDown={handleKeyDown}
@@ -263,13 +438,17 @@ export default function EditModal({
             <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
                     Edit Segment {segmentIndex}
-                    {segment?.start_time !== undefined && onPlaySegment && (
+                    {segment?.start_time !== null && onPlaySegment && (
                         <IconButton
                             size="small"
-                            onClick={() => onPlaySegment(segment.start_time)}
+                            onClick={handlePlayButtonClick}
                             sx={{ padding: '4px' }}
                         >
-                            <PlayCircleOutlineIcon />
+                            {isPlaying ? (
+                                <StopIcon />
+                            ) : (
+                                <PlayCircleOutlineIcon />
+                            )}
                         </IconButton>
                     )}
                 </Box>
@@ -281,23 +460,38 @@ export default function EditModal({
                 <Box sx={{ mb: 2 }}>
                     <TimelineEditor
                         words={editedSegment.words}
-                        startTime={editedSegment.start_time}
-                        endTime={editedSegment.end_time}
-                        onWordUpdate={(index, updates) => {
-                            const newWords = [...editedSegment.words]
-                            newWords[index] = { ...newWords[index], ...updates }
-                            updateSegment(newWords)
-                        }}
+                        startTime={timeRange.start}
+                        endTime={timeRange.end}
+                        onWordUpdate={handleWordChange}
                         currentTime={currentTime}
                         onPlaySegment={onPlaySegment}
                     />
                 </Box>
 
-                <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-                    Original Time Range: {originalSegment.start_time.toFixed(2)} - {originalSegment.end_time.toFixed(2)}
-                    <br />
-                    Current Time Range: {editedSegment.start_time.toFixed(2)} - {editedSegment.end_time.toFixed(2)}
-                </Typography>
+                <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <Typography variant="body2" color="text.secondary">
+                        Original Time Range: {originalSegment.start_time?.toFixed(2) ?? 'N/A'} - {originalSegment.end_time?.toFixed(2) ?? 'N/A'}
+                        <br />
+                        Current Time Range: {editedSegment.start_time?.toFixed(2) ?? 'N/A'} - {editedSegment.end_time?.toFixed(2) ?? 'N/A'}
+                    </Typography>
+
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                        <Button
+                            variant={isManualSyncing ? "outlined" : "contained"}
+                            onClick={startManualSync}
+                            disabled={!onPlaySegment}
+                            startIcon={isManualSyncing ? <CancelIcon /> : <PlayCircleOutlineIcon />}
+                            color={isManualSyncing ? "error" : "primary"}
+                        >
+                            {isManualSyncing ? "Cancel Sync" : "Manual Sync"}
+                        </Button>
+                        {isManualSyncing && (
+                            <Typography variant="body2">
+                                Press spacebar for word {syncWordIndex + 1} of {editedSegment?.words.length}
+                            </Typography>
+                        )}
+                    </Box>
+                </Box>
 
                 <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 3 }}>
                     {editedSegment.words.map((word, index) => (
@@ -305,14 +499,14 @@ export default function EditModal({
                             <TextField
                                 label={`Word ${index}`}
                                 value={word.text}
-                                onChange={(e) => handleWordChange(index, 'text', e.target.value)}
+                                onChange={(e) => handleWordChange(index, { text: e.target.value })}
                                 fullWidth
                                 size="small"
                             />
                             <TextField
                                 label="Start Time"
-                                value={word.start_time.toFixed(2)}
-                                onChange={(e) => handleWordChange(index, 'start_time', parseFloat(e.target.value))}
+                                value={word.start_time?.toFixed(2) ?? ''}
+                                onChange={(e) => handleWordChange(index, { start_time: parseFloat(e.target.value) })}
                                 type="number"
                                 inputProps={{ step: 0.01 }}
                                 sx={{ width: '150px' }}
@@ -320,13 +514,20 @@ export default function EditModal({
                             />
                             <TextField
                                 label="End Time"
-                                value={word.end_time.toFixed(2)}
-                                onChange={(e) => handleWordChange(index, 'end_time', parseFloat(e.target.value))}
+                                value={word.end_time?.toFixed(2) ?? ''}
+                                onChange={(e) => handleWordChange(index, { end_time: parseFloat(e.target.value) })}
                                 type="number"
                                 inputProps={{ step: 0.01 }}
                                 sx={{ width: '150px' }}
                                 size="small"
                             />
+                            <IconButton
+                                onClick={() => handleRemoveWord(index)}
+                                disabled={editedSegment.words.length <= 1}
+                                sx={{ color: 'error.main' }}
+                            >
+                                <DeleteIcon fontSize="small" />
+                            </IconButton>
                             <IconButton onClick={(e) => handleWordMenu(e, index)}>
                                 <MoreVertIcon />
                             </IconButton>
@@ -361,16 +562,27 @@ export default function EditModal({
                 >
                     Reset
                 </Button>
-                <Button
-                    startIcon={<DeleteIcon />}
-                    onClick={handleDelete}
-                    color="error"
-                    sx={{ mr: 'auto' }}
-                >
-                    Delete Segment
-                </Button>
-                <Button onClick={onClose}>Cancel</Button>
-                <Button onClick={handleSave} variant="contained">
+                <Box sx={{ mr: 'auto', display: 'flex', gap: 1 }}>
+                    <Button
+                        startIcon={<AddIcon />}
+                        onClick={() => segmentIndex !== null && onAddSegment?.(segmentIndex)}
+                        color="primary"
+                    >
+                        Add Segment Before
+                    </Button>
+                    <Button
+                        startIcon={<DeleteIcon />}
+                        onClick={handleDelete}
+                        color="error"
+                    >
+                        Delete Segment
+                    </Button>
+                </Box>
+                <Button onClick={handleClose}>Cancel</Button>
+                <Button onClick={() => {
+                    cleanupManualSync()
+                    onSave(editedSegment)
+                }}>
                     Save Changes
                 </Button>
             </DialogActions>
@@ -392,6 +604,12 @@ export default function EditModal({
                 }}>
                     <SplitIcon sx={{ mr: 1 }} /> Split Word
                 </MenuItem>
+                <MenuItem onClick={() => {
+                    handleSplitSegment(selectedWordIndex!)
+                    handleMenuClose()
+                }}>
+                    <SplitIcon sx={{ mr: 1 }} /> Split Segment After Word
+                </MenuItem>
                 <MenuItem
                     onClick={() => {
                         handleMergeWords(selectedWordIndex!)

lyrics_transcriber/frontend/src/components/FileUpload.tsx

@@ -1,10 +1,10 @@
 import { ChangeEvent, DragEvent, useState } from 'react'
 import { Paper, Typography } from '@mui/material'
 import CloudUploadIcon from '@mui/icons-material/CloudUpload'
-import { LyricsData } from '../types'
+import { CorrectionData } from '../types'
 
 interface FileUploadProps {
-    onUpload: (data: LyricsData) => void
+    onUpload: (data: CorrectionData) => void
 }
 
 export default function FileUpload({ onUpload }: FileUploadProps) {