Music — YouTube Player & Library

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_199":200,"_201":202},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_151":-5,"_20":152,"_22":153,"_154":155,"_156":157,"_26":158,"_24":159,"_160":-5,"_161":-5,"_162":53,"_163":164,"_165":45,"_166":-5,"_167":-5,"_168":169},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","rizmafarhanas","name","youtube-music","branchName","main","version","path","frontend/index.html","project",{"_33":96,"_13":14,"_46":97,"_98":-5,"_99":53,"_100":101,"_102":101,"_103":104,"_105":-5,"_106":107,"_108":61,"_109":45,"_110":-5,"_111":-5,"_112":48,"_113":114,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_128":129,"_130":131,"_132":133,"_134":53},"tree",[57,58],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":24,"_50":51,"_52":53,"_54":-5,"_18":55},"contents",[],"upstream","pull","ahead","behind","envVars","id","48ab227d-cd0f-441d-8ac2-8d97157c2c35","index.html","fileId","8978a39c-8202-11f1-8ab1-1607ee4eb77e","parentId","ce0054b4-c798-4628-99b0-711bfeab630e","branchId","f2813241-0875-46ef-9685-90a2159f6bfd","branchVersion",3,"latest",true,"createdAt",["D",1784308283300],0,"fileType","content","\n\n \n \n \n Music — YouTube Player & Library\n \n \" type=\"image/svg+xml\">\n \n \n

\n \n \n \n\n","deleted",false,"label",[56,35],"frontend",{"_33":69,"_13":56,"_36":39,"_38":-5,"_40":41,"_42":70,"_44":45,"_46":71,"_17":48,"_49":72,"_50":-5,"_52":53,"_54":-5,"_66":73,"_18":74},{"_33":59,"_13":60,"_36":61,"_38":-5,"_40":41,"_42":62,"_44":45,"_46":63,"_17":48,"_49":64,"_50":65,"_52":53,"_54":-5,"_66":67,"_18":68},"395821ea-608c-4710-bc97-4cfb5fcf8419","index.ts","1c5d721a-8202-11f1-90e1-1607ee4eb77e",1,["D",1784308100255],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nconst app = new Hono();\n\n// ─── Static files ───\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── Types ───\ninterface Song {\n id: string;\n title: string;\n channel: string;\n thumbnail: string;\n duration: number;\n savedAt?: number;\n}\n\n// ─── Piped API instances (fallback chain) ───\nconst PIPED_INSTANCES = [\n \"https://pipedapi.kavin.rocks\",\n \"https://pipedapi.adminforge.de\",\n \"https://api-piped.mha.fi\",\n];\n\nasync function pipedSearch(query: string): Promise {\n for (const base of PIPED_INSTANCES) {\n try {\n const url = `${base}/search?q=${encodeURIComponent(query)}&filter=music_songs`;\n const res = await fetch(url, {\n signal: AbortSignal.timeout(8000),\n headers: { \"Accept\": \"application/json\" },\n });\n if (!res.ok) continue;\n const data = await res.json();\n if (!data.items) continue;\n\n return data.items\n .filter((item: any) => item.type === \"stream\")\n .map((item: any) => ({\n id: item.url?.replace(\"/watch?v=\", \"\") ?? \"\",\n title: item.title ?? \"Unknown\",\n channel: item.uploaderName ?? \"Unknown\",\n thumbnail: item.thumbnail ?? \"\",\n duration: item.duration ?? 0,\n }))\n .filter((s: Song) => s.id);\n } catch {\n continue;\n }\n }\n // Fallback: generic search filter\n for (const base of PIPED_INSTANCES) {\n try {\n const url = `${base}/search?q=${encodeURIComponent(query)}&filter=all`;\n const res = await fetch(url, {\n signal: AbortSignal.timeout(8000),\n headers: { \"Accept\": \"application/json\" },\n });\n if (!res.ok) continue;\n const data = await res.json();\n if (!data.items) continue;\n\n return data.items\n .filter((item: any) => item.type === \"stream\")\n .map((item: any) => ({\n id: item.url?.replace(\"/watch?v=\", \"\") ?? \"\",\n title: item.title ?? \"Unknown\",\n channel: item.uploaderName ?? \"Unknown\",\n thumbnail: item.thumbnail ?? \"\",\n duration: item.duration ?? 0,\n }))\n .filter((s: Song) => s.id);\n } catch {\n continue;\n }\n }\n return [];\n}\n\n// ─── API: Search YouTube ───\napp.get(\"/api/search\", async (c) => {\n const q = c.req.query(\"q\");\n if (!q || q.trim().length === 0) {\n return c.json({ error: \"Query required\" }, 400);\n }\n const results = await pipedSearch(q.trim());\n return c.json({ results });\n});\n\n// ─── Library helpers (blob storage) ───\nconst LIBRARY_KEY = \"music-library\";\n\nasync function getLibrary(): Promise {\n try {\n return (await blob.getJSON(LIBRARY_KEY)) ?? [];\n } catch {\n return [];\n }\n}\n\nasync function saveLibrary(songs: Song[]): Promise {\n await blob.setJSON(LIBRARY_KEY, songs);\n}\n\n// ─── API: Get library ───\napp.get(\"/api/library\", async (c) => {\n const songs = await getLibrary();\n return c.json({ songs });\n});\n\n// ─── API: Save song to library ───\napp.post(\"/api/library\", async (c) => {\n const body = await c.req.json();\n if (!body.id) return c.json({ error: \"Song id required\" }, 400);\n\n const songs = await getLibrary();\n if (songs.some((s) => s.id === body.id)) {\n return c.json({ ok: true, message: \"Already in library\" });\n }\n\n songs.unshift({ ...body, savedAt: Date.now() });\n await saveLibrary(songs);\n return c.json({ ok: true });\n});\n\n// ─── API: Remove song from library ───\napp.delete(\"/api/library/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const songs = await getLibrary();\n const filtered = songs.filter((s) => s.id !== id);\n await saveLibrary(filtered);\n return c.json({ ok: true });\n});\n\n// ─── Error handling ───\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[60],"8dd54f7d-f163-4fe0-9438-b7ba67231955",2,["D",1784308196053],"directory",[75,76,77],[56],{"_33":89,"_13":90,"_36":91,"_38":39,"_40":41,"_42":92,"_44":45,"_46":93,"_17":48,"_49":72,"_50":-5,"_52":53,"_54":-5,"_66":94,"_18":95},{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":86,"_17":48,"_49":24,"_50":51,"_52":53,"_54":-5,"_66":87,"_18":88},{"_33":78,"_13":79,"_36":80,"_38":39,"_40":41,"_42":70,"_44":45,"_46":81,"_17":48,"_49":82,"_50":83,"_52":53,"_54":-5,"_66":84,"_18":85},"95495a36-6e62-4912-8a48-f767b303e3d3","index.tsx","55791928-8202-11f1-959b-1607ee4eb77e",["D",1784308196053],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",[],[56,79],["D",1784308283300],[],[56,35],"c1dc70bd-a0df-40c3-ab99-f1f970f4eb1c","components","8980264e-8202-11f1-a883-1607ee4eb77e",4,["D",1784308283308],[],[56,90],"53f93f50-e629-4832-a738-343473715055",["D",1784308087792],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Modern YouTube music app with search, playback & saved library","imageUrl","userId","7c1318b7-a61a-42ba-b56d-1c91b3511153","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019f70ed-cc64-70ba-bd3d-918542477ad7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_150":146},"org",{"_11":12,"_143":144,"_145":146,"_106":107,"_147":148,"_149":53},"branch",{"_17":92,"_13":16,"_33":41,"_135":96,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":14,"_142":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Rizma Farhana S","avatar","https://lh3.googleusercontent.com/a/ACg8ocLod4s2OWCSx1qq0JGisFRzjNW2gIoJezW0PrVZLhOqA_fbT3g=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":96,"_13":14,"_46":195,"_98":-5,"_99":53,"_100":101,"_102":101,"_103":104,"_105":-5,"_106":107,"_108":61,"_109":45,"_110":-5,"_111":-5,"_112":48,"_113":114,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_128":196,"_130":197,"_132":198,"_134":53},[180,184],"files",[180,181,182,183,184],"counts",{"_171":48,"_172":62,"_173":48,"_32":174,"_175":176},[],{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":24,"_50":51,"_52":53,"_54":-5,"_18":170},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[56,35],"pulls","branches","forks",{"_177":48,"_179":48},"connections",{"_177":48,"_178":48},"count","unfilledCount","emptyCount",{"_33":69,"_13":56,"_36":39,"_38":-5,"_40":41,"_42":70,"_44":45,"_46":71,"_17":48,"_49":72,"_50":-5,"_52":53,"_54":-5,"_66":193,"_18":194},{"_33":89,"_13":90,"_36":91,"_38":39,"_40":41,"_42":92,"_44":45,"_46":93,"_17":48,"_49":72,"_50":-5,"_52":53,"_54":-5,"_66":191,"_18":192},{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":86,"_17":48,"_49":24,"_50":51,"_52":53,"_54":-5,"_66":189,"_18":190},{"_33":78,"_13":79,"_36":80,"_38":39,"_40":41,"_42":70,"_44":45,"_46":81,"_17":48,"_49":82,"_50":83,"_52":53,"_54":-5,"_66":187,"_18":188},{"_33":59,"_13":60,"_36":61,"_38":-5,"_40":41,"_42":62,"_44":45,"_46":63,"_17":48,"_49":64,"_50":65,"_52":53,"_54":-5,"_66":185,"_18":186},[],[60],[],[56,79],[],[56,35],[],[56,90],[181,182,183],[56],["D",1784308087792],{"_11":12,"_150":146},{"_11":12,"_143":144,"_145":146,"_106":107,"_147":148,"_149":53},{"_17":92,"_13":16,"_33":41,"_135":96,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":14,"_142":12},"ctx",{"_128":-5,"_167":232,"_233":234,"_235":236,"_237":53,"_238":53,"_239":53,"_240":45,"_241":-5,"_242":-7,"_243":-7,"_244":48,"_245":53,"_246":53,"_247":-5,"_248":53,"_249":53,"_250":53,"_251":-5},"ENV",{"_203":204,"_205":206,"_207":16,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]