feat(mini_player): show/hide lyrics #851

lib/collections/spotube_icons.dart

@@ -40,6 +40,7 @@ abstract class SpotubeIcons {
   static const trash = FeatherIcons.trash2;
   static const clock = FeatherIcons.clock;
   static const lyrics = Icons.lyrics_rounded;
+  static const lyricsOff = Icons.lyrics_outlined;
   static const logout = FeatherIcons.logOut;
   static const login = FeatherIcons.logIn;
   static const dashboard = FeatherIcons.grid;

lib/pages/lyrics/mini_lyrics.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:gap/gap.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:palette_generator/palette_generator.dart';
@@ -32,6 +33,7 @@ class MiniLyricsPage extends HookConsumerWidget {
 
     final areaActive = useState(false);
     final hoverMode = useState(true);
+    final showLyrics = useState(true);
 
     useEffect(() {
       WidgetsBinding.instance.addPostFrameCallback((_) async {
@@ -82,6 +84,7 @@ class MiniLyricsPage extends HookConsumerWidget {
                       child: Sidebar.brandLogo(),
                     ),
                     const Spacer(),
+                    if (showLyrics.value)
                       SizedBox(
                         height: 30,
                         child: TabBar(
@@ -93,6 +96,29 @@ class MiniLyricsPage extends HookConsumerWidget {
                         ),
                       ),
                     const Spacer(),
+                    IconButton(
+                      tooltip: context.l10n.lyrics,
+                      icon: showLyrics.value
+                          ? const Icon(SpotubeIcons.lyrics)
+                          : const Icon(SpotubeIcons.lyricsOff),
+                      style: ButtonStyle(
+                        foregroundColor: showLyrics.value
+                            ? MaterialStateProperty.all(
+                                theme.colorScheme.primary)
+                            : null,
+                      ),
+                      onPressed: () async {
+                        showLyrics.value = !showLyrics.value;
+                        areaActive.value = true;
+                        hoverMode.value = false;
+
+                        await DesktopTools.window.setSize(
+                          showLyrics.value
+                              ? const Size(400, 500)
+                              : const Size(400, 150),
+                        );
+                      },
+                    ),
                     IconButton(
                       tooltip: context.l10n.show_hide_ui_on_hover,
                       icon: hoverMode.value
@@ -105,9 +131,7 @@ class MiniLyricsPage extends HookConsumerWidget {
                             : null,
                       ),
                       onPressed: () async {
-                        if (!hoverMode.value == true) {
                         areaActive.value = true;
-                        }
                         hoverMode.value = !hoverMode.value;
                       },
                     ),
@@ -150,6 +174,7 @@ class MiniLyricsPage extends HookConsumerWidget {
                   playlistQueue.activeTrack!.name!,
                   style: theme.textTheme.titleMedium,
                 ),
+              if (showLyrics.value)
                 Expanded(
                   child: TabBarView(
                     children: [
@@ -165,7 +190,9 @@ class MiniLyricsPage extends HookConsumerWidget {
                       ),
                     ],
                   ),
-              ),
+                )
+              else
+                const Gap(20),
               AnimatedCrossFade(
                 crossFadeState: areaActive.value
                     ? CrossFadeState.showFirst

lib/pages/lyrics/synced_lyrics.dart

@@ -112,7 +112,7 @@ class SyncedLyrics extends HookConsumerWidget {
                     final lyricSlice = lyricValue.lyrics[index];
                     final isActive = lyricSlice.time.inSeconds == currentTime;
 
-                    if (isActive && isUnSyncLyric == true) {
+                    if (isActive) {
                       controller.scrollToIndex(
                         index,
                         preferPosition: AutoScrollPosition.middle,