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

lyrics_transcriber/frontend/src/components/ReferenceView.tsx

@@ -1,268 +0,0 @@
-import { useMemo } from 'react'
-import { Paper, Typography, Box, IconButton } from '@mui/material'
-import { ReferenceViewProps } from './shared/types'
-import { calculateReferenceLinePositions } from './shared/utils/referenceLineCalculator'
-import { SourceSelector } from './shared/components/SourceSelector'
-import { HighlightedText } from './shared/components/HighlightedText'
-import { TranscriptionWordPosition } from './shared/types'
-import { getWordsFromIds } from './shared/utils/wordUtils'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy'
-import { styled } from '@mui/material/styles'
-
-const SegmentControls = styled(Box)({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '2px',
-    paddingTop: '1px',
-    paddingRight: '4px'
-})
-
-const TextContainer = styled(Box)({
-    flex: 1,
-    minWidth: 0,
-})
-
-export default function ReferenceView({
-    referenceSources,
-    anchors,
-    onElementClick,
-    onWordClick,
-    flashingType,
-    corrected_segments,
-    currentSource,
-    onSourceChange,
-    highlightInfo,
-    mode,
-    gaps,
-    corrections,
-    onAddLyrics
-}: ReferenceViewProps) {
-    // Get available sources from referenceSources object
-    const availableSources = useMemo(() =>
-        Object.keys(referenceSources),
-        [referenceSources]
-    )
-
-    // Ensure we always have a valid currentSource
-    const effectiveCurrentSource = useMemo(() =>
-        currentSource || (availableSources.length > 0 ? availableSources[0] : ''),
-        [currentSource, availableSources]
-    )
-
-    // Create word positions for the reference view
-    const referenceWordPositions = useMemo(() => {
-        const positions: TranscriptionWordPosition[] = [];
-        const allPositions = new Map<number, TranscriptionWordPosition[]>();
-
-        // Map anchor words
-        anchors?.forEach(anchor => {
-            const position = anchor.reference_positions[effectiveCurrentSource];
-            if (position === undefined) return;
-
-            if (!allPositions.has(position)) {
-                allPositions.set(position, []);
-            }
-
-            const referenceWords = getWordsFromIds(
-                referenceSources[effectiveCurrentSource].segments,
-                anchor.reference_word_ids[effectiveCurrentSource] || []
-            );
-
-            referenceWords.forEach(word => {
-                const wordPosition: TranscriptionWordPosition = {
-                    word: {
-                        id: word.id,
-                        text: word.text,
-                        start_time: word.start_time ?? undefined,
-                        end_time: word.end_time ?? undefined
-                    },
-                    type: 'anchor',
-                    sequence: anchor,
-                    isInRange: true
-                };
-                allPositions.get(position)!.push(wordPosition);
-            });
-        });
-
-        // Map gap words
-        gaps?.forEach(gap => {
-            const precedingAnchor = gap.preceding_anchor_id ?
-                anchors?.find(a => a.id === gap.preceding_anchor_id) :
-                undefined;
-            const followingAnchor = gap.following_anchor_id ?
-                anchors?.find(a => a.id === gap.following_anchor_id) :
-                undefined;
-
-            const position = precedingAnchor?.reference_positions[effectiveCurrentSource] ??
-                followingAnchor?.reference_positions[effectiveCurrentSource];
-
-            if (position === undefined) return;
-
-            const gapPosition = precedingAnchor ? position + 1 : position - 1;
-
-            if (!allPositions.has(gapPosition)) {
-                allPositions.set(gapPosition, []);
-            }
-
-            const referenceWords = getWordsFromIds(
-                referenceSources[effectiveCurrentSource].segments,
-                gap.reference_word_ids[effectiveCurrentSource] || []
-            );
-
-            referenceWords.forEach(word => {
-                // Find if this word has a correction
-                const isWordCorrected = corrections?.some(correction =>
-                    correction.reference_positions?.[effectiveCurrentSource]?.toString() === word.id &&
-                    gap.transcribed_word_ids.includes(correction.word_id)
-                );
-
-                const wordPosition: TranscriptionWordPosition = {
-                    word: {
-                        id: word.id,
-                        text: word.text,
-                        start_time: word.start_time ?? undefined,
-                        end_time: word.end_time ?? undefined
-                    },
-                    type: 'gap',
-                    sequence: gap,
-                    isInRange: true,
-                    isCorrected: isWordCorrected
-                };
-                allPositions.get(gapPosition)!.push(wordPosition);
-            });
-        });
-
-        // Sort by position and flatten
-        Array.from(allPositions.entries())
-            .sort(([a], [b]) => a - b)
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            .forEach(([_, words]) => {
-                positions.push(...words);
-            });
-
-        return positions;
-    }, [anchors, gaps, effectiveCurrentSource, referenceSources, corrections]);
-
-    const { linePositions } = useMemo(() =>
-        calculateReferenceLinePositions(
-            corrected_segments,
-            anchors,
-            effectiveCurrentSource
-        ),
-        [corrected_segments, anchors, effectiveCurrentSource]
-    )
-
-    // Create a mapping of reference words to their corrections
-    const referenceCorrections = useMemo(() => {
-        const correctionMap = new Map<string, string>();
-
-        corrections?.forEach(correction => {
-            const referencePosition = correction.reference_positions?.[effectiveCurrentSource];
-            if (referencePosition !== undefined) {
-                correctionMap.set(referencePosition.toString(), correction.corrected_word);
-            }
-        });
-
-        return correctionMap;
-    }, [corrections, effectiveCurrentSource]);
-
-    // Get the segments for the current source
-    const currentSourceSegments = referenceSources[effectiveCurrentSource]?.segments || [];
-
-    // Helper function to copy text to clipboard
-    const copyToClipboard = (text: string) => {
-        navigator.clipboard.writeText(text);
-    };
-
-    // Helper function to copy all reference text from current source
-    const copyAllReferenceText = () => {
-        const allText = currentSourceSegments
-            .map(segment => segment.words.map(w => w.text).join(' '))
-            .join('\n');
-        copyToClipboard(allText);
-    };
-
-    return (
-        <Paper sx={{ p: 0.8, position: 'relative' }}>
-            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Typography variant="h6" sx={{ fontSize: '0.9rem', mb: 0 }}>
-                        Reference Lyrics
-                    </Typography>
-                    <IconButton
-                        size="small"
-                        onClick={copyAllReferenceText}
-                        sx={{ 
-                            padding: '2px',
-                            height: '20px',
-                            width: '20px',
-                            minHeight: '20px',
-                            minWidth: '20px'
-                        }}
-                        title="Copy all reference lyrics"
-                    >
-                        <ContentCopyIcon sx={{ fontSize: '1rem' }} />
-                    </IconButton>
-                </Box>
-                <SourceSelector
-                    availableSources={availableSources}
-                    currentSource={effectiveCurrentSource}
-                    onSourceChange={onSourceChange}
-                    onAddLyrics={onAddLyrics}
-                />
-            </Box>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.2 }}>
-                {currentSourceSegments.map((segment, index) => (
-                    <Box 
-                        key={index} 
-                        sx={{ 
-                            display: 'flex', 
-                            alignItems: 'flex-start', 
-                            width: '100%', 
-                            mb: 0,
-                            '&:hover': {
-                                backgroundColor: (theme) => theme.palette.action.hover
-                            }
-                        }}
-                    >
-                        <SegmentControls>
-                            <IconButton
-                                size="small"
-                                onClick={() => copyToClipboard(segment.words.map(w => w.text).join(' '))}
-                                sx={{ 
-                                    padding: '1px',
-                                    height: '18px',
-                                    width: '18px',
-                                    minHeight: '18px',
-                                    minWidth: '18px'
-                                }}
-                            >
-                                <ContentCopyIcon sx={{ fontSize: '0.9rem' }} />
-                            </IconButton>
-                        </SegmentControls>
-                        <TextContainer>
-                            <HighlightedText
-                                wordPositions={referenceWordPositions.filter(wp => 
-                                    segment.words.some(w => w.id === wp.word.id)
-                                )}
-                                segments={[segment]}
-                                anchors={anchors}
-                                onElementClick={onElementClick}
-                                onWordClick={onWordClick}
-                                flashingType={flashingType}
-                                highlightInfo={highlightInfo}
-                                mode={mode}
-                                isReference={true}
-                                currentSource={effectiveCurrentSource}
-                                linePositions={linePositions}
-                                referenceCorrections={referenceCorrections}
-                                gaps={gaps}
-                                preserveSegments={true}
-                            />
-                        </TextContainer>
-                    </Box>
-                ))}
-            </Box>
-        </Paper>
-    )
-} 

lyrics_transcriber/frontend/src/components/ReplaceAllLyricsModal.tsx

@@ -1,336 +0,0 @@
-import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    IconButton,
-    Box,
-    Button,
-    Typography,
-    TextField
-} from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
-import ContentPasteIcon from '@mui/icons-material/ContentPaste'
-import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'
-import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import { LyricsSegment, Word } from '../types'
-import { useState, useEffect, useCallback, useMemo } from 'react'
-import { nanoid } from 'nanoid'
-import ModeSelectionModal from './ModeSelectionModal'
-import LyricsSynchronizer from './LyricsSynchronizer'
-
-// Augment window type for audio functions
-declare global {
-    interface Window {
-        getAudioDuration?: () => number;
-        toggleAudioPlayback?: () => void;
-        isAudioPlaying?: boolean;
-    }
-}
-
-type ModalMode = 'selection' | 'replace' | 'resync'
-
-interface ReplaceAllLyricsModalProps {
-    open: boolean
-    onClose: () => void
-    onSave: (newSegments: LyricsSegment[]) => void
-    onPlaySegment?: (startTime: number) => void
-    currentTime?: number
-    setModalSpacebarHandler: (handler: (() => (e: KeyboardEvent) => void) | undefined) => void
-    existingSegments?: LyricsSegment[]  // Current segments for re-sync mode
-}
-
-export default function ReplaceAllLyricsModal({
-    open,
-    onClose,
-    onSave,
-    onPlaySegment,
-    currentTime = 0,
-    setModalSpacebarHandler,
-    existingSegments = []
-}: ReplaceAllLyricsModalProps) {
-    const [mode, setMode] = useState<ModalMode>('selection')
-    const [inputText, setInputText] = useState('')
-    const [newSegments, setNewSegments] = useState<LyricsSegment[]>([])
-
-    // Reset state when modal opens
-    useEffect(() => {
-        if (open) {
-            setMode('selection')
-            setInputText('')
-            setNewSegments([])
-        }
-    }, [open])
-
-    // Parse the input text to get line and word counts
-    const parseInfo = useMemo(() => {
-        if (!inputText.trim()) return { lines: 0, words: 0 }
-        
-        const lines = inputText.trim().split('\n').filter(line => line.trim().length > 0)
-        const totalWords = lines.reduce((count, line) => {
-            return count + line.trim().split(/\s+/).length
-        }, 0)
-        
-        return { lines: lines.length, words: totalWords }
-    }, [inputText])
-
-    // Process the input text into segments and words
-    const processLyrics = useCallback(() => {
-        if (!inputText.trim()) return
-
-        const lines = inputText.trim().split('\n').filter(line => line.trim().length > 0)
-        const segments: LyricsSegment[] = []
-
-        lines.forEach((line) => {
-            const words = line.trim().split(/\s+/).filter(word => word.length > 0)
-            const segmentWords: Word[] = words.map((wordText) => ({
-                id: nanoid(),
-                text: wordText,
-                start_time: null,
-                end_time: null,
-                confidence: 1.0,
-                created_during_correction: true
-            }))
-
-            segments.push({
-                id: nanoid(),
-                text: line.trim(),
-                words: segmentWords,
-                start_time: null,
-                end_time: null
-            })
-        })
-
-        setNewSegments(segments)
-        setMode('resync')  // Go to synchronizer with the new segments
-    }, [inputText])
-
-    // Handle paste from clipboard
-    const handlePasteFromClipboard = useCallback(async () => {
-        try {
-            const text = await navigator.clipboard.readText()
-            setInputText(text)
-        } catch (error) {
-            console.error('Failed to read from clipboard:', error)
-            alert('Failed to read from clipboard. Please paste manually.')
-        }
-    }, [])
-
-    // Handle modal close
-    const handleClose = useCallback(() => {
-        setMode('selection')
-        setInputText('')
-        setNewSegments([])
-        onClose()
-    }, [onClose])
-
-    // Handle save from synchronizer
-    const handleSave = useCallback((segments: LyricsSegment[]) => {
-        onSave(segments)
-        handleClose()
-    }, [onSave, handleClose])
-
-    // Handle mode selection
-    const handleSelectReplace = useCallback(() => {
-        setMode('replace')
-    }, [])
-
-    const handleSelectResync = useCallback(() => {
-        setMode('resync')
-    }, [])
-
-    // Handle back to selection
-    const handleBackToSelection = useCallback(() => {
-        setMode('selection')
-        setInputText('')
-        setNewSegments([])
-    }, [])
-
-    // Determine which segments to use for synchronizer
-    const segmentsForSync = mode === 'resync' && newSegments.length > 0 
-        ? newSegments 
-        : existingSegments
-
-    // Check if we have existing lyrics
-    const hasExistingLyrics = existingSegments.length > 0 && 
-        existingSegments.some(s => s.words.length > 0)
-
-    return (
-        <>
-            {/* Mode Selection Modal */}
-            <ModeSelectionModal
-                open={open && mode === 'selection'}
-                onClose={handleClose}
-                onSelectReplace={handleSelectReplace}
-                onSelectResync={handleSelectResync}
-                hasExistingLyrics={hasExistingLyrics}
-            />
-
-            {/* Replace All Lyrics Modal (Paste Phase) */}
-            <Dialog
-                open={open && mode === 'replace'}
-                onClose={handleClose}
-                maxWidth="md"
-                fullWidth
-                PaperProps={{
-                    sx: {
-                        height: '80vh',
-                        maxHeight: '80vh'
-                    }
-                }}
-            >
-                <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <IconButton onClick={handleBackToSelection} size="small">
-                        <ArrowBackIcon />
-                    </IconButton>
-                    <Box sx={{ flex: 1 }}>
-                        Replace All Lyrics
-                    </Box>
-                    <IconButton onClick={handleClose} sx={{ ml: 'auto' }}>
-                        <CloseIcon />
-                    </IconButton>
-                </DialogTitle>
-
-                <DialogContent
-                    dividers
-                    sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        flexGrow: 1,
-                        overflow: 'hidden'
-                    }}
-                >
-                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, height: '100%' }}>
-                        <Typography variant="h6" gutterBottom>
-                            Paste your new lyrics below:
-                        </Typography>
-                        
-                        <Typography variant="body2" color="text.secondary" gutterBottom>
-                            Each line will become a separate segment. Words will be separated by spaces.
-                        </Typography>
-
-                        <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
-                            <Button
-                                variant="outlined"
-                                onClick={handlePasteFromClipboard}
-                                startIcon={<ContentPasteIcon />}
-                                size="small"
-                            >
-                                Paste from Clipboard
-                            </Button>
-                            <Typography variant="body2" sx={{ 
-                                alignSelf: 'center', 
-                                color: 'text.secondary',
-                                fontWeight: 'medium'
-                            }}>
-                                {parseInfo.lines} lines, {parseInfo.words} words
-                            </Typography>
-                        </Box>
-
-                        <TextField
-                            multiline
-                            rows={15}
-                            value={inputText}
-                            onChange={(e) => setInputText(e.target.value)}
-                            placeholder="Paste your lyrics here...&#10;Each line will become a segment&#10;Words will be separated by spaces"
-                            sx={{ 
-                                flexGrow: 1,
-                                '& .MuiInputBase-root': {
-                                    height: '100%',
-                                    alignItems: 'flex-start'
-                                }
-                            }}
-                        />
-                    </Box>
-                </DialogContent>
-
-                <DialogActions>
-                    <Button onClick={handleClose} color="inherit">
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="contained"
-                        onClick={processLyrics}
-                        disabled={!inputText.trim()}
-                        startIcon={<AutoFixHighIcon />}
-                    >
-                        Continue to Sync
-                    </Button>
-                </DialogActions>
-            </Dialog>
-
-            {/* Synchronizer Modal */}
-            <Dialog
-                open={open && mode === 'resync'}
-                onClose={handleClose}
-                maxWidth={false}
-                fullWidth
-                PaperProps={{
-                    sx: {
-                        height: '90vh',
-                        margin: '5vh 2vw',
-                        maxWidth: 'calc(100vw - 4vw)',
-                        width: 'calc(100vw - 4vw)'
-                    }
-                }}
-            >
-                <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <IconButton onClick={handleBackToSelection} size="small">
-                        <ArrowBackIcon />
-                    </IconButton>
-                    <Box sx={{ flex: 1 }}>
-                        {newSegments.length > 0 ? 'Sync New Lyrics' : 'Re-sync Existing Lyrics'}
-                    </Box>
-                    <IconButton onClick={handleClose} sx={{ ml: 'auto' }}>
-                        <CloseIcon />
-                    </IconButton>
-                </DialogTitle>
-
-                <DialogContent
-                    dividers
-                    sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        flexGrow: 1,
-                        overflow: 'hidden',
-                        p: 2
-                    }}
-                >
-                    {segmentsForSync.length > 0 ? (
-                        <LyricsSynchronizer
-                            segments={segmentsForSync}
-                            currentTime={currentTime}
-                            onPlaySegment={onPlaySegment}
-                            onSave={handleSave}
-                            onCancel={handleClose}
-                            setModalSpacebarHandler={setModalSpacebarHandler}
-                        />
-                    ) : (
-                        <Box sx={{ 
-                            display: 'flex', 
-                            flexDirection: 'column', 
-                            alignItems: 'center', 
-                            justifyContent: 'center',
-                            height: '100%',
-                            gap: 2
-                        }}>
-                            <Typography variant="h6" color="text.secondary">
-                                No lyrics to sync
-                            </Typography>
-                            <Typography variant="body2" color="text.secondary">
-                                Go back and paste new lyrics, or close this modal.
-                            </Typography>
-                            <Button 
-                                variant="outlined" 
-                                onClick={handleBackToSelection}
-                                startIcon={<ArrowBackIcon />}
-                            >
-                                Back to Selection
-                            </Button>
-                        </Box>
-                    )}
-                </DialogContent>
-            </Dialog>
-        </>
-    )
-}