5b772655c6
Full self-hosted click track generator for cover bands. Core technical pieces implemented: - CTP (Click Track Protocol) TypeScript schema, Zod validator, and WAV renderer (44.1 kHz, 16-bit PCM, accented downbeats, ramp sections) - MusicBrainz API client with 1 req/s rate limiting - PostgreSQL schema (songs, tempo_maps, registry_sync_log) with triggers - Git registry sync logic (clone/pull → validate CTP → upsert DB) - Next.js 14 App Router: search page, track page, API routes (/api/songs, /api/tracks, /api/generate) - UI components: SearchBar, SongResult, TempoMapEditor, ClickTrackPlayer (Web Audio API in-browser playback + WAV download) - Docker Compose stack: app + postgres + redis + nginx + registry-sync - Multi-stage Dockerfile with standalone Next.js output - .env.example documenting all configuration variables - README with setup instructions, CTP format spec, and API reference Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
import { Suspense } from "react";
|
|
import SearchBar from "@/components/SearchBar";
|
|
import SongResult from "@/components/SongResult";
|
|
import { searchSongs as searchSongsDB } from "@/lib/db/client";
|
|
import { searchSongs as searchMB } from "@/lib/musicbrainz/client";
|
|
import { upsertSong } from "@/lib/db/client";
|
|
|
|
interface PageProps {
|
|
searchParams: { q?: string };
|
|
}
|
|
|
|
async function SearchResults({ q }: { q: string }) {
|
|
// Try local DB first
|
|
let songs = await searchSongsDB(q, 20);
|
|
|
|
// If sparse results, hit MusicBrainz and cache locally
|
|
if (songs.length < 3) {
|
|
try {
|
|
const mbResults = await searchMB(q, 20);
|
|
for (const s of mbResults) {
|
|
await upsertSong({
|
|
mbid: s.mbid,
|
|
title: s.title,
|
|
artist: s.artist,
|
|
duration_seconds: s.duration_seconds,
|
|
acousticbrainz_bpm: null,
|
|
acousticbrainz_time_sig_num: null,
|
|
source: "musicbrainz",
|
|
});
|
|
}
|
|
songs = await searchSongsDB(q, 20);
|
|
} catch {
|
|
// MusicBrainz unavailable — fall through with local results
|
|
}
|
|
}
|
|
|
|
if (songs.length === 0) {
|
|
return (
|
|
<p className="mt-8 text-center text-zinc-500">
|
|
No results for <span className="text-zinc-300">“{q}”</span>.
|
|
Try a different search.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ul className="mt-6 space-y-3">
|
|
{songs.map((song) => (
|
|
<SongResult key={song.mbid} song={song} />
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default function HomePage({ searchParams }: PageProps) {
|
|
const q = searchParams.q?.trim() ?? "";
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-10 text-center">
|
|
<h1 className="text-4xl font-bold tracking-tight text-green-400">ClickTrack</h1>
|
|
<p className="mt-3 text-zinc-400">
|
|
Find a song, download a click track. Built for cover bands.
|
|
</p>
|
|
</div>
|
|
|
|
<SearchBar initialValue={q} />
|
|
|
|
{q && (
|
|
<Suspense
|
|
fallback={
|
|
<p className="mt-8 text-center text-zinc-500 animate-pulse">Searching…</p>
|
|
}
|
|
>
|
|
{/* @ts-expect-error async server component */}
|
|
<SearchResults q={q} />
|
|
</Suspense>
|
|
)}
|
|
|
|
{!q && (
|
|
<div className="mt-12 grid gap-6 text-sm text-zinc-500 sm:grid-cols-3">
|
|
<div className="rounded-lg border border-zinc-800 p-5">
|
|
<div className="mb-2 text-lg font-semibold text-zinc-200">Search</div>
|
|
Search any song by title or artist. We pull metadata from MusicBrainz
|
|
and cache it locally.
|
|
</div>
|
|
<div className="rounded-lg border border-zinc-800 p-5">
|
|
<div className="mb-2 text-lg font-semibold text-zinc-200">Tempo Map</div>
|
|
Community-contributed CTP tempo maps define every section, time
|
|
signature change, and tempo ramp in a song.
|
|
</div>
|
|
<div className="rounded-lg border border-zinc-800 p-5">
|
|
<div className="mb-2 text-lg font-semibold text-zinc-200">Download</div>
|
|
Generate a 44.1 kHz WAV click track with accented downbeats — ready
|
|
for your in-ear monitor mix.
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|