lyrics-transcriber 0.41.0__py3-none-any.whl → 0.42.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/PreviewVideoSection.tsx

@@ -0,0 +1,117 @@
+import { Box, Typography, CircularProgress, Alert, Button } from '@mui/material'
+import { useState, useEffect } from 'react'
+import { ApiClient } from '../api'
+import { CorrectionData } from '../types'
+
+interface PreviewVideoSectionProps {
+    apiClient: ApiClient | null
+    isModalOpen: boolean
+    updatedData: CorrectionData
+}
+
+export default function PreviewVideoSection({
+    apiClient,
+    isModalOpen,
+    updatedData
+}: PreviewVideoSectionProps) {
+    const [previewState, setPreviewState] = useState<{
+        status: 'loading' | 'ready' | 'error';
+        videoUrl?: string;
+        error?: string;
+    }>({ status: 'loading' });
+
+    // Generate preview when modal opens
+    useEffect(() => {
+        if (isModalOpen && apiClient) {
+            const generatePreview = async () => {
+                setPreviewState({ status: 'loading' });
+                try {
+                    const response = await apiClient.generatePreviewVideo(updatedData);
+
+                    if (response.status === 'error') {
+                        setPreviewState({
+                            status: 'error',
+                            error: response.message || 'Failed to generate preview video'
+                        });
+                        return;
+                    }
+
+                    if (!response.preview_hash) {
+                        setPreviewState({
+                            status: 'error',
+                            error: 'No preview hash received from server'
+                        });
+                        return;
+                    }
+
+                    const videoUrl = apiClient.getPreviewVideoUrl(response.preview_hash);
+                    setPreviewState({
+                        status: 'ready',
+                        videoUrl
+                    });
+                } catch (error) {
+                    setPreviewState({
+                        status: 'error',
+                        error: (error as Error).message || 'Failed to generate preview video'
+                    });
+                }
+            };
+
+            generatePreview();
+        }
+    }, [isModalOpen, apiClient, updatedData]);
+
+    if (!apiClient) return null;
+
+    return (
+        <Box sx={{ mb: 2 }}>
+            {previewState.status === 'loading' && (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, p: 2 }}>
+                    <CircularProgress size={24} />
+                    <Typography>Generating preview video...</Typography>
+                </Box>
+            )}
+
+            {previewState.status === 'error' && (
+                <Box sx={{ mb: 2 }}>
+                    <Alert
+                        severity="error"
+                        action={
+                            <Button
+                                color="inherit"
+                                size="small"
+                                onClick={() => {
+                                    // Re-trigger the effect by toggling isModalOpen
+                                    setPreviewState({ status: 'loading' });
+                                }}
+                            >
+                                Retry
+                            </Button>
+                        }
+                    >
+                        {previewState.error}
+                    </Alert>
+                </Box>
+            )}
+
+            {previewState.status === 'ready' && previewState.videoUrl && (
+                <Box sx={{
+                    width: '100%',
+                    margin: '0',
+                }}>
+                    <video
+                        controls
+                        src={previewState.videoUrl}
+                        style={{
+                            display: 'block',
+                            width: '100%',
+                            height: 'auto',
+                        }}
+                    >
+                        Your browser does not support the video tag.
+                    </video>
+                </Box>
+            )}
+        </Box>
+    );
+} 

lyrics_transcriber/frontend/src/components/ReferenceView.tsx

@@ -4,10 +4,11 @@ import { ReferenceViewProps } from './shared/types'
 import { calculateReferenceLinePositions } from './shared/utils/referenceLineCalculator'
 import { SourceSelector } from './shared/components/SourceSelector'
 import { HighlightedText } from './shared/components/HighlightedText'
-import { WordCorrection } from '@/types'
+import { TranscriptionWordPosition } from './shared/types'
+import { getWordsFromIds } from './shared/utils/wordUtils'
 
 export default function ReferenceView({
-    referenceTexts,
+    referenceSources,
     anchors,
     onElementClick,
     onWordClick,
@@ -17,58 +18,140 @@ export default function ReferenceView({
     onSourceChange,
     highlightInfo,
     mode,
-    gaps
+    gaps,
+    corrections
 }: ReferenceViewProps) {
-    // Get available sources from referenceTexts object
+    // Get available sources from referenceSources object
     const availableSources = useMemo(() =>
-        Object.keys(referenceTexts) as Array<string>,
-        [referenceTexts]
+        Object.keys(referenceSources),
+        [referenceSources]
     )
 
+    // Ensure we always have a valid currentSource
+    const effectiveCurrentSource = useMemo(() =>
+        currentSource || (availableSources.length > 0 ? availableSources[0] : ''),
+        [currentSource, availableSources]
+    )
+
+    // Create word positions for the reference view
+    const referenceWordPositions = useMemo(() => {
+        const positions: TranscriptionWordPosition[] = [];
+        const allPositions = new Map<number, TranscriptionWordPosition[]>();
+
+        // Map anchor words
+        anchors?.forEach(anchor => {
+            const position = anchor.reference_positions[effectiveCurrentSource];
+            if (position === undefined) return;
+
+            if (!allPositions.has(position)) {
+                allPositions.set(position, []);
+            }
+
+            const referenceWords = getWordsFromIds(
+                referenceSources[effectiveCurrentSource].segments,
+                anchor.reference_word_ids[effectiveCurrentSource] || []
+            );
+
+            referenceWords.forEach(word => {
+                const wordPosition: TranscriptionWordPosition = {
+                    word: {
+                        id: word.id,
+                        text: word.text,
+                        start_time: word.start_time ?? undefined,
+                        end_time: word.end_time ?? undefined
+                    },
+                    type: 'anchor',
+                    sequence: anchor,
+                    isInRange: true
+                };
+                allPositions.get(position)!.push(wordPosition);
+            });
+        });
+
+        // Map gap words
+        gaps?.forEach(gap => {
+            const precedingAnchor = gap.preceding_anchor_id ?
+                anchors?.find(a => a.id === gap.preceding_anchor_id) :
+                undefined;
+            const followingAnchor = gap.following_anchor_id ?
+                anchors?.find(a => a.id === gap.following_anchor_id) :
+                undefined;
+
+            const position = precedingAnchor?.reference_positions[effectiveCurrentSource] ??
+                followingAnchor?.reference_positions[effectiveCurrentSource];
+
+            if (position === undefined) return;
+
+            const gapPosition = precedingAnchor ? position + 1 : position - 1;
+
+            if (!allPositions.has(gapPosition)) {
+                allPositions.set(gapPosition, []);
+            }
+
+            const referenceWords = getWordsFromIds(
+                referenceSources[effectiveCurrentSource].segments,
+                gap.reference_word_ids[effectiveCurrentSource] || []
+            );
+
+            referenceWords.forEach(word => {
+                // Find if this word has a correction
+                const isWordCorrected = corrections?.some(correction =>
+                    correction.reference_positions?.[effectiveCurrentSource]?.toString() === word.id &&
+                    gap.transcribed_word_ids.includes(correction.word_id)
+                );
+
+                const wordPosition: TranscriptionWordPosition = {
+                    word: {
+                        id: word.id,
+                        text: word.text,
+                        start_time: word.start_time ?? undefined,
+                        end_time: word.end_time ?? undefined
+                    },
+                    type: 'gap',
+                    sequence: gap,
+                    isInRange: true,
+                    isCorrected: isWordCorrected
+                };
+                allPositions.get(gapPosition)!.push(wordPosition);
+            });
+        });
+
+        // Sort by position and flatten
+        Array.from(allPositions.entries())
+            .sort(([a], [b]) => a - b)
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            .forEach(([_, words]) => {
+                positions.push(...words);
+            });
+
+        return positions;
+    }, [anchors, gaps, effectiveCurrentSource, referenceSources, corrections]);
+
     const { linePositions } = useMemo(() =>
         calculateReferenceLinePositions(
             corrected_segments,
             anchors,
-            currentSource
+            effectiveCurrentSource
         ),
-        [corrected_segments, anchors, currentSource]
+        [corrected_segments, anchors, effectiveCurrentSource]
     )
 
     // Create a mapping of reference words to their corrections
     const referenceCorrections = useMemo(() => {
-        const corrections = new Map<string, string>();
-
-        console.log('Building referenceCorrections map:', {
-            gapsCount: gaps.length,
-            currentSource,
-        });
+        const correctionMap = new Map<string, string>();
 
-        gaps.forEach(gap => {
-            gap.corrections.forEach((correction: WordCorrection) => {
-                // Get the reference position for this correction
-                const referencePosition = correction.reference_positions?.[currentSource];
-
-                if (typeof referencePosition === 'number') {
-                    const wordId = `${currentSource}-word-${referencePosition}`;
-                    corrections.set(wordId, correction.corrected_word);
-
-                    console.log('Adding correction mapping:', {
-                        wordId,
-                        correctedWord: correction.corrected_word,
-                        referencePosition,
-                        correction
-                    });
-                }
-            });
+        corrections?.forEach(correction => {
+            const referencePosition = correction.reference_positions?.[effectiveCurrentSource];
+            if (referencePosition !== undefined) {
+                correctionMap.set(referencePosition.toString(), correction.corrected_word);
+            }
         });
 
-        console.log('Final referenceCorrections map:', {
-            size: corrections.size,
-            entries: Array.from(corrections.entries())
-        });
+        return correctionMap;
+    }, [corrections, effectiveCurrentSource]);
 
-        return corrections;
-    }, [gaps, currentSource]);
+    // Get the segments for the current source
+    const currentSourceSegments = referenceSources[effectiveCurrentSource]?.segments || [];
 
     return (
         <Paper sx={{ p: 2 }}>
@@ -77,14 +160,15 @@ export default function ReferenceView({
                     Reference Text
                 </Typography>
                 <SourceSelector
-                    currentSource={currentSource}
+                    currentSource={effectiveCurrentSource}
                     onSourceChange={onSourceChange}
                     availableSources={availableSources}
                 />
             </Box>
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                 <HighlightedText
-                    text={referenceTexts[currentSource]}
+                    wordPositions={referenceWordPositions}
+                    segments={currentSourceSegments}
                     anchors={anchors}
                     onElementClick={onElementClick}
                     onWordClick={onWordClick}
@@ -92,10 +176,11 @@ export default function ReferenceView({
                     highlightInfo={highlightInfo}
                     mode={mode}
                     isReference={true}
-                    currentSource={currentSource}
+                    currentSource={effectiveCurrentSource}
                     linePositions={linePositions}
                     referenceCorrections={referenceCorrections}
                     gaps={gaps}
+                    preserveSegments={true}
                 />
             </Box>
         </Paper>