Tweak video store & overlay

lib/screens/channel/video/video_overlay.dart

@@ -67,6 +67,7 @@ class VideoOverlay extends StatelessWidget {
                           ),
                           const Spacer(),
                           Row(
+                            crossAxisAlignment: CrossAxisAlignment.end,
                             children: [
                               Padding(
                                 padding: const EdgeInsets.all(10.0),
@@ -94,7 +95,7 @@ class VideoOverlay extends StatelessWidget {
                                   Icons.picture_in_picture_alt_rounded,
                                   color: Color(0xFFFFFFFF),
                                 ),
-                                onPressed: videoStore.enterPictureInPicture,
+                                onPressed: videoStore.requestPictureInPicture,
                               ),
                               IconButton(
                                 icon: const Icon(
@@ -109,6 +110,7 @@ class VideoOverlay extends StatelessWidget {
                       ),
                       Center(
                         child: IconButton(
+                          iconSize: 50.0,
                           icon: videoStore.paused
                               ? const Icon(
                                   Icons.play_arrow,

lib/screens/channel/video/video_store.dart

@@ -13,50 +13,50 @@ class VideoStore = _VideoStoreBase with _$VideoStore;
 abstract class _VideoStoreBase with Store {
   late final WebViewController controller;
 
-  late Timer timer;
+  late Timer overlayTimer;
+  late Timer updateTimer;
 
-  @observable
-  var menuVisible = true;
+  @readonly
+  var _menuVisible = true;
 
-  @observable
-  var paused = false;
+  @readonly
+  var _paused = false;
 
-  @observable
-  StreamTwitch? streamInfo;
+  @readonly
+  StreamTwitch? _streamInfo;
 
   final String userLogin;
 
   final AuthStore authStore;
 
   _VideoStoreBase({required this.userLogin, required this.authStore}) {
-    timer = Timer(const Duration(seconds: 3), () => menuVisible = false);
+    overlayTimer = Timer(const Duration(seconds: 3), () => _menuVisible = false);
     updateStreamInfo();
   }
 
   @action
   void handlePausePlay() {
-    if (paused) {
+    if (_paused) {
       controller.runJavascript('document.getElementsByTagName("video")[0].play();');
     } else {
       controller.runJavascript('document.getElementsByTagName("video")[0].pause();');
     }
 
-    paused = !paused;
+    _paused = !_paused;
   }
 
   @action
   void handleVideoTap() {
-    if (menuVisible) {
-      timer.cancel();
+    if (_menuVisible) {
+      overlayTimer.cancel();
 
-      menuVisible = false;
+      _menuVisible = false;
     } else {
-      timer.cancel();
-      timer = Timer(const Duration(seconds: 5), () {
-        menuVisible = false;
-      });
+      overlayTimer.cancel();
+      overlayTimer = Timer(const Duration(seconds: 5), () => _menuVisible = false);
+
+      _menuVisible = true;
 
-      menuVisible = true;
       updateStreamInfo();
     }
   }
@@ -65,7 +65,7 @@ abstract class _VideoStoreBase with Store {
   Future<void> updateStreamInfo() async {
     final updatedStreamInfo = await Twitch.getStream(userLogin: userLogin, headers: authStore.headersTwitch);
     if (updatedStreamInfo != null) {
-      streamInfo = updatedStreamInfo;
+      _streamInfo = updatedStreamInfo;
     }
   }
 
@@ -74,14 +74,15 @@ abstract class _VideoStoreBase with Store {
     controller.runJavascript('document.getElementsByTagName("video")[0].muted = false;');
   }
 
-  void enterPictureInPicture() {
-    controller.runJavascript('document.getElementsByTagName("video")[0].disablePictureInPicture = false;');
+  void requestPictureInPicture() {
     controller.runJavascript('document.getElementsByTagName("video")[0].requestPictureInPicture();');
   }
 
   void requestFullscreen() {
-    Platform.isIOS
-        ? controller.runJavascript('document.getElementsByTagName("video")[0].webkitEnterFullscreen();')
-        : controller.runJavascript('document.getElementsByTagName("video")[0].requestFullscreen();');
+    if (Platform.isIOS) {
+      controller.runJavascript('document.getElementsByTagName("video")[0].webkitEnterFullscreen();');
+    } else {
+      controller.runJavascript('document.getElementsByTagName("video")[0].requestFullscreen();');
+    }
   }
 }

lib/screens/channel/video/video_store.g.dart

@@ -9,48 +9,54 @@ part of 'video_store.dart';
 // ignore_for_file: non_constant_identifier_names, unnecessary_brace_in_string_interps, unnecessary_lambdas, prefer_expression_function_bodies, lines_longer_than_80_chars, avoid_as, avoid_annotating_with_dynamic
 
 mixin _$VideoStore on _VideoStoreBase, Store {
-  final _$menuVisibleAtom = Atom(name: '_VideoStoreBase.menuVisible');
+  final _$_menuVisibleAtom = Atom(name: '_VideoStoreBase._menuVisible');
 
-  @override
   bool get menuVisible {
-    _$menuVisibleAtom.reportRead();
-    return super.menuVisible;
+    _$_menuVisibleAtom.reportRead();
+    return super._menuVisible;
   }
 
   @override
-  set menuVisible(bool value) {
-    _$menuVisibleAtom.reportWrite(value, super.menuVisible, () {
-      super.menuVisible = value;
+  bool get _menuVisible => menuVisible;
+
+  @override
+  set _menuVisible(bool value) {
+    _$_menuVisibleAtom.reportWrite(value, super._menuVisible, () {
+      super._menuVisible = value;
     });
   }
 
-  final _$pausedAtom = Atom(name: '_VideoStoreBase.paused');
+  final _$_pausedAtom = Atom(name: '_VideoStoreBase._paused');
 
-  @override
   bool get paused {
-    _$pausedAtom.reportRead();
-    return super.paused;
+    _$_pausedAtom.reportRead();
+    return super._paused;
   }
 
   @override
-  set paused(bool value) {
-    _$pausedAtom.reportWrite(value, super.paused, () {
-      super.paused = value;
+  bool get _paused => paused;
+
+  @override
+  set _paused(bool value) {
+    _$_pausedAtom.reportWrite(value, super._paused, () {
+      super._paused = value;
     });
   }
 
-  final _$streamInfoAtom = Atom(name: '_VideoStoreBase.streamInfo');
+  final _$_streamInfoAtom = Atom(name: '_VideoStoreBase._streamInfo');
 
-  @override
   StreamTwitch? get streamInfo {
-    _$streamInfoAtom.reportRead();
-    return super.streamInfo;
+    _$_streamInfoAtom.reportRead();
+    return super._streamInfo;
   }
 
   @override
-  set streamInfo(StreamTwitch? value) {
-    _$streamInfoAtom.reportWrite(value, super.streamInfo, () {
-      super.streamInfo = value;
+  StreamTwitch? get _streamInfo => streamInfo;
+
+  @override
+  set _streamInfo(StreamTwitch? value) {
+    _$_streamInfoAtom.reportWrite(value, super._streamInfo, () {
+      super._streamInfo = value;
     });
   }
 
@@ -90,9 +96,7 @@ mixin _$VideoStore on _VideoStoreBase, Store {
   @override
   String toString() {
     return '''
-menuVisible: ${menuVisible},
-paused: ${paused},
-streamInfo: ${streamInfo}
+
     ''';
   }
 }