doru/navidrome_disconic_fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

list songs based on search

Browse Source
This commit is contained in:
Tudorel Oprisan 2024-12-20 22:42:28 +00:00
parent 326d080e2c
commit f444782ab2
4 changed files with 192 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
subsonic-ui-svelte/index.html
View File

@ -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>

2
subsonic-ui-svelte/src/App.svelte
View File

@ -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>

180
subsonic-ui-svelte/src/components/Search.svelte Normal file
View File

@ -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>

30
subsonic-ui-svelte/src/lib/api.ts
View File

@ -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);
};