Add ability to overlay chat in fullscreen (#116)

lib/screens/channel/chat/chat.dart

@@ -108,7 +108,7 @@ class Chat extends StatelessWidget {
                 ),
               ),
             ),
-            if (chatStore.settings.showBottomBar) ChatBottomBar(chatStore: chatStore),
+            if (chatStore.settings.showBottomBar && !chatStore.settings.fullScreen) ChatBottomBar(chatStore: chatStore),
             if (chatStore.assetsStore.showEmoteMenu)
               SizedBox(
                 height: MediaQuery.of(context).size.height / 3,

lib/screens/channel/chat/widgets/chat_bottom_bar.dart

@@ -77,6 +77,7 @@ class ChatBottomBar extends StatelessWidget {
                     chatStore.settings.landscapeChatWidth < 0.3 &&
                     MediaQuery.of(context).orientation == Orientation.landscape)
                   IconButton(
+                      tooltip: 'Send a Message',
                       onPressed: () {
                         chatStore.expandChat = true;
                         chatStore.textFieldFocusNode.requestFocus();

lib/screens/channel/stores/video_store.dart

@@ -105,6 +105,10 @@ abstract class VideoStoreBase with Store {
       _streamInfo = await twitchApi.getStream(userLogin: userLogin, headers: authStore.headersTwitch);
     } catch (e) {
       debugPrint(e.toString());
+
+      _streamInfo = null;
+      _overlayTimer.cancel();
+      _overlayVisible = true;
     }
   }
 

lib/screens/channel/video/video_overlay.dart

@@ -117,6 +117,11 @@ class VideoOverlay extends StatelessWidget {
       ),
     );
 
+    final chatOverlayButton = IconButton(
+        tooltip: 'Toggle Chat Overlay',
+        onPressed: () => videoStore.settingsStore.fullScreenChatOverlay = !videoStore.settingsStore.fullScreenChatOverlay,
+        icon: const Icon(Icons.chat_bubble_outline));
+
     final refreshButton = IconButton(
       tooltip: 'Refresh',
       icon: const Icon(
@@ -167,6 +172,7 @@ class VideoOverlay extends StatelessWidget {
             child: Row(
               mainAxisAlignment: MainAxisAlignment.end,
               children: [
+                if (videoStore.settingsStore.fullScreen) chatOverlayButton,
                 refreshButton,
                 if (orientation == Orientation.landscape) fullScreenButton,
               ],
@@ -292,6 +298,7 @@ class VideoOverlay extends StatelessWidget {
                     ),
                   ),
                 ),
+                if (videoStore.settingsStore.fullScreen) chatOverlayButton,
                 refreshButton,
                 if (Platform.isIOS && videoStore.settingsStore.pictureInPicture)
                   IconButton(

lib/screens/channel/video_chat.dart

@@ -154,44 +154,52 @@ class _VideoChatState extends State<VideoChat> {
             SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
 
             return Observer(
-              builder: (context) => ColoredBox(
-                color: settingsStore.showVideo ? Colors.black : Theme.of(context).scaffoldBackgroundColor,
-                child: SafeArea(
-                  bottom: false,
-                  child: settingsStore.showVideo
-                      ? settingsStore.fullScreen
-                          ? Stack(
-                              children: [
-                                Visibility(
-                                  visible: false,
-                                  maintainState: true,
-                                  child: chat,
-                                ),
-                                video,
-                              ],
-                            )
-                          : Row(
-                              children: [
-                                Expanded(child: video),
-                                AnimatedContainer(
-                                  duration: const Duration(milliseconds: 200),
-                                  width: _chatStore.expandChat
-                                      ? MediaQuery.of(context).size.width / 2
-                                      : MediaQuery.of(context).size.width * _chatStore.settings.landscapeChatWidth,
-                                  curve: Curves.ease,
-                                  color: Theme.of(context).scaffoldBackgroundColor,
-                                  child: chat,
-                                ),
-                              ],
-                            )
-                      : Column(
-                          children: [
-                            appBar,
-                            Expanded(child: chat),
-                          ],
-                        ),
-                ),
-              ),
+              builder: (context) {
+                final landscapeChat = AnimatedContainer(
+                  duration: const Duration(milliseconds: 200),
+                  width: _chatStore.expandChat
+                      ? MediaQuery.of(context).size.width / 2
+                      : MediaQuery.of(context).size.width * _chatStore.settings.landscapeChatWidth,
+                  curve: Curves.ease,
+                  color: _chatStore.settings.fullScreen ? null : Theme.of(context).scaffoldBackgroundColor,
+                  child: chat,
+                );
+
+                return ColoredBox(
+                  color: settingsStore.showVideo ? Colors.black : Theme.of(context).scaffoldBackgroundColor,
+                  child: SafeArea(
+                    bottom: false,
+                    child: settingsStore.showVideo
+                        ? settingsStore.fullScreen
+                            ? Stack(
+                                alignment: Alignment.topRight,
+                                children: [
+                                  video,
+                                  IgnorePointer(
+                                    ignoring: _videoStore.overlayVisible,
+                                    child: Visibility(
+                                      visible: settingsStore.fullScreenChatOverlay,
+                                      maintainState: true,
+                                      child: landscapeChat,
+                                    ),
+                                  ),
+                                ],
+                              )
+                            : Row(
+                                children: [
+                                  Expanded(child: video),
+                                  landscapeChat,
+                                ],
+                              )
+                        : Column(
+                            children: [
+                              appBar,
+                              Expanded(child: chat),
+                            ],
+                          ),
+                  ),
+                );
+              },
             );
           }
 

lib/screens/settings/stores/settings_store.dart

@@ -153,6 +153,8 @@ abstract class _SettingsStoreBase with Store {
 
   static const defaultExpandInfo = true;
 
+  static const defaultFullScreenChatOverlay = false;
+
   @JsonKey(defaultValue: defaultFullScreen)
   @observable
   var fullScreen = defaultFullScreen;
@@ -161,6 +163,10 @@ abstract class _SettingsStoreBase with Store {
   @observable
   var expandInfo = defaultExpandInfo;
 
+  @JsonKey(defaultValue: defaultFullScreenChatOverlay)
+  @observable
+  var fullScreenChatOverlay = defaultFullScreenChatOverlay;
+
   @action
   void reset() {
     // * General Settings

lib/screens/settings/stores/settings_store.g.dart

@@ -38,7 +38,8 @@ SettingsStore _$SettingsStoreFromJson(Map<String, dynamic> json) =>
           (json['landscapeChatWidth'] as num?)?.toDouble() ?? 0.35
       ..sendCrashLogs = json['sendCrashLogs'] as bool? ?? true
       ..fullScreen = json['fullScreen'] as bool? ?? false
-      ..expandInfo = json['expandInfo'] as bool? ?? true;
+      ..expandInfo = json['expandInfo'] as bool? ?? true
+      ..fullScreenChatOverlay = json['fullScreenChatOverlay'] as bool? ?? false;
 
 Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) =>
     <String, dynamic>{
@@ -66,6 +67,7 @@ Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) =>
       'sendCrashLogs': instance.sendCrashLogs,
       'fullScreen': instance.fullScreen,
       'expandInfo': instance.expandInfo,
+      'fullScreenChatOverlay': instance.fullScreenChatOverlay,
     };
 
 const _$ThemeTypeEnumMap = {
@@ -473,6 +475,23 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
     });
   }
 
+  late final _$fullScreenChatOverlayAtom =
+      Atom(name: '_SettingsStoreBase.fullScreenChatOverlay', context: context);
+
+  @override
+  bool get fullScreenChatOverlay {
+    _$fullScreenChatOverlayAtom.reportRead();
+    return super.fullScreenChatOverlay;
+  }
+
+  @override
+  set fullScreenChatOverlay(bool value) {
+    _$fullScreenChatOverlayAtom.reportWrite(value, super.fullScreenChatOverlay,
+        () {
+      super.fullScreenChatOverlay = value;
+    });
+  }
+
   late final _$_SettingsStoreBaseActionController =
       ActionController(name: '_SettingsStoreBase', context: context);
 
@@ -513,7 +532,8 @@ emoteAutocomplete: ${emoteAutocomplete},
 landscapeChatWidth: ${landscapeChatWidth},
 sendCrashLogs: ${sendCrashLogs},
 fullScreen: ${fullScreen},
-expandInfo: ${expandInfo}
+expandInfo: ${expandInfo},
+fullScreenChatOverlay: ${fullScreenChatOverlay}
     ''';
   }
 }