fix: open in finder in player

* start * feat: windows ready * fix: dark theme * type * feat: open in finder in player * remove console.log * fix: tabs renaming on windows * remove console.log
vincehi · Jun 28, 2024 · 647c828 · 647c828
1 parent b711d96
commit 647c828
Show file tree

Hide file tree

Showing 16 changed files with 128 additions and 65 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="cupcake">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "@tauri-apps/api": "^1.5.6 ",
     "github": "^14.0.0",
     "lodash-es": "^4.17.21",
+    "nanopath": "^2.0.1",
     "pretty-ms": "^9.0.0",
     "solid-heroicons": "^3.2.4",
     "solid-js": "^1.8.17",

diff --git a/src-tauri/src/cmds.rs b/src-tauri/src/cmds.rs
@@ -1,3 +1,4 @@
+use std::path::Path;
 use std::process::Command;
 use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Arc;
@@ -22,20 +23,29 @@ pub async fn create_directory(
   path_dir: String,
   state: tauri::State<'_, AppState>,
 ) -> Result<directory::Data, String> {
-  let parts = path_dir.split("/").collect::<Vec<&str>>();
-  let last_part = parts[parts.len() - 1];
+  let path = Path::new(&path_dir);
+  let directory_name = path
+    .file_name()
+    .and_then(|name| name.to_str())
+    .ok_or_else(|| "Nom de répertoire invalide".to_string())?;
+
   return match state
     .prisma_client
     .directory()
-    .create(path_dir.to_string(), last_part.to_string(), true, vec![])
+    .create(
+      path.to_string_lossy().into_owned(),
+      directory_name.to_string(),
+      true,
+      vec![],
+    )
     .exec()
     .await
   {
     Ok(directory) => Ok(directory),
     Err(error) if error.is_prisma_error::<UniqueKeyViolation>() => {
-      Err(last_part.to_string() + " already exists")
+      Err(format!("{} existe déjà", directory_name))
     }
-    Err(_error) => Err("An error occurred".to_string()),
+    Err(_error) => Err("Une erreur s'est produite".to_string()),
   };
 }
 

diff --git a/src/components/FilesTable/FilesTable.tsx b/src/components/FilesTable/FilesTable.tsx
@@ -7,7 +7,6 @@ import {
   getCoreRowModel,
 } from "@tanstack/solid-table";
 import { createVirtualizer } from "@tanstack/solid-virtual";
-import { random } from "lodash-es";
 import {
   For,
   createEffect,
@@ -129,8 +128,12 @@ const FilesTable: Component = () => {
 
   const handleRandomPosition = async () => {
     const totalCount = metadataFiles()?.total_count ?? 0;
-    const countRandom = random(0, totalCount - 1);
-    setRandomPosition(countRandom);
+    if (totalCount > 0) {
+      const randomBuffer = new Uint32Array(1);
+      window.crypto.getRandomValues(randomBuffer);
+      const countRandom = randomBuffer[0] % totalCount;
+      setRandomPosition(countRandom);
+    }
   };
 
   createEffect(() => {

diff --git a/src/components/FilesTable/columns.tsx b/src/components/FilesTable/columns.tsx
@@ -1,15 +1,15 @@
 import { type File } from "@prisma/client";
 import { type ColumnDef } from "@tanstack/solid-table";
 
-import { tauri } from "@tauri-apps/api";
+import { openInFinder as openInFinderApi } from "@/services/filesServices";
 import prettyMilliseconds from "pretty-ms";
 import { Icon } from "solid-heroicons";
 import { magnifyingGlass } from "solid-heroicons/solid";
 
 async function openInFinder(path: string, event: Event): Promise<void> {
   event.preventDefault();
   event.stopPropagation();
-  await tauri.invoke("open_in_finder", { path });
+  await openInFinderApi(path);
 }
 
 export const filesTableColumns: Array<ColumnDef<File>> = [

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -22,32 +22,36 @@ const Tabs: FlowComponent<Props, Component<any>> = (props) => {
             const [getRenamingMode, setRenamingMode] = createSignal(false);
 
             return (
-              <a
-                ondblclick={(event) => {
-                  event.stopPropagation();
-                  setRenamingMode(true);
-                  setFocused(true);
-                  target()?.select();
-                }}
-                onClick={() => props.setActive(index())}
-                class="tab flex-shrink-0"
-                classList={{
-                  "tab-active": item.active,
-                }}
-              >
+              <div class="tab flex-shrink-0 flex items-center" classList={{ "tab-active": item.active }}>
                 <label class="input-sizer" data-value={item.name}>
                   <input
                     ref={setTarget}
                     type="text"
                     value={item.name}
-                    disabled={!getRenamingMode()}
+                    readOnly={!getRenamingMode()}
+                    class="appearance-none bg-transparent border-none focus:outline-none cursor-pointer"
+                    classList={{
+                      "cursor-text": getRenamingMode(),
+                    }}
+                    onClick={(event) => {
+                      if (!getRenamingMode()) {
+                        props.setActive(index());
+                      }
+                    }}
+                    onDblClick={(event) => {
+                      event.preventDefault();
+                      setRenamingMode(true);
+                      setFocused(true);
+                      target()?.select();
+                    }}
                     onBlur={() => setRenamingMode(false)}
                     onInput={(event) => {
                       tabsStore.rename(index(), event.target.value);
                     }}
                     onKeyDown={(event) => {
                       if (event.key === "Enter") {
                         event.preventDefault();
+                        setRenamingMode(false);
                         setFocused(false);
                       }
                     }}
@@ -64,7 +68,7 @@ const Tabs: FlowComponent<Props, Component<any>> = (props) => {
                 >
                   <Icon path={xMark} class="flex-shrink-0 w-4" />
                 </button>
-              </a>
+              </div>
             );
           }}
         </For>

diff --git a/src/components/WavePlayer/WavePlayer.tsx b/src/components/WavePlayer/WavePlayer.tsx
@@ -1,7 +1,8 @@
 import { useSearch } from "@/providers/SearchProvider/SearchProvider";
+import { openInFinder } from "@/services/filesServices";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
 import { Icon } from "solid-heroicons";
-import { pause, play } from "solid-heroicons/solid";
+import { magnifyingGlass, pause, play } from "solid-heroicons/solid";
 import {
   Match,
   Switch,
@@ -58,8 +59,8 @@ const WavePlayer: Component = () => {
 
   return (
     <div class="player p-4">
-      <div>
-        <div class="flex items-center mb-4">
+      <div class="flex items-center mb-4 gap-4">
+        <div class="flex items-center">
           <input
             id="default-checkbox"
             type="checkbox"
@@ -74,6 +75,17 @@ const WavePlayer: Component = () => {
             Auto play
           </label>
         </div>
+        <button
+          class="ml-auto"
+          disabled={!store.pathSelected}
+          onClick={() => openInFinder(store.pathSelected)}
+          title="Open in finder"
+        >
+          <Icon
+            path={magnifyingGlass}
+            class="flex-shrink-0 w-4 h-4 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+          />
+        </button>
       </div>
       <div ref={container} />
 

diff --git a/src/lib/nanopath.ts b/src/lib/nanopath.ts
@@ -0,0 +1,13 @@
+import { isWindows } from '@tauri-apps/api/helpers/os-check';
+
+import type { PathPlatform } from 'nanopath/dist/types';
+
+import posix from '../../node_modules/nanopath/dist/posix'; 
+import win32 from '../../node_modules/nanopath/dist/win32'; 
+
+type SimplePathPlatform = Omit<PathPlatform, 'posix' | 'win32'>;
+
+const Platform = (isWindows() ? win32 : posix);
+const Path: SimplePathPlatform = Platform;
+
+export default Path;
diff --git a/src/providers/SearchProvider/SearchProvider.tsx b/src/providers/SearchProvider/SearchProvider.tsx
@@ -4,6 +4,7 @@ import { type SetStoreFunction } from "solid-js/store";
 
 interface SearchActions {
   setCollapse: SetStoreFunction<Collapsed>;
+  setAllCollapse: SetStoreFunction<Collapsed>;
   setSearch: SetStoreFunction<string>;
   setPathSelected: SetStoreFunction<string>;
 }

diff --git a/src/services/filesServices.ts b/src/services/filesServices.ts
@@ -39,3 +39,7 @@ export const getMetadataFiles: ResourceFetcher<
   });
   return data;
 };
+
+export const openInFinder = (path: string): Promise<void> => {
+  return invoke("open_in_finder", { path });
+};
diff --git a/src/views/SearchView.tsx/components/Sidebar/Sidebar.tsx b/src/views/SearchView.tsx/components/Sidebar/Sidebar.tsx
@@ -7,7 +7,7 @@ const Sidebar: Component = () => {
   return (
     <aside
       id="logo-sidebar"
-      class="sidebar transition-transform bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+      class="hidden-scrollbar sidebar transition-transform bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
       aria-label="Sidebar"
     >
       <ul class="sidebar-main px-3 py-4">

diff --git a/src/views/SearchView.tsx/components/Sidebar/components/ActionsDirectory/ActionsDirectory.tsx b/src/views/SearchView.tsx/components/Sidebar/components/ActionsDirectory/ActionsDirectory.tsx
@@ -32,8 +32,8 @@ const ActionsDirectory: Component<{
               items,
               (path) =>
                 !(
-                  `${props.directory.path}/` !== path &&
-                  !startsWith(path, `${props.directory.path}/`)
+                  props.directory.path !== path &&
+                  !startsWith(path, props.directory.path)
                 )
             );
           })

diff --git a/src/views/SearchView.tsx/components/Sidebar/components/AddDirectories/AddDirectories.tsx b/src/views/SearchView.tsx/components/Sidebar/components/AddDirectories/AddDirectories.tsx
@@ -1,3 +1,4 @@
+import nanopath from "@/lib/nanopath";
 import directoryServices, { CustomError } from "@/services/directoryServices";
 import directoriesStore from "@/stores/directoriesStore";
 import { message, open } from "@tauri-apps/api/dialog";
@@ -24,7 +25,8 @@ const AddDirectories: Component = () => {
   createEffect(() => {
     if (!isEmpty(getSelectedDirectories())) {
       void (async () => {
-        for (const pathDir of getSelectedDirectories()) {
+        for (const path of getSelectedDirectories()) {
+          const pathDir = nanopath.join(path, nanopath.sep);
           try {
             await directoriesStore.createDirectory(pathDir);
             await directoryServices.scanDirectory(pathDir);