chore: initial public commit

client/app/routes/MediaItems/Track.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Link, useLoaderData, type LoaderFunctionArgs } from "react-router";
+import { mergeTracks, type Album, type Track } from "api/api";
+import LastPlays from "~/components/LastPlays";
+import PeriodSelector from "~/components/PeriodSelector";
+import MediaLayout from "./MediaLayout";
+import ActivityGrid from "~/components/ActivityGrid";
+
+export async function clientLoader({ params }: LoaderFunctionArgs) {
+    let res = await fetch(`/apis/web/v1/track?id=${params.id}`);
+    if (!res.ok) {
+        throw new Response("Failed to load track", { status: res.status });
+    }
+    const track: Track = await res.json();
+    res = await fetch(`/apis/web/v1/album?id=${track.album_id}`)
+    if (!res.ok) {
+        throw new Response("Failed to load album for track", { status: res.status })
+    }
+    const album: Album = await res.json()
+    return {track: track, album: album};
+}
+
+export default function Track() {
+    const { track, album } = useLoaderData();
+    const [period, setPeriod] = useState('week')
+
+    return (
+        <MediaLayout type="Track"
+            title={track.title}
+            img={track.image}
+            id={track.id}
+            musicbrainzId={album.musicbrainz_id}
+            imgItemId={track.album_id}
+            mergeFunc={mergeTracks}
+            mergeCleanerFunc={(r, id) => {
+                r.albums = []
+                r.artists = []
+                for (let i = 0; i < r.tracks.length; i ++) {
+                    if (r.tracks[i].id === id) {
+                        delete r.tracks[i]
+                    }
+                }
+                return r
+            }}
+            subContent={<div className="flex flex-col gap-4 items-start">
+            <Link to={`/album/${track.album_id}`}>appears on {album.title}</Link>
+            {track.listen_count && <p>{track.listen_count} play{ track.listen_count > 1 ? 's' : ''}</p>}
+            </div>}
+        >
+            <div className="mt-10">
+                <PeriodSelector setter={setPeriod} current={period} />
+            </div>
+            <div className="flex gap-20 mt-10">
+            <LastPlays limit={20} trackId={track.id}/>
+            <ActivityGrid trackId={track.id} configurable autoAdjust />
+            </div>
+        </MediaLayout>
+    )
+}