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

lyrics_transcriber/frontend/src/components/Header.tsx

@@ -39,6 +39,7 @@ interface HeaderProps {
     onFindReplace?: () => void
     onEditAll?: () => void
     onUnCorrectAll?: () => void
+    onResetCorrections?: () => void
     onTimingOffset?: () => void
     timingOffsetMs?: number
     onUndo: () => void
@@ -72,6 +73,7 @@ export default function Header({
     onFindReplace,
     onEditAll,
     onUnCorrectAll,
+    onResetCorrections,
     onTimingOffset,
     timingOffsetMs = 0,
     onUndo,
@@ -144,68 +146,44 @@ export default function Header({
                 </Box>
             )}
 
+            {/* Review Mode toggle and Load File button */}
             <Box sx={{
                 display: 'flex',
-                flexDirection: isMobile ? 'column' : 'row',
                 gap: 1,
-                justifyContent: 'space-between',
-                alignItems: isMobile ? 'stretch' : 'center',
+                justifyContent: 'flex-end',
+                alignItems: 'center',
                 mb: 1
             }}>
-                <Typography variant="h4" sx={{ fontSize: isMobile ? '1.3rem' : '1.5rem' }}>
-                    Nomad Karaoke: Lyrics Transcription Review
-                </Typography>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    {!isReadOnly && isAgenticMode && onReviewModeToggle && (
-                        <Tooltip title={reviewMode
-                            ? "Hide inline correction actions"
-                            : "Show inline actions on all corrections for quick review"
-                        }>
-                            <Chip
-                                icon={<VisibilityIcon />}
-                                label={reviewMode ? "Review Mode" : "Review Off"}
-                                onClick={() => onReviewModeToggle(!reviewMode)}
-                                color={reviewMode ? "secondary" : "default"}
-                                variant={reviewMode ? "filled" : "outlined"}
-                                size="small"
-                                sx={{
-                                    cursor: 'pointer',
-                                    '& .MuiChip-icon': { fontSize: '1rem' }
-                                }}
-                            />
-                        </Tooltip>
-                    )}
-                    {!isReadOnly && onAnnotationsToggle && (
-                        <Tooltip title={annotationsEnabled
-                            ? "Click to disable annotation prompts when editing"
-                            : "Click to enable annotation prompts when editing"
-                        }>
-                            <Chip
-                                icon={<RateReviewIcon />}
-                                label={annotationsEnabled ? "Feedback On" : "Feedback Off"}
-                                onClick={() => onAnnotationsToggle(!annotationsEnabled)}
-                                color={annotationsEnabled ? "primary" : "default"}
-                                variant={annotationsEnabled ? "filled" : "outlined"}
-                                size="small"
-                                sx={{
-                                    cursor: 'pointer',
-                                    '& .MuiChip-icon': { fontSize: '1rem' }
-                                }}
-                            />
-                        </Tooltip>
-                    )}
-                    {isReadOnly && (
-                        <Button
-                            variant="outlined"
+                {!isReadOnly && isAgenticMode && onReviewModeToggle && (
+                    <Tooltip title={reviewMode
+                        ? "Hide inline correction actions"
+                        : "Show inline actions on all corrections for quick review"
+                    }>
+                        <Chip
+                            icon={<VisibilityIcon />}
+                            label={reviewMode ? "Review Mode" : "Review Off"}
+                            onClick={() => onReviewModeToggle(!reviewMode)}
+                            color={reviewMode ? "secondary" : "default"}
+                            variant={reviewMode ? "filled" : "outlined"}
                             size="small"
-                            startIcon={<UploadFileIcon />}
-                            onClick={onFileLoad}
-                            fullWidth={isMobile}
-                        >
-                            Load File
-                        </Button>
-                    )}
-                </Box>
+                            sx={{
+                                cursor: 'pointer',
+                                '& .MuiChip-icon': { fontSize: '1rem' }
+                            }}
+                        />
+                    </Tooltip>
+                )}
+                {isReadOnly && (
+                    <Button
+                        variant="outlined"
+                        size="small"
+                        startIcon={<UploadFileIcon />}
+                        onClick={onFileLoad}
+                        fullWidth={isMobile}
+                    >
+                        Load File
+                    </Button>
+                )}
             </Box>
 
             <Box sx={{
@@ -213,12 +191,14 @@ export default function Header({
                 gap: 1,
                 mb: 1,
                 flexDirection: isMobile ? 'column' : 'row',
-                height: '140px'
+                height: isMobile ? 'auto' : '140px',
+                minHeight: isMobile ? 'auto' : '140px'
             }}>
                 <Box sx={{
-                    width: '280px',
+                    width: isMobile ? '100%' : '280px',
+                    minWidth: isMobile ? '100%' : '280px',
                     position: 'relative',
-                    height: '100%'
+                    height: isMobile ? 'auto' : '100%'
                 }}>
                     {isAgenticMode ? (
                         <AgenticCorrectionMetrics
@@ -385,15 +365,30 @@ export default function Header({
                 }}>
                     <Box sx={{
                         display: 'flex',
-                        gap: 1,
-                        flexDirection: isMobile ? 'column' : 'row',
-                        alignItems: isMobile ? 'flex-start' : 'center',
-                        height: '32px'
+                        gap: 0.5,
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        alignItems: 'center',
+                        minHeight: '32px'
                     }}>
                         <ModeSelector
                             effectiveMode={effectiveMode}
                             onChange={onModeChange}
                         />
+                        {!isReadOnly && onResetCorrections && (
+                            <Tooltip title="Undo all your changes">
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    color="warning"
+                                    onClick={onResetCorrections}
+                                    startIcon={<UndoIcon />}
+                                    sx={{ minWidth: 'fit-content', height: '32px' }}
+                                >
+                                    Undo All
+                                </Button>
+                            </Tooltip>
+                        )}
                         {!isReadOnly && (
                             <Box sx={{ display: 'flex', height: '32px' }}>
                                 <Tooltip title="Undo">
@@ -457,15 +452,17 @@ export default function Header({
                             </Button>
                         )}
                         {!isReadOnly && onUnCorrectAll && (
-                            <Button
-                                variant="outlined"
-                                size="small"
-                                onClick={onUnCorrectAll}
-                                startIcon={<RestoreIcon />}
-                                sx={{ minWidth: 'fit-content', height: '32px' }}
-                            >
-                                Un-Correct All
-                            </Button>
+                            <Tooltip title="Revert only automatic AI corrections (keeps your manual edits)">
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    onClick={onUnCorrectAll}
+                                    startIcon={<RestoreIcon />}
+                                    sx={{ minWidth: 'fit-content', height: '32px' }}
+                                >
+                                    Undo Auto Corrections
+                                </Button>
+                            </Tooltip>
                         )}
                         {!isReadOnly && onTimingOffset && (
                             <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -480,10 +477,10 @@ export default function Header({
                                     Timing Offset
                                 </Button>
                                 {timingOffsetMs !== 0 && (
-                                    <Typography 
-                                        variant="body2" 
-                                        sx={{ 
-                                            ml: 1, 
+                                    <Typography
+                                        variant="body2"
+                                        sx={{
+                                            ml: 1,
                                             fontWeight: 'bold',
                                             color: theme.palette.secondary.main
                                         }}
@@ -493,6 +490,23 @@ export default function Header({
                                 )}
                             </Box>
                         )}
+                        {!isReadOnly && onAnnotationsToggle && (
+                            <Tooltip title={annotationsEnabled
+                                ? "Click to disable annotation prompts when editing"
+                                : "Click to enable annotation prompts when editing"
+                            }>
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    onClick={() => onAnnotationsToggle(!annotationsEnabled)}
+                                    startIcon={<RateReviewIcon />}
+                                    color={annotationsEnabled ? "primary" : "inherit"}
+                                    sx={{ minWidth: 'fit-content', height: '32px' }}
+                                >
+                                    {annotationsEnabled ? "Feedback On" : "Feedback Off"}
+                                </Button>
+                            </Tooltip>
+                        )}
                         <AudioPlayer
                             apiClient={apiClient}
                             onTimeUpdate={onTimeUpdate}

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx

@@ -10,7 +10,7 @@ import {
     WordCorrection,
     CorrectionAnnotation
 } from '../types'
-import { Box, Button, Grid, useMediaQuery, useTheme } from '@mui/material'
+import { Box, Button, Grid, Typography, useMediaQuery, useTheme } from '@mui/material'
 import { ApiClient } from '../api'
 import ReferenceView from './ReferenceView'
 import TranscriptionView from './TranscriptionView'
@@ -33,7 +33,7 @@ import { setupKeyboardHandlers, setModalHandler, getModalState } from './shared/
 import Header from './Header'
 import { getWordsFromIds } from './shared/utils/wordUtils'
 import AddLyricsModal from './AddLyricsModal'
-import { RestoreFromTrash, OndemandVideo } from '@mui/icons-material'
+import { OndemandVideo } from '@mui/icons-material'
 import FindReplaceModal from './FindReplaceModal'
 import TimingOffsetModal from './TimingOffsetModal'
 import { applyOffsetToCorrectionData, applyOffsetToSegment } from './shared/utils/timingUtils'
@@ -216,6 +216,7 @@ interface MemoizedHeaderProps {
     canUndo: boolean
     canRedo: boolean
     onUnCorrectAll: () => void
+    onResetCorrections: () => void
     annotationsEnabled: boolean
     onAnnotationsToggle: (enabled: boolean) => void
     // Review mode props
@@ -250,6 +251,7 @@ const MemoizedHeader = memo(function MemoizedHeader({
     canUndo,
     canRedo,
     onUnCorrectAll,
+    onResetCorrections,
     annotationsEnabled,
     onAnnotationsToggle,
     reviewMode,
@@ -281,6 +283,7 @@ const MemoizedHeader = memo(function MemoizedHeader({
             canUndo={canUndo}
             canRedo={canRedo}
             onUnCorrectAll={onUnCorrectAll}
+            onResetCorrections={onResetCorrections}
             annotationsEnabled={annotationsEnabled}
             onAnnotationsToggle={onAnnotationsToggle}
             reviewMode={reviewMode}
@@ -1255,8 +1258,6 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     
     return (
         <Box sx={{
-            p: 1,
-            pb: 3,
             maxWidth: '100%',
             overflowX: 'hidden'
         }}>
@@ -1282,6 +1283,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 canUndo={canUndo}
                 canRedo={canRedo}
                 onUnCorrectAll={handleUnCorrectAll}
+                onResetCorrections={handleResetCorrections}
                 annotationsEnabled={annotationsEnabled}
                 onAnnotationsToggle={handleAnnotationsToggle}
                 reviewMode={reviewMode}
@@ -1291,7 +1293,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 onRevertAllCorrections={handleRevertAllCorrections}
             />
 
-            <Grid container direction={isMobile ? 'column' : 'row'}>
+            <Grid container direction={isMobile ? 'column' : 'row'} spacing={1}>
                 <Grid item xs={12} md={6}>
                     <MemoizedTranscriptionView
                         data={displayData}
@@ -1316,32 +1318,6 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                         onAcceptCorrection={handleAcceptCorrection}
                         onShowCorrectionDetail={handleShowCorrectionDetail}
                     />
-                    {!isReadOnly && apiClient && (
-                        <Box sx={{
-                            mt: 2,
-                            mb: 3,
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            width: '100%'
-                        }}>
-                            <Button
-                                variant="outlined"
-                                color="warning"
-                                onClick={handleResetCorrections}
-                                startIcon={<RestoreFromTrash />}
-                            >
-                                Reset Corrections
-                            </Button>
-                            <Button
-                                variant="contained"
-                                onClick={handleFinishReview}
-                                disabled={isReviewComplete}
-                                endIcon={<OndemandVideo />}
-                            >
-                                {isReviewComplete ? 'Review Complete' : 'Preview Video'}
-                            </Button>
-                        </Box>
-                    )}
                 </Grid>
                 <Grid item xs={12} md={6}>
                     <MemoizedReferenceView
@@ -1362,6 +1338,52 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 </Grid>
             </Grid>
 
+            {/* Spacer for sticky footer */}
+            {!isReadOnly && apiClient && <Box sx={{ height: 64 }} />}
+
+            {/* Sticky footer bar with Preview Video button */}
+            {!isReadOnly && apiClient && (
+                <Box
+                    sx={{
+                        position: 'fixed',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        bgcolor: 'background.paper',
+                        borderTop: 1,
+                        borderColor: 'divider',
+                        boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+                        py: 1.5,
+                        px: 2,
+                        zIndex: 1100,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        gap: 2
+                    }}
+                >
+                    <Typography
+                        variant="body2"
+                        sx={{ color: 'text.secondary' }}
+                    >
+                        Lyrics look good?
+                    </Typography>
+                    <Button
+                        variant="contained"
+                        onClick={handleFinishReview}
+                        disabled={isReviewComplete}
+                        endIcon={<OndemandVideo />}
+                        sx={{
+                            px: 2.5,
+                            py: 0.75,
+                            fontWeight: 500
+                        }}
+                    >
+                        {isReviewComplete ? 'Review Complete' : 'Preview Video'}
+                    </Button>
+                </Box>
+            )}
+
 
 
             <EditModal

lyrics_transcriber/frontend/src/components/LyricsSynchronizer/SyncControls.tsx

@@ -2,8 +2,7 @@ import { memo } from 'react'
 import {
     Box,
     Button,
-    Divider,
-    Stack
+    Divider
 } from '@mui/material'
 import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'
 import StopIcon from '@mui/icons-material/Stop'
@@ -14,6 +13,7 @@ import EditNoteIcon from '@mui/icons-material/EditNote'
 import BlockIcon from '@mui/icons-material/Block'
 import EditIcon from '@mui/icons-material/Edit'
 import DeleteIcon from '@mui/icons-material/Delete'
+import TouchAppIcon from '@mui/icons-material/TouchApp'
 
 interface SyncControlsProps {
     // Main buttons
@@ -24,21 +24,27 @@ interface SyncControlsProps {
     onResumeSync: () => void
     onClearSync: () => void
     onEditLyrics: () => void
-    
+
     // Playback controls
     onPlay: () => void
     onStop: () => void
     isPlaying: boolean
-    
+
     // Word action buttons
     hasSelectedWords: boolean
     selectedWordCount: number
     onUnsyncFromCursor: () => void
     onEditSelectedWord: () => void
     onDeleteSelected: () => void
-    
+
     // Additional state
     canUnsyncFromCursor: boolean
+
+    // Mobile tap support
+    isMobile?: boolean
+    onTapStart?: () => void
+    onTapEnd?: () => void
+    isTapping?: boolean
 }
 
 const SyncControls = memo(function SyncControls({
@@ -57,12 +63,16 @@ const SyncControls = memo(function SyncControls({
     onUnsyncFromCursor,
     onEditSelectedWord,
     onDeleteSelected,
-    canUnsyncFromCursor
+    canUnsyncFromCursor,
+    isMobile = false,
+    onTapStart,
+    onTapEnd,
+    isTapping = false
 }: SyncControlsProps) {
     return (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
             {/* Row 1: Playback & Sync Mode Controls */}
-            <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap">
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center' }}>
                 {/* Playback controls */}
                 <Button
                     variant="outlined"
@@ -85,7 +95,7 @@ const SyncControls = memo(function SyncControls({
                     Stop
                 </Button>
 
-                <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
+                {!isMobile && <Divider orientation="vertical" flexItem />}
 
                 {/* Sync Mode controls */}
                 {isManualSyncing ? (
@@ -108,6 +118,27 @@ const SyncControls = memo(function SyncControls({
                         >
                             {isPaused ? 'Resume' : 'Pause'}
                         </Button>
+                        {/* TAP button for mobile - no spacebar on mobile */}
+                        {isMobile && !isPaused && onTapStart && onTapEnd && (
+                            <Button
+                                variant="contained"
+                                color={isTapping ? 'warning' : 'success'}
+                                onTouchStart={(e) => {
+                                    e.preventDefault()
+                                    onTapStart()
+                                }}
+                                onTouchEnd={(e) => {
+                                    e.preventDefault()
+                                    onTapEnd()
+                                }}
+                                onMouseDown={onTapStart}
+                                onMouseUp={onTapEnd}
+                                startIcon={<TouchAppIcon />}
+                                size="small"
+                            >
+                                {isTapping ? 'Release' : 'TAP'}
+                            </Button>
+                        )}
                     </>
                 ) : (
                     <Button
@@ -120,10 +151,10 @@ const SyncControls = memo(function SyncControls({
                         Start Sync
                     </Button>
                 )}
-            </Stack>
+            </Box>
 
             {/* Row 2: Editing & Word Actions */}
-            <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap">
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center' }}>
                 <Button
                     variant="outlined"
                     color="warning"
@@ -145,7 +176,7 @@ const SyncControls = memo(function SyncControls({
                     Edit Lyrics
                 </Button>
 
-                <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
+                {!isMobile && <Divider orientation="vertical" flexItem />}
 
                 <Button
                     variant="outlined"
@@ -177,7 +208,7 @@ const SyncControls = memo(function SyncControls({
                 >
                     Delete{hasSelectedWords && selectedWordCount > 0 ? ` (${selectedWordCount})` : ''}
                 </Button>
-            </Stack>
+            </Box>
         </Box>
     )
 })