karaoke-gen 0.75.54__py3-none-any.whl

lyrics_transcriber/frontend/src/components/shared/hooks/useWordClick.ts

@@ -0,0 +1,180 @@
+import { useCallback } from 'react'
+import { AnchorSequence, GapSequence, InteractionMode, WordCorrection } from '../../../types'
+import { ModalContent } from '../../LyricsAnalyzer'
+import { WordClickInfo } from '../types'
+
+export interface UseWordClickProps {
+    mode: InteractionMode
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    isReference?: boolean
+    currentSource?: string
+    gaps?: GapSequence[]
+    anchors?: AnchorSequence[]
+    corrections?: WordCorrection[]
+}
+
+export function useWordClick({
+    mode,
+    onElementClick,
+    onWordClick,
+    isReference = false,
+    currentSource = '',
+    gaps = [],
+    anchors = [],
+    corrections = []
+}: UseWordClickProps) {
+    const handleWordClick = useCallback((
+        word: string,
+        wordId: string,
+        anchor?: AnchorSequence,
+        gap?: GapSequence
+    ) => {
+        // Check if word belongs to anchor
+        const belongsToAnchor = anchor && (
+            isReference
+                ? anchor.reference_word_ids[currentSource]?.includes(wordId)
+                : anchor.transcribed_word_ids.includes(wordId)
+        )
+
+        // Find matching gap if not provided
+        const matchingGap = gap || gaps.find(g =>
+            g.transcribed_word_ids.includes(wordId) ||
+            Object.values(g.reference_word_ids).some(ids => ids.includes(wordId))
+        )
+
+        // Check if word belongs to gap - include both original and corrected words
+        const belongsToGap = matchingGap && (
+            isReference
+                ? matchingGap.reference_word_ids[currentSource]?.includes(wordId)
+                : (matchingGap.transcribed_word_ids.includes(wordId) ||
+                    corrections.some(c =>
+                        c.corrected_word_id === wordId ||
+                        c.word_id === wordId
+                    ))
+        )
+
+        // Debug info
+        console.log('Word Click Debug:', {
+            clickInfo: {
+                word,
+                wordId,
+                isReference,
+                currentSource,
+                mode
+            },
+            anchorInfo: anchor && {
+                id: anchor.id,
+                transcribedWordIds: anchor.transcribed_word_ids,
+                referenceWordIds: anchor.reference_word_ids,
+                belongsToAnchor
+            },
+            gapInfo: matchingGap && {
+                id: matchingGap.id,
+                transcribedWordIds: matchingGap.transcribed_word_ids,
+                referenceWordIds: matchingGap.reference_word_ids,
+                belongsToGap,
+                relatedCorrections: corrections.filter(c =>
+                    matchingGap.transcribed_word_ids.includes(c.word_id) ||
+                    c.corrected_word_id === wordId ||
+                    c.word_id === wordId
+                )
+            }
+        })
+
+        // For reference view clicks, find the corresponding gap
+        if (isReference && currentSource) {
+            const matchingGap = gaps?.find(g =>
+                g.reference_word_ids[currentSource]?.includes(wordId)
+            )
+
+            if (matchingGap) {
+                console.log('Found matching gap for reference click:', {
+                    wordId,
+                    gap: matchingGap
+                })
+                gap = matchingGap
+            }
+        }
+
+        if (mode === 'highlight' || mode === 'edit' || mode === 'delete_word') {
+            if (belongsToAnchor && anchor) {
+                onWordClick?.({
+                    word_id: wordId,
+                    type: 'anchor',
+                    anchor,
+                    gap: undefined
+                })
+            } else if (belongsToGap && gap) {
+                onWordClick?.({
+                    word_id: wordId,
+                    type: 'gap',
+                    anchor: undefined,
+                    gap
+                })
+            } else if (corrections.some(c => 
+                (c.corrected_word_id === wordId || c.word_id === wordId) &&
+                gap?.transcribed_word_ids.includes(c.word_id)
+            )) {
+                // If the word is part of a correction, mark it as a gap
+                onWordClick?.({
+                    word_id: wordId,
+                    type: 'gap',
+                    anchor: undefined,
+                    gap
+                })
+            } else {
+                onWordClick?.({
+                    word_id: wordId,
+                    type: 'other',
+                    anchor: undefined,
+                    gap: undefined
+                })
+            }
+        } else {
+            // This is a fallback for any future modes
+            if (belongsToAnchor && anchor) {
+                onElementClick({
+                    type: 'anchor',
+                    data: {
+                        ...anchor,
+                        wordId,
+                        word,
+                        anchor_sequences: anchors
+                    }
+                })
+            } else if (belongsToGap && gap) {
+                onElementClick({
+                    type: 'gap',
+                    data: {
+                        ...gap,
+                        wordId,
+                        word,
+                        anchor_sequences: anchors
+                    }
+                })
+            } else if (!isReference) {
+                // Create synthetic gap for non-sequence words (transcription view only)
+                const syntheticGap: GapSequence = {
+                    id: `synthetic-${wordId}`,
+                    transcribed_word_ids: [wordId],
+                    transcription_position: -1,
+                    preceding_anchor_id: null,
+                    following_anchor_id: null,
+                    reference_word_ids: {}
+                }
+                onElementClick({
+                    type: 'gap',
+                    data: {
+                        ...syntheticGap,
+                        wordId,
+                        word,
+                        anchor_sequences: anchors
+                    }
+                })
+            }
+        }
+    }, [mode, onWordClick, onElementClick, isReference, currentSource, gaps, anchors, corrections])
+
+    return { handleWordClick }
+} 

lyrics_transcriber/frontend/src/components/shared/styles.ts

@@ -0,0 +1,13 @@
+import { styled } from '@mui/system'
+import { flashAnimation } from './constants'
+
+export const HighlightedWord = styled('span')<{ shouldFlash: boolean }>(
+    ({ shouldFlash }) => ({
+        display: 'inline-block',
+        marginRight: '0.25em',
+        transition: 'background-color 0.2s ease',
+        ...(shouldFlash && {
+            animation: `${flashAnimation} 0.4s ease-in-out 3`,
+        }),
+    })
+) 

lyrics_transcriber/frontend/src/components/shared/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

lyrics_transcriber/frontend/src/components/shared/types.ts

@@ -0,0 +1,129 @@
+import { AnchorSequence, GapSequence, HighlightInfo, InteractionMode, CorrectionData, LyricsSegment, ReferenceSource, WordCorrection } from '../../types'
+import { ModalContent } from '../LyricsAnalyzer'
+
+// Add FlashType definition directly in shared types
+export type FlashType = 'anchor' | 'corrected' | 'uncorrected' | 'word' | 'handler' | null
+
+// Common word click handling
+export interface WordClickInfo {
+    word_id: string
+    type: 'anchor' | 'gap' | 'other'
+    anchor?: AnchorSequence
+    gap?: GapSequence
+}
+
+// Base props shared between components
+export interface BaseViewProps {
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    flashingType: FlashType
+    highlightInfo: HighlightInfo | null
+    mode: InteractionMode
+}
+
+// Base word position interface - remove the word property from here
+export interface BaseWordPosition {
+    type: 'anchor' | 'gap' | 'other'
+    sequence?: AnchorSequence | GapSequence
+}
+
+// Transcription-specific word position with timing info
+export interface TranscriptionWordPosition extends BaseWordPosition {
+    word: {
+        id: string
+        text: string
+        start_time?: number
+        end_time?: number
+    }
+    type: 'anchor' | 'gap' | 'other'
+    sequence?: AnchorSequence | GapSequence
+    isInRange: boolean
+    isCorrected?: boolean
+}
+
+// Reference-specific word position with simple string word
+export interface ReferenceWordPosition extends BaseWordPosition {
+    index: number
+    isHighlighted: boolean
+    word: string  // Simple string word for reference view
+}
+
+// Word component props
+export interface WordProps {
+    word: string
+    shouldFlash: boolean
+    isAnchor?: boolean
+    isCorrectedGap?: boolean
+    isUncorrectedGap?: boolean
+    isCurrentlyPlaying?: boolean
+    padding?: string
+    onClick?: () => void
+    correction?: {
+        originalWord: string
+        handler: string
+        confidence: number
+        source: string
+        reason?: string
+    } | null
+}
+
+// Text segment props
+export interface TextSegmentProps extends BaseViewProps {
+    wordPositions: TranscriptionWordPosition[] | ReferenceWordPosition[]
+}
+
+// View-specific props
+export interface TranscriptionViewProps {
+    data: CorrectionData
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    flashingType: FlashType
+    highlightInfo: HighlightInfo | null
+    mode: InteractionMode
+    onPlaySegment?: (startTime: number) => void
+    currentTime?: number
+    anchors?: AnchorSequence[]
+    flashingHandler?: string | null
+    onDataChange?: (updatedData: CorrectionData) => void
+}
+
+// Add LinePosition type here since it's used in multiple places
+export interface LinePosition {
+    position: number
+    lineNumber: number
+    isEmpty?: boolean
+}
+
+// Reference-specific props
+export interface ReferenceViewProps extends BaseViewProps {
+    referenceSources: Record<string, ReferenceSource>
+    anchors: CorrectionData['anchor_sequences']
+    gaps: CorrectionData['gap_sequences']
+    currentSource: string
+    onSourceChange: (source: string) => void
+    corrected_segments: LyricsSegment[]
+    corrections: WordCorrection[]
+    onAddLyrics?: () => void
+}
+
+// Update HighlightedTextProps to include linePositions
+export interface HighlightedTextProps extends BaseViewProps {
+    text?: string
+    segments?: LyricsSegment[]
+    wordPositions: TranscriptionWordPosition[] | ReferenceWordPosition[]
+    anchors: AnchorSequence[]
+    highlightInfo: HighlightInfo | null
+    mode: InteractionMode
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    flashingType: FlashType
+    isReference?: boolean
+    currentSource?: string
+    preserveSegments?: boolean
+    linePositions?: LinePosition[]
+    currentTime?: number
+    referenceCorrections?: Map<string, string>
+    gaps?: GapSequence[]
+    flashingHandler?: string | null
+    corrections?: WordCorrection[]
+} 

lyrics_transcriber/frontend/src/components/shared/utils/keyboardHandlers.ts

@@ -0,0 +1,177 @@
+// Add a global ref for the modal handler
+let currentModalHandler: ((e: KeyboardEvent) => void) | undefined
+let isModalOpen = false
+const debugLog = false
+
+type KeyboardState = {
+    setIsShiftPressed: (value: boolean) => void
+    setIsCtrlPressed?: (value: boolean) => void
+    modalHandler?: {
+        isOpen: boolean
+        onSpacebar?: (e: KeyboardEvent) => void
+    }
+}
+
+// Add functions to update the modal handler state
+export const setModalHandler = (handler: ((e: KeyboardEvent) => void) | undefined, open: boolean) => {
+    if (debugLog) {
+        console.log('setModalHandler called', {
+            hasHandler: !!handler,
+            open,
+            previousState: {
+                hadHandler: !!currentModalHandler,
+                wasOpen: isModalOpen
+            }
+        })
+    }
+
+    currentModalHandler = handler
+    isModalOpen = open
+}
+
+export const setupKeyboardHandlers = (state: KeyboardState) => {
+    const handlerId = Math.random().toString(36).substr(2, 9)
+    if (debugLog) {
+        console.log(`Setting up keyboard handlers [${handlerId}]`)
+    }
+
+    // Function to reset modifier key states
+    const resetModifierStates = () => {
+        if (debugLog) {
+            console.log(`Resetting modifier states [${handlerId}]`)
+        }
+        state.setIsShiftPressed(false)
+        state.setIsCtrlPressed?.(false)
+        document.body.style.userSelect = ''
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+        if (debugLog) {
+            console.log(`Keyboard event captured [${handlerId}]`, {
+                key: e.key,
+                code: e.code,
+                type: e.type,
+                target: e.target,
+                currentTarget: e.currentTarget,
+                eventPhase: e.eventPhase,
+                isModalOpen,
+                hasModalHandler: !!currentModalHandler
+            })
+        }
+
+        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+            if (debugLog) {
+                console.log(`[${handlerId}] Ignoring keydown in input/textarea`)
+            }
+            return
+        }
+
+        if (e.key === 'Shift') {
+            state.setIsShiftPressed(true)
+            document.body.style.userSelect = 'none'
+        } else if (e.key === 'Control' || e.key === 'Ctrl' || e.key === 'Meta') {
+            state.setIsCtrlPressed?.(true)
+        } else if (e.key === ' ' || e.code === 'Space') {
+            if (debugLog) {
+                console.log('Keyboard handler - Spacebar pressed down', {
+                    modalOpen: isModalOpen,
+                    hasModalHandler: !!currentModalHandler,
+                    hasGlobalToggle: !!window.toggleAudioPlayback,
+                    target: e.target,
+                    eventPhase: e.eventPhase,
+                    handlerFunction: currentModalHandler?.toString().slice(0, 100)
+                })
+            }
+
+            e.preventDefault()
+
+            if (isModalOpen && currentModalHandler) {
+                currentModalHandler(e)
+            } else if (window.toggleAudioPlayback && !isModalOpen) {
+                if (debugLog) {
+                    console.log('Keyboard handler - Using global audio toggle')
+                }
+                window.toggleAudioPlayback()
+            }
+        }
+    }
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+        if (debugLog) {
+            console.log(`Keyboard up event captured [${handlerId}]`, {
+                key: e.key,
+                code: e.code,
+                type: e.type,
+                target: e.target,
+                eventPhase: e.eventPhase,
+                isModalOpen,
+                hasModalHandler: !!currentModalHandler
+            })
+        }
+
+        // Ignore keyup events in input and textarea elements
+        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+            if (debugLog) {
+                console.log(`[${handlerId}] Ignoring keyup in input/textarea`)
+            }
+            return
+        }
+
+        // Always reset the modifier states regardless of the key which was released
+        // to help prevent accidentally getting stuck in a mode or accidentally deleting words
+        resetModifierStates()
+        
+        if (e.key === ' ' || e.code === 'Space') {
+            if (debugLog) {
+                console.log('Keyboard handler - Spacebar released', {
+                    modalOpen: isModalOpen,
+                    hasModalHandler: !!currentModalHandler,
+                    target: e.target,
+                    eventPhase: e.eventPhase
+                })
+            }
+
+            e.preventDefault()
+
+            if (isModalOpen && currentModalHandler) {
+                currentModalHandler(e)
+            }
+        }
+    }
+
+    // Handle window blur event (user switches tabs or apps)
+    const handleWindowBlur = () => {
+        if (debugLog) {
+            console.log(`Window blur detected [${handlerId}], resetting modifier states`)
+        }
+        resetModifierStates()
+    }
+
+    // Handle window focus event (user returns to the app)
+    const handleWindowFocus = () => {
+        if (debugLog) {
+            console.log(`Window focus detected [${handlerId}], ensuring modifier states are reset`)
+        }
+        resetModifierStates()
+    }
+
+    // Add window event listeners
+    window.addEventListener('blur', handleWindowBlur)
+    window.addEventListener('focus', handleWindowFocus)
+
+    // Return a cleanup function that includes removing the window event listeners
+    return { 
+        handleKeyDown, 
+        handleKeyUp,
+        cleanup: () => {
+            window.removeEventListener('blur', handleWindowBlur)
+            window.removeEventListener('focus', handleWindowFocus)
+        }
+    }
+}
+
+// Export these for external use
+export const getModalState = () => ({
+    currentModalHandler,
+    isModalOpen
+}) 

lyrics_transcriber/frontend/src/components/shared/utils/localStorage.ts

@@ -0,0 +1,78 @@
+import { CorrectionData, LyricsSegment } from '../../../types'
+
+// Change the key generation to use a hash of the first segment's text instead
+export const generateStorageKey = (data: CorrectionData): string => {
+    const text = data.original_segments[0]?.text || ''
+    let hash = 0
+    for (let i = 0; i < text.length; i++) {
+        const char = text.charCodeAt(i)
+        hash = ((hash << 5) - hash) + char
+        hash = hash & hash // Convert to 32-bit integer
+    }
+    return `song_${hash}`
+}
+
+const stripIds = (obj: CorrectionData): LyricsSegment[] => {
+    const clone = JSON.parse(JSON.stringify(obj))
+    return clone.corrected_segments.map((segment: LyricsSegment) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { id: _id, ...strippedSegment } = segment
+        return {
+            ...strippedSegment,
+            words: segment.words.map(word => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { id: _wordId, ...strippedWord } = word
+                return strippedWord
+            })
+        }
+    })
+}
+
+export const loadSavedData = (initialData: CorrectionData): CorrectionData | null => {
+    const storageKey = generateStorageKey(initialData)
+    const savedDataStr = localStorage.getItem('lyrics_analyzer_data')
+    const savedDataObj = savedDataStr ? JSON.parse(savedDataStr) : {}
+
+    if (savedDataObj[storageKey]) {
+        try {
+            const parsed = savedDataObj[storageKey]
+            // Compare first segment text instead of transcribed_text
+            if (parsed.original_segments[0]?.text === initialData.original_segments[0]?.text) {
+                const strippedSaved = stripIds(parsed)
+                const strippedInitial = stripIds(initialData)
+                const hasChanges = JSON.stringify(strippedSaved) !== JSON.stringify(strippedInitial)
+
+                if (hasChanges) {
+                    return parsed
+                } else {
+                    // Clean up storage if no changes
+                    delete savedDataObj[storageKey]
+                    localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj))
+                }
+            }
+        } catch (error) {
+            console.error('Failed to parse saved data:', error)
+            delete savedDataObj[storageKey]
+            localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj))
+        }
+    }
+    return null
+}
+
+export const saveData = (data: CorrectionData, initialData: CorrectionData): void => {
+    const storageKey = generateStorageKey(initialData)
+    const savedDataStr = localStorage.getItem('lyrics_analyzer_data')
+    const savedDataObj = savedDataStr ? JSON.parse(savedDataStr) : {}
+
+    savedDataObj[storageKey] = data
+    localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj))
+}
+
+export const clearSavedData = (data: CorrectionData): void => {
+    const storageKey = generateStorageKey(data)
+    const savedDataStr = localStorage.getItem('lyrics_analyzer_data')
+    const savedDataObj = savedDataStr ? JSON.parse(savedDataStr) : {}
+
+    delete savedDataObj[storageKey]
+    localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj))
+} 

lyrics_transcriber/frontend/src/components/shared/utils/referenceLineCalculator.ts

@@ -0,0 +1,75 @@
+import { AnchorSequence, LyricsSegment } from '../../../types'
+import { LinePosition } from '../types'
+
+export function calculateReferenceLinePositions(
+    corrected_segments: LyricsSegment[],
+    anchors: AnchorSequence[],
+    currentSource: string
+): { linePositions: LinePosition[] } {
+    const linePositions: LinePosition[] = []
+    let currentReferencePosition = 0
+
+    // First, find all anchor sequences that cover entire lines
+    const fullLineAnchors = anchors?.map(anchor => {
+        // Check if we have reference word IDs for this source
+        const referenceWordIds = anchor.reference_word_ids[currentSource]
+        if (!referenceWordIds?.length) return null
+
+        return {
+            referenceWordIds,
+            transcriptionLine: corrected_segments.findIndex((segment) => {
+                const wordIds = segment.words.map(w => w.id)
+                if (!wordIds.length) return false
+
+                // Check if all word IDs in this segment are part of the anchor's transcribed word IDs
+                return wordIds.every(id =>
+                    anchor.transcribed_word_ids.includes(id)
+                )
+            })
+        }
+    })?.filter((a): a is NonNullable<typeof a> => a !== null) ?? []
+
+    // Sort by first reference word ID to process in order
+    fullLineAnchors.sort((a, b) => {
+        const firstIdA = a.referenceWordIds[0]
+        const firstIdB = b.referenceWordIds[0]
+        return firstIdA.localeCompare(firstIdB)
+    })
+
+    // Add line positions with padding
+    let currentLine = 0
+    fullLineAnchors.forEach(anchor => {
+        // Add empty lines if needed to match transcription line number
+        while (currentLine < anchor.transcriptionLine) {
+            linePositions.push({
+                position: currentReferencePosition,
+                lineNumber: currentLine,
+                isEmpty: false
+            })
+            currentReferencePosition += 1
+            currentLine++
+        }
+
+        // Add the actual line position
+        linePositions.push({
+            position: currentReferencePosition,
+            lineNumber: currentLine,
+            isEmpty: false
+        })
+        currentLine++
+        currentReferencePosition++
+    })
+
+    // Add any remaining lines after the last anchor
+    while (currentLine < corrected_segments.length) {
+        linePositions.push({
+            position: currentReferencePosition,
+            lineNumber: currentLine,
+            isEmpty: false
+        })
+        currentReferencePosition += 1
+        currentLine++
+    }
+
+    return { linePositions }
+}