feat: improve hotkeys in fullwindowmode and make play and pin buttons accessible (#1294)

Feichtmeier · web-flow · commit 7c7bbe7ade77 · 2025-05-12T19:36:48.000Z
diff --git a/lib/app/view/master_tile.dart b/lib/app/view/master_tile.dart
@@ -8,6 +8,7 @@ import '../../common/page_ids.dart';
 import '../../common/view/global_keys.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/spaced_divider.dart';
+import '../../common/view/theme.dart';
 import '../../common/view/ui_constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../library/library_model.dart';
@@ -166,9 +167,10 @@ class __PlayAbleMasterTileState extends State<_PlayAbleMasterTile> {
             Positioned(
               right: 25,
               top: 12,
-              child: CircleAvatar(
-                radius: kTinyButtonSize / 2,
+              child: SizedBox.square(
+                dimension: kTinyButtonSize,
                 child: IconButton(
+                  style: tonedIconButtonStyle(context.colorScheme),
                   onPressed: () async {
                     final audios = await getAudiosById(widget.pageId);
                     if (audios?.firstOrNull?.audioType == AudioType.radio) {
diff --git a/lib/app/view/mouse_and_keyboard_command_wrapper.dart b/lib/app/view/mouse_and_keyboard_command_wrapper.dart
@@ -6,6 +6,7 @@ import 'package:watch_it/watch_it.dart';
 import '../../common/data/audio_type.dart';
 import '../../common/page_ids.dart';
 import '../../search/search_model.dart';
+import '../app_model.dart';
 import 'back_gesture.dart';
 import 'routing_manager.dart';
 
@@ -36,9 +37,17 @@ class MouseAndKeyboardCommandWrapper extends StatelessWidget {
             _SearchIntent: CallbackAction<_SearchIntent>(
               onInvoke: (intent) {
                 final currentPageId = di<RoutingManager>().selectedPageId;
+
                 if (currentPageId == PageIDs.searchPage) {
-                  di<RoutingManager>().pop();
+                  if (di<AppModel>().fullWindowMode ?? false) {
+                    di<AppModel>().setFullWindowMode(false);
+                  } else {
+                    di<RoutingManager>().pop();
+                  }
                 } else {
+                  if (di<AppModel>().fullWindowMode ?? false) {
+                    di<AppModel>().setFullWindowMode(false);
+                  }
                   di<SearchModel>().setAudioType(
                     switch (currentPageId) {
                       PageIDs.localAudio => AudioType.local,
@@ -48,17 +57,24 @@ class MouseAndKeyboardCommandWrapper extends StatelessWidget {
                   );
                   di<RoutingManager>().push(pageId: PageIDs.searchPage);
                 }
+
                 return null;
               },
             ),
             _SettingsIntent: CallbackAction<_SettingsIntent>(
               onInvoke: (intent) {
+                if (di<AppModel>().fullWindowMode ?? false) {
+                  di<AppModel>().setFullWindowMode(false);
+                }
                 di<RoutingManager>().push(pageId: PageIDs.settings);
                 return null;
               },
             ),
             _BackIntent: CallbackAction<_BackIntent>(
               onInvoke: (intent) {
+                if (di<AppModel>().fullWindowMode ?? false) {
+                  di<AppModel>().setFullWindowMode(false);
+                }
                 di<RoutingManager>().pop();
                 return null;
               },
diff --git a/lib/common/view/audio_card_vignette.dart b/lib/common/view/audio_card_vignette.dart
@@ -6,7 +6,7 @@ import '../../extensions/taget_platform_x.dart';
 import '../../l10n/l10n.dart';
 import 'theme.dart';
 
-class AudioCardVignette extends StatelessWidget {
+class AudioCardVignette extends StatefulWidget {
   const AudioCardVignette({
     super.key,
     this.onTap,
@@ -16,6 +16,12 @@ class AudioCardVignette extends StatelessWidget {
   final void Function()? onTap;
   final IconData iconData;
 
+  @override
+  State<AudioCardVignette> createState() => _AudioCardVignetteState();
+}
+
+class _AudioCardVignetteState extends State<AudioCardVignette> {
+  bool _focused = false;
   @override
   Widget build(BuildContext context) {
     final colorScheme = context.colorScheme;
@@ -27,17 +33,21 @@ class AudioCardVignette extends StatelessWidget {
       message: context.l10n.unPinAlbum,
       child: InkWell(
         borderRadius: borderRadius,
-        onTap: onTap,
+        onHover: (v) => setState(() => _focused = v),
+        onFocusChange: (v) => setState(() => _focused = v),
+        onTap: widget.onTap,
         child: Container(
           decoration: BoxDecoration(
-            color: colorScheme.inverseSurface,
+            color: _focused ? colorScheme.primary : colorScheme.inverseSurface,
             borderRadius: borderRadius,
           ),
           width: audioCardDimension / (isMobile ? 3 : 4),
           height: audioCardDimension / (isMobile ? 3 : 4),
           child: Icon(
-            iconData,
-            color: colorScheme.onInverseSurface,
+            widget.iconData,
+            color:
+                _focused ? colorScheme.onPrimary : colorScheme.onInverseSurface,
+            semanticLabel: context.l10n.unPinAlbum,
           ),
         ),
       ),
diff --git a/lib/common/view/avatar_play_button.dart b/lib/common/view/avatar_play_button.dart
@@ -10,7 +10,7 @@ import '../../settings/settings_model.dart';
 import '../data/audio.dart';
 import '../data/audio_type.dart';
 import 'icons.dart';
-import 'theme.dart';
+import 'ui_constants.dart';
 
 class AvatarPlayButton extends StatelessWidget with WatchItMixin {
   const AvatarPlayButton({
@@ -42,17 +42,21 @@ class AvatarPlayButton extends StatelessWidget with WatchItMixin {
         : isMobile
             ? 26
             : 23;
-    final bigPlayButtonPadding = getBigPlayButtonPadding(useYaruTheme);
 
+    final label = context.l10n.playAll;
     return Padding(
-      padding: bigPlayButtonPadding,
-      child: CircleAvatar(
-        radius: bigAvatarButtonRadius.toDouble(),
-        backgroundColor: theme.colorScheme.inverseSurface.withAlpha(
-          disabled ? 50 : 255,
-        ),
+      padding: const EdgeInsets.symmetric(horizontal: kSmallestSpace),
+      child: SizedBox.square(
+        dimension: bigAvatarButtonRadius * 2,
         child: IconButton(
-          tooltip: context.l10n.playAll,
+          style: IconButton.styleFrom(
+            shape: const CircleBorder(),
+            backgroundColor: theme.colorScheme.inverseSurface,
+            foregroundColor: theme.colorScheme.onInverseSurface,
+            hoverColor: theme.colorScheme.primary.withValues(alpha: 0.5),
+            focusColor: theme.colorScheme.primary.withValues(alpha: 0.5),
+          ),
+          tooltip: label,
           onPressed: disabled
               ? null
               : () {
@@ -84,6 +88,7 @@ class AvatarPlayButton extends StatelessWidget with WatchItMixin {
           icon: Icon(
             iconData,
             color: disabled ? null : theme.colorScheme.onInverseSurface,
+            semanticLabel: label,
           ),
         ),
       ),
diff --git a/lib/common/view/theme.dart b/lib/common/view/theme.dart
@@ -248,12 +248,28 @@ double getBigAvatarButtonRadius(bool useYaruTheme) => useYaruTheme
         ? 35
         : 23;
 
+ButtonStyle translucentIconButtonStyle(ColorScheme colorScheme) =>
+    IconButton.styleFrom(
+      shape: const CircleBorder(),
+      backgroundColor: colorScheme.outline.withAlpha(80),
+      foregroundColor: colorScheme.onSurface,
+      hoverColor: colorScheme.primary.withAlpha(80),
+      focusColor: colorScheme.primary.withAlpha(80),
+    );
+
+ButtonStyle tonedIconButtonStyle(ColorScheme colorScheme) =>
+    IconButton.styleFrom(
+      shape: const CircleBorder(),
+      backgroundColor: colorScheme.outline
+          .scale(lightness: colorScheme.isLight ? 0.4 : -0.1),
+      foregroundColor: colorScheme.primary,
+      hoverColor: colorScheme.primary.withAlpha(80),
+      focusColor: colorScheme.primary.withAlpha(80),
+    );
+
 EdgeInsets get filterPanelPadding =>
     EdgeInsets.only(top: isMobile ? 10 : 0, bottom: 10);
 
-EdgeInsets getBigPlayButtonPadding(bool useYaruTheme) =>
-    EdgeInsets.symmetric(horizontal: useYaruTheme ? 2.5 : 5);
-
 double get chipHeight => isMobile ? 40 : 34.0;
 
 EdgeInsets get audioTilePadding => kAudioTilePadding;
diff --git a/lib/player/player_service.dart b/lib/player/player_service.dart
@@ -165,6 +165,9 @@ class PlayerService {
   Audio? get audio => _audio;
   void _setAudio(Audio value) async {
     if (value == _audio) return;
+    if (_color != null && value.audioType != AudioType.local) {
+      _setColor(null);
+    }
     if (value.audioType != _audio?.audioType) {
       _shuffle = false;
       _repeatSingle = false;
@@ -450,6 +453,9 @@ class PlayerService {
   String? _remoteImageUrl;
   String? get remoteImageUrl => _remoteImageUrl;
   Future<void> _setRemoteImageUrl(String? url) async {
+    if (_color != null) {
+      _setColor(null);
+    }
     _remoteImageUrl = url;
     _propertiesChangedController.add(true);
   }
diff --git a/lib/player/view/play_button.dart b/lib/player/view/play_button.dart
@@ -11,19 +11,23 @@ class PlayButton extends StatelessWidget with WatchItMixin {
     super.key,
     required this.active,
     this.iconColor,
+    this.buttonStyle,
   });
 
   final bool active;
   final Color? iconColor;
+  final ButtonStyle? buttonStyle;
 
   @override
   Widget build(BuildContext context) {
     final playerModel = di<PlayerModel>();
     final pause = playerModel.pause;
     final playOrPause = playerModel.playOrPause;
     final isPlaying = watchPropertyValue((PlayerModel m) => m.isPlaying);
+    final tooltip = isPlaying ? context.l10n.pause : context.l10n.play;
     return IconButton(
-      tooltip: isPlaying ? context.l10n.pause : context.l10n.play,
+      style: buttonStyle,
+      tooltip: tooltip,
       onPressed: !active
           ? null
           : () {
@@ -36,6 +40,7 @@ class PlayButton extends StatelessWidget with WatchItMixin {
       icon: Icon(
         isPlaying ? Iconz.pause : Iconz.playFilled,
         color: iconColor ?? context.theme.colorScheme.onSurface,
+        semanticLabel: tooltip,
       ),
     );
   }
diff --git a/lib/player/view/player_color.dart b/lib/player/view/player_color.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:watch_it/watch_it.dart';
+import 'package:yaru/theme.dart';
 
 import '../../extensions/build_context_x.dart';
 import '../../extensions/theme_data_x.dart';
@@ -17,7 +18,8 @@ class PlayerColor extends StatelessWidget with WatchItMixin {
     final baseColor =
         watchPropertyValue((PlayerModel m) => m.color?.withValues(alpha: 0.3));
 
-    final color = baseColor ?? theme.cardColor;
+    final color = baseColor ??
+        theme.cardColor.scale(lightness: theme.isLight ? -0.2 : 0.2);
     return Opacity(
       opacity: alpha * (theme.isLight ? 0.7 : 0.8),
       child: Container(
diff --git a/lib/player/view/player_main_controls.dart b/lib/player/view/player_main_controls.dart
@@ -50,21 +50,27 @@ class PlayerMainControls extends StatelessWidget with WatchItMixin {
     final rawPlayButton = PlayButton(
       iconColor: iconColor ?? (theme.isLight ? Colors.white : Colors.black),
       active: active,
+      buttonStyle: avatarPlayButton
+          ? IconButton.styleFrom(
+              shape: const CircleBorder(),
+              backgroundColor:
+                  avatarColor ?? (theme.isLight ? Colors.black : Colors.white),
+              foregroundColor:
+                  iconColor ?? (theme.isLight ? Colors.white : Colors.black),
+              hoverColor: theme.colorScheme.primary.withValues(alpha: 0.5),
+              focusColor: theme.colorScheme.primary.withValues(alpha: 0.5),
+            )
+          : null,
     );
 
     final useYaruTheme =
         watchPropertyValue((SettingsModel m) => m.useYaruTheme);
 
     final radius = getBigAvatarButtonRadius(useYaruTheme);
     final playButton = avatarPlayButton
-        ? CircleAvatar(
-            radius: radius,
-            backgroundColor:
-                avatarColor ?? (theme.isLight ? Colors.black : Colors.white),
-            child: SizedBox.square(
-              dimension: 2 * radius,
-              child: rawPlayButton,
-            ),
+        ? SizedBox.square(
+            dimension: 2 * radius,
+            child: rawPlayButton,
           )
         : rawPlayButton;
 
diff --git a/lib/podcasts/view/podcast_tile_play_button.dart b/lib/podcasts/view/podcast_tile_play_button.dart
diff --git a/lib/settings/view/about_page.dart b/lib/settings/view/about_page.dart
