gabehf
/
Koito
mirror of https://github.com/gabehf/Koito.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: use minutes instead of hours for time listened

Browse Source
main
Gabe Farrell 2 weeks ago
parent 63d953b192
commit 383be25bfc
4 changed files with 256 additions and 200 deletions
Show Stats Download Patch File Download Diff File

40
client/app/routes/MediaItems/Album.tsx
Unescape View File

@ -19,12 +19,13 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
export default function Album() {
const album = useLoaderData() as Album;
const [period, setPeriod] = useState('week')
const [period, setPeriod] = useState("week");
console.log(album)
console.log(album);
return (
<MediaLayout type="Album"
<MediaLayout
type="Album"
title={album.title}
img={album.image}
id={album.id}
@ -32,20 +33,35 @@ export default function Album() {
imgItemId={album.id}
mergeFunc={mergeAlbums}
mergeCleanerFunc={(r, id) => {
r.artists = []
r.tracks = []
r.artists = [];
r.tracks = [];
for (let i = 0; i < r.albums.length; i++) {
if (r.albums[i].id === id) {
delete r.albums[i]
delete r.albums[i];
}
}
return r
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) + " minutes"}>{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>}
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} />

40
client/app/routes/MediaItems/Artist.tsx
Unescape View File

@ -20,17 +20,18 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
export default function Artist() {
const artist = useLoaderData() as Artist;
const [period, setPeriod] = useState('week')
const [period, setPeriod] = useState("week");
// remove canonical name from alias list
console.log(artist.aliases)
console.log(artist.aliases);
let index = artist.aliases.indexOf(artist.name);
if (index !== -1) {
artist.aliases.splice(index, 1);
}
return (
<MediaLayout type="Artist"
<MediaLayout
type="Artist"
title={artist.name}
img={artist.image}
id={artist.id}
@ -38,20 +39,35 @@ export default function Artist() {
imgItemId={artist.id}
mergeFunc={mergeArtists}
mergeCleanerFunc={(r, id) => {
r.albums = []
r.tracks = []
r.albums = [];
r.tracks = [];
for (let i = 0; i < r.artists.length; i++) {
if (r.artists[i].id === id) {
delete r.artists[i]
delete r.artists[i];
}
}
return r
return r;
}}
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 title={Math.floor(artist.time_listened / 60) + " minutes"}>{timeListenedString(artist.time_listened)}</p>}
{<p title={new Date(artist.first_listen * 1000).toLocaleString()}>Listening since {new Date(artist.first_listen * 1000).toLocaleDateString()}</p>}
</div>}
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 title={Math.floor(artist.time_listened / 60 / 60) + " hours"}>
{timeListenedString(artist.time_listened)}
</p>
}
{
<p title={new Date(artist.first_listen * 1000).toLocaleString()}>
Listening since{" "}
{new Date(artist.first_listen * 1000).toLocaleDateString()}
</p>
}
</div>
}
>
<div className="mt-10">
<PeriodSelector setter={setPeriod} current={period} />

48
client/app/routes/MediaItems/Track.tsx
Unescape View File

@ -13,20 +13,23 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
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}`)
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 })
throw new Response("Failed to load album for track", {
status: res.status,
});
}
const album: Album = await res.json()
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 [period, setPeriod] = useState("week");
return (
<MediaLayout type="Track"
<MediaLayout
type="Track"
title={track.title}
img={track.image}
id={track.id}
@ -34,21 +37,36 @@ export default function Track() {
imgItemId={track.album_id}
mergeFunc={mergeTracks}
mergeCleanerFunc={(r, id) => {
r.albums = []
r.artists = []
r.albums = [];
r.artists = [];
for (let i = 0; i < r.tracks.length; i++) {
if (r.tracks[i].id === id) {
delete r.tracks[i]
delete r.tracks[i];
}
}
return r
return r;
}}
subContent={<div className="flex flex-col gap-2 items-start">
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>}
{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} />
@ -58,5 +76,5 @@ export default function Track() {
<ActivityGrid trackId={track.id} configurable />
</div>
</MediaLayout>
)
);
}

88
client/app/utils/utils.ts
Unescape View File

@ -1,55 +1,57 @@
import Timeframe from "~/types/timeframe"
import Timeframe from "~/types/timeframe";
const timeframeToInterval = (timeframe: Timeframe): string => {
switch (timeframe) {
case Timeframe.Day:
return "1 day"
return "1 day";
case Timeframe.Week:
return "1 week"
return "1 week";
case Timeframe.Month:
return "1 month"
return "1 month";
case Timeframe.Year:
return "1 year"
return "1 year";
case Timeframe.AllTime:
return "99 years"
}
return "99 years";
}
};
function timeSince(date: Date) {
const now = new Date();
const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
const intervals = [
{ label: 'year', seconds: 31536000 },
{ label: 'month', seconds: 2592000 },
{ label: 'week', seconds: 604800 },
{ label: 'day', seconds: 86400 },
{ label: 'hour', seconds: 3600 },
{ label: 'minute', seconds: 60 },
{ label: 'second', seconds: 1 },
{ label: "year", seconds: 31536000 },
{ label: "month", seconds: 2592000 },
{ label: "week", seconds: 604800 },
{ label: "day", seconds: 86400 },
{ label: "hour", seconds: 3600 },
{ label: "minute", seconds: 60 },
{ label: "second", seconds: 1 },
];
for (const interval of intervals) {
const count = Math.floor(seconds / interval.seconds);
if (count >= 1) {
return `${count} ${interval.label}${count !== 1 ? 's' : ''} ago`;
return `${count} ${interval.label}${count !== 1 ? "s" : ""} ago`;
}
}
return 'just now';
return "just now";
}
export { timeSince }
export { timeSince };
type hsl = {
h: number,
s: number,
l: number,
}
h: number;
s: number;
l: number;
};
const hexToHSL = (hex: string): hsl => {
let r = 0, g = 0, b = 0;
hex = hex.replace('#', '');
let r = 0,
g = 0,
b = 0;
hex = hex.replace("#", "");
if (hex.length === 3) {
r = parseInt(hex[0] + hex[0], 16);
@ -65,16 +67,25 @@ const hexToHSL = (hex: string): hsl => {
g /= 255;
b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h = 0, s = 0, l = (max + min) / 2;
const max = Math.max(r, g, b),
min = Math.min(r, g, b);
let h = 0,
s = 0,
l = (max + min) / 2;
if (max !== min) {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)); break;
case g: h = ((b - r) / d + 2); break;
case b: h = ((r - g) / d + 4); break;
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
@ -82,21 +93,16 @@ const hexToHSL = (hex: string): hsl => {
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
l: Math.round(l * 100),
};
};
const timeListenedString = (seconds: number) => {
if (!seconds) return ""
if (seconds > (120 * 60) - 1) {
let hours = Math.floor(seconds / 60 / 60)
return `${hours} hours listened`
} else {
let minutes = Math.floor(seconds / 60)
return `${minutes} minutes listened`
}
}
if (!seconds) return "";
let minutes = Math.floor(seconds / 60);
return `${minutes} minutes listened`;
};
export {hexToHSL, timeListenedString}
export type {hsl}
export { hexToHSL, timeListenedString };
export type { hsl };

Write Preview
Loading…
Cancel
Save