Music — YouTube Player & Library

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_204":205,"_206":207},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_154":-5,"_20":155,"_22":156,"_157":158,"_159":160,"_25":161,"_24":-5,"_162":-5,"_163":-5,"_164":54,"_165":166,"_167":45,"_168":-5,"_169":-5,"_170":171},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","rizmafarhanas","name","youtube-music","branchName","main","version","path","","project",{"_34":99,"_13":14,"_46":100,"_101":-5,"_102":54,"_103":104,"_105":104,"_106":107,"_108":-5,"_109":110,"_111":38,"_112":45,"_113":-5,"_114":-5,"_115":48,"_116":117,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":132,"_133":134,"_135":136,"_137":54},"tree",[64,65],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":48,"_49":62,"_51":-5,"_53":54,"_55":-5,"_18":63},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","395821ea-608c-4710-bc97-4cfb5fcf8419","index.ts","fileId","1c5d721a-8202-11f1-90e1-1607ee4eb77e","parentId","branchId","f2813241-0875-46ef-9685-90a2159f6bfd","branchVersion",1,"latest",true,"createdAt",["D",1784308100255],0,"fileType","http","content","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","deleted",false,"label",[36],"8dd54f7d-f163-4fe0-9438-b7ba67231955","frontend","ce0054b4-c798-4628-99b0-711bfeab630e",2,["D",1784308196053],"directory",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":70,"_17":48,"_49":62,"_51":-5,"_53":54,"_55":-5,"_67":71,"_18":72},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":66,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_67":68,"_18":69},["D",1784308100255],"children",[],[36],["D",1784308196053],[73,74,75],[58],{"_34":92,"_13":93,"_37":94,"_39":59,"_40":41,"_42":95,"_44":45,"_46":96,"_17":48,"_49":62,"_51":-5,"_53":54,"_55":-5,"_67":97,"_18":98},{"_34":84,"_13":85,"_37":86,"_39":59,"_40":41,"_42":87,"_44":45,"_46":88,"_17":48,"_49":24,"_51":89,"_53":54,"_55":-5,"_67":90,"_18":91},{"_34":76,"_13":77,"_37":78,"_39":59,"_40":41,"_42":60,"_44":45,"_46":79,"_17":48,"_49":80,"_51":81,"_53":54,"_55":-5,"_67":82,"_18":83},"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",[],[58,77],"48ab227d-cd0f-441d-8ac2-8d97157c2c35","index.html","8978a39c-8202-11f1-8ab1-1607ee4eb77e",3,["D",1784308283300],"\n\n \n \n \n Music — YouTube Player & Library\n \n \" type=\"image/svg+xml\">\n \n \n

\n \n \n \n\n",[],[58,85],"c1dc70bd-a0df-40c3-ab99-f1f970f4eb1c","components","8980264e-8202-11f1-a883-1607ee4eb77e",4,["D",1784308283308],[],[58,93],"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,"_153":149},"org",{"_11":12,"_146":147,"_148":149,"_109":110,"_150":151,"_152":54},"branch",{"_17":95,"_13":16,"_34":41,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":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",{"_34":99,"_13":14,"_46":200,"_101":-5,"_102":54,"_103":104,"_105":104,"_106":107,"_108":-5,"_109":110,"_111":38,"_112":45,"_113":-5,"_114":-5,"_115":48,"_116":117,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":201,"_133":202,"_135":203,"_137":54},[185,189],"files",[185,186,187,188,189],"counts",{"_176":48,"_177":43,"_178":48,"_31":179,"_180":181},[172,173],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":48,"_49":62,"_51":-5,"_53":54,"_55":-5,"_18":175},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":174},[36],[58],"pulls","branches","forks",{"_182":48,"_184":48},"connections",{"_182":48,"_183":48},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":70,"_17":48,"_49":62,"_51":-5,"_53":54,"_55":-5,"_67":198,"_18":199},{"_34":92,"_13":93,"_37":94,"_39":59,"_40":41,"_42":95,"_44":45,"_46":96,"_17":48,"_49":62,"_51":-5,"_53":54,"_55":-5,"_67":196,"_18":197},{"_34":84,"_13":85,"_37":86,"_39":59,"_40":41,"_42":87,"_44":45,"_46":88,"_17":48,"_49":24,"_51":89,"_53":54,"_55":-5,"_67":194,"_18":195},{"_34":76,"_13":77,"_37":78,"_39":59,"_40":41,"_42":60,"_44":45,"_46":79,"_17":48,"_49":80,"_51":81,"_53":54,"_55":-5,"_67":192,"_18":193},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":66,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_67":190,"_18":191},[],[36],[],[58,77],[],[58,85],[],[58,93],[186,187,188],[58],["D",1784308087792],{"_11":12,"_153":149},{"_11":12,"_146":147,"_148":149,"_109":110,"_150":151,"_152":54},{"_17":95,"_13":16,"_34":41,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"ctx",{"_131":-5,"_169":237,"_238":239,"_240":241,"_242":54,"_243":54,"_244":54,"_245":45,"_246":-5,"_247":-7,"_248":-7,"_249":48,"_250":54,"_251":54,"_252":-5,"_253":54,"_254":54,"_255":54,"_256":-5},"ENV",{"_208":209,"_210":211,"_212":16,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236},"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"]

Code