Wavesurfer hooks wip (#19)

fix: add wavesurfer-solidjs package

package.json

@@ -60,7 +60,8 @@
     "solid-heroicons": "^3.2.4",
     "solid-js": "^1.8.17",
     "solidjs-use": "^2.3.0",
-    "wavesurfer.js": "^6.6.4"
+    "wavesurfer-solidjs": "^1.0.4",
+    "wavesurfer.js": "^7.8.1"
   },
   "repository": {
     "type": "git",

src-tauri/src/cmds.rs

@@ -109,8 +109,11 @@ pub async fn get_directory_files(
   paths: Vec<String>,
   search: String,
   skip: i64,
+  take: i64, // Ajout du paramètre take
   state: tauri::State<'_, AppState>,
 ) -> Result<std::vec::Vec<file::Data>, String> {
+  let take = take.clamp(1, 1000);
+
   let query = state
     .prisma_client
     .file()
@@ -125,7 +128,7 @@ pub async fn get_directory_files(
     ])
     .order_by(file::path::order(Direction::Asc));
 
-  return match query.skip(skip).take(20).exec().await {
+  return match query.skip(skip).take(take).exec().await {
     Ok(files) => Ok(files),
     Err(e) => Err(e.to_string()),
   };
@@ -251,19 +254,8 @@ pub async fn scan_directory(
 
   let mut result = Vec::with_capacity(files.len());
 
-  let stop_flag = Arc::new(AtomicBool::new(false));
-  let stop_flag_clone = stop_flag.clone();
-
-  app_handle.once_global("stop-analyze-directory-files".to_string(), move |_| {
-    stop_flag_clone.store(true, Ordering::SeqCst);
-  });
-
   let mut iter = files.into_iter();
   while let Some(path_file) = iter.next() {
-    if stop_flag.load(Ordering::SeqCst) {
-      println!("Analyse arrêtée par l'utilisateur.");
-      break;
-    }
     let last_part = path_file
       .file_name()
       .to_str()

src/components/FilesTable/FilesTable.tsx

@@ -83,7 +83,7 @@ const FilesTable: Component = () => {
         return files()?.length || 0;
       }
     },
-    overscan: 8,
+    overscan: 10,
     estimateSize: () => 45,
     isScrollingResetDelay: 0,
   });

src/components/FilesTable/constants.ts

@@ -1 +1 @@
-export const DEFAULT_ITEM_PER_PAGE = 20;
+export const DEFAULT_ITEM_PER_PAGE = 100;

src/components/WavePlayer/WavePlayer.tsx

@@ -3,58 +3,43 @@ import { openInFinder } from "@/services/filesServices";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
 import { Icon } from "solid-heroicons";
 import { magnifyingGlass, pause, play } from "solid-heroicons/solid";
-import {
-  Match,
-  Switch,
-  createEffect,
-  createSignal,
-  onMount,
-  type Component,
-} from "solid-js";
+import { Match, Switch, createEffect, on, type Component } from "solid-js";
 import { useLocalStorage } from "solidjs-use";
-import WaveSurfer from "wavesurfer.js";
-// import styles from "./App.module.css";
+import { createWavesurfer } from "wavesurfer-solidjs";
 
 // https://dolby.io/blog/how-to-visualize-and-annotate-your-audio-with-wavesurfer-js-and-konva-in-solidjs/
 const WavePlayer: Component = () => {
   const [store] = useSearch();
-  let container!: HTMLDivElement, // Auto-referenced by the returning JSX
-    wavesurfer: WaveSurfer;
-
-  const [isPlaying, setIsPlaying] = createSignal(false);
-
   const [autoPlay, setAutoplay] = useLocalStorage("autoPlay", false);
 
-  onMount(() => {
-    wavesurfer = WaveSurfer.create({
-      container,
-      waveColor: "violet",
-      progressColor: "purple",
-      interact: false,
-    });
-    wavesurfer.on("ready", function () {
-      console.log("One init");
-      if (autoPlay()) {
-        void wavesurfer.play();
-      }
-    });
-    wavesurfer.on("play", () => {
-      setIsPlaying(true);
-    });
-    wavesurfer.on("pause", () => setIsPlaying(false));
-    wavesurfer.on("finish", () => setIsPlaying(false));
-  });
+  let container!: HTMLDivElement;
 
-  createEffect(() => {
-    const file = store.pathSelected;
-    if (file !== "") {
-      void wavesurfer.load(convertFileSrc(file));
-    }
+  const { wavesurfer, isPlaying, isReady } = createWavesurfer({
+    getContainer: () => container,
+    get url() {
+      return convertFileSrc(store.pathSelected);
+    },
+    waveColor: "#DC2B20",
+    progressColor: "grey",
+    height: 100,
+    backend: "WebAudio",
   });
 
+  createEffect(
+    on(
+      isReady,
+      (v) => {
+        if (v && autoPlay()) {
+          void wavesurfer()?.play();
+        }
+      },
+      { defer: true }
+    )
+  );
+
   const handlePlayPause = (event: Event): void => {
     event.preventDefault();
-    void wavesurfer.playPause();
+    void wavesurfer()?.playPause();
   };
 
   return (
@@ -87,7 +72,7 @@ const WavePlayer: Component = () => {
           />
         </button>
       </div>
-      <div ref={container} />
+      <div ref={(el) => (container = el)} />
 
       <label class="swap">
         <Switch>

src/services/filesServices.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_ITEM_PER_PAGE } from "@/components/FilesTable/constants";
 import { MetadataFiles, paddedSplice } from "@/services/helpers/helpers";
 import { ISearchState } from "@/stores/store";
 import { type File as PrismaFile } from "@prisma/client";
@@ -21,6 +22,7 @@ export const getDirectoryFiles: ResourceFetcher<
     const data = await invoke<PrismaFile[]>("get_directory_files", {
       paths,
       search,
+      take: DEFAULT_ITEM_PER_PAGE,
       skip: refetching,
     });
     return paddedSplice(prevValue, refetching, data);
@@ -29,6 +31,7 @@ export const getDirectoryFiles: ResourceFetcher<
   const data = await invoke<PrismaFile[]>("get_directory_files", {
     paths,
     search,
+    take: DEFAULT_ITEM_PER_PAGE,
     skip: 0,
   });