From f444782ab2f19a523097eeac92db825ed99aeabb Mon Sep 17 00:00:00 2001
From: Tudorel Oprisan <tudorel.oprisan@chxt.ro>
Date: Fri, 20 Dec 2024 22:42:28 +0000
Subject: [PATCH] list songs based on search

---
 subsonic-ui-svelte/index.html                 |   2 +-
 subsonic-ui-svelte/src/App.svelte             |   2 +
 .../src/components/Search.svelte              | 180 ++++++++++++++++++
 subsonic-ui-svelte/src/lib/api.ts             |  30 +--
 4 files changed, 192 insertions(+), 22 deletions(-)
 create mode 100644 subsonic-ui-svelte/src/components/Search.svelte
diff --git a/subsonic-ui-svelte/index.html b/subsonic-ui-svelte/index.html
index b6c5f0a..90ea09d 100644
--- a/subsonic-ui-svelte/index.html
+++ b/subsonic-ui-svelte/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte + TS</title>
+    <title>Discord music bot remote</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/subsonic-ui-svelte/src/App.svelte b/subsonic-ui-svelte/src/App.svelte
index dccf1ac..6bad1ac 100644
--- a/subsonic-ui-svelte/src/App.svelte
+++ b/subsonic-ui-svelte/src/App.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
      import ArtistList from "./components/ArtistList.svelte";
+     import Search from './components/Search.svelte';  // Import the Search component
 </script>
 
 <main>
   <h1>Navidrome Frontend</h1>
+    <Search />  <!-- Add the Search component -->
     <ArtistList />
 </main>
 
diff --git a/subsonic-ui-svelte/src/components/Search.svelte b/subsonic-ui-svelte/src/components/Search.svelte
new file mode 100644
index 0000000..b22110b
--- /dev/null
+++ b/subsonic-ui-svelte/src/components/Search.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { fetchFromAPI } from "../lib/api"; // Assuming you have the `fetchFromAPI` function available
+    import { debounce } from "../lib/api";
+
+    let query = ""; // Search query input by user
+    let searchResults: any[] = []; // Store search results
+    let loading = false; // Loading state
+    let error: string = ""; // Error message
+    let coverArtUrls: Record<string, string> = {}; // Map to store cover art URLs for each album
+
+    // Function to handle search
+    const searchTracks = async () => {
+        if (!query.trim()) return; // Don't search if the query is empty
+
+        loading = true;
+        error = "";
+        try {
+            const params = { query }; // Search query parameter
+            const response = await fetchFromAPI("search2", params); // Use 'search2' endpoint to search for tracks
+            const songs = response["subsonic-response"].searchResult2.song; // Assuming 'searchResult2.song' contains the song list
+
+            // Map the search results to the component
+            searchResults = songs;
+
+            // For each song, fetch the cover art if not already loaded
+            for (const song of songs) {
+                if (!coverArtUrls[song.albumId]) {
+                    // Fetch cover art for the album (we'll assume the albumId exists)
+                    const coverArtUrl = await fetchCoverArt(song.albumId);
+                    coverArtUrls[song.albumId] = coverArtUrl;
+                }
+            }
+        } catch (err) {
+            error = "Error fetching search results";
+            console.error(err);
+        } finally {
+            loading = false;
+        }
+    };
+
+    // Fetch the cover art image URL for the given album ID
+    const fetchCoverArt = async (albumId: string): Promise<string> => {
+        const params = { id: albumId, size: "50" }; // Size parameter for resizing
+        const response = await fetchFromAPI("getCoverArt", params);
+        const coverArtUrl = URL.createObjectURL(response);
+        return coverArtUrl;
+    };
+
+    const formatDuration = (seconds: number): string => {
+        const minutes = Math.floor(seconds / 60); // Get the full minutes
+        const remainingSeconds = seconds % 60; // Get the remaining seconds
+        return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`; // Ensure seconds are always 2 digits
+    };
+
+    const onInputChange = () => {
+        debounce(searchTracks, 500); // 500ms debounce delay
+    };
+</script>
+
+<div class="search-container">
+    <input
+        type="text"
+        bind:value={query}
+        placeholder="Search for a song"
+        on:input={onInputChange}
+    />
+
+    {#if loading}
+        <div class="loading">Loading search results...</div>
+    {:else if error}
+        <div class="error">{error}</div>
+    {:else if searchResults.length > 0}
+        <ul class="search-results">
+            {#each searchResults as result, index}
+                <li class="search-result">
+                    <!-- Display the search result number -->
+                    <span class="result-number">{index + 1}.</span>
+                    <!-- Display the album cover art -->
+                    <img
+                        src={coverArtUrls[result.albumId] ||
+                            "/default-cover.jpg"}
+                        alt={result.album}
+                        class="album-cover"
+                    />
+                    <div class="track-details">
+                        <h4>{result.title}</h4>
+                        <!-- Track name -->
+                        <p>{result.artist}</p>
+                        <!-- Artist name -->
+                    </div>
+                    <!-- Album and duration -->
+                    <div class="album-duration">
+                        <span>{formatDuration(result.duration)}</span>
+                        <span>{result.album}</span>
+                    </div>
+                </li>
+            {/each}
+        </ul>
+    {:else}
+        <div class="loading">No results found</div>
+    {/if}
+</div>
+
+<style>
+    .search-container {
+        margin: 1rem;
+    }
+
+    input {
+        padding: 0.5rem;
+        font-size: 1rem;
+        margin-bottom: 1rem;
+        width: 100%;
+        max-width: 400px;
+    }
+
+.search-result {
+    display: flex;
+    align-items: center;
+    gap: 16px; /* Space between elements */
+    padding: 8px 0;
+    border-bottom: 1px solid #ddd; /* Optional: add a separator */
+    position: relative; /* For precise positioning of the result number */
+    border-bottom: none;
+}
+
+.result-number {
+    font-weight: normal;
+    width: 40px; /* Fixed width for alignment */
+    text-align: right;
+    align-self: flex-end; /* Align with the bottom of the album image */
+    margin-bottom: 4px; /* Optional: fine-tune spacing */
+}
+
+.album-cover {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 4px; /* Optional: rounded corners */
+}
+
+.track-details {
+    flex-grow: 1;
+    margin-left: 8px;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.track-details h4 {
+    font-weight: bold;
+    margin: 0;
+    font-size: 1rem;
+}
+
+
+
+
+.track-details p {
+    margin: 4px 0 0;
+    font-size: 0.9rem;
+    color: #555; /* Optional: gray color for artist name */
+}
+
+.album-duration {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    text-align: right;
+    gap: 4px; /* Space between album name and duration */
+}
+
+.album-duration span {
+    font-size: 0.9rem;
+}
+
+
+
+</style>
diff --git a/subsonic-ui-svelte/src/lib/api.ts b/subsonic-ui-svelte/src/lib/api.ts
index 0c3db26..3423f78 100644
--- a/subsonic-ui-svelte/src/lib/api.ts
+++ b/subsonic-ui-svelte/src/lib/api.ts
@@ -3,27 +3,6 @@ const API_VERSION = "1.16.1"; // Replace with the Subsonic API version you're us
 const API_PASSWORD = "xWPciqjr5VSVDvVS0sAH9L8gKEQm42"; // Replace with your actual token
 const API_CLIENT = "SvelteApp";
 
-// export async function fetchFromAPI(endpoint: string, params: Record<string, string>) {
-//     const url = new URL(`${API_URL}/${endpoint}`);
-//     url.search = new URLSearchParams({
-//         ...params,
-//         v: API_VERSION,
-//         c: API_CLIENT,
-//         f: "json", // Always request JSON format
-//         u: "drome", // Replace with your username
-//         p: API_PASSWORD
-//         //t: API_TOKEN, // Your token
-//         //s: "salt", // Optional if you're using salted tokens
-//     }).toString();
-
-
-//     const response = await fetch(url.toString());
-//     if (!response.ok) {
-//         throw new Error(`API request failed: ${response.statusText}`);
-//     }
-//     return response.json();
-// }
-
 
 export async function fetchFromAPI(endpoint: string, params: Record<string, string>) {
     const url = new URL(`${API_URL}/${endpoint}`);
@@ -65,3 +44,12 @@ export async function fetchFromAPI(endpoint: string, params: Record<string, stri
     // If it's a request for cover art, return the raw image data as a Blob
     return response.blob();
 }
+
+let debounceTimeout: ReturnType<typeof setTimeout>;
+
+export const debounce = (callback: () => void, delay: number) => {
+    if (debounceTimeout) {
+        clearTimeout(debounceTimeout); // Clear the previous timeout
+    }
+    debounceTimeout = setTimeout(callback, delay);
+};

No results found