karaoke-gen 0.105.4__py3-none-any.whl → 0.107.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/EditWordList.tsx

@@ -1,431 +0,0 @@
-import {
-    Box,
-    TextField,
-    IconButton,
-    Button,
-    Pagination,
-    Typography,
-    useMediaQuery,
-    useTheme
-} from '@mui/material'
-import DeleteIcon from '@mui/icons-material/Delete'
-import SplitIcon from '@mui/icons-material/CallSplit'
-import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'
-import { Word } from '../types'
-import { useState, memo, useMemo } from 'react'
-import WordDivider from './WordDivider'
-
-interface EditWordListProps {
-    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
-}
-
-// Create a memoized word row component to prevent re-renders
-const WordRow = memo(function WordRow({
-    word,
-    index,
-    onWordUpdate,
-    onSplitWord,
-    onRemoveWord,
-    wordsLength,
-    onTabNavigation,
-    isMobile
-}: {
-    word: Word
-    index: number
-    onWordUpdate: (index: number, updates: Partial<Word>) => void
-    onSplitWord: (index: number) => void
-    onRemoveWord: (index: number) => void
-    wordsLength: number
-    onTabNavigation: (currentIndex: number) => void
-    isMobile: boolean
-}) {
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === 'Tab' && !e.shiftKey) {
-            e.preventDefault();
-            onTabNavigation(index);
-        }
-    };
-
-    return (
-        <Box sx={{
-            display: 'flex',
-            flexDirection: isMobile ? 'column' : 'row',
-            gap: isMobile ? 1 : 2,
-            alignItems: isMobile ? 'stretch' : 'center',
-            padding: '4px 0',
-        }}>
-            {/* Word text field - full width on mobile */}
-            <Box sx={{
-                display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                flex: isMobile ? 'none' : 1
-            }}>
-                <TextField
-                    label={`Word ${index}`}
-                    value={word.text}
-                    onChange={(e) => onWordUpdate(index, { text: e.target.value })}
-                    onKeyDown={handleKeyDown}
-                    fullWidth
-                    size="small"
-                    id={`word-text-${index}`}
-                />
-                {/* Action buttons inline with word on mobile */}
-                {isMobile && (
-                    <>
-                        <IconButton
-                            onClick={() => onSplitWord(index)}
-                            title="Split Word"
-                            sx={{ color: 'primary.main' }}
-                            size="small"
-                        >
-                            <SplitIcon fontSize="small" />
-                        </IconButton>
-                        <IconButton
-                            onClick={() => onRemoveWord(index)}
-                            disabled={wordsLength <= 1}
-                            title="Remove Word"
-                            sx={{ color: 'error.main' }}
-                            size="small"
-                        >
-                            <DeleteIcon fontSize="small" />
-                        </IconButton>
-                    </>
-                )}
-            </Box>
-
-            {/* Time fields - row on desktop, separate row on mobile */}
-            <Box sx={{
-                display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                justifyContent: isMobile ? 'flex-start' : 'flex-end'
-            }}>
-                <TextField
-                    label="Start"
-                    value={word.start_time?.toFixed(2) ?? ''}
-                    onChange={(e) => onWordUpdate(index, { start_time: parseFloat(e.target.value) })}
-                    type="number"
-                    inputProps={{ step: 0.01 }}
-                    sx={{ width: isMobile ? '80px' : '100px' }}
-                    size="small"
-                />
-                <TextField
-                    label="End"
-                    value={word.end_time?.toFixed(2) ?? ''}
-                    onChange={(e) => onWordUpdate(index, { end_time: parseFloat(e.target.value) })}
-                    type="number"
-                    inputProps={{ step: 0.01 }}
-                    sx={{ width: isMobile ? '80px' : '100px' }}
-                    size="small"
-                />
-                {/* Action buttons on desktop only */}
-                {!isMobile && (
-                    <>
-                        <IconButton
-                            onClick={() => onSplitWord(index)}
-                            title="Split Word"
-                            sx={{ color: 'primary.main' }}
-                            size="small"
-                        >
-                            <SplitIcon fontSize="small" />
-                        </IconButton>
-                        <IconButton
-                            onClick={() => onRemoveWord(index)}
-                            disabled={wordsLength <= 1}
-                            title="Remove Word"
-                            sx={{ color: 'error.main' }}
-                            size="small"
-                        >
-                            <DeleteIcon fontSize="small" />
-                        </IconButton>
-                    </>
-                )}
-            </Box>
-        </Box>
-    );
-});
-
-// Memoized word item component that includes the word row and divider
-const WordItem = memo(function WordItem({
-    word,
-    index,
-    onWordUpdate,
-    onSplitWord,
-    onRemoveWord,
-    onAddWord,
-    onMergeWords,
-    onSplitSegment,
-    onAddSegment,
-    onMergeSegment,
-    wordsLength,
-    isGlobal,
-    onTabNavigation,
-    isMobile
-}: {
-    word: Word
-    index: number
-    onWordUpdate: (index: number, updates: Partial<Word>) => void
-    onSplitWord: (index: number) => void
-    onRemoveWord: (index: number) => void
-    onAddWord: (index: number) => void
-    onMergeWords: (index: number) => void
-    onSplitSegment?: (index: number) => void
-    onAddSegment?: (index: number) => void
-    onMergeSegment?: (mergeWithNext: boolean) => void
-    wordsLength: number
-    isGlobal: boolean
-    onTabNavigation: (currentIndex: number) => void
-    isMobile: boolean
-}) {
-    return (
-        <Box key={word.id}>
-            <WordRow
-                word={word}
-                index={index}
-                onWordUpdate={onWordUpdate}
-                onSplitWord={onSplitWord}
-                onRemoveWord={onRemoveWord}
-                wordsLength={wordsLength}
-                onTabNavigation={onTabNavigation}
-                isMobile={isMobile}
-            />
-
-            {/* Word divider with merge/split functionality */}
-            {!isGlobal && (
-                <WordDivider
-                    onAddWord={() => onAddWord(index)}
-                    onMergeWords={() => onMergeWords(index)}
-                    onSplitSegment={() => onSplitSegment?.(index)}
-                    onAddSegmentAfter={
-                        index === wordsLength - 1
-                            ? () => onAddSegment?.(index + 1)
-                            : undefined
-                    }
-                    onMergeSegment={
-                        index === wordsLength - 1
-                            ? () => onMergeSegment?.(true)
-                            : undefined
-                    }
-                    canMerge={index < wordsLength - 1}
-                    isLast={index === wordsLength - 1}
-                                    />
-            )}
-            {isGlobal && (
-                <WordDivider
-                    onAddWord={() => onAddWord(index)}
-                    onMergeWords={index < wordsLength - 1 ? () => onMergeWords(index) : undefined}
-                    canMerge={index < wordsLength - 1}
-                                    />
-            )}
-        </Box>
-    );
-});
-
-export default function EditWordList({
-    words,
-    onWordUpdate,
-    onSplitWord,
-    onMergeWords,
-    onAddWord,
-    onRemoveWord,
-    onSplitSegment,
-    onAddSegment,
-    onMergeSegment,
-    isGlobal = false
-}: EditWordListProps) {
-    const theme = useTheme()
-    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-
-    const [replacementText, setReplacementText] = useState('')
-    const [page, setPage] = useState(1)
-    const pageSize = isGlobal ? 50 : words.length // Use pagination only in global mode
-    
-    const handleReplaceAllWords = () => {
-        const newWords = replacementText.trim().split(/\s+/)
-        newWords.forEach((text, index) => {
-            if (index < words.length) {
-                onWordUpdate(index, { text })
-            }
-        })
-        setReplacementText('')
-    }
-    
-    // Calculate pagination values
-    const pageCount = Math.ceil(words.length / pageSize)
-    const startIndex = (page - 1) * pageSize
-    const endIndex = Math.min(startIndex + pageSize, words.length)
-    
-    // Get the words for the current page
-    const visibleWords = useMemo(() => {
-        return isGlobal 
-            ? words.slice(startIndex, endIndex) 
-            : words;
-    }, [words, isGlobal, startIndex, endIndex]);
-    
-    // Handle page change
-    const handlePageChange = (_event: React.ChangeEvent<unknown>, value: number) => {
-        setPage(value);
-    };
-
-    // Handle tab navigation between word text fields
-    const handleTabNavigation = (currentIndex: number) => {
-        // console.log('handleTabNavigation called with index:', currentIndex);
-        const nextIndex = (currentIndex + 1) % words.length;
-        // console.log('Next index calculated:', nextIndex, 'Total words:', words.length);
-        
-        // If the next word is on a different page, change the page
-        if (isGlobal && (nextIndex < startIndex || nextIndex >= endIndex)) {
-            // console.log('Next word is on different page. Current page:', page, 'startIndex:', startIndex, 'endIndex:', endIndex);
-            const nextPage = Math.floor(nextIndex / pageSize) + 1;
-            // console.log('Changing to page:', nextPage);
-            setPage(nextPage);
-            
-            // Use setTimeout to allow the page change to render before focusing
-            setTimeout(() => {
-                // console.log('Timeout callback executing, trying to focus element with ID:', `word-text-${nextIndex}`);
-                focusWordTextField(nextIndex);
-            }, 50);
-        } else {
-            // console.log('Next word is on same page, trying to focus element with ID:', `word-text-${nextIndex}`);
-            focusWordTextField(nextIndex);
-        }
-    };
-
-    // Helper function to focus a word text field by index
-    const focusWordTextField = (index: number) => {
-        // Material-UI TextField uses a more complex structure
-        // The actual input is inside the TextField component
-        const element = document.getElementById(`word-text-${index}`);
-        // console.log('Element found:', !!element);
-        
-        if (element) {
-            // Try different selectors to find the input element
-            // First try the standard input selector
-            let input = element.querySelector('input');
-            
-            // If that doesn't work, try the MUI-specific selector
-            if (!input) {
-                input = element.querySelector('.MuiInputBase-input');
-            }
-            
-            // console.log('Input element found:', !!input);
-            if (input) {
-                input.focus();
-                input.select();
-                // console.log('Focus and select called on input');
-            } else {
-                // As a fallback, try to focus the TextField itself
-                // console.log('Trying to focus the TextField itself');
-                element.focus();
-            }
-        }
-    };
-
-    return (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, flexGrow: 1, minHeight: 0 }}>
-            {/* Initial divider with Add Segment Before button */}
-            {!isGlobal && (
-                <WordDivider
-                    onAddWord={() => onAddWord(-1)}
-                    onAddSegmentBefore={() => onAddSegment?.(0)}
-                    onMergeSegment={() => onMergeSegment?.(false)}
-                    isFirst={true}
-                                    />
-            )}
-            {isGlobal && (
-                <WordDivider
-                    onAddWord={() => onAddWord(-1)}
-                                    />
-            )}
-            
-            {/* Word list with scrolling */}
-            <Box sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 0.5,
-                flexGrow: 1,
-                overflowY: 'auto',
-                mb: 0,
-                pt: 1,
-                '&::-webkit-scrollbar': {
-                    width: '8px',
-                },
-                '&::-webkit-scrollbar-thumb': {
-                    backgroundColor: (theme) => theme.palette.mode === 'dark'
-                        ? 'rgba(248, 250, 252, 0.2)'  // light scrollbar for dark mode
-                        : 'rgba(30, 41, 59, 0.3)',    // dark scrollbar for light mode
-                    borderRadius: '4px',
-                },
-                scrollbarWidth: 'thin',
-                msOverflowStyle: 'autohiding-scrollbar',
-            }}>
-                {visibleWords.map((word, visibleIndex) => {
-                    const actualIndex = isGlobal ? startIndex + visibleIndex : visibleIndex;
-                    return (
-                        <WordItem
-                            key={word.id}
-                            word={word}
-                            index={actualIndex}
-                            onWordUpdate={onWordUpdate}
-                            onSplitWord={onSplitWord}
-                            onRemoveWord={onRemoveWord}
-                            onAddWord={onAddWord}
-                            onMergeWords={onMergeWords}
-                            onSplitSegment={onSplitSegment}
-                            onAddSegment={onAddSegment}
-                            onMergeSegment={onMergeSegment}
-                            wordsLength={words.length}
-                            isGlobal={isGlobal}
-                            onTabNavigation={handleTabNavigation}
-                            isMobile={isMobile}
-                        />
-                    );
-                })}
-            </Box>
-            
-            {/* Pagination controls (only in global mode) */}
-            {isGlobal && pageCount > 1 && (
-                <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', mb: 1 }}>
-                    <Pagination 
-                        count={pageCount} 
-                        page={page} 
-                        onChange={handlePageChange} 
-                        color="primary" 
-                        size="small"
-                    />
-                    <Typography variant="body2" sx={{ ml: 2 }}>
-                        Showing words {startIndex + 1}-{endIndex} of {words.length}
-                    </Typography>
-                </Box>
-            )}
-
-            <Box sx={{ display: 'flex', gap: 2, mb: 0.6 }}>
-                <TextField
-                    value={replacementText}
-                    onChange={(e) => setReplacementText(e.target.value)}
-                    placeholder="Replace all words"
-                    size="small"
-                    sx={{ flexGrow: 1, maxWidth: 'calc(100% - 140px)' }}
-                />
-                <Button
-                    onClick={handleReplaceAllWords}
-                    startIcon={<AutoFixHighIcon />}
-                    size="small"
-                    sx={{ whiteSpace: 'nowrap' }}
-                >
-                    Replace All
-                </Button>
-            </Box>
-        </Box>
-    )
-} 

lyrics_transcriber/frontend/src/components/FileUpload.tsx

@@ -1,77 +0,0 @@
-import { ChangeEvent, DragEvent, useState } from 'react'
-import { Paper, Typography } from '@mui/material'
-import CloudUploadIcon from '@mui/icons-material/CloudUpload'
-import { CorrectionData } from '../types'
-
-interface FileUploadProps {
-    onUpload: (data: CorrectionData) => void
-}
-
-export default function FileUpload({ onUpload }: FileUploadProps) {
-    const [isDragging, setIsDragging] = useState(false)
-
-    const handleDragOver = (e: DragEvent) => {
-        e.preventDefault()
-        setIsDragging(true)
-    }
-
-    const handleDragLeave = () => {
-        setIsDragging(false)
-    }
-
-    const handleDrop = async (e: DragEvent) => {
-        e.preventDefault()
-        setIsDragging(false)
-        const file = e.dataTransfer.files[0]
-        await processFile(file)
-    }
-
-    const handleFileInput = async (e: ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files?.length) {
-            await processFile(e.target.files[0])
-        }
-    }
-
-    const processFile = async (file: File) => {
-        try {
-            const text = await file.text()
-            const data = JSON.parse(text)
-            onUpload(data)
-        } catch (error) {
-            console.error('Error processing file:', error)
-            // TODO: Add error handling UI
-        }
-    }
-
-    return (
-        <Paper
-            sx={{
-                p: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                backgroundColor: isDragging ? 'action.hover' : 'background.paper',
-                cursor: 'pointer',
-            }}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            onClick={() => document.getElementById('file-input')?.click()}
-        >
-            <input
-                type="file"
-                id="file-input"
-                style={{ display: 'none' }}
-                accept="application/json"
-                onChange={handleFileInput}
-            />
-            <CloudUploadIcon sx={{ fontSize: 48, mb: 2 }} />
-            <Typography variant="h6" gutterBottom>
-                Upload Lyrics Correction Review JSON
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-                Drag and drop a file here, or click to select
-            </Typography>
-        </Paper>
-    )
-}