import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" import { useViewer } from "use-vibes" const TIERS = ["S", "A", "B", "C", "D", "F"] const TIER_RANK = { S: 0, A: 1, B: 2, C: 3, D: 4, F: 5 } const TIER_COLOR = { S: "bg-[#c4622d] text-[#f3e9d2]", A: "bg-[#e0a32e] text-[#211b16]", B: "bg-[#7a8b6f] text-[#211b16]", C: "bg-[#2f4858] text-[#f3e9d2]", D: "bg-[#8a7a66] text-[#f3e9d2]", F: "bg-[#211b16] text-[#f3e9d2]", } // real album art via the free iTunes Search API (no key); graceful null on miss/CORS async function fetchCover(artist, name) { try { const q = encodeURIComponent(`${artist} ${name}`.trim()) const r = await fetch(`https://itunes.apple.com/search?term=${q}&entity=album&limit=1`) const j = await r.json() const url = j.results && j.results[0] && j.results[0].artworkUrl100 return url ? url.replace("100x100bb", "500x500bb") : null } catch (e) { return null } } function Cover({ url, label, size }) { const px = size || 160 if (url) return {label}

return (

) } const YT_VIDEO_ID = "TVPPR4-yrCs" // Loads the YouTube IFrame API once, returns a promise resolving to window.YT let ytApiPromise = null function loadYouTubeApi() { if (typeof window === "undefined") return Promise.reject(new Error("no window")) if (window.YT && window.YT.Player) return Promise.resolve(window.YT) if (ytApiPromise) return ytApiPromise ytApiPromise = new Promise((resolve) => { const prev = window.onYouTubeIframeAPIReady window.onYouTubeIframeAPIReady = () => { if (typeof prev === "function") prev(); resolve(window.YT) } if (!document.getElementById("yt-iframe-api")) { const tag = document.createElement("script") tag.id = "yt-iframe-api" tag.src = "https://www.youtube.com/iframe_api" document.head.appendChild(tag) } }) return ytApiPromise } function PlayIcon() { return } function SpeakerMutedIcon() { return ( ) } function PauseIcon() { return } function Equalizer({ playing }) { const bars = [0, 1, 2, 3] return ( ) } function NowPlayingBar() { const containerRef = React.useRef(null) const playerRef = React.useRef(null) const [ready, setReady] = React.useState(false) const [playing, setPlaying] = React.useState(false) const [muted, setMuted] = React.useState(true) React.useEffect(() => { let cancelled = false loadYouTubeApi().then((YT) => { if (cancelled || !containerRef.current) return playerRef.current = new YT.Player(containerRef.current, { videoId: YT_VIDEO_ID, width: 320, height: 180, // autoplay + mute so the browser allows playback the instant the page loads playerVars: { autoplay: 1, mute: 1, start: 10, controls: 0, disablekb: 1, modestbranding: 1, rel: 0, playsinline: 1 }, events: { onReady: (e) => { if (cancelled) return setReady(true) try { e.target.mute(); e.target.playVideo() } catch (err) {} }, onStateChange: (e) => { if (e.data === YT.PlayerState.PLAYING) setPlaying(true) else if (e.data === YT.PlayerState.PAUSED || e.data === YT.PlayerState.ENDED) setPlaying(false) }, }, }) }).catch(() => {}) return () => { cancelled = true try { if (playerRef.current && playerRef.current.destroy) playerRef.current.destroy() } catch (e) {} } }, []) const onMainButton = () => { const p = playerRef.current if (!p) return if (muted) { // First tap is a user gesture — bring sound on and make sure it's rolling. try { p.unMute(); p.setVolume(100); p.playVideo() } catch (e) {} setMuted(false) return } // Once unmuted, the main button is a play/pause control. if (playing) p.pauseVideo() else p.playVideo() } return (

Now Playing Side A · drop the needle

Free Bird

{muted ?

Tap for sound

Lynyrd Skynyrd · the anthem

}

{/* Audio engine: rendered at a real 320x180 so YouTube actually plays it, but clipped to zero height + nudged behind the bar so nothing shows. */} ) } function AddAlbumForm({ database, can }) { const [name, setName] = React.useState("") const [adding, setAdding] = React.useState(false) const [last, setLast] = React.useState(null) async function handleAdd(e) { e.preventDefault() if (!name.trim()) return setAdding(true) try { const res = await callAI( `You are a classic southern rock historian. For this album, return the artist, the release year, and a one-line note (max 12 words). Album: "${name}".`, { schema: { properties: { artist: { type: "string" }, year: { type: "string" }, description: { type: "string" } } } } ) const { artist, year, description } = JSON.parse(res) const coverUrl = await fetchCover(artist, name.trim()) await database.put({ type: "album", name: name.trim(), artist, year, description, coverUrl, createdAt: Date.now() }) setLast({ name: name.trim(), artist, year, description, coverUrl }) setName("") } finally { setAdding(false) } } if (!can("write")) return null return (

+ Missing a record? Add it

) } export default function App() { const { viewer, can } = useViewer() const { database, useLiveQuery, useDocument } = useFireproof("southern-rock-v2") const { docs: albums } = useLiveQuery("type", { key: "album" }) const { docs: ballots } = useLiveQuery("type", { key: "ballot" }) React.useEffect(() => { if (albums.length === 0) { const seeds = [ { name: "(Pronounced 'Lĕh-'nérd 'Skin-'nérd)", artist: "Lynyrd Skynyrd", year: "1973", description: "Free Bird and Tuesday's Gone — the debut that set the bar." }, { name: "At Fillmore East", artist: "The Allman Brothers Band", year: "1971", description: "The live double that defined the whole sound." }, { name: "Tres Hombres", artist: "ZZ Top", year: "1973", description: "La Grange. Texas boogie, perfected." }, { name: "Marshall Tucker Band", artist: "The Marshall Tucker Band", year: "1973", description: "Can't You See — flute, fiddle, and grit." }, { name: "Fire on the Mountain", artist: "Charlie Daniels Band", year: "1974", description: "The long-haired country-rock crossover." }, { name: "The Outlaws", artist: "The Outlaws", year: "1975", description: "Green Grass and High Tides, three-guitar attack." }, { name: "Keep On Smilin'", artist: "Wet Willie", year: "1974", description: "Macon soul-rock, underrated and easy." }, ] seeds.forEach(async s => { const coverUrl = await fetchCover(s.artist, s.name) database.put({ _id: `album:${s.artist} - ${s.name}`, type: "album", createdAt: Date.now(), coverUrl, ...s }) }) } }, [albums.length]) const { doc: nameDoc, merge: mergeName } = useDocument({ _id: "my-name", name: "" }) const [tiers, setTiers] = React.useState({}) const [activeId, setActiveId] = React.useState(null) const [submitting, setSubmitting] = React.useState(false) const [submitted, setSubmitted] = React.useState(false) const resultsRef = React.useRef(null) const avgFor = (id) => { const vs = ballots.filter(b => b.tiers && b.tiers[id]) return vs.length ? vs.reduce((s, b) => s + TIER_RANK[b.tiers[id]], 0) / vs.length : null } const ranked = [...albums].sort((a, b) => (avgFor(a._id) ?? 99) - (avgFor(b._id) ?? 99)) const totalBallots = ballots.length const placedCount = Object.keys(tiers).length const setTier = (id, t) => { setTiers(prev => ({ ...prev, [id]: t })); setActiveId(null) } const benchIt = (id) => setTiers(prev => { const n = { ...prev }; delete n[id]; return n }) const onDragStart = (e, id) => { e.dataTransfer.setData("text/plain", id); e.dataTransfer.effectAllowed = "move" } const onDropTier = (e, t) => { e.preventDefault(); const id = e.dataTransfer.getData("text/plain"); if (id) setTier(id, t) } const onDropBench = (e) => { e.preventDefault(); const id = e.dataTransfer.getData("text/plain"); if (id) benchIt(id) } const submit = async () => { setSubmitting(true) try { const voter = nameDoc.name.trim() || (viewer && (viewer.displayName || viewer.userSlug)) || "Anonymous" await database.put({ type: "ballot", voter, tiers, createdAt: Date.now() }) setSubmitted(true) setTimeout(() => { if (resultsRef.current) resultsRef.current.scrollIntoView({ behavior: "smooth", block: "start" }) }, 120) } finally { setSubmitting(false) } } return (

The Group Verdict · Side A

Best Southern
Rock Album

Drop a record in a tier, lock it in. The sleeve crowns the group’s verdict, live. Settle it once and for all.

{totalBallots} {totalBallots === 1 ? "ballot" : "ballots"} {albums.length} records

{/* single-column flow: rank → add → results reveal right below */}

{!can("write") ? (

Read-only sleeve — ask the owner for write access to rank. The group’s verdict is below.

) : (

{submitted ? "Your Ballot — edit anytime" : "Rank the records"}

{submitted && (

Ballot counted — change a pick and lock in again anytime.

)} {activeId && (

a._id === activeId)?.coverUrl} label="" size={32} /> Slot {albums.find(a => a._id === activeId)?.artist} in:

{TIERS.map(t => ( ))}

)}

Not ranked yet — tap or drag a cover into a tier

e.preventDefault()} onDrop={onDropBench}> {albums.filter(a => !tiers[a._id]).map(a => ( ))} {albums.filter(a => !tiers[a._id]).length === 0 && All slotted — nice.}

{TIERS.map(tier => (

{tier}

e.preventDefault()} onDrop={e => onDropTier(e, tier)}> {albums.filter(a => tiers[a._id] === tier).map(a => ( ))}

))}

mergeName({ name: e.target.value })} />

Rank as many or as few as you want — partial ballots count.

)} {/* results — same column, right below; auto-scrolled into view on submit */}

The Group’s Verdict {totalBallots > 0 && · {totalBallots} {totalBallots === 1 ? "ballot" : "ballots"}}

{i + 1}
{avgTier}

{al.artist}

{al.name}{al.year ? ` · ${al.year}` : ""}

{mine && you: {mine}}
{votes.length} {votes.length === 1 ? "vote" : "votes"}
No records yet.

{totalBallots === 0 && albums.length > 0 && (

No ballots yet. Rank a few above, lock in, then pass the link — the sleeve moves as the crew votes.

)}

) }