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

lyrics_transcriber/frontend/src/hooks/useManualSync.ts

@@ -353,6 +353,106 @@ export default function useManualSync({
         }
     }, [handleKeyDown, handleKeyUp])
 
+    // Touch-friendly handlers for mobile (simulates spacebar press/release)
+    const handleTapStart = useCallback(() => {
+        if (!isManualSyncing || !editedSegment || isSpacebarPressed || isPaused) return
+
+        console.log('useManualSync - Touch/tap started', {
+            syncWordIndex,
+            currentTime: currentTimeRef.current
+        })
+
+        setIsSpacebarPressed(true)
+
+        // Record the start time of the current word
+        wordStartTimeRef.current = currentTimeRef.current
+
+        // Record when the tap started (for tap detection)
+        spacebarPressTimeRef.current = Date.now()
+
+        // Update the word's start time immediately
+        if (syncWordIndex < editedSegment.words.length) {
+            const newWords = [...wordsRef.current]
+            const currentWord = newWords[syncWordIndex]
+            const currentStartTime = currentTimeRef.current
+
+            // Set the start time for the current word
+            currentWord.start_time = currentStartTime
+
+            // Handle the end time of the previous word (if it exists)
+            if (syncWordIndex > 0) {
+                const previousWord = newWords[syncWordIndex - 1]
+                if (previousWord.start_time !== null) {
+                    const timeSincePreviousStart = currentStartTime - previousWord.start_time
+
+                    const needsAdjustment = previousWord.end_time === null ||
+                                          (previousWord.end_time !== null && previousWord.end_time > currentStartTime)
+
+                    if (needsAdjustment) {
+                        if (timeSincePreviousStart > 1.0) {
+                            previousWord.end_time = previousWord.start_time + 0.5
+                        } else {
+                            previousWord.end_time = currentStartTime - 0.005
+                        }
+                    }
+                }
+            }
+
+            // Update our ref
+            wordsRef.current = newWords
+
+            // Mark that we need to update the segment
+            needsSegmentUpdateRef.current = true
+        }
+    }, [isManualSyncing, editedSegment, syncWordIndex, isSpacebarPressed, isPaused])
+
+    const handleTapEnd = useCallback(() => {
+        if (!isManualSyncing || !editedSegment || !isSpacebarPressed || isPaused) return
+
+        const pressDuration = spacebarPressTimeRef.current ? Date.now() - spacebarPressTimeRef.current : 0
+        const isTap = pressDuration < TAP_THRESHOLD_MS
+
+        console.log('useManualSync - Touch/tap ended', {
+            syncWordIndex,
+            pressDuration: `${pressDuration}ms`,
+            isTap
+        })
+
+        setIsSpacebarPressed(false)
+
+        if (syncWordIndex < editedSegment.words.length) {
+            const newWords = [...wordsRef.current]
+            const currentWord = newWords[syncWordIndex]
+
+            // Set the end time for the current word based on whether it was a tap or hold
+            if (isTap) {
+                const defaultEndTime = (wordStartTimeRef.current || currentTimeRef.current) + DEFAULT_WORD_DURATION
+                currentWord.end_time = defaultEndTime
+            } else {
+                currentWord.end_time = currentTimeRef.current
+            }
+
+            // Update our ref
+            wordsRef.current = newWords
+
+            // Move to the next word
+            if (syncWordIndex === editedSegment.words.length - 1) {
+                // If this was the last word, finish manual sync
+                console.log('useManualSync - Completed manual sync for all words')
+                setIsManualSyncing(false)
+                setSyncWordIndex(-1)
+                wordStartTimeRef.current = null
+                spacebarPressTimeRef.current = null
+            } else {
+                // Otherwise, move to the next word
+                setSyncWordIndex(syncWordIndex + 1)
+            }
+
+            // Mark that we need to update the segment
+            needsSegmentUpdateRef.current = true
+        }
+    }, [isManualSyncing, editedSegment, syncWordIndex, isSpacebarPressed, isPaused])
+
     const startManualSync = useCallback(() => {
         if (isManualSyncing) {
             cleanupManualSync()
@@ -430,6 +530,8 @@ export default function useManualSync({
         resumeManualSync,
         cleanupManualSync,
         handleSpacebar,
-        isSpacebarPressed
+        isSpacebarPressed,
+        handleTapStart,
+        handleTapEnd
     }
 } 

lyrics_transcriber/frontend/src/theme.ts

@@ -16,7 +16,7 @@ const darkColors = {
   action: {
     active: '#f8fafc',
     hover: 'rgba(248, 250, 252, 0.08)',
-    selected: 'rgba(249, 115, 22, 0.16)',
+    selected: 'rgba(255, 122, 204, 0.16)',
     disabled: '#64748b',
     disabledBackground: 'rgba(100, 116, 139, 0.12)',
   },
@@ -38,24 +38,26 @@ const lightColors = {
   action: {
     active: '#1e293b',
     hover: 'rgba(30, 41, 59, 0.08)',
-    selected: 'rgba(249, 115, 22, 0.16)',
+    selected: 'rgba(255, 122, 204, 0.16)',
     disabled: '#94a3b8',
     disabledBackground: 'rgba(148, 163, 184, 0.12)',
   },
 };
 
-// Shared colors
+// Shared colors - Nomad Karaoke brand palette
+// Primary: Brand Pink (#ff7acc), Secondary: Brand Purple (#8b5cf6)
+// See docs/BRAND-STYLE-GUIDE.md for full brand guidelines
 const sharedColors = {
   primary: {
-    main: '#f97316',
-    light: '#fb923c',
-    dark: '#ea580c',
+    main: '#ff7acc',
+    light: '#ff8fd4',
+    dark: '#ff5bb8',
     contrastText: '#ffffff',
   },
   secondary: {
-    main: '#6366f1',
-    light: '#818cf8',
-    dark: '#4f46e5',
+    main: '#8b5cf6',
+    light: '#a78bfa',
+    dark: '#7c3aed',
     contrastText: '#ffffff',
   },
   error: {
@@ -140,7 +142,7 @@ export function createAppTheme(mode: 'dark' | 'light'): Theme {
             borderColor: colors.divider,
             '&:hover': {
               borderColor: sharedColors.primary.main,
-              backgroundColor: 'rgba(249, 115, 22, 0.08)',
+              backgroundColor: 'rgba(255, 122, 204, 0.08)',
             },
           },
         },
@@ -158,19 +160,44 @@ export function createAppTheme(mode: 'dark' | 'light'): Theme {
       MuiTextField: {
         styleOverrides: {
           root: {
-            '& .MuiInputBase-root': { minHeight: '32px', backgroundColor: colors.background.default },
+            '& .MuiInputBase-root': {
+              minHeight: '32px',
+              backgroundColor: colors.background.default,
+            },
             '& .MuiOutlinedInput-root': {
+              backgroundColor: colors.background.default,
               '& fieldset': { borderColor: colors.divider },
               '&:hover fieldset': { borderColor: colors.text.secondary },
               '&.Mui-focused fieldset': { borderColor: sharedColors.primary.main },
             },
+            '& .MuiFilledInput-root': {
+              backgroundColor: colors.background.default,
+              '&:hover': { backgroundColor: colors.background.elevated },
+              '&.Mui-focused': { backgroundColor: colors.background.default },
+            },
+          },
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            backgroundColor: colors.background.default,
+          },
+          input: {
+            backgroundColor: 'transparent',
           },
         },
       },
       MuiInputBase: {
         styleOverrides: {
-          root: { color: colors.text.primary },
-          input: { '&::placeholder': { color: colors.text.disabled, opacity: 1 } },
+          root: {
+            color: colors.text.primary,
+            backgroundColor: colors.background.default,
+          },
+          input: {
+            '&::placeholder': { color: colors.text.disabled, opacity: 1 },
+            backgroundColor: 'transparent',
+          },
         },
       },
       MuiDialog: {
@@ -210,7 +237,7 @@ export function createAppTheme(mode: 'dark' | 'light'): Theme {
             '&:hover': { backgroundColor: colors.action.hover },
             '&.Mui-selected': {
               backgroundColor: colors.action.selected,
-              '&:hover': { backgroundColor: 'rgba(249, 115, 22, 0.24)' },
+              '&:hover': { backgroundColor: 'rgba(255, 122, 204, 0.24)' },
             },
           },
         },
@@ -288,7 +315,7 @@ export function createAppTheme(mode: 'dark' | 'light'): Theme {
             '&:hover': { backgroundColor: colors.action.hover },
             '&.Mui-selected': {
               backgroundColor: colors.action.selected,
-              '&:hover': { backgroundColor: 'rgba(249, 115, 22, 0.24)' },
+              '&:hover': { backgroundColor: 'rgba(255, 122, 204, 0.24)' },
             },
           },
         },

lyrics_transcriber/frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/api.ts","./src/main.tsx","./src/theme.ts","./src/types.ts","./src/validation.ts","./src/vite-env.d.ts","./src/components/aifeedbackmodal.tsx","./src/components/addlyricsmodal.tsx","./src/components/agenticcorrectionmetrics.tsx","./src/components/audioplayer.tsx","./src/components/correctedwordwithactions.tsx","./src/components/correctionannotationmodal.tsx","./src/components/correctiondetailcard.tsx","./src/components/correctionmetrics.tsx","./src/components/durationtimelineview.tsx","./src/components/editactionbar.tsx","./src/components/editmodal.tsx","./src/components/edittimelinesection.tsx","./src/components/editwordlist.tsx","./src/components/fileupload.tsx","./src/components/findreplacemodal.tsx","./src/components/header.tsx","./src/components/lyricsanalyzer.tsx","./src/components/metricsdashboard.tsx","./src/components/modeselectionmodal.tsx","./src/components/modeselector.tsx","./src/components/modelselector.tsx","./src/components/previewvideosection.tsx","./src/components/referenceview.tsx","./src/components/replacealllyricsmodal.tsx","./src/components/reviewchangesmodal.tsx","./src/components/segmentdetailsmodal.tsx","./src/components/timelineeditor.tsx","./src/components/timingoffsetmodal.tsx","./src/components/transcriptionview.tsx","./src/components/worddivider.tsx","./src/components/lyricssynchronizer/synccontrols.tsx","./src/components/lyricssynchronizer/timelinecanvas.tsx","./src/components/lyricssynchronizer/upcomingwordsbar.tsx","./src/components/lyricssynchronizer/index.tsx","./src/components/shared/constants.ts","./src/components/shared/styles.ts","./src/components/shared/types.ts","./src/components/shared/components/highlightedtext.tsx","./src/components/shared/components/sourceselector.tsx","./src/components/shared/components/word.tsx","./src/components/shared/hooks/usewordclick.ts","./src/components/shared/utils/keyboardhandlers.ts","./src/components/shared/utils/localstorage.ts","./src/components/shared/utils/referencelinecalculator.ts","./src/components/shared/utils/segmentoperations.ts","./src/components/shared/utils/timingutils.ts","./src/components/shared/utils/wordutils.ts","./src/hooks/usemanualsync.ts","./src/types/global.d.ts"],"version":"5.6.3"}
+{"root":["./src/app.tsx","./src/api.ts","./src/main.tsx","./src/theme.ts","./src/types.ts","./src/validation.ts","./src/vite-env.d.ts","./src/components/aifeedbackmodal.tsx","./src/components/addlyricsmodal.tsx","./src/components/agenticcorrectionmetrics.tsx","./src/components/appheader.tsx","./src/components/audioplayer.tsx","./src/components/correctedwordwithactions.tsx","./src/components/correctionannotationmodal.tsx","./src/components/correctiondetailcard.tsx","./src/components/correctionmetrics.tsx","./src/components/durationtimelineview.tsx","./src/components/editactionbar.tsx","./src/components/editmodal.tsx","./src/components/edittimelinesection.tsx","./src/components/editwordlist.tsx","./src/components/fileupload.tsx","./src/components/findreplacemodal.tsx","./src/components/header.tsx","./src/components/lyricsanalyzer.tsx","./src/components/metricsdashboard.tsx","./src/components/modeselectionmodal.tsx","./src/components/modeselector.tsx","./src/components/modelselector.tsx","./src/components/previewvideosection.tsx","./src/components/referenceview.tsx","./src/components/replacealllyricsmodal.tsx","./src/components/reviewchangesmodal.tsx","./src/components/segmentdetailsmodal.tsx","./src/components/timelineeditor.tsx","./src/components/timingoffsetmodal.tsx","./src/components/transcriptionview.tsx","./src/components/worddivider.tsx","./src/components/lyricssynchronizer/synccontrols.tsx","./src/components/lyricssynchronizer/timelinecanvas.tsx","./src/components/lyricssynchronizer/upcomingwordsbar.tsx","./src/components/lyricssynchronizer/index.tsx","./src/components/shared/constants.ts","./src/components/shared/styles.ts","./src/components/shared/types.ts","./src/components/shared/components/highlightedtext.tsx","./src/components/shared/components/sourceselector.tsx","./src/components/shared/components/word.tsx","./src/components/shared/hooks/usewordclick.ts","./src/components/shared/utils/keyboardhandlers.ts","./src/components/shared/utils/localstorage.ts","./src/components/shared/utils/referencelinecalculator.ts","./src/components/shared/utils/segmentoperations.ts","./src/components/shared/utils/timingutils.ts","./src/components/shared/utils/wordutils.ts","./src/hooks/usemanualsync.ts","./src/types/global.d.ts"],"version":"5.6.3"}

lyrics_transcriber/frontend/vite.config.js

@@ -3,6 +3,11 @@ import react from '@vitejs/plugin-react';
 // https://vite.dev/config/
 export default defineConfig({
     plugins: [react()],
+    server: {
+        port: 5173,
+        // Enable CORS for local development
+        cors: true,
+    },
     build: {
         minify: false,
         sourcemap: true,