From 9471e008e3f1b8d4d35611e473f90890ff76511c Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Tue, 9 Sep 2025 00:45:45 +0600 Subject: [PATCH] fix(ui): lyrics white text in white background and small player buttons --- lib/components/button/back_button.dart | 2 +- lib/modules/player/player.dart | 29 ++++++++++---------- lib/modules/player/player_controls.dart | 18 ++++++++++-- lib/modules/player/player_track_details.dart | 4 +-- lib/pages/lyrics/synced_lyrics.dart | 25 +++-------------- lib/pages/player/lyrics.dart | 26 ++++++++---------- 6 files changed, 47 insertions(+), 57 deletions(-) diff --git a/lib/components/button/back_button.dart b/lib/components/button/back_button.dart index 42c952ab..dc899616 100644 --- a/lib/components/button/back_button.dart +++ b/lib/components/button/back_button.dart @@ -13,7 +13,7 @@ class BackButton extends StatelessWidget { @override Widget build(BuildContext context) { return IconButton.ghost( - size: const ButtonSize(.9), + size: const ButtonSize(1.2), icon: Icon(icon, color: color), onPressed: () => Navigator.of(context).pop(), ); diff --git a/lib/modules/player/player.dart b/lib/modules/player/player.dart index d407c909..ec903aab 100644 --- a/lib/modules/player/player.dart +++ b/lib/modules/player/player.dart @@ -21,7 +21,6 @@ import 'package:spotube/extensions/constrains.dart'; import 'package:spotube/extensions/context.dart'; import 'package:spotube/modules/root/spotube_navigation_bar.dart'; import 'package:spotube/provider/audio_player/audio_player.dart'; -import 'package:spotube/provider/metadata_plugin/core/auth.dart'; import 'package:spotube/provider/server/active_track_sources.dart'; import 'package:spotube/provider/volume_provider.dart'; import 'package:spotube/services/sourced_track/sources/youtube.dart'; @@ -40,7 +39,6 @@ class PlayerView extends HookConsumerWidget { @override Widget build(BuildContext context, ref) { final theme = Theme.of(context); - final authenticated = ref.watch(metadataPluginAuthenticatedProvider); final sourcedCurrentTrack = ref.watch(activeTrackSourcesProvider); final currentActiveTrack = ref.watch(audioPlayerProvider.select((s) => s.activeTrack)); @@ -105,13 +103,15 @@ class PlayerView extends HookConsumerWidget { surfaceBlur: 0, leading: [ IconButton.ghost( - icon: const Icon(SpotubeIcons.angleDown, size: 18), + size: const ButtonSize(1.2), + icon: const Icon(SpotubeIcons.angleDown), onPressed: panelController.close, ) ], trailing: [ if (currentActiveTrackSource is YoutubeSourcedTrack) TextButton( + size: const ButtonSize(1.2), leading: Assets.images.logos.songlinkTransparent.image( width: 20, height: 20, @@ -131,7 +131,8 @@ class PlayerView extends HookConsumerWidget { child: Text(context.l10n.details), ).call, child: IconButton.ghost( - icon: const Icon(SpotubeIcons.info, size: 18), + size: const ButtonSize(1.2), + icon: const Icon(SpotubeIcons.info), onPressed: currentActiveTrackSource == null ? null : () { @@ -239,18 +240,16 @@ class PlayerView extends HookConsumerWidget { }, ), ), - if (authenticated.asData?.value == true) - const SizedBox(width: 10), - if (authenticated.asData?.value == true) - Expanded( - child: OutlineButton( - leading: const Icon(SpotubeIcons.music), - child: Text(context.l10n.lyrics), - onPressed: () { - context.pushRoute(const PlayerLyricsRoute()); - }, - ), + const SizedBox(width: 10), + Expanded( + child: OutlineButton( + leading: const Icon(SpotubeIcons.music), + child: Text(context.l10n.lyrics), + onPressed: () { + context.pushRoute(const PlayerLyricsRoute()); + }, ), + ), const SizedBox(width: 10), ], ), diff --git a/lib/modules/player/player_controls.dart b/lib/modules/player/player_controls.dart index 14b9cf43..3da36bf8 100644 --- a/lib/modules/player/player_controls.dart +++ b/lib/modules/player/player_controls.dart @@ -3,7 +3,7 @@ import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:media_kit/media_kit.dart'; import 'package:palette_generator/palette_generator.dart'; -import 'package:shadcn_flutter/shadcn_flutter.dart' hide Consumer; +import 'package:shadcn_flutter/shadcn_flutter.dart'; import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/intents.dart'; @@ -14,6 +14,7 @@ import 'package:spotube/modules/player/use_progress.dart'; import 'package:spotube/provider/audio_player/audio_player.dart'; import 'package:spotube/provider/audio_player/querying_track_info.dart'; import 'package:spotube/services/audio_player/audio_player.dart'; +import 'package:spotube/utils/platform.dart'; class PlayerControls extends HookConsumerWidget { final PaletteGenerator? palette; @@ -48,6 +49,9 @@ class PlayerControls extends HookConsumerWidget { useStream(audioPlayer.playingStream).data ?? audioPlayer.isPlaying; final theme = Theme.of(context); + final buttonSize = + kIsMobile ? const ButtonSize(1.5) : const ButtonSize(1.2); + return GestureDetector( behavior: HitTestBehavior.translucent, onTap: () { @@ -149,9 +153,11 @@ class PlayerControls extends HookConsumerWidget { ), ).call, child: IconButton( + size: buttonSize, icon: Icon( SpotubeIcons.shuffle, color: shuffled ? theme.colorScheme.primary : null, + size: 22, ), variance: shuffled ? ButtonVariance.secondary @@ -170,8 +176,10 @@ class PlayerControls extends HookConsumerWidget { }), Tooltip( tooltip: TooltipContainer( - child: Text(context.l10n.previous_track)).call, + child: Text(context.l10n.previous_track), + ).call, child: IconButton.ghost( + size: buttonSize, enabled: !isFetchingActiveTrack, icon: const Icon(SpotubeIcons.skipBack), onPressed: audioPlayer.skipToPrevious, @@ -186,6 +194,7 @@ class PlayerControls extends HookConsumerWidget { ), ).call, child: IconButton.primary( + size: buttonSize, shape: ButtonShape.circle, icon: isFetchingActiveTrack ? const SizedBox( @@ -206,8 +215,10 @@ class PlayerControls extends HookConsumerWidget { ), Tooltip( tooltip: - TooltipContainer(child: Text(context.l10n.next_track)).call, + TooltipContainer(child: Text(context.l10n.next_track)) + .call, child: IconButton.ghost( + size: buttonSize, icon: const Icon(SpotubeIcons.skipForward), onPressed: isFetchingActiveTrack ? null : audioPlayer.skipToNext, @@ -228,6 +239,7 @@ class PlayerControls extends HookConsumerWidget { ), ).call, child: IconButton( + size: buttonSize, icon: Icon( loopMode == PlaylistMode.single ? SpotubeIcons.repeatOne diff --git a/lib/modules/player/player_track_details.dart b/lib/modules/player/player_track_details.dart index 9e436e60..c158aed3 100644 --- a/lib/modules/player/player_track_details.dart +++ b/lib/modules/player/player_track_details.dart @@ -47,10 +47,8 @@ class PlayerTrackDetails extends HookConsumerWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ const SizedBox(height: 4), - LinkText( + Text( playback.activeTrack?.name ?? "", - TrackRoute(trackId: playback.activeTrack?.id ?? ""), - push: true, overflow: TextOverflow.ellipsis, style: theme.typography.normal.copyWith( color: color, diff --git a/lib/pages/lyrics/synced_lyrics.dart b/lib/pages/lyrics/synced_lyrics.dart index 6559e0e7..cb331724 100644 --- a/lib/pages/lyrics/synced_lyrics.dart +++ b/lib/pages/lyrics/synced_lyrics.dart @@ -18,8 +18,6 @@ import 'package:spotube/provider/lyrics/synced.dart'; import 'package:spotube/services/audio_player/audio_player.dart'; import 'package:spotube/services/logger/logger.dart'; -import 'package:stroke_text/stroke_text.dart'; - class SyncedLyrics extends HookConsumerWidget { final PaletteColor palette; final bool? isModal; @@ -160,6 +158,9 @@ class SyncedLyrics extends HookConsumerWidget { child: AnimatedDefaultTextStyle( duration: const Duration(milliseconds: 250), style: TextStyle( + color: isActive + ? theme.colorScheme.foreground + : theme.colorScheme.mutedForeground, fontWeight: isActive ? FontWeight.w500 : FontWeight.normal, @@ -181,25 +182,7 @@ class SyncedLyrics extends HookConsumerWidget { } audioPlayer.seek(time); }, - child: Builder(builder: (context) { - return StrokeText( - text: lyricSlice.text, - textStyle: - DefaultTextStyle.of(context).style, - textColor: switch (( - isActive, - isModal == true - )) { - (true, _) => Colors.white, - (_, true) => - theme.colorScheme.mutedForeground, - (_, _) => palette.bodyTextColor, - }, - strokeColor: isActive - ? Colors.black - : Colors.transparent, - ); - }), + child: Text(lyricSlice.text), ), ), ), diff --git a/lib/pages/player/lyrics.dart b/lib/pages/player/lyrics.dart index e1aad553..093b0aa2 100644 --- a/lib/pages/player/lyrics.dart +++ b/lib/pages/player/lyrics.dart @@ -28,20 +28,18 @@ class PlayerLyricsPage extends HookConsumerWidget { final selectedIndex = useState(0); final palette = usePaletteColor(albumArt, ref); - final tabbar = Padding( - padding: const EdgeInsets.all(10), - child: TabList( - index: selectedIndex.value, - onChanged: (index) => selectedIndex.value = index, - children: [ - TabItem( - child: Text(context.l10n.synced), - ), - TabItem( - child: Text(context.l10n.plain), - ), - ], - )); + final tabbar = TabList( + index: selectedIndex.value, + onChanged: (index) => selectedIndex.value = index, + children: [ + TabItem( + child: Text(context.l10n.synced), + ), + TabItem( + child: Text(context.l10n.plain), + ), + ], + ); return Scaffold( headers: [