lyrics-transcriber 0.43.1__py3-none-any.whl → 0.45.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/EditModal.tsx

@@ -5,27 +5,148 @@ import {
     DialogActions,
     IconButton,
     Box,
-    TextField,
-    Button,
-    Typography,
-    Menu,
-    MenuItem,
+    CircularProgress,
+    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 { 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 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
@@ -39,7 +160,11 @@ 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
+    isGlobal?: boolean
+    isLoading?: boolean
 }
 
 export default function EditModal({
@@ -54,18 +179,26 @@ export default function EditModal({
     onDelete,
     onAddSegment,
     onSplitSegment,
+    onMergeSegment,
     setModalSpacebarHandler,
+    originalTranscribedSegment,
+    isGlobal = false,
+    isLoading = false
 }: EditModalProps) {
-    // All useState hooks
+    console.log('EditModal - Render', { 
+        open, 
+        isGlobal, 
+        isLoading, 
+        hasSegment: !!segment, 
+        segmentIndex,
+        hasOriginalSegment: !!originalSegment,
+        hasOriginalTranscribedSegment: !!originalTranscribedSegment
+    });
+    
     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 +217,86 @@ export default function EditModal({
         })
     }, [editedSegment])
 
-    // Other useCallback hooks
-    const cleanupManualSync = useCallback(() => {
-        setIsManualSyncing(false)
-        setSyncWordIndex(-1)
-    }, [])
+    // Use the manual sync hook
+    const {
+        isManualSyncing,
+        syncWordIndex,
+        startManualSync,
+        cleanupManualSync,
+        handleSpacebar,
+        isSpacebarPressed
+    } = useManualSync({
+        editedSegment,
+        currentTime,
+        onPlaySegment,
+        updateSegment
+    })
 
     const handleClose = useCallback(() => {
+        console.log('EditModal - handleClose called');
         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),
+                isLoading
             })
-        } 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,
+        handleSpacebar,
+        setModalSpacebarHandler,
+        editedSegment?.id,
         onPlaySegment,
-        updateSegment,
-        setModalSpacebarHandler
+        isLoading
     ])
 
+    // 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(() => {
+        console.log('EditModal - segment changed', { 
+            hasSegment: !!segment, 
+            segmentId: segment?.id,
+            wordCount: segment?.words.length
+        });
+        setEditedSegment(segment)
+    }, [segment])
+
     // Auto-stop sync if we go past the end time
     useEffect(() => {
         if (!editedSegment) return
@@ -171,48 +306,32 @@ 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) => {
+    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
 
@@ -250,45 +369,47 @@ 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
-        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)
 
-    const handleMergeWords = (index: number) => {
+        updateSegment(allWords)
+    }, [editedSegment, updateSegment])
+
+    const handleMergeWords = useCallback((index: number) => {
+        if (!editedSegment) return;
         if (index >= editedSegment.words.length - 1) return
 
         const word1 = editedSegment.words[index]
@@ -304,116 +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)))
-    }
-
-    const handleWordMenu = (event: React.MouseEvent<HTMLElement>, index: number) => {
-        setMenuAnchorEl(event.currentTarget)
-        setSelectedWordIndex(index)
-    }
-
-    const handleMenuClose = () => {
-        setMenuAnchorEl(null)
-        setSelectedWordIndex(null)
-    }
-
-    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()
-        }
-    }
+    }, [editedSegment, updateSegment])
 
-    const handleReplaceAllWords = () => {
-        if (!editedSegment) return
+    const handleReset = useCallback(() => {
+        if (!originalSegment) return
 
-        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
+        console.log('EditModal - Resetting to original:', {
+            isGlobal,
+            originalSegmentId: originalSegment.id,
+            originalWordCount: originalSegment.words.length
+        })
 
-        let updatedWords: Word[]
+        setEditedSegment(JSON.parse(JSON.stringify(originalSegment)))
+    }, [originalSegment, isGlobal])
 
-        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
-            }))
-        }
+    const handleRevertToOriginal = useCallback(() => {
+        if (!originalTranscribedSegment) return
 
-        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])
 
-    // Add this new function to handle manual sync
-    const startManualSync = () => {
-        if (isManualSyncing) {
-            setIsManualSyncing(false)
-            setSyncWordIndex(-1)
-            return
+    const handleMergeSegment = useCallback((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)
-    }
+    }, [segmentIndex, editedSegment, handleSave, onMergeSegment, onClose])
 
     // Handle play/stop button click
-    const handlePlayButtonClick = () => {
+    const handlePlayButtonClick = useCallback(() => {
         if (!segment?.start_time || !onPlaySegment) return
 
         if (isPlaying) {
@@ -425,19 +509,37 @@ export default function EditModal({
             // Start playback
             onPlaySegment(segment.start_time)
         }
-    }
-
-    return (
-        <Dialog
-            open={open}
-            onClose={handleClose}
-            maxWidth="md"
-            fullWidth
-            onKeyDown={handleKeyDown}
-        >
+    }, [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"
@@ -456,179 +558,145 @@ export default function EditModal({
                     <CloseIcon />
                 </IconButton>
             </DialogTitle>
-            <DialogContent dividers>
-                <Box sx={{ mb: 2 }}>
-                    <TimelineEditor
-                        words={editedSegment.words}
-                        startTime={timeRange.start}
-                        endTime={timeRange.end}
-                        onWordUpdate={handleWordChange}
-                        currentTime={currentTime}
-                        onPlaySegment={onPlaySegment}
-                    />
-                </Box>
+        );
+    }, [isGlobal, segmentIndex, segment, onPlaySegment, handlePlayButtonClick, isPlaying, onClose, isLoading])
 
-                <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>
+    // 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;
+    }
 
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 3 }}>
-                    {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"
-                            />
-                            <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>
+    console.log('EditModal - Rendering dialog content', { 
+        isLoading, 
+        hasEditedSegment: !!editedSegment, 
+        hasOriginalSegment: !!originalSegment 
+    });
 
-                <Box sx={{ display: 'flex', gap: 2 }}>
-                    <TextField
-                        label="Replace all words"
-                        value={replacementText}
-                        onChange={(e) => setReplacementText(e.target.value)}
-                        fullWidth
-                        placeholder="Type or paste replacement words here"
-                        size="small"
-                    />
-                    <Button
-                        variant="contained"
-                        startIcon={<AutoFixHighIcon />}
-                        onClick={handleReplaceAllWords}
-                        disabled={!replacementText.trim()}
-                    >
-                        Replace All
-                    </Button>
-                </Box>
+    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,
+                    overflow: 'hidden',
+                    position: 'relative'
+                }}
+            >
+                {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>
+                )}
+
+                {!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}
+                        />
+                    </>
+                )}
+
+                {!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>
-                <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>
+                {!isLoading && editedSegment && (
+                    <MemoizedActionBar
+                        onReset={handleReset}
+                        onRevertToOriginal={handleRevertToOriginal}
+                        onDelete={handleDelete}
+                        onClose={handleClose}
+                        onSave={handleSave}
+                        editedSegment={editedSegment}
+                        originalTranscribedSegment={originalTranscribedSegment}
+                        isGlobal={isGlobal}
+                    />
+                )}
             </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>
     )
 }