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

lyrics_transcriber/frontend/src/components/PreviewVideoSection.tsx

@@ -0,0 +1,120 @@
+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
+    videoRef?: React.RefObject<HTMLVideoElement>
+}
+
+export default function PreviewVideoSection({
+    apiClient,
+    isModalOpen,
+    updatedData,
+    videoRef
+}: 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
+                        ref={videoRef}
+                        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

@@ -1,13 +1,29 @@
 import { useMemo } from 'react'
-import { Paper, Typography, Box } from '@mui/material'
+import { Paper, Typography, Box, IconButton } from '@mui/material'
 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'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import { styled } from '@mui/material/styles'
+
+const SegmentControls = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    paddingTop: '3px',
+    paddingRight: '8px'
+})
+
+const TextContainer = styled(Box)({
+    flex: 1,
+    minWidth: 0,
+})
 
 export default function ReferenceView({
-    referenceTexts,
+    referenceSources,
     anchors,
     onElementClick,
     onWordClick,
@@ -17,58 +33,145 @@ 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>();
+        const correctionMap = new Map<string, string>();
 
-        console.log('Building referenceCorrections map:', {
-            gapsCount: gaps.length,
-            currentSource,
+        corrections?.forEach(correction => {
+            const referencePosition = correction.reference_positions?.[effectiveCurrentSource];
+            if (referencePosition !== undefined) {
+                correctionMap.set(referencePosition.toString(), correction.corrected_word);
+            }
         });
 
-        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
-                    });
-                }
-            });
-        });
+        return correctionMap;
+    }, [corrections, effectiveCurrentSource]);
 
-        console.log('Final referenceCorrections map:', {
-            size: corrections.size,
-            entries: Array.from(corrections.entries())
-        });
+    // Get the segments for the current source
+    const currentSourceSegments = referenceSources[effectiveCurrentSource]?.segments || [];
 
-        return corrections;
-    }, [gaps, currentSource]);
+    // Helper function to copy text to clipboard
+    const copyToClipboard = (text: string) => {
+        navigator.clipboard.writeText(text);
+    };
 
     return (
         <Paper sx={{ p: 2 }}>
@@ -77,26 +180,45 @@ 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]}
-                    anchors={anchors}
-                    onElementClick={onElementClick}
-                    onWordClick={onWordClick}
-                    flashingType={flashingType}
-                    highlightInfo={highlightInfo}
-                    mode={mode}
-                    isReference={true}
-                    currentSource={currentSource}
-                    linePositions={linePositions}
-                    referenceCorrections={referenceCorrections}
-                    gaps={gaps}
-                />
+                {currentSourceSegments.map((segment, index) => (
+                    <Box key={index} sx={{ display: 'flex', alignItems: 'flex-start', width: '100%' }}>
+                        <SegmentControls>
+                            <IconButton
+                                size="small"
+                                onClick={() => copyToClipboard(segment.words.map(w => w.text).join(' '))}
+                                sx={{ padding: '2px' }}
+                            >
+                                <ContentCopyIcon fontSize="small" />
+                            </IconButton>
+                        </SegmentControls>
+                        <TextContainer>
+                            <HighlightedText
+                                wordPositions={referenceWordPositions.filter(wp => 
+                                    segment.words.some(w => w.id === wp.word.id)
+                                )}
+                                segments={[segment]}
+                                anchors={anchors}
+                                onElementClick={onElementClick}
+                                onWordClick={onWordClick}
+                                flashingType={flashingType}
+                                highlightInfo={highlightInfo}
+                                mode={mode}
+                                isReference={true}
+                                currentSource={effectiveCurrentSource}
+                                linePositions={linePositions}
+                                referenceCorrections={referenceCorrections}
+                                gaps={gaps}
+                                preserveSegments={true}
+                            />
+                        </TextContainer>
+                    </Box>
+                ))}
             </Box>
         </Paper>
     )