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/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,
),
),
],
],
),
);
}
}