feat(player_queue): filtering track support

lib/components/player/player_overlay.dart

@@ -100,6 +100,9 @@ class PlayerOverlay extends HookConsumerWidget {
                               child: GestureDetector(
                                 onTap: () =>
                                     GoRouter.of(context).push("/player"),
+                                child: Container(
+                                  width: double.infinity,
+                                  color: Colors.transparent,
                                   child: PlayerTrackDetails(
                                     albumArt: albumArt,
                                     color: textColor,
@@ -107,6 +110,7 @@ class PlayerOverlay extends HookConsumerWidget {
                                 ),
                               ),
                             ),
+                          ),
                           Row(
                             children: [
                               IconButton(
@@ -114,7 +118,9 @@ class PlayerOverlay extends HookConsumerWidget {
                                   SpotubeIcons.skipBack,
                                   color: textColor,
                                 ),
-                                onPressed: playlistNotifier.previous,
+                                onPressed: playlist.isFetching
+                                    ? null
+                                    : playlistNotifier.previous,
                               ),
                               Consumer(
                                 builder: (context, ref, _) {
@@ -143,7 +149,9 @@ class PlayerOverlay extends HookConsumerWidget {
                                   SpotubeIcons.skipForward,
                                   color: textColor,
                                 ),
-                                onPressed: playlistNotifier.next,
+                                onPressed: playlist.isFetching
+                                    ? null
+                                    : playlistNotifier.next,
                               ),
                             ],
                           ),

lib/components/player/player_queue.dart

@@ -1,16 +1,21 @@
 import 'dart:ui';
 
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 import 'package:scroll_to_index/scroll_to_index.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/fallbacks/not_found.dart';
 import 'package:spotube/components/shared/track_table/track_tile.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_auto_scroll_controller.dart';
 import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlayerQueue extends HookConsumerWidget {
   final bool floating;
@@ -24,12 +29,11 @@ class PlayerQueue extends HookConsumerWidget {
     final playlist = ref.watch(ProxyPlaylistNotifier.provider);
     final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
     final controller = useAutoScrollController();
+    final searchText = useState('');
+
+    final isSearching = useState(false);
+
     final tracks = playlist.tracks;
-
-    if (tracks.isEmpty) {
-      return const NotFound(vertical: true);
-    }
-
     final borderRadius = floating
         ? BorderRadius.circular(10)
         : const BorderRadius.only(
@@ -39,6 +43,27 @@ class PlayerQueue extends HookConsumerWidget {
     final theme = Theme.of(context);
     final headlineColor = theme.textTheme.headlineSmall?.color;
 
+    final filteredTracks = useMemoized(
+      () {
+        if (searchText.value.isEmpty) {
+          return tracks;
+        }
+        return tracks
+            .map((e) => (
+                  weightedRatio(
+                    '${e.name!} - ${TypeConversionUtils.artists_X_String(e.artists!)}',
+                    searchText.value,
+                  ),
+                  e
+                ))
+            .sorted((a, b) => b.$1.compareTo(a.$1))
+            .where((e) => e.$1 > 50)
+            .map((e) => e.$2)
+            .toList();
+      },
+      [tracks, searchText.value],
+    );
+
     useEffect(() {
       if (playlist.active == null) return null;
 
@@ -50,6 +75,10 @@ class PlayerQueue extends HookConsumerWidget {
       return null;
     }, []);
 
+    if (tracks.isEmpty) {
+      return const NotFound(vertical: true);
+    }
+
     return BackdropFilter(
       filter: ImageFilter.blur(
         sigmaX: 12.0,
@@ -64,7 +93,18 @@ class PlayerQueue extends HookConsumerWidget {
           color: theme.scaffoldBackgroundColor.withOpacity(0.5),
           borderRadius: borderRadius,
         ),
-        child: Column(
+        child: CallbackShortcuts(
+          bindings: {
+            LogicalKeySet(LogicalKeyboardKey.escape): () {
+              if (!isSearching.value) {
+                Navigator.of(context).pop();
+              }
+              isSearching.value = false;
+              searchText.value = '';
+            }
+          },
+          child: LayoutBuilder(builder: (context, constraints) {
+            return Column(
               children: [
                 Container(
                   height: 5,
@@ -76,7 +116,10 @@ class PlayerQueue extends HookConsumerWidget {
                   ),
                 ),
                 Row(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  mainAxisAlignment: MainAxisAlignment.center,
                   children: [
+                    if (constraints.mdAndUp || !isSearching.value) ...[
                       const SizedBox(width: 10),
                       Text(
                         context.l10n.tracks_in_queue(tracks.length),
@@ -87,6 +130,47 @@ class PlayerQueue extends HookConsumerWidget {
                         ),
                       ),
                       const Spacer(),
+                    ],
+                    if (constraints.mdAndUp || isSearching.value)
+                      TextField(
+                        onChanged: (value) {
+                          searchText.value = value;
+                        },
+                        decoration: InputDecoration(
+                          hintText: context.l10n.search,
+                          isDense: true,
+                          prefixIcon: constraints.smAndDown
+                              ? IconButton(
+                                  icon: const Icon(
+                                    Icons.arrow_back_ios_new_outlined,
+                                  ),
+                                  onPressed: () {
+                                    isSearching.value = false;
+                                    searchText.value = '';
+                                  },
+                                  style: IconButton.styleFrom(
+                                    padding: EdgeInsets.zero,
+                                    minimumSize: const Size.square(20),
+                                  ),
+                                )
+                              : const Icon(SpotubeIcons.filter),
+                          constraints: BoxConstraints(
+                            maxHeight: 40,
+                            maxWidth: constraints.smAndDown
+                                ? constraints.maxWidth - 20
+                                : 300,
+                          ),
+                        ),
+                      )
+                    else
+                      IconButton.filledTonal(
+                        icon: const Icon(SpotubeIcons.filter),
+                        onPressed: () {
+                          isSearching.value = !isSearching.value;
+                        },
+                      ),
+                    if (constraints.mdAndUp || !isSearching.value) ...[
+                      const SizedBox(width: 10),
                       FilledButton(
                         style: FilledButton.styleFrom(
                           backgroundColor:
@@ -107,8 +191,10 @@ class PlayerQueue extends HookConsumerWidget {
                       ),
                       const SizedBox(width: 10),
                     ],
+                  ],
                 ),
                 const SizedBox(height: 10),
+                if (!isSearching.value && searchText.value.isEmpty)
                   Flexible(
                     child: ReorderableListView.builder(
                       onReorder: (oldIndex, newIndex) {
@@ -125,7 +211,8 @@ class PlayerQueue extends HookConsumerWidget {
                           controller: controller,
                           index: i,
                           child: Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 8.0),
                             child: TrackTile(
                               index: i,
                               track: track,
@@ -144,9 +231,34 @@ class PlayerQueue extends HookConsumerWidget {
                             ),
                           ),
                         );
-                  }),
+                      },
+                    ),
+                  )
+                else
+                  Flexible(
+                    child: ListView.builder(
+                      itemCount: filteredTracks.length,
+                      itemBuilder: (context, i) {
+                        final track = filteredTracks.elementAt(i);
+                        return Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                          child: TrackTile(
+                            index: i,
+                            track: track,
+                            onTap: () async {
+                              if (playlist.activeTrack?.id == track.id) {
+                                return;
+                              }
+                              await playlistNotifier.jumpToTrack(track);
+                            },
+                          ),
+                        );
+                      },
+                    ),
                   ),
               ],
+            );
+          }),
         ),
       ),
     );