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

lyrics_transcriber/frontend/src/components/TimelineEditor.tsx

@@ -1,383 +0,0 @@
-import { Box, styled } from '@mui/material'
-import { Word } from '../types'
-import { useRef, useState } from 'react'
-
-interface TimelineEditorProps {
-    words: Word[]
-    startTime: number
-    endTime: number
-    onWordUpdate: (index: number, updates: Partial<Word>) => void
-    onUnsyncWord?: (index: number) => void
-    currentTime?: number
-    onPlaySegment?: (time: number) => void
-    showPlaybackIndicator?: boolean
-}
-
-const TimelineContainer = styled(Box)(({ theme }) => ({
-    position: 'relative',
-    height: '75px',
-    backgroundColor: theme.palette.mode === 'dark'
-        ? theme.palette.background.paper  // Dark mode: use card background
-        : theme.palette.grey[100],         // Light mode: subtle gray
-    borderRadius: theme.shape.borderRadius,
-    margin: theme.spacing(1, 0),
-    padding: theme.spacing(0, 1),
-    border: `1px solid ${theme.palette.divider}`,
-}))
-
-const TimelineRuler = styled(Box)(({ theme }) => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: '40px',
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    cursor: 'pointer',
-}))
-
-const TimelineMark = styled(Box)(({ theme }) => ({
-    position: 'absolute',
-    top: '20px',
-    width: '1px',
-    height: '18px',
-    backgroundColor: theme.palette.text.secondary,
-    '&.subsecond': {
-        top: '25px',
-        height: '13px',
-        backgroundColor: theme.palette.text.disabled,
-    }
-}))
-
-const TimelineLabel = styled(Box)(({ theme }) => ({
-    position: 'absolute',
-    top: '5px',
-    transform: 'translateX(-50%)',
-    fontSize: '0.8rem',
-    color: theme.palette.text.primary,
-    fontWeight: 700,
-    backgroundColor: theme.palette.mode === 'dark'
-        ? theme.palette.background.paper
-        : theme.palette.grey[100],
-    padding: '0 4px',
-    borderRadius: '2px',
-}))
-
-const TimelineWord = styled(Box)(({ theme }) => ({
-    position: 'absolute',
-    height: '30px',
-    top: '40px',
-    backgroundColor: theme.palette.primary.main,
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.primary.contrastText,
-    padding: theme.spacing(0.5, 1),
-    cursor: 'move',
-    userSelect: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: '0.875rem',
-    fontFamily: 'sans-serif',
-    transition: 'background-color 0.1s ease',
-    boxSizing: 'border-box',
-    '&.highlighted': {
-        backgroundColor: theme.palette.secondary.main,
-    }
-}))
-
-const ResizeHandle = styled(Box)(({ theme }) => ({
-    position: 'absolute',
-    top: 0,
-    width: 10,
-    height: '100%',
-    cursor: 'col-resize',
-    '&:hover': {
-        backgroundColor: theme.palette.primary.light,
-        opacity: 0.8,
-        boxShadow: `0 0 0 1px ${theme.palette.primary.dark}`,
-    },
-    '&.left': {
-        left: 0,
-        right: 'auto',
-        paddingRight: 0,
-        borderTopLeftRadius: theme.shape.borderRadius,
-        borderBottomLeftRadius: theme.shape.borderRadius,
-    },
-    '&.right': {
-        right: 0,
-        left: 'auto',
-        paddingLeft: 0,
-        borderTopRightRadius: theme.shape.borderRadius,
-        borderBottomRightRadius: theme.shape.borderRadius,
-    }
-}))
-
-// Add new styled component for the cursor
-const TimelineCursor = styled(Box)(({ theme }) => ({
-    position: 'absolute',
-    top: 0,
-    width: '2px',
-    height: '100%', // Full height of container
-    backgroundColor: theme.palette.error.main, // Red color
-    pointerEvents: 'none', // Ensure it doesn't interfere with clicks
-    transition: 'left 0.1s linear', // Smooth movement
-    zIndex: 1, // Ensure it's above other elements
-}))
-
-export default function TimelineEditor({ words, startTime, endTime, onWordUpdate, onUnsyncWord, currentTime = 0, onPlaySegment, showPlaybackIndicator = true }: TimelineEditorProps) {
-    const containerRef = useRef<HTMLDivElement>(null)
-    const [dragState, setDragState] = useState<{
-        wordIndex: number
-        type: 'move' | 'resize-left' | 'resize-right'
-        initialX: number
-        initialTime: number
-        word: Word
-    } | null>(null)
-
-    const MIN_DURATION = 0.1 // Minimum word duration in seconds
-
-    const checkCollision = (
-        proposedStart: number,
-        proposedEnd: number,
-        currentIndex: number,
-        isResize: boolean
-    ): boolean => {
-        if (isResize) {
-            if (currentIndex === words.length - 1) return false;
-
-            const nextWord = words[currentIndex + 1]
-            if (!nextWord || nextWord.start_time === null) return false
-            return proposedEnd > nextWord.start_time
-        }
-
-        return words.some((word, index) => {
-            if (index === currentIndex) return false
-            if (word.start_time === null || word.end_time === null) return false
-
-            return (
-                (proposedStart >= word.start_time && proposedStart <= word.end_time) ||
-                (proposedEnd >= word.start_time && proposedEnd <= word.end_time) ||
-                (proposedStart <= word.start_time && proposedEnd >= word.end_time)
-            )
-        })
-    }
-
-    const timeToPosition = (time: number): number => {
-        const duration = endTime - startTime
-        const position = ((time - startTime) / duration) * 100
-        return Math.max(0, Math.min(100, position))
-    }
-    const generateTimelineMarks = () => {
-        const marks = []
-        const startSecond = Math.floor(startTime)
-        const endSecond = Math.ceil(endTime)
-
-        // Generate marks for each second
-        for (let time = startSecond; time <= endSecond; time++) {
-            if (time >= startTime && time <= endTime) {
-                const position = timeToPosition(time)
-                marks.push(
-                    <Box key={time}>
-                        <TimelineMark sx={{ left: `${position}%` }} />
-                        <TimelineLabel sx={{ left: `${position}%` }}>
-                            {time}s
-                        </TimelineLabel>
-                    </Box>
-                )
-            }
-        }
-        return marks
-    }
-
-    const handleMouseDown = (e: React.MouseEvent, wordIndex: number, type: 'move' | 'resize-left' | 'resize-right') => {
-        const rect = containerRef.current?.getBoundingClientRect()
-        if (!rect) return
-
-        const word = words[wordIndex]
-        if (word.start_time === null || word.end_time === null) return
-
-        const initialX = e.clientX - rect.left
-        const initialTime = ((initialX / rect.width) * (endTime - startTime))
-
-        setDragState({
-            wordIndex,
-            type,
-            initialX,
-            initialTime,
-            word
-        })
-    }
-
-    const handleMouseMove = (e: React.MouseEvent) => {
-        if (!dragState || !containerRef.current) return
-
-        const rect = containerRef.current.getBoundingClientRect()
-        const x = e.clientX - rect.left
-        const width = rect.width
-
-        const currentWord = words[dragState.wordIndex]
-        if (currentWord.start_time === null || currentWord.end_time === null ||
-            dragState.word.start_time === null || dragState.word.end_time === null) return
-
-        if (dragState.type === 'resize-right') {
-            const initialWordDuration = dragState.word.end_time - dragState.word.start_time
-            const initialWordWidth = (initialWordDuration / (endTime - startTime)) * width
-            const pixelDelta = x - dragState.initialX
-            const percentageMoved = pixelDelta / initialWordWidth
-            const timeDelta = initialWordDuration * percentageMoved
-
-            const proposedEnd = Math.max(
-                currentWord.start_time + MIN_DURATION,
-                dragState.word.end_time + timeDelta
-            )
-
-            if (checkCollision(currentWord.start_time, proposedEnd, dragState.wordIndex, true)) return
-
-            onWordUpdate(dragState.wordIndex, {
-                start_time: currentWord.start_time,
-                end_time: proposedEnd
-            })
-        } else if (dragState.type === 'resize-left') {
-            const initialWordDuration = dragState.word.end_time - dragState.word.start_time
-            const initialWordWidth = (initialWordDuration / (endTime - startTime)) * width
-            const pixelDelta = x - dragState.initialX
-            const percentageMoved = pixelDelta / initialWordWidth
-            const timeDelta = initialWordDuration * percentageMoved
-
-            const proposedStart = Math.min(
-                currentWord.end_time - MIN_DURATION,
-                dragState.word.start_time + timeDelta
-            )
-
-            if (checkCollision(proposedStart, currentWord.end_time, dragState.wordIndex, true)) return
-
-            onWordUpdate(dragState.wordIndex, {
-                start_time: proposedStart,
-                end_time: currentWord.end_time
-            })
-        } else if (dragState.type === 'move') {
-            const pixelsPerSecond = width / (endTime - startTime)
-            const pixelDelta = x - dragState.initialX
-            const timeDelta = pixelDelta / pixelsPerSecond
-
-            const wordDuration = currentWord.end_time - currentWord.start_time
-            const proposedStart = dragState.word.start_time + timeDelta
-            const proposedEnd = proposedStart + wordDuration
-
-            if (proposedStart < startTime || proposedEnd > endTime) return
-            if (checkCollision(proposedStart, proposedEnd, dragState.wordIndex, false)) return
-
-            onWordUpdate(dragState.wordIndex, {
-                start_time: proposedStart,
-                end_time: proposedEnd
-            })
-        }
-    }
-
-    const handleMouseUp = () => {
-        setDragState(null)
-    }
-
-    const handleContextMenu = (e: React.MouseEvent, wordIndex: number) => {
-        e.preventDefault()
-        e.stopPropagation()
-        
-        // Only unsync synced words
-        const word = words[wordIndex]
-        if (word.start_time === null || word.end_time === null) return
-        
-        // Directly unsync the word without showing a menu
-        if (onUnsyncWord) {
-            console.log('TimelineEditor - Right-click unsync word', {
-                wordIndex,
-                wordText: word.text
-            })
-            onUnsyncWord(wordIndex)
-        }
-    }
-
-    const isWordHighlighted = (word: Word): boolean => {
-        if (!currentTime || word.start_time === null || word.end_time === null) return false
-        return currentTime >= word.start_time && currentTime <= word.end_time
-    }
-
-    const handleTimelineClick = (e: React.MouseEvent) => {
-        const rect = containerRef.current?.getBoundingClientRect()
-        if (!rect || !onPlaySegment) return
-
-        const x = e.clientX - rect.left
-        const clickedPosition = (x / rect.width) * (endTime - startTime) + startTime
-
-        console.log('Timeline clicked:', {
-            x,
-            width: rect.width,
-            clickedTime: clickedPosition
-        })
-
-        onPlaySegment(clickedPosition)
-    }
-
-    return (
-        <TimelineContainer
-            ref={containerRef}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-            onMouseLeave={handleMouseUp}
-        >
-            <TimelineRuler onClick={handleTimelineClick}>
-                {generateTimelineMarks()}
-            </TimelineRuler>
-
-            {/* Add cursor line */}
-            {showPlaybackIndicator && (
-                <TimelineCursor
-                    sx={{
-                        left: `${timeToPosition(currentTime)}%`,
-                        display: currentTime >= startTime && currentTime <= endTime ? 'block' : 'none'
-                    }}
-                />
-            )}
-
-            {words.map((word, index) => {
-                // Only render synced words on the timeline
-                if (word.start_time === null || word.end_time === null) return null;
-                
-                const leftPosition = timeToPosition(word.start_time)
-                const rightPosition = timeToPosition(word.end_time)
-                const width = rightPosition - leftPosition
-                const adjustedWidth = width
-
-                return (
-                    <TimelineWord
-                        key={index}
-                        className={isWordHighlighted(word) ? 'highlighted' : ''}
-                        sx={{
-                            left: `${leftPosition}%`,
-                            width: `${adjustedWidth}%`,
-                            maxWidth: `calc(${100 - leftPosition}%)`,
-                        }}
-                        onMouseDown={(e) => {
-                            e.stopPropagation()
-                            handleMouseDown(e, index, 'move')
-                        }}
-                        onContextMenu={(e) => handleContextMenu(e, index)}
-                    >
-                        <ResizeHandle
-                            className="left"
-                            onMouseDown={(e) => {
-                                e.stopPropagation()
-                                handleMouseDown(e, index, 'resize-left')
-                            }}
-                        />
-                        {word.text}
-                        <ResizeHandle
-                            className="right"
-                            onMouseDown={(e) => {
-                                e.stopPropagation()
-                                handleMouseDown(e, index, 'resize-right')
-                            }}
-                        />
-                    </TimelineWord>
-                )
-            })}
-        </TimelineContainer>
-    )
-} 

lyrics_transcriber/frontend/src/components/TimingOffsetModal.tsx

@@ -1,131 +0,0 @@
-import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Button,
-    TextField,
-    Box,
-    Typography,
-    ButtonGroup,
-    IconButton,
-} from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import { useState, useEffect } from 'react';
-
-interface TimingOffsetModalProps {
-    open: boolean;
-    onClose: () => void;
-    currentOffset: number;
-    onApply: (offsetMs: number) => void;
-}
-
-export default function TimingOffsetModal({
-    open,
-    onClose,
-    currentOffset,
-    onApply,
-}: TimingOffsetModalProps) {
-    const [offsetMs, setOffsetMs] = useState(currentOffset);
-
-    // Reset the offset value when the modal opens
-    useEffect(() => {
-        if (open) {
-            setOffsetMs(currentOffset);
-        }
-    }, [open, currentOffset]);
-
-    // Handle preset buttons click
-    const handlePresetClick = (value: number) => {
-        setOffsetMs((prev) => prev + value);
-    };
-
-    // Handle direct input change
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value === '' ? 0 : parseInt(e.target.value, 10);
-        if (!isNaN(value)) {
-            setOffsetMs(value);
-        }
-    };
-
-    // Apply the offset
-    const handleApply = () => {
-        onApply(offsetMs);
-        onClose();
-    };
-
-    return (
-        <Dialog
-            open={open}
-            onClose={onClose}
-            maxWidth="sm"
-            fullWidth
-            PaperProps={{
-                sx: {
-                    overflowY: 'visible',
-                }
-            }}
-        >
-            <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                Adjust Global Timing Offset
-                <IconButton onClick={onClose} size="small">
-                    <CloseIcon />
-                </IconButton>
-            </DialogTitle>
-            <DialogContent>
-                <Box sx={{ mb: 3, mt: 1 }}>
-                    <Typography variant="body2" sx={{ mb: 1 }}>
-                        Adjust the timing of all words in the transcription. Positive values delay the timing, negative values advance it.
-                    </Typography>
-                    
-                    <Typography variant="body2" sx={{ fontStyle: 'italic', mb: 2 }}>
-                        Note: This offset is applied globally but doesn't modify the original timestamps.
-                    </Typography>
-                    
-                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-                        <Typography variant="body1" sx={{ mr: 2 }}>
-                            Offset:
-                        </Typography>
-                        <TextField
-                            value={offsetMs}
-                            onChange={handleInputChange}
-                            type="number"
-                            variant="outlined"
-                            size="small"
-                            InputProps={{
-                                endAdornment: <Typography variant="body2" sx={{ ml: 1 }}>ms</Typography>,
-                            }}
-                            sx={{ width: 120 }}
-                        />
-                    </Box>
-                    
-                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-                        <Typography variant="body2">Quick adjust:</Typography>
-                        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 1 }}>
-                            <ButtonGroup size="small">
-                                <Button onClick={() => handlePresetClick(-100)}>-100ms</Button>
-                                <Button onClick={() => handlePresetClick(-50)}>-50ms</Button>
-                                <Button onClick={() => handlePresetClick(-10)}>-10ms</Button>
-                            </ButtonGroup>
-                            <ButtonGroup size="small">
-                                <Button onClick={() => handlePresetClick(10)}>+10ms</Button>
-                                <Button onClick={() => handlePresetClick(50)}>+50ms</Button>
-                                <Button onClick={() => handlePresetClick(100)}>+100ms</Button>
-                            </ButtonGroup>
-                        </Box>
-                    </Box>
-                </Box>
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onClose}>Cancel</Button>
-                <Button
-                    onClick={handleApply}
-                    variant="contained"
-                    color="primary"
-                >
-                    {offsetMs === 0 ? "Remove Offset" : "Apply Offset"}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}