gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-04-22 20:11:50 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add minutes listened to ui and fix image drop

Browse source
This commit is contained in:
Gabe Farrell 2025-07-06 21:27:54 -04:00
parent 0042e3f3bd
commit d84519fa21
11 changed files with 39 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/api/api.ts
View file

@ -288,7 +288,7 @@ type Stats = {
track_count: number
album_count: number
artist_count: number
hours_listened: number
minutes_listened: number
}
type SearchResponse = {
albums: Album[]

2
client/app/components/AllTimeStats.tsx
View file

@ -26,7 +26,7 @@ export default function AllTimeStats() {
<div>
<h2>All Time Stats</h2>
<div>
<span className={numberClasses}>{data.hours_listened}</span> Hours Listened
<span className={numberClasses} title={data.minutes_listened + " minutes"}>{Math.floor(data.minutes_listened / 60)}</span> Hours Listened
</div>
<div>
<span className={numberClasses}>{data.listen_count}</span> Plays

9
client/app/components/ImageDropHandler.tsx
View file

@ -3,11 +3,10 @@ import { useEffect } from 'react';
interface Props {
itemType: string,
id: number,
onComplete: Function
}
export default function ImageDropHandler({ itemType, id, onComplete }: Props) {
export default function ImageDropHandler({ itemType, onComplete }: Props) {
useEffect(() => {
const handleDragOver = (e: DragEvent) => {
console.log('dragover!!')
@ -25,7 +24,11 @@ export default function ImageDropHandler({ itemType, id, onComplete }: Props) {
const formData = new FormData();
formData.append('image', imageFile);
formData.append(itemType.toLowerCase()+'_id', String(id))
const pathname = window.location.pathname;
const segments = pathname.split('/');
const filteredSegments = segments.filter(segment => segment !== '');
const lastSegment = filteredSegments[filteredSegments.length - 1];
formData.append(itemType.toLowerCase()+'_id', lastSegment)
replaceImage(formData).then((r) => {
if (r.status >= 200 && r.status < 300) {
onComplete()

2
client/app/routes/MediaItems/Album.tsx
View file

@ -43,7 +43,7 @@ export default function Album() {
}}
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>{timeListenedString(album.time_listened)}</p>}
{<p title={Math.floor(album.time_listened / 60) + " minutes"}>{timeListenedString(album.time_listened)}</p>}
</div>}
>
<div className="mt-10">

2
client/app/routes/MediaItems/Artist.tsx
View file

@ -49,7 +49,7 @@ export default function Artist() {
}}
subContent={<div className="flex flex-col gap-2 items-start">
{artist.listen_count && <p>{artist.listen_count} play{ artist.listen_count > 1 ? 's' : ''}</p>}
{<p>{timeListenedString(artist.time_listened)}</p>}
{<p title={Math.floor(artist.time_listened / 60) + " minutes"}>{timeListenedString(artist.time_listened)}</p>}
</div>}
>
<div className="mt-10">

2
client/app/routes/MediaItems/MediaLayout.tsx
View file

@ -61,7 +61,7 @@ export default function MediaLayout(props: Props) {
transition: '1000',
}}
>
<ImageDropHandler itemType={props.type.toLowerCase() === 'artist' ? 'artist' : 'album'} id={props.imgItemId} onComplete={replaceImageCallback} />
<ImageDropHandler itemType={props.type.toLowerCase() === 'artist' ? 'artist' : 'album'} onComplete={replaceImageCallback} />
<title>{title}</title>
<meta property="og:title" content={title} />
<meta

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

@ -46,7 +46,7 @@ export default function Track() {
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>{timeListenedString(track.time_listened)}</p>}
{<p title={Math.floor(track.time_listened / 60) + " minutes"}>{timeListenedString(track.time_listened)}</p>}
</div>}
>
<div className="mt-10">