search bar

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@egjs/react-flicking": "^4.11.0",
     "@egjs/react-grid": "^1.15.2",
+    "@faker-js/faker": "^8.3.1",
     "@hookform/resolvers": "^3.1.1",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -56,8 +57,8 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.2",
     "react-toast": "^1.0.3",
+    "react-viewport-list": "^7.1.1",
     "react-virtualized": "^9.22.5",
-    "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
     "shadcn-ui": "^0.3.0",
     "tailwind-merge": "^1.13.2",

src-tauri/Cargo.toml

@@ -33,6 +33,7 @@ futures = "0.3.29"
 youtube_dl = { version = "0.9.0", features = ["tokio"] }
 tokio = { version = "1.20.1", features = ["full"] }
 base64 = { version = "0.21.5" }
+indicium = "0.6.0"
 
 [features]
 # by default Tauri runs in production mode

src-tauri/src/api/player.rs

@@ -4,6 +4,7 @@ use std::{
     sync::{Arc, Mutex},
 };
 
+use indicium::simple::SearchIndex;
 use log::{error, info};
 use tauri::{AppHandle, State};
 
@@ -95,3 +96,30 @@ pub async fn seek_to(
         Err(e) => Err(e.to_string()),
     }
 }
+
+#[tauri::command]
+pub async fn search_audio(
+    query: String,
+    playlist: String,
+    player: State<'_, Arc<Mutex<MusicPlayer>>>,
+) -> Result<Vec<super::utils::Audio>, String> {
+    let player = player.lock().unwrap();
+    if query.is_empty() {
+        return Ok(super::utils::create_audio_list(player, &playlist));
+    }
+    let mut results = Vec::new();
+    let mut search_index: SearchIndex<usize> = SearchIndex::default();
+
+    // this has to be done when the app starts !
+    // this create a problem when we switch between playlist and search
+    player.playlists[&playlist]
+        .iter()
+        .enumerate()
+        .for_each(|(i, audio)| search_index.insert(&i, audio));
+
+    let search_results = search_index.search(&query);
+    for result in search_results {
+        results.push(super::utils::create_audio(&player.audios[*result], result));
+    }
+    Ok(results)
+}

src-tauri/src/api/utils.rs

@@ -29,29 +29,25 @@ pub fn create_audio_list(player: MutexGuard<'_, MusicPlayer>, str: &str) -> Vec<
     let mut audios = Vec::new();
     if !str.is_empty() {
         for (id, audio) in player.playlists[str].iter().enumerate() {
-            audios.push(Audio {
-                path: audio.path.clone(),
-                title: audio.tag.title.clone(),
-                artist: audio.tag.artist.clone(),
-                album: audio.tag.album.clone(),
-                duration: audio.duration.as_secs(),
-                id,
-                cover: audio.cover.clone(),
-            });
+            audios.push(create_audio(audio, &id));
         }
     } else {
         for (id, audio) in player.audios.iter().enumerate() {
-            audios.push(Audio {
-                path: audio.path.clone(),
-                title: audio.tag.title.clone(),
-                artist: audio.tag.artist.clone(),
-                album: audio.tag.album.clone(),
-                duration: audio.duration.as_secs(),
-                id,
-                cover: audio.cover.clone(),
-            });
+            audios.push(create_audio(audio, &id));
         }
     }
 
     audios
 }
+
+pub fn create_audio(audio: &crate::music::audio::_Audio, id: &usize) -> Audio {
+    Audio {
+        path: audio.path.clone(),
+        title: audio.tag.title.clone(),
+        artist: audio.tag.artist.clone(),
+        album: audio.tag.album.clone(),
+        duration: audio.duration.as_secs(),
+        id: *id,
+        cover: audio.cover.clone(),
+    }
+}

src-tauri/src/main.rs

@@ -78,6 +78,7 @@ fn main() {
             player::pause,
             player::update_player,
             player::seek_to,
+            player::search_audio,
             audio::updated_current_playlist,
             audio::retrieve_audios,
             audio::current_audio_status,

src-tauri/src/music/audio.rs

@@ -142,6 +142,19 @@ impl std::cmp::PartialEq for _Audio {
     }
 }
 
+struct AudioWrapper(_Audio);
+
+impl indicium::simple::Indexable for AudioWrapper {
+    fn strings(&self) -> Vec<String> {
+        vec![
+            self.0.path.clone(),
+            duration_to_string(self.0.duration),
+            self.0.format.clone(),
+            self.0.status.to_string(),
+        ]
+    }
+}
+
 fn gen_tag(path: &PathBuf) -> TaggedFile {
     let tagged_file = Probe::open(path);
     match tagged_file {

src/components/player/Player.tsx

@@ -63,8 +63,8 @@ export async function update_after_play(
   const playlist = isObjectEmpty(currentPlaylistListening as unknown as object)
     ? name
     : !fromMusicPage
-    ? currentPlaylistListening
-    : name
+      ? currentPlaylistListening
+      : name
   console.log(playlist)
   await invoke("update_player", {
     playlist: playlist,
@@ -171,6 +171,7 @@ export function Player() {
     total: 0,
     status: "stopped",
   } as AudioStatus)
+  // the audio should be retrieved from backend and the not the context
   const { audio } = useContext(AppContext)
   const wupdate_status = () => {
     void invoke("current_audio_status")
@@ -202,7 +203,7 @@ export function Player() {
   }, [wupdate_status, status])
 
   useEffect(() => {
-    ;(() => {
+    ; (() => {
       if (!isObjectEmpty(audio)) {
         invoke("update_history")
           .then(() => {

src/components/ui/MusicCard.tsx

@@ -47,7 +47,7 @@ export default function MusicCard({
                         await play(context, audio, true)
                     }}
                     id={`audio-${audio.id}`}
-                    className="hover:cursor-pointer p-4 rounded-lg transition ease-in-out delay-90 dark:hover:bg-gray-900 hover:bg-gray-50 duration-150 flex items-center space-x-8 w-full"
+                    className="hover:cursor-pointer p-4 rounded-lg transition ease-in-out delay-90 dark:hover:bg-gray-900 hover:bg-gray-50 duration-150 flex items-center space-x-6 w-full"
                 >
                     <div className="shrink-0">
                         <Image

src/components/ui/command.tsx

@@ -60,7 +60,19 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+// eslint-disable-next-line react/display-name
+const CommandMusicList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("overflow-x-hidden", className)}
     {...props}
   />
 ))
@@ -118,6 +130,14 @@ const CommandItem = React.forwardRef<
   />
 ))
 
+// eslint-disable-next-line react/display-name
+const CommandMusicItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item ref={ref} className={cn("", className)} {...props} />
+))
+
 CommandItem.displayName = CommandPrimitive.Item.displayName
 
 const CommandShortcut = ({
@@ -141,6 +161,8 @@ export {
   CommandInput,
   CommandItem,
   CommandList,
+  CommandMusicItem,
+  CommandMusicList,
   CommandSeparator,
   CommandShortcut,
 }