Music — YouTube Player & Library

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_214":215,"_216":217},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_159":-5,"_20":160,"_22":161,"_162":163,"_164":165,"_26":166,"_24":167,"_168":-5,"_169":-5,"_170":57,"_171":172,"_173":48,"_174":-5,"_175":-5,"_176":177},"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","project",{"_36":104,"_13":14,"_49":105,"_106":-5,"_107":57,"_108":109,"_110":109,"_111":112,"_113":-5,"_114":115,"_116":81,"_117":48,"_118":-5,"_119":-5,"_120":51,"_121":122,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_136":137,"_138":139,"_140":141,"_142":57},"tree",[77,78],"file",{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":46,"_47":48,"_49":75,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_18":76},"contents",[33,34,35],"upstream","pull","ahead","behind","envVars",{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":71,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_18":73},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_18":66},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":59},"id","95495a36-6e62-4912-8a48-f767b303e3d3","index.tsx","fileId","55791928-8202-11f1-959b-1607ee4eb77e","parentId","ce0054b4-c798-4628-99b0-711bfeab630e","branchId","f2813241-0875-46ef-9685-90a2159f6bfd","branchVersion",2,"latest",true,"createdAt",["D",1784308196053],0,"fileType","script","content","/** @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","deleted",false,"label",[19,38],"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",[19,61],"c1dc70bd-a0df-40c3-ab99-f1f970f4eb1c","components","8980264e-8202-11f1-a883-1607ee4eb77e",4,["D",1784308283308],"directory",[19,68],"8dd54f7d-f163-4fe0-9438-b7ba67231955",["D",1784308196053],[19],{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":46,"_47":48,"_49":89,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_86":90,"_18":91},{"_36":79,"_13":80,"_39":81,"_41":-5,"_43":44,"_45":82,"_47":48,"_49":83,"_17":51,"_52":84,"_54":85,"_56":57,"_58":-5,"_86":87,"_18":88},"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",[],[80],["D",1784308196053],[92,93,94],[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":101,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_86":102,"_18":103},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":98,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_86":99,"_18":100},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":95,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_86":96,"_18":97},["D",1784308196053],[],[19,38],["D",1784308283300],[],[19,61],["D",1784308283308],[],[19,68],"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,"_158":154},"org",{"_11":12,"_151":152,"_153":154,"_114":115,"_155":156,"_157":57},"branch",{"_17":70,"_13":16,"_36":44,"_143":104,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":14,"_150":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",{"_36":104,"_13":14,"_49":210,"_106":-5,"_107":57,"_108":109,"_110":109,"_111":112,"_113":-5,"_114":115,"_116":81,"_117":48,"_118":-5,"_119":-5,"_120":51,"_121":122,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_136":211,"_138":212,"_140":213,"_142":57},[195,199],"files",[195,196,197,198,199],"counts",{"_186":51,"_187":82,"_188":51,"_32":189,"_190":191},[180,181,182],{"_36":74,"_43":44,"_39":42,"_13":19,"_54":-5,"_52":72,"_17":51,"_41":-5,"_49":178,"_45":46,"_58":-5,"_18":179},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1784308196053],[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":71,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_18":185},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_18":184},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":183},[19,38],[19,61],[19,68],"pulls","branches","forks",{"_192":51,"_194":51},"connections",{"_192":51,"_193":51},"count","unfilledCount","emptyCount",{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":46,"_47":48,"_49":89,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_86":208,"_18":209},{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":101,"_17":51,"_52":72,"_54":-5,"_56":57,"_58":-5,"_86":206,"_18":207},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":98,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_86":204,"_18":205},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":95,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_86":202,"_18":203},{"_36":79,"_13":80,"_39":81,"_41":-5,"_43":44,"_45":82,"_47":48,"_49":83,"_17":51,"_52":84,"_54":85,"_56":57,"_58":-5,"_86":200,"_18":201},[],[80],[],[19,38],[],[19,61],[],[19,68],[196,197,198],[19],["D",1784308087792],{"_11":12,"_158":154},{"_11":12,"_151":152,"_153":154,"_114":115,"_155":156,"_157":57},{"_17":70,"_13":16,"_36":44,"_143":104,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":14,"_150":12},"ctx",{"_136":-5,"_175":247,"_248":249,"_250":251,"_252":57,"_253":57,"_254":57,"_255":48,"_256":-5,"_257":-7,"_258":-7,"_259":51,"_260":57,"_261":57,"_262":-5,"_263":57,"_264":57,"_265":57,"_266":-5},"ENV",{"_218":219,"_220":221,"_222":16,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246},"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"]