From 2682158590bb8da716634c905f2d062546a7ae30 Mon Sep 17 00:00:00 2001 From: haroon amjad Date: Thu, 19 Dec 2024 12:58:10 +0300 Subject: [PATCH] ERM Channel Video changes --- lib/classes/consts.dart | 4 +- .../itg/its_add_screen_video_image.dart | 168 +++++++++++------- lib/widgets/my_video_progress_indicator.dart | 105 +++++++++++ 3 files changed, 214 insertions(+), 63 deletions(-) create mode 100644 lib/widgets/my_video_progress_indicator.dart diff --git a/lib/classes/consts.dart b/lib/classes/consts.dart index 170762c..7103dfd 100644 --- a/lib/classes/consts.dart +++ b/lib/classes/consts.dart @@ -9,9 +9,9 @@ class ApiConsts { // static String baseUrl = "https://webservices.hmg.com"; // PreProd // static String baseUrl = "https://hmgwebservices.com"; // Live server - static String baseUrl = "https://mohemm.hmg.com"; // New Live server + // static String baseUrl = "https://mohemm.hmg.com"; // New Live server - // static String baseUrl = "https://uat.hmgwebservices.com"; // UAT ser343622ver + static String baseUrl = "https://uat.hmgwebservices.com"; // UAT ser343622ver // static String baseUrl = "http://10.20.200.111:1010/"; // static String baseUrl = "https://webservices.hmg.com"; // PreProd diff --git a/lib/ui/landing/itg/its_add_screen_video_image.dart b/lib/ui/landing/itg/its_add_screen_video_image.dart index cf2d92b..2095650 100644 --- a/lib/ui/landing/itg/its_add_screen_video_image.dart +++ b/lib/ui/landing/itg/its_add_screen_video_image.dart @@ -12,6 +12,7 @@ import 'package:mohem_flutter_app/extensions/widget_extensions.dart'; import 'package:mohem_flutter_app/main.dart'; import 'package:mohem_flutter_app/models/itg/advertisement.dart' as ads; import 'package:mohem_flutter_app/widgets/button/default_button.dart'; +import 'package:mohem_flutter_app/widgets/my_video_progress_indicator.dart'; import 'package:video_player/video_player.dart'; class ITGAdsScreen extends StatefulWidget { @@ -148,7 +149,35 @@ class _ITGAdsScreenState extends State { ? Lottie.asset(MyLottieConsts.audioPlaybackLottie) : AspectRatio( aspectRatio: _controller.value.aspectRatio, - child: VideoPlayer(_controller), + child: Stack( + alignment: Alignment.bottomCenter, + children: [ + VideoPlayer(_controller), + if (advertisementData?.isOptional ?? false) + Positioned( + top: 4, + right: 8, + child: Container( + padding: const EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4), + decoration: BoxDecoration( + color: Colors.white.withOpacity(0.5), + borderRadius: BorderRadius.circular(30)), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text(AppState().isArabic(context) ? "يتخطى" : "Skip"), + Icon(Icons.skip_next), + ], + ), + ).onPress(() { + Navigator.pop(context); + DashboardApiClient().setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, "Skip").then((value) { + logger.d(value); + }); + }), + ), + ], + ), ), ), 30.height, @@ -159,70 +188,87 @@ class _ITGAdsScreenState extends State { textStyle: const TextStyle(color: Colors.white, fontSize: 16, letterSpacing: -0.48, fontWeight: FontWeight.bold), ), 50.height, - if (advertisementData?.isOptional ?? false) - DefaultButton(AppState().isArabic(context) ? "يتخطى" : "Skip", () async { - Navigator.pop(context); - DashboardApiClient().setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, "Skip").then((value) { - logger.d(value); - }); - }).paddingOnly(left: 60.0, right: 60.0, top: 8, bottom: 8), + // if (advertisementData?.isOptional ?? false) + // DefaultButton(AppState().isArabic(context) ? "يتخطى" : "Skip", () async { + // Navigator.pop(context); + // DashboardApiClient().setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, "Skip").then((value) { + // logger.d(value); + // }); + // }).paddingOnly(left: 60.0, right: 60.0, top: 8, bottom: 8), ValueListenableBuilder( valueListenable: hasTimerEnded, builder: (context, val, child) { - if (hasTimerEndedBool) { - return GridView.builder( - padding: EdgeInsets.zero, - itemCount: advertisementData?.actionButtonsColl!.length, - shrinkWrap: true, - physics: const NeverScrollableScrollPhysics(), - itemBuilder: (context, index) { - String? btnText = AppState().isArabic(context) ? advertisementData?.actionButtonsColl![index].btnTextAr : advertisementData?.actionButtonsColl![index].btnTextEn; - return DefaultButton(btnText!, () async { - Navigator.pop(context); - DashboardApiClient().setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, advertisementData?.actionButtonsColl![index].actionValue).then((value) { - logger.d(value); - }); - }).paddingOnly(left: 60.0, right: 60.0, top: 8, bottom: 8); - }, - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 1, - childAspectRatio: (7.0), + // if (hasTimerEndedBool) { + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + MyVideoProgressIndicator( + _controller, + allowScrubbing: false, + padding: EdgeInsets.only(left: 60, right: 60), + ), + GridView.builder( + padding: EdgeInsets.zero, + itemCount: advertisementData?.actionButtonsColl!.length, + shrinkWrap: true, + physics: const NeverScrollableScrollPhysics(), + itemBuilder: (context, index) { + String? btnText = AppState().isArabic(context) ? advertisementData?.actionButtonsColl![index].btnTextAr : advertisementData?.actionButtonsColl![index].btnTextEn; + return DefaultButton( + btnText!, + hasTimerEndedBool + ? () async { + Navigator.pop(context); + DashboardApiClient() + .setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, advertisementData?.actionButtonsColl![index].actionValue) + .then((value) { + logger.d(value); + }); + } + : null) + .paddingOnly(left: 60.0, right: 60.0, top: 8, bottom: 8); + }, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 1, + childAspectRatio: (7.0), + ), ), - ); - // Row( - // mainAxisAlignment: MainAxisAlignment.center, - // children: [ - // Container(padding: const EdgeInsets.all(16), decoration: Utils.containerRadius(MyColors.white, 10), child: const Icon(Icons.thumb_up, color: MyColors.gradiantEndColor)) - // .onPress(() { - // try { - // Navigator.pop(context); - // DashboardApiClient().setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, "Like").then((value) { - // logger.d(value); - // }); - // } catch (ex) { - // logger.wtf(ex); - // Utils.handleException(ex, context, null); - // } - // }), - // 20.width, - // Container( - // padding: const EdgeInsets.all(16), decoration: Utils.containerRadius(MyColors.white, 10), child: const Icon(Icons.thumb_down, color: MyColors.gradiantEndColor)) - // .onPress(() { - // try { - // Navigator.pop(context); - // DashboardApiClient().setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, "Dislike").then((value) { - // logger.d(value); - // }); - // } catch (ex) { - // logger.wtf(ex); - // Utils.handleException(ex, context, null); - // } - // }), - // ], - // ); - } else { - return Container(); - } + ], + ); + // Row( + // mainAxisAlignment: MainAxisAlignment.center, + // children: [ + // Container(padding: const EdgeInsets.all(16), decoration: Utils.containerRadius(MyColors.white, 10), child: const Icon(Icons.thumb_up, color: MyColors.gradiantEndColor)) + // .onPress(() { + // try { + // Navigator.pop(context); + // DashboardApiClient().setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, "Like").then((value) { + // logger.d(value); + // }); + // } catch (ex) { + // logger.wtf(ex); + // Utils.handleException(ex, context, null); + // } + // }), + // 20.width, + // Container( + // padding: const EdgeInsets.all(16), decoration: Utils.containerRadius(MyColors.white, 10), child: const Icon(Icons.thumb_down, color: MyColors.gradiantEndColor)) + // .onPress(() { + // try { + // Navigator.pop(context); + // DashboardApiClient().setAdvertisementViewed(masterID!, advertisementData!.advertisementId!, "Dislike").then((value) { + // logger.d(value); + // }); + // } catch (ex) { + // logger.wtf(ex); + // Utils.handleException(ex, context, null); + // } + // }), + // ], + // ); + // } else { + // return Container(); + // } }, ), 20.height, diff --git a/lib/widgets/my_video_progress_indicator.dart b/lib/widgets/my_video_progress_indicator.dart new file mode 100644 index 0000000..a6e9172 --- /dev/null +++ b/lib/widgets/my_video_progress_indicator.dart @@ -0,0 +1,105 @@ +import 'package:flutter/material.dart'; +import 'package:video_player/video_player.dart'; + +class MyVideoProgressIndicator extends StatefulWidget { + const MyVideoProgressIndicator( + this.controller, { + Key? key, + this.colors = const VideoProgressColors(), + required this.allowScrubbing, + this.padding = const EdgeInsets.only(top: 5.0), + }) : super(key: key); + + final VideoPlayerController controller; + + final VideoProgressColors colors; + + final bool allowScrubbing; + + final EdgeInsets padding; + + @override + State createState() => _VideoProgressIndicatorState(); +} + +class _VideoProgressIndicatorState extends State { + _VideoProgressIndicatorState() { + listener = () { + if (!mounted) { + return; + } + setState(() {}); + }; + } + + late VoidCallback listener; + + VideoPlayerController get controller => widget.controller; + + VideoProgressColors get colors => widget.colors; + + @override + void initState() { + super.initState(); + controller.addListener(listener); + } + + @override + void deactivate() { + controller.removeListener(listener); + super.deactivate(); + } + + @override + Widget build(BuildContext context) { + Widget progressIndicator; + if (controller.value.isInitialized) { + int duration = controller.value.duration.inMilliseconds; + int position = controller.value.position.inMilliseconds; + + int maxBuffering = 0; + for (DurationRange range in controller.value.buffered) { + int end = range.end.inMilliseconds; + if (end > maxBuffering) { + maxBuffering = end; + } + } + + progressIndicator = Stack( + fit: StackFit.passthrough, + children: [ + LinearProgressIndicator( + value: maxBuffering / duration, + valueColor: AlwaysStoppedAnimation(colors.bufferedColor), + backgroundColor: colors.backgroundColor, + minHeight: 8, + ), + LinearProgressIndicator( + value: position / duration, + valueColor: AlwaysStoppedAnimation(colors.playedColor), + backgroundColor: Colors.transparent, + minHeight: 8, + ), + ], + ); + } else { + progressIndicator = LinearProgressIndicator( + valueColor: AlwaysStoppedAnimation(colors.playedColor), + backgroundColor: colors.backgroundColor, + minHeight: 8, + ); + } + Widget paddedProgressIndicator = Padding( + padding: widget.padding, + child: progressIndicator, + ); + if (widget.allowScrubbing) { + return VideoScrubber( + controller: controller, + child: paddedProgressIndicator, + ); + } else { + return paddedProgressIndicator; + } + } +}