mirror of https://github.com/gabehf/Koito.git
Compare commits
5 Commits
fed2c5b956
...
1bceeeb2f6
| Author | SHA1 | Date |
|---|---|---|
 Gabe Farrell
|
1bceeeb2f6 | 2 weeks ago |
|
Gabe Farrell
|
fda416fe75 | 2 weeks ago |
|
Gabe Farrell
|
383be25bfc | 2 weeks ago |
|
Gabe Farrell
|
63d953b192 | 2 weeks ago |
|
Gabe Farrell
|
fdaea6284e | 2 weeks ago |
@ -1,45 +1,56 @@
|
|||||||
import { useQuery } from "@tanstack/react-query"
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { getStats } from "api/api"
|
import { getStats, type Stats, type ApiError } 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]),
|
||||||
|
});
|
||||||
|
|
||||||
const { isPending, isError, data, error } = useQuery({
|
if (isPending) {
|
||||||
queryKey: ['stats', 'all_time'],
|
|
||||||
queryFn: ({ queryKey }) => getStats(queryKey[1]),
|
|
||||||
})
|
|
||||||
|
|
||||||
if (isPending) {
|
|
||||||
return (
|
|
||||||
<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 className="w-[200px]">
|
||||||
|
<h2>All Time Stats</h2>
|
||||||
|
<p>Loading...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else if (isError) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
<div>
|
<div>
|
||||||
<h2>All Time Stats</h2>
|
<h2>All Time Stats</h2>
|
||||||
<div>
|
<p className="error">Error: {error.message}</p>
|
||||||
<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,102 +1,108 @@
|
|||||||
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, g = 0, b = 0;
|
let r = 0,
|
||||||
hex = hex.replace('#', '');
|
g = 0,
|
||||||
|
b = 0;
|
||||||
if (hex.length === 3) {
|
hex = hex.replace("#", "");
|
||||||
r = parseInt(hex[0] + hex[0], 16);
|
|
||||||
g = parseInt(hex[1] + hex[1], 16);
|
if (hex.length === 3) {
|
||||||
b = parseInt(hex[2] + hex[2], 16);
|
r = parseInt(hex[0] + hex[0], 16);
|
||||||
} else if (hex.length === 6) {
|
g = parseInt(hex[1] + hex[1], 16);
|
||||||
r = parseInt(hex.substring(0, 2), 16);
|
b = parseInt(hex[2] + hex[2], 16);
|
||||||
g = parseInt(hex.substring(2, 4), 16);
|
} else if (hex.length === 6) {
|
||||||
b = parseInt(hex.substring(4, 6), 16);
|
r = parseInt(hex.substring(0, 2), 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), min = Math.min(r, g, b);
|
const max = Math.max(r, g, b),
|
||||||
let h = 0, s = 0, l = (max + min) / 2;
|
min = Math.min(r, g, b);
|
||||||
|
let h = 0,
|
||||||
if (max !== min) {
|
s = 0,
|
||||||
const d = max - min;
|
l = (max + min) / 2;
|
||||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
||||||
switch (max) {
|
if (max !== min) {
|
||||||
case r: h = ((g - b) / d + (g < b ? 6 : 0)); break;
|
const d = max - min;
|
||||||
case g: h = ((b - r) / d + 2); break;
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||||
case b: h = ((r - g) / d + 4); break;
|
switch (max) {
|
||||||
}
|
case r:
|
||||||
h /= 6;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
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 "";
|
||||||
|
|
||||||
if (seconds > (120 * 60) - 1) {
|
let minutes = Math.floor(seconds / 60);
|
||||||
let hours = Math.floor(seconds / 60 / 60)
|
return `${minutes} minutes listened`;
|
||||||
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