[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_193":194,"_195":196},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":122,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",62,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","App.tsx","latestPath","fileId","019d73ca-cbc2-7326-ab6b-004c7e54eb95","name","fileType","script","content","/** @jsxImportSource https://esm.sh/react@19 */\nimport { useMemo, useState } from \"https://esm.sh/react@19\";\n\ntype TrackList = {\n name: string;\n artist: string;\n timestamp: number;\n}[];\n\nexport interface Props {\n url: string | null;\n tracks: TrackList | null;\n start: number | null;\n end: number | null;\n}\n\n/*\nInformation must be strictly in CSV structure, with each row in the format\n\"{artist}\", \"{track}\", \"{album}\", \"{timestamp}\", \"{album artist}\", \"{duration}\"\n(e.g. \"Jeff Buckley\", \"Last Goodbye\", \"Grace\", \"2016-01-26 15:35:55\", \"Jeff Buckley\", \"275\").\nOnly \"artist\" and \"track\" are mandatory. Duration should be in seconds.\nDo not include a header row.\n\nBulk scrobbles will be reverse timestamped according to duration, finishing with\nthe current timestamp. If duration is not specified for a track, 3 minute track\nlength is assumed.\n*/\n\nfunction formatDatetimeInput(timestamp: number) {\n const date = new Date(timestamp);\n date.setMinutes(date.getMinutes() - date.getTimezoneOffset());\n return date.toISOString().slice(0, 16);\n}\n\nconst localeOptions = {\n year: \"numeric\",\n month: \"numeric\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n second: \"numeric\",\n} as const;\nfunction formatDatetimeScrobble(timestamp: number) {\n const date = new Date(timestamp);\n return date.toLocaleString(\"en-US\", localeOptions);\n}\n\nexport default function App(\n props: Props,\n) {\n const { tracks } = props;\n const [url, setUrl] = useState(props.url ?? \"\");\n const [start, setStart] = useState(\n props.start ? props.start : Date.now(),\n );\n const duration = props.end - props.start;\n\n function onStartChange(event) {\n setStart(new Date(event.target.value).getTime());\n }\n\n const scrobbleTracks = useMemo(\n () =>\n tracks.map(({ name, artist, timestamp }, index) => (\n {\n name,\n artist,\n rawTimestamp: timestamp,\n timestamp: start + timestamp,\n timestampStr: formatDatetimeScrobble(start + timestamp),\n duration: (tracks[index + 1]\n ? tracks[index + 1].timestamp - timestamp\n : duration - timestamp) / 1000,\n }\n )),\n [tracks, start],\n );\n\n return (\n

The Lot Radio scrobbler*

\n Convert a set from The Lot Radio into a bulk CSV for Universal Scrobbler\n

\n \n\n {tracks && (\n <>\n \n Started listening\n \n \n \n )}\n\n {duration &&

Total duration: {duration}

}\n {scrobbleTracks && (\n <>\n \n \n \n \n \n \n \n \n \n \n \n {scrobbleTracks.map((\n { name, artist, rawTimestamp, timestampStr, duration },\n ) => (\n \n \n \n \n \n \n \n ))}\n \n

Title	Artist	Raw timestamp	Scrobble timestamp	Duration (s)
{name}	{artist}	{rawTimestamp}	{timestampStr}	{duration}

\n \n \n )}\n

\n );\n}","/** @jsxImportSource https://esm.sh/react@19 */\nimport { useMemo, useState } from \"https://esm.sh/react@19\";\n\ntype TrackList = {\n name: string;\n artist: string;\n timestamp: number;\n}[];\n\nexport interface Props {\n url: string | null;\n tracks: TrackList | null;\n start: number | null;\n end: number | null;\n}\n\n/*\nInformation must be strictly in CSV structure, with each row in the format\n\"{artist}\", \"{track}\", \"{album}\", \"{timestamp}\", \"{album artist}\", \"{duration}\"\n(e.g. \"Jeff Buckley\", \"Last Goodbye\", \"Grace\", \"2016-01-26 15:35:55\", \"Jeff Buckley\", \"275\").\nOnly \"artist\" and \"track\" are mandatory. Duration should be in seconds.\nDo not include a header row.\n\nBulk scrobbles will be reverse timestamped according to duration, finishing with\nthe current timestamp. If duration is not specified for a track, 3 minute track\nlength is assumed.\n*/\n\nfunction formatDatetimeInput(timestamp: number) {\n const date = new Date(timestamp);\n date.setMinutes(date.getMinutes() - date.getTimezoneOffset());\n return date.toISOString().slice(0, 16);\n}\n\nconst localeOptions = {\n year: \"numeric\",\n month: \"numeric\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n second: \"numeric\",\n} as const;\nfunction formatDatetimeScrobble(timestamp: number) {\n const date = new Date(timestamp);\n return date.toISOString().slice(0, 19).replace(\"T\", \" \");\n}\n\nexport default function App(\n props: Props,\n) {\n const { tracks } = props;\n const [url, setUrl] = useState(props.url ?? \"\");\n const [start, setStart] = useState(\n props.start ? props.start : Date.now(),\n );\n const duration = props.end - props.start;\n\n function onStartChange(event) {\n setStart(new Date(event.target.value).getTime());\n }\n\n const scrobbleTracks = useMemo(\n () =>\n tracks.map(({ name, artist, timestamp }, index) => (\n {\n name,\n artist,\n rawTimestamp: timestamp,\n timestamp: start + timestamp,\n timestampStr: formatDatetimeScrobble(start + timestamp),\n duration: (tracks[index + 1]\n ? tracks[index + 1].timestamp - timestamp\n : duration - timestamp) / 1000,\n }\n )),\n [tracks, start],\n );\n\n return (\n

The Lot Radio scrobbler*

\n Convert a set from The Lot Radio into a bulk CSV for Universal Scrobbler\n

\n \n\n {tracks && (\n <>\n \n Started listening\n \n \n \n )}\n\n {duration &&

Total duration: {duration}

}\n {scrobbleTracks && (\n <>\n \n \n \n \n \n \n \n \n \n \n \n {scrobbleTracks.map((\n { name, artist, rawTimestamp, timestampStr, duration },\n ) => (\n \n \n \n \n \n \n \n ))}\n \n

Title	Artist	Raw timestamp	Scrobble timestamp	Duration (s)
{name}	{artist}	{rawTimestamp}	{timestampStr}	{duration}

\n \n \n )}\n

\n );\n}","createdAt",["D",1775847103299],"branchVersion","branchId","3536dea0-344d-11f1-a115-42b51c65c3df","id","352f4bc2-344d-11f1-a115-42b51c65c3df","thelotradio-bulk-scrobble",["D",1775764163401],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","fetch tracklist from The Lot Radio and prepare for scrobbling","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a0afa007-3e32-4914-a751-f7efceecae00/square512?exp=1789595999&sig=fbf7043fe955e2bd2dddf379490f82753b69fa8cf38614bd5c41cffcc02e2209","02256cc0-5186-11f0-9031-197d20872a9b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","f03ddb9f-02a4-4255-85f0-fbe1d9d88fe8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":56,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",94,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","cubeghost","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeXpGa2dycWNTdzBTbHdJWUFKQkRITXVtYnQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":189,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":190,"_80":191,"_82":192,"_84":25},"tree",[172,173,174,175],"files",[172,173,174,175],"counts",{"_162":62,"_163":154,"_164":62,"_165":166,"_167":168},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":158,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_136":25,"_38":159,"_13":160,"_33":34,"_35":37,"_24":25,"_141":-5,"_27":161},{"_43":151,"_32":152,"_30":153,"_134":-5,"_41":42,"_40":154,"_136":25,"_38":155,"_13":62,"_33":20,"_35":156,"_24":25,"_141":-5,"_27":157},{"_43":143,"_32":144,"_30":145,"_134":-5,"_41":42,"_40":146,"_136":122,"_38":147,"_13":148,"_33":34,"_35":149,"_24":25,"_141":-5,"_27":150},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":137,"_13":138,"_33":139,"_35":140,"_24":25,"_141":-5,"_27":142},"1b3404f4-3508-11f1-8dfe-42b51c65c3df","http.tsx","019d73ca-cbc2-7326-ab6b-0dd9c4951b22","parentId",36,"latest",["D",1775844435746],24,"http","/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { renderToString } from \"https://esm.sh/react-dom@19/server\";\nimport serialize from \"npm:serialize-javascript@7\";\nimport { JSDOM } from \"npm:jsdom@29\";\n\nimport App from \"./App.tsx\";\n\nconst CLIENT_MODULE = import.meta.url.replace(\"http.tsx\", \"client.tsx\");\n\nasync function maybeUrl(req: Request): Promise {\n try {\n const data = await req.formData();\n return (data.get(\"url\") as string) ?? null;\n } catch (err) {\n return null;\n }\n}\n\nasync function getTracklistInfo(url: string) {\n const response = await fetch(url);\n const html = await response.text();\n\n const doc = new JSDOM(html);\n const scriptTag = doc.window.document.evaluate(\n `//script[contains(text(), '\\\\\"tracks\\\\\":')]`,\n doc.window.document,\n null,\n doc.window.XPathResult.FIRST_ORDERED_NODE_TYPE,\n null,\n );\n const scriptStr = scriptTag.singleNodeValue?.innerHTML;\n\n const treeStr = scriptStr\n .replace(/^self\\.__next_f\\.push\$\\[\\d+,\"\\d+:/, \"\") // start\n .replace(/\\\\n\"\\]\$$/, \"\") // end\n .replace(/\\\\\"/g, '\"'); // unescape quotes\n\n const tree = JSON.parse(treeStr);\n const props = findTracklistProps(tree);\n\n return {\n start: props.start,\n end: props.end,\n tracks: props.tracks,\n };\n}\n\nfunction findTracklistProps(element) {\n if (!element) return;\n if (element[0] === \"$\") {\n const props = element[3];\n if (!props) return;\n\n if (\"tracks\" in props && \"start\" in props && \"end\" in props) {\n return props;\n } else if (\"children\" in props) {\n for (const child of props.children) {\n const childProps = findTracklistProps(child);\n if (childProps) return childProps;\n }\n }\n }\n}\n\nexport default async function (req: Request): Promise {\n const url = await maybeUrl(req);\n const info = url ? await getTracklistInfo(url) : null;\n\n const app = renderToString(\n ,\n );\n const html = `\n \n \n The Lot Radio scrobbler*\n \n \n

${app}

\n \n \n \n \n `;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}","label",[132],"31cfa330-3508-11f1-9495-42b51c65c3df","client.tsx","019d73ca-cbc2-7326-ab6b-0b397503cc78",38,["D",1775844473679],4,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { hydrateRoot } from \"https://esm.sh/react-dom@19/client\";\nimport App from \"./App.tsx\";\nimport type { Props } from \"./App.tsx\";\n\nconst div = document.getElementById(\"app\");\nconst { url, tracks, start, end } = window.__PRELOADED_STATE__ as Props;\nhydrateRoot(div, );",[144],"353aca10-344d-11f1-a115-42b51c65c3df","README.md","019d73ca-cbc2-7326-ab6b-063f397722fd",1,["D",1775764163401],"# React Starter\n\nMinimal React SSR example for Val Town\n[View Demo](https://jxnblk--122089bc0b3011f09093569c3dd06744.web.val.run/)\n\nRemix this project to start building your own React app\n\n## How it works\n\nThe `http.tsx` file is the main entry point and serves the app.\nIt renders the `App` component on the server and wraps it in an HTML response.\nThis HTML response includes a `

Diff · v62