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 rewind page

Browse source
This commit is contained in:
Gabe Farrell 2026-01-16 00:56:55 -05:00
parent 46e216ebf5
commit 6e7e7a87cc
3 changed files with 16 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/api/api.ts
View file

@ -462,9 +462,9 @@ type NowPlaying = {
};
type RewindStats = {
title: string;
top_artists: Artist[];
top_albums: Album[];
top_tracks: Track[];
top_artists: Ranked<Artist>[];
top_albums: Ranked<Album>[];
top_tracks: Ranked<Track>[];
minutes_listened: number;
avg_minutes_listened_per_day: number;
plays: number;

6
client/app/components/rewind/Rewind.tsx
View file

@ -8,9 +8,9 @@ interface Props {
}
export default function Rewind(props: Props) {
const artistimg = props.stats.top_artists[0]?.image;
const albumimg = props.stats.top_albums[0]?.image;
const trackimg = props.stats.top_tracks[0]?.image;
const artistimg = props.stats.top_artists[0]?.item.image;
const albumimg = props.stats.top_albums[0]?.item.image;
const trackimg = props.stats.top_tracks[0]?.item.image;
if (
!props.stats.top_artists[0] ||
!props.stats.top_albums[0] ||

18
client/app/components/rewind/RewindTopItem.tsx
View file

@ -1,7 +1,9 @@
import type { Ranked } from "api/api";
type TopItemProps<T> = {
title: string;
imageSrc: string;
items: T[];
items: Ranked<T>[];
getLabel: (item: T) => string;
includeTime?: boolean;
};
@ -28,23 +30,23 @@ export function RewindTopItem<
<div className="flex items-center gap-2">
<div className="flex flex-col items-start mb-2">
<h2>{getLabel(top)}</h2>
<h2>{getLabel(top.item)}</h2>
<span className="text-(--color-fg-tertiary) -mt-3 text-sm">
{`${top.listen_count} plays`}
{`${top.item.listen_count} plays`}
{includeTime
? ` (${Math.floor(top.time_listened / 60)} minutes)`
? ` (${Math.floor(top.item.time_listened / 60)} minutes)`
: ``}
</span>
</div>
</div>
{rest.map((e) => (
<div key={e.id} className="text-sm">
{getLabel(e)}
<div key={e.item.id} className="text-sm">
{getLabel(e.item)}
<span className="text-(--color-fg-tertiary)">
{` - ${e.listen_count} plays`}
{` - ${e.item.listen_count} plays`}
{includeTime
? ` (${Math.floor(e.time_listened / 60)} minutes)`
? ` (${Math.floor(e.item.time_listened / 60)} minutes)`
: ``}
</span>
</div>