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

lyrics_transcriber/frontend/src/components/EditModal.tsx

@@ -7,25 +7,23 @@ import {
     Box,
     TextField,
     Button,
-    Typography,
-    Menu,
-    MenuItem,
+    Typography
 } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
-import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
-import MergeIcon from '@mui/icons-material/CallMerge'
 import SplitIcon from '@mui/icons-material/CallSplit'
 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 HistoryIcon from '@mui/icons-material/History'
 import { LyricsSegment, Word } from '../types'
 import { useState, useEffect, useCallback } from 'react'
 import TimelineEditor from './TimelineEditor'
 import { nanoid } from 'nanoid'
+import WordDivider from './WordDivider'
+import useManualSync from '../hooks/useManualSync'
 
 interface EditModalProps {
     open: boolean
@@ -39,7 +37,9 @@ interface EditModalProps {
     onDelete?: (segmentIndex: number) => void
     onAddSegment?: (segmentIndex: number) => void
     onSplitSegment?: (segmentIndex: number, afterWordIndex: number) => void
+    onMergeSegment?: (segmentIndex: number, mergeWithNext: boolean) => void
     setModalSpacebarHandler: (handler: (() => (e: KeyboardEvent) => void) | undefined) => void
+    originalTranscribedSegment?: LyricsSegment | null
 }
 
 export default function EditModal({
@@ -54,18 +54,15 @@ export default function EditModal({
     onDelete,
     onAddSegment,
     onSplitSegment,
+    onMergeSegment,
     setModalSpacebarHandler,
+    originalTranscribedSegment
 }: 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)
 
-    // Define updateSegment first since other hooks depend on it
+    // Define updateSegment first since the hook depends on it
     const updateSegment = useCallback((newWords: Word[]) => {
         if (!editedSegment) return;
 
@@ -84,84 +81,78 @@ export default function EditModal({
         })
     }, [editedSegment])
 
-    // Other useCallback hooks
-    const cleanupManualSync = useCallback(() => {
-        setIsManualSyncing(false)
-        setSyncWordIndex(-1)
-    }, [])
+    // Use the new hook
+    const {
+        isManualSyncing,
+        syncWordIndex,
+        startManualSync,
+        cleanupManualSync,
+        handleSpacebar,
+        isSpacebarPressed
+    } = useManualSync({
+        editedSegment,
+        currentTime,
+        onPlaySegment,
+        updateSegment
+    })
 
     const handleClose = useCallback(() => {
         cleanupManualSync()
         onClose()
     }, [onClose, cleanupManualSync])
 
-    // All useEffect hooks
-    useEffect(() => {
-        setEditedSegment(segment)
-    }, [segment])
-
     // Update the spacebar handler when modal state changes
     useEffect(() => {
+        const spacebarHandler = handleSpacebar // Capture the current handler
+
         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)
-                    }
-                }
+            console.log('EditModal - Setting up modal spacebar handler', {
+                hasPlaySegment: !!onPlaySegment,
+                editedSegmentId: editedSegment?.id,
+                handlerFunction: spacebarHandler.toString().slice(0, 100)
             })
-        } else {
-            setModalSpacebarHandler(undefined)
-        }
-
-        return () => {
-            setModalSpacebarHandler(undefined)
+            
+            // Create a function that will be called by the global event listeners
+            const handleKeyEvent = (e: KeyboardEvent) => {
+                if (e.code === 'Space') {
+                    spacebarHandler(e)
+                }
+            }
+            
+            setModalSpacebarHandler(() => handleKeyEvent)
+
+            // Only cleanup when the effect is re-run or the modal is closed
+            return () => {
+                if (!open) {
+                    console.log('EditModal - Cleanup: clearing modal spacebar handler')
+                    setModalSpacebarHandler(undefined)
+                }
+            }
         }
     }, [
         open,
-        isManualSyncing,
-        editedSegment,
-        syncWordIndex,
-        currentTime,
-        onPlaySegment,
-        updateSegment,
-        setModalSpacebarHandler
+        handleSpacebar,
+        setModalSpacebarHandler,
+        editedSegment?.id,
+        onPlaySegment
     ])
 
+    // 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
+
+            setIsPlaying(isWithinSegment && window.isAudioPlaying === true)
+        }
+    }, [currentTime, editedSegment])
+
+    // All useEffect hooks
+    useEffect(() => {
+        setEditedSegment(segment)
+    }, [segment])
+
     // Auto-stop sync if we go past the end time
     useEffect(() => {
         if (!editedSegment) return
@@ -171,23 +162,10 @@ export default function EditModal({
         if (window.isAudioPlaying && currentTime > endTime) {
             console.log('Stopping playback: current time exceeded end time')
             window.toggleAudioPlayback?.()
-            setIsManualSyncing(false)
-            setSyncWordIndex(-1)
+            cleanupManualSync()
         }
 
-    }, [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])
+    }, [isManualSyncing, editedSegment, currentTime, cleanupManualSync])
 
     // Add a function to get safe time values
     const getSafeTimeRange = (segment: LyricsSegment | null) => {
@@ -256,36 +234,36 @@ export default function EditModal({
         const word = editedSegment.words[index]
         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+/)
+        const totalDuration = endTime - startTime
+
+        // Split on any number of spaces and filter out empty strings
+        const words = word.text.split(/\s+/).filter(w => w.length > 0)
 
         if (words.length <= 1) {
-            // Split single word in half
+            // If no spaces found, split the word in half as before
             const firstHalf = word.text.slice(0, Math.ceil(word.text.length / 2))
             const secondHalf = word.text.slice(Math.ceil(word.text.length / 2))
             words[0] = firstHalf
             words[1] = secondHalf
         }
 
-        const newWords = [...editedSegment.words]
-        newWords.splice(index, 1,
-            {
-                id: nanoid(),
-                text: words[0],
-                start_time: startTime,
-                end_time: midTime,
-                confidence: 1.0
-            },
-            {
-                id: nanoid(),
-                text: words[1],
-                start_time: midTime,
-                end_time: endTime,
-                confidence: 1.0
-            }
-        )
+        // Calculate time per word
+        const timePerWord = totalDuration / words.length
 
-        updateSegment(newWords)
+        // Create new word objects with evenly distributed times
+        const newWords = words.map((text, i) => ({
+            id: nanoid(),
+            text,
+            start_time: startTime + (i * timePerWord),
+            end_time: startTime + ((i + 1) * timePerWord),
+            confidence: 1.0
+        }))
+
+        // Replace the original word with the new words
+        const allWords = [...editedSegment.words]
+        allWords.splice(index, 1, ...newWords)
+
+        updateSegment(allWords)
     }
 
     const handleMergeWords = (index: number) => {
@@ -315,14 +293,10 @@ export default function EditModal({
         setEditedSegment(JSON.parse(JSON.stringify(originalSegment)))
     }
 
-    const handleWordMenu = (event: React.MouseEvent<HTMLElement>, index: number) => {
-        setMenuAnchorEl(event.currentTarget)
-        setSelectedWordIndex(index)
-    }
-
-    const handleMenuClose = () => {
-        setMenuAnchorEl(null)
-        setSelectedWordIndex(null)
+    const handleRevertToOriginal = () => {
+        if (originalTranscribedSegment) {
+            setEditedSegment(JSON.parse(JSON.stringify(originalTranscribedSegment)))
+        }
     }
 
     const handleSave = () => {
@@ -395,21 +369,12 @@ export default function EditModal({
         }
     }
 
-    // Add this new function to handle manual sync
-    const startManualSync = () => {
-        if (isManualSyncing) {
-            setIsManualSyncing(false)
-            setSyncWordIndex(-1)
-            return
+    const handleMergeSegment = (mergeWithNext: boolean) => {
+        if (segmentIndex !== null && editedSegment) {
+            handleSave()  // Save current changes first
+            onMergeSegment?.(segmentIndex, mergeWithNext)
+            onClose()
         }
-
-        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
@@ -434,6 +399,12 @@ export default function EditModal({
             maxWidth="md"
             fullWidth
             onKeyDown={handleKeyDown}
+            PaperProps={{
+                sx: {
+                    height: '90vh',  // Take up 90% of viewport height
+                    margin: '5vh 0'  // Add 5vh margin top and bottom
+                }
+            }}
         >
             <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -456,8 +427,16 @@ export default function EditModal({
                     <CloseIcon />
                 </IconButton>
             </DialogTitle>
-            <DialogContent dividers>
-                <Box sx={{ mb: 2 }}>
+            <DialogContent
+                dividers
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,     // Allow content to fill available space
+                    overflow: 'hidden'  // Prevent double scrollbars
+                }}
+            >
+                <Box sx={{ mb: 0 }}>
                     <TimelineEditor
                         words={editedSegment.words}
                         startTime={timeRange.start}
@@ -468,11 +447,11 @@ export default function EditModal({
                     />
                 </Box>
 
-                <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <Box sx={{ mb: 1, 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'}
+                        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'}
+                        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 }}>
@@ -486,69 +465,126 @@ export default function EditModal({
                             {isManualSyncing ? "Cancel Sync" : "Manual Sync"}
                         </Button>
                         {isManualSyncing && (
-                            <Typography variant="body2">
-                                Press spacebar for word {syncWordIndex + 1} of {editedSegment?.words.length}
-                            </Typography>
+                            <Box>
+                                <Typography variant="body2">
+                                    Word {syncWordIndex + 1} of {editedSegment?.words.length}: <strong>{editedSegment?.words[syncWordIndex]?.text || ''}</strong>
+                                </Typography>
+                                <Typography variant="caption" color="text.secondary">
+                                    {isSpacebarPressed ? 
+                                        "Holding spacebar... Release when word ends" : 
+                                        "Press spacebar when word starts (tap for short words, hold for long words)"}
+                                </Typography>
+                            </Box>
                         )}
                     </Box>
                 </Box>
 
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 3 }}>
+                <Box sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 0.5,
+                    mb: 3,
+                    pt: 1,
+                    flexGrow: 1,
+                    overflowY: 'auto',
+                    '&::-webkit-scrollbar': {
+                        display: 'none'  // Hide scrollbar for WebKit browsers (Chrome, Safari, etc.)
+                    },
+                    msOverflowStyle: 'none',  // Hide scrollbar for IE and Edge
+                    scrollbarWidth: 'none',   // Hide scrollbar for Firefox
+                }}>
+                    {/* Initial divider with Add Segment Before button */}
+                    <WordDivider
+                        onAddWord={() => handleAddWord(-1)}
+                        onAddSegmentBefore={() => onAddSegment?.(segmentIndex)}
+                        onMergeSegment={() => handleMergeSegment(false)}
+                        isFirst={true}
+                        sx={{ ml: 15 }}
+                    />
+
                     {editedSegment.words.map((word, index) => (
-                        <Box key={index} sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-                            <TextField
-                                label={`Word ${index}`}
-                                value={word.text}
-                                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) })}
-                                type="number"
-                                inputProps={{ step: 0.01 }}
-                                sx={{ width: '150px' }}
-                                size="small"
-                            />
-                            <TextField
-                                label="End Time"
-                                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"
+                        <Box key={word.id}>
+                            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+                                <TextField
+                                    label={`Word ${index}`}
+                                    value={word.text}
+                                    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) })}
+                                    type="number"
+                                    inputProps={{ step: 0.01 }}
+                                    sx={{ width: '150px' }}
+                                    size="small"
+                                />
+                                <TextField
+                                    label="End Time"
+                                    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={() => handleSplitWord(index)}
+                                    title="Split Word"
+                                    sx={{ color: 'primary.main' }}
+                                    size="small"
+                                >
+                                    <SplitIcon fontSize="small" />
+                                </IconButton>
+                                <IconButton
+                                    onClick={() => handleRemoveWord(index)}
+                                    disabled={editedSegment.words.length <= 1}
+                                    title="Remove Word"
+                                    sx={{ color: 'error.main' }}
+                                    size="small"
+                                >
+                                    <DeleteIcon fontSize="small" />
+                                </IconButton>
+                            </Box>
+
+                            {/* Update the WordDivider usage to include split segment */}
+                            <WordDivider
+                                onAddWord={() => handleAddWord(index)}
+                                onMergeWords={() => handleMergeWords(index)}
+                                onSplitSegment={() => handleSplitSegment(index)}
+                                onAddSegmentAfter={
+                                    index === editedSegment.words.length - 1
+                                        ? () => onAddSegment?.(segmentIndex + 1)
+                                        : undefined
+                                }
+                                onMergeSegment={
+                                    index === editedSegment.words.length - 1
+                                        ? () => handleMergeSegment(true)
+                                        : undefined
+                                }
+                                canMerge={index < editedSegment.words.length - 1}
+                                isLast={index === editedSegment.words.length - 1}
+                                sx={{ ml: 15 }}
                             />
-                            <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>
                         </Box>
                     ))}
                 </Box>
 
-                <Box sx={{ display: 'flex', gap: 2 }}>
+                <Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
                     <TextField
-                        label="Replace all words"
                         value={replacementText}
                         onChange={(e) => setReplacementText(e.target.value)}
-                        fullWidth
-                        placeholder="Type or paste replacement words here"
+                        placeholder="Replace all words"
                         size="small"
+                        sx={{ flexGrow: 1, maxWidth: 'calc(100% - 140px)' }}  // Reserve space for the button
                     />
                     <Button
-                        variant="contained"
-                        startIcon={<AutoFixHighIcon />}
                         onClick={handleReplaceAllWords}
-                        disabled={!replacementText.trim()}
+                        startIcon={<AutoFixHighIcon />}
+                        size="small"
+                        sx={{ whiteSpace: 'nowrap' }}
                     >
                         Replace All
                     </Button>
@@ -562,14 +598,15 @@ export default function EditModal({
                 >
                     Reset
                 </Button>
-                <Box sx={{ mr: 'auto', display: 'flex', gap: 1 }}>
+                {originalTranscribedSegment && (
                     <Button
-                        startIcon={<AddIcon />}
-                        onClick={() => segmentIndex !== null && onAddSegment?.(segmentIndex)}
-                        color="primary"
+                        onClick={handleRevertToOriginal}
+                        startIcon={<HistoryIcon />}
                     >
-                        Add Segment Before
+                        Un-Correct
                     </Button>
+                )}
+                <Box sx={{ mr: 'auto' }}>
                     <Button
                         startIcon={<DeleteIcon />}
                         onClick={handleDelete}
@@ -579,56 +616,14 @@ export default function EditModal({
                     </Button>
                 </Box>
                 <Button onClick={handleClose}>Cancel</Button>
-                <Button onClick={() => {
-                    cleanupManualSync()
-                    onSave(editedSegment)
-                }}>
-                    Save Changes
+                <Button
+                    onClick={handleSave}
+                    variant="contained"
+                    disabled={!editedSegment || editedSegment.words.length === 0}
+                >
+                    Save
                 </Button>
             </DialogActions>
-
-            <Menu
-                anchorEl={menuAnchorEl}
-                open={Boolean(menuAnchorEl)}
-                onClose={handleMenuClose}
-            >
-                <MenuItem onClick={() => {
-                    handleAddWord(selectedWordIndex!)
-                    handleMenuClose()
-                }}>
-                    <AddIcon sx={{ mr: 1 }} /> Add Word After
-                </MenuItem>
-                <MenuItem onClick={() => {
-                    handleSplitWord(selectedWordIndex!)
-                    handleMenuClose()
-                }}>
-                    <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!)
-                        handleMenuClose()
-                    }}
-                    disabled={selectedWordIndex === editedSegment.words.length - 1}
-                >
-                    <MergeIcon sx={{ mr: 1 }} /> Merge with Next
-                </MenuItem>
-                <MenuItem
-                    onClick={() => {
-                        handleRemoveWord(selectedWordIndex!)
-                        handleMenuClose()
-                    }}
-                    disabled={editedSegment.words.length <= 1}
-                >
-                    <DeleteIcon sx={{ mr: 1 }} color="error" /> Remove
-                </MenuItem>
-            </Menu>
         </Dialog>
     )
 }