mirror of https://github.com/gabehf/Koito.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.3 KiB
67 lines
2.3 KiB
import { useState } from "react";
|
|
import { useLoaderData, type LoaderFunctionArgs } from "react-router";
|
|
import TopTracks from "~/components/TopTracks";
|
|
import { mergeArtists, type Artist } from "api/api";
|
|
import LastPlays from "~/components/LastPlays";
|
|
import PeriodSelector from "~/components/PeriodSelector";
|
|
import MediaLayout from "./MediaLayout";
|
|
import ArtistAlbums from "~/components/ArtistAlbums";
|
|
import ActivityGrid from "~/components/ActivityGrid";
|
|
|
|
export async function clientLoader({ params }: LoaderFunctionArgs) {
|
|
const res = await fetch(`/apis/web/v1/artist?id=${params.id}`);
|
|
if (!res.ok) {
|
|
throw new Response("Failed to load artist", { status: 500 });
|
|
}
|
|
const artist: Artist = await res.json();
|
|
return artist;
|
|
}
|
|
|
|
export default function Artist() {
|
|
const artist = useLoaderData() as Artist;
|
|
const [period, setPeriod] = useState('week')
|
|
|
|
// remove canonical name from alias list
|
|
console.log(artist.aliases)
|
|
let index = artist.aliases.indexOf(artist.name);
|
|
if (index !== -1) {
|
|
artist.aliases.splice(index, 1);
|
|
}
|
|
|
|
return (
|
|
<MediaLayout type="Artist"
|
|
title={artist.name}
|
|
img={artist.image}
|
|
id={artist.id}
|
|
musicbrainzId={artist.musicbrainz_id}
|
|
imgItemId={artist.id}
|
|
mergeFunc={mergeArtists}
|
|
mergeCleanerFunc={(r, id) => {
|
|
r.albums = []
|
|
r.tracks = []
|
|
for (let i = 0; i < r.artists.length; i ++) {
|
|
if (r.artists[i].id === id) {
|
|
delete r.artists[i]
|
|
}
|
|
}
|
|
return r
|
|
}}
|
|
subContent={<>
|
|
{artist.listen_count && <p>{artist.listen_count} play{ artist.listen_count > 1 ? 's' : ''}</p>}
|
|
</>}
|
|
>
|
|
<div className="mt-10">
|
|
<PeriodSelector setter={setPeriod} current={period} />
|
|
</div>
|
|
<div className="flex flex-col gap-20">
|
|
<div className="flex gap-15 mt-10 flex-wrap">
|
|
<LastPlays limit={20} artistId={artist.id} />
|
|
<TopTracks limit={8} period={period} artistId={artist.id} />
|
|
<ActivityGrid configurable autoAdjust artistId={artist.id} />
|
|
</div>
|
|
<ArtistAlbums period={period} artistId={artist.id} name={artist.name} />
|
|
</div>
|
|
</MediaLayout>
|
|
);
|
|
}
|