bfix: pause video when not inview (#999)

* bfix: pause video when not inview * chor: cleanup * restore previous version of pubspec.lock
PalisadoesFoundation · Nov 30, 2021 · 91a4a8a · 91a4a8a
1 parent fd20509
commit 91a4a8a
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 57 deletions.
diff --git a/lib/widgets/post_widget.dart b/lib/widgets/post_widget.dart
@@ -6,6 +6,7 @@ import 'package:talawa/views/base_view.dart';
 import 'package:talawa/widgets/custom_avatar.dart';
 import 'package:talawa/widgets/post_detailed_page.dart';
 import 'package:talawa/widgets/video_widget.dart';
+import 'package:visibility_detector/visibility_detector.dart';
 
 class NewsPost extends StatelessWidget {
   const NewsPost({
@@ -43,7 +44,7 @@ class NewsPost extends StatelessWidget {
         Container(
           height: 400,
           color: Theme.of(context).colorScheme.primaryVariant.withOpacity(0.5),
-          child: PostContainer(isInView: isInView),
+          child: PostContainer(isInView: isInView, id: post.sId),
         ),
         BaseView<LikeButtonViewModel>(
           onModelReady: (model) =>
@@ -112,18 +113,22 @@ class NewsPost extends StatelessWidget {
   }
 }
 
-// ignore: must_be_immutable
 class PostContainer extends StatefulWidget {
-  // ignore: avoid_unused_constructor_parameters
-  const PostContainer({required this.isInView, Key? key}) : super(key: key);
+  const PostContainer({
+    required this.isInView,
+    required this.id,
+    Key? key,
+  }) : super(key: key);
   final bool isInView;
+  final String id;
 
   @override
   PostContainerState createState() => PostContainerState();
 }
 
 class PostContainerState extends State<PostContainer> {
   bool startedPlaying = false;
+  bool inView = true;
 
   @override
   void initState() {
@@ -132,66 +137,75 @@ class PostContainerState extends State<PostContainer> {
 
   @override
   void dispose() {
+    controller.dispose();
     super.dispose();
   }
 
   final PageController controller = PageController(initialPage: 0);
   int pindex = 0;
   @override
   Widget build(BuildContext context) {
-    return Stack(children: [
-      PageView(
-        scrollDirection: Axis.horizontal,
-        controller: controller,
-        onPageChanged: (index) {
-          setState(() {
-            pindex = index;
-          });
-        },
-        children: List.generate(
-          4,
-          (index) => index == 0
-              ? Center(
-                  child: VideoWidget(
-                      url:
-                          'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
-                      play: widget.isInView))
-              : const Image(
-                  image: NetworkImage(
-                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
-                ),
+    return VisibilityDetector(
+      key: Key(widget.id),
+      onVisibilityChanged: (info) {
+        info.visibleFraction > 0.5 ? inView = true : inView = false;
+        setState(() {});
+      },
+      child: Stack(children: [
+        PageView(
+          scrollDirection: Axis.horizontal,
+          controller: controller,
+          onPageChanged: (index) {
+            setState(() {
+              pindex = index;
+              inView = pindex == 0;
+            });
+          },
+          children: List.generate(
+            4,
+            (index) => index == 0
+                ? Center(
+                    child: VideoWidget(
+                        url:
+                            'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
+                        play: inView))
+                : const Image(
+                    image: NetworkImage(
+                        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
+                  ),
+          ),
         ),
-      ),
-      Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 8.0),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          mainAxisSize: MainAxisSize.max,
-          mainAxisAlignment: MainAxisAlignment.end,
-          children: [
-            Padding(
-              padding:
-                  const EdgeInsets.symmetric(horizontal: 100.0, vertical: 10.0),
-              child: Row(
-                children: [
-                  for (int i = 0; i < 4; i++)
-                    Expanded(
-                      child: Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 5.0),
-                        child: Divider(
-                          thickness: 3.0,
-                          color: pindex == i
-                              ? Theme.of(context).colorScheme.primary
-                              : Colors.grey,
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisSize: MainAxisSize.max,
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(
+                    horizontal: 100.0, vertical: 10.0),
+                child: Row(
+                  children: [
+                    for (int i = 0; i < 4; i++)
+                      Expanded(
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 5.0),
+                          child: Divider(
+                            thickness: 3.0,
+                            color: pindex == i
+                                ? Theme.of(context).colorScheme.primary
+                                : Colors.grey,
+                          ),
                         ),
-                      ),
-                    )
-                ],
-              ),
-            )
-          ],
+                      )
+                  ],
+                ),
+              )
+            ],
+          ),
         ),
-      ),
-    ]);
+      ]),
+    );
   }
 }
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -47,8 +47,8 @@ dependencies:
   tutorial_coach_mark: ^1.1.1
   uni_links: ^0.5.1
   vibration: ^1.7.4-nullsafety.0
-  video_player: ^2.1.14
-  visibility_detector: ^0.2.0
+  video_player: ^2.2.7
+  visibility_detector: ^0.2.2
 
 dev_dependencies:
   build_runner: ^2.1.1