TRMNL Last.fm

\n {{ trmnl.user.first_name }}, welcome to the TRMNL Spotify Plugin!\n

This plugin requires you to connect your Spotify account before usage.

Open the plugin page and click on the Configure Spotify button to begin!

\n Spotify\n Welcome!\n

",[],[274,275,266],"templates","welcome","67e34f16-cc72-11f0-ade5-42dde27851f2","hv.liquid","67e35038-cc72-11f0-ade5-42dde27851f2",38,["D",1764345218960],"

\n {{ trmnl.user.first_name }}, welcome to the TRMNL Spotify Plugin!\n

This plugin requires you to connect your Spotify account before usage.

Open the plugin page and click on the Configure Spotify button to begin!

\n Spotify\n Welcome!\n

",[],[274,275,277],"67b44c3e-cc72-11f0-8d72-42dde27851f2","hh.liquid","67b44d10-cc72-11f0-8d72-42dde27851f2",33,["D",1764345218659],[],[274,275,285],"67a54e82-cc72-11f0-ad23-42dde27851f2","full.liquid","67a54f18-cc72-11f0-ad23-42dde27851f2",31,["D",1764345218566],[],[274,275,292],"66c7c68e-cc72-11f0-9724-42dde27851f2","663f8daa-cc72-11f0-88b9-42dde27851f2",8,["D",1764345217110],[216,217,218,219],[274,275],"67913528-cc72-11f0-88b9-42dde27851f2","679135dc-cc72-11f0-88b9-42dde27851f2","66a52084-cc72-11f0-82b4-42dde27851f2",28,["D",1764345218433],"{% assign top5 = items | slice: 0, 2 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Top Tracks\n

",[],[274,312,266],"top_tracks","679f4d0c-cc72-11f0-9724-42dde27851f2","679f4dfc-cc72-11f0-9724-42dde27851f2",30,["D",1764345218523],"{% assign top5 = items | slice: 0, 5 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Top Tracks\n

",[],[274,312,277],"67952be2-cc72-11f0-bc7f-42dde27851f2","67952c78-cc72-11f0-bc7f-42dde27851f2",29,["D",1764345218459],"{% assign top5 = items | slice: 0, 2 %}\n{% assign top10 = items | slice: 2, 2 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n {% for item in top10 %}\n

\n {{ forloop.index | plus: 2 }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Top Tracks\n

",[],[274,312,285],"67873eec-cc72-11f0-88b9-42dde27851f2","678740d6-cc72-11f0-88b9-42dde27851f2",27,["D",1764345218368],"{% assign top5 = items | slice: 0, 5 %}\n{% assign top10 = items | slice: 5, 5 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n {% for item in top10 %}\n

\n {{ forloop.index | plus: 5 }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Top Tracks\n

",[],[274,312,292],"66a51f94-cc72-11f0-82b4-42dde27851f2",7,["D",1764345216887],[211,212,213,214],[274,312],"67d32d5c-cc72-11f0-9cb6-42dde27851f2","shared.liquid","67d32e06-cc72-11f0-9cb6-42dde27851f2","66ec5b5c-cc72-11f0-88b9-42dde27851f2",36,["D",1764345218865],"",[],[274,348,340],"top_artists","67c9f4f8-cc72-11f0-a04a-42dde27851f2","67c9f58e-cc72-11f0-a04a-42dde27851f2",35,["D",1764345218805],"

\n {% assign artists = items | slice: 0, 2 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n

\n Spotify\n Top Artists\n

",[],[274,348,266],"67e96c66-cc72-11f0-9641-42dde27851f2","67e96d2e-cc72-11f0-9641-42dde27851f2",39,["D",1764345219012],"

\n {% assign artists = items | slice: 0, 2 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n {% assign artists = items | slice: 2, 2 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n

\n Spotify\n Top Artists\n

",[],[274,348,277],"67df672a-cc72-11f0-b3eb-42dde27851f2","67df682e-cc72-11f0-b3eb-42dde27851f2",37,["D",1764345218945],"

\n {% assign artists = items | slice: 0, 4 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n

\n Spotify\n Top Artists\n

",[],[274,348,285],"67c5efc0-cc72-11f0-ab59-42dde27851f2","67c5f04c-cc72-11f0-ab59-42dde27851f2",34,["D",1764345218777],"\n

\n {% assign artists = items | slice: 0, 4 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n {% assign artists = items | slice: 4, 4 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n

\n Spotify\n Top Artists\n

",[],[274,348,292],"66ec5aa8-cc72-11f0-88b9-42dde27851f2",9,["D",1764345217352],[205,206,207,208,209],[274,348],"67737074-cc72-11f0-bee9-42dde27851f2","67737150-cc72-11f0-bee9-42dde27851f2","6684f8cc-cc72-11f0-9724-42dde27851f2",24,["D",1764345218237],"{% assign top2 = items | slice: 0, 2 %}\n

\n {% for item in top2 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {{ item.track.name }}\n {{ item.track.album.name }}\n {%liquid\n # convert UTC date to UTC-3\n assign playedAt = item.played_at | date: \"%s\" | plus: trmnl.user.utc_offset | date: \"%b %e, %H:%M\"\n %}\n {{ playedAt }}\n

\n {% for artist in item.track.artists %}\n {{ artist.name }}\n {% endfor %}\n {%liquid\n # transform duration in milliseconds to mm:ss\n assign duration = item.track.duration_ms | divided_by: 1000.0 | divided_by: 60.0\n assign mins = duration | floor\n assign secs = duration | minus: mins | times: 60 | round: 0\n \n # transform to 2 digits (left pad with 0)\n assign mins = mins | prepend: '00' | slice: -2, 2\n assign secs = secs | prepend: '00' | slice: -2, 2\n %}\n

\n {% endfor %}\n

\n Spotify\n Recent Tracks\n

",[],[274,390,266],"recent_tracks","677cb634-cc72-11f0-9641-42dde27851f2","677cb724-cc72-11f0-9641-42dde27851f2",26,["D",1764345218300],"{% assign top5 = items | slice: 0, 5 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {% endfor %}\n

\n Spotify\n Recent Tracks\n

",[],[274,390,277],"67793554-cc72-11f0-ad23-42dde27851f2","67793770-cc72-11f0-ad23-42dde27851f2",25,["D",1764345218240],"{% assign top2 = items | slice: 0, 2 %}\n{% assign top4 = items | slice: 2, 2 %}\n

\n {% for item in top2 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {% endfor %}\n

\n {% for item in top4 %}\n

\n {{ forloop.index | plus: 2 }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {% endfor %}\n

\n Spotify\n Recent Tracks\n

",[],[274,390,285],"676b4ade-cc72-11f0-bc7f-42dde27851f2","676b4b92-cc72-11f0-bc7f-42dde27851f2",23,["D",1764345218136],"{% assign top5 = items | slice: 0, 5 %}\n{% assign top10 = items | slice: 5, 5 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {{ item.track.name }}\n {{ item.track.album.name }}\n {%liquid\n # convert UTC date to UTC-3\n assign playedAt = item.played_at | date: \"%s\" | minus: 10800 | date: \"%b %e, %H:%M\"\n %}\n {{ playedAt }}\n

\n {% for artist in item.track.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n {% for item in top10 %}\n

\n {{ forloop.index | plus: 5 }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {% for artist in item.track.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Recent Tracks\n

",[],[274,390,292],"6684f7e6-cc72-11f0-9724-42dde27851f2",6,["D",1764345216674],[200,201,202,203],[274,390],"663f8d0a-cc72-11f0-88b9-42dde27851f2",["D",1764345216220],[199,204,210,215],[274],"837a4c60-cc87-11f0-b03c-42dde27851f2","uninstall.ts","680b3eae-cc72-11f0-b74c-42dde27851f2","66616006-cc72-11f0-9641-42dde27851f2",68,["D",1764354284688],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\n\nexport async function uninstall(c: Context) {\n // extract uuid from request\n const data = await c.req.json();\n const uuid = data.user_uuid;\n\n // update database (soft delete)\n const sql =\n \"update lastfm_installations set active = 0, updated_at = CURRENT_TIMESTAMP, uninstalled_at = CURRENT_TIMESTAMP where uuid = :uuid\";\n\n await sqlite.execute({\n sql: sql,\n args: {\n uuid: uuid,\n },\n });\n\n return c.text(\"Uninstalled\");\n}",[],[430,422],"routes","f588bada-cc91-11f0-8208-42dde27851f2","settings.ts","68035e0a-cc72-11f0-b3eb-42dde27851f2",76,["D",1764358771012],"import { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nimport process from \"node:process\";\n\nconst LASTFM_CLIENT_ID = process.env.LASTFM_CLIENT_ID;\n\nexport async function settings(c: Context) {\n // extract uuid from request\n const uuid = c.req.query(\"uuid\");\n\n if (uuid === null || uuid === undefined) {\n c.status(400);\n return c.text(\"Missing 'uuid' query parameter\");\n }\n\n // get lastfm connection status, plugin setting id and preferences\n const result = await sqlite.execute({\n sql:\n \"select first_name, lastfm_connected, plugin_setting_id, preferences from lastfm_installations where uuid = :uuid\",\n args: {\n uuid: uuid,\n },\n });\n\n const firstName = result.rows[0][0];\n const lastfmConnected = result.rows[0][1];\n const pluginId = result.rows[0][2];\n const preferences = JSON.parse(result.rows[0][3]);\n\n // prepare index.html file\n let html = await readFile(\"/frontend/settings.html\");\n\n // inject the initial data as a global variable inside a script tag\n const dataScript = ``;\n\n // insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n}",[],[430,432],"6813e43c-cc72-11f0-b74c-42dde27851f2","preferences.ts","6813e52c-cc72-11f0-b74c-42dde27851f2",45,["D",1764345219280],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nexport async function savePreferences(c: Context) {\n const body = await c.req.json();\n\n // save to database\n await sqlite.execute({\n sql:\n \"update installations set preferences = :preferences where uuid = :uuid\",\n args: {\n uuid: body.uuid,\n preferences: JSON.stringify(body.prefs),\n },\n });\n\n return c.text(\"ok\");\n}",[],[430,440],"681088d2-cc72-11f0-b656-42dde27851f2","markup.ts","68108986-cc72-11f0-b656-42dde27851f2",44,["D",1764345219236],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nimport qs from \"npm:qs@6.14.0\";\nimport {\n getRecentTracks,\n getTopArtists,\n getTopTracks,\n refreshToken,\n} from \"../utils/spotifyService.ts\";\nimport { render } from \"../utils/renderer.ts\";\n\nexport async function markup(c: Context) {\n const body = qs.parse(await c.req.text());\n const uuid = body.user_uuid;\n\n // grab installation and tokens from database\n const sql =\n \"SELECT i.spotify_connected, i.preferences, t.access_token, t.refresh_token, t.expires_at FROM installations i, tokens t WHERE i.uuid = :uuid AND t.uuid = :uuid\";\n const result = await sqlite.execute({\n sql: sql,\n args: {\n uuid: uuid as string,\n },\n });\n\n // if spotify is not yet connected, render welcome instructions\n if (result.rows.length === 0 || result.rows[0][0] === 0) {\n const rendered = await render(\"welcome\", { trmnl: body.trmnl });\n return c.json(rendered);\n }\n\n // check if spotify token is still valid\n const expiresAt = result.rows[0][4];\n const now = Math.floor(Date.now() / 1000);\n\n let accessToken = result.rows[0][2];\n if (now > expiresAt) {\n accessToken = await refreshToken(result.rows[0][0], result.rows[0][3]);\n }\n\n // get user preferences\n const prefs = JSON.parse(result.rows[0][1]);\n\n let rendered;\n switch (prefs.displayType) {\n case \"top_artists\": {\n const artists = await getTopArtists(accessToken, prefs.timeRange, 10);\n rendered = await render(\"top_artists\", { ...artists, trmnl: body.trmnl });\n break;\n }\n case \"top_tracks\": {\n const tracks = await getTopTracks(accessToken, prefs.timeRange, 10);\n rendered = await render(\"top_tracks\", { ...tracks, trmnl: body.trmnl });\n break;\n }\n default: {\n const tracks = await getRecentTracks(accessToken, 10);\n rendered = await render(\"recent_tracks\", {\n ...tracks,\n trmnl: body.trmnl,\n });\n }\n }\n\n return c.json(rendered);\n}",[],[430,448],"b6e55e34-cc99-11f0-b1aa-42dde27851f2","lastfmCallback.ts","67f08550-cc72-11f0-980e-42dde27851f2",97,["D",1764362101889],12,"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nimport process from \"node:process\";\nimport * as crypto from \"node:crypto\";\n\nconst LASTFM_CLIENT_ID = process.env.LASTFM_CLIENT_ID;\nconst LASTFM_CLIENT_SECRET = process.env.LASTFM_CLIENT_SECRET;\n\nexport async function lastfmCallback(c: Context) {\n // get token and state from request\n const token = c.req.query(\"token\");\n const state = c.req.query(\"state\");\n\n const params =\n `api_key${LASTFM_CLIENT_ID}methodauth.getSessiontoken${token}${LASTFM_CLIENT_SECRET}`;\n const signature = crypto.createHash(\"md5\").update(params).digest(\"hex\");\n\n // prepare query params\n const body = new URLSearchParams();\n body.append(\"method\", \"auth.getSession\");\n body.append(\"api_key\", LASTFM_CLIENT_ID);\n body.append(\"token\", token);\n body.append(\"format\", \"json\");\n body.append(\"api_sig\", signature);\n\n // request session\n const response = await fetch(\n `https://ws.audioscrobbler.com/2.0?${body.toString()}`,\n );\n const data = await response.json();\n console.log(data);\n\n // update installation to set lastfm as active and session key\n await sqlite.execute({\n sql:\n \"update lastfm_installations set lastfm_connected = 1, lastfm_session = :lastfm_session where uuid = :uuid\",\n args: {\n lastfm_session: data.session.key,\n uuid: state,\n },\n });\n\n // redirect back to settings page\n return c.redirect(`/trmnl/settings?uuid=${state}`);\n}",[],[430,456],"72aa4098-cc91-11f0-ba22-42dde27851f2","install.ts","67f4ae50-cc72-11f0-b74c-42dde27851f2",75,["D",1764358551450],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nimport process from \"node:process\";\n\nexport async function install(c: Context) {\n // read env vars\n const TRMNL_CLIENT_ID = process.env.TRMNL_CLIENT_ID;\n const TRMNL_CLIENT_SECRET = process.env.TRMNL_CLIENT_SECRET;\n\n // read query params\n const code = c.req.query(\"code\");\n const callbackUrl = c.req.query(\"installation_callback_url\");\n\n // prepare TRMNL payload\n const payload = {\n code: code,\n client_id: TRMNL_CLIENT_ID,\n client_secret: TRMNL_CLIENT_SECRET,\n grant_type: \"authorization_code\",\n };\n\n // get access token from TRMNL\n const resp = await fetch(\"https://usetrmnl.com/oauth/token\", {\n method: \"post\",\n headers: {\n \"content-type\": \"application/json\",\n },\n body: JSON.stringify(payload),\n });\n\n if (!resp.ok) {\n const data = await resp.text();\n console.error(`Error ${resp.status}: ${data}`);\n c.status(500);\n return c.text(\"Error trying to get access token from TRMNL!\");\n }\n\n // success redirect back to TRMNL's callback url\n return c.redirect(callbackUrl);\n}\n\nexport async function postInstall(c: Context) {\n const authHeader = c.req.header(\"Authorization\");\n const accessToken = authHeader.split(\" \")[1];\n\n const body = await c.req.json();\n const user = body.user;\n\n // insert installation\n const sql =\n \"insert into lastfm_installations(uuid, active, lastfm_connected, name, first_name, last_name, email, locale, time_zone_iana, plugin_setting_id, trmnl_access_token, preferences) values (:uuid, :active, :lastfm_connected, :name, :first_name, :last_name, :email, :locale, :time_zone_iana, :plugin_setting_id, :trmnl_access_token, :preferences)\";\n\n // insert installation\n await sqlite.execute({\n sql: sql,\n args: {\n uuid: user.uuid,\n active: 1,\n lastfm_connected: 0,\n name: user.name,\n first_name: user.first_name,\n last_name: user.last_name,\n email: user.email,\n locale: user.locale,\n time_zone_iana: user.time_zone_iana,\n plugin_setting_id: user.plugin_setting_id,\n trmnl_access_token: accessToken,\n preferences: JSON.stringify({\n displayType: \"recent_tracks\",\n timeRange: \"short_term\",\n }),\n },\n });\n\n return c.text(\"OK\");\n}",[],[430,465],"70ffdfae-cc92-11f0-a97a-42dde27851f2","index.ts","681b2aa8-cc72-11f0-828d-42dde27851f2",84,["D",1764358978150],"export * from \"./install.ts\";\nexport * from \"./markup.ts\";\nexport * from \"./uninstall.ts\";\nexport * from \"./settings.ts\";\nexport * from \"./lastfmCallback.ts\";\nexport * from \"./preferences.ts\";",[],[430,473],"66615f02-cc72-11f0-9641-42dde27851f2",5,["D",1764345216441],[191,192,193,194,195,196,197],[430],"671c3034-cc72-11f0-88b9-42dde27851f2","trmnl-logo.svg","671c3138-cc72-11f0-88b9-42dde27851f2","65c54d60-cc72-11f0-88b9-42dde27851f2",13,["D",1764345217591],"\n \n \n \n \n \n \n \n",[],[494,486],"frontend","fe6e8ae4-cc87-11f0-8994-42dde27851f2","settings.tsx","673dc640-cc72-11f0-bc7f-42dde27851f2",70,["D",1764354490970],"/** @jsxImportSource https://esm.sh/react@19.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@19.2.0/client\";\nimport { App } from \"./App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ndeclare global {\n interface Window {\n __INITIAL_DATA__: {\n uuid: string;\n firstName: string;\n pluginId: number;\n isConnected: boolean;\n lastfmClientId: string;\n preferences: object;\n };\n }\n}\n\ncreateRoot(root).render();",[],[494,496],"76df3abc-cc85-11f0-b68e-42dde27851f2","settings.html","6732efa4-cc72-11f0-99f5-42dde27851f2",60,["D",1764353404536],"\n\n \n \n \n TRMNL Last.fm\n \n \n \n \n \n \n \n

\n \n \n

Loading...

\n \n \n \n \n \n \n",[],[494,504],"01027f9a-cc83-11f0-891d-42dde27851f2","lastfm-logo.svg","ddc5a034-cc82-11f0-a6b5-42dde27851f2",54,["D",1764352347812],"",[],[494,512],"8c1892b2-cc98-11f0-9649-42dde27851f2","index.html","67144950-cc72-11f0-82b4-42dde27851f2",94,["D",1764361600591],"\n\n \n \n \n TRMNL Last.fm\n \n \n \n \n \n \n \n

\n \n

\n TRMNL Last.fm Plugin\n

\n \n

+

\n Hey, welcome! 👋\n

\n Bring your listening habits to life on your TRMNL! Track what you’ve been listening to, discover\n your top artists and songs, and enjoy a personal snapshot of\n your Last.fm throughout the day.\n

\n \n \n Click to Install this Plugin on TRMNL!\n \n \n

\n Preview\n \n \n \n

\n \n \n \n \n \n",[],[494,520],"6737e676-cc72-11f0-ad23-42dde27851f2","favicon.svg","6737e856-cc72-11f0-ad23-42dde27851f2",16,["D",1764345217849],"",[],[494,528],"674f3196-cc72-11f0-ad23-42dde27851f2","TrmnlSettings.tsx","674f324a-cc72-11f0-ad23-42dde27851f2",19,["D",1764345218002],"/** @jsxImportSource https://esm.sh/react@19.2.0 */\nimport { useState } from \"https://esm.sh/react@19.2.0\";\n\nexport function TrmnlSettings(\n { uuid, firstName, pluginId, preferences }: {\n uuid: string;\n firstName: string;\n pluginId: number;\n preferences: { displayType: string; timeRange: string };\n },\n) {\n const [loading, setLoading] = useState(false);\n const [display, setDisplay] = useState(\n preferences.displayType || \"recent_tracks\",\n );\n const [time, setTime] = useState(preferences.timeRange || \"short_term\");\n const [notification, setNotification] = useState({\n visible: false,\n type: \"success\",\n message: \"\",\n });\n\n const savePrefs = async function () {\n setLoading(true);\n\n const resp = await fetch(\"/api/prefs\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n uuid,\n prefs: {\n displayType: display,\n timeRange: time,\n },\n }),\n });\n\n setLoading(false);\n\n if (resp.status === 200) {\n setNotification({\n visible: true,\n type: \"success\",\n message: \"Preferences saved!\",\n });\n } else {\n setNotification({\n visible: true,\n type: \"danger\",\n message: `Failed to save preferences: ${resp.statusText}`,\n });\n }\n\n setTimeout(\n () => setNotification({ ...notification, visible: false }),\n 5000,\n );\n };\n\n return (\n

\n Hello, {firstName}!\n

\n Use the options below to configure what should be displayed on your TRMNL. Don't forget to hit the Save Preferences button!\n

\n {notification.visible\n ? (\n

{notification.message}

\n )\n : \"\"}\n

\n Display\n

\n \n

\n \n \n \n

\n Choose what Spotify data you want to show on your TRMNL Device\n

\n {display === \"top_artists\" || display === \"top_tracks\"\n ? (\n

\n Time Range\n

\n \n

\n \n \n \n

\n )\n : \"\"}\n

\n \n \n \n \n Save Preferences!\n \n

\n Preview\n \n {display === \"recent_tracks\" && $\"\"$ }\n {display === \"top_artists\" && $\"\"$ }\n {display === \"top_tracks\" && $\"\"$ }\n \n

\n The preview does not use your actual data.\n

\n \n

\n );\n}",[],[494,536],"106d8208-cc93-11f0-8cad-42dde27851f2","ConnectLastfm.tsx","6741b462-cc72-11f0-ad23-42dde27851f2",87,["D",1764359245627],"/** @jsxImportSource https://esm.sh/react@19.2.0 */\n\nexport function ConnectLastfm(\n { uuid, firstName, pluginId, lastfmClientId }: {\n uuid: string;\n firstName: string;\n pluginId: number;\n lastfmClientId: string;\n },\n) {\n return (\n

\n Hello, {firstName}!\n

\n \n

\n Connect Your Last.fm Account\n

\n Connect your Last.fm account to display your music data on your TRMNL\n Device\n

\n {\n globalThis.location.href =\n `http://www.last.fm/api/auth/?api_key=${lastfmClientId}&cb=https://trmnl-lastfm.val.run/lastfm/callback?state=${uuid}`;\n }}\n >\n Connect with Last.fm\n \n

\n You'll be redirected to Last.fm to authorize this connection.\n

\n \n

\n );\n}",[],[494,544],"238f0b32-cc92-11f0-9d8a-42dde27851f2","App.tsx","670c6a50-cc72-11f0-82b4-42dde27851f2",77,["D",1764358848227],"/** @jsxImportSource https://esm.sh/react@19.2.0 */\nimport { ConnectLastfm } from \"./ConnectLastfm.tsx\";\nimport { TrmnlSettings } from \"./TrmnlSettings.tsx\";\n\nexport function App(\n {\n uuid,\n firstName,\n pluginId,\n isConnected = false,\n lastfmClientId,\n preferences,\n }: {\n uuid: string;\n firstName: string;\n pluginId: number;\n isConnected: boolean;\n lastfmClientId: string;\n preferences: object;\n },\n) {\n return (\n

\n \n \n \n \n \n \n \n \n \n \n

\n TRMNL Last.fm Plugin\n

\n {isConnected\n ? (\n \n )\n : (\n \n )}\n

\n \n

\n );\n}",[],[494,552],"65c54c98-cc72-11f0-88b9-42dde27851f2",["D",1764345215398],[181,182,183,184,185,186,187,188,189],[494],["D",1764345373768],[],[18,65],["D",1764345215999],[179],[18],["D",1764345214194],{"_11":12,"_131":70},{"_11":12,"_126":127,"_69":70,"_31":68,"_128":129,"_130":30},{"_40":117,"_13":16,"_34":37,"_118":82,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":14,"_125":12},"ctx",{"_53":-5,"_150":606,"_607":608,"_609":610,"_611":30,"_612":30,"_613":30,"_614":24,"_615":-5,"_616":-7,"_617":-7,"_618":26,"_619":30,"_620":30,"_621":-5,"_622":30,"_623":30,"_624":30,"_625":-5},"ENV",{"_577":578,"_579":580,"_581":16,"_582":583,"_584":585,"_586":587,"_588":589,"_590":591,"_592":593,"_594":595,"_596":597,"_598":599,"_600":601,"_602":603,"_604":605},"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 · docs