Your Bookmarks

📚 No bookmarks yet. Add some Tidal tracks or albums above!

\n );\n }\n\n return (\n

Your Bookmarks ({bookmarks.length})

\n {bookmarks.map((bookmark: any) => (\n

\n {bookmark.type === \"track\" ? \"🎵\" : \"💿\"}{\" \"}\n {bookmark.type?.toUpperCase() || \"UNKNOWN\"}\n

\n {bookmark.title || \"Untitled\"}\n

\n {bookmark.artist || \"Unknown Artist\"}\n

\n {bookmark.album && (\n

{bookmark.album}

\n )}\n

\n {bookmark.duration && (\n \n {Math.floor(\n bookmark.duration / 60,\n )}:{(bookmark.duration % 60).toString().padStart(2, \"0\")}\n \n )}\n \n Added {bookmark.created_at\n ? new Date(bookmark.created_at).toLocaleDateString()\n : \"Unknown date\"}\n \n {bookmark.listened\n ? (\n \n ✓ Listened\n \n )\n : null}\n

\n \n \n \n \n \n {bookmark.listened ? \"↩︎ Unlisten\" : \"✓ Mark listened\"}\n \n \n {bookmark.tidal_url && (\n \n 🔗 Open\n \n )}\n {\n if (\n !confirm(\"Are you sure you want to delete this bookmark?\")\n ) {\n e.preventDefault();\n }\n }}\n >\n \n \n \n 🗑️ Delete\n \n \n

\n ))}\n

\n );\n};\n\nconst LoginForm = () => (\n \n \n MusicBox - Login\n \n \n \n \n \n

\n \n 🎵 MusicBox\n \n

Enter password to access the app:

\n \n \n);\n\nconst AuthenticatedApp = (\n { message, bookmarks = [], currentFilter = \"unlistened\" as const }: {\n message?: string;\n bookmarks?: any[];\n currentFilter?: \"unlistened\" | \"listened\";\n },\n) => (\n \n \n MusicBox\n \n \n \n \n \n

\n \n 🎵 MusicBox\n \n

\n \n

\n {message && (\n \n {message}\n

\n )}\n

Add Tidal Bookmark

\n Paste a Tidal track or album URL to save it for later listening.\n

\n \n

Supported URL formats:

\n Track:{\" \"}\n https://tidal.com/browse/track/12345678 or{\" \"}\n https://listen.tidal.com/track/12345678\n

\n Album:{\" \"}\n https://tidal.com/browse/album/12345678 or{\" \"}\n https://listen.tidal.com/album/12345678\n

\n \n \n ▶︎ Unlistened\n \n \n ✓ Listened\n \n

\n \n \n \n \n \n);\n\nconst LoginError = () => (\n \n \n MusicBox - Login\n \n \n \n \n \n

\n \n 🎵 MusicBox\n \n

Enter password to access the app:

\n \n \n);\n\n// Main authentication handler\nconst authHandler = async (request: Request): Promise => {\n const url = new URL(request.url);\n const path = url.pathname;\n\n // Handle bookmark form submission\n if (path === \"/bookmark\" && request.method === \"POST\") {\n try {\n const formData = await request.formData();\n const tidalUrl = formData.get(\"tidalUrl\") as string;\n\n if (!tidalUrl) {\n const bookmarks = await getBookmarksByListened(false);\n return new Response(\n renderToString(\n ,\n ),\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n // Extract Tidal ID and type from URL\n const tidalInfo = extractTidalId(tidalUrl);\n if (!tidalInfo) {\n const bookmarks = await getBookmarksByListened(false);\n return new Response(\n renderToString(\n ,\n ),\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n const { id: tidalId, type } = tidalInfo;\n\n // Check if already bookmarked\n const existing = await sqlite.execute({\n sql: \"SELECT id FROM bookmarks WHERE tidal_id = ?\",\n args: [tidalId],\n });\n\n if (existing.rows.length > 0) {\n const bookmarks = await getBookmarksByListened(false);\n return new Response(\n renderToString(\n ,\n ),\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n // Fetch metadata from Tidal API using SDK client\n let metadata;\n if (type === \"track\") {\n metadata = await tidalAPI.getTrack(tidalId);\n } else {\n metadata = await tidalAPI.getAlbum(tidalId);\n }\n\n // Save to database\n await sqlite.execute({\n sql:\n `INSERT INTO bookmarks (tidal_id, type, title, artist, album, duration, artwork_url, tidal_url) \n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n tidalId,\n type,\n metadata.title,\n metadata.artists.map((a: any) => a.name).join(\", \"),\n type === \"track\" ? metadata.album.title : null,\n metadata.duration,\n metadata.image?.[0]?.url || null,\n tidalUrl,\n ],\n });\n\n const artistNames = metadata.artists.map((a: any) => a.name).join(\", \");\n const successMessage =\n `✅ Added \"${metadata.title}\" by ${artistNames} to your bookmarks!`;\n\n // Re-fetch bookmarks so the list reflects the new item\n const bookmarks = await getBookmarksByListened(false);\n return new Response(\n renderToString(\n ,\n ),\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n } catch (error) {\n console.error(\"Bookmark error:\", error);\n const errorMessage = error instanceof Error\n ? `Error: ${error.message}`\n : \"Error: Failed to add bookmark\";\n\n const bookmarks = await getBookmarksByListened(false);\n return new Response(\n renderToString(\n ,\n ),\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n }\n\n // Handle bookmark deletion\n if (path === \"/bookmark/delete\" && request.method === \"POST\") {\n try {\n const formData = await request.formData();\n const bookmarkId = formData.get(\"bookmarkId\") as string;\n const filterParam = (formData.get(\"filter\") as string) || \"unlistened\";\n\n console.log(\"Delete request received:\", {\n bookmarkId,\n formDataEntries: Array.from(formData.entries()),\n });\n\n if (!bookmarkId) {\n console.error(\"No bookmarkId provided in form data\");\n return new Response(\"\", {\n status: 302,\n headers: {\n \"Location\": `/?filter=${filterParam}&error=no-bookmark-id`,\n },\n });\n }\n\n const parsedId = parseInt(bookmarkId);\n if (isNaN(parsedId)) {\n console.error(\"Invalid bookmarkId format:\", bookmarkId);\n return new Response(\"\", {\n status: 302,\n headers: {\n \"Location\": `/?filter=${filterParam}&error=invalid-bookmark-id`,\n },\n });\n }\n\n console.log(\"Attempting to delete bookmark with ID:\", parsedId);\n const success = await deleteBookmark(parsedId);\n\n if (success) {\n console.log(\"Bookmark deleted successfully\");\n return new Response(\"\", {\n status: 302,\n headers: {\n \"Location\": `/?filter=${filterParam}&message=bookmark-deleted`,\n },\n });\n } else {\n console.log(\"Bookmark not found or already deleted\");\n return new Response(\"\", {\n status: 302,\n headers: {\n \"Location\": `/?filter=${filterParam}&error=bookmark-not-found`,\n },\n });\n }\n } catch (error) {\n console.error(\"Delete bookmark error:\", error);\n return new Response(\"\", {\n status: 302,\n headers: { \"Location\": \"/?filter=unlistened&error=delete-failed\" },\n });\n }\n }\n\n // Handle marking a bookmark as listened/unlistened\n if (path === \"/bookmark/listened\" && request.method === \"POST\") {\n try {\n const formData = await request.formData();\n const bookmarkId = formData.get(\"bookmarkId\") as string;\n const listenedStr = (formData.get(\"listened\") as string) || \"false\";\n const filterParam = (formData.get(\"filter\") as string) || \"unlistened\";\n\n const parsedId = parseInt(bookmarkId);\n const listened = listenedStr === \"true\";\n\n if (!bookmarkId || isNaN(parsedId)) {\n return new Response(\"\", {\n status: 302,\n headers: {\n \"Location\": `/?filter=${filterParam}&error=invalid-bookmark-id`,\n },\n });\n }\n\n const success = await updateBookmarkListened(parsedId, listened);\n if (!success) {\n return new Response(\"\", {\n status: 302,\n headers: {\n \"Location\": `/?filter=${filterParam}&error=bookmark-not-found`,\n },\n });\n }\n\n const messageKey = listened ? \"marked-listened\" : \"marked-unlistened\";\n return new Response(\"\", {\n status: 302,\n headers: {\n \"Location\": `/?filter=${filterParam}&message=${messageKey}`,\n },\n });\n } catch (error) {\n console.error(\"Toggle listened error:\", error);\n return new Response(\"\", {\n status: 302,\n headers: { \"Location\": \"/?filter=unlistened&error=toggle-failed\" },\n });\n }\n }\n\n // Handle login form submission\n if (path === \"/login\" && request.method === \"POST\") {\n try {\n const formData = await request.formData();\n const password = formData.get(\"password\") as string;\n\n // Check password against environment variable\n const correctPassword = Deno.env.get(\"MUSICBOX_PASSWORD\");\n\n if (password === correctPassword) {\n const sessionId = await createSession(\"user\");\n\n return new Response(\"\", {\n status: 302,\n headers: {\n \"Location\": \"/\",\n \"Set-Cookie\":\n `session=${sessionId}; HttpOnly; SameSite=Strict; Path=/; Max-Age=86400`,\n },\n });\n } else {\n return new Response(renderToString(), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n } catch (error) {\n console.error(\"Login error:\", error);\n return new Response(renderToString(), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n }\n\n // Handle logout\n if (path === \"/logout\" && request.method === \"POST\") {\n const cookie = request.headers.get(\"cookie\");\n const sessionId = cookie?.match(/session=([^;]+)/)?.[1];\n\n if (sessionId) {\n await deleteSession(sessionId);\n }\n\n return new Response(\"\", {\n status: 302,\n headers: {\n \"Location\": \"/\",\n \"Set-Cookie\": \"session=; HttpOnly; SameSite=Strict; Path=/; Max-Age=0\",\n },\n });\n }\n\n // Check authentication for all other routes\n const cookie = request.headers.get(\"cookie\");\n const sessionId = cookie?.match(/session=([^;]+)/)?.[1];\n\n if (!sessionId || !(await validateSession(sessionId))) {\n return new Response(renderToString(), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n\n // User is authenticated - serve the main app\n\n // Handle URL parameters for messages\n let message: string | undefined;\n const messageParam = url.searchParams.get(\"message\");\n const errorParam = url.searchParams.get(\"error\");\n const filterParam = url.searchParams.get(\"filter\") === \"listened\"\n ? \"listened\"\n : \"unlistened\"; // default to unlistened\n\n if (messageParam === \"bookmark-deleted\") {\n message = \"✅ Bookmark deleted successfully!\";\n } else if (errorParam === \"no-bookmark-id\") {\n message = \"Error: No bookmark ID provided.\";\n } else if (errorParam === \"invalid-bookmark-id\") {\n message = \"Error: Invalid bookmark ID format.\";\n } else if (errorParam === \"bookmark-not-found\") {\n message = \"Error: Bookmark not found.\";\n } else if (errorParam === \"delete-failed\") {\n message = \"Error: Failed to delete bookmark.\";\n } else if (messageParam === \"marked-listened\") {\n message = \"✅ Marked as listened.\";\n } else if (messageParam === \"marked-unlistened\") {\n message = \"✅ Marked as unlistened.\";\n }\n\n // Fetch bookmarks by filter (default: unlistened)\n const bookmarks = filterParam === \"listened\"\n ? await getBookmarksByListened(true)\n : await getBookmarksByListened(false);\n\n return new Response(\n renderToString(\n ,\n ),\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n};\n\n// Export as default for val.town compatibility\nexport default authHandler;\n","deleted","label",[99],"permalink","https://www.val.town/x/florian42/MusicBox/code/main.tsx","extension","actionData","errors"]