fix(ui): lyrics white text in white background and small player buttons

This commit is contained in:
Kingkor Roy Tirtho 2025-09-09 00:45:45 +06:00
parent ecc0bdcc42
commit 9471e008e3
6 changed files with 47 additions and 57 deletions

View File

@ -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(),
);

View File

@ -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,9 +240,7 @@ 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),

View File

@ -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

View File

@ -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,

View File

@ -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),
),
),
),

View File

@ -28,9 +28,7 @@ class PlayerLyricsPage extends HookConsumerWidget {
final selectedIndex = useState(0);
final palette = usePaletteColor(albumArt, ref);
final tabbar = Padding(
padding: const EdgeInsets.all(10),
child: TabList(
final tabbar = TabList(
index: selectedIndex.value,
onChanged: (index) => selectedIndex.value = index,
children: [
@ -41,7 +39,7 @@ class PlayerLyricsPage extends HookConsumerWidget {
child: Text(context.l10n.plain),
),
],
));
);
return Scaffold(
headers: [