Add option to change custom overlay opacity (#130)

lib/screens/channel/video_chat.dart

@@ -100,7 +100,7 @@ class _VideoChatState extends State<VideoChat> {
             opacity: _videoStore.overlayVisible ? 1.0 : 0.0,
             duration: const Duration(milliseconds: 200),
             child: ColoredBox(
-              color: const Color.fromRGBO(0, 0, 0, 0.5),
+              color: Colors.black.withOpacity(settingsStore.overlayOpacity),
               child: IgnorePointer(
                 ignoring: !_videoStore.overlayVisible,
                 child: videoOverlay,

lib/screens/settings/sections/video_settings.dart

@@ -49,6 +49,23 @@ class VideoSettings extends StatelessWidget {
             value: settingsStore.toggleableOverlay,
             onChanged: settingsStore.showVideo ? (newValue) => settingsStore.toggleableOverlay = newValue : null,
           ),
+          const SizedBox(height: 15.0),
+          ListTile(
+            title: Row(
+              children: [
+                const Text('Custom Overlay Opacity'),
+                const Spacer(),
+                Text('${(settingsStore.overlayOpacity * 100).toStringAsFixed(0)}%'),
+              ],
+            ),
+            subtitle: Slider.adaptive(
+              value: settingsStore.overlayOpacity,
+              min: 0.0,
+              max: 1.0,
+              divisions: 10,
+              onChanged: (newValue) => settingsStore.overlayOpacity = newValue,
+            ),
+          ),
         ],
       ),
     );

lib/screens/settings/stores/settings_store.dart

@@ -46,6 +46,8 @@ abstract class _SettingsStoreBase with Store {
 
   static const defaultPictureInPicture = false;
 
+  static const defaultOverlayOpacity = 0.5;
+
   @JsonKey(defaultValue: defaultShowVideo)
   @observable
   var showVideo = defaultShowVideo;
@@ -62,6 +64,10 @@ abstract class _SettingsStoreBase with Store {
   @observable
   var pictureInPicture = defaultPictureInPicture;
 
+  @JsonKey(defaultValue: defaultOverlayOpacity)
+  @observable
+  var overlayOpacity = defaultOverlayOpacity;
+
   // * Chat Settings
   static const defaultShowBottomBar = true;
 
@@ -198,6 +204,7 @@ abstract class _SettingsStoreBase with Store {
     showOverlay = defaultShowOverlay;
     toggleableOverlay = defaultToggleableOverlay;
     pictureInPicture = defaultPictureInPicture;
+    overlayOpacity = defaultOverlayOpacity;
 
     // * Chat Settings
     showBottomBar = defaultShowBottomBar;

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

@@ -18,6 +18,7 @@ SettingsStore _$SettingsStoreFromJson(Map<String, dynamic> json) =>
       ..showOverlay = json['showOverlay'] as bool? ?? true
       ..toggleableOverlay = json['toggleableOverlay'] as bool? ?? false
       ..pictureInPicture = json['pictureInPicture'] as bool? ?? false
+      ..overlayOpacity = (json['overlayOpacity'] as num?)?.toDouble() ?? 0.5
       ..showBottomBar = json['showBottomBar'] as bool? ?? true
       ..showDeletedMessages = json['showDeletedMessages'] as bool? ?? false
       ..showZeroWidth = json['showZeroWidth'] as bool? ?? false
@@ -54,6 +55,7 @@ Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) =>
       'showOverlay': instance.showOverlay,
       'toggleableOverlay': instance.toggleableOverlay,
       'pictureInPicture': instance.pictureInPicture,
+      'overlayOpacity': instance.overlayOpacity,
       'showBottomBar': instance.showBottomBar,
       'showDeletedMessages': instance.showDeletedMessages,
       'showZeroWidth': instance.showZeroWidth,
@@ -224,6 +226,22 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
     });
   }
 
+  late final _$overlayOpacityAtom =
+      Atom(name: '_SettingsStoreBase.overlayOpacity', context: context);
+
+  @override
+  double get overlayOpacity {
+    _$overlayOpacityAtom.reportRead();
+    return super.overlayOpacity;
+  }
+
+  @override
+  set overlayOpacity(double value) {
+    _$overlayOpacityAtom.reportWrite(value, super.overlayOpacity, () {
+      super.overlayOpacity = value;
+    });
+  }
+
   late final _$showBottomBarAtom =
       Atom(name: '_SettingsStoreBase.showBottomBar', context: context);
 
@@ -574,6 +592,7 @@ showVideo: ${showVideo},
 showOverlay: ${showOverlay},
 toggleableOverlay: ${toggleableOverlay},
 pictureInPicture: ${pictureInPicture},
+overlayOpacity: ${overlayOpacity},
 showBottomBar: ${showBottomBar},
 showDeletedMessages: ${showDeletedMessages},
 showZeroWidth: ${showZeroWidth},