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

lyrics_transcriber/frontend/src/components/EditModal.tsx

@@ -5,25 +5,148 @@ import {
     DialogActions,
     IconButton,
     Box,
-    TextField,
-    Button,
+    CircularProgress,
     Typography
 } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
-import DeleteIcon from '@mui/icons-material/Delete'
-import SplitIcon from '@mui/icons-material/CallSplit'
-import RestoreIcon from '@mui/icons-material/RestoreFromTrash'
-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 { useState, useEffect, useCallback, useMemo, memo } from 'react'
 import { nanoid } from 'nanoid'
-import WordDivider from './WordDivider'
 import useManualSync from '../hooks/useManualSync'
+import EditTimelineSection from './EditTimelineSection'
+import EditWordList from './EditWordList'
+import EditActionBar from './EditActionBar'
+
+// Extract TimelineSection into a separate memoized component
+interface TimelineSectionProps {
+    words: Word[]
+    timeRange: { start: number, end: number }
+    originalSegment: LyricsSegment
+    editedSegment: LyricsSegment
+    currentTime: number
+    isManualSyncing: boolean
+    syncWordIndex: number
+    isSpacebarPressed: boolean
+    onWordUpdate: (index: number, updates: Partial<Word>) => void
+    onPlaySegment?: (startTime: number) => void
+    startManualSync: () => void
+    isGlobal: boolean
+}
+
+const MemoizedTimelineSection = memo(function TimelineSection({
+    words,
+    timeRange,
+    originalSegment,
+    editedSegment,
+    currentTime,
+    isManualSyncing,
+    syncWordIndex,
+    isSpacebarPressed,
+    onWordUpdate,
+    onPlaySegment,
+    startManualSync,
+    isGlobal
+}: TimelineSectionProps) {
+    return (
+        <EditTimelineSection
+            words={words}
+            startTime={timeRange.start}
+            endTime={timeRange.end}
+            originalStartTime={originalSegment.start_time}
+            originalEndTime={originalSegment.end_time}
+            currentStartTime={editedSegment.start_time}
+            currentEndTime={editedSegment.end_time}
+            currentTime={currentTime}
+            isManualSyncing={isManualSyncing}
+            syncWordIndex={syncWordIndex}
+            isSpacebarPressed={isSpacebarPressed}
+            onWordUpdate={onWordUpdate}
+            onPlaySegment={onPlaySegment}
+            startManualSync={startManualSync}
+            isGlobal={isGlobal}
+        />
+    )
+})
+
+// Extract WordList into a separate memoized component
+interface WordListProps {
+    words: Word[]
+    onWordUpdate: (index: number, updates: Partial<Word>) => void
+    onSplitWord: (index: number) => void
+    onMergeWords: (index: number) => void
+    onAddWord: (index?: number) => void
+    onRemoveWord: (index: number) => void
+    onSplitSegment?: (wordIndex: number) => void
+    onAddSegment?: (beforeIndex: number) => void
+    onMergeSegment?: (mergeWithNext: boolean) => void
+    isGlobal: boolean
+}
+
+const MemoizedWordList = memo(function WordList({
+    words,
+    onWordUpdate,
+    onSplitWord,
+    onMergeWords,
+    onAddWord,
+    onRemoveWord,
+    onSplitSegment,
+    onAddSegment,
+    onMergeSegment,
+    isGlobal
+}: WordListProps) {
+    return (
+        <EditWordList
+            words={words}
+            onWordUpdate={onWordUpdate}
+            onSplitWord={onSplitWord}
+            onMergeWords={onMergeWords}
+            onAddWord={onAddWord}
+            onRemoveWord={onRemoveWord}
+            onSplitSegment={onSplitSegment}
+            onAddSegment={onAddSegment}
+            onMergeSegment={onMergeSegment}
+            isGlobal={isGlobal}
+        />
+    )
+})
+
+// Extract ActionBar into a separate memoized component
+interface ActionBarProps {
+    onReset: () => void
+    onRevertToOriginal?: () => void
+    onDelete?: () => void
+    onClose: () => void
+    onSave: () => void
+    editedSegment: LyricsSegment | null
+    originalTranscribedSegment?: LyricsSegment | null
+    isGlobal: boolean
+}
+
+const MemoizedActionBar = memo(function ActionBar({
+    onReset,
+    onRevertToOriginal,
+    onDelete,
+    onClose,
+    onSave,
+    editedSegment,
+    originalTranscribedSegment,
+    isGlobal
+}: ActionBarProps) {
+    return (
+        <EditActionBar
+            onReset={onReset}
+            onRevertToOriginal={onRevertToOriginal}
+            onDelete={onDelete}
+            onClose={onClose}
+            onSave={onSave}
+            editedSegment={editedSegment}
+            originalTranscribedSegment={originalTranscribedSegment}
+            isGlobal={isGlobal}
+        />
+    )
+})
 
 interface EditModalProps {
     open: boolean
@@ -40,6 +163,8 @@ interface EditModalProps {
     onMergeSegment?: (segmentIndex: number, mergeWithNext: boolean) => void
     setModalSpacebarHandler: (handler: (() => (e: KeyboardEvent) => void) | undefined) => void
     originalTranscribedSegment?: LyricsSegment | null
+    isGlobal?: boolean
+    isLoading?: boolean
 }
 
 export default function EditModal({
@@ -56,10 +181,21 @@ export default function EditModal({
     onSplitSegment,
     onMergeSegment,
     setModalSpacebarHandler,
-    originalTranscribedSegment
+    originalTranscribedSegment,
+    isGlobal = false,
+    isLoading = false
 }: EditModalProps) {
+    console.log('EditModal - Render', { 
+        open, 
+        isGlobal, 
+        isLoading, 
+        hasSegment: !!segment, 
+        segmentIndex,
+        hasOriginalSegment: !!originalSegment,
+        hasOriginalTranscribedSegment: !!originalTranscribedSegment
+    });
+    
     const [editedSegment, setEditedSegment] = useState<LyricsSegment | null>(segment)
-    const [replacementText, setReplacementText] = useState('')
     const [isPlaying, setIsPlaying] = useState(false)
 
     // Define updateSegment first since the hook depends on it
@@ -81,7 +217,7 @@ export default function EditModal({
         })
     }, [editedSegment])
 
-    // Use the new hook
+    // Use the manual sync hook
     const {
         isManualSyncing,
         syncWordIndex,
@@ -97,6 +233,7 @@ export default function EditModal({
     })
 
     const handleClose = useCallback(() => {
+        console.log('EditModal - handleClose called');
         cleanupManualSync()
         onClose()
     }, [onClose, cleanupManualSync])
@@ -109,16 +246,17 @@ export default function EditModal({
             console.log('EditModal - Setting up modal spacebar handler', {
                 hasPlaySegment: !!onPlaySegment,
                 editedSegmentId: editedSegment?.id,
-                handlerFunction: spacebarHandler.toString().slice(0, 100)
+                handlerFunction: spacebarHandler.toString().slice(0, 100),
+                isLoading
             })
-            
+
             // 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
@@ -134,7 +272,8 @@ export default function EditModal({
         handleSpacebar,
         setModalSpacebarHandler,
         editedSegment?.id,
-        onPlaySegment
+        onPlaySegment,
+        isLoading
     ])
 
     // Update isPlaying when currentTime changes
@@ -150,6 +289,11 @@ export default function EditModal({
 
     // All useEffect hooks
     useEffect(() => {
+        console.log('EditModal - segment changed', { 
+            hasSegment: !!segment, 
+            segmentId: segment?.id,
+            wordCount: segment?.words.length
+        });
         setEditedSegment(segment)
     }, [segment])
 
@@ -168,29 +312,26 @@ export default function EditModal({
     }, [isManualSyncing, editedSegment, currentTime, cleanupManualSync])
 
     // Add a function to get safe time values
-    const getSafeTimeRange = (segment: LyricsSegment | null) => {
+    const getSafeTimeRange = useCallback((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
-
-    // Get safe time values for TimelineEditor
-    const timeRange = getSafeTimeRange(editedSegment)
-
-    const handleWordChange = (index: number, updates: Partial<Word>) => {
+    // Define all handler functions with useCallback before the early return
+    const handleWordChange = useCallback((index: number, updates: Partial<Word>) => {
+        if (!editedSegment) return;
         const newWords = [...editedSegment.words]
         newWords[index] = {
             ...newWords[index],
             ...updates
         }
         updateSegment(newWords)
-    }
+    }, [editedSegment, updateSegment])
 
-    const handleAddWord = (index?: number) => {
+    const handleAddWord = useCallback((index?: number) => {
+        if (!editedSegment) return;
         const newWords = [...editedSegment.words]
         let newWord: Word
 
@@ -228,9 +369,10 @@ export default function EditModal({
         }
 
         updateSegment(newWords)
-    }
+    }, [editedSegment, updateSegment])
 
-    const handleSplitWord = (index: number) => {
+    const handleSplitWord = useCallback((index: number) => {
+        if (!editedSegment) return;
         const word = editedSegment.words[index]
         const startTime = word.start_time ?? 0
         const endTime = word.end_time ?? startTime + 0.5
@@ -264,9 +406,10 @@ export default function EditModal({
         allWords.splice(index, 1, ...newWords)
 
         updateSegment(allWords)
-    }
+    }, [editedSegment, updateSegment])
 
-    const handleMergeWords = (index: number) => {
+    const handleMergeWords = useCallback((index: number) => {
+        if (!editedSegment) return;
         if (index >= editedSegment.words.length - 1) return
 
         const word1 = editedSegment.words[index]
@@ -282,103 +425,79 @@ export default function EditModal({
         })
 
         updateSegment(newWords)
-    }
+    }, [editedSegment, updateSegment])
 
-    const handleRemoveWord = (index: number) => {
+    const handleRemoveWord = useCallback((index: number) => {
+        if (!editedSegment) return;
         const newWords = editedSegment.words.filter((_, i) => i !== index)
         updateSegment(newWords)
-    }
-
-    const handleReset = () => {
-        setEditedSegment(JSON.parse(JSON.stringify(originalSegment)))
-    }
+    }, [editedSegment, updateSegment])
 
-    const handleRevertToOriginal = () => {
-        if (originalTranscribedSegment) {
-            setEditedSegment(JSON.parse(JSON.stringify(originalTranscribedSegment)))
-        }
-    }
+    const handleReset = useCallback(() => {
+        if (!originalSegment) return
 
-    const handleSave = () => {
-        if (editedSegment) {
-            console.log('EditModal - Saving segment:', {
-                segmentIndex,
-                originalText: segment?.text,
-                editedText: editedSegment.text,
-                wordCount: editedSegment.words.length,
-                timeRange: `${editedSegment.start_time?.toFixed(4) ?? 'N/A'} - ${editedSegment.end_time?.toFixed(4) ?? 'N/A'}`
-            })
-            onSave(editedSegment)
-            onClose()
-        }
-    }
-
-    const handleReplaceAllWords = () => {
-        if (!editedSegment) return
+        console.log('EditModal - Resetting to original:', {
+            isGlobal,
+            originalSegmentId: originalSegment.id,
+            originalWordCount: originalSegment.words.length
+        })
 
-        const newWords = replacementText.trim().split(/\s+/)
-        const startTime = editedSegment.start_time ?? 0
-        const endTime = editedSegment.end_time ?? (startTime + newWords.length) // Default to 1 second per word
-        const segmentDuration = endTime - startTime
+        setEditedSegment(JSON.parse(JSON.stringify(originalSegment)))
+    }, [originalSegment, isGlobal])
 
-        let updatedWords: Word[]
+    const handleRevertToOriginal = useCallback(() => {
+        if (!originalTranscribedSegment) return
 
-        if (newWords.length === editedSegment.words.length) {
-            // If word count matches, keep original timestamps and IDs
-            updatedWords = editedSegment.words.map((word, index) => ({
-                id: word.id,  // Keep original ID
-                text: newWords[index],
-                start_time: word.start_time,
-                end_time: word.end_time,
-                confidence: 1.0
-            }))
-        } else {
-            // If word count differs, distribute time evenly and generate new IDs
-            const avgWordDuration = segmentDuration / newWords.length
-            updatedWords = newWords.map((text, index) => ({
-                id: nanoid(),  // Generate new ID
-                text,
-                start_time: startTime + (index * avgWordDuration),
-                end_time: startTime + ((index + 1) * avgWordDuration),
-                confidence: 1.0
-            }))
-        }
-
-        updateSegment(updatedWords)
-        setReplacementText('') // Clear the input after replacing
-    }
+        console.log('EditModal - Reverting to original transcribed:', {
+            isGlobal,
+            originalTranscribedSegmentId: originalTranscribedSegment.id,
+            originalTranscribedWordCount: originalTranscribedSegment.words.length
+        })
 
-    const handleKeyDown = (event: React.KeyboardEvent) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault()
-            handleSave()
-        }
-    }
+        setEditedSegment(JSON.parse(JSON.stringify(originalTranscribedSegment)))
+    }, [originalTranscribedSegment, isGlobal])
+
+    const handleSave = useCallback(() => {
+        if (!editedSegment || !segment) return;
+
+        console.log('EditModal - Saving segment:', {
+            isGlobal,
+            segmentIndex,
+            originalText: segment?.text,
+            editedText: editedSegment.text,
+            wordCount: editedSegment.words.length,
+            firstWord: editedSegment.words[0],
+            lastWord: editedSegment.words[editedSegment.words.length - 1],
+            timeRange: `${editedSegment.start_time?.toFixed(4) ?? 'N/A'} - ${editedSegment.end_time?.toFixed(4) ?? 'N/A'}`
+        })
+        onSave(editedSegment)
+        onClose()
+    }, [editedSegment, isGlobal, segmentIndex, segment, onSave, onClose])
 
-    const handleDelete = () => {
+    const handleDelete = useCallback(() => {
         if (segmentIndex !== null) {
             onDelete?.(segmentIndex)
             onClose()
         }
-    }
+    }, [segmentIndex, onDelete, onClose])
 
-    const handleSplitSegment = (wordIndex: number) => {
+    const handleSplitSegment = useCallback((wordIndex: number) => {
         if (segmentIndex !== null && editedSegment) {
             handleSave()  // Save current changes first
             onSplitSegment?.(segmentIndex, wordIndex)
         }
-    }
+    }, [segmentIndex, editedSegment, handleSave, onSplitSegment])
 
-    const handleMergeSegment = (mergeWithNext: boolean) => {
+    const handleMergeSegment = useCallback((mergeWithNext: boolean) => {
         if (segmentIndex !== null && editedSegment) {
             handleSave()  // Save current changes first
             onMergeSegment?.(segmentIndex, mergeWithNext)
             onClose()
         }
-    }
+    }, [segmentIndex, editedSegment, handleSave, onMergeSegment, onClose])
 
     // Handle play/stop button click
-    const handlePlayButtonClick = () => {
+    const handlePlayButtonClick = useCallback(() => {
         if (!segment?.start_time || !onPlaySegment) return
 
         if (isPlaying) {
@@ -390,25 +509,37 @@ export default function EditModal({
             // Start playback
             onPlaySegment(segment.start_time)
         }
-    }
-
-    return (
-        <Dialog
-            open={open}
-            onClose={handleClose}
-            maxWidth="md"
-            fullWidth
-            onKeyDown={handleKeyDown}
-            PaperProps={{
-                sx: {
-                    height: '90vh',  // Take up 90% of viewport height
-                    margin: '5vh 0'  // Add 5vh margin top and bottom
-                }
-            }}
-        >
+    }, [segment?.start_time, onPlaySegment, isPlaying])
+
+    // Calculate timeRange before the early return
+    const timeRange = useMemo(() => {
+        if (!editedSegment) return { start: 0, end: 1 };
+        return getSafeTimeRange(editedSegment);
+    }, [getSafeTimeRange, editedSegment]);
+
+    // Memoize the dialog title to prevent re-renders
+    const dialogTitle = useMemo(() => {
+        console.log('EditModal - Rendering dialog title', { isLoading, isGlobal });
+        
+        if (isLoading) {
+            return (
+                <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+                        Loading {isGlobal ? 'All Words' : `Segment ${segmentIndex}`}...
+                    </Box>
+                    <IconButton onClick={onClose} sx={{ ml: 'auto' }}>
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+            );
+        }
+        
+        if (!segment) return null;
+        
+        return (
             <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
-                    Edit Segment {segmentIndex}
+                    Edit {isGlobal ? 'All Words' : `Segment ${segmentIndex}`}
                     {segment?.start_time !== null && onPlaySegment && (
                         <IconButton
                             size="small"
@@ -427,202 +558,144 @@ export default function EditModal({
                     <CloseIcon />
                 </IconButton>
             </DialogTitle>
+        );
+    }, [isGlobal, segmentIndex, segment, onPlaySegment, handlePlayButtonClick, isPlaying, onClose, isLoading])
+
+    // Early return after all hooks and function definitions
+    if (!isLoading && (!segment || !editedSegment || !originalSegment)) {
+        console.log('EditModal - Early return: missing required data', {
+            hasSegment: !!segment,
+            hasEditedSegment: !!editedSegment,
+            hasOriginalSegment: !!originalSegment,
+            isLoading
+        });
+        return null;
+    }
+    if (!isLoading && !isGlobal && segmentIndex === null) {
+        console.log('EditModal - Early return: non-global mode with null segmentIndex');
+        return null;
+    }
+
+    console.log('EditModal - Rendering dialog content', { 
+        isLoading, 
+        hasEditedSegment: !!editedSegment, 
+        hasOriginalSegment: !!originalSegment 
+    });
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            maxWidth="md"
+            fullWidth
+            onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey && !isLoading) {
+                    e.preventDefault()
+                    handleSave()
+                }
+            }}
+            PaperProps={{
+                sx: {
+                    height: '90vh',
+                    margin: '5vh 0'
+                }
+            }}
+        >
+            {dialogTitle}
+
             <DialogContent
                 dividers
                 sx={{
                     display: 'flex',
                     flexDirection: 'column',
-                    flexGrow: 1,     // Allow content to fill available space
-                    overflow: 'hidden'  // Prevent double scrollbars
+                    flexGrow: 1,
+                    overflow: 'hidden',
+                    position: 'relative'
                 }}
             >
-                <Box sx={{ mb: 0 }}>
-                    <TimelineEditor
-                        words={editedSegment.words}
-                        startTime={timeRange.start}
-                        endTime={timeRange.end}
-                        onWordUpdate={handleWordChange}
-                        currentTime={currentTime}
-                        onPlaySegment={onPlaySegment}
-                    />
-                </Box>
-
-                <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'}
-                        <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 && (
-                            <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>
-                        )}
+                {isLoading && (
+                    <Box sx={{ 
+                        display: 'flex', 
+                        flexDirection: 'column',
+                        alignItems: 'center', 
+                        justifyContent: 'center', 
+                        height: '100%',
+                        width: '100%',
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                        zIndex: 10
+                    }}>
+                        <CircularProgress size={60} thickness={4} />
+                        <Typography variant="h6" sx={{ mt: 2, fontWeight: 'bold' }}>
+                            Loading {isGlobal ? 'all words' : 'segment'}...
+                        </Typography>
+                        <Typography variant="body2" sx={{ mt: 1, maxWidth: '80%', textAlign: 'center' }}>
+                            {isGlobal ? 'This may take a few seconds for songs with many words.' : 'Please wait...'}
+                        </Typography>
                     </Box>
-                </Box>
-
-                <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={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 }}
-                            />
-                        </Box>
-                    ))}
-                </Box>
+                {!isLoading && editedSegment && originalSegment && (
+                    <>
+                        <MemoizedTimelineSection
+                            words={editedSegment.words}
+                            timeRange={timeRange}
+                            originalSegment={originalSegment}
+                            editedSegment={editedSegment}
+                            currentTime={currentTime}
+                            isManualSyncing={isManualSyncing}
+                            syncWordIndex={syncWordIndex}
+                            isSpacebarPressed={isSpacebarPressed}
+                            onWordUpdate={handleWordChange}
+                            onPlaySegment={onPlaySegment}
+                            startManualSync={startManualSync}
+                            isGlobal={isGlobal}
+                        />
+
+                        <MemoizedWordList
+                            words={editedSegment.words}
+                            onWordUpdate={handleWordChange}
+                            onSplitWord={handleSplitWord}
+                            onMergeWords={handleMergeWords}
+                            onAddWord={handleAddWord}
+                            onRemoveWord={handleRemoveWord}
+                            onSplitSegment={handleSplitSegment}
+                            onAddSegment={onAddSegment}
+                            onMergeSegment={handleMergeSegment}
+                            isGlobal={isGlobal}
+                        />
+                    </>
+                )}
 
-                <Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
-                    <TextField
-                        value={replacementText}
-                        onChange={(e) => setReplacementText(e.target.value)}
-                        placeholder="Replace all words"
-                        size="small"
-                        sx={{ flexGrow: 1, maxWidth: 'calc(100% - 140px)' }}  // Reserve space for the button
-                    />
-                    <Button
-                        onClick={handleReplaceAllWords}
-                        startIcon={<AutoFixHighIcon />}
-                        size="small"
-                        sx={{ whiteSpace: 'nowrap' }}
-                    >
-                        Replace All
-                    </Button>
-                </Box>
+                {!isLoading && (!editedSegment || !originalSegment) && (
+                    <Box sx={{ 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        justifyContent: 'center', 
+                        height: '100%' 
+                    }}>
+                        <Typography variant="h6">
+                            No segment data available
+                        </Typography>
+                    </Box>
+                )}
             </DialogContent>
+
             <DialogActions>
-                <Button
-                    startIcon={<RestoreIcon />}
-                    onClick={handleReset}
-                    color="warning"
-                >
-                    Reset
-                </Button>
-                {originalTranscribedSegment && (
-                    <Button
-                        onClick={handleRevertToOriginal}
-                        startIcon={<HistoryIcon />}
-                    >
-                        Un-Correct
-                    </Button>
+                {!isLoading && editedSegment && (
+                    <MemoizedActionBar
+                        onReset={handleReset}
+                        onRevertToOriginal={handleRevertToOriginal}
+                        onDelete={handleDelete}
+                        onClose={handleClose}
+                        onSave={handleSave}
+                        editedSegment={editedSegment}
+                        originalTranscribedSegment={originalTranscribedSegment}
+                        isGlobal={isGlobal}
+                    />
                 )}
-                <Box sx={{ mr: 'auto' }}>
-                    <Button
-                        startIcon={<DeleteIcon />}
-                        onClick={handleDelete}
-                        color="error"
-                    >
-                        Delete Segment
-                    </Button>
-                </Box>
-                <Button onClick={handleClose}>Cancel</Button>
-                <Button
-                    onClick={handleSave}
-                    variant="contained"
-                    disabled={!editedSegment || editedSegment.words.length === 0}
-                >
-                    Save
-                </Button>
             </DialogActions>
         </Dialog>
     )