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.
77 lines
2.3 KiB
77 lines
2.3 KiB
import { useState } from "react";
|
|
import { useLoaderData, type LoaderFunctionArgs } from "react-router";
|
|
import TopTracks from "~/components/TopTracks";
|
|
import { mergeAlbums, type Album } from "api/api";
|
|
import LastPlays from "~/components/LastPlays";
|
|
import PeriodSelector from "~/components/PeriodSelector";
|
|
import MediaLayout from "./MediaLayout";
|
|
import ActivityGrid from "~/components/ActivityGrid";
|
|
import { timeListenedString } from "~/utils/utils";
|
|
|
|
export async function clientLoader({ params }: LoaderFunctionArgs) {
|
|
const res = await fetch(`/apis/web/v1/album?id=${params.id}`);
|
|
if (!res.ok) {
|
|
throw new Response("Failed to load album", { status: 500 });
|
|
}
|
|
const album: Album = await res.json();
|
|
return album;
|
|
}
|
|
|
|
export default function Album() {
|
|
const album = useLoaderData() as Album;
|
|
const [period, setPeriod] = useState("week");
|
|
|
|
console.log(album);
|
|
|
|
return (
|
|
<MediaLayout
|
|
type="Album"
|
|
title={album.title}
|
|
img={album.image}
|
|
id={album.id}
|
|
musicbrainzId={album.musicbrainz_id}
|
|
imgItemId={album.id}
|
|
mergeFunc={mergeAlbums}
|
|
mergeCleanerFunc={(r, id) => {
|
|
r.artists = [];
|
|
r.tracks = [];
|
|
for (let i = 0; i < r.albums.length; i++) {
|
|
if (r.albums[i].id === id) {
|
|
delete r.albums[i];
|
|
}
|
|
}
|
|
return r;
|
|
}}
|
|
subContent={
|
|
<div className="flex flex-col gap-2 items-start">
|
|
{album.listen_count && (
|
|
<p>
|
|
{album.listen_count} play{album.listen_count > 1 ? "s" : ""}
|
|
</p>
|
|
)}
|
|
{
|
|
<p title={Math.floor(album.time_listened / 60 / 60) + " hours"}>
|
|
{timeListenedString(album.time_listened)}
|
|
</p>
|
|
}
|
|
{
|
|
<p title={new Date(album.first_listen * 1000).toLocaleString()}>
|
|
Listening since{" "}
|
|
{new Date(album.first_listen * 1000).toLocaleDateString()}
|
|
</p>
|
|
}
|
|
</div>
|
|
}
|
|
>
|
|
<div className="mt-10">
|
|
<PeriodSelector setter={setPeriod} current={period} />
|
|
</div>
|
|
<div className="flex flex-wrap gap-20 mt-10">
|
|
<LastPlays limit={30} albumId={album.id} />
|
|
<TopTracks limit={12} period={period} albumId={album.id} />
|
|
<ActivityGrid configurable albumId={album.id} />
|
|
</div>
|
|
</MediaLayout>
|
|
);
|
|
}
|