chore: adjust player color gradient according to position (#1295)

Author: Feichtmeier

lib/app/view/desktop_home_page.dart

@@ -61,7 +61,8 @@ class _DesktopHomePageState extends State<DesktopHomePage> {
   @override
   Widget build(BuildContext context) {
     final playerToTheRight = context.mediaQuerySize.width > kSideBarThreshHold;
-    final isFullScreen = watchPropertyValue((AppModel m) => m.fullWindowMode);
+    final isInFullWindowMode =
+        watchPropertyValue((AppModel m) => m.fullWindowMode);
     final isVideo = watchPropertyValue((PlayerModel m) => m.isVideo == true);
 
     registerStreamHandler(
@@ -121,7 +122,7 @@ class _DesktopHomePageState extends State<DesktopHomePage> {
               ),
           ],
         ),
-        if (isFullScreen == true)
+        if (isInFullWindowMode == true)
           Scaffold(
             backgroundColor: isVideo ? Colors.black : null,
             body: const PlayerView(position: PlayerPosition.fullWindow),

lib/player/view/bottom_player.dart

@@ -142,6 +142,7 @@ class BottomPlayer extends StatelessWidget with WatchItMixin {
       children: [
         if (!isMobile)
           PlayerColor(
+            position: PlayerPosition.bottom,
             alpha: 0.2,
             size: Size(
               context.mediaQuerySize.width,

lib/player/view/full_height_player.dart

@@ -179,7 +179,14 @@ class FullHeightPlayer extends StatelessWidget with WatchItMixin {
     }
 
     return Stack(
-      children: [PlayerColor(alpha: 0.4, size: size), fullHeightPlayer],
+      children: [
+        PlayerColor(
+          alpha: 0.4,
+          size: size,
+          position: playerPosition,
+        ),
+        fullHeightPlayer,
+      ],
     );
   }
 }

lib/player/view/player_color.dart

@@ -5,35 +5,37 @@ import 'package:yaru/theme.dart';
 import '../../extensions/build_context_x.dart';
 import '../../extensions/theme_data_x.dart';
 import '../player_model.dart';
+import 'player_view.dart';
 
 class PlayerColor extends StatelessWidget with WatchItMixin {
-  const PlayerColor({super.key, required this.size, required this.alpha});
+  const PlayerColor({
+    super.key,
+    required this.size,
+    required this.alpha,
+    required this.position,
+  });
 
   final Size size;
   final double alpha;
+  final PlayerPosition position;
 
   @override
   Widget build(BuildContext context) {
     final theme = context.theme;
     final baseColor =
-        watchPropertyValue((PlayerModel m) => m.color?.withValues(alpha: 0.3));
+        watchPropertyValue((PlayerModel m) => m.color?.withValues(alpha: 0.4));
 
-    final color = baseColor ??
-        theme.cardColor.scale(lightness: theme.isLight ? -0.2 : 0.2);
+    final color = (baseColor ?? theme.cardColor).scale(
+      lightness: theme.isLight ? -0.1 : 0.2,
+      saturation: theme.isLight ? 0.9 : 0.5,
+    );
     return Opacity(
-      opacity: alpha * (theme.isLight ? 0.7 : 0.8),
+      opacity: alpha * 0.8,
       child: Container(
         width: size.width,
         height: size.height,
         decoration: BoxDecoration(
-          gradient: LinearGradient(
-            colors: [
-              color.withValues(alpha: 0.02),
-              color,
-            ],
-            begin: Alignment.topRight,
-            end: Alignment.bottomLeft,
-          ),
+          gradient: position.getGradient(color),
         ),
       ),
     );

lib/player/view/player_view.dart

@@ -63,5 +63,29 @@ class _PlayerViewState extends State<PlayerView> {
 enum PlayerPosition {
   bottom,
   sideBar,
-  fullWindow,
+  fullWindow;
+
+  LinearGradient getGradient(Color color) {
+    final colors = [
+      color,
+      color.withValues(alpha: 0.01),
+    ];
+    return switch (this) {
+      PlayerPosition.bottom => LinearGradient(
+          colors: colors,
+          begin: Alignment.centerLeft,
+          end: Alignment.centerRight,
+        ),
+      PlayerPosition.sideBar => LinearGradient(
+          colors: colors,
+          begin: Alignment.topRight,
+          end: Alignment.bottomLeft,
+        ),
+      PlayerPosition.fullWindow => LinearGradient(
+          colors: colors,
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+        )
+    };
+  }
 }

lib/settings/view/settings_tile.dart

@@ -9,6 +9,7 @@ import '../../app/connectivity_model.dart';
 import '../../app/view/routing_manager.dart';
 import '../../app_config.dart';
 import '../../common/page_ids.dart';
+import '../../common/view/global_keys.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/progress.dart';
 import '../../extensions/build_context_x.dart';
@@ -38,9 +39,15 @@ class SettingsTile extends StatelessWidget with WatchItMixin {
             selected: selectedPageId == PageIDs.settings,
             leading: Icon(Iconz.settings),
             title: Text(context.l10n.settings),
-            onTap: () => di<RoutingManager>().push(
-              pageId: PageIDs.settings,
-            ),
+            onTap: () {
+              masterScaffoldKey.currentState
+                ?..closeEndDrawer()
+                ..closeDrawer();
+
+              di<RoutingManager>().push(
+                pageId: PageIDs.settings,
+              );
+            },
           ),
           if (trailing != null) Positioned(right: 15, child: trailing),
         ],