You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
diplomatic-quarter/lib/pages/learning/course_detailed.dart

318 lines
16 KiB
Dart

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<CourseDetailedPage> createState() => _CourseDetailedPageState();
}
class _CourseDetailedPageState extends State<CourseDetailedPage> {
@override
void initState() {
super.initState();
context.read<CourseServiceProvider>().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<CourseServiceProvider>().getPageTitle ?? "",
backgroundColor: Color(0xFFF7F7F7),
onTap: () {},
body: Consumer<CourseServiceProvider>(
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<ProjectViewModel>().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();
}
},
),
);
}
}