karaoke-gen 0.86.7__py3-none-any.whl → 0.96.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/EditModal.tsx

@@ -6,7 +6,9 @@ import {
     IconButton,
     Box,
     CircularProgress,
-    Typography
+    Typography,
+    useMediaQuery,
+    useTheme
 } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'
@@ -33,6 +35,8 @@ interface TimelineSectionProps {
     onPlaySegment?: (startTime: number) => void
     startManualSync: () => void
     isGlobal: boolean
+    onTapStart?: () => void
+    onTapEnd?: () => void
 }
 
 const MemoizedTimelineSection = memo(function TimelineSection({
@@ -47,7 +51,9 @@ const MemoizedTimelineSection = memo(function TimelineSection({
     onWordUpdate,
     onPlaySegment,
     startManualSync,
-    isGlobal
+    isGlobal,
+    onTapStart,
+    onTapEnd
 }: TimelineSectionProps) {
     return (
         <EditTimelineSection
@@ -66,6 +72,8 @@ const MemoizedTimelineSection = memo(function TimelineSection({
             onPlaySegment={onPlaySegment}
             startManualSync={startManualSync}
             isGlobal={isGlobal}
+            onTapStart={onTapStart}
+            onTapEnd={onTapEnd}
         />
     )
 })
@@ -195,6 +203,9 @@ export default function EditModal({
     //     hasOriginalTranscribedSegment: !!originalTranscribedSegment
     // });
     
+    const theme = useTheme()
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
     const [editedSegment, setEditedSegment] = useState<LyricsSegment | null>(segment)
     const [isPlaying, setIsPlaying] = useState(false)
 
@@ -224,7 +235,9 @@ export default function EditModal({
         startManualSync,
         cleanupManualSync,
         handleSpacebar,
-        isSpacebarPressed
+        isSpacebarPressed,
+        handleTapStart,
+        handleTapEnd
     } = useManualSync({
         editedSegment,
         currentTime,
@@ -588,6 +601,7 @@ export default function EditModal({
             onClose={handleClose}
             maxWidth="md"
             fullWidth
+            fullScreen={isMobile}
             onKeyDown={(e) => {
                 if (e.key === 'Enter' && !e.shiftKey && !isLoading) {
                     e.preventDefault()
@@ -596,8 +610,8 @@ export default function EditModal({
             }}
             PaperProps={{
                 sx: {
-                    height: '90vh',
-                    margin: '5vh 0'
+                    height: isMobile ? '100%' : '90vh',
+                    margin: isMobile ? 0 : '5vh 0'
                 }
             }}
         >
@@ -614,17 +628,19 @@ export default function EditModal({
                 }}
             >
                 {isLoading && (
-                    <Box sx={{ 
-                        display: 'flex', 
+                    <Box sx={{
+                        display: 'flex',
                         flexDirection: 'column',
-                        alignItems: 'center', 
-                        justifyContent: 'center', 
+                        alignItems: 'center',
+                        justifyContent: 'center',
                         height: '100%',
                         width: '100%',
                         position: 'absolute',
                         top: 0,
                         left: 0,
-                        backgroundColor: 'rgba(30, 41, 59, 0.95)', // slate-800 with opacity for dark mode
+                        backgroundColor: (theme) => theme.palette.mode === 'dark'
+                            ? 'rgba(30, 41, 59, 0.95)'  // slate-800 with opacity for dark mode
+                            : 'rgba(248, 250, 252, 0.95)', // light background for light mode
                         zIndex: 10
                     }}>
                         <CircularProgress size={60} thickness={4} />
@@ -652,6 +668,8 @@ export default function EditModal({
                             onPlaySegment={onPlaySegment}
                             startManualSync={startManualSync}
                             isGlobal={isGlobal}
+                            onTapStart={handleTapStart}
+                            onTapEnd={handleTapEnd}
                         />
 
                         <MemoizedWordList

lyrics_transcriber/frontend/src/components/EditTimelineSection.tsx

@@ -4,7 +4,9 @@ import {
     Typography,
     IconButton,
     Tooltip,
-    Stack
+    Stack,
+    useMediaQuery,
+    useTheme
 } from '@mui/material'
 import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'
 import CancelIcon from '@mui/icons-material/Cancel'
@@ -17,10 +19,68 @@ import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline'
 import PlayArrowIcon from '@mui/icons-material/PlayArrow'
 import StopIcon from '@mui/icons-material/Stop'
 import CenterFocusStrongIcon from '@mui/icons-material/CenterFocusStrong'
+import TouchAppIcon from '@mui/icons-material/TouchApp'
 import TimelineEditor from './TimelineEditor'
 import { Word } from '../types'
 import { useState, useEffect, useCallback, useRef, useMemo, memo } from 'react'
 
+// Separate TapButton component to properly track local press state
+// This prevents issues where onMouseLeave fires before parent state updates
+const TapButton = memo(function TapButton({
+    isSpacebarPressed,
+    onTapStart,
+    onTapEnd
+}: {
+    isSpacebarPressed: boolean
+    onTapStart: () => void
+    onTapEnd: () => void
+}) {
+    const isPressedRef = useRef(false)
+
+    const handleTapStart = useCallback(() => {
+        isPressedRef.current = true
+        onTapStart()
+    }, [onTapStart])
+
+    const handleTapEnd = useCallback(() => {
+        if (isPressedRef.current) {
+            isPressedRef.current = false
+            onTapEnd()
+        }
+    }, [onTapEnd])
+
+    return (
+        <Button
+            variant="contained"
+            color={isSpacebarPressed ? "secondary" : "primary"}
+            onTouchStart={(e) => {
+                e.preventDefault()
+                handleTapStart()
+            }}
+            onTouchEnd={(e) => {
+                e.preventDefault()
+                handleTapEnd()
+            }}
+            onMouseDown={handleTapStart}
+            onMouseUp={handleTapEnd}
+            onMouseLeave={handleTapEnd}
+            startIcon={<TouchAppIcon />}
+            sx={{
+                py: 2,
+                fontSize: '1.1rem',
+                fontWeight: 'bold',
+                width: '100%',
+                minHeight: '56px',
+                userSelect: 'none',
+                WebkitUserSelect: 'none',
+                touchAction: 'manipulation'
+            }}
+        >
+            {isSpacebarPressed ? "HOLD..." : "TAP"}
+        </Button>
+    )
+})
+
 interface EditTimelineSectionProps {
     words: Word[]
     startTime: number
@@ -44,6 +104,8 @@ interface EditTimelineSectionProps {
     isGlobal?: boolean
     defaultZoomLevel?: number
     isReplaceAllMode?: boolean
+    onTapStart?: () => void
+    onTapEnd?: () => void
 }
 
 // Memoized control buttons to prevent unnecessary re-renders
@@ -91,16 +153,21 @@ const TimelineControls = memo(({
     onStopAudio?: () => void
 }) => {
     return (
-        <Stack direction="row" spacing={1} alignItems="center">
+        <Stack
+            direction="row"
+            spacing={0.5}
+            alignItems="center"
+            sx={{ flexWrap: 'wrap', justifyContent: 'center', gap: 0.5 }}
+        >
             {isGlobal && (
-                <>  
+                <>
                     <Tooltip title="Scroll Left">
                         <IconButton
                             onClick={onScrollLeft}
                             disabled={visibleStartTime <= startTime}
                             size="small"
                         >
-                            <ArrowBackIcon />
+                            <ArrowBackIcon fontSize="small" />
                         </IconButton>
                     </Tooltip>
                     <Tooltip title="Zoom Out (Show More Time)">
@@ -109,7 +176,7 @@ const TimelineControls = memo(({
                             disabled={zoomLevel >= (endTime - startTime) || (isReplaceAllMode && isManualSyncing && !isPaused)}
                             size="small"
                         >
-                            <ZoomOutIcon />
+                            <ZoomOutIcon fontSize="small" />
                         </IconButton>
                     </Tooltip>
                     <Tooltip title="Zoom In (Show Less Time)">
@@ -118,7 +185,7 @@ const TimelineControls = memo(({
                             disabled={zoomLevel <= 2 || (isReplaceAllMode && isManualSyncing && !isPaused)}
                             size="small"
                         >
-                            <ZoomInIcon />
+                            <ZoomInIcon fontSize="small" />
                         </IconButton>
                     </Tooltip>
                     <Tooltip title="Scroll Right">
@@ -127,7 +194,7 @@ const TimelineControls = memo(({
                             disabled={visibleEndTime >= endTime}
                             size="small"
                         >
-                            <ArrowForwardIcon />
+                            <ArrowForwardIcon fontSize="small" />
                         </IconButton>
                     </Tooltip>
                     <Tooltip
@@ -140,7 +207,7 @@ const TimelineControls = memo(({
                             color={autoScrollEnabled ? "primary" : "default"}
                             size="small"
                         >
-                            {autoScrollEnabled ? <AutorenewIcon /> : <PauseCircleOutlineIcon />}
+                            {autoScrollEnabled ? <AutorenewIcon fontSize="small" /> : <PauseCircleOutlineIcon fontSize="small" />}
                         </IconButton>
                     </Tooltip>
                     <Tooltip title="Jump to Current Playback Position">
@@ -149,7 +216,7 @@ const TimelineControls = memo(({
                             disabled={!currentTime}
                             size="small"
                         >
-                            <CenterFocusStrongIcon />
+                            <CenterFocusStrongIcon fontSize="small" />
                         </IconButton>
                     </Tooltip>
                 </>
@@ -158,26 +225,27 @@ const TimelineControls = memo(({
                 <Button
                     variant="outlined"
                     onClick={onStopAudio}
-                    startIcon={<StopIcon />}
+                    startIcon={<StopIcon fontSize="small" />}
                     color="error"
                     size="small"
                 >
-                    Stop Audio
+                    Stop
                 </Button>
             )}
             <Button
                 variant={isManualSyncing ? "outlined" : "contained"}
                 onClick={onStartManualSync}
-                startIcon={isManualSyncing ? <CancelIcon /> : <PlayCircleOutlineIcon />}
+                startIcon={isManualSyncing ? <CancelIcon fontSize="small" /> : <PlayCircleOutlineIcon fontSize="small" />}
                 color={isManualSyncing ? "error" : "primary"}
+                size="small"
             >
-                {isManualSyncing ? "Cancel Sync" : "Manual Sync"}
+                {isManualSyncing ? "Cancel" : "Tap To Sync"}
             </Button>
             {isManualSyncing && isReplaceAllMode && (
                 <Button
                     variant="outlined"
                     onClick={onPauseResume}
-                    startIcon={isPaused ? <PlayArrowIcon /> : <PauseCircleOutlineIcon />}
+                    startIcon={isPaused ? <PlayArrowIcon fontSize="small" /> : <PauseCircleOutlineIcon fontSize="small" />}
                     color={isPaused ? "success" : "warning"}
                     size="small"
                 >
@@ -210,8 +278,12 @@ export default function EditTimelineSection({
     isPaused = false,
     isGlobal = false,
     defaultZoomLevel = 10,
-    isReplaceAllMode = false
+    isReplaceAllMode = false,
+    onTapStart,
+    onTapEnd
 }: EditTimelineSectionProps) {
+    const theme = useTheme()
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
     // Add state for zoom level - use larger default for Replace All mode
     const [zoomLevel, setZoomLevel] = useState(defaultZoomLevel)
     const [visibleStartTime, setVisibleStartTime] = useState(startTime)
@@ -432,7 +504,7 @@ export default function EditTimelineSection({
     return (
         <>
             <Box
-                sx={{ height: '120px', mb: 2 }}
+                sx={{ height: isMobile ? '80px' : '120px', mb: 0 }}
                 ref={timelineRef}
                 onWheel={handleScroll}
             >
@@ -447,14 +519,30 @@ export default function EditTimelineSection({
                 />
             </Box>
 
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <Typography variant="body2" color="text.secondary">
-                    Original Time Range: {originalStartTime?.toFixed(2) ?? 'N/A'} - {originalEndTime?.toFixed(2) ?? 'N/A'}
-                    <br />
-                    Current Time Range: {currentStartTime?.toFixed(2) ?? 'N/A'} - {currentEndTime?.toFixed(2) ?? 'N/A'}
-                </Typography>
-
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Box sx={{
+                display: 'flex',
+                flexDirection: isMobile ? 'column' : 'row',
+                alignItems: isMobile ? 'stretch' : 'center',
+                justifyContent: 'space-between',
+                gap: isMobile ? 1 : 0,
+                mt: isMobile ? 1.5 : 0,
+                mb: isMobile ? 2 : 0
+            }}>
+                {/* Time range info - hidden on mobile to save space */}
+                {!isMobile && (
+                    <Typography variant="body2" color="text.secondary">
+                        Original Time Range: {originalStartTime?.toFixed(2) ?? 'N/A'} - {originalEndTime?.toFixed(2) ?? 'N/A'}
+                        <br />
+                        Current Time Range: {currentStartTime?.toFixed(2) ?? 'N/A'} - {currentEndTime?.toFixed(2) ?? 'N/A'}
+                    </Typography>
+                )}
+
+                <Box sx={{
+                    display: 'flex',
+                    flexDirection: isMobile ? 'column' : 'row',
+                    alignItems: isMobile ? 'stretch' : 'center',
+                    gap: isMobile ? 1 : 2
+                }}>
                     <TimelineControls
                         isGlobal={isGlobal}
                         visibleStartTime={visibleStartTime}
@@ -478,17 +566,25 @@ export default function EditTimelineSection({
                         onStopAudio={onStopAudio}
                     />
                     {currentWordInfo && (
-                        <Box>
+                        <Box sx={{ textAlign: isMobile ? 'center' : 'left' }}>
                             <Typography variant="body2">
                                 Word {currentWordInfo.index} of {currentWordInfo.total}: <strong>{currentWordInfo.text}</strong>
                             </Typography>
                             <Typography variant="caption" color="text.secondary">
                                 {isSpacebarPressed ?
-                                    "Holding spacebar... Release when word ends" :
-                                    "Press spacebar when word starts (tap for short words, hold for long words)"}
+                                    "Holding... Release when word ends" :
+                                    (isMobile ? "Tap the button when word starts" : "Press spacebar when word starts (tap for short words, hold for long words)")}
                             </Typography>
                         </Box>
                     )}
+                    {/* Mobile TAP button for manual sync */}
+                    {isMobile && isManualSyncing && onTapStart && onTapEnd && (
+                        <TapButton
+                            isSpacebarPressed={isSpacebarPressed}
+                            onTapStart={onTapStart}
+                            onTapEnd={onTapEnd}
+                        />
+                    )}
                 </Box>
             </Box>
         </>

lyrics_transcriber/frontend/src/components/EditWordList.tsx

@@ -4,7 +4,9 @@ import {
     IconButton,
     Button,
     Pagination,
-    Typography
+    Typography,
+    useMediaQuery,
+    useTheme
 } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import SplitIcon from '@mui/icons-material/CallSplit'
@@ -34,7 +36,8 @@ const WordRow = memo(function WordRow({
     onSplitWord,
     onRemoveWord,
     wordsLength,
-    onTabNavigation
+    onTabNavigation,
+    isMobile
 }: {
     word: Word
     index: number
@@ -43,11 +46,10 @@ const WordRow = memo(function WordRow({
     onRemoveWord: (index: number) => void
     wordsLength: number
     onTabNavigation: (currentIndex: number) => void
+    isMobile: boolean
 }) {
     const handleKeyDown = (e: React.KeyboardEvent) => {
-        // console.log('KeyDown event:', e.key, 'Shift:', e.shiftKey, 'Index:', index);
         if (e.key === 'Tab' && !e.shiftKey) {
-            // console.log('Tab key detected, preventing default and navigating');
             e.preventDefault();
             onTabNavigation(index);
         }
@@ -56,54 +58,99 @@ const WordRow = memo(function WordRow({
     return (
         <Box sx={{
             display: 'flex',
-            gap: 2,
-            alignItems: 'center',
+            flexDirection: isMobile ? 'column' : 'row',
+            gap: isMobile ? 1 : 2,
+            alignItems: isMobile ? 'stretch' : 'center',
             padding: '4px 0',
         }}>
-            <TextField
-                label={`Word ${index}`}
-                value={word.text}
-                onChange={(e) => onWordUpdate(index, { text: e.target.value })}
-                onKeyDown={handleKeyDown}
-                fullWidth
-                size="small"
-                id={`word-text-${index}`}
-            />
-            <TextField
-                label="Start Time"
-                value={word.start_time?.toFixed(2) ?? ''}
-                onChange={(e) => onWordUpdate(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) => onWordUpdate(index, { end_time: parseFloat(e.target.value) })}
-                type="number"
-                inputProps={{ step: 0.01 }}
-                sx={{ width: '150px' }}
-                size="small"
-            />
-            <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>
+            {/* 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>
     );
 });
@@ -122,7 +169,8 @@ const WordItem = memo(function WordItem({
     onMergeSegment,
     wordsLength,
     isGlobal,
-    onTabNavigation
+    onTabNavigation,
+    isMobile
 }: {
     word: Word
     index: number
@@ -137,6 +185,7 @@ const WordItem = memo(function WordItem({
     wordsLength: number
     isGlobal: boolean
     onTabNavigation: (currentIndex: number) => void
+    isMobile: boolean
 }) {
     return (
         <Box key={word.id}>
@@ -148,6 +197,7 @@ const WordItem = memo(function WordItem({
                 onRemoveWord={onRemoveWord}
                 wordsLength={wordsLength}
                 onTabNavigation={onTabNavigation}
+                isMobile={isMobile}
             />
 
             {/* Word divider with merge/split functionality */}
@@ -168,16 +218,14 @@ const WordItem = memo(function WordItem({
                     }
                     canMerge={index < wordsLength - 1}
                     isLast={index === wordsLength - 1}
-                    sx={{ ml: 15 }}
-                />
+                                    />
             )}
             {isGlobal && (
                 <WordDivider
                     onAddWord={() => onAddWord(index)}
                     onMergeWords={index < wordsLength - 1 ? () => onMergeWords(index) : undefined}
                     canMerge={index < wordsLength - 1}
-                    sx={{ ml: 15 }}
-                />
+                                    />
             )}
         </Box>
     );
@@ -195,6 +243,9 @@ export default function EditWordList({
     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
@@ -289,14 +340,12 @@ export default function EditWordList({
                     onAddSegmentBefore={() => onAddSegment?.(0)}
                     onMergeSegment={() => onMergeSegment?.(false)}
                     isFirst={true}
-                    sx={{ ml: 15 }}
-                />
+                                    />
             )}
             {isGlobal && (
                 <WordDivider
                     onAddWord={() => onAddWord(-1)}
-                    sx={{ ml: 15 }}
-                />
+                                    />
             )}
             
             {/* Word list with scrolling */}
@@ -312,7 +361,9 @@ export default function EditWordList({
                     width: '8px',
                 },
                 '&::-webkit-scrollbar-thumb': {
-                    backgroundColor: 'rgba(248, 250, 252, 0.2)', // slate-50 for dark mode
+                    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',
@@ -336,6 +387,7 @@ export default function EditWordList({
                             wordsLength={words.length}
                             isGlobal={isGlobal}
                             onTabNavigation={handleTabNavigation}
+                            isMobile={isMobile}
                         />
                     );
                 })}