File size: 3,602 Bytes
ff65064 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import React from 'react';
export interface SubtitleSegment {
id: number;
startTime: string;
endTime: string;
duration: string;
sourceText: string;
targetText?: string;
isCurrent?: boolean;
}
export interface VideoInfo {
title: string;
duration: string;
totalSegments: number;
currentSegment: number;
}
interface SubtitlingModuleProps {
videoInfo: VideoInfo;
subtitleSegments: SubtitleSegment[];
currentDisplayedSubtitle?: string;
onSegmentClick?: (id: number) => void;
getSegmentButtonClass?: (id: number) => string;
onPlayPause?: () => void;
isPlaying?: boolean;
onSaveSegment?: (id: number, text: string) => void;
}
/**
* Reusable subtitling interface template for future weeks.
* Not currently rendered in any page; kept for reuse.
*/
const SubtitlingModule: React.FC<SubtitlingModuleProps> = ({
videoInfo,
subtitleSegments,
currentDisplayedSubtitle,
onSegmentClick,
getSegmentButtonClass,
onPlayPause,
isPlaying,
}) => {
return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
<div className="mb-4">
<h3 className="text-xl font-bold text-gray-900 mb-2">{videoInfo.title}</h3>
</div>
<div className="bg-black rounded-lg aspect-video overflow-hidden relative">
<div className="absolute inset-0 flex items-center justify-center text-white/70 text-sm">Video Placeholder</div>
{currentDisplayedSubtitle && (
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10">
<div className="bg-black bg-opacity-80 text-white px-6 py-3 rounded-lg text-center max-w-lg">
<p className={`text-base font-medium leading-relaxed tracking-wide ${currentDisplayedSubtitle.length <= 42 ? 'whitespace-nowrap' : 'whitespace-pre-line'}`}>
{currentDisplayedSubtitle}
</p>
</div>
</div>
)}
</div>
</div>
<div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
<h3 className="text-xl font-bold text-gray-900 mb-4">Translation Workspace</h3>
<div className="grid grid-cols-9 gap-1 mb-6">
{subtitleSegments.map((segment) => (
<button
key={segment.id}
onClick={() => onSegmentClick && onSegmentClick(segment.id)}
className={`px-1 py-1 rounded text-xs w-full ${getSegmentButtonClass ? getSegmentButtonClass(segment.id) : ''}`}
>
{segment.id}
</button>
))}
</div>
<div className="flex items-center gap-2 mb-4">
<button onClick={onPlayPause} className="px-3 py-1.5 text-sm rounded-md border border-gray-300">
{isPlaying ? 'Pause' : 'Play'}
</button>
<div className="text-sm text-gray-600">{videoInfo.currentSegment}/{videoInfo.totalSegments}</div>
</div>
<div className="space-y-4">
{subtitleSegments.map(seg => (
<div key={seg.id} className="border border-gray-200 rounded-lg p-3">
<div className="text-xs text-gray-500 mb-1">{seg.startTime} → {seg.endTime} ({seg.duration})</div>
<div className="text-sm text-gray-800 mb-2">{seg.sourceText}</div>
<textarea className="w-full border border-gray-300 rounded p-2 text-sm" defaultValue={seg.targetText || ''} rows={2} />
</div>
))}
</div>
</div>
</div>
);
};
export default SubtitlingModule;
|