+ {artist.images && artist.images.length > 0 && (
+
+ )}
+
{artist.name}
+
+
-
- {topTracks.map((track) => (
-
-
- {track.name}
-
-
+ {topTracks.length > 0 && (
+
+
Top Tracks
+
+ {topTracks.map((track) => (
+
+
+ {track.name}
+
+
+
+ ))}
- ))}
-
+
+ )}
-
Albums
-
- {filteredAlbums.map((album) => (
-
-
-
-
{album.name}
-
+ {artistAlbums.length > 0 && (
+
+
Albums
+
+ {artistAlbums.map((album) => (
+
handleDownloadAlbum(album)} />
+ ))}
- ))}
-
+
+ )}
+
+ {artistSingles.length > 0 && (
+
+
Singles
+
+ {artistSingles.map((album) => (
+
handleDownloadAlbum(album)} />
+ ))}
+
+
+ )}
+
+ {artistCompilations.length > 0 && (
+
+
Compilations
+
+ {artistCompilations.map((album) => (
+
handleDownloadAlbum(album)} />
+ ))}
+
+
+ )}
);
};
diff --git a/spotizerr-ui/src/routes/home.tsx b/spotizerr-ui/src/routes/home.tsx
index b4c2e6a..af7fd62 100644
--- a/spotizerr-ui/src/routes/home.tsx
+++ b/spotizerr-ui/src/routes/home.tsx
@@ -1,63 +1,42 @@
import { useState, useEffect, useMemo, useContext, useCallback, useRef } from "react";
+import { useNavigate, useSearch, useRouterState } from "@tanstack/react-router";
import { useDebounce } from "use-debounce";
-import apiClient from "@/lib/api-client";
import { toast } from "sonner";
-import type { TrackType, AlbumType, ArtistType, PlaylistType } from "@/types/spotify";
+import type { TrackType, AlbumType, ArtistType, PlaylistType, SearchResult } from "@/types/spotify";
import { QueueContext } from "@/contexts/queue-context";
import { SearchResultCard } from "@/components/SearchResultCard";
+import { indexRoute } from "@/router";
const PAGE_SIZE = 12;
-type SearchResult = (TrackType | AlbumType | ArtistType | PlaylistType) & {
- model: "track" | "album" | "artist" | "playlist";
-};
-
export const Home = () => {
- const [query, setQuery] = useState("");
- const [searchType, setSearchType] = useState<"track" | "album" | "artist" | "playlist">("track");
- const [allResults, setAllResults] = useState
([]);
- const [displayedResults, setDisplayedResults] = useState([]);
- const [isLoading, setIsLoading] = useState(false);
- const [isLoadingMore, setIsLoadingMore] = useState(false);
+ const navigate = useNavigate({ from: "/" });
+ const { q, type } = useSearch({ from: "/" });
+ const { items: allResults } = indexRoute.useLoaderData();
+ const isLoading = useRouterState({ select: (s) => s.status === "pending" });
+
+ const [query, setQuery] = useState(q || "");
+ const [searchType, setSearchType] = useState<"track" | "album" | "artist" | "playlist">(type || "track");
const [debouncedQuery] = useDebounce(query, 500);
+
+ const [displayedResults, setDisplayedResults] = useState([]);
+ const [isLoadingMore, setIsLoadingMore] = useState(false);
const context = useContext(QueueContext);
const loaderRef = useRef(null);
+ useEffect(() => {
+ navigate({ search: (prev) => ({ ...prev, q: debouncedQuery, type: searchType }) });
+ }, [debouncedQuery, searchType, navigate]);
+
+ useEffect(() => {
+ setDisplayedResults(allResults.slice(0, PAGE_SIZE));
+ }, [allResults]);
+
if (!context) {
throw new Error("useQueue must be used within a QueueProvider");
}
const { addItem } = context;
- useEffect(() => {
- if (debouncedQuery.length < 3) {
- setAllResults([]);
- setDisplayedResults([]);
- return;
- }
-
- const performSearch = async () => {
- setIsLoading(true);
- try {
- const response = await apiClient.get<{
- items: SearchResult[];
- }>(`/search?q=${debouncedQuery}&search_type=${searchType}&limit=50`);
-
- const augmentedResults = response.data.items.map((item) => ({
- ...item,
- model: searchType,
- }));
- setAllResults(augmentedResults);
- setDisplayedResults(augmentedResults.slice(0, PAGE_SIZE));
- } catch {
- toast.error("Search failed. Please try again.");
- } finally {
- setIsLoading(false);
- }
- };
-
- performSearch();
- }, [debouncedQuery, searchType]);
-
const loadMore = useCallback(() => {
setIsLoadingMore(true);
setTimeout(() => {
@@ -93,7 +72,8 @@ export const Home = () => {
const handleDownloadTrack = useCallback(
(track: TrackType) => {
- addItem({ spotifyId: track.id, type: "track", name: track.name });
+ const artistName = track.artists?.map((a) => a.name).join(", ");
+ addItem({ spotifyId: track.id, type: "track", name: track.name, artist: artistName });
toast.info(`Adding ${track.name} to queue...`);
},
[addItem],
@@ -101,7 +81,8 @@ export const Home = () => {
const handleDownloadAlbum = useCallback(
(album: AlbumType) => {
- addItem({ spotifyId: album.id, type: "album", name: album.name });
+ const artistName = album.artists?.map((a) => a.name).join(", ");
+ addItem({ spotifyId: album.id, type: "album", name: album.name, artist: artistName });
toast.info(`Adding ${album.name} to queue...`);
},
[addItem],
diff --git a/spotizerr-ui/src/routes/playlist.tsx b/spotizerr-ui/src/routes/playlist.tsx
index 336d8c3..4444233 100644
--- a/spotizerr-ui/src/routes/playlist.tsx
+++ b/spotizerr-ui/src/routes/playlist.tsx
@@ -3,22 +3,10 @@ import { useEffect, useState, useContext } from "react";
import apiClient from "../lib/api-client";
import { useSettings } from "../contexts/settings-context";
import { toast } from "sonner";
-import type { ImageType, TrackType } from "../types/spotify";
+import type { PlaylistType, TrackType } from "../types/spotify";
import { QueueContext } from "../contexts/queue-context";
-
-interface PlaylistItemType {
- track: TrackType | null;
-}
-
-interface PlaylistType {
- id: string;
- name: string;
- description: string | null;
- images: ImageType[];
- tracks: {
- items: PlaylistItemType[];
- };
-}
+import { FaArrowLeft } from "react-icons/fa";
+import { FaDownload } from "react-icons/fa6";
export const Playlist = () => {
const { playlistId } = useParams({ from: "/playlist/$playlistId" });
@@ -95,11 +83,11 @@ export const Playlist = () => {
};
if (error) {
- return {error}
;
+ return {error}
;
}
if (!playlist) {
- return Loading...
;
+ return Loading...
;
}
const filteredTracks = playlist.tracks.items.filter(({ track }) => {
@@ -109,34 +97,108 @@ export const Playlist = () => {
});
return (
-
-
-
-
-
{playlist.name}
-
{playlist.description}
-
-
+ {onDownload && (
+
+ )}
+
+