feat(player): proper coloring of elements

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

View File

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.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/intents.dart';
@ -11,10 +12,10 @@ import 'package:spotube/provider/playlist_queue_provider.dart';
import 'package:spotube/utils/primitive_utils.dart';
class PlayerControls extends HookConsumerWidget {
final Color? color;
final PaletteGenerator? palette;
PlayerControls({
this.color,
this.palette,
Key? key,
}) : super(key: key);
@ -43,6 +44,32 @@ class PlayerControls extends HookConsumerWidget {
PlaylistQueueNotifier.isPlaying;
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(
behavior: HitTestBehavior.translucent,
onTap: () {
@ -109,8 +136,8 @@ class PlayerControls extends HookConsumerWidget {
),
);
},
activeColor: color,
inactiveColor: color?.withOpacity(0.15),
activeColor: sliderColor,
inactiveColor: sliderColor.withOpacity(0.15),
),
),
Padding(
@ -118,8 +145,8 @@ class PlayerControls extends HookConsumerWidget {
horizontal: 8.0,
),
child: DefaultTextStyle(
style:
theme.textTheme.bodySmall!.copyWith(color: color),
style: theme.textTheme.bodySmall!
.copyWith(color: dominantColor?.titleTextColor),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@ -140,12 +167,10 @@ class PlayerControls extends HookConsumerWidget {
tooltip: playlist?.isShuffled == true
? "Unshuffle playlist"
: "Shuffle playlist",
icon: Icon(
SpotubeIcons.shuffle,
color: playlist?.isShuffled == true
? theme.colorScheme.primary
: null,
),
icon: const Icon(SpotubeIcons.shuffle),
style: playlist?.isShuffled == true
? activeButtonStyle
: buttonStyle,
onPressed: playlist == null
? null
: () {
@ -158,10 +183,8 @@ class PlayerControls extends HookConsumerWidget {
),
IconButton(
tooltip: "Previous track",
icon: Icon(
SpotubeIcons.skipBack,
color: color,
),
icon: const Icon(SpotubeIcons.skipBack),
style: buttonStyle,
onPressed: playlistNotifier.previous,
),
IconButton(
@ -174,7 +197,14 @@ class PlayerControls extends HookConsumerWidget {
)
: Icon(
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>(
context,
@ -183,10 +213,8 @@ class PlayerControls extends HookConsumerWidget {
),
IconButton(
tooltip: "Next track",
icon: Icon(
SpotubeIcons.skipForward,
color: color,
),
icon: const Icon(SpotubeIcons.skipForward),
style: buttonStyle,
onPressed: playlistNotifier.next,
),
IconButton(
@ -197,10 +225,10 @@ class PlayerControls extends HookConsumerWidget {
playlist?.isLooping == true
? SpotubeIcons.repeatOne
: SpotubeIcons.repeat,
color: playlist?.isLooping == true
? theme.colorScheme.primary
: null,
),
style: playlist?.isLooping == true
? activeButtonStyle
: buttonStyle,
onPressed: playlist == null || playlist.isLoading
? null
: () {

View File

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