mirror of https://github.com/gabehf/Koito.git
Compare commits
No commits in common. '1bceeeb2f615ebc52066121a5f5234096bd0c06b' and 'fed2c5b95684964481539216fa7aa2ed8f830dba' have entirely different histories.
1bceeeb2f6
...
fed2c5b956
@ -1,56 +1,45 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query"
|
||||||
import { getStats, type Stats, type ApiError } from "api/api";
|
import { getStats } from "api/api"
|
||||||
|
|
||||||
export default function AllTimeStats() {
|
export default function AllTimeStats() {
|
||||||
const { isPending, isError, data, error } = useQuery({
|
|
||||||
queryKey: ["stats", "all_time"],
|
|
||||||
queryFn: ({ queryKey }) => getStats(queryKey[1]),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (isPending) {
|
const { isPending, isError, data, error } = useQuery({
|
||||||
return (
|
queryKey: ['stats', 'all_time'],
|
||||||
<div className="w-[200px]">
|
queryFn: ({ queryKey }) => getStats(queryKey[1]),
|
||||||
<h2>All Time Stats</h2>
|
})
|
||||||
<p>Loading...</p>
|
|
||||||
</div>
|
if (isPending) {
|
||||||
);
|
return (
|
||||||
} else if (isError) {
|
<div className="w-[200px]">
|
||||||
|
<h2>All Time Stats</h2>
|
||||||
|
<p>Loading...</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (isError) {
|
||||||
|
return <p className="error">Error:{error.message}</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
const numberClasses = 'header-font font-bold text-xl'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<div>
|
<div>
|
||||||
<h2>All Time Stats</h2>
|
<h2>All Time Stats</h2>
|
||||||
<p className="error">Error: {error.message}</p>
|
<div>
|
||||||
|
<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
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className={numberClasses}>{data.artist_count}</span> Artists
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className={numberClasses}>{data.album_count}</span> Albums
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className={numberClasses}>{data.track_count}</span> Tracks
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
)
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const numberClasses = "header-font font-bold text-xl";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>All Time Stats</h2>
|
|
||||||
<div>
|
|
||||||
<span
|
|
||||||
className={numberClasses}
|
|
||||||
title={Math.floor(data.minutes_listened / 60) + " hours"}
|
|
||||||
>
|
|
||||||
{data.minutes_listened}
|
|
||||||
</span>{" "}
|
|
||||||
Minutes Listened
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className={numberClasses}>{data.listen_count}</span> Plays
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className={numberClasses}>{data.track_count}</span> Tracks
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className={numberClasses}>{data.album_count}</span> Albums
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className={numberClasses}>{data.artist_count}</span> Artists
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
@ -1,108 +1,102 @@
|
|||||||
import Timeframe from "~/types/timeframe";
|
import Timeframe from "~/types/timeframe"
|
||||||
|
|
||||||
const timeframeToInterval = (timeframe: Timeframe): string => {
|
const timeframeToInterval = (timeframe: Timeframe): string => {
|
||||||
switch (timeframe) {
|
switch (timeframe) {
|
||||||
case Timeframe.Day:
|
case Timeframe.Day:
|
||||||
return "1 day";
|
return "1 day"
|
||||||
case Timeframe.Week:
|
case Timeframe.Week:
|
||||||
return "1 week";
|
return "1 week"
|
||||||
case Timeframe.Month:
|
case Timeframe.Month:
|
||||||
return "1 month";
|
return "1 month"
|
||||||
case Timeframe.Year:
|
case Timeframe.Year:
|
||||||
return "1 year";
|
return "1 year"
|
||||||
case Timeframe.AllTime:
|
case Timeframe.AllTime:
|
||||||
return "99 years";
|
return "99 years"
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
function timeSince(date: Date) {
|
function timeSince(date: Date) {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
||||||
|
|
||||||
const intervals = [
|
const intervals = [
|
||||||
{ label: "year", seconds: 31536000 },
|
{ label: 'year', seconds: 31536000 },
|
||||||
{ label: "month", seconds: 2592000 },
|
{ label: 'month', seconds: 2592000 },
|
||||||
{ label: "week", seconds: 604800 },
|
{ label: 'week', seconds: 604800 },
|
||||||
{ label: "day", seconds: 86400 },
|
{ label: 'day', seconds: 86400 },
|
||||||
{ label: "hour", seconds: 3600 },
|
{ label: 'hour', seconds: 3600 },
|
||||||
{ label: "minute", seconds: 60 },
|
{ label: 'minute', seconds: 60 },
|
||||||
{ label: "second", seconds: 1 },
|
{ label: 'second', seconds: 1 },
|
||||||
];
|
];
|
||||||
|
|
||||||
for (const interval of intervals) {
|
for (const interval of intervals) {
|
||||||
const count = Math.floor(seconds / interval.seconds);
|
const count = Math.floor(seconds / interval.seconds);
|
||||||
if (count >= 1) {
|
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 = {
|
type hsl = {
|
||||||
h: number;
|
h: number,
|
||||||
s: number;
|
s: number,
|
||||||
l: number;
|
l: number,
|
||||||
};
|
}
|
||||||
|
|
||||||
const hexToHSL = (hex: string): hsl => {
|
const hexToHSL = (hex: string): hsl => {
|
||||||
let r = 0,
|
let r = 0, g = 0, b = 0;
|
||||||
g = 0,
|
hex = hex.replace('#', '');
|
||||||
b = 0;
|
|
||||||
hex = hex.replace("#", "");
|
if (hex.length === 3) {
|
||||||
|
r = parseInt(hex[0] + hex[0], 16);
|
||||||
if (hex.length === 3) {
|
g = parseInt(hex[1] + hex[1], 16);
|
||||||
r = parseInt(hex[0] + hex[0], 16);
|
b = parseInt(hex[2] + hex[2], 16);
|
||||||
g = parseInt(hex[1] + hex[1], 16);
|
} else if (hex.length === 6) {
|
||||||
b = parseInt(hex[2] + hex[2], 16);
|
r = parseInt(hex.substring(0, 2), 16);
|
||||||
} else if (hex.length === 6) {
|
g = parseInt(hex.substring(2, 4), 16);
|
||||||
r = parseInt(hex.substring(0, 2), 16);
|
b = parseInt(hex.substring(4, 6), 16);
|
||||||
g = parseInt(hex.substring(2, 4), 16);
|
}
|
||||||
b = parseInt(hex.substring(4, 6), 16);
|
|
||||||
}
|
|
||||||
|
|
||||||
r /= 255;
|
r /= 255;
|
||||||
g /= 255;
|
g /= 255;
|
||||||
b /= 255;
|
b /= 255;
|
||||||
|
|
||||||
const max = Math.max(r, g, b),
|
const max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||||
min = Math.min(r, g, b);
|
let h = 0, s = 0, l = (max + min) / 2;
|
||||||
let h = 0,
|
|
||||||
s = 0,
|
if (max !== min) {
|
||||||
l = (max + min) / 2;
|
const d = max - min;
|
||||||
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||||
if (max !== min) {
|
switch (max) {
|
||||||
const d = max - min;
|
case r: h = ((g - b) / d + (g < b ? 6 : 0)); break;
|
||||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
case g: h = ((b - r) / d + 2); break;
|
||||||
switch (max) {
|
case b: h = ((r - g) / d + 4); break;
|
||||||
case r:
|
}
|
||||||
h = (g - b) / d + (g < b ? 6 : 0);
|
h /= 6;
|
||||||
break;
|
|
||||||
case g:
|
|
||||||
h = (b - r) / d + 2;
|
|
||||||
break;
|
|
||||||
case b:
|
|
||||||
h = (r - g) / d + 4;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
h /= 6;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
h: Math.round(h * 360),
|
h: Math.round(h * 360),
|
||||||
s: Math.round(s * 100),
|
s: Math.round(s * 100),
|
||||||
l: Math.round(l * 100),
|
l: Math.round(l * 100)
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const timeListenedString = (seconds: number) => {
|
const timeListenedString = (seconds: number) => {
|
||||||
if (!seconds) return "";
|
if (!seconds) return ""
|
||||||
|
|
||||||
let minutes = Math.floor(seconds / 60);
|
if (seconds > (120 * 60) - 1) {
|
||||||
return `${minutes} minutes listened`;
|
let hours = Math.floor(seconds / 60 / 60)
|
||||||
};
|
return `${hours} hours listened`
|
||||||
|
} else {
|
||||||
|
let minutes = Math.floor(seconds / 60)
|
||||||
|
return `${minutes} minutes listened`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export { hexToHSL, timeListenedString };
|
export {hexToHSL, timeListenedString}
|
||||||
export type { hsl };
|
export type {hsl}
|
||||||
Loading…
Reference in new issue