feat: reactive volume slider and slicker bottom bar with lowered height

KRTirtho · Jun 10, 2023 · 9d14517 · 9d14517
1 parent 6ae8964
commit 9d14517
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 73 deletions.
diff --git a/lib/collections/spotube_icons.dart b/lib/collections/spotube_icons.dart
@@ -82,4 +82,8 @@ abstract class SpotubeIcons {
  static const piped = FeatherIcons.cloud;
  static const magic = Icons.auto_fix_high_outlined;
  static const selectionCheck = Icons.checklist_rounded;
+ static const volumeHigh = FeatherIcons.volume2;
+ static const volumeMedium = FeatherIcons.volume1;
+ static const volumeLow = FeatherIcons.volume;
+ static const volumeMute = FeatherIcons.volumeX;
 }
diff --git a/lib/components/player/player_track_details.dart b/lib/components/player/player_track_details.dart
@@ -26,8 +26,8 @@ class PlayerTrackDetails extends HookConsumerWidget {
  Container(
  padding: const EdgeInsets.all(6),
  constraints: const BoxConstraints(
- maxWidth: 70,
- maxHeight: 70,
+ maxWidth: 80,
+ maxHeight: 80,
  ),
  child: ClipRRect(
  borderRadius: BorderRadius.circular(4),

diff --git a/lib/components/root/bottom_player.dart b/lib/components/root/bottom_player.dart
@@ -71,90 +71,103 @@ class BottomPlayer extends HookConsumerWidget {
  type: MaterialType.transparency,
  textStyle: theme.textTheme.bodyMedium!,
  child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
  Expanded(child: PlayerTrackDetails(albumArt: albumArt)),
  // controls
  Flexible(
  flex: 3,
- child: PlayerControls(),
+ child: Padding(
+ padding: const EdgeInsets.only(top: 5),
+ child: PlayerControls(),
+ ),
  ),
  // add to saved tracks
- Expanded(
- flex: 1,
- child: Wrap(
- alignment: WrapAlignment.center,
- runAlignment: WrapAlignment.center,
- children: [
- Container(
- height: 20,
- constraints: const BoxConstraints(maxWidth: 200),
- child: HookBuilder(builder: (context) {
- final volumeState =
- useStream(audioPlayer.volumeStream).data ??
- audioPlayer.volume;
- final volume = useState(volumeState);
-
- useEffect(() {
- if (volume.value != volumeState) {
- volume.value = volumeState;
+ Column(
+ children: [
+ PlayerActions(
+ extraActions: [
+ IconButton(
+ tooltip: context.l10n.mini_player,
+ icon: const Icon(SpotubeIcons.miniPlayer),
+ onPressed: () async {
+ await DesktopTools.window.setMinimumSize(
+ const Size(300, 300),
+ );
+ await DesktopTools.window.setAlwaysOnTop(true);
+ if (!kIsLinux) {
+ await DesktopTools.window.setHasShadow(false);
  }
- return null;
- }, [volumeState]);
+ await DesktopTools.window
+ .setAlignment(Alignment.topRight);
+ await DesktopTools.window
+ .setSize(const Size(400, 500));
+ await Future.delayed(
+ const Duration(milliseconds: 100),
+ () async {
+ GoRouter.of(context).go('/mini-player');
+ },
+ );
+ },
+ ),
+ ],
+ ),
+ Container(
+ height: 40,
+ constraints: const BoxConstraints(maxWidth: 250),
+ child: HookBuilder(builder: (context) {
+ final volume =
+ useStream(audioPlayer.volumeStream).data ??
+ audioPlayer.volume;
 
- return Listener(
- onPointerSignal: (event) async {
- if (event is PointerScrollEvent) {
- if (event.scrollDelta.dy > 0) {
- final value = volume.value - .2;
- audioPlayer.setVolume(value < 0 ? 0 : value);
+ return Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ IconButton(
+ icon: Icon(
+ volume == 0
+ ? SpotubeIcons.volumeMute
+ : volume <= 0.2
+ ? SpotubeIcons.volumeLow
+ : volume <= 0.6
+ ? SpotubeIcons.volumeMedium
+ : SpotubeIcons.volumeHigh,
+ size: 16,
+ ),
+ onPressed: () {
+ if (volume == 0) {
+ audioPlayer.setVolume(1);
  } else {
- final value = volume.value + .2;
- audioPlayer.setVolume(value > 1 ? 1 : value);
+ audioPlayer.setVolume(0);
  }
- }
- },
- child: Slider(
- min: 0,
- max: 1,
- value: volume.value,
- onChanged: (v) {
- volume.value = v;
  },
- onChangeEnd: audioPlayer.setVolume,
  ),
- );
- }),
- ),
- PlayerActions(
- extraActions: [
- IconButton(
- tooltip: context.l10n.mini_player,
- icon: const Icon(SpotubeIcons.miniPlayer),
- onPressed: () async {
- await DesktopTools.window.setMinimumSize(
- const Size(300, 300),
- );
- await DesktopTools.window.setAlwaysOnTop(true);
- if (!kIsLinux) {
- await DesktopTools.window.setHasShadow(false);
- }
- await DesktopTools.window
- .setAlignment(Alignment.topRight);
- await DesktopTools.window
- .setSize(const Size(400, 500));
- await Future.delayed(
- const Duration(milliseconds: 100),
- () async {
- GoRouter.of(context).go('/mini-player');
- },
- );
- },
- ),
- ],
- )
- ],
- ),
+ Listener(
+ onPointerSignal: (event) async {
+ if (event is PointerScrollEvent) {
+ if (event.scrollDelta.dy > 0) {
+ final value = volume - .2;
+ audioPlayer
+ .setVolume(value < 0 ? 0 : value);
+ } else {
+ final value = volume + .2;
+ audioPlayer
+ .setVolume(value > 1 ? 1 : value);
+ }
+ }
+ },
+ child: Slider(
+ min: 0,
+ max: 1,
+ value: volume,
+ onChanged: audioPlayer.setVolume,
+ ),
+ ),
+ ],
+ );
+ }),
+ )
+ ],
  )
  ],
  ),

diff --git a/lib/themes/theme.dart b/lib/themes/theme.dart
@@ -48,5 +48,6 @@ ThemeData theme(Color seed, Brightness brightness) {
  backgroundColor: scheme.onSurface,
  contentTextStyle: TextStyle(color: scheme.surface),
  ),
+ sliderTheme: SliderThemeData(overlayShape: SliderComponentShape.noOverlay),
  );
 }