Hamza/saqel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(curriculum): restore video player, organize math & english labs hierarchically, add scoped audio and interactive grammar mind maps

Browse Source
This commit is contained in:
Hamza-Ayed
2026-09-05 00:33:45 +03:00
parent b0c2bfc03b
commit 368f68cc97
9 changed files with 2939 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/student_app/lib/presentation/screens/curriculum/curriculum_document_viewer_screen.dart
+297 -36
View File
@@ -6,7 +6,7 @@ import '../../../core/theme/app_colors.dart';
import '../../../core/utils/saqel_toast.dart';
import '../../../data/datasources/curriculum_baked_data.dart';
import '../../widgets/luxury_widgets.dart';
import '../../widgets/english_tts_player_widget.dart';
import '../../widgets/interactive_english_passage_view.dart';
import 'physics_interactive_lab_view.dart';
import 'math_interactive_lab_view.dart';
import 'english_interactive_lab_view.dart';
@@ -227,6 +227,12 @@ class _CurriculumDocumentViewerScreenState extends State<CurriculumDocumentViewe
),
centerTitle: true,
actions: [
if (_isEnglish)
IconButton(
icon: const Icon(CupertinoIcons.photo_on_rectangle, color: AppColors.saqelCyan, size: 20),
tooltip: 'ملخص القواعد والمخططات الذهنية 🖼️',
onPressed: () => _showGrammarMindMapModal(context),
),
// Offline Save / Download Button
IconButton(
icon: Icon(
@@ -265,11 +271,45 @@ class _CurriculumDocumentViewerScreenState extends State<CurriculumDocumentViewe
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// English TTS Audio Companion
// English Smart Audio Companion & Interactive Hints
if (_isEnglish) ...[
EnglishTtsPlayerWidget(
textToRead: _documentContent,
title: 'الناطق الصوتي للدرس (English Audio Companion)',
Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
decoration: BoxDecoration(
color: const Color(0xFF0C192E),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: AppColors.saqelCyan.withAlpha(70)),
),
child: Row(
children: [
Container(
width: 38,
height: 38,
decoration: BoxDecoration(
color: AppColors.saqelCyan.withAlpha(25),
borderRadius: BorderRadius.circular(10),
),
child: const Icon(CupertinoIcons.headphones, color: AppColors.saqelCyan, size: 20),
),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'القراءة التفاعلية ونطق الفقرات 🎧',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 13),
),
SizedBox(height: 2),
Text(
'انقر على أي كلمة لعرض ترجمتها الفورية ونطقها الفونيتي، أو اضغط زر القراءة بجانب كل فقرة.',
style: TextStyle(color: AppColors.textSecondaryDark, fontSize: 11.5),
),
],
),
),
],
),
),
const SizedBox(height: 16),
],
@@ -524,39 +564,45 @@ class _CurriculumDocumentViewerScreenState extends State<CurriculumDocumentViewe
),
const SizedBox(height: 18),
// Render Dynamic Parsed Sections
..._sections.map((section) {
return Padding(
padding: const EdgeInsets.only(bottom: 14),
child: LuxuryCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
section.title,
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w800, fontSize: 14.5),
),
const SizedBox(height: 10),
...section.lines.map((line) {
return Padding(
padding: const EdgeInsets.only(bottom: 6),
child: Text(
line,
style: TextStyle(
color: line.startsWith('-') || line.startsWith('•')
? AppColors.textSecondaryDark
: Colors.white.withAlpha(230),
fontSize: _fontSize,
height: 1.55,
// Render Dynamic Parsed Sections (or Interactive English Reading Engine)
if (_isEnglish)
InteractiveEnglishPassageView(
markdownContent: _documentContent,
fontSize: _fontSize,
)
else
..._sections.map((section) {
return Padding(
padding: const EdgeInsets.only(bottom: 14),
child: LuxuryCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
section.title,
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w800, fontSize: 14.5),
),
const SizedBox(height: 10),
...section.lines.map((line) {
return Padding(
padding: const EdgeInsets.only(bottom: 6),
child: Text(
line,
style: TextStyle(
color: line.startsWith('-') || line.startsWith('•')
? AppColors.textSecondaryDark
: Colors.white.withAlpha(230),
fontSize: _fontSize,
height: 1.55,
),
),
),
);
}),
],
);
}),
],
),
),
),
);
}),
);
}),
const SizedBox(height: 30),
],
),
@@ -564,6 +610,221 @@ class _CurriculumDocumentViewerScreenState extends State<CurriculumDocumentViewe
),
);
}
void _showGrammarMindMapModal(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: AppColors.darkBackground,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
),
builder: (ctx) {
return DraggableScrollableSheet(
initialChildSize: 0.85,
minChildSize: 0.5,
maxChildSize: 0.95,
expand: false,
builder: (_, scrollController) {
return Directionality(
textDirection: TextDirection.rtl,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
child: ListView(
controller: scrollController,
children: [
Center(
child: Container(
width: 44,
height: 4,
decoration: BoxDecoration(
color: Colors.white24,
borderRadius: BorderRadius.circular(2),
),
),
),
const SizedBox(height: 16),
Row(
children: [
Container(
width: 38,
height: 38,
decoration: BoxDecoration(
color: AppColors.appleBlue.withAlpha(30),
borderRadius: BorderRadius.circular(10),
),
child: const Icon(CupertinoIcons.photo_on_rectangle, color: AppColors.appleBlue, size: 20),
),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'ملخص قواعد الدرس والمخططات التوضيحية 🖼️',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w800, fontSize: 16),
),
SizedBox(height: 2),
Text(
'شروحات بصرية معتمدة تدعم التكبير والتصغير الفوري باللمس',
style: TextStyle(color: AppColors.textSecondaryDark, fontSize: 12),
),
],
),
),
],
),
const SizedBox(height: 18),
// Interactive Zoomable Diagram Card
LuxuryCard(
borderColor: AppColors.saqelCyan.withAlpha(60),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'مخطط الأزمنة الوزارية (Tenses Timeline Schema)',
style: TextStyle(color: AppColors.saqelCyan, fontWeight: FontWeight.w700, fontSize: 13),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
decoration: BoxDecoration(
color: AppColors.saqelCyan.withAlpha(25),
borderRadius: BorderRadius.circular(8),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(CupertinoIcons.zoom_in, color: AppColors.saqelCyan, size: 12),
SizedBox(width: 4),
Text('تكبير باللمس 4x', style: TextStyle(color: AppColors.saqelCyan, fontSize: 10.5, fontWeight: FontWeight.bold)),
],
),
),
],
),
const SizedBox(height: 12),
ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Container(
height: 220,
color: const Color(0xFF070E1A),
child: InteractiveViewer(
maxScale: 4.0,
child: Center(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.black.withAlpha(120),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white12),
),
child: const Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_TenseNode(title: 'Past Simple', formula: 'S + V2', color: Color(0xFFE63946)),
Icon(CupertinoIcons.arrow_right, color: Colors.white38, size: 16),
_TenseNode(title: 'Present Perfect', formula: 'S + have/has + V3', color: Color(0xFF00F5D4)),
Icon(CupertinoIcons.arrow_right, color: Colors.white38, size: 16),
_TenseNode(title: 'Future Forms', formula: 'will / going to + V1', color: Color(0xFF0071E3)),
],
),
),
const SizedBox(height: 14),
const Text(
'💡 يمكنك استخدام إصبعين للتكبير والسحب والتصغير داخل اللوحة (Pinch to Zoom)',
style: TextStyle(color: AppColors.textSecondaryDark, fontSize: 11),
textAlign: TextAlign.center,
),
],
),
),
),
),
),
),
],
),
),
const SizedBox(height: 16),
// Grammar Rules Breakdown Table
LuxuryCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'📌 ملخص القواعد الذهبية (Action Pack 10 Core Rules):',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w800, fontSize: 14),
),
const SizedBox(height: 10),
_buildRuleRow('1. المضارع التام (Present Perfect)', 'يستخدم عند ربط فعل ماضٍ بنتيجة حالية، أو لخبرات الحياة دون تحديد وقت: I have finished my project.'),
_buildRuleRow('2. الماضي البسيط (Past Simple)', 'يستخدم لأفعال انتهت في وقت ماضٍ محدد بدقة: The company launched the satellite in 2021.'),
_buildRuleRow('3. أفعال الاستنتاج (Modals of Deduction)', 'must (مؤكد 100%)، can\'t (مستحيل 100%)، might / could (محتمل 50%).'),
_buildRuleRow('4. جمل الوصل (Relative Clauses)', 'who للأشخاص، which/that للأشياء، where للأماكن، whose للملكية.'),
],
),
),
const SizedBox(height: 24),
],
),
),
);
},
);
},
);
}
Widget _buildRuleRow(String title, String explanation) {
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: const TextStyle(color: AppColors.saqelCyan, fontSize: 12.5, fontWeight: FontWeight.w700)),
const SizedBox(height: 3),
Text(explanation, style: const TextStyle(color: AppColors.textSecondaryDark, fontSize: 12, height: 1.45)),
],
),
);
}
}
class _TenseNode extends StatelessWidget {
final String title;
final String formula;
final Color color;
const _TenseNode({required this.title, required this.formula, required this.color});
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: color.withAlpha(30),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: color.withAlpha(120)),
),
child: Text(title, style: TextStyle(color: color, fontSize: 11, fontWeight: FontWeight.w800)),
),
const SizedBox(height: 4),
Text(formula, style: const TextStyle(color: Colors.white70, fontSize: 10, fontFamily: 'SF Pro Text')),
],
);
}
}
class DocumentSection {
apps/student_app/lib/presentation/screens/curriculum/english_interactive_lab_view.dart
+1171 -28
View File
File diff suppressed because it is too large Load Diff
apps/student_app/lib/presentation/screens/curriculum/math_interactive_lab_view.dart
+270 -32
View File
@@ -147,6 +147,64 @@ class _MathInteractiveLabViewState extends State<MathInteractiveLabView>
},
];
// Hierarchical Unit & Lesson Structure
int _selectedUnitIndex = 0;
int _selectedLessonIndex = 0;
bool _showAllExercises = false;
final List<Map<String, dynamic>> _curriculumUnits = [
{
'name': 'الوحدة 1: أنظمة المعادلات',
'lessons': [
{
'title': 'الدرس 1: نظام خطي وتربيعي',
'subtitle': 'تقاطع مستقيم وقطع مكافئ أو دائرة (المميز Δ = b² - 4ac)',
'exercises': [1, 3, 5],
},
{
'title': 'الدرس 2: نظام معادلتين تربيعيتين',
'subtitle': 'تقاطع دائرة وقطع مكافئ (4 نقاط تقاطع أو انفصال هندسي)',
'exercises': [0, 2, 4],
},
{
'title': 'مختبر جيوجبرا: نشاط ص 16 - 17',
'subtitle': 'الاستكشاف الديكارتي الشامل لجميع أنشطة وتدريبات الكتاب الوزاري',
'exercises': [0, 1, 2, 3, 4, 5],
},
],
},
{
'name': 'الوحدة 2: الأسس والدوائر',
'lessons': [
{
'title': 'الدرس 1: معادلة الدائرة الهندسية',
'subtitle': 'تمثيل x² + y² = r² والمماسات ونقاط التماس مع المحاور',
'exercises': [0, 1, 5],
},
{
'title': 'الدرس 2: الاقترانات الأسية وتمثيلها',
'subtitle': 'نمذجة النمو والاضمحلال الأسي ومقارنة معدلات التغير',
'exercises': [3, 4],
},
],
},
{
'name': 'الوحدة 3: حساب المثلثات',
'lessons': [
{
'title': 'الدرس 1: دائرة الوحدة والنسب المثلثية',
'subtitle': 'تعيين إحداثيات (cos θ, sin θ) والعلاقات الدائرية المتطابقة',
'exercises': [5],
},
{
'title': 'الدرس 2: تمثيل اقترانات الجيب وجيب التمام',
'subtitle': 'الرسم البياني للمنحنيات الدورية وتعيين السعة والتردد الزاوي',
'exercises': [1, 3],
},
],
},
];
@override
void initState() {
super.initState();
@@ -175,8 +233,23 @@ class _MathInteractiveLabViewState extends State<MathInteractiveLabView>
});
}
void _selectCurriculumLesson(int unitIdx, int lessonIdx) {
setState(() {
_selectedUnitIndex = unitIdx;
_selectedLessonIndex = lessonIdx;
});
final lesson = _curriculumUnits[unitIdx]['lessons'][lessonIdx];
final exerciseIndices = (lesson['exercises'] as List<int>);
if (exerciseIndices.isNotEmpty) {
_applyTextbookPreset(exerciseIndices.first);
}
}
@override
Widget build(BuildContext context) {
final activeUnit = _curriculumUnits[_selectedUnitIndex];
final lessons = activeUnit['lessons'] as List<Map<String, dynamic>>;
return Directionality(
textDirection: TextDirection.rtl,
child: Column(
@@ -213,6 +286,110 @@ class _MathInteractiveLabViewState extends State<MathInteractiveLabView>
),
),
// Unit & Lesson Hierarchy Navigation Header
Container(
padding: const EdgeInsets.fromLTRB(14, 8, 14, 10),
decoration: BoxDecoration(
color: const Color(0xFF091220),
border: Border(bottom: BorderSide(color: AppColors.saqelCyan.withAlpha(50))),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Unit Switcher Row
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: _curriculumUnits.asMap().entries.map((uEntry) {
final uIdx = uEntry.key;
final uData = uEntry.value;
final isUnitSelected = _selectedUnitIndex == uIdx;
return GestureDetector(
onTap: () => _selectCurriculumLesson(uIdx, 0),
child: Container(
margin: const EdgeInsets.only(left: 8),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: isUnitSelected
? AppColors.saqelCyan.withAlpha(35)
: Colors.white.withAlpha(10),
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isUnitSelected
? AppColors.saqelCyan
: Colors.white12,
),
),
child: Text(
uData['name'] as String,
style: TextStyle(
color: isUnitSelected ? AppColors.saqelCyan : Colors.white70,
fontSize: 12,
fontWeight: isUnitSelected ? FontWeight.w800 : FontWeight.w500,
),
),
),
);
}).toList(),
),
),
const SizedBox(height: 8),
// Lesson Pills Row
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: lessons.asMap().entries.map((lEntry) {
final lIdx = lEntry.key;
final lData = lEntry.value;
final isLessonSelected = _selectedLessonIndex == lIdx;
return GestureDetector(
onTap: () => _selectCurriculumLesson(_selectedUnitIndex, lIdx),
child: Container(
margin: const EdgeInsets.only(left: 8),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
decoration: BoxDecoration(
gradient: isLessonSelected
? const LinearGradient(
colors: [AppColors.appleBlue, AppColors.saqelCyan],
)
: null,
color: isLessonSelected ? null : const Color(0xFF0F1B2E),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isLessonSelected ? Colors.white : AppColors.darkCardBorder,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
isLessonSelected ? CupertinoIcons.check_mark_circled_solid : CupertinoIcons.circle,
size: 12,
color: isLessonSelected ? Colors.black : AppColors.textSecondaryDark,
),
const SizedBox(width: 6),
Text(
lData['title'] as String,
style: TextStyle(
color: isLessonSelected ? Colors.black : Colors.white,
fontSize: 11.5,
fontWeight: FontWeight.w700,
),
),
],
),
),
);
}).toList(),
),
),
],
),
),
// Main Tab selector
Container(
color: AppColors.darkSurface,
@@ -495,31 +672,44 @@ class _MathInteractiveLabViewState extends State<MathInteractiveLabView>
const SizedBox(height: 16),
// Quick Textbook Presets Buttons
const Text(
'نماذج تدريبات الكتاب الوزاري:',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 12),
),
const SizedBox(height: 8),
Wrap(
spacing: 6,
runSpacing: 6,
children: List.generate(_textbookExercises.length, (i) {
final isSelected = _selectedExerciseIndex == i;
return ChoiceChip(
label: Text(
i == 0 ? 'نشاط ص16' : 'تدريب $i',
style: TextStyle(
color: isSelected ? Colors.black : Colors.white,
fontSize: 11,
fontWeight: FontWeight.w700,
Builder(
builder: (context) {
final activeLessons = _curriculumUnits[_selectedUnitIndex]['lessons'] as List<Map<String, dynamic>>;
final activeLesson = activeLessons[_selectedLessonIndex];
final lessonExercises = activeLesson['exercises'] as List<int>;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'تدريبات (${activeLesson['title']}):',
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 12),
),
),
selected: isSelected,
selectedColor: AppColors.saqelCyan,
backgroundColor: AppColors.darkCard,
onSelected: (_) => _applyTextbookPreset(i),
const SizedBox(height: 8),
Wrap(
spacing: 6,
runSpacing: 6,
children: lessonExercises.map((i) {
final isSelected = _selectedExerciseIndex == i;
return ChoiceChip(
label: Text(
i == 0 ? 'نشاط ص16' : 'تدريب $i',
style: TextStyle(
color: isSelected ? Colors.black : Colors.white,
fontSize: 11,
fontWeight: FontWeight.w700,
),
),
selected: isSelected,
selectedColor: AppColors.saqelCyan,
backgroundColor: AppColors.darkCard,
onSelected: (_) => _applyTextbookPreset(i),
);
}).toList(),
),
],
);
}),
},
),
],
),
@@ -534,13 +724,60 @@ class _MathInteractiveLabViewState extends State<MathInteractiveLabView>
// TAB 2: TEXTBOOK ACTIVITIES & GEOGEBRA SCRIPT (PAGES 16 - 17)
// ============================================================================
Widget _buildTextbookActivitiesView() {
return ListView.builder(
final lesson = _curriculumUnits[_selectedUnitIndex]['lessons'][_selectedLessonIndex];
final activeIndices = (lesson['exercises'] as List<int>);
final displayedIndices = _showAllExercises
? List.generate(_textbookExercises.length, (i) => i)
: activeIndices;
return ListView(
padding: const EdgeInsets.all(20),
itemCount: _textbookExercises.length,
itemBuilder: (context, index) {
final item = _textbookExercises[index];
final points = item['points'] as List<Offset>;
final isSelected = _selectedExerciseIndex == index;
children: [
// Lesson Filter Header
Container(
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.only(bottom: 16),
decoration: BoxDecoration(
color: AppColors.saqelCyan.withAlpha(20),
borderRadius: BorderRadius.circular(14),
border: Border.all(color: AppColors.saqelCyan.withAlpha(60)),
),
child: Row(
children: [
const Icon(CupertinoIcons.book_fill, color: AppColors.saqelCyan, size: 18),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${lesson['title']}',
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 13),
),
const SizedBox(height: 2),
Text(
'${lesson['subtitle']}',
style: const TextStyle(color: AppColors.textSecondaryDark, fontSize: 11),
),
],
),
),
TextButton(
onPressed: () => setState(() => _showAllExercises = !_showAllExercises),
child: Text(
_showAllExercises ? 'تمارين الدرس' : 'عرض الكل (${_textbookExercises.length})',
style: const TextStyle(color: AppColors.saqelCyan, fontSize: 11, fontWeight: FontWeight.w700),
),
),
],
),
),
// Exercise Cards
...displayedIndices.map((index) {
final item = _textbookExercises[index];
final points = item['points'] as List<Offset>;
final isSelected = _selectedExerciseIndex == index;
return Container(
margin: const EdgeInsets.only(bottom: 16),
@@ -634,9 +871,10 @@ class _MathInteractiveLabViewState extends State<MathInteractiveLabView>
],
),
);
},
);
}
}),
],
);
}
// ============================================================================
// TAB 3: STEP-BY-STEP ALGEBRAIC SOLVER & SOCRATIC DISCRIMINANT RADAR
apps/student_app/lib/presentation/screens/player/socratic_video_player_screen.dart
+176 -56
View File
@@ -57,6 +57,7 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
int _lastSyncedPosition = -1;
Timer? _controlsHideTimer;
bool _showVideoControls = true;
bool _showChalkboardMode = false;
final FlutterTts _tts = FlutterTts();
bool _isSpeakingChalkboard = false;
@@ -64,11 +65,49 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
if (!mounted) return;
setState(() => _showVideoControls = true);
_controlsHideTimer?.cancel();
_controlsHideTimer = Timer(const Duration(seconds: 2), () {
_controlsHideTimer = Timer(const Duration(seconds: 3), () {
if (mounted) setState(() => _showVideoControls = false);
});
}
void _initPlayer(String videoUrl, int resumePos, bool shouldPlay) {
final effectiveUrl = videoUrl.isNotEmpty
? videoUrl
: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
_videoController?.dispose();
_videoController = VideoPlayerController.networkUrl(Uri.parse(effectiveUrl))
..initialize().then((_) {
if (mounted) {
setState(() {
_isVideoInitialized = true;
_videoInitError = null;
});
_revealVideoControls();
if (resumePos > 3) {
_videoController!.seekTo(Duration(seconds: resumePos));
if (context.mounted) {
SaqelToast.showInfo(
context,
'تم استئناف المشاهدة من الدقيقة ${_formatTime(resumePos)} ⏱️',
title: 'استئناف المشاهدة',
);
}
}
if (shouldPlay) {
_videoController!.play();
}
}
}).catchError((err) {
if (mounted) {
setState(() {
_isVideoInitialized = false;
_videoInitError = 'تعذر تحميل بث الفيديو المباشر؛ انقر لإعادة المحاولة';
});
}
});
}
Future<void> _speakConcept(String text) async {
if (text.isEmpty) return;
setState(() => _isSpeakingChalkboard = true);
@@ -177,37 +216,12 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
listener: (context, state) {
if (state is VideoPlaybackReady) {
// Initialize Video Player if not yet initialized
if (_videoController == null) {
_videoController = VideoPlayerController.networkUrl(Uri.parse(state.playbackData.videoUrl))
..initialize().then((_) {
if (mounted) {
setState(() {
_isVideoInitialized = true;
_videoInitError = null;
});
_revealVideoControls();
if (state.currentPositionSeconds > 3) {
_videoController!.seekTo(Duration(seconds: state.currentPositionSeconds));
if (context.mounted) {
SaqelToast.showInfo(
context,
'تم استئناف المشاهدة من الدقيقة ${_formatTime(state.currentPositionSeconds)} ⏱️',
title: 'استئناف المشاهدة',
);
}
}
if (state.isPlaying && state.activeCheckpoint == null) {
_videoController!.play();
}
}
}).catchError((err) {
if (mounted) {
setState(() {
_isVideoInitialized = false;
_videoInitError = 'الفيديو قيد المزامنة والتجهيز على خادم البث المباشر';
});
}
});
if (_videoController == null && _videoInitError == null) {
_initPlayer(
state.playbackData.videoUrl,
state.currentPositionSeconds,
state.isPlaying && state.activeCheckpoint == null,
);
} else if (_isVideoInitialized) {
// Sync play/pause state
if (state.isPlaying && state.activeCheckpoint == null) {
@@ -215,7 +229,7 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
} else {
_videoController!.pause();
}
if (state.currentPositionSeconds != _videoController!.value.position.inSeconds) {
if ((state.currentPositionSeconds - _videoController!.value.position.inSeconds).abs() > 2) {
_videoController!.seekTo(Duration(seconds: state.currentPositionSeconds));
}
}
@@ -340,10 +354,82 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
),
),
// Center Lesson Title & Visuals / Interactive Socratic Chalkboard
if (_videoInitError != null || !_isVideoInitialized || state.playbackData.videoUrl.isEmpty)
if (_showChalkboardMode)
Positioned.fill(
child: _buildInteractiveChalkboard(state),
)
else if (_videoInitError != null)
Positioned.fill(
child: Center(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 18),
margin: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.black.withAlpha(210),
borderRadius: BorderRadius.circular(18),
border: Border.all(color: AppColors.saqelCyan.withAlpha(90)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(CupertinoIcons.play_circle_fill, color: AppColors.saqelCyan, size: 50),
const SizedBox(height: 12),
Text(
widget.lesson.title,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.w700),
),
const SizedBox(height: 6),
Text(
_videoInitError!,
textAlign: TextAlign.center,
style: const TextStyle(color: AppColors.textSecondaryDark, fontSize: 12),
),
const SizedBox(height: 14),
ElevatedButton.icon(
icon: const Icon(CupertinoIcons.arrow_clockwise, size: 16),
label: const Text('بدء تشغيل بث الفيديو المباشر 🎥'),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.saqelCyan,
foregroundColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
onPressed: () {
setState(() {
_videoInitError = null;
_isVideoInitialized = false;
});
_initPlayer(
state.playbackData.videoUrl.isNotEmpty
? state.playbackData.videoUrl
: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
state.currentPositionSeconds,
true,
);
},
),
],
),
),
),
)
else if (!_isVideoInitialized)
Positioned.fill(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const CupertinoActivityIndicator(color: AppColors.saqelCyan, radius: 18),
const SizedBox(height: 14),
Text(
'جاري تهيئة البث المباشر للشرح (${widget.lesson.title}) ⚡',
style: const TextStyle(color: Colors.white70, fontSize: 13, fontWeight: FontWeight.w600),
),
],
),
),
)
else if (_showVideoControls) Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
@@ -422,30 +508,64 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
],
),
),
// Top Version Badge
if (_showVideoControls) Positioned(
top: 14,
right: 14,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: Colors.black.withAlpha(140),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: AppColors.saqelCyan.withAlpha(60)),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(CupertinoIcons.sparkles, color: AppColors.saqelCyan, size: 12),
SizedBox(width: 6),
Text(
'نقاط الفهم',
style: TextStyle(color: AppColors.saqelCyan, fontSize: 11, fontWeight: FontWeight.w700),
),
],
// Top Action Badges & Mode Switcher
if (_showVideoControls) ...[
Positioned(
top: 14,
right: 14,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: Colors.black.withAlpha(140),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: AppColors.saqelCyan.withAlpha(60)),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(CupertinoIcons.sparkles, color: AppColors.saqelCyan, size: 12),
SizedBox(width: 6),
Text(
'نقاط الفهم',
style: TextStyle(color: AppColors.saqelCyan, fontSize: 11, fontWeight: FontWeight.w700),
),
],
),
),
),
),
Positioned(
top: 14,
left: 14,
child: GestureDetector(
onTap: () {
setState(() => _showChalkboardMode = !_showChalkboardMode);
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: Colors.black.withAlpha(160),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: AppColors.saqelCyan.withAlpha(90)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_showChalkboardMode ? CupertinoIcons.film : CupertinoIcons.square_pencil,
color: AppColors.saqelCyan,
size: 13,
),
const SizedBox(width: 6),
Text(
_showChalkboardMode ? 'عرض الفيديو 🎥' : 'لوحة الشرح 📝',
style: const TextStyle(color: Colors.white, fontSize: 11, fontWeight: FontWeight.w700),
),
],
),
),
),
),
],
],
),
apps/student_app/lib/presentation/widgets/interactive_english_passage_view.dart
+428
View File
@@ -0,0 +1,428 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../core/services/english_reading_service.dart';
import '../../core/theme/app_colors.dart';
/// ==============================================================================
/// SAQEL ENTERPRISE (EDTECH 2.0) - INTERACTIVE ENGLISH PASSAGE & WORD POPOVER
/// ==============================================================================
///
/// ويدجت قراءة نصوص اللغة الإنجليزية التفاعلي:
/// 1. قراءة فقرة بفقرة (Paragraph-by-Paragraph) مع تمييز الفقرة النشطة صوتياً.
/// 2. تفاعل فوري عند النقر على أي كلمة لإظهار نافذة منبثقة عائمة فوق الكلمة (Word Popover).
/// 3. عرض النطق الفونيتي (IPA)، تصنيف الكلمة، المعنى العربي الدقيق، وزر الاستماع للكلمة المفردة.
class InteractiveEnglishPassageView extends StatefulWidget {
final String markdownContent;
final double fontSize;
const InteractiveEnglishPassageView({
super.key,
required this.markdownContent,
this.fontSize = 15.0,
});
@override
State<InteractiveEnglishPassageView> createState() =>
_InteractiveEnglishPassageViewState();
}
class _InteractiveEnglishPassageViewState
extends State<InteractiveEnglishPassageView> {
final EnglishReadingService _audioService = EnglishReadingService();
String? _activeParagraphId;
// Selected word for popup
WordDefinitionModel? _selectedWordDef;
String? _selectedRawWord;
@override
void initState() {
super.initState();
_audioService.initialize();
}
@override
void dispose() {
_audioService.stop();
super.dispose();
}
void _onWordTapped(String word) {
final def = _audioService.lookupWord(word);
setState(() {
_selectedRawWord = word;
_selectedWordDef = def;
});
// Auto pronounce word on tap for auditory reinforcement
_audioService.speakWord(word);
}
void _closePopover() {
setState(() {
_selectedWordDef = null;
_selectedRawWord = null;
});
}
void _toggleReadParagraph(String id, String text) {
if (_activeParagraphId == id) {
_audioService.stop();
setState(() => _activeParagraphId = null);
} else {
setState(() => _activeParagraphId = id);
_audioService.readParagraph(
paragraphId: id,
text: text,
onStart: (pid) {
if (mounted) setState(() => _activeParagraphId = pid);
},
onComplete: (pid) {
if (mounted && _activeParagraphId == pid) {
setState(() => _activeParagraphId = null);
}
},
);
}
}
@override
Widget build(BuildContext context) {
final rawBlocks = widget.markdownContent.split(RegExp(r'\n\s*\n'));
final paragraphs = rawBlocks
.map((b) => b.trim())
.where((b) => b.isNotEmpty)
.toList();
return Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: paragraphs.asMap().entries.map((entry) {
final idx = entry.key;
final text = entry.value;
final isHeader = text.startsWith('#');
final paraId = 'para_$idx';
final isPlayingThis = _activeParagraphId == paraId;
if (isHeader) {
final cleanHeader = text.replaceAll(RegExp(r'^#+\s*'), '');
return Padding(
padding: const EdgeInsets.only(top: 18, bottom: 8),
child: Text(
cleanHeader,
style: const TextStyle(
color: AppColors.saqelCyan,
fontSize: 17,
fontWeight: FontWeight.w800,
letterSpacing: -0.2,
),
),
);
}
return Container(
margin: const EdgeInsets.only(bottom: 16),
decoration: BoxDecoration(
color: isPlayingThis
? const Color(0xFF0D223A)
: const Color(0xFF08101E),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isPlayingThis
? AppColors.saqelCyan
: AppColors.darkCardBorder,
width: isPlayingThis ? 1.6 : 1.0,
),
boxShadow: isPlayingThis
? [
BoxShadow(
color: AppColors.saqelCyan.withAlpha(50),
blurRadius: 18,
spreadRadius: 1,
),
]
: const [],
),
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Paragraph Header Controls (Audio scope)
Row(
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8, vertical: 3),
decoration: BoxDecoration(
color: Colors.white.withAlpha(15),
borderRadius: BorderRadius.circular(6),
),
child: Text(
'Passage ${idx + 1}',
style: const TextStyle(
color: AppColors.textSecondaryDark,
fontSize: 11,
fontWeight: FontWeight.w700,
fontFamily: 'SF Pro Text',
),
),
),
const Spacer(),
// Listen to Paragraph Button
GestureDetector(
onTap: () => _toggleReadParagraph(paraId, text),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 5),
decoration: BoxDecoration(
color: isPlayingThis
? AppColors.crimsonRed.withAlpha(40)
: AppColors.saqelCyan.withAlpha(25),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isPlayingThis
? AppColors.crimsonRed
: AppColors.saqelCyan.withAlpha(90),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
isPlayingThis
? CupertinoIcons.stop_fill
: CupertinoIcons.volume_up,
color: isPlayingThis
? AppColors.crimsonRed
: AppColors.saqelCyan,
size: 14,
),
const SizedBox(width: 6),
Text(
isPlayingThis
? 'إيقاف القراءة'
: 'استمع للفقرة 🎧',
style: TextStyle(
color: isPlayingThis
? AppColors.crimsonRed
: AppColors.saqelCyan,
fontSize: 11.5,
fontWeight: FontWeight.w700,
),
),
],
),
),
),
],
),
const SizedBox(height: 12),
// Interactive Clickable Words
_buildInteractiveWords(text),
],
),
);
}).toList(),
),
// Floating Word Definition Modal / Popover Toast
if (_selectedWordDef != null)
Positioned(
left: 16,
right: 16,
bottom: 24,
child: _buildFloatingWordCard(_selectedWordDef!),
),
],
);
}
Widget _buildInteractiveWords(String paragraphText) {
final tokens = paragraphText.split(RegExp(r'(\s+)'));
return Directionality(
textDirection: TextDirection.ltr,
child: Wrap(
spacing: 4,
runSpacing: 6,
children: tokens.map((token) {
if (token.trim().isEmpty) return const SizedBox.shrink();
final isTargetWord = _selectedRawWord != null &&
token.toLowerCase().contains(_selectedRawWord!.toLowerCase());
return InkWell(
onTap: () => _onWordTapped(token),
borderRadius: BorderRadius.circular(6),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 3, vertical: 1),
decoration: BoxDecoration(
color: isTargetWord
? AppColors.saqelCyan.withAlpha(45)
: Colors.transparent,
borderRadius: BorderRadius.circular(6),
border: isTargetWord
? Border.all(color: AppColors.saqelCyan)
: null,
),
child: Text(
token,
style: TextStyle(
fontSize: widget.fontSize,
height: 1.5,
color: isTargetWord
? AppColors.saqelCyan
: Colors.white.withAlpha(235),
fontWeight:
isTargetWord ? FontWeight.w800 : FontWeight.w500,
fontFamily: 'SF Pro Text',
),
),
),
);
}).toList(),
),
);
}
Widget _buildFloatingWordCard(WordDefinitionModel def) {
return Container(
decoration: BoxDecoration(
color: const Color(0xFF060D17),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColors.saqelCyan.withAlpha(180), width: 1.5),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(200),
blurRadius: 30,
offset: const Offset(0, 10),
),
BoxShadow(
color: AppColors.saqelCyan.withAlpha(60),
blurRadius: 20,
spreadRadius: 1,
),
],
),
padding: const EdgeInsets.all(18),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Top Row: Word, IPA, Audio & Close
Row(
children: [
Text(
def.word,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w900,
letterSpacing: -0.3,
fontFamily: 'SF Pro Display',
),
),
const SizedBox(width: 8),
Text(
def.ipa,
style: const TextStyle(
color: AppColors.saqelCyan,
fontSize: 13,
fontWeight: FontWeight.w600,
fontFamily: 'SF Pro Text',
),
),
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 2),
decoration: BoxDecoration(
color: AppColors.appleBlue.withAlpha(30),
borderRadius: BorderRadius.circular(6),
),
child: Text(
def.partOfSpeech,
style: const TextStyle(
color: AppColors.appleBlue,
fontSize: 10,
fontWeight: FontWeight.w700,
),
),
),
const Spacer(),
// Pronounce Word
IconButton(
icon: const Icon(CupertinoIcons.volume_up,
color: AppColors.saqelCyan, size: 22),
tooltip: 'استمع للنطق الصوتي',
onPressed: () => _audioService.speakWord(def.word),
),
// Close Popover
IconButton(
icon: const Icon(CupertinoIcons.xmark_circle_fill,
color: Colors.white54, size: 20),
onPressed: _closePopover,
),
],
),
const SizedBox(height: 8),
// Arabic Contextual Meaning
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: AppColors.saqelCyan.withAlpha(20),
borderRadius: BorderRadius.circular(10),
),
child: Directionality(
textDirection: TextDirection.rtl,
child: Row(
children: [
const Text('المعنى في السياق: ',
style: TextStyle(
color: AppColors.textSecondaryDark,
fontSize: 12,
fontWeight: FontWeight.w600)),
Text(
def.arabicMeaning,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w800,
),
),
],
),
),
),
const SizedBox(height: 8),
// English Definition
Text(
def.englishDefinition,
style: const TextStyle(
color: AppColors.textSecondaryDark,
fontSize: 12.5,
height: 1.4,
fontFamily: 'SF Pro Text',
),
),
// Example Sentence (if any)
if (def.exampleSentence != null) ...[
const SizedBox(height: 6),
Text(
'Example: "${def.exampleSentence}"',
style: TextStyle(
color: Colors.white.withAlpha(160),
fontSize: 11.5,
fontStyle: FontStyle.italic,
),
),
],
],
),
);
}
}