✨ Mini player

2024-08-30 12:56:28 +08:00
parent 0a24c86682
commit 8b8915e28f
10 changed files with 341 additions and 81 deletions
--- a/lib/widgets/lyrics/synced_lyrics.dart
+++ b/lib/widgets/lyrics/synced_lyrics.dart
@ -2,6 +2,7 @@ import 'dart:async';

 import 'package:flutter/material.dart';
 import 'package:flutter_animate/flutter_animate.dart';
+import 'package:gap/gap.dart';
 import 'package:get/get.dart';
 import 'package:rhythm_box/providers/audio_player.dart';
 import 'package:rhythm_box/services/audio_player/audio_player.dart';
@ -112,6 +113,7 @@ class _SyncedLyricsState extends State<SyncedLyrics> {
      cacheExtent: 10000,
      controller: _autoScrollController,
      slivers: [
+        const SliverGap(16),
        if (_lyric == null)
          const SliverFillRemaining(
            child: Center(
@ -223,6 +225,7 @@ class _SyncedLyricsState extends State<SyncedLyrics> {
              ),
            ),
          ),
+        const SliverGap(16),
      ],
    );
  }
--- a/lib/widgets/player/bottom_player.dart
+++ b/lib/widgets/player/bottom_player.dart
@ -5,18 +5,27 @@ import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:get/get.dart';
 import 'package:go_router/go_router.dart';
+import 'package:rhythm_box/platform.dart';
 import 'package:rhythm_box/providers/audio_player.dart';
-import 'package:rhythm_box/services/audio_player/audio_player.dart';
 import 'package:rhythm_box/services/audio_services/image.dart';
 import 'package:rhythm_box/widgets/auto_cache_image.dart';
+import 'package:rhythm_box/widgets/player/controls.dart';
 import 'package:rhythm_box/widgets/player/track_details.dart';
 import 'package:rhythm_box/widgets/tracks/querying_track_info.dart';
 import 'package:rhythm_box/widgets/volume_slider.dart';
+import 'package:window_manager/window_manager.dart';

 class BottomPlayer extends StatefulWidget {
  final bool usePop;
+  final bool isMiniPlayer;
+  final Function? onTap;

-  const BottomPlayer({super.key, this.usePop = false});
+  const BottomPlayer({
+    super.key,
+    this.usePop = false,
+    this.isMiniPlayer = false,
+    this.onTap,
+  });

  @override
  State<BottomPlayer> createState() => _BottomPlayerState();
@ -42,19 +51,8 @@ class _BottomPlayerState extends State<BottomPlayer>
            (_playback.state.value.activeTrack?.album?.images?.length ?? 1) - 1,
      );

-  bool get _isPlaying => _playback.isPlaying.value;
-  bool get _isFetchingActiveTrack => _query.isQueryingTrackInfo.value;
-
  List<StreamSubscription>? _subscriptions;

-  Future<void> _togglePlayState() async {
-    if (!audioPlayer.isPlaying) {
-      await audioPlayer.resume();
-    } else {
-      await audioPlayer.pause();
-    }
-  }
-
  bool _isLifted = false;

  @override
@ -94,47 +92,6 @@ class _BottomPlayerState extends State<BottomPlayer>

  @override
  Widget build(BuildContext context) {
-    final controls = Obx(
-      () => Row(
-        mainAxisSize: MainAxisSize.min,
-        mainAxisAlignment: MediaQuery.of(context).size.width >= 720
-            ? MainAxisAlignment.center
-            : MainAxisAlignment.end,
-        children: [
-          if (MediaQuery.of(context).size.width >= 720)
-            IconButton(
-              icon: const Icon(Icons.skip_previous),
-              onPressed:
-                  _isFetchingActiveTrack ? null : audioPlayer.skipToPrevious,
-            )
-          else
-            IconButton(
-              icon: const Icon(Icons.skip_next),
-              onPressed: _isFetchingActiveTrack ? null : audioPlayer.skipToNext,
-            ),
-          IconButton.filled(
-            icon: _isFetchingActiveTrack
-                ? const SizedBox(
-                    height: 20,
-                    width: 20,
-                    child: CircularProgressIndicator(
-                      strokeWidth: 3,
-                    ),
-                  )
-                : Icon(
-                    !_isPlaying ? Icons.play_arrow : Icons.pause,
-                  ),
-            onPressed: _isFetchingActiveTrack ? null : _togglePlayState,
-          ),
-          if (MediaQuery.of(context).size.width >= 720)
-            IconButton(
-              icon: const Icon(Icons.skip_next),
-              onPressed: _isFetchingActiveTrack ? null : audioPlayer.skipToNext,
-            )
-        ],
-      ),
-    );
-
    return SizeTransition(
      sizeFactor: _animation,
      axis: Axis.vertical,
@ -197,19 +154,49 @@ class _BottomPlayerState extends State<BottomPlayer>
                  ),
                  const Gap(12),
                  if (MediaQuery.of(context).size.width >= 720)
-                    Expanded(child: controls)
+                    const Expanded(child: PlayerControls())
                  else
-                    controls,
+                    const PlayerControls(),
                  if (MediaQuery.of(context).size.width >= 720) const Gap(12),
                  if (MediaQuery.of(context).size.width >= 720)
-                    const Expanded(
+                    Expanded(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
-                          Expanded(
-                            child: VolumeSlider(
-                              mainAxisAlignment: MainAxisAlignment.end,
+                          if (!widget.isMiniPlayer && PlatformInfo.isDesktop)
+                            IconButton(
+                              icon: const Icon(
+                                Icons.picture_in_picture,
+                                size: 18,
+                              ),
+                              onPressed: () async {
+                                if (!PlatformInfo.isDesktop) return;
+
+                                final prevSize = await windowManager.getSize();
+                                await windowManager.setMinimumSize(
+                                  const Size(300, 300),
+                                );
+                                await windowManager.setAlwaysOnTop(true);
+                                if (!PlatformInfo.isLinux) {
+                                  await windowManager.setHasShadow(false);
+                                }
+                                await windowManager
+                                    .setAlignment(Alignment.topRight);
+                                await windowManager
+                                    .setSize(const Size(400, 500));
+                                await Future.delayed(
+                                  const Duration(milliseconds: 100),
+                                  () async {
+                                    GoRouter.of(context).pushNamed(
+                                      'playerMini',
+                                      extra: prevSize,
+                                    );
+                                  },
+                                );
+                              },
                            ),
+                          const VolumeSlider(
+                            mainAxisAlignment: MainAxisAlignment.end,
                          )
                        ],
                      ),
@ -220,6 +207,10 @@ class _BottomPlayerState extends State<BottomPlayer>
            ],
          ),
          onTap: () {
+            if (widget.onTap != null) {
+              widget.onTap!();
+              return;
+            }
            if (widget.usePop) {
              GoRouter.of(context).pop();
            } else {
--- a/lib/widgets/player/controls.dart
+++ b/lib/widgets/player/controls.dart
@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:rhythm_box/providers/audio_player.dart';
+import 'package:rhythm_box/services/audio_player/audio_player.dart';
+import 'package:rhythm_box/widgets/tracks/querying_track_info.dart';
+
+class PlayerControls extends StatefulWidget {
+  const PlayerControls({super.key});
+
+  @override
+  State<PlayerControls> createState() => _PlayerControlsState();
+}
+
+class _PlayerControlsState extends State<PlayerControls> {
+  late final AudioPlayerProvider _playback = Get.find();
+  late final QueryingTrackInfoProvider _query = Get.find();
+
+  bool get _isPlaying => _playback.isPlaying.value;
+  bool get _isFetchingActiveTrack => _query.isQueryingTrackInfo.value;
+
+  Future<void> _togglePlayState() async {
+    if (!audioPlayer.isPlaying) {
+      await audioPlayer.resume();
+    } else {
+      await audioPlayer.pause();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(
+      () => Row(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MediaQuery.of(context).size.width >= 720
+            ? MainAxisAlignment.center
+            : MainAxisAlignment.end,
+        children: [
+          if (MediaQuery.of(context).size.width >= 720)
+            IconButton(
+              icon: const Icon(Icons.skip_previous),
+              onPressed:
+                  _isFetchingActiveTrack ? null : audioPlayer.skipToPrevious,
+            )
+          else
+            IconButton(
+              icon: const Icon(Icons.skip_next),
+              onPressed: _isFetchingActiveTrack ? null : audioPlayer.skipToNext,
+            ),
+          IconButton.filled(
+            icon: _isFetchingActiveTrack
+                ? const SizedBox(
+                    height: 20,
+                    width: 20,
+                    child: CircularProgressIndicator(
+                      strokeWidth: 3,
+                    ),
+                  )
+                : Icon(
+                    !_isPlaying ? Icons.play_arrow : Icons.pause,
+                  ),
+            onPressed: _isFetchingActiveTrack ? null : _togglePlayState,
+          ),
+          if (MediaQuery.of(context).size.width >= 720)
+            IconButton(
+              icon: const Icon(Icons.skip_next),
+              onPressed: _isFetchingActiveTrack ? null : audioPlayer.skipToNext,
+            )
+        ],
+      ),
+    );
+  }
+}
--- a/lib/widgets/volume_slider.dart
+++ b/lib/widgets/volume_slider.dart
@ -4,12 +4,10 @@ import 'package:get/get.dart';
 import 'package:rhythm_box/providers/volume.dart';

 class VolumeSlider extends StatelessWidget {
-  final bool isFullWidth;
  final MainAxisAlignment mainAxisAlignment;

  const VolumeSlider({
    super.key,
-    this.isFullWidth = false,
    this.mainAxisAlignment = MainAxisAlignment.start,
  });

@ -48,7 +46,7 @@ class VolumeSlider extends StatelessWidget {
            onChanged: vol.setVolume,
          ),
        ),
-      ).paddingOnly(right: 24, left: 8);
+      ).paddingSymmetric(horizontal: 8);
      return Row(
        mainAxisAlignment: mainAxisAlignment,
        children: [
@ -69,7 +67,7 @@ class VolumeSlider extends StatelessWidget {
              }
            },
          ),
-          if (isFullWidth) Expanded(child: slider) else slider,
+          slider,
        ],
      );
    });