import 'dart:async'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart'; import 'package:diplomaticquarterapp/extensions/string_extensions.dart'; import 'package:diplomaticquarterapp/models/course/education_journey_model.dart'; import 'package:diplomaticquarterapp/pages/learning/content_widget.dart'; import 'package:diplomaticquarterapp/pages/learning/measureWidget.dart'; import 'package:diplomaticquarterapp/pages/learning/progress_bar_widget.dart'; import 'package:diplomaticquarterapp/pages/learning/question_sheet.dart'; import 'package:diplomaticquarterapp/pages/learning/scroll_widget.dart'; import 'package:diplomaticquarterapp/services/course_service/course_service.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:video_player/video_player.dart'; import 'package:visibility_detector/visibility_detector.dart'; import 'widgets/player_controlls.dart'; class CourseDetailedPage extends StatefulWidget { @override State createState() => _CourseDetailedPageState(); } class _CourseDetailedPageState extends State { @override void initState() { super.initState(); context.read().getCourseById(context); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { return AppScaffold( isShowAppBar: false, isShowDecPage: false, showNewAppBarTitle: true, showNewAppBar: true, appBarTitle: context.read().getPageTitle ?? "", backgroundColor: Color(0xFFF7F7F7), onTap: () {}, body: Consumer( builder: (context, provider, child) { if (provider.courseData != null) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ if (provider.controller != null && provider.controller!.value.isInitialized) ...[ Column( children: [ AspectRatio( aspectRatio: provider.controller!.value.aspectRatio, child: Stack( alignment: Alignment.bottomCenter, children: [ VideoPlayer(provider.controller!), PlayerControlsOverlay(), VideoProgressIndicator( provider.controller!, padding: EdgeInsets.only(bottom: 0), colors: VideoProgressColors( backgroundColor: Color(0xFFD9D9D9), bufferedColor: Colors.black12, playedColor: Color(0xFFD02127), ), allowScrubbing: true, ), ], ), ).onTap(() { setState(() { if (provider.controller!.value.isPlaying) { provider.controller!.pause(); provider.playedContent!.videoState = VideoPlayerState.paused; } else { provider.controller!.play(); provider.playedContent!.videoState = VideoPlayerState.playing; } }); }), ], ) ] else ...[ CachedNetworkImage( width: double.infinity, height: MediaQuery.of(context).size.height * .265, imageUrl: provider.courseData!.nabedJourneyByIdResponseResult!.consultation!.defaultPocData!.image!.thumbUrl!, imageBuilder: (context, imageProvider) => Container( decoration: BoxDecoration( image: DecorationImage( image: imageProvider, fit: BoxFit.cover, ), ), child: provider.controller != null && !provider.controller!.value.isLooping ? Center( child: CircularProgressIndicator( color: Color(0xFFD02127), ), ) : provider.controller != null ? Center( child: Icon( Icons.play_circle, size: 35, color: Colors.white, ), ) : SizedBox(), ), placeholder: (context, url) => Center( child: CircularProgressIndicator(), ), errorWidget: (context, url, error) => Icon(Icons.error), ).onTap(() { setState(() { if (provider.controller != null) { provider.controller!.value.isPlaying ? provider.controller!.pause() : provider.controller!.play(); } }); }), ], if (provider.consultation != null) ...[ Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox(height: 20.0), Text( context.read().isArabic ? provider.consultation!.tagValues!.titleAr! : provider.consultation!.tagValues!.title ?? "Basics of Heart", style: TextStyle( fontSize: 16.0, height: 24 / 16, color: Color(0xFF2E303A), fontWeight: FontWeight.w600, ), ), // SizedBox(height: 2.0), // Text( // "Heart diseases include conditions like coronary and heart failure, often caused by factors ", // style: TextStyle(fontSize: 10.0, height: 15 / 10, color: Color(0xFF575757)), // ), // SizedBox(height: 6.0), Text( provider.consultation!.stats!.videosCount.toString() + " Videos", style: TextStyle( fontSize: 10.0, height: 15 / 10, color: Color(0xFF2E303A), fontWeight: FontWeight.w600, ), ), ], ), ), ], SizedBox(height: 20.0), if (provider.courseTopics != null) ...[ Expanded( child: ListViewSeparatedExtension.separatedWithScrollListener( itemCount: provider.courseTopics!.length, shrinkWrap: true, physics: AlwaysScrollableScrollPhysics(), padding: EdgeInsets.symmetric(horizontal: 20), itemBuilder: (context, ind) { Topic topic = provider.courseTopics![ind]; return Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: [ // Topic title Text( (topic.title.toString() + "(${topic.contentsCount.toString()})") ?? "Topic", style: TextStyle( fontSize: 14, fontWeight: FontWeight.bold, color: Color(0xFF2B353E), ), ), SizedBox(height: 8), ListViewSeparatedExtension.separatedWithScrollListener( itemCount: topic.contents!.length, shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemBuilder: (context, index) { final content = topic.contents![index]; var percentage = content.viewedPercentage != 0.0 ? content.viewedPercentage : provider.convertToDoublePercentage(content.read ?? 0); return VisibilityDetector( key: Key(content.id.toString()), onVisibilityChanged: (visibilityInfo) => provider.onVisibilityChange(visibilityInfo, content, topic.id!), child: Padding( padding: const EdgeInsets.symmetric(vertical: 8), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(index.toString()), SizedBox( width: 9, ), Expanded( flex: 10, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( content.title ?? "Course overview", style: TextStyle( fontSize: 13, fontWeight: FontWeight.w600, color: Color(0xFF2B353E), ), ), Text( "Video - ${provider.getDurationOfVideo(content.video!.flavor!.duration!)}", style: TextStyle( fontSize: 12, fontWeight: FontWeight.w500, color: Color(0xFF575757), ), ), ContentWidget( body: content.body!, ) ], ), ), Expanded( flex: 4, child: Column( children: [ SizedBox( height: 10, ), Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.end, children: [ CustomProgressBar( playedPercentage: percentage!, bufferedPercentage: 0.0, backgroundColor: Color(0xFFD9D9D9), bufferedColor: Colors.black12, playedColor: Color(0xFF359846), ), SizedBox( width: 10, ), Container( width: 20, height: 20, decoration: BoxDecoration( color: Color(0xFFDFDFDF), borderRadius: BorderRadius.all( Radius.circular(30), ), ), child: Icon( content.videoState == VideoPlayerState.loading ? Icons.hourglass_top : content.videoState == VideoPlayerState.playing ? Icons.pause : content.videoState == VideoPlayerState.paused ? Icons.play_arrow : content.videoState == VideoPlayerState.completed ? Icons.replay : Icons.play_arrow, // Use specific content's state size: 18, ).onTap(() { setState(() { provider.onVisibilityChange(null, content, topic.id!, isClicked: true); provider.play(context, content: content); }); }), ) ], ) ], ), ), ], ), ), ); }, separatorBuilder: (BuildContext context, int index) { return SizedBox(); }, // onScroll: onScroll, ), ], ); }, separatorBuilder: (BuildContext context, int index) { return SizedBox(); }, ), ), ] ], ); } else { return SizedBox(); } }, ), ); } }