gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-07 21:48:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: use minutes instead of hours for time listened

Browse source
This commit is contained in:
Gabe Farrell 2025-11-24 23:43:58 -05:00
parent 63d953b192
commit 383be25bfc
4 changed files with 263 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

112
client/app/routes/MediaItems/Track.tsx
View file

@ -8,55 +8,73 @@ import ActivityGrid from "~/components/ActivityGrid";
import { timeListenedString } from "~/utils/utils";
export async function clientLoader({ params }: LoaderFunctionArgs) {
let res = await fetch(`/apis/web/v1/track?id=${params.id}`);
if (!res.ok) {
throw new Response("Failed to load track", { status: res.status });
}
const track: Track = await res.json();
res = await fetch(`/apis/web/v1/album?id=${track.album_id}`)
if (!res.ok) {
throw new Response("Failed to load album for track", { status: res.status })
}
const album: Album = await res.json()
return {track: track, album: album};
let res = await fetch(`/apis/web/v1/track?id=${params.id}`);
if (!res.ok) {
throw new Response("Failed to load track", { status: res.status });
}
const track: Track = await res.json();
res = await fetch(`/apis/web/v1/album?id=${track.album_id}`);
if (!res.ok) {
throw new Response("Failed to load album for track", {
status: res.status,
});
}
const album: Album = await res.json();
return { track: track, album: album };
}
export default function Track() {
const { track, album } = useLoaderData();
const [period, setPeriod] = useState('week')
const { track, album } = useLoaderData();
const [period, setPeriod] = useState("week");
return (
<MediaLayout type="Track"
title={track.title}
img={track.image}
id={track.id}
musicbrainzId={album.musicbrainz_id}
imgItemId={track.album_id}
mergeFunc={mergeTracks}
mergeCleanerFunc={(r, id) => {
r.albums = []
r.artists = []
for (let i = 0; i < r.tracks.length; i ++) {
if (r.tracks[i].id === id) {
delete r.tracks[i]
}
}
return r
}}
subContent={<div className="flex flex-col gap-2 items-start">
<Link to={`/album/${track.album_id}`}>appears on {album.title}</Link>
{track.listen_count && <p>{track.listen_count} play{ track.listen_count > 1 ? 's' : ''}</p>}
{<p title={Math.floor(track.time_listened / 60) + " minutes"}>{timeListenedString(track.time_listened)}</p>}
{<p title={new Date(track.first_listen * 1000).toLocaleString()}>Listening since {new Date(track.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={20} trackId={track.id}/>
<ActivityGrid trackId={track.id} configurable />
</div>
</MediaLayout>
)
return (
<MediaLayout
type="Track"
title={track.title}
img={track.image}
id={track.id}
musicbrainzId={album.musicbrainz_id}
imgItemId={track.album_id}
mergeFunc={mergeTracks}
mergeCleanerFunc={(r, id) => {
r.albums = [];
r.artists = [];
for (let i = 0; i < r.tracks.length; i++) {
if (r.tracks[i].id === id) {
delete r.tracks[i];
}
}
return r;
}}
subContent={
<div className="flex flex-col gap-2 items-start">
<Link to={`/album/${track.album_id}`}>appears on {album.title}</Link>
{track.listen_count && (
<p>
{track.listen_count} play{track.listen_count > 1 ? "s" : ""}
</p>
)}
{
<p title={Math.floor(track.time_listened / 60 / 60) + " hours"}>
{timeListenedString(track.time_listened)}
</p>
}
{
<p title={new Date(track.first_listen * 1000).toLocaleString()}>
Listening since{" "}
{new Date(track.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={20} trackId={track.id} />
<ActivityGrid trackId={track.id} configurable />
</div>
</MediaLayout>
);
}