Add PiP button setting, tweak ordering & subtitles

lib/screens/channel/video/video_overlay.dart

@@ -119,7 +119,7 @@ class VideoOverlay extends StatelessWidget {
                                   ),
                                 ),
                               ),
-                              if (Platform.isIOS)
+                              if (Platform.isIOS && videoStore.settingsStore.pictureInPicture)
                                 IconButton(
                                   tooltip: 'Picture-in-Picture',
                                   icon: const Icon(

lib/screens/settings/account/account_settings.dart

@@ -42,7 +42,7 @@ class AccountSettings extends StatelessWidget {
         ListTile(
           isThreeLine: true,
           title: const Text('Log in to WebView'),
-          subtitle: const Text('Lets you avoid ads on your subscribed streamers (or if you have Turbo).'),
+          subtitle: const Text('Lets you avoid ads on your subscribed streamers or if you have Turbo.'),
           trailing: Icon(Icons.adaptive.arrow_forward),
           onTap: () => Navigator.push(
             context,

lib/screens/settings/chat_settings.dart

@@ -21,13 +21,6 @@ class ChatSettings extends StatelessWidget {
               value: settingsStore.showDeletedMessages,
               onChanged: (newValue) => settingsStore.showDeletedMessages = newValue,
             ),
-            SwitchListTile.adaptive(
-              isThreeLine: true,
-              title: const Text('Use readable colors for chat names'),
-              subtitle: const Text('Make chat names more readable by boosting the lightness of darker colors.'),
-              value: settingsStore.useReadableColors,
-              onChanged: (newValue) => settingsStore.useReadableColors = newValue,
-            ),
             SwitchListTile.adaptive(
               isThreeLine: true,
               title: const Text('Show zero-width emotes'),
@@ -47,6 +40,13 @@ class ChatSettings extends StatelessWidget {
               value: settingsStore.useTwelveHourTimestamps,
               onChanged: settingsStore.showTimestamps ? (newValue) => settingsStore.useTwelveHourTimestamps = newValue : null,
             ),
+            SwitchListTile.adaptive(
+              isThreeLine: true,
+              title: const Text('Use readable colors for chat names'),
+              subtitle: const Text('Makes dark names in chat readable by boosting their lightness value.'),
+              value: settingsStore.useReadableColors,
+              onChanged: (newValue) => settingsStore.useReadableColors = newValue,
+            ),
           ],
         );
       },

lib/screens/settings/stores/settings_store.dart

@@ -17,6 +17,9 @@ abstract class _SettingsStoreBase with Store {
   @observable
   var useOledTheme = false;
 
+  @observable
+  var showThumbnailUptime = true;
+
   // Video Settings
   @observable
   var showVideo = true;
@@ -25,12 +28,9 @@ abstract class _SettingsStoreBase with Store {
   var showOverlay = true;
 
   @observable
-  var showThumbnailUptime = true;
+  var pictureInPicture = false;
 
   // Chat Settings
-  @observable
-  var useReadableColors = false;
-
   @observable
   var showDeletedMessages = false;
 
@@ -43,12 +43,15 @@ abstract class _SettingsStoreBase with Store {
   @observable
   var useTwelveHourTimestamps = false;
 
+  @observable
+  var useReadableColors = true;
+
   // Global configs
   @observable
   var fullScreen = false;
 
   @observable
-  var expandInfo = false;
+  var expandInfo = true;
 
   _SettingsStoreBase() {
     // A MobX reaction that will toggle immersive mode whenever the user enters and exits fullscreen mode.

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

@@ -6,29 +6,33 @@ part of 'settings_store.dart';
 // JsonSerializableGenerator
 // **************************************************************************
 
-SettingsStore _$SettingsStoreFromJson(Map<String, dynamic> json) => SettingsStore()
-  ..useOledTheme = json['useOledTheme'] as bool
-  ..showVideo = json['showVideo'] as bool
-  ..showOverlay = json['showOverlay'] as bool
-  ..showThumbnailUptime = json['showThumbnailUptime'] as bool
-  ..useReadableColors = json['useReadableColors'] as bool
-  ..showDeletedMessages = json['hideBannedMessages'] as bool
-  ..showZeroWidth = json['showZeroWidth'] as bool
-  ..showTimestamps = json['showTimestamps'] as bool
-  ..useTwelveHourTimestamps = json['useTwelveHourTimestamps'] as bool
-  ..fullScreen = json['fullScreen'] as bool
-  ..expandInfo = json['expandInfo'] as bool;
+SettingsStore _$SettingsStoreFromJson(Map<String, dynamic> json) =>
+    SettingsStore()
+      ..useOledTheme = json['useOledTheme'] as bool
+      ..showThumbnailUptime = json['showThumbnailUptime'] as bool
+      ..showVideo = json['showVideo'] as bool
+      ..showOverlay = json['showOverlay'] as bool
+      ..pictureInPicture = json['pictureInPicture'] as bool
+      ..showDeletedMessages = json['showDeletedMessages'] as bool
+      ..showZeroWidth = json['showZeroWidth'] as bool
+      ..showTimestamps = json['showTimestamps'] as bool
+      ..useTwelveHourTimestamps = json['useTwelveHourTimestamps'] as bool
+      ..useReadableColors = json['useReadableColors'] as bool
+      ..fullScreen = json['fullScreen'] as bool
+      ..expandInfo = json['expandInfo'] as bool;
 
-Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) => <String, dynamic>{
+Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) =>
+    <String, dynamic>{
       'useOledTheme': instance.useOledTheme,
+      'showThumbnailUptime': instance.showThumbnailUptime,
       'showVideo': instance.showVideo,
       'showOverlay': instance.showOverlay,
-      'showThumbnailUptime': instance.showThumbnailUptime,
-      'useReadableColors': instance.useReadableColors,
-      'hideBannedMessages': instance.showDeletedMessages,
+      'pictureInPicture': instance.pictureInPicture,
+      'showDeletedMessages': instance.showDeletedMessages,
       'showZeroWidth': instance.showZeroWidth,
       'showTimestamps': instance.showTimestamps,
       'useTwelveHourTimestamps': instance.useTwelveHourTimestamps,
+      'useReadableColors': instance.useReadableColors,
       'fullScreen': instance.fullScreen,
       'expandInfo': instance.expandInfo,
     };
@@ -55,6 +59,22 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
     });
   }
 
+  final _$showThumbnailUptimeAtom =
+      Atom(name: '_SettingsStoreBase.showThumbnailUptime');
+
+  @override
+  bool get showThumbnailUptime {
+    _$showThumbnailUptimeAtom.reportRead();
+    return super.showThumbnailUptime;
+  }
+
+  @override
+  set showThumbnailUptime(bool value) {
+    _$showThumbnailUptimeAtom.reportWrite(value, super.showThumbnailUptime, () {
+      super.showThumbnailUptime = value;
+    });
+  }
+
   final _$showVideoAtom = Atom(name: '_SettingsStoreBase.showVideo');
 
   @override
@@ -85,47 +105,34 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
     });
   }
 
-  final _$showThumbnailUptimeAtom = Atom(name: '_SettingsStoreBase.showThumbnailUptime');
+  final _$pictureInPictureAtom =
+      Atom(name: '_SettingsStoreBase.pictureInPicture');
 
   @override
-  bool get showThumbnailUptime {
-    _$showThumbnailUptimeAtom.reportRead();
-    return super.showThumbnailUptime;
+  bool get pictureInPicture {
+    _$pictureInPictureAtom.reportRead();
+    return super.pictureInPicture;
   }
 
   @override
-  set showThumbnailUptime(bool value) {
-    _$showThumbnailUptimeAtom.reportWrite(value, super.showThumbnailUptime, () {
-      super.showThumbnailUptime = value;
+  set pictureInPicture(bool value) {
+    _$pictureInPictureAtom.reportWrite(value, super.pictureInPicture, () {
+      super.pictureInPicture = value;
     });
   }
 
-  final _$useReadableColorsAtom = Atom(name: '_SettingsStoreBase.useReadableColors');
-
-  @override
-  bool get useReadableColors {
-    _$useReadableColorsAtom.reportRead();
-    return super.useReadableColors;
-  }
-
-  @override
-  set useReadableColors(bool value) {
-    _$useReadableColorsAtom.reportWrite(value, super.useReadableColors, () {
-      super.useReadableColors = value;
-    });
-  }
-
-  final _$hideBannedMessagesAtom = Atom(name: '_SettingsStoreBase.hideBannedMessages');
+  final _$showDeletedMessagesAtom =
+      Atom(name: '_SettingsStoreBase.showDeletedMessages');
 
   @override
   bool get showDeletedMessages {
-    _$hideBannedMessagesAtom.reportRead();
+    _$showDeletedMessagesAtom.reportRead();
     return super.showDeletedMessages;
   }
 
   @override
   set showDeletedMessages(bool value) {
-    _$hideBannedMessagesAtom.reportWrite(value, super.showDeletedMessages, () {
+    _$showDeletedMessagesAtom.reportWrite(value, super.showDeletedMessages, () {
       super.showDeletedMessages = value;
     });
   }
@@ -160,7 +167,8 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
     });
   }
 
-  final _$useTwelveHourTimestampsAtom = Atom(name: '_SettingsStoreBase.useTwelveHourTimestamps');
+  final _$useTwelveHourTimestampsAtom =
+      Atom(name: '_SettingsStoreBase.useTwelveHourTimestamps');
 
   @override
   bool get useTwelveHourTimestamps {
@@ -170,11 +178,28 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
 
   @override
   set useTwelveHourTimestamps(bool value) {
-    _$useTwelveHourTimestampsAtom.reportWrite(value, super.useTwelveHourTimestamps, () {
+    _$useTwelveHourTimestampsAtom
+        .reportWrite(value, super.useTwelveHourTimestamps, () {
       super.useTwelveHourTimestamps = value;
     });
   }
 
+  final _$useReadableColorsAtom =
+      Atom(name: '_SettingsStoreBase.useReadableColors');
+
+  @override
+  bool get useReadableColors {
+    _$useReadableColorsAtom.reportRead();
+    return super.useReadableColors;
+  }
+
+  @override
+  set useReadableColors(bool value) {
+    _$useReadableColorsAtom.reportWrite(value, super.useReadableColors, () {
+      super.useReadableColors = value;
+    });
+  }
+
   final _$fullScreenAtom = Atom(name: '_SettingsStoreBase.fullScreen');
 
   @override
@@ -209,14 +234,15 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
   String toString() {
     return '''
 useOledTheme: ${useOledTheme},
+showThumbnailUptime: ${showThumbnailUptime},
 showVideo: ${showVideo},
 showOverlay: ${showOverlay},
-showThumbnailUptime: ${showThumbnailUptime},
-useReadableColors: ${useReadableColors},
-hideBannedMessages: ${showDeletedMessages},
+pictureInPicture: ${pictureInPicture},
+showDeletedMessages: ${showDeletedMessages},
 showZeroWidth: ${showZeroWidth},
 showTimestamps: ${showTimestamps},
 useTwelveHourTimestamps: ${useTwelveHourTimestamps},
+useReadableColors: ${useReadableColors},
 fullScreen: ${fullScreen},
 expandInfo: ${expandInfo}
     ''';

lib/screens/settings/video_settings.dart

@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:frosty/screens/settings/stores/settings_store.dart';
@@ -24,10 +26,16 @@ class VideoSettings extends StatelessWidget {
             SwitchListTile.adaptive(
               isThreeLine: true,
               title: const Text('Use custom video overlay'),
-              subtitle: const Text('Replaces the default web video overlay with a simple and mobile-friendly version.'),
+              subtitle: const Text('Replaces the default video overlay with a mobile-friendly version.'),
               value: settingsStore.showOverlay,
               onChanged: settingsStore.showVideo ? (newValue) => settingsStore.showOverlay = newValue : null,
             ),
+            if (Platform.isIOS)
+              SwitchListTile.adaptive(
+                title: const Text('Picture-in-picture button'),
+                value: settingsStore.pictureInPicture,
+                onChanged: settingsStore.showOverlay ? (newValue) => settingsStore.pictureInPicture = newValue : null,
+              ),
           ],
         );
       },