WIP. A little custom music server
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: album id page

+17 -5
+1 -1
backend/ISSUES.md
··· 12 12 13 13 Cover art fetcher should be running on schedule to load this shit in background rather then block user flow. 14 14 15 - 15 + - [ ] Handle `feat.` bullshit 16 16 17 17 ## Medium Priority (Reliability & Maintainability) 18 18 - [ ] **Standardize API Error Handling**
+6 -1
web/src/data/get-album-by-id.ts
··· 10 10 .handler(({ data }) => 11 11 pipe( 12 12 Effect.tryPromise({ 13 - try: () => client.album({ id: data.id }).get(), 13 + try: () => 14 + client.album({ id: data.id }).get({ 15 + query: { 16 + include: ["song", "album-artist", "song-artist", "musicbrainz"].join(","), 17 + }, 18 + }), 14 19 catch: (err) => 15 20 new FetchFailedError({ 16 21 cause: err,
+10 -3
web/src/routes/album/$albumId.tsx
··· 4 4 import { useServerFn } from "@tanstack/react-start"; 5 5 import { Fragment, Suspense } from "react"; 6 6 import { SongRow } from "@/components/song-row"; 7 + import { Image } from "@unpic/react"; 7 8 8 9 export const Route = createFileRoute("/album/$albumId")({ 9 10 component: AlbumPage, 10 11 }); 11 12 12 - const cover = 13 + const mockCover = 13 14 "https://kagi.com/proxy/61XULTvSzAL._UF1000,1000_QL80_.jpg?c=CXPfL3-FqybbvZNQU82_BGSCqYZMz5YT_CgNKn5TDDXCMTx4RBDER1f1uKKcHU3q-jYfB0s9g7IqjQnd4qu98gIcHOAFJ-6Z9h86prZDhCifllLXbHfuIeOHoHw5gbgC"; 15 + 16 + const musicbrainzCover = (rgId: string) => `http://coverartarchive.org/release-group/${rgId}/front`; 14 17 15 18 function AlbumPage() { 16 19 return ( ··· 30 33 queryFn: () => getAlbumById({ data: { id: albumId } }), 31 34 }); 32 35 36 + const rgId = album.musicbrainz?.releaseGroupId; 37 + const cover = rgId ? musicbrainzCover(rgId) : mockCover; 38 + 33 39 return ( 34 40 <div className="grid grid-cols-1 lg:grid-cols-[1fr_4fr] max-w-6xl w-full gap-x-8 px-8 py-12 mx-auto"> 35 41 {/* Left section*/} 36 42 <div className="relative"> 37 43 <div className="flex flex-col gap-5 sticky top-12"> 38 - <img 44 + <Image 39 45 src={cover} 40 46 width={900} 41 47 height={900} 48 + loading="eager" 42 49 className="max-w-[400px] max-h-[400px] aspect-square min-w-[400px] min-h-[400px] rounded-2xl transform rotate-1 hover:rotate-0 transition-transform duration-500 object-cover" 43 50 /> 44 51 45 52 <div className="space-y-3"> 46 53 <h1 className="text-4xl lg:text-5xl font-bold text-balance leading-tight">{album.title}</h1> 47 54 <h2 className="text-xl font-medium text-primary"> 48 - {album.artists.map((artist, idx) => ( 55 + {album.artists?.map((artist, idx) => ( 49 56 <Fragment key={artist.id}> 50 57 {/* @ts-ignore */} 51 58 <a href={`#`}>