mirror of
https://github.com/gabehf/Koito.git
synced 2026-03-07 13:38:15 -08:00
feat: Rewind (#116)
* wip * chore: update counts to allow unix timeframe * feat: add db functions for counting new items * wip: endpoint working * wip * wip: initial ui done * add header, adjust ui * add time listened toggle * fix layout, year param * param fixes
This commit is contained in:
Gabe Farrell
GitHub
parent
c0a8c64243
commit
d4ac96f780
64 changed files with 2252 additions and 1055 deletions
|
|
@ -15,6 +15,14 @@ interface getActivityArgs {
|
|||
album_id: number;
|
||||
track_id: number;
|
||||
}
|
||||
interface timeframe {
|
||||
week?: number;
|
||||
month?: number;
|
||||
year?: number;
|
||||
from?: number;
|
||||
to?: number;
|
||||
period?: string;
|
||||
}
|
||||
|
||||
async function handleJson<T>(r: Response): Promise<T> {
|
||||
if (!r.ok) {
|
||||
|
|
@ -281,6 +289,13 @@ function getNowPlaying(): Promise<NowPlaying> {
|
|||
return fetch("/apis/web/v1/now-playing").then((r) => r.json());
|
||||
}
|
||||
|
||||
async function getRewindStats(args: timeframe): Promise<RewindStats> {
|
||||
const r = await fetch(
|
||||
`/apis/web/v1/summary?week=${args.week}&month=${args.month}&year=${args.year}&from=${args.from}&to=${args.to}`
|
||||
);
|
||||
return handleJson<RewindStats>(r);
|
||||
}
|
||||
|
||||
export {
|
||||
getLastListens,
|
||||
getTopTracks,
|
||||
|
|
@ -312,6 +327,7 @@ export {
|
|||
getExport,
|
||||
submitListen,
|
||||
getNowPlaying,
|
||||
getRewindStats,
|
||||
};
|
||||
type Track = {
|
||||
id: number;
|
||||
|
|
@ -404,6 +420,22 @@ type NowPlaying = {
|
|||
currently_playing: boolean;
|
||||
track: Track;
|
||||
};
|
||||
type RewindStats = {
|
||||
title: string;
|
||||
top_artists: Artist[];
|
||||
top_albums: Album[];
|
||||
top_tracks: Track[];
|
||||
minutes_listened: number;
|
||||
avg_minutes_listened_per_day: number;
|
||||
plays: number;
|
||||
avg_plays_per_day: number;
|
||||
unique_tracks: number;
|
||||
unique_albums: number;
|
||||
unique_artists: number;
|
||||
new_tracks: number;
|
||||
new_albums: number;
|
||||
new_artists: number;
|
||||
};
|
||||
|
||||
export type {
|
||||
getItemsArgs,
|
||||
|
|
@ -422,4 +454,5 @@ export type {
|
|||
Config,
|
||||
NowPlaying,
|
||||
Stats,
|
||||
RewindStats,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,59 +1,56 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=League+Spartan:wght@100..900&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=League+Spartan:wght@100..900&display=swap");
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-sans: "Jost", "Inter", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--animate-fade-in-scale: fade-in-scale 0.1s ease forwards;
|
||||
--animate-fade-out-scale: fade-out-scale 0.1s ease forwards;
|
||||
|
||||
@keyframes fade-in-scale {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
--animate-fade-in-scale: fade-in-scale 0.1s ease forwards;
|
||||
--animate-fade-out-scale: fade-out-scale 0.1s ease forwards;
|
||||
|
||||
@keyframes fade-in-scale {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
@keyframes fade-out-scale {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
--animate-fade-in: fade-in 0.1s ease forwards;
|
||||
--animate-fade-out: fade-out 0.1s ease forwards;
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out-scale {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
--animate-fade-in: fade-in 0.1s ease forwards;
|
||||
--animate-fade-out: fade-out 0.1s ease forwards;
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--header-xl: 36px;
|
||||
--header-lg: 28px;
|
||||
|
|
@ -66,7 +63,7 @@
|
|||
@media (min-width: 60rem) {
|
||||
:root {
|
||||
--header-xl: 78px;
|
||||
--header-lg: 28px;
|
||||
--header-lg: 36px;
|
||||
--header-md: 22px;
|
||||
--header-sm: 16px;
|
||||
--header-xl-weight: 600;
|
||||
|
|
@ -74,7 +71,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
|
|
@ -106,16 +102,18 @@ h1 {
|
|||
h2 {
|
||||
font-family: "League Spartan";
|
||||
font-weight: var(--header-weight);
|
||||
font-size: var(--header-md);
|
||||
margin-bottom: 0.5em;
|
||||
font-size: var(--header-lg);
|
||||
}
|
||||
h3 {
|
||||
font-family: "League Spartan";
|
||||
font-size: var(--header-sm);
|
||||
font-weight: var(--header-weight);
|
||||
font-size: var(--header-md);
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--header-md);
|
||||
font-family: "League Spartan";
|
||||
font-size: var(--header-sm);
|
||||
font-weight: var(--header-weight);
|
||||
}
|
||||
.header-font {
|
||||
font-family: "League Spartan";
|
||||
|
|
@ -197,4 +195,4 @@ button.default[disabled]:hover {
|
|||
}
|
||||
button.default:hover {
|
||||
color: var(--color-fg-secondary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,14 +69,14 @@ export default function ActivityGrid({
|
|||
if (isPending) {
|
||||
return (
|
||||
<div className="w-[500px]">
|
||||
<h2>Activity</h2>
|
||||
<h3>Activity</h3>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
} else if (isError) {
|
||||
return (
|
||||
<div className="w-[500px]">
|
||||
<h2>Activity</h2>
|
||||
<h3>Activity</h3>
|
||||
<p className="error">Error: {error.message}</p>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -148,7 +148,7 @@ export default function ActivityGrid({
|
|||
|
||||
return (
|
||||
<div className="flex flex-col items-start">
|
||||
<h2>Activity</h2>
|
||||
<h3>Activity</h3>
|
||||
{configurable ? (
|
||||
<ActivityOptsSelector
|
||||
rangeSetter={setRange}
|
||||
|
|
|
|||
|
|
@ -2,24 +2,31 @@ import { imageUrl, type Album } from "api/api";
|
|||
import { Link } from "react-router";
|
||||
|
||||
interface Props {
|
||||
album: Album
|
||||
size: number
|
||||
album: Album;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export default function AlbumDisplay({ album, size }: Props) {
|
||||
return (
|
||||
<div className="flex gap-3" key={album.id}>
|
||||
<div>
|
||||
<Link to={`/album/${album.id}`}>
|
||||
<img src={imageUrl(album.image, "large")} alt={album.title} style={{width: size}}/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-start" style={{width: size}}>
|
||||
<Link to={`/album/${album.id}`} className="hover:text-(--color-fg-secondary)">
|
||||
<h4>{album.title}</h4>
|
||||
</Link>
|
||||
<p className="color-fg-secondary">{album.listen_count} plays</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="flex gap-3" key={album.id}>
|
||||
<div>
|
||||
<Link to={`/album/${album.id}`}>
|
||||
<img
|
||||
src={imageUrl(album.image, "large")}
|
||||
alt={album.title}
|
||||
style={{ width: size }}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-start" style={{ width: size }}>
|
||||
<Link
|
||||
to={`/album/${album.id}`}
|
||||
className="hover:text-(--color-fg-secondary)"
|
||||
>
|
||||
<h4>{album.title}</h4>
|
||||
</Link>
|
||||
<p className="color-fg-secondary">{album.listen_count} plays</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default function AllTimeStats() {
|
|||
if (isPending) {
|
||||
return (
|
||||
<div className="w-[200px]">
|
||||
<h2>All Time Stats</h2>
|
||||
<h3>All Time Stats</h3>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -18,7 +18,7 @@ export default function AllTimeStats() {
|
|||
return (
|
||||
<>
|
||||
<div>
|
||||
<h2>All Time Stats</h2>
|
||||
<h3>All Time Stats</h3>
|
||||
<p className="error">Error: {error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -29,7 +29,7 @@ export default function AllTimeStats() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h2>All Time Stats</h2>
|
||||
<h3>All Time Stats</h3>
|
||||
<div>
|
||||
<span
|
||||
className={numberClasses}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,59 @@
|
|||
import { useQuery } from "@tanstack/react-query"
|
||||
import { getTopAlbums, imageUrl, type getItemsArgs } from "api/api"
|
||||
import { Link } from "react-router"
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getTopAlbums, imageUrl, type getItemsArgs } from "api/api";
|
||||
import { Link } from "react-router";
|
||||
|
||||
interface Props {
|
||||
artistId: number
|
||||
name: string
|
||||
period: string
|
||||
artistId: number;
|
||||
name: string;
|
||||
period: string;
|
||||
}
|
||||
|
||||
export default function ArtistAlbums({artistId, name, period}: Props) {
|
||||
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: ['top-albums', {limit: 99, period: "all_time", artist_id: artistId, page: 0}],
|
||||
queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
|
||||
})
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div>
|
||||
<h2>Albums From This Artist</h2>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<h2>Albums From This Artist</h2>
|
||||
<p className="error">Error:{error.message}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default function ArtistAlbums({ artistId, name, period }: Props) {
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: [
|
||||
"top-albums",
|
||||
{ limit: 99, period: "all_time", artist_id: artistId, page: 0 },
|
||||
],
|
||||
queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
|
||||
});
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div>
|
||||
<h2>Albums featuring {name}</h2>
|
||||
<div className="flex flex-wrap gap-8">
|
||||
{data.items.map((item) => (
|
||||
<Link to={`/album/${item.id}`}className="flex gap-2 items-start">
|
||||
<img src={imageUrl(item.image, "medium")} alt={item.title} style={{width: 130}} />
|
||||
<div className="w-[180px] flex flex-col items-start gap-1">
|
||||
<p>{item.title}</p>
|
||||
<p className="text-sm color-fg-secondary">{item.listen_count} play{item.listen_count > 1 ? 's' : ''}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div>
|
||||
<h3>Albums From This Artist</h3>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<h3>Albums From This Artist</h3>
|
||||
<p className="error">Error:{error.message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3>Albums featuring {name}</h3>
|
||||
<div className="flex flex-wrap gap-8">
|
||||
{data.items.map((item) => (
|
||||
<Link to={`/album/${item.id}`} className="flex gap-2 items-start">
|
||||
<img
|
||||
src={imageUrl(item.image, "medium")}
|
||||
alt={item.title}
|
||||
style={{ width: 130 }}
|
||||
/>
|
||||
<div className="w-[180px] flex flex-col items-start gap-1">
|
||||
<p>{item.title}</p>
|
||||
<p className="text-sm color-fg-secondary">
|
||||
{item.listen_count} play{item.listen_count > 1 ? "s" : ""}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,14 +63,14 @@ export default function LastPlays(props: Props) {
|
|||
if (isPending) {
|
||||
return (
|
||||
<div className="w-[300px] sm:w-[500px]">
|
||||
<h2>Last Played</h2>
|
||||
<h3>Last Played</h3>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
} else if (isError) {
|
||||
return (
|
||||
<div className="w-[300px] sm:w-[500px]">
|
||||
<h2>Last Played</h2>
|
||||
<h3>Last Played</h3>
|
||||
<p className="error">Error: {error.message}</p>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -85,9 +85,9 @@ export default function LastPlays(props: Props) {
|
|||
|
||||
return (
|
||||
<div className="text-sm sm:text-[16px]">
|
||||
<h2 className="hover:underline">
|
||||
<h3 className="hover:underline">
|
||||
<Link to={`/listens?period=all_time${params}`}>Last Played</Link>
|
||||
</h2>
|
||||
</h3>
|
||||
<table className="-ml-4">
|
||||
<tbody>
|
||||
{props.showNowPlaying && npData && npData.currently_playing && (
|
||||
|
|
|
|||
|
|
@ -33,14 +33,14 @@ export default function TopAlbums(props: Props) {
|
|||
if (isPending) {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<h2>Top Albums</h2>
|
||||
<h3>Top Albums</h3>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
} else if (isError) {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<h2>Top Albums</h2>
|
||||
<h3>Top Albums</h3>
|
||||
<p className="error">Error: {error.message}</p>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -48,7 +48,7 @@ export default function TopAlbums(props: Props) {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="hover:underline">
|
||||
<h3 className="hover:underline">
|
||||
<Link
|
||||
to={`/chart/top-albums?period=${props.period}${
|
||||
props.artistId ? `&artist_id=${props.artistId}` : ""
|
||||
|
|
@ -56,7 +56,7 @@ export default function TopAlbums(props: Props) {
|
|||
>
|
||||
Top Albums
|
||||
</Link>
|
||||
</h2>
|
||||
</h3>
|
||||
<div className="max-w-[300px]">
|
||||
<TopItemList type="album" data={data} />
|
||||
{data.items.length < 1 ? "Nothing to show" : ""}
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@ export default function TopArtists(props: Props) {
|
|||
if (isPending) {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<h2>Top Artists</h2>
|
||||
<h3>Top Artists</h3>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
} else if (isError) {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<h2>Top Artists</h2>
|
||||
<h3>Top Artists</h3>
|
||||
<p className="error">Error: {error.message}</p>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -39,11 +39,11 @@ export default function TopArtists(props: Props) {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="hover:underline">
|
||||
<h3 className="hover:underline">
|
||||
<Link to={`/chart/top-artists?period=${props.period}`}>
|
||||
Top Artists
|
||||
</Link>
|
||||
</h2>
|
||||
</h3>
|
||||
<div className="max-w-[300px]">
|
||||
<TopItemList type="artist" data={data} />
|
||||
{data.items.length < 1 ? "Nothing to show" : ""}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,43 @@
|
|||
import { useQuery } from "@tanstack/react-query"
|
||||
import { getTopAlbums, type getItemsArgs } from "api/api"
|
||||
import AlbumDisplay from "./AlbumDisplay"
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getTopAlbums, type getItemsArgs } from "api/api";
|
||||
import AlbumDisplay from "./AlbumDisplay";
|
||||
|
||||
interface Props {
|
||||
period: string
|
||||
artistId?: Number
|
||||
vert?: boolean
|
||||
hideTitle?: boolean
|
||||
period: string;
|
||||
artistId?: Number;
|
||||
vert?: boolean;
|
||||
hideTitle?: boolean;
|
||||
}
|
||||
|
||||
|
||||
export default function TopThreeAlbums(props: Props) {
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: [
|
||||
"top-albums",
|
||||
{ limit: 3, period: props.period, artist_id: props.artistId, page: 0 },
|
||||
],
|
||||
queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
|
||||
});
|
||||
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: ['top-albums', {limit: 3, period: props.period, artist_id: props.artistId, page: 0}],
|
||||
queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
|
||||
})
|
||||
if (isPending) {
|
||||
return <p>Loading...</p>;
|
||||
}
|
||||
if (isError) {
|
||||
return <p className="error">Error:{error.message}</p>;
|
||||
}
|
||||
|
||||
if (isPending) {
|
||||
return <p>Loading...</p>
|
||||
}
|
||||
if (isError) {
|
||||
return <p className="error">Error:{error.message}</p>
|
||||
}
|
||||
console.log(data);
|
||||
|
||||
console.log(data)
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!props.hideTitle && <h2>Top Three Albums</h2>}
|
||||
<div className={`flex ${props.vert ? 'flex-col' : ''}`} style={{gap: 15}}>
|
||||
{data.items.map((item, index) => (
|
||||
<AlbumDisplay album={item} size={index === 0 ? 190 : 130} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
{!props.hideTitle && <h3>Top Three Albums</h3>}
|
||||
<div
|
||||
className={`flex ${props.vert ? "flex-col" : ""}`}
|
||||
style={{ gap: 15 }}
|
||||
>
|
||||
{data.items.map((item, index) => (
|
||||
<AlbumDisplay album={item} size={index === 0 ? 190 : 130} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,14 +31,14 @@ const TopTracks = (props: Props) => {
|
|||
if (isPending) {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<h2>Top Tracks</h2>
|
||||
<h3>Top Tracks</h3>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
} else if (isError) {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<h2>Top Tracks</h2>
|
||||
<h3>Top Tracks</h3>
|
||||
<p className="error">Error: {error.message}</p>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -51,11 +51,11 @@ const TopTracks = (props: Props) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="hover:underline">
|
||||
<h3 className="hover:underline">
|
||||
<Link to={`/chart/top-tracks?period=${props.period}${params}`}>
|
||||
Top Tracks
|
||||
</Link>
|
||||
</h2>
|
||||
</h3>
|
||||
<div className="max-w-[300px]">
|
||||
<TopItemList type="track" data={data} />
|
||||
{data.items.length < 1 ? "Nothing to show" : ""}
|
||||
|
|
|
|||
|
|
@ -1,106 +1,124 @@
|
|||
import { logout, updateUser } from "api/api"
|
||||
import { useState } from "react"
|
||||
import { AsyncButton } from "../AsyncButton"
|
||||
import { useAppContext } from "~/providers/AppProvider"
|
||||
import { logout, updateUser } from "api/api";
|
||||
import { useState } from "react";
|
||||
import { AsyncButton } from "../AsyncButton";
|
||||
import { useAppContext } from "~/providers/AppProvider";
|
||||
|
||||
export default function Account() {
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [confirmPw, setConfirmPw] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState('')
|
||||
const { user, setUsername: setCtxUsername } = useAppContext()
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPw, setConfirmPw] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState("");
|
||||
const { user, setUsername: setCtxUsername } = useAppContext();
|
||||
|
||||
const logoutHandler = () => {
|
||||
setLoading(true)
|
||||
logout()
|
||||
.then(r => {
|
||||
if (r.ok) {
|
||||
window.location.reload()
|
||||
} else {
|
||||
r.json().then(r => setError(r.error))
|
||||
}
|
||||
}).catch(err => setError(err))
|
||||
setLoading(false)
|
||||
}
|
||||
const updateHandler = () => {
|
||||
setError('')
|
||||
setSuccess('')
|
||||
if (password != "" && confirmPw === "") {
|
||||
setError("confirm your new password before submitting")
|
||||
return
|
||||
const logoutHandler = () => {
|
||||
setLoading(true);
|
||||
logout()
|
||||
.then((r) => {
|
||||
if (r.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
r.json().then((r) => setError(r.error));
|
||||
}
|
||||
setError('')
|
||||
setSuccess('')
|
||||
setLoading(true)
|
||||
updateUser(username, password)
|
||||
.then(r => {
|
||||
if (r.ok) {
|
||||
setSuccess("sucessfully updated user")
|
||||
if (username != "") {
|
||||
setCtxUsername(username)
|
||||
}
|
||||
setUsername('')
|
||||
setPassword('')
|
||||
setConfirmPw('')
|
||||
} else {
|
||||
r.json().then((r) => setError(r.error))
|
||||
}
|
||||
}).catch(err => setError(err))
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => setError(err));
|
||||
setLoading(false);
|
||||
};
|
||||
const updateHandler = () => {
|
||||
setError("");
|
||||
setSuccess("");
|
||||
if (password != "" && confirmPw === "") {
|
||||
setError("confirm your new password before submitting");
|
||||
return;
|
||||
}
|
||||
setError("");
|
||||
setSuccess("");
|
||||
setLoading(true);
|
||||
updateUser(username, password)
|
||||
.then((r) => {
|
||||
if (r.ok) {
|
||||
setSuccess("sucessfully updated user");
|
||||
if (username != "") {
|
||||
setCtxUsername(username);
|
||||
}
|
||||
setUsername("");
|
||||
setPassword("");
|
||||
setConfirmPw("");
|
||||
} else {
|
||||
r.json().then((r) => setError(r.error));
|
||||
}
|
||||
})
|
||||
.catch((err) => setError(err));
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Account</h2>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-4 items-center">
|
||||
<p>You're logged in as <strong>{user?.username}</strong></p>
|
||||
<AsyncButton loading={loading} onClick={logoutHandler}>Logout</AsyncButton>
|
||||
</div>
|
||||
<h2>Update User</h2>
|
||||
<form action="#" onSubmit={(e) => e.preventDefault()} className="flex flex-col gap-4">
|
||||
<div className="flex flex gap-4">
|
||||
<input
|
||||
name="koito-update-username"
|
||||
type="text"
|
||||
placeholder="Update username"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-sm">
|
||||
<AsyncButton loading={loading} onClick={updateHandler}>Submit</AsyncButton>
|
||||
</div>
|
||||
</form>
|
||||
<form action="#" onSubmit={(e) => e.preventDefault()} className="flex flex-col gap-4">
|
||||
<div className="flex flex gap-4">
|
||||
<input
|
||||
name="koito-update-password"
|
||||
type="password"
|
||||
placeholder="Update password"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
name="koito-confirm-password"
|
||||
type="password"
|
||||
placeholder="Confirm new password"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
value={confirmPw}
|
||||
onChange={(e) => setConfirmPw(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-sm">
|
||||
<AsyncButton loading={loading} onClick={updateHandler}>Submit</AsyncButton>
|
||||
</div>
|
||||
</form>
|
||||
{success != "" && <p className="success">{success}</p>}
|
||||
{error != "" && <p className="error">{error}</p>}
|
||||
return (
|
||||
<>
|
||||
<h3>Account</h3>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-4 items-center">
|
||||
<p>
|
||||
You're logged in as <strong>{user?.username}</strong>
|
||||
</p>
|
||||
<AsyncButton loading={loading} onClick={logoutHandler}>
|
||||
Logout
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<h3>Update User</h3>
|
||||
<form
|
||||
action="#"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
className="flex flex-col gap-4"
|
||||
>
|
||||
<div className="flex flex gap-4">
|
||||
<input
|
||||
name="koito-update-username"
|
||||
type="text"
|
||||
placeholder="Update username"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-sm">
|
||||
<AsyncButton loading={loading} onClick={updateHandler}>
|
||||
Submit
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</form>
|
||||
<form
|
||||
action="#"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
className="flex flex-col gap-4"
|
||||
>
|
||||
<div className="flex flex gap-4">
|
||||
<input
|
||||
name="koito-update-password"
|
||||
type="password"
|
||||
placeholder="Update password"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
name="koito-confirm-password"
|
||||
type="password"
|
||||
placeholder="Confirm new password"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
value={confirmPw}
|
||||
onChange={(e) => setConfirmPw(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-sm">
|
||||
<AsyncButton loading={loading} onClick={updateHandler}>
|
||||
Submit
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</form>
|
||||
{success != "" && <p className="success">{success}</p>}
|
||||
{error != "" && <p className="error">{error}</p>}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,53 +5,56 @@ import { submitListen } from "api/api";
|
|||
import { useNavigate } from "react-router";
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
setOpen: Function
|
||||
trackid: number
|
||||
open: boolean;
|
||||
setOpen: Function;
|
||||
trackid: number;
|
||||
}
|
||||
|
||||
export default function AddListenModal({ open, setOpen, trackid }: Props) {
|
||||
const [ts, setTS] = useState<Date>(new Date);
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const navigate = useNavigate()
|
||||
const [ts, setTS] = useState<Date>(new Date());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const close = () => {
|
||||
setOpen(false)
|
||||
}
|
||||
const close = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
setLoading(true)
|
||||
submitListen(trackid.toString(), ts)
|
||||
.then(r => {
|
||||
if(r.ok) {
|
||||
setLoading(false)
|
||||
navigate(0)
|
||||
} else {
|
||||
r.json().then(r => setError(r.error))
|
||||
setLoading(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
const submit = () => {
|
||||
setLoading(true);
|
||||
submitListen(trackid.toString(), ts).then((r) => {
|
||||
if (r.ok) {
|
||||
setLoading(false);
|
||||
navigate(0);
|
||||
} else {
|
||||
r.json().then((r) => setError(r.error));
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const formatForDatetimeLocal = (d: Date) => {
|
||||
const pad = (n: number) => n.toString().padStart(2, "0");
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
};
|
||||
const formatForDatetimeLocal = (d: Date) => {
|
||||
const pad = (n: number) => n.toString().padStart(2, "0");
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
|
||||
d.getDate()
|
||||
)}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={open} onClose={close}>
|
||||
<h2>Add Listen</h2>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
value={formatForDatetimeLocal(ts)}
|
||||
onChange={(e) => setTS(new Date(e.target.value))}
|
||||
/>
|
||||
<AsyncButton loading={loading} onClick={submit}>Submit</AsyncButton>
|
||||
<p className="error">{error}</p>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
return (
|
||||
<Modal isOpen={open} onClose={close}>
|
||||
<h3>Add Listen</h3>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
value={formatForDatetimeLocal(ts)}
|
||||
onChange={(e) => setTS(new Date(e.target.value))}
|
||||
/>
|
||||
<AsyncButton loading={loading} onClick={submit}>
|
||||
Submit
|
||||
</AsyncButton>
|
||||
<p className="error">{error}</p>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,172 +5,183 @@ import { useEffect, useRef, useState } from "react";
|
|||
import { Copy, Trash } from "lucide-react";
|
||||
|
||||
type CopiedState = {
|
||||
x: number;
|
||||
y: number;
|
||||
visible: boolean;
|
||||
x: number;
|
||||
y: number;
|
||||
visible: boolean;
|
||||
};
|
||||
|
||||
export default function ApiKeysModal() {
|
||||
const [input, setInput] = useState('')
|
||||
const [loading, setLoading ] = useState(false)
|
||||
const [err, setError ] = useState<string>()
|
||||
const [displayData, setDisplayData] = useState<ApiKey[]>([])
|
||||
const [copied, setCopied] = useState<CopiedState | null>(null);
|
||||
const [expandedKey, setExpandedKey] = useState<string | null>(null);
|
||||
const textRefs = useRef<Record<string, HTMLDivElement | null>>({});
|
||||
|
||||
const handleRevealAndSelect = (key: string) => {
|
||||
setExpandedKey(key);
|
||||
setTimeout(() => {
|
||||
const el = textRefs.current[key];
|
||||
if (el) {
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(el);
|
||||
const sel = window.getSelection();
|
||||
sel?.removeAllRanges();
|
||||
sel?.addRange(range);
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: [
|
||||
'api-keys'
|
||||
],
|
||||
queryFn: () => {
|
||||
return getApiKeys();
|
||||
},
|
||||
const [input, setInput] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [err, setError] = useState<string>();
|
||||
const [displayData, setDisplayData] = useState<ApiKey[]>([]);
|
||||
const [copied, setCopied] = useState<CopiedState | null>(null);
|
||||
const [expandedKey, setExpandedKey] = useState<string | null>(null);
|
||||
const textRefs = useRef<Record<string, HTMLDivElement | null>>({});
|
||||
|
||||
const handleRevealAndSelect = (key: string) => {
|
||||
setExpandedKey(key);
|
||||
setTimeout(() => {
|
||||
const el = textRefs.current[key];
|
||||
if (el) {
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(el);
|
||||
const sel = window.getSelection();
|
||||
sel?.removeAllRanges();
|
||||
sel?.addRange(range);
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: ["api-keys"],
|
||||
queryFn: () => {
|
||||
return getApiKeys();
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setDisplayData(data);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
if (isError) {
|
||||
return <p className="error">Error: {error.message}</p>;
|
||||
}
|
||||
if (isPending) {
|
||||
return <p>Loading...</p>;
|
||||
}
|
||||
|
||||
const handleCopy = (e: React.MouseEvent<HTMLButtonElement>, text: string) => {
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
|
||||
} else {
|
||||
fallbackCopy(text);
|
||||
}
|
||||
|
||||
const parentRect = (
|
||||
e.currentTarget.closest(".relative") as HTMLElement
|
||||
).getBoundingClientRect();
|
||||
const buttonRect = e.currentTarget.getBoundingClientRect();
|
||||
|
||||
setCopied({
|
||||
x: buttonRect.left - parentRect.left + buttonRect.width / 2,
|
||||
y: buttonRect.top - parentRect.top - 8,
|
||||
visible: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setDisplayData(data)
|
||||
}
|
||||
}, [data])
|
||||
setTimeout(() => setCopied(null), 1500);
|
||||
};
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<p className="error">Error: {error.message}</p>
|
||||
)
|
||||
const fallbackCopy = (text: string) => {
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = text;
|
||||
textarea.style.position = "fixed"; // prevent scroll to bottom
|
||||
document.body.appendChild(textarea);
|
||||
textarea.focus();
|
||||
textarea.select();
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
} catch (err) {
|
||||
console.error("Fallback: Copy failed", err);
|
||||
}
|
||||
if (isPending) {
|
||||
return (
|
||||
<p>Loading...</p>
|
||||
)
|
||||
document.body.removeChild(textarea);
|
||||
};
|
||||
|
||||
const handleCreateApiKey = () => {
|
||||
setError(undefined);
|
||||
if (input === "") {
|
||||
setError("a label must be provided");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
createApiKey(input)
|
||||
.then((r) => {
|
||||
setDisplayData([r, ...displayData]);
|
||||
setInput("");
|
||||
})
|
||||
.catch((err) => setError(err.message));
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleCopy = (e: React.MouseEvent<HTMLButtonElement>, text: string) => {
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
|
||||
} else {
|
||||
fallbackCopy(text);
|
||||
}
|
||||
|
||||
const parentRect = (e.currentTarget.closest(".relative") as HTMLElement).getBoundingClientRect();
|
||||
const buttonRect = e.currentTarget.getBoundingClientRect();
|
||||
|
||||
setCopied({
|
||||
x: buttonRect.left - parentRect.left + buttonRect.width / 2,
|
||||
y: buttonRect.top - parentRect.top - 8,
|
||||
visible: true,
|
||||
});
|
||||
|
||||
setTimeout(() => setCopied(null), 1500);
|
||||
};
|
||||
|
||||
const fallbackCopy = (text: string) => {
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = text;
|
||||
textarea.style.position = "fixed"; // prevent scroll to bottom
|
||||
document.body.appendChild(textarea);
|
||||
textarea.focus();
|
||||
textarea.select();
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
} catch (err) {
|
||||
console.error("Fallback: Copy failed", err);
|
||||
}
|
||||
document.body.removeChild(textarea);
|
||||
};
|
||||
|
||||
const handleCreateApiKey = () => {
|
||||
setError(undefined)
|
||||
if (input === "") {
|
||||
setError("a label must be provided")
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
createApiKey(input)
|
||||
.then(r => {
|
||||
setDisplayData([r, ...displayData])
|
||||
setInput('')
|
||||
}).catch((err) => setError(err.message))
|
||||
setLoading(false)
|
||||
}
|
||||
const handleDeleteApiKey = (id: number) => {
|
||||
setError(undefined);
|
||||
setLoading(true);
|
||||
deleteApiKey(id).then((r) => {
|
||||
if (r.ok) {
|
||||
setDisplayData(displayData.filter((v) => v.id != id));
|
||||
} else {
|
||||
r.json().then((r) => setError(r.error));
|
||||
}
|
||||
});
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleDeleteApiKey = (id: number) => {
|
||||
setError(undefined)
|
||||
setLoading(true)
|
||||
deleteApiKey(id)
|
||||
.then(r => {
|
||||
if (r.ok) {
|
||||
setDisplayData(displayData.filter((v) => v.id != id))
|
||||
} else {
|
||||
r.json().then((r) => setError(r.error))
|
||||
}
|
||||
})
|
||||
setLoading(false)
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<h2>API Keys</h2>
|
||||
<div className="flex flex-col gap-4 relative">
|
||||
{displayData.map((v) => (
|
||||
<div className="flex gap-2"><div
|
||||
key={v.key}
|
||||
ref={el => {
|
||||
textRefs.current[v.key] = el;
|
||||
}}
|
||||
onClick={() => handleRevealAndSelect(v.key)}
|
||||
className={`bg p-3 rounded-md flex-grow cursor-pointer select-text ${
|
||||
expandedKey === v.key ? '' : 'truncate'
|
||||
}`}
|
||||
style={{ whiteSpace: 'nowrap' }}
|
||||
title={v.key} // optional tooltip
|
||||
>
|
||||
{expandedKey === v.key ? v.key : `${v.key.slice(0, 8)}... ${v.label}`}
|
||||
</div>
|
||||
<button onClick={(e) => handleCopy(e, v.key)} className="large-button px-5 rounded-md"><Copy size={16} /></button>
|
||||
<AsyncButton loading={loading} onClick={() => handleDeleteApiKey(v.id)} confirm><Trash size={16} /></AsyncButton>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-2 w-3/5">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add a label for a new API key"
|
||||
className="mx-auto fg bg rounded-md p-3 flex-grow"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
/>
|
||||
<AsyncButton loading={loading} onClick={handleCreateApiKey}>Create</AsyncButton>
|
||||
return (
|
||||
<div className="">
|
||||
<h3>API Keys</h3>
|
||||
<div className="flex flex-col gap-4 relative">
|
||||
{displayData.map((v) => (
|
||||
<div className="flex gap-2">
|
||||
<div
|
||||
key={v.key}
|
||||
ref={(el) => {
|
||||
textRefs.current[v.key] = el;
|
||||
}}
|
||||
onClick={() => handleRevealAndSelect(v.key)}
|
||||
className={`bg p-3 rounded-md flex-grow cursor-pointer select-text ${
|
||||
expandedKey === v.key ? "" : "truncate"
|
||||
}`}
|
||||
style={{ whiteSpace: "nowrap" }}
|
||||
title={v.key} // optional tooltip
|
||||
>
|
||||
{expandedKey === v.key
|
||||
? v.key
|
||||
: `${v.key.slice(0, 8)}... ${v.label}`}
|
||||
</div>
|
||||
{err && <p className="error">{err}</p>}
|
||||
{copied?.visible && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: copied.y,
|
||||
left: copied.x,
|
||||
transform: "translate(-50%, -100%)",
|
||||
}}
|
||||
className="pointer-events-none bg-black text-white text-sm px-2 py-1 rounded shadow-lg opacity-90 animate-fade"
|
||||
>
|
||||
Copied!
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => handleCopy(e, v.key)}
|
||||
className="large-button px-5 rounded-md"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
<AsyncButton
|
||||
loading={loading}
|
||||
onClick={() => handleDeleteApiKey(v.id)}
|
||||
confirm
|
||||
>
|
||||
<Trash size={16} />
|
||||
</AsyncButton>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-2 w-3/5">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add a label for a new API key"
|
||||
className="mx-auto fg bg rounded-md p-3 flex-grow"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
/>
|
||||
<AsyncButton loading={loading} onClick={handleCreateApiKey}>
|
||||
Create
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{err && <p className="error">{err}</p>}
|
||||
{copied?.visible && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: copied.y,
|
||||
left: copied.x,
|
||||
transform: "translate(-50%, -100%)",
|
||||
}}
|
||||
className="pointer-events-none bg-black text-white text-sm px-2 py-1 rounded shadow-lg opacity-90 animate-fade"
|
||||
>
|
||||
Copied!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,41 @@
|
|||
import { deleteItem } from "api/api"
|
||||
import { AsyncButton } from "../AsyncButton"
|
||||
import { Modal } from "./Modal"
|
||||
import { useNavigate } from "react-router"
|
||||
import { useState } from "react"
|
||||
import { deleteItem } from "api/api";
|
||||
import { AsyncButton } from "../AsyncButton";
|
||||
import { Modal } from "./Modal";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
setOpen: Function
|
||||
title: string,
|
||||
id: number,
|
||||
type: string
|
||||
open: boolean;
|
||||
setOpen: Function;
|
||||
title: string;
|
||||
id: number;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export default function DeleteModal({ open, setOpen, title, id, type }: Props) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const navigate = useNavigate()
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const doDelete = () => {
|
||||
setLoading(true)
|
||||
deleteItem(type.toLowerCase(), id)
|
||||
.then(r => {
|
||||
if (r.ok) {
|
||||
navigate('/')
|
||||
} else {
|
||||
console.log(r)
|
||||
}
|
||||
})
|
||||
}
|
||||
const doDelete = () => {
|
||||
setLoading(true);
|
||||
deleteItem(type.toLowerCase(), id).then((r) => {
|
||||
if (r.ok) {
|
||||
navigate("/");
|
||||
} else {
|
||||
console.log(r);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={open} onClose={() => setOpen(false)}>
|
||||
<h2>Delete "{title}"?</h2>
|
||||
<p>This action is irreversible!</p>
|
||||
<div className="flex flex-col mt-3 items-center">
|
||||
<AsyncButton loading={loading} onClick={doDelete}>Yes, Delete It</AsyncButton>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Modal isOpen={open} onClose={() => setOpen(false)}>
|
||||
<h3>Delete "{title}"?</h3>
|
||||
<p>This action is irreversible!</p>
|
||||
<div className="flex flex-col mt-3 items-center">
|
||||
<AsyncButton loading={loading} onClick={doDelete}>
|
||||
Yes, Delete It
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
|
|||
<Modal maxW={1000} isOpen={open} onClose={handleClose}>
|
||||
<div className="flex flex-col items-start gap-6 w-full">
|
||||
<div className="w-full">
|
||||
<h2>Alias Manager</h2>
|
||||
<h3>Alias Manager</h3>
|
||||
<div className="flex flex-col gap-4">
|
||||
{displayData.map((v) => (
|
||||
<div className="flex gap-2">
|
||||
|
|
|
|||
|
|
@ -1,99 +1,99 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getAlbum, type Artist } from "api/api";
|
||||
import { useEffect, useState } from "react"
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface Props {
|
||||
id: number
|
||||
type: string
|
||||
id: number;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export default function SetPrimaryArtist({ id, type }: Props) {
|
||||
const [err, setErr] = useState('')
|
||||
const [primary, setPrimary] = useState<Artist>()
|
||||
const [success, setSuccess] = useState('')
|
||||
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: [
|
||||
'get-artists-'+type.toLowerCase(),
|
||||
{
|
||||
id: id
|
||||
},
|
||||
],
|
||||
queryFn: () => {
|
||||
return fetch('/apis/web/v1/artists?'+type.toLowerCase()+'_id='+id).then(r => r.json()) as Promise<Artist[]>;
|
||||
},
|
||||
});
|
||||
const [err, setErr] = useState("");
|
||||
const [primary, setPrimary] = useState<Artist>();
|
||||
const [success, setSuccess] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
for (let a of data) {
|
||||
if (a.is_primary) {
|
||||
setPrimary(a)
|
||||
break
|
||||
}
|
||||
}
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: [
|
||||
"get-artists-" + type.toLowerCase(),
|
||||
{
|
||||
id: id,
|
||||
},
|
||||
],
|
||||
queryFn: () => {
|
||||
return fetch(
|
||||
"/apis/web/v1/artists?" + type.toLowerCase() + "_id=" + id
|
||||
).then((r) => r.json()) as Promise<Artist[]>;
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
for (let a of data) {
|
||||
if (a.is_primary) {
|
||||
setPrimary(a);
|
||||
break;
|
||||
}
|
||||
}, [data])
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<p className="error">Error: {error.message}</p>
|
||||
)
|
||||
}
|
||||
if (isPending) {
|
||||
return (
|
||||
<p>Loading...</p>
|
||||
)
|
||||
}
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const updatePrimary = (artist: number, val: boolean) => {
|
||||
setErr('');
|
||||
setSuccess('');
|
||||
fetch(`/apis/web/v1/artists/primary?artist_id=${artist}&${type.toLowerCase()}_id=${id}&is_primary=${val}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
if (isError) {
|
||||
return <p className="error">Error: {error.message}</p>;
|
||||
}
|
||||
if (isPending) {
|
||||
return <p>Loading...</p>;
|
||||
}
|
||||
|
||||
const updatePrimary = (artist: number, val: boolean) => {
|
||||
setErr("");
|
||||
setSuccess("");
|
||||
fetch(
|
||||
`/apis/web/v1/artists/primary?artist_id=${artist}&${type.toLowerCase()}_id=${id}&is_primary=${val}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
}
|
||||
).then((r) => {
|
||||
if (r.ok) {
|
||||
setSuccess("successfully updated primary artists");
|
||||
} else {
|
||||
r.json().then((r) => setErr(r.error));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h3>Set Primary Artist</h3>
|
||||
<div className="flex flex-col gap-4">
|
||||
<select
|
||||
name="mark-various-artists"
|
||||
id="mark-various-artists"
|
||||
className="w-60 px-3 py-2 rounded-md"
|
||||
value={primary?.name || ""}
|
||||
onChange={(e) => {
|
||||
for (let a of data) {
|
||||
if (a.name === e.target.value) {
|
||||
setPrimary(a);
|
||||
updatePrimary(a.id, true);
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(r => {
|
||||
if (r.ok) {
|
||||
setSuccess('successfully updated primary artists');
|
||||
} else {
|
||||
r.json().then(r => setErr(r.error));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h2>Set Primary Artist</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
<select
|
||||
name="mark-various-artists"
|
||||
id="mark-various-artists"
|
||||
className="w-60 px-3 py-2 rounded-md"
|
||||
value={primary?.name || ""}
|
||||
onChange={(e) => {
|
||||
for (let a of data) {
|
||||
if (a.name === e.target.value) {
|
||||
setPrimary(a);
|
||||
updatePrimary(a.id, true);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select an artist
|
||||
</option>
|
||||
{data.map((a) => (
|
||||
<option key={a.id} value={a.name}>
|
||||
{a.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{err && <p className="error">{err}</p>}
|
||||
{success && <p className="success">{success}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select an artist
|
||||
</option>
|
||||
{data.map((a) => (
|
||||
<option key={a.id} value={a.name}>
|
||||
{a.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{err && <p className="error">{err}</p>}
|
||||
{success && <p className="success">{success}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,80 +1,77 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getAlbum } from "api/api";
|
||||
import { useEffect, useState } from "react"
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface Props {
|
||||
id: number
|
||||
id: number;
|
||||
}
|
||||
|
||||
export default function SetVariousArtists({ id }: Props) {
|
||||
const [err, setErr] = useState('')
|
||||
const [va, setVA] = useState(false)
|
||||
const [success, setSuccess] = useState('')
|
||||
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: [
|
||||
'get-album',
|
||||
{
|
||||
id: id
|
||||
},
|
||||
],
|
||||
queryFn: ({ queryKey }) => {
|
||||
const params = queryKey[1] as { id: number };
|
||||
return getAlbum(params.id);
|
||||
},
|
||||
const [err, setErr] = useState("");
|
||||
const [va, setVA] = useState(false);
|
||||
const [success, setSuccess] = useState("");
|
||||
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: [
|
||||
"get-album",
|
||||
{
|
||||
id: id,
|
||||
},
|
||||
],
|
||||
queryFn: ({ queryKey }) => {
|
||||
const params = queryKey[1] as { id: number };
|
||||
return getAlbum(params.id);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setVA(data.is_various_artists);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
if (isError) {
|
||||
return <p className="error">Error: {error.message}</p>;
|
||||
}
|
||||
if (isPending) {
|
||||
return <p>Loading...</p>;
|
||||
}
|
||||
|
||||
const updateVA = (val: boolean) => {
|
||||
setErr("");
|
||||
setSuccess("");
|
||||
fetch(`/apis/web/v1/album?id=${id}&is_various_artists=${val}`, {
|
||||
method: "PATCH",
|
||||
}).then((r) => {
|
||||
if (r.ok) {
|
||||
setSuccess("Successfully updated album");
|
||||
} else {
|
||||
r.json().then((r) => setErr(r.error));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setVA(data.is_various_artists)
|
||||
}
|
||||
}, [data])
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<p className="error">Error: {error.message}</p>
|
||||
)
|
||||
}
|
||||
if (isPending) {
|
||||
return (
|
||||
<p>Loading...</p>
|
||||
)
|
||||
}
|
||||
|
||||
const updateVA = (val: boolean) => {
|
||||
setErr('');
|
||||
setSuccess('');
|
||||
fetch(`/apis/web/v1/album?id=${id}&is_various_artists=${val}`, { method: 'PATCH' })
|
||||
.then(r => {
|
||||
if (r.ok) {
|
||||
setSuccess('Successfully updated album');
|
||||
} else {
|
||||
r.json().then(r => setErr(r.error));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h2>Mark as Various Artists</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
<select
|
||||
name="mark-various-artists"
|
||||
id="mark-various-artists"
|
||||
className="w-30 px-3 py-2 rounded-md"
|
||||
value={va.toString()}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value === 'true';
|
||||
setVA(val);
|
||||
updateVA(val);
|
||||
}}
|
||||
>
|
||||
<option value="true">True</option>
|
||||
<option value="false">False</option>
|
||||
</select>
|
||||
{err && <p className="error">{err}</p>}
|
||||
{success && <p className="success">{success}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h3>Mark as Various Artists</h3>
|
||||
<div className="flex flex-col gap-4">
|
||||
<select
|
||||
name="mark-various-artists"
|
||||
id="mark-various-artists"
|
||||
className="w-30 px-3 py-2 rounded-md"
|
||||
value={va.toString()}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value === "true";
|
||||
setVA(val);
|
||||
updateVA(val);
|
||||
}}
|
||||
>
|
||||
<option value="true">True</option>
|
||||
<option value="false">False</option>
|
||||
</select>
|
||||
{err && <p className="error">{err}</p>}
|
||||
{success && <p className="success">{success}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,43 +3,45 @@ import { AsyncButton } from "../AsyncButton";
|
|||
import { getExport } from "api/api";
|
||||
|
||||
export default function ExportModal() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleExport = () => {
|
||||
setLoading(true)
|
||||
fetch(`/apis/web/v1/export`, {
|
||||
method: "GET"
|
||||
})
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
res.blob()
|
||||
.then(blob => {
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
a.download = "koito_export.json"
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
a.remove()
|
||||
window.URL.revokeObjectURL(url)
|
||||
setLoading(false)
|
||||
})
|
||||
} else {
|
||||
res.json().then(r => setError(r.error))
|
||||
setLoading(false)
|
||||
}
|
||||
}).catch(err => {
|
||||
setError(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
const handleExport = () => {
|
||||
setLoading(true);
|
||||
fetch(`/apis/web/v1/export`, {
|
||||
method: "GET",
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.ok) {
|
||||
res.blob().then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "koito_export.json";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
setLoading(false);
|
||||
});
|
||||
} else {
|
||||
res.json().then((r) => setError(r.error));
|
||||
setLoading(false);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
setError(err);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Export</h2>
|
||||
<AsyncButton loading={loading} onClick={handleExport}>Export Data</AsyncButton>
|
||||
{error && <p className="error">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<h3>Export</h3>
|
||||
<AsyncButton loading={loading} onClick={handleExport}>
|
||||
Export Data
|
||||
</AsyncButton>
|
||||
{error && <p className="error">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default function ImageReplaceModal({
|
|||
|
||||
return (
|
||||
<Modal isOpen={open} onClose={closeModal}>
|
||||
<h2>Replace Image</h2>
|
||||
<h3>Replace Image</h3>
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
type="text"
|
||||
|
|
|
|||
|
|
@ -1,59 +1,74 @@
|
|||
import { login } from "api/api"
|
||||
import { useEffect, useState } from "react"
|
||||
import { AsyncButton } from "../AsyncButton"
|
||||
import { login } from "api/api";
|
||||
import { useEffect, useState } from "react";
|
||||
import { AsyncButton } from "../AsyncButton";
|
||||
|
||||
export default function LoginForm() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [remember, setRemember] = useState(false)
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [remember, setRemember] = useState(false);
|
||||
|
||||
const loginHandler = () => {
|
||||
if (username && password) {
|
||||
setLoading(true)
|
||||
login(username, password, remember)
|
||||
.then(r => {
|
||||
if (r.status >= 200 && r.status < 300) {
|
||||
window.location.reload()
|
||||
} else {
|
||||
r.json().then(r => setError(r.error))
|
||||
}
|
||||
}).catch(err => setError(err))
|
||||
setLoading(false)
|
||||
} else if (username || password) {
|
||||
setError("username and password are required")
|
||||
}
|
||||
const loginHandler = () => {
|
||||
if (username && password) {
|
||||
setLoading(true);
|
||||
login(username, password, remember)
|
||||
.then((r) => {
|
||||
if (r.status >= 200 && r.status < 300) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
r.json().then((r) => setError(r.error));
|
||||
}
|
||||
})
|
||||
.catch((err) => setError(err));
|
||||
setLoading(false);
|
||||
} else if (username || password) {
|
||||
setError("username and password are required");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Log In</h2>
|
||||
<div className="flex flex-col items-center gap-4 w-full">
|
||||
<p>Logging in gives you access to <strong>admin tools</strong>, such as updating images, merging items, deleting items, and more.</p>
|
||||
<form action="#" className="flex flex-col items-center gap-4 w-3/4" onSubmit={(e) => e.preventDefault()}>
|
||||
<input
|
||||
name="koito-username"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
name="koito-password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<input type="checkbox" name="koito-remember" id="koito-remember" onChange={() => setRemember(!remember)} />
|
||||
<label htmlFor="kotio-remember">Remember me</label>
|
||||
</div>
|
||||
<AsyncButton loading={loading} onClick={loginHandler}>Login</AsyncButton>
|
||||
</form>
|
||||
<p className="error">{error}</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<h3>Log In</h3>
|
||||
<div className="flex flex-col items-center gap-4 w-full">
|
||||
<p>
|
||||
Logging in gives you access to <strong>admin tools</strong>, such as
|
||||
updating images, merging items, deleting items, and more.
|
||||
</p>
|
||||
<form
|
||||
action="#"
|
||||
className="flex flex-col items-center gap-4 w-3/4"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<input
|
||||
name="koito-username"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
name="koito-password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="koito-remember"
|
||||
id="koito-remember"
|
||||
onChange={() => setRemember(!remember)}
|
||||
/>
|
||||
<label htmlFor="kotio-remember">Remember me</label>
|
||||
</div>
|
||||
<AsyncButton loading={loading} onClick={loginHandler}>
|
||||
Login
|
||||
</AsyncButton>
|
||||
</form>
|
||||
<p className="error">{error}</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,128 +2,158 @@ import { useEffect, useState } from "react";
|
|||
import { Modal } from "./Modal";
|
||||
import { search, type SearchResponse } from "api/api";
|
||||
import SearchResults from "../SearchResults";
|
||||
import type { MergeFunc, MergeSearchCleanerFunc } from "~/routes/MediaItems/MediaLayout";
|
||||
import type {
|
||||
MergeFunc,
|
||||
MergeSearchCleanerFunc,
|
||||
} from "~/routes/MediaItems/MediaLayout";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
setOpen: Function
|
||||
type: string
|
||||
currentId: number
|
||||
currentTitle: string
|
||||
mergeFunc: MergeFunc
|
||||
mergeCleanerFunc: MergeSearchCleanerFunc
|
||||
open: boolean;
|
||||
setOpen: Function;
|
||||
type: string;
|
||||
currentId: number;
|
||||
currentTitle: string;
|
||||
mergeFunc: MergeFunc;
|
||||
mergeCleanerFunc: MergeSearchCleanerFunc;
|
||||
}
|
||||
|
||||
export default function MergeModal(props: Props) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [data, setData] = useState<SearchResponse>();
|
||||
const [debouncedQuery, setDebouncedQuery] = useState(query);
|
||||
const [mergeTarget, setMergeTarget] = useState<{title: string, id: number}>({title: '', id: 0})
|
||||
const [mergeOrderReversed, setMergeOrderReversed] = useState(false)
|
||||
const [replaceImage, setReplaceImage] = useState(false)
|
||||
const navigate = useNavigate()
|
||||
const [query, setQuery] = useState("");
|
||||
const [data, setData] = useState<SearchResponse>();
|
||||
const [debouncedQuery, setDebouncedQuery] = useState(query);
|
||||
const [mergeTarget, setMergeTarget] = useState<{ title: string; id: number }>(
|
||||
{ title: "", id: 0 }
|
||||
);
|
||||
const [mergeOrderReversed, setMergeOrderReversed] = useState(false);
|
||||
const [replaceImage, setReplaceImage] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const closeMergeModal = () => {
|
||||
props.setOpen(false);
|
||||
setQuery("");
|
||||
setData(undefined);
|
||||
setMergeOrderReversed(false);
|
||||
setMergeTarget({ title: "", id: 0 });
|
||||
};
|
||||
|
||||
const closeMergeModal = () => {
|
||||
props.setOpen(false)
|
||||
setQuery('')
|
||||
setData(undefined)
|
||||
setMergeOrderReversed(false)
|
||||
setMergeTarget({title: '', id: 0})
|
||||
const toggleSelect = ({ title, id }: { title: string; id: number }) => {
|
||||
setMergeTarget({ title: title, id: id });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("mergeTarget", mergeTarget);
|
||||
}, [mergeTarget]);
|
||||
|
||||
const doMerge = () => {
|
||||
let from, to;
|
||||
if (!mergeOrderReversed) {
|
||||
from = mergeTarget;
|
||||
to = { id: props.currentId, title: props.currentTitle };
|
||||
} else {
|
||||
from = { id: props.currentId, title: props.currentTitle };
|
||||
to = mergeTarget;
|
||||
}
|
||||
|
||||
const toggleSelect = ({title, id}: {title: string, id: number}) => {
|
||||
setMergeTarget({title: title, id: id})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log("mergeTarget",mergeTarget)
|
||||
}, [mergeTarget])
|
||||
|
||||
const doMerge = () => {
|
||||
let from, to
|
||||
if (!mergeOrderReversed) {
|
||||
from = mergeTarget
|
||||
to = {id: props.currentId, title: props.currentTitle}
|
||||
props
|
||||
.mergeFunc(from.id, to.id, replaceImage)
|
||||
.then((r) => {
|
||||
if (r.ok) {
|
||||
if (mergeOrderReversed) {
|
||||
navigate(`/${props.type.toLowerCase()}/${mergeTarget.id}`);
|
||||
closeMergeModal();
|
||||
} else {
|
||||
window.location.reload();
|
||||
}
|
||||
} else {
|
||||
from = {id: props.currentId, title: props.currentTitle}
|
||||
to = mergeTarget
|
||||
// TODO: handle error
|
||||
console.log(r);
|
||||
}
|
||||
props.mergeFunc(from.id, to.id, replaceImage)
|
||||
.then(r => {
|
||||
if (r.ok) {
|
||||
if (mergeOrderReversed) {
|
||||
navigate(`/${props.type.toLowerCase()}/${mergeTarget.id}`)
|
||||
closeMergeModal()
|
||||
} else {
|
||||
window.location.reload()
|
||||
}
|
||||
} else {
|
||||
// TODO: handle error
|
||||
console.log(r)
|
||||
}
|
||||
})
|
||||
.catch((err) => console.log(err))
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedQuery(query);
|
||||
if (query === "") {
|
||||
setData(undefined);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedQuery) {
|
||||
search(debouncedQuery).then((r) => {
|
||||
r = props.mergeCleanerFunc(r, props.currentId);
|
||||
setData(r);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedQuery(query);
|
||||
if (query === '') {
|
||||
setData(undefined)
|
||||
}
|
||||
}, 300);
|
||||
}, [debouncedQuery]);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedQuery) {
|
||||
search(debouncedQuery).then((r) => {
|
||||
r = props.mergeCleanerFunc(r, props.currentId)
|
||||
setData(r);
|
||||
});
|
||||
}
|
||||
}, [debouncedQuery]);
|
||||
|
||||
return (
|
||||
return (
|
||||
<Modal isOpen={props.open} onClose={closeMergeModal}>
|
||||
<h2>Merge {props.type}s</h2>
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
type="text"
|
||||
autoFocus
|
||||
// i find my stupid a(n) logic to be a little silly so im leaving it in even if its not optimal
|
||||
placeholder={`Search for a${props.type.toLowerCase()[0] === 'a' ? 'n' : ''} ${props.type.toLowerCase()} to be merged into the current ${props.type.toLowerCase()}`}
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
<SearchResults selectorMode data={data} onSelect={toggleSelect}/>
|
||||
{ mergeTarget.id !== 0 ?
|
||||
<>
|
||||
{mergeOrderReversed ?
|
||||
<p className="mt-5"><strong>{props.currentTitle}</strong> will be merged into <strong>{mergeTarget.title}</strong></p>
|
||||
:
|
||||
<p className="mt-5"><strong>{mergeTarget.title}</strong> will be merged into <strong>{props.currentTitle}</strong></p>
|
||||
}
|
||||
<button className="hover:cursor-pointer px-5 py-2 rounded-md mt-5 bg-(--color-bg) hover:bg-(--color-bg-tertiary)" onClick={doMerge}>Merge Items</button>
|
||||
<h3>Merge {props.type}s</h3>
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
type="text"
|
||||
autoFocus
|
||||
// i find my stupid a(n) logic to be a little silly so im leaving it in even if its not optimal
|
||||
placeholder={`Search for a${
|
||||
props.type.toLowerCase()[0] === "a" ? "n" : ""
|
||||
} ${props.type.toLowerCase()} to be merged into the current ${props.type.toLowerCase()}`}
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
<SearchResults selectorMode data={data} onSelect={toggleSelect} />
|
||||
{mergeTarget.id !== 0 ? (
|
||||
<>
|
||||
{mergeOrderReversed ? (
|
||||
<p className="mt-5">
|
||||
<strong>{props.currentTitle}</strong> will be merged into{" "}
|
||||
<strong>{mergeTarget.title}</strong>
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-5">
|
||||
<strong>{mergeTarget.title}</strong> will be merged into{" "}
|
||||
<strong>{props.currentTitle}</strong>
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
className="hover:cursor-pointer px-5 py-2 rounded-md mt-5 bg-(--color-bg) hover:bg-(--color-bg-tertiary)"
|
||||
onClick={doMerge}
|
||||
>
|
||||
Merge Items
|
||||
</button>
|
||||
<div className="flex gap-2 mt-3">
|
||||
<input type="checkbox" name="reverse-merge-order" checked={mergeOrderReversed} onChange={() => setMergeOrderReversed(!mergeOrderReversed)} />
|
||||
<label htmlFor="reverse-merge-order">Reverse merge order</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="reverse-merge-order"
|
||||
checked={mergeOrderReversed}
|
||||
onChange={() => setMergeOrderReversed(!mergeOrderReversed)}
|
||||
/>
|
||||
<label htmlFor="reverse-merge-order">Reverse merge order</label>
|
||||
</div>
|
||||
{
|
||||
(props.type.toLowerCase() === "album" || props.type.toLowerCase() === "artist") &&
|
||||
<div className="flex gap-2 mt-3">
|
||||
<input type="checkbox" name="replace-image" checked={replaceImage} onChange={() => setReplaceImage(!replaceImage)} />
|
||||
{(props.type.toLowerCase() === "album" ||
|
||||
props.type.toLowerCase() === "artist") && (
|
||||
<div className="flex gap-2 mt-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="replace-image"
|
||||
checked={replaceImage}
|
||||
onChange={() => setReplaceImage(!replaceImage)}
|
||||
/>
|
||||
<label htmlFor="replace-image">Replace image</label>
|
||||
</div>
|
||||
}
|
||||
</> :
|
||||
''}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,57 +4,57 @@ import { search, type SearchResponse } from "api/api";
|
|||
import SearchResults from "../SearchResults";
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
setOpen: Function
|
||||
open: boolean;
|
||||
setOpen: Function;
|
||||
}
|
||||
|
||||
export default function SearchModal({ open, setOpen }: Props) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [data, setData] = useState<SearchResponse>();
|
||||
const [debouncedQuery, setDebouncedQuery] = useState(query);
|
||||
const [query, setQuery] = useState("");
|
||||
const [data, setData] = useState<SearchResponse>();
|
||||
const [debouncedQuery, setDebouncedQuery] = useState(query);
|
||||
|
||||
const closeSearchModal = () => {
|
||||
setOpen(false)
|
||||
setQuery('')
|
||||
setData(undefined)
|
||||
const closeSearchModal = () => {
|
||||
setOpen(false);
|
||||
setQuery("");
|
||||
setData(undefined);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedQuery(query);
|
||||
if (query === "") {
|
||||
setData(undefined);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedQuery) {
|
||||
search(debouncedQuery).then((r) => {
|
||||
setData(r);
|
||||
});
|
||||
}
|
||||
}, [debouncedQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedQuery(query);
|
||||
if (query === '') {
|
||||
setData(undefined)
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedQuery) {
|
||||
search(debouncedQuery).then((r) => {
|
||||
setData(r);
|
||||
});
|
||||
}
|
||||
}, [debouncedQuery]);
|
||||
|
||||
return (
|
||||
<Modal isOpen={open} onClose={closeSearchModal}>
|
||||
<h2>Search</h2>
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
type="text"
|
||||
autoFocus
|
||||
placeholder="Search for an artist, album, or track"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
<div className="h-3/4 w-full">
|
||||
<SearchResults data={data} onSelect={closeSearchModal}/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
return (
|
||||
<Modal isOpen={open} onClose={closeSearchModal}>
|
||||
<h3>Search</h3>
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
type="text"
|
||||
autoFocus
|
||||
placeholder="Search for an artist, album, or track"
|
||||
className="w-full mx-auto fg bg rounded p-2"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
<div className="h-3/4 w-full">
|
||||
<SearchResults data={data} onSelect={closeSearchModal} />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
72
client/app/components/rewind/Rewind.tsx
Normal file
72
client/app/components/rewind/Rewind.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import { imageUrl, type RewindStats } from "api/api";
|
||||
import RewindStatText from "./RewindStatText";
|
||||
import { RewindTopItem } from "./RewindTopItem";
|
||||
|
||||
interface Props {
|
||||
stats: RewindStats;
|
||||
includeTime?: boolean;
|
||||
}
|
||||
|
||||
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;
|
||||
return (
|
||||
<div className="flex flex-col gap-7">
|
||||
<h2>{props.stats.title}</h2>
|
||||
<RewindTopItem
|
||||
title="Top Artist"
|
||||
imageSrc={imageUrl(artistimg, "medium")}
|
||||
items={props.stats.top_artists}
|
||||
getLabel={(a) => a.name}
|
||||
includeTime={props.includeTime}
|
||||
/>
|
||||
|
||||
<RewindTopItem
|
||||
title="Top Album"
|
||||
imageSrc={imageUrl(albumimg, "medium")}
|
||||
items={props.stats.top_albums}
|
||||
getLabel={(a) => a.title}
|
||||
includeTime={props.includeTime}
|
||||
/>
|
||||
|
||||
<RewindTopItem
|
||||
title="Top Track"
|
||||
imageSrc={imageUrl(trackimg, "medium")}
|
||||
items={props.stats.top_tracks}
|
||||
getLabel={(t) => t.title}
|
||||
includeTime={props.includeTime}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-3 gap-y-5">
|
||||
<RewindStatText
|
||||
figure={`${props.stats.minutes_listened}`}
|
||||
text="Minutes listened"
|
||||
/>
|
||||
<RewindStatText figure={`${props.stats.unique_tracks}`} text="Tracks" />
|
||||
<RewindStatText
|
||||
figure={`${props.stats.new_tracks}`}
|
||||
text="New tracks"
|
||||
/>
|
||||
<RewindStatText figure={`${props.stats.plays}`} text="Plays" />
|
||||
<RewindStatText figure={`${props.stats.unique_albums}`} text="Albums" />
|
||||
<RewindStatText
|
||||
figure={`${props.stats.new_albums}`}
|
||||
text="New albums"
|
||||
/>
|
||||
<RewindStatText
|
||||
figure={`${props.stats.avg_plays_per_day.toFixed(1)}`}
|
||||
text="Plays per day"
|
||||
/>
|
||||
<RewindStatText
|
||||
figure={`${props.stats.unique_artists}`}
|
||||
text="Artists"
|
||||
/>
|
||||
<RewindStatText
|
||||
figure={`${props.stats.new_artists}`}
|
||||
text="New artists"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
client/app/components/rewind/RewindStatText.tsx
Normal file
32
client/app/components/rewind/RewindStatText.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
interface Props {
|
||||
figure: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export default function RewindStatText(props: Props) {
|
||||
return (
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<div className="w-23 text-end shrink-0">
|
||||
<span
|
||||
className="
|
||||
relative inline-block
|
||||
text-2xl font-semibold
|
||||
"
|
||||
>
|
||||
<span
|
||||
className="
|
||||
absolute inset-0
|
||||
-translate-x-2 translate-y-8
|
||||
bg-(--color-primary)
|
||||
z-0
|
||||
h-1
|
||||
"
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="relative z-1">{props.figure}</span>
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm">{props.text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
client/app/components/rewind/RewindTopItem.tsx
Normal file
55
client/app/components/rewind/RewindTopItem.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
type TopItemProps<T> = {
|
||||
title: string;
|
||||
imageSrc: string;
|
||||
items: T[];
|
||||
getLabel: (item: T) => string;
|
||||
includeTime?: boolean;
|
||||
};
|
||||
|
||||
export function RewindTopItem<
|
||||
T extends {
|
||||
id: string | number;
|
||||
listen_count: number;
|
||||
time_listened: number;
|
||||
}
|
||||
>({ title, imageSrc, items, getLabel, includeTime }: TopItemProps<T>) {
|
||||
const [top, ...rest] = items;
|
||||
|
||||
if (!top) return null;
|
||||
|
||||
return (
|
||||
<div className="flex gap-5">
|
||||
<div className="rewind-top-item-image">
|
||||
<img className="max-w-48 max-h-48" src={imageSrc} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<h4 className="-mb-1">{title}</h4>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-col items-start mb-2">
|
||||
<h2>{getLabel(top)}</h2>
|
||||
<span className="text-(--color-fg-tertiary) -mt-3 text-sm">
|
||||
{`${top.listen_count} plays`}
|
||||
{includeTime
|
||||
? ` (${Math.floor(top.time_listened / 60)} minutes)`
|
||||
: ``}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{rest.map((e) => (
|
||||
<div key={e.id} className="text-sm">
|
||||
{getLabel(e)}
|
||||
<span className="text-(--color-fg-tertiary)">
|
||||
{` - ${e.listen_count} plays`}
|
||||
{includeTime
|
||||
? ` (${Math.floor(e.time_listened / 60)} minutes)`
|
||||
: ``}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,55 +1,73 @@
|
|||
import { ExternalLink, Home, Info } from "lucide-react";
|
||||
import { ExternalLink, History, Home, Info } from "lucide-react";
|
||||
import SidebarSearch from "./SidebarSearch";
|
||||
import SidebarItem from "./SidebarItem";
|
||||
import SidebarSettings from "./SidebarSettings";
|
||||
import { getRewindYear } from "~/utils/utils";
|
||||
|
||||
export default function Sidebar() {
|
||||
const iconSize = 20;
|
||||
const iconSize = 20;
|
||||
|
||||
return (
|
||||
<div className="
|
||||
z-50
|
||||
flex
|
||||
sm:flex-col
|
||||
justify-between
|
||||
sm:fixed
|
||||
sm:top-0
|
||||
sm:left-0
|
||||
sm:h-screen
|
||||
h-auto
|
||||
sm:w-auto
|
||||
w-full
|
||||
border-b
|
||||
sm:border-b-0
|
||||
sm:border-r
|
||||
border-(--color-bg-tertiary)
|
||||
pt-2
|
||||
sm:py-10
|
||||
sm:px-1
|
||||
px-4
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
z-50
|
||||
flex
|
||||
sm:flex-col
|
||||
justify-between
|
||||
sm:fixed
|
||||
sm:top-0
|
||||
sm:left-0
|
||||
sm:h-screen
|
||||
h-auto
|
||||
sm:w-auto
|
||||
w-full
|
||||
border-b
|
||||
sm:border-b-0
|
||||
sm:border-r
|
||||
border-(--color-bg-tertiary)
|
||||
pt-2
|
||||
sm:py-10
|
||||
sm:px-1
|
||||
px-4
|
||||
bg-(--color-bg)
|
||||
">
|
||||
<div className="flex gap-4 sm:flex-col">
|
||||
<SidebarItem space={10} to="/" name="Home" onClick={() => {}} modal={<></>}>
|
||||
<Home size={iconSize} />
|
||||
</SidebarItem>
|
||||
<SidebarSearch size={iconSize} />
|
||||
</div>
|
||||
<div className="flex gap-4 sm:flex-col">
|
||||
<SidebarItem
|
||||
icon
|
||||
keyHint={<ExternalLink size={14} />}
|
||||
space={22}
|
||||
externalLink
|
||||
to="https://koito.io"
|
||||
name="About"
|
||||
onClick={() => {}}
|
||||
modal={<></>}
|
||||
>
|
||||
<Info size={iconSize} />
|
||||
</SidebarItem>
|
||||
<SidebarSettings size={iconSize} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
"
|
||||
>
|
||||
<div className="flex gap-4 sm:flex-col">
|
||||
<SidebarItem
|
||||
space={10}
|
||||
to="/"
|
||||
name="Home"
|
||||
onClick={() => {}}
|
||||
modal={<></>}
|
||||
>
|
||||
<Home size={iconSize} />
|
||||
</SidebarItem>
|
||||
<SidebarSearch size={iconSize} />
|
||||
<SidebarItem
|
||||
space={10}
|
||||
to={`/rewind?year=${getRewindYear()}`}
|
||||
name="Rewind"
|
||||
onClick={() => {}}
|
||||
modal={<></>}
|
||||
>
|
||||
<History size={iconSize} />
|
||||
</SidebarItem>
|
||||
</div>
|
||||
<div className="flex gap-4 sm:flex-col">
|
||||
<SidebarItem
|
||||
icon
|
||||
keyHint={<ExternalLink size={14} />}
|
||||
space={22}
|
||||
externalLink
|
||||
to="https://koito.io"
|
||||
name="About"
|
||||
onClick={() => {}}
|
||||
modal={<></>}
|
||||
>
|
||||
<Info size={iconSize} />
|
||||
</SidebarItem>
|
||||
<SidebarSettings size={iconSize} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export function ThemeSwitcher() {
|
|||
<div className="flex flex-col gap-10">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h2>Select Theme</h2>
|
||||
<h3>Select Theme</h3>
|
||||
<div className="mb-3">
|
||||
<AsyncButton onClick={resetTheme}>Reset</AsyncButton>
|
||||
</div>
|
||||
|
|
@ -61,7 +61,7 @@ export function ThemeSwitcher() {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Use Custom Theme</h2>
|
||||
<h3>Use Custom Theme</h3>
|
||||
<div className="flex flex-col items-center gap-3 bg-secondary p-5 rounded-lg">
|
||||
<textarea
|
||||
name="custom-theme"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import { type RouteConfig, index, route } from "@react-router/dev/routes";
|
||||
|
||||
export default [
|
||||
index("routes/Home.tsx"),
|
||||
route("/artist/:id", "routes/MediaItems/Artist.tsx"),
|
||||
route("/album/:id", "routes/MediaItems/Album.tsx"),
|
||||
route("/track/:id", "routes/MediaItems/Track.tsx"),
|
||||
route("/chart/top-albums", "routes/Charts/AlbumChart.tsx"),
|
||||
route("/chart/top-artists", "routes/Charts/ArtistChart.tsx"),
|
||||
route("/chart/top-tracks", "routes/Charts/TrackChart.tsx"),
|
||||
route("/listens", "routes/Charts/Listens.tsx"),
|
||||
route("/theme-helper", "routes/ThemeHelper.tsx"),
|
||||
] satisfies RouteConfig;
|
||||
index("routes/Home.tsx"),
|
||||
route("/artist/:id", "routes/MediaItems/Artist.tsx"),
|
||||
route("/album/:id", "routes/MediaItems/Album.tsx"),
|
||||
route("/track/:id", "routes/MediaItems/Track.tsx"),
|
||||
route("/chart/top-albums", "routes/Charts/AlbumChart.tsx"),
|
||||
route("/chart/top-artists", "routes/Charts/ArtistChart.tsx"),
|
||||
route("/chart/top-tracks", "routes/Charts/TrackChart.tsx"),
|
||||
route("/listens", "routes/Charts/Listens.tsx"),
|
||||
route("/rewind", "routes/RewindPage.tsx"),
|
||||
route("/theme-helper", "routes/ThemeHelper.tsx"),
|
||||
] satisfies RouteConfig;
|
||||
|
|
|
|||
52
client/app/routes/RewindPage.tsx
Normal file
52
client/app/routes/RewindPage.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import Rewind from "~/components/rewind/Rewind";
|
||||
import type { Route } from "./+types/Home";
|
||||
import { type RewindStats } from "api/api";
|
||||
import { useState } from "react";
|
||||
import type { LoaderFunctionArgs } from "react-router";
|
||||
import { useLoaderData } from "react-router";
|
||||
import { getRewindYear } from "~/utils/utils";
|
||||
|
||||
export async function clientLoader({ request }: LoaderFunctionArgs) {
|
||||
const url = new URL(request.url);
|
||||
const year = url.searchParams.get("year") || getRewindYear();
|
||||
|
||||
const res = await fetch(`/apis/web/v1/summary?year=${year}`);
|
||||
if (!res.ok) {
|
||||
throw new Response("Failed to load summary", { status: 500 });
|
||||
}
|
||||
|
||||
const stats: RewindStats = await res.json();
|
||||
stats.title = `Your ${year} Rewind`;
|
||||
return { stats };
|
||||
}
|
||||
|
||||
export function meta({}: Route.MetaArgs) {
|
||||
return [
|
||||
{ title: `Rewind - Koito` },
|
||||
{ name: "description", content: "Rewind - Koito" },
|
||||
];
|
||||
}
|
||||
|
||||
export default function RewindPage() {
|
||||
const [showTime, setShowTime] = useState(false);
|
||||
const { stats: stats } = useLoaderData<{ stats: RewindStats }>();
|
||||
return (
|
||||
<main className="w-18/20">
|
||||
<title>{stats.title} - Koito</title>
|
||||
<meta property="og:title" content={`${stats.title} - Koito`} />
|
||||
<meta name="description" content={`${stats.title} - Koito`} />
|
||||
<div className="flex flex-col items-start mt-20 gap-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<label htmlFor="show-time-checkbox">Show time listened?</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="show-time-checkbox"
|
||||
checked={showTime}
|
||||
onChange={(e) => setShowTime(!showTime)}
|
||||
></input>
|
||||
</div>
|
||||
{stats !== undefined && <Rewind stats={stats} includeTime={showTime} />}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -15,6 +15,16 @@ const timeframeToInterval = (timeframe: Timeframe): string => {
|
|||
}
|
||||
};
|
||||
|
||||
const getRewindYear = (): number => {
|
||||
const today = new Date();
|
||||
if (today.getMonth() > 10 && today.getDate() >= 30) {
|
||||
// if we are in december 30/31, just serve current year
|
||||
return today.getFullYear();
|
||||
} else {
|
||||
return today.getFullYear() - 1;
|
||||
}
|
||||
};
|
||||
|
||||
function timeSince(date: Date) {
|
||||
const now = new Date();
|
||||
const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
||||
|
|
@ -104,5 +114,5 @@ const timeListenedString = (seconds: number) => {
|
|||
return `${minutes} minutes listened`;
|
||||
};
|
||||
|
||||
export { hexToHSL, timeListenedString };
|
||||
export { hexToHSL, timeListenedString, getRewindYear };
|
||||
export type { hsl };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue