karaoke-gen 0.90.1__py3-none-any.whl → 0.99.3__py3-none-any.whl

lyrics_transcriber/frontend/src/components/EditActionBar.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from '@mui/material'
+import { Box, Button, useMediaQuery, useTheme } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import RestoreIcon from '@mui/icons-material/RestoreFromTrash'
 import HistoryIcon from '@mui/icons-material/History'
@@ -25,13 +25,29 @@ export default function EditActionBar({
     originalTranscribedSegment,
     isGlobal = false
 }: EditActionBarProps) {
+    const theme = useTheme()
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
     return (
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Box sx={{
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            alignItems: isMobile ? 'stretch' : 'center',
+            gap: 1,
+            width: '100%'
+        }}>
+            <Box sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                flexWrap: 'wrap',
+                justifyContent: isMobile ? 'center' : 'flex-start'
+            }}>
                 <Button
                     startIcon={<RestoreIcon />}
                     onClick={onReset}
                     color="warning"
+                    size={isMobile ? 'small' : 'medium'}
                 >
                     Reset
                 </Button>
@@ -39,6 +55,7 @@ export default function EditActionBar({
                     <Button
                         onClick={onRevertToOriginal}
                         startIcon={<HistoryIcon />}
+                        size={isMobile ? 'small' : 'medium'}
                     >
                         Un-Correct
                     </Button>
@@ -48,17 +65,26 @@ export default function EditActionBar({
                         startIcon={<DeleteIcon />}
                         onClick={onDelete}
                         color="error"
+                        size={isMobile ? 'small' : 'medium'}
                     >
                         Delete Segment
                     </Button>
                 )}
             </Box>
-            <Box sx={{ ml: 'auto', display: 'flex', gap: 1 }}>
-                <Button onClick={onClose}>Cancel</Button>
+            <Box sx={{
+                ml: isMobile ? 0 : 'auto',
+                display: 'flex',
+                gap: 1,
+                justifyContent: isMobile ? 'center' : 'flex-end'
+            }}>
+                <Button onClick={onClose} size={isMobile ? 'small' : 'medium'}>
+                    Cancel
+                </Button>
                 <Button
                     onClick={onSave}
                     variant="contained"
                     disabled={!editedSegment || editedSegment.words.length === 0}
+                    size={isMobile ? 'small' : 'medium'}
                 >
                     Save
                 </Button>

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>
         </>