/** @jsxImportSource https://esm.sh/react */ // Set to true to disable all editing functionality const READ_ONLY = true; import { nanoid } from "https://esm.sh/nanoid"; import React from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface Song { id: string; title: string; url: string; position: number; tag?: string; created_at: string; } function AddSongForm({ onAdd }: { onAdd: (song: Omit) => void }) { const [url, setUrl] = React.useState(""); const [title, setTitle] = React.useState(""); const [tag, setTag] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(""); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); setError(""); try { const audio = new Audio(url); await new Promise((resolve, reject) => { audio.onloadedmetadata = resolve; audio.onerror = () => reject(new Error("Invalid audio URL")); }); const urlObj = new URL(url); const filename = urlObj.pathname.split("/").pop() || ""; const cleanTitle = filename .replace(/\.[^/.]+$/, "") .replace(/[-_]/g, " "); onAdd({ url, title: title || cleanTitle || url, tag, position: 0, }); setUrl(""); setTitle(""); setTag(""); } catch (err) { setError("Please enter a valid audio URL"); } finally { setIsLoading(false); } }; return ( ); } function SongCard( { song, onDelete, onEdit }: { song: Song; onDelete: (id: string) => void; onEdit: (song: Song) => void; }, ) { const [isEditing, setIsEditing] = React.useState(false); const [editUrl, setEditUrl] = React.useState(song.url); const [editTitle, setEditTitle] = React.useState(song.title); const [editTag, setEditTag] = React.useState(song.tag || ""); const [isDeleting, setIsDeleting] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); const handleDelete = () => { if (isDeleting) { onDelete(song.id); } else { setIsDeleting(true); setTimeout(() => setIsDeleting(false), 2000); } }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); try { await onEdit({ ...song, url: editUrl, title: editTitle, tag: editTag }); setIsEditing(false); } catch (err) { console.error(err); } finally { setIsLoading(false); } }; if (isEditing) { return (

); } return (

{song.title}

{new Date(song.created_at).toLocaleDateString()}

{song.tag && {song.tag}} {!READ_ONLY && ( <> )}

); } function App() { const [songs, setSongs] = React.useState([]); const [sortBy, setSortBy] = React.useState<"date" | "title">("date"); const [selectedTag, setSelectedTag] = React.useState(""); const [isLoading, setIsLoading] = React.useState(true); const [error, setError] = React.useState(""); const fetchSongs = async () => { try { const response = await fetch("/api/songs"); if (!response.ok) throw new Error("Failed to fetch songs"); const data = await response.json(); setSongs(data); } catch (err) { setError("Failed to load songs"); } finally { setIsLoading(false); } }; React.useEffect(() => { fetchSongs(); }, []); const handleAdd = async (song: Omit) => { try { const response = await fetch("/api/songs", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(song), }); if (!response.ok) throw new Error("Failed to add song"); fetchSongs(); } catch (err) { setError("Failed to add song"); } }; const handleEdit = async (song: Song) => { try { const response = await fetch(`/api/songs/${song.id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(song), }); if (!response.ok) throw new Error("Failed to update song"); fetchSongs(); } catch (err) { setError("Failed to update song"); } }; const handleDelete = async (id: string) => { try { const response = await fetch(`/api/songs/${id}`, { method: "DELETE", }); if (!response.ok) throw new Error("Failed to delete song"); fetchSongs(); } catch (err) { setError("Failed to delete song"); } }; const tags = React.useMemo(() => { const tagSet = new Set(songs.map((s) => s.tag).filter(Boolean)); return Array.from(tagSet); }, [songs]); const filteredAndSortedSongs = React.useMemo(() => { let filtered = selectedTag ? songs.filter((s) => s.tag === selectedTag) : songs; return [...filtered].sort((a, b) => { if (sortBy === "date") { return new Date(b.created_at).getTime() - new Date(a.created_at).getTime(); } return a.title.localeCompare(b.title); }); }, [songs, sortBy, selectedTag]); if (isLoading) { return (

sync

); } return (

🎵 Music Player {READ_ONLY && "(Read Only)"}

{!READ_ONLY && }

{tags.map(tag => ( ))}

{error &&

{error}

}

{filteredAndSortedSongs.map(song => ( ))}

); } function client() { createRoot(document.getElementById("root")!).render(); } if (typeof document !== "undefined") { client(); } export default async function server(req: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Create tables if they don't exist await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_songs_${SCHEMA_VERSION} ( id TEXT PRIMARY KEY, title TEXT NOT NULL, url TEXT NOT NULL, position INTEGER NOT NULL DEFAULT 0, tag TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); const url = new URL(req.url); // API endpoints if (url.pathname === "/api/songs") { if (req.method === "GET") { const result = await sqlite.execute( `SELECT * FROM ${KEY}_songs_${SCHEMA_VERSION} ORDER BY position, created_at DESC`, ); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } if (req.method === "POST") { const song = await req.json(); const id = nanoid(); await sqlite.execute( `INSERT INTO ${KEY}_songs_${SCHEMA_VERSION} (id, title, url, position, tag) VALUES (?, ?, ?, ?, ?)`, [id, song.title, song.url, song.position, song.tag], ); return new Response(null, { status: 201 }); } } if (url.pathname.startsWith("/api/songs/")) { const id = url.pathname.split("/").pop(); if (req.method === "PUT") { const song = await req.json(); await sqlite.execute( `UPDATE ${KEY}_songs_${SCHEMA_VERSION} SET title = ?, url = ?, position = ?, tag = ? WHERE id = ?`, [song.title, song.url, song.position, song.tag, id], ); return new Response(null, { status: 200 }); } if (req.method === "DELETE") { await sqlite.execute(`DELETE FROM ${KEY}_songs_${SCHEMA_VERSION} WHERE id = ?`, [id]); return new Response(null, { status: 200 }); } } // HTML response return new Response( ` Music Player

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` :root { --primary: #7C3AED; --primary-light: #DDD6FE; --primary-dark: #5B21B6; --error: #EF4444; --success: #10B981; --background: #F9FAFB; --surface: #FFFFFF; --text: #1F2937; --text-secondary: #6B7280; --border: #E5E7EB; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, sans-serif; background: var(--background); color: var(--text); line-height: 1.5; } .app-container { max-width: 1200px; margin: 0 auto; padding: 2rem; } header { margin-bottom: 2rem; } h1 { font-size: 2.5rem; margin-bottom: 1.5rem; color: var(--primary); } .add-song-form { background: var(--surface); padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; } .form-row { display: flex; gap: 1rem; margin-bottom: 1rem; } input { flex: 1; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 1rem; } input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .header-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .sort-pills, .tag-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; } .pill { padding: 0.5rem 1rem; border: none; border-radius: 9999px; background: var(--surface); color: var(--text-secondary); font-weight: 500; cursor: pointer; transition: all 0.2s; } .pill:hover { background: var(--primary-light); color: var(--primary); } .pill.active { background: var(--primary); color: white; } .songs-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .song-card { background: var(--surface); border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .card-title h3 { margin: 0; font-size: 1.25rem; color: var(--text); } .card-title time { color: var(--text-secondary); font-size: 0.875rem; } .card-actions { display: flex; gap: 0.5rem; } .edit-btn, .remove-btn { padding: 0.5rem; border: none; border-radius: 0.375rem; background: transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; } .edit-btn:hover { background: var(--primary-light); color: var(--primary); } .remove-btn:hover { background: #FEE2E2; color: var(--error); } .remove-btn.confirm { background: var(--error); color: white; } .audio-player { width: 100%; margin-top: 1rem; } .error { background: #FEE2E2; color: var(--error); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; } .loading { animation: spin 1s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } .loading-spinner { display: flex; justify-content: center; align-items: center; min-height: 200px; } .edit-form { display: flex; flex-direction: column; gap: 1rem; } @media (max-width: 640px) { .app-container { padding: 1rem; } .form-row { flex-direction: column; } .header-actions { flex-direction: column; } } `;

jamz