import React, { useState } from 'react';
const App = () => {
const [videoUrl, setVideoUrl] = useState('');
const [isProcessing, setIsProcessing] = useState(false);
const [subtitles, setSubtitles] = useState([]);
const [error, setError] = useState('');
const handleTranslate = async (e) => {
e.preventDefault();
if (!videoUrl.trim()) {
setError('يرجى إدخال رابط الفيديو');
return;
}
setIsProcessing(true);
setError('');
// محاكاة عملية الترجمة
setTimeout(() => {
// بيانات وهمية للترجمة
const mockSubtitles = [
{ time: '00:00:00,000 --> 00:00:04,000', text: 'مرحبا بكم في هذا الفيديو التعليمي' },
{ time: '00:00:04,500 --> 00:00:08,200', text: 'سنتعلم اليوم كيفية استخدام هذا التطبيق الرائع' },
{ time: '00:00:08,500 --> 00:00:12,800', text: 'التطبيق يساعدك على ترجمة الفيديوهات تلقائياً' },
{ time: '00:00:13,000 --> 00:00:17,500', text: 'كل ما عليك فعله هو لصق رابط الفيديو في المربع أعلاه' },
{ time: '00:00:18,000 --> 00:00:22,300', text: 'ثم الضغط على زر "ترجم الفيديو"' },
{ time: '00:00:22,500 --> 00:00:26,800', text: 'سيقوم النظام بتحليل الفيديو واستخراج الصوت' },
{ time: '00:00:27,000 --> 00:00:31,200', text: 'ثم ترجمة النص إلى اللغة التي تختارها' },
{ time: '00:00:31,500 --> 00:00:35,800', text: 'ستحصل على الترجمة مع التوقيت المناسب لكل جملة' },
{ time: '00:00:36,000 --> 00:00:40,500', text: 'يمكنك تنزيل الترجمة بصيغة SRT أو TXT' },
{ time: '00:00:41,000 --> 00:00:45,200', text: 'شكراً لاستخدامك هذا التطبيق، نتمنى لك تجربة ممتعة' }
];
setSubtitles(mockSubtitles);
setIsProcessing(false);
}, 3000);
};
const downloadSubtitles = (format) => {
let content = '';
if (format === 'srt') {
subtitles.forEach((subtitle, index) => {
content += `${index + 1}\n${subtitle.time}\n${subtitle.text}\n\n`;
});
} else {
subtitles.forEach(subtitle => {
content += `${subtitle.time} - ${subtitle.text}\n`;
});
}
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `subtitles.${format}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
return (
{/* Header */}
بوت ترجمة الفيديو
أدخل رابط الفيديو واحصل على الترجمة مع التوقيت
{/* Video URL Input */}
{/* Processing Indicator */}
{isProcessing && (
جاري معالجة الفيديو واستخراج الترجمة...
)}
{/* Subtitles Display */}
{subtitles.length > 0 && (
الترجمة
downloadSubtitles('srt')}
className="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200"
>
تنزيل بصيغة SRT
downloadSubtitles('txt')}
className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200"
>
تنزيل بصيغة TXT
{subtitles.map((subtitle, index) => (
{subtitle.time}
#{index + 1}
{subtitle.text}
))}
)}
{/* Instructions */}
{!isProcessing && subtitles.length === 0 && (
كيفية الاستخدام
1
أدخل الرابط
ألصق رابط الفيديو من YouTube أو أي منصة أخرى
2
ابدأ الترجمة
اضغط على زر "ترجم الفيديو" وانتظر قليلاً
3
احصل على النتيجة
شاهد الترجمة مع التوقيت وقم بتنزيلها بالصيغة التي تريدها
)}
);
};
export default App;
