Add option to force vertical chat in landscape mode (#196)

* Add option to force vertical chat in landscape

* Set `isThreeLine` for new setting

Author: tommyxchow

lib/screens/channel/channel.dart

@@ -166,11 +166,11 @@ class _VideoChatState extends State<VideoChat> {
     final videoChat = Scaffold(
       body: OrientationBuilder(
         builder: (context, orientation) {
-          if (orientation == Orientation.landscape) {
-            SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
+          return Observer(
+            builder: (_) {
+              if (orientation == Orientation.landscape && !settingsStore.landscapeForceVerticalChat) {
+                SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
 
-            return Observer(
-              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.chatWidth,
@@ -224,27 +224,21 @@ class _VideoChatState extends State<VideoChat> {
                           ),
                   ),
                 );
-              },
-            );
-          }
-
-          SystemChrome.setEnabledSystemUIMode(
-            SystemUiMode.manual,
-            overlays: SystemUiOverlay.values,
-          );
-          return SafeArea(
-            child: Column(
-              children: [
-                Observer(
-                  builder: (_) {
-                    if (!settingsStore.showVideo) return appBar;
+              }
 
-                    return AspectRatio(aspectRatio: 16 / 9, child: video);
-                  },
+              SystemChrome.setEnabledSystemUIMode(
+                SystemUiMode.manual,
+                overlays: SystemUiOverlay.values,
+              );
+              return SafeArea(
+                child: Column(
+                  children: [
+                    if (!settingsStore.showVideo) appBar else AspectRatio(aspectRatio: 16 / 9, child: video),
+                    Expanded(child: chat),
+                  ],
                 ),
-                Expanded(child: chat),
-              ],
-            ),
+              );
+            },
           );
         },
       ),

lib/screens/settings/chat_settings.dart

@@ -99,6 +99,13 @@ class _ChatSettingsState extends State<ChatSettings> {
             value: settingsStore.landscapeChatLeftSide,
             onChanged: (newValue) => settingsStore.landscapeChatLeftSide = newValue,
           ),
+          SwitchListTile.adaptive(
+            isThreeLine: true,
+            title: const Text('Force vertical chat in landscape mode'),
+            subtitle: const Text('Note: this option is intended for tablets and other larger displays.'),
+            value: settingsStore.landscapeForceVerticalChat,
+            onChanged: (newValue) => settingsStore.landscapeForceVerticalChat = newValue,
+          ),
           SwitchListTile.adaptive(
             isThreeLine: true,
             title: const Text('Notifications on bottom'),

lib/screens/settings/stores/settings_store.dart

@@ -93,6 +93,7 @@ abstract class _SettingsStoreBase with Store {
   static const defaultShowBottomBar = true;
   static const defaultEmoteMenuButtonOnLeft = false;
   static const defaultLandscapeChatLeftSide = false;
+  static const defaultLandscapeForceVerticalChat = false;
   static const defaultChatNotificationsOnBottom = false;
   static const defaultChatWidth = 0.3;
   static const defaultFullScreenChatOverlayOpacity = 0.5;
@@ -135,6 +136,10 @@ abstract class _SettingsStoreBase with Store {
   @observable
   var landscapeChatLeftSide = defaultLandscapeChatLeftSide;
 
+  @JsonKey(defaultValue: defaultLandscapeForceVerticalChat)
+  @observable
+  var landscapeForceVerticalChat = defaultLandscapeForceVerticalChat;
+
   @JsonKey(defaultValue: defaultChatNotificationsOnBottom)
   @observable
   var chatNotificationsOnBottom = defaultChatNotificationsOnBottom;
@@ -203,6 +208,7 @@ abstract class _SettingsStoreBase with Store {
     showBottomBar = defaultShowBottomBar;
     emoteMenuButtonOnLeft = defaultEmoteMenuButtonOnLeft;
     landscapeChatLeftSide = defaultLandscapeChatLeftSide;
+    landscapeForceVerticalChat = defaultLandscapeForceVerticalChat;
     chatNotificationsOnBottom = defaultChatNotificationsOnBottom;
     landscapeCutout = defaultLandscapeCutout;
     chatWidth = defaultChatWidth;