kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 16:05:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(player): proper coloring of elements

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-04-06 12:48:32 +06:00
parent 159f03e7ca
commit b2c4ea13f6
2 changed files with 53 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
lib/components/player/player_controls.dart
View File

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:palette_generator/palette_generator.dart';
import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/collections/intents.dart'; import 'package:spotube/collections/intents.dart';
@ -11,10 +12,10 @@ import 'package:spotube/provider/playlist_queue_provider.dart';
import 'package:spotube/utils/primitive_utils.dart'; import 'package:spotube/utils/primitive_utils.dart';
class PlayerControls extends HookConsumerWidget { class PlayerControls extends HookConsumerWidget {
final Color? color; final PaletteGenerator? palette;
PlayerControls({ PlayerControls({
this.color, this.palette,
Key? key, Key? key,
}) : super(key: key); }) : super(key: key);
@ -43,6 +44,32 @@ class PlayerControls extends HookConsumerWidget {
PlaylistQueueNotifier.isPlaying; PlaylistQueueNotifier.isPlaying;
final theme = Theme.of(context); final theme = Theme.of(context);
final isDominantColorDark = ThemeData.estimateBrightnessForColor(
palette?.dominantColor?.color ?? theme.colorScheme.primary,
) ==
Brightness.dark;
final dominantColor = isDominantColorDark
? palette?.mutedColor ?? palette?.dominantColor
: palette?.dominantColor;
final sliderColor =
palette?.dominantColor?.titleTextColor ?? theme.colorScheme.primary;
final buttonStyle = IconButton.styleFrom(
backgroundColor: dominantColor?.color.withOpacity(0.2) ??
theme.colorScheme.surface.withOpacity(0.4),
minimumSize: const Size(28, 28),
);
final activeButtonStyle = IconButton.styleFrom(
backgroundColor:
dominantColor?.titleTextColor ?? theme.colorScheme.primaryContainer,
foregroundColor:
dominantColor?.color ?? theme.colorScheme.onPrimaryContainer,
minimumSize: const Size(28, 28),
);
return GestureDetector( return GestureDetector(
behavior: HitTestBehavior.translucent, behavior: HitTestBehavior.translucent,
onTap: () { onTap: () {
@ -109,8 +136,8 @@ class PlayerControls extends HookConsumerWidget {
), ),
); );
}, },
activeColor: color, activeColor: sliderColor,
inactiveColor: color?.withOpacity(0.15), inactiveColor: sliderColor.withOpacity(0.15),
), ),
), ),
Padding( Padding(
@ -118,8 +145,8 @@ class PlayerControls extends HookConsumerWidget {
horizontal: 8.0, horizontal: 8.0,
), ),
child: DefaultTextStyle( child: DefaultTextStyle(
style: style: theme.textTheme.bodySmall!
theme.textTheme.bodySmall!.copyWith(color: color), .copyWith(color: dominantColor?.titleTextColor),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
@ -140,12 +167,10 @@ class PlayerControls extends HookConsumerWidget {
tooltip: playlist?.isShuffled == true tooltip: playlist?.isShuffled == true
? "Unshuffle playlist" ? "Unshuffle playlist"
: "Shuffle playlist", : "Shuffle playlist",
icon: Icon( icon: const Icon(SpotubeIcons.shuffle),
SpotubeIcons.shuffle, style: playlist?.isShuffled == true
color: playlist?.isShuffled == true ? activeButtonStyle
? theme.colorScheme.primary : buttonStyle,
: null,
),
onPressed: playlist == null onPressed: playlist == null
? null ? null
: () { : () {
@ -158,10 +183,8 @@ class PlayerControls extends HookConsumerWidget {
), ),
IconButton( IconButton(
tooltip: "Previous track", tooltip: "Previous track",
icon: Icon( icon: const Icon(SpotubeIcons.skipBack),
SpotubeIcons.skipBack, style: buttonStyle,
color: color,
),
onPressed: playlistNotifier.previous, onPressed: playlistNotifier.previous,
), ),
IconButton( IconButton(
@ -174,7 +197,14 @@ class PlayerControls extends HookConsumerWidget {
) )
: Icon( : Icon(
playing ? SpotubeIcons.pause : SpotubeIcons.play, playing ? SpotubeIcons.pause : SpotubeIcons.play,
color: color, ),
style: IconButton.styleFrom(
backgroundColor:
dominantColor?.color ?? theme.colorScheme.primary,
foregroundColor: dominantColor?.titleTextColor ??
theme.colorScheme.onPrimary,
padding: const EdgeInsets.all(12),
iconSize: 30,
), ),
onPressed: Actions.handler<PlayPauseIntent>( onPressed: Actions.handler<PlayPauseIntent>(
context, context,
@ -183,10 +213,8 @@ class PlayerControls extends HookConsumerWidget {
), ),
IconButton( IconButton(
tooltip: "Next track", tooltip: "Next track",
icon: Icon( icon: const Icon(SpotubeIcons.skipForward),
SpotubeIcons.skipForward, style: buttonStyle,
color: color,
),
onPressed: playlistNotifier.next, onPressed: playlistNotifier.next,
), ),
IconButton( IconButton(
@ -197,10 +225,10 @@ class PlayerControls extends HookConsumerWidget {
playlist?.isLooping == true playlist?.isLooping == true
? SpotubeIcons.repeatOne ? SpotubeIcons.repeatOne
: SpotubeIcons.repeat, : SpotubeIcons.repeat,
color: playlist?.isLooping == true
? theme.colorScheme.primary
: null,
), ),
style: playlist?.isLooping == true
? activeButtonStyle
: buttonStyle,
onPressed: playlist == null || playlist.isLoading onPressed: playlist == null || playlist.isLoading
? null ? null
: () { : () {

2
lib/pages/player/player.dart
View File

@ -156,7 +156,7 @@ class PlayerView extends HookConsumerWidget {
), ),
), ),
const SizedBox(height: 40), const SizedBox(height: 40),
PlayerControls(color: bodyTextColor), PlayerControls(palette: palette),
const Spacer(), const Spacer(),
PlayerActions( PlayerActions(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,