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":16,"_17":18,"_38":-7,"_122":-5,"_19":123,"_124":125,"_126":127,"_128":129,"_130":131,"_21":132,"_133":-5,"_134":-5,"_135":24,"_136":137,"_138":84,"_139":-5,"_140":-5,"_141":142},"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":24,"_30":-5},"handle","rizmafarhanas","name","youtube-music","branchName","main","path","frontend/index.html","project",{"_32":71,"_13":14,"_36":72,"_73":-5,"_74":24,"_75":76,"_77":76,"_78":79,"_80":-5,"_30":67,"_81":82,"_83":84,"_85":-5,"_86":-5,"_87":26,"_40":41,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":93,"_94":93,"_95":96,"_97":96,"_98":96,"_99":93,"_100":93,"_52":101,"_102":103,"_104":105,"_106":24},"file",{"_62":63,"_13":64,"_65":21,"_66":24,"_70":-5},"isDirectory",false,"page",0,"history",[31],"hasNext","userId",{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":-5,"_52":53,"_21":54,"_55":-5,"_56":-5,"_57":-5,"_58":-5,"_59":60},"id","b890ca38-f5a5-4702-8a72-a51cfdb94c6a","branchId","f2813241-0875-46ef-9685-90a2159f6bfd","createdAt",["D",1784308283300],"version",3,"orgId","019f70ed-cc64-70ba-bd3d-918542477ad7","parentId","bec81746-8271-4f43-8ae8-f9e2a835260c","incomingCommitId","aiChatMessageId","f8890629-bbb2-4d50-8b2f-7c1d0d9a24cb","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle","source","clientLabel","user",{"_32":67,"_40":41,"_11":12,"_68":69},{"_62":63,"_13":64,"_65":21,"_66":24},"pull","merge","revert","multiple","commits",[61],{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":-5,"_52":53,"_21":54,"_55":-5,"_56":-5,"_57":-5},"fileId","8978a39c-8202-11f1-8ab1-1607ee4eb77e","index.html","fileType","deleted","7c1318b7-a61a-42ba-b56d-1c91b3511153","avatar","https://lh3.googleusercontent.com/a/ACg8ocLod4s2OWCSx1qq0JGisFRzjNW2gIoJezW0PrVZLhOqA_fbT3g=s96-c","deletedAtVersion","53f93f50-e629-4832-a738-343473715055",["D",1784308087792],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Modern YouTube music app with search, playback & saved library","imageUrl","pinnedFileId","1c5d721a-8202-11f1-90e1-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_121":69},"org",{"_11":12,"_116":117,"_68":69,"_30":67,"_118":119,"_120":24},"branch",{"_38":107,"_13":16,"_32":35,"_108":71,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":14,"_115":12},"isOwned",4,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Rizma Farhana S","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":71,"_13":14,"_36":200,"_73":-5,"_74":24,"_75":76,"_77":76,"_78":79,"_80":-5,"_30":67,"_81":82,"_83":84,"_85":-5,"_86":-5,"_87":26,"_40":41,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":93,"_94":93,"_95":96,"_97":96,"_98":96,"_99":93,"_100":93,"_52":201,"_102":202,"_104":203,"_106":24},"tree",[164,168],"files",[164,165,166,167,168],"counts",{"_153":26,"_154":155,"_156":26,"_157":158,"_159":160},"contents",[],{"_32":143,"_13":64,"_62":63,"_42":144,"_34":35,"_145":39,"_146":84,"_36":147,"_38":26,"_65":21,"_148":149,"_66":24,"_150":-5,"_17":151},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},"48ab227d-cd0f-441d-8ac2-8d97157c2c35","ce0054b4-c798-4628-99b0-711bfeab630e","branchVersion","latest",["D",1784308283300],"content","\n\n \n \n \n Music — YouTube Player & Library\n \n \" type=\"image/svg+xml\">\n \n \n

\n \n \n \n\n","label",[152,64],"frontend","pulls","branches",1,"forks","envVars",{"_161":26,"_163":26},"connections",{"_161":26,"_162":26},"count","unfilledCount","emptyCount",{"_32":196,"_13":152,"_62":144,"_42":-5,"_34":35,"_145":180,"_146":84,"_36":197,"_38":26,"_65":193,"_148":-5,"_66":24,"_150":-5,"_174":198,"_17":199},{"_32":189,"_13":190,"_62":191,"_42":144,"_34":35,"_145":107,"_146":84,"_36":192,"_38":26,"_65":193,"_148":-5,"_66":24,"_150":-5,"_174":194,"_17":195},{"_32":143,"_13":64,"_62":63,"_42":144,"_34":35,"_145":39,"_146":84,"_36":186,"_38":26,"_65":21,"_148":149,"_66":24,"_150":-5,"_174":187,"_17":188},{"_32":177,"_13":178,"_62":179,"_42":144,"_34":35,"_145":180,"_146":84,"_36":181,"_38":26,"_65":182,"_148":183,"_66":24,"_150":-5,"_174":184,"_17":185},{"_32":169,"_13":170,"_62":82,"_42":-5,"_34":35,"_145":155,"_146":84,"_36":171,"_38":26,"_65":172,"_148":173,"_66":24,"_150":-5,"_174":175,"_17":176},"395821ea-608c-4710-bc97-4cfb5fcf8419","index.ts",["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",[],[170],"95495a36-6e62-4912-8a48-f767b303e3d3","index.tsx","55791928-8202-11f1-959b-1607ee4eb77e",2,["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",[],[152,178],["D",1784308283300],[],[152,64],"c1dc70bd-a0df-40c3-ab99-f1f970f4eb1c","components","8980264e-8202-11f1-a883-1607ee4eb77e",["D",1784308283308],"directory",[],[152,190],"8dd54f7d-f163-4fe0-9438-b7ba67231955",["D",1784308196053],[165,166,167],[152],["D",1784308087792],{"_11":12,"_121":69},{"_11":12,"_116":117,"_68":69,"_30":67,"_118":119,"_120":24},{"_38":107,"_13":16,"_32":35,"_108":71,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":14,"_115":12},"ctx",{"_52":-5,"_140":237,"_238":239,"_240":241,"_242":24,"_243":24,"_244":24,"_245":84,"_246":-5,"_247":-7,"_248":-7,"_249":26,"_250":24,"_251":24,"_252":-5,"_253":24,"_254":24,"_255":24,"_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","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History · index.html