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

lyrics_transcriber/frontend/src/components/ReviewChangesModal.tsx

@@ -6,13 +6,12 @@ import {
     Button,
     Box,
     Typography,
-    Paper,
-    Collapse,
-    IconButton,
+    Paper
 } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import { CorrectionData } from '../types'
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useEffect } from 'react'
+import { ApiClient } from '../api'
+import PreviewVideoSection from './PreviewVideoSection'
 
 interface ReviewChangesModalProps {
     open: boolean
@@ -20,6 +19,8 @@ interface ReviewChangesModalProps {
     originalData: CorrectionData
     updatedData: CorrectionData
     onSubmit: () => void
+    apiClient: ApiClient | null
+    setModalSpacebarHandler: (handler: (() => (e: KeyboardEvent) => void) | undefined) => void
 }
 
 interface DiffResult {
@@ -34,29 +35,29 @@ interface DiffResult {
 // Add interfaces for the word and segment structures
 interface Word {
     text: string
-    start_time: number
-    end_time: number
+    start_time: number | null
+    end_time: number | null
     id?: string
 }
 
 interface Segment {
     text: string
-    start_time: number
-    end_time: number
+    start_time: number | null
+    end_time: number | null
     words: Word[]
     id?: string
 }
 
 const normalizeWordForComparison = (word: Word): Omit<Word, 'id'> => ({
     text: word.text,
-    start_time: word.start_time,
-    end_time: word.end_time
+    start_time: word.start_time ?? 0,  // Default to 0 for comparison
+    end_time: word.end_time ?? 0       // Default to 0 for comparison
 })
 
 const normalizeSegmentForComparison = (segment: Segment): Omit<Segment, 'id'> => ({
     text: segment.text,
-    start_time: segment.start_time,
-    end_time: segment.end_time,
+    start_time: segment.start_time ?? 0,  // Default to 0 for comparison
+    end_time: segment.end_time ?? 0,      // Default to 0 for comparison
     words: segment.words.map(normalizeWordForComparison)
 })
 
@@ -65,14 +66,40 @@ export default function ReviewChangesModal({
     onClose,
     originalData,
     updatedData,
-    onSubmit
+    onSubmit,
+    apiClient,
+    setModalSpacebarHandler
 }: ReviewChangesModalProps) {
-    const [expandedSegments, setExpandedSegments] = useState<number[]>([])
+    // Add ref to video element
+    const videoRef = useRef<HTMLVideoElement>(null)
+
+    // Add effect to handle spacebar
+    useEffect(() => {
+        if (open) {
+            setModalSpacebarHandler(() => (e: KeyboardEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+
+                if (videoRef.current) {
+                    if (videoRef.current.paused) {
+                        videoRef.current.play()
+                    } else {
+                        videoRef.current.pause()
+                    }
+                }
+            })
+        } else {
+            setModalSpacebarHandler(undefined)
+        }
+
+        return () => {
+            setModalSpacebarHandler(undefined)
+        }
+    }, [open, setModalSpacebarHandler])
 
     const differences = useMemo(() => {
         const diffs: DiffResult[] = []
 
-        // Compare corrected segments
         originalData.corrected_segments.forEach((originalSegment, index) => {
             const updatedSegment = updatedData.corrected_segments[index]
             if (!updatedSegment) {
@@ -89,26 +116,26 @@ export default function ReviewChangesModal({
             const normalizedUpdated = normalizeSegmentForComparison(updatedSegment)
             const wordChanges: DiffResult[] = []
 
-            // Compare word-level changes based on position rather than IDs
-            normalizedOriginal.words.forEach((word: Omit<Word, 'id'>, wordIndex: number) => {
+            // Compare word-level changes
+            normalizedOriginal.words.forEach((word, wordIndex) => {
                 const updatedWord = normalizedUpdated.words[wordIndex]
                 if (!updatedWord) {
                     wordChanges.push({
                         type: 'removed',
                         path: `Word ${wordIndex}`,
-                        oldValue: `"${word.text}" (${word.start_time.toFixed(4)} - ${word.end_time.toFixed(4)})`
+                        oldValue: `"${word.text}" (${word.start_time?.toFixed(4) ?? 'N/A'} - ${word.end_time?.toFixed(4) ?? 'N/A'})`
                     })
                     return
                 }
 
                 if (word.text !== updatedWord.text ||
-                    Math.abs(word.start_time - updatedWord.start_time) > 0.0001 ||
-                    Math.abs(word.end_time - updatedWord.end_time) > 0.0001) {
+                    Math.abs((word.start_time ?? 0) - (updatedWord.start_time ?? 0)) > 0.0001 ||
+                    Math.abs((word.end_time ?? 0) - (updatedWord.end_time ?? 0)) > 0.0001) {
                     wordChanges.push({
                         type: 'modified',
                         path: `Word ${wordIndex}`,
-                        oldValue: `"${word.text}" (${word.start_time.toFixed(4)} - ${word.end_time.toFixed(4)})`,
-                        newValue: `"${updatedWord.text}" (${updatedWord.start_time.toFixed(4)} - ${updatedWord.end_time.toFixed(4)})`
+                        oldValue: `"${word.text}" (${word.start_time?.toFixed(4) ?? 'N/A'} - ${word.end_time?.toFixed(4) ?? 'N/A'})`,
+                        newValue: `"${updatedWord.text}" (${updatedWord.start_time?.toFixed(4) ?? 'N/A'} - ${updatedWord.end_time?.toFixed(4) ?? 'N/A'})`
                     })
                 }
             })
@@ -120,21 +147,22 @@ export default function ReviewChangesModal({
                     wordChanges.push({
                         type: 'added',
                         path: `Word ${i}`,
-                        newValue: `"${word.text}" (${word.start_time.toFixed(4)} - ${word.end_time.toFixed(4)})`
+                        newValue: `"${word.text}" (${word.start_time?.toFixed(4) ?? 'N/A'} - ${word.end_time?.toFixed(4) ?? 'N/A'})`
                     })
                 }
             }
 
+            // Compare segment-level changes
             if (normalizedOriginal.text !== normalizedUpdated.text ||
-                Math.abs(normalizedOriginal.start_time - normalizedUpdated.start_time) > 0.0001 ||
-                Math.abs(normalizedOriginal.end_time - normalizedUpdated.end_time) > 0.0001 ||
+                Math.abs((normalizedOriginal.start_time ?? 0) - (normalizedUpdated.start_time ?? 0)) > 0.0001 ||
+                Math.abs((normalizedOriginal.end_time ?? 0) - (normalizedUpdated.end_time ?? 0)) > 0.0001 ||
                 wordChanges.length > 0) {
                 diffs.push({
                     type: 'modified',
                     path: `Segment ${index}`,
                     segmentIndex: index,
-                    oldValue: `"${normalizedOriginal.text}" (${normalizedOriginal.start_time.toFixed(4)} - ${normalizedOriginal.end_time.toFixed(4)})`,
-                    newValue: `"${normalizedUpdated.text}" (${normalizedUpdated.start_time.toFixed(4)} - ${normalizedUpdated.end_time.toFixed(4)})`,
+                    oldValue: `"${normalizedOriginal.text}" (${normalizedOriginal.start_time?.toFixed(4) ?? 'N/A'} - ${normalizedOriginal.end_time?.toFixed(4) ?? 'N/A'})`,
+                    newValue: `"${normalizedUpdated.text}" (${normalizedUpdated.start_time?.toFixed(4) ?? 'N/A'} - ${normalizedUpdated.end_time?.toFixed(4) ?? 'N/A'})`,
                     wordChanges: wordChanges.length > 0 ? wordChanges : undefined
                 })
             }
@@ -148,7 +176,7 @@ export default function ReviewChangesModal({
                     type: 'added',
                     path: `Segment ${i}`,
                     segmentIndex: i,
-                    newValue: `"${segment.text}" (${segment.start_time.toFixed(4)} - ${segment.end_time.toFixed(4)})`
+                    newValue: `"${segment.text}" (${segment.start_time?.toFixed(4) ?? 'N/A'} - ${segment.end_time?.toFixed(4) ?? 'N/A'})`
                 })
             }
         }
@@ -156,82 +184,81 @@ export default function ReviewChangesModal({
         return diffs
     }, [originalData, updatedData])
 
-    const handleToggleSegment = (segmentIndex: number) => {
-        setExpandedSegments(prev =>
-            prev.includes(segmentIndex)
-                ? prev.filter(i => i !== segmentIndex)
-                : [...prev, segmentIndex]
-        )
-    }
+    const renderCompactDiff = (diff: DiffResult) => {
+        if (diff.type !== 'modified') {
+            // For added/removed segments, show them as before but in a single line
+            return (
+                <Typography
+                    key={diff.path}
+                    color={diff.type === 'added' ? 'success.main' : 'error.main'}
+                    sx={{ mb: 0.5 }}
+                >
+                    {diff.segmentIndex}: {diff.type === 'added' ? '+ ' : '- '}
+                    {diff.type === 'added' ? diff.newValue : diff.oldValue}
+                </Typography>
+            )
+        }
+
+        // For modified segments, create a unified inline diff view
+        const oldText = diff.oldValue?.split('"')[1] || ''
+        const newText = diff.newValue?.split('"')[1] || ''
+        const oldWords = oldText.split(' ')
+        const newWords = newText.split(' ')
+
+        // Extract timing info and format with 2 decimal places
+        const timingMatch = diff.newValue?.match(/\(([\d.]+) - ([\d.]+)\)/)
+        const timing = timingMatch ?
+            `(${parseFloat(timingMatch[1]).toFixed(2)} - ${parseFloat(timingMatch[2]).toFixed(2)})` :
+            ''
 
-    const renderDiff = (diff: DiffResult) => {
-        const getColor = () => {
-            switch (diff.type) {
-                case 'added': return 'success.main'
-                case 'removed': return 'error.main'
-                case 'modified': return 'warning.main'
-                default: return 'text.primary'
+        // Create unified diff of words
+        const unifiedDiff = []
+        let i = 0, j = 0
+
+        while (i < oldWords.length || j < newWords.length) {
+            if (i < oldWords.length && j < newWords.length && oldWords[i] === newWords[j]) {
+                // Unchanged word
+                unifiedDiff.push({ type: 'unchanged', text: oldWords[i] })
+                i++
+                j++
+            } else if (i < oldWords.length && (!newWords[j] || oldWords[i] !== newWords[j])) {
+                // Deleted word
+                unifiedDiff.push({ type: 'deleted', text: oldWords[i] })
+                i++
+            } else if (j < newWords.length) {
+                // Added word
+                unifiedDiff.push({ type: 'added', text: newWords[j] })
+                j++
             }
         }
 
-        const isExpanded = diff.segmentIndex !== undefined &&
-            expandedSegments.includes(diff.segmentIndex)
-
         return (
-            <Paper key={diff.path} sx={{ p: 2, mb: 1 }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                    <Box>
-                        <Typography color={getColor()} sx={{ fontWeight: 'bold' }}>
-                            {diff.type.toUpperCase()}: {diff.path}
-                        </Typography>
-                        {diff.oldValue && (
-                            <Typography color="error.main" sx={{ ml: 2 }}>
-                                - {diff.oldValue}
-                            </Typography>
-                        )}
-                        {diff.newValue && (
-                            <Typography color="success.main" sx={{ ml: 2 }}>
-                                + {diff.newValue}
-                            </Typography>
-                        )}
-                    </Box>
-                    {diff.wordChanges && (
-                        <IconButton
-                            onClick={() => handleToggleSegment(diff.segmentIndex!)}
+            <Box key={diff.path} sx={{ mb: 0.5, display: 'flex', alignItems: 'center' }}>
+                <Typography variant="body2" color="text.secondary" sx={{ mr: 1, minWidth: '30px' }}>
+                    {diff.segmentIndex}:
+                </Typography>
+                <Box sx={{ display: 'flex', flexWrap: 'wrap', flexGrow: 1, alignItems: 'center' }}>
+                    {unifiedDiff.map((word, idx) => (
+                        <Typography
+                            key={idx}
+                            component="span"
+                            color={
+                                word.type === 'unchanged' ? 'text.primary' :
+                                    word.type === 'deleted' ? 'error.main' : 'success.main'
+                            }
                             sx={{
-                                transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                                transition: 'transform 0.2s'
+                                textDecoration: word.type === 'deleted' ? 'line-through' : 'none',
+                                mr: 0.5
                             }}
                         >
-                            <ExpandMoreIcon />
-                        </IconButton>
-                    )}
+                            {word.text}
+                        </Typography>
+                    ))}
+                    <Typography variant="body2" color="text.secondary" sx={{ ml: 1 }}>
+                        {timing}
+                    </Typography>
                 </Box>
-
-                {diff.wordChanges && (
-                    <Collapse in={isExpanded}>
-                        <Box sx={{ mt: 2, ml: 4 }}>
-                            {diff.wordChanges.map((wordDiff, index) => (
-                                <Box key={index}>
-                                    <Typography color={getColor()} variant="body2">
-                                        {wordDiff.type.toUpperCase()}: {wordDiff.path}
-                                    </Typography>
-                                    {wordDiff.oldValue && (
-                                        <Typography color="error.main" variant="body2" sx={{ ml: 2 }}>
-                                            - {wordDiff.oldValue}
-                                        </Typography>
-                                    )}
-                                    {wordDiff.newValue && (
-                                        <Typography color="success.main" variant="body2" sx={{ ml: 2 }}>
-                                            + {wordDiff.newValue}
-                                        </Typography>
-                                    )}
-                                </Box>
-                            ))}
-                        </Box>
-                    </Collapse>
-                )}
-            </Paper>
+            </Box>
         )
     }
 
@@ -243,24 +270,41 @@ export default function ReviewChangesModal({
             fullWidth
         >
             <DialogTitle>Review Changes</DialogTitle>
-            <DialogContent dividers>
-                {differences.length === 0 ? (
-                    <Box>
-                        <Typography color="text.secondary" sx={{ mb: 2 }}>
-                            No changes detected. You can still submit to continue processing.
-                        </Typography>
-                        <Typography variant="body2" color="text.secondary">
-                            Total segments: {updatedData.corrected_segments.length}
-                        </Typography>
-                    </Box>
-                ) : (
-                    <Box>
-                        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-                            {differences.length} change{differences.length !== 1 ? 's' : ''} detected:
-                        </Typography>
-                        {differences.map(renderDiff)}
-                    </Box>
-                )}
+            <DialogContent
+                dividers
+                sx={{
+                    p: 0,  // Remove default padding
+                    '&:first-of-type': { pt: 0 }  // Remove default top padding
+                }}
+            >
+                <PreviewVideoSection
+                    apiClient={apiClient}
+                    isModalOpen={open}
+                    updatedData={updatedData}
+                    videoRef={videoRef}  // Pass the ref to PreviewVideoSection
+                />
+
+                <Box sx={{ p: 2, mt: 0 }}>
+                    {differences.length === 0 ? (
+                        <Box>
+                            <Typography color="text.secondary">
+                                No changes detected. You can still submit to continue processing.
+                            </Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                Total segments: {updatedData.corrected_segments.length}
+                            </Typography>
+                        </Box>
+                    ) : (
+                        <Box>
+                            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                                {differences.length} segment{differences.length !== 1 ? 's' : ''} modified:
+                            </Typography>
+                            <Paper sx={{ p: 2 }}>
+                                {differences.map(renderCompactDiff)}
+                            </Paper>
+                        </Box>
+                    )}
+                </Box>
             </DialogContent>
             <DialogActions>
                 <Button onClick={onClose}>Cancel</Button>

lyrics_transcriber/frontend/src/components/TimelineEditor.tsx

@@ -75,7 +75,6 @@ const TimelineWord = styled(Box)(({ theme }) => ({
 
 const ResizeHandle = styled(Box)(({ theme }) => ({
     position: 'absolute',
-    right: -4,
     top: 0,
     width: 8,
     height: '100%',
@@ -83,6 +82,12 @@ const ResizeHandle = styled(Box)(({ theme }) => ({
     '&:hover': {
         backgroundColor: theme.palette.primary.light,
     },
+    '&.left': {
+        left: -4,
+    },
+    '&.right': {
+        right: -4,
+    }
 }))
 
 // Add new styled component for the cursor
@@ -101,7 +106,7 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
     const containerRef = useRef<HTMLDivElement>(null)
     const [dragState, setDragState] = useState<{
         wordIndex: number
-        type: 'move' | 'resize'
+        type: 'move' | 'resize-left' | 'resize-right'
         initialX: number
         initialTime: number
         word: Word
@@ -116,40 +121,22 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
         isResize: boolean
     ): boolean => {
         if (isResize) {
-            // If this is the last word, allow it to extend beyond the timeline
             if (currentIndex === words.length - 1) return false;
 
             const nextWord = words[currentIndex + 1]
-            if (!nextWord) return false
-            const hasCollision = proposedEnd > nextWord.start_time
-            if (hasCollision) {
-                console.log('Resize collision detected:', {
-                    proposedEnd,
-                    nextWordStart: nextWord.start_time,
-                    word: words[currentIndex].text,
-                    nextWord: nextWord.text
-                })
-            }
-            return hasCollision
+            if (!nextWord || nextWord.start_time === null) return false
+            return proposedEnd > nextWord.start_time
         }
 
-        // For move operations, check all words
         return words.some((word, index) => {
             if (index === currentIndex) return false
-            const overlap = (
+            if (word.start_time === null || word.end_time === null) return false
+
+            return (
                 (proposedStart >= word.start_time && proposedStart <= word.end_time) ||
                 (proposedEnd >= word.start_time && proposedEnd <= word.end_time) ||
                 (proposedStart <= word.start_time && proposedEnd >= word.end_time)
             )
-            if (overlap) {
-                console.log('Move collision detected:', {
-                    movingWord: words[currentIndex].text,
-                    collidingWord: word.text,
-                    proposedTimes: { start: proposedStart, end: proposedEnd },
-                    collidingTimes: { start: word.start_time, end: word.end_time }
-                })
-            }
-            return overlap
         })
     }
 
@@ -188,27 +175,22 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
         return marks
     }
 
-    const handleMouseDown = (e: React.MouseEvent, wordIndex: number, type: 'move' | 'resize') => {
+    const handleMouseDown = (e: React.MouseEvent, wordIndex: number, type: 'move' | 'resize-left' | 'resize-right') => {
         const rect = containerRef.current?.getBoundingClientRect()
         if (!rect) return
 
+        const word = words[wordIndex]
+        if (word.start_time === null || word.end_time === null) return
+
         const initialX = e.clientX - rect.left
         const initialTime = ((initialX / rect.width) * (endTime - startTime))
 
-        console.log('Mouse down:', {
-            type,
-            wordIndex,
-            initialX,
-            initialTime,
-            word: words[wordIndex]
-        })
-
         setDragState({
             wordIndex,
             type,
             initialX,
             initialTime,
-            word: words[wordIndex]
+            word
         })
     }
 
@@ -219,67 +201,58 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
         const x = e.clientX - rect.left
         const width = rect.width
 
-        if (dragState.type === 'resize') {
-            const currentWord = words[dragState.wordIndex]
-            // Use the initial word duration for consistent scaling
+        const currentWord = words[dragState.wordIndex]
+        if (currentWord.start_time === null || currentWord.end_time === null ||
+            dragState.word.start_time === null || dragState.word.end_time === null) return
+
+        if (dragState.type === 'resize-right') {
             const initialWordDuration = dragState.word.end_time - dragState.word.start_time
             const initialWordWidth = (initialWordDuration / (endTime - startTime)) * width
-
-            // Calculate how much the mouse has moved as a percentage of the initial word width
             const pixelDelta = x - dragState.initialX
             const percentageMoved = pixelDelta / initialWordWidth
             const timeDelta = initialWordDuration * percentageMoved
 
-            console.log('Resize calculation:', {
-                initialWordWidth,
-                initialWordDuration,
-                pixelDelta,
-                percentageMoved,
-                timeDelta,
-                currentDuration: currentWord.end_time - currentWord.start_time
-            })
-
             const proposedEnd = Math.max(
                 currentWord.start_time + MIN_DURATION,
-                dragState.word.end_time + timeDelta  // Use initial end time as reference
+                dragState.word.end_time + timeDelta
             )
 
-            // Check for collisions
             if (checkCollision(currentWord.start_time, proposedEnd, dragState.wordIndex, true)) return
 
-            // If we get here, the resize is valid
             onWordUpdate(dragState.wordIndex, {
                 start_time: currentWord.start_time,
                 end_time: proposedEnd
             })
+        } else if (dragState.type === 'resize-left') {
+            const initialWordDuration = dragState.word.end_time - dragState.word.start_time
+            const initialWordWidth = (initialWordDuration / (endTime - startTime)) * width
+            const pixelDelta = x - dragState.initialX
+            const percentageMoved = pixelDelta / initialWordWidth
+            const timeDelta = initialWordDuration * percentageMoved
+
+            const proposedStart = Math.min(
+                currentWord.end_time - MIN_DURATION,
+                dragState.word.start_time + timeDelta
+            )
+
+            if (checkCollision(proposedStart, currentWord.end_time, dragState.wordIndex, true)) return
+
+            onWordUpdate(dragState.wordIndex, {
+                start_time: proposedStart,
+                end_time: currentWord.end_time
+            })
         } else if (dragState.type === 'move') {
-            // Use timeline scale for consistent movement
             const pixelsPerSecond = width / (endTime - startTime)
             const pixelDelta = x - dragState.initialX
             const timeDelta = pixelDelta / pixelsPerSecond
 
-            const currentWord = words[dragState.wordIndex]
             const wordDuration = currentWord.end_time - currentWord.start_time
-
-            console.log('Move calculation:', {
-                timelineWidth: width,
-                timelineDuration: endTime - startTime,
-                pixelsPerSecond,
-                pixelDelta,
-                timeDelta,
-                currentDuration: wordDuration
-            })
-
             const proposedStart = dragState.word.start_time + timeDelta
             const proposedEnd = proposedStart + wordDuration
 
-            // Ensure we stay within timeline bounds
             if (proposedStart < startTime || proposedEnd > endTime) return
-
-            // Check for collisions
             if (checkCollision(proposedStart, proposedEnd, dragState.wordIndex, false)) return
 
-            // If we get here, the move is valid
             onWordUpdate(dragState.wordIndex, {
                 start_time: proposedStart,
                 end_time: proposedEnd
@@ -292,7 +265,7 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
     }
 
     const isWordHighlighted = (word: Word): boolean => {
-        if (!currentTime || !word.start_time || !word.end_time) return false
+        if (!currentTime || word.start_time === null || word.end_time === null) return false
         return currentTime >= word.start_time && currentTime <= word.end_time
     }
 
@@ -332,12 +305,13 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
             />
 
             {words.map((word, index) => {
+                // Skip words with null timestamps
+                if (word.start_time === null || word.end_time === null) return null;
+
                 const leftPosition = timeToPosition(word.start_time)
                 const rightPosition = timeToPosition(word.end_time)
                 const width = rightPosition - leftPosition
-
-                // Add visual padding only to right side (2% of total width)
-                const visualPadding = 2 // percentage points
+                const visualPadding = 2
                 const adjustedWidth = Math.max(0, width - visualPadding)
 
                 return (
@@ -345,21 +319,28 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
                         key={index}
                         className={isWordHighlighted(word) ? 'highlighted' : ''}
                         sx={{
-                            left: `${leftPosition}%`,  // No adjustment to left position
+                            left: `${leftPosition}%`,
                             width: `${adjustedWidth}%`,
-                            // Ensure the last word doesn't overflow
                             maxWidth: `calc(${100 - leftPosition}% - 2px)`,
                         }}
                         onMouseDown={(e) => {
-                            e.stopPropagation();  // Prevent the parent's mousedown from firing
-                            handleMouseDown(e, index, 'move');
+                            e.stopPropagation()
+                            handleMouseDown(e, index, 'move')
                         }}
                     >
+                        <ResizeHandle
+                            className="left"
+                            onMouseDown={(e) => {
+                                e.stopPropagation()
+                                handleMouseDown(e, index, 'resize-left')
+                            }}
+                        />
                         {word.text}
                         <ResizeHandle
+                            className="right"
                             onMouseDown={(e) => {
-                                e.stopPropagation();  // Prevent the parent's mousedown from firing
-                                handleMouseDown(e, index, 'resize');
+                                e.stopPropagation()
+                                handleMouseDown(e, index, 'resize-right')
                             }}
                         />
                     </TimelineWord>