WIP. A little custom music server
fix: album id page
+17
-5
+1
-1
backend/ISSUES.md
+1
-1
backend/ISSUES.md
+6
-1
web/src/data/get-album-by-id.ts
+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
+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={`#`}>