TRMNL Spotify

\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

",[],[152,263,255],"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

",[],[152,263,265],"67b44c3e-cc72-11f0-8d72-42dde27851f2","hh.liquid","67b44d10-cc72-11f0-8d72-42dde27851f2",33,["D",1764345218659],[],[152,263,273],"67a54e82-cc72-11f0-ad23-42dde27851f2","full.liquid","67a54f18-cc72-11f0-ad23-42dde27851f2",31,["D",1764345218566],[],[152,263,280],"66c7c68e-cc72-11f0-9724-42dde27851f2",8,["D",1764345217110],[223,224,225,226],[152,263],"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

",[],[152,299,255],"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

",[],[152,299,265],"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

",[],[152,299,273],"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

",[],[152,299,280],"66a51f94-cc72-11f0-82b4-42dde27851f2",7,["D",1764345216887],[218,219,220,221],[152,299],"67d32d5c-cc72-11f0-9cb6-42dde27851f2","shared.liquid","67d32e06-cc72-11f0-9cb6-42dde27851f2","66ec5b5c-cc72-11f0-88b9-42dde27851f2",36,["D",1764345218865],"",[],[152,335,327],"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

",[],[152,335,255],"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

",[],[152,335,265],"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

",[],[152,335,273],"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

",[],[152,335,280],"66ec5aa8-cc72-11f0-88b9-42dde27851f2",9,["D",1764345217352],[212,213,214,215,216],[152,335],"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

",[],[152,377,255],"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

",[],[152,377,265],"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

",[],[152,377,273],"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

",[],[152,377,280],"6684f7e6-cc72-11f0-9724-42dde27851f2",6,["D",1764345216674],[207,208,209,210],[152,377],["D",1764345216220],[206,211,217,222],[152],"680b3c6a-cc72-11f0-b74c-42dde27851f2","uninstall.ts","680b3eae-cc72-11f0-b74c-42dde27851f2",43,["D",1764345219235],"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 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}",[],[158,408],"67f08492-cc72-11f0-980e-42dde27851f2","spotifyCallback.ts","67f08550-cc72-11f0-980e-42dde27851f2",40,["D",1764345219027],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Buffer } from \"node:buffer\";\nimport { Context } from \"npm:hono@4\";\nimport process from \"node:process\";\n\nconst SPOTIFY_CLIENT_ID = process.env.SPOTIFY_CLIENT_ID;\nconst SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET;\n\nexport async function spotifyCallback(c: Context) {\n // get code and state from request\n const code = c.req.query(\"code\");\n const state = c.req.query(\"state\");\n\n // prepare form data\n const body = new URLSearchParams();\n body.append(\"code\", code);\n body.append(\"grant_type\", \"authorization_code\");\n body.append(\"redirect_uri\", \"https://trmnl-spotify.val.run/spotify/callback\");\n\n // auth header\n const authHeader = Buffer.from(\n `${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`,\n ).toString(\"base64\");\n\n // request access token\n const response = await fetch(\"https://accounts.spotify.com/api/token\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n Authorization: `Basic ${authHeader}`,\n },\n body: body.toString(),\n });\n\n const data = await response.json();\n\n // calculate token expiration time\n const now = Math.floor(Date.now() / 1000);\n const expiresAt = now + data.expires_in;\n\n // update installation to set spotify as active\n await sqlite.execute({\n sql: \"update installations set spotify_connected = 1 where uuid = :uuid\",\n args: {\n uuid: state,\n },\n });\n\n // insert tokens in database\n await sqlite.execute({\n sql:\n \"insert into tokens (uuid, access_token, refresh_token, expires_at) values (:uuid, :access_token, :refresh_token, :expires_at) on conflict (uuid) do update set access_token = excluded.access_token, refresh_token = excluded.refresh_token, expires_at = excluded.expires_at\",\n args: {\n uuid: state,\n access_token: data.access_token,\n refresh_token: data.refresh_token,\n expires_at: expiresAt,\n },\n });\n\n // redirect back to settings page\n return c.redirect(`/trmnl/settings?uuid=${state}`);\n}",[],[158,416],"68035d42-cc72-11f0-b3eb-42dde27851f2","settings.ts","68035e0a-cc72-11f0-b3eb-42dde27851f2",42,["D",1764345219181],"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 SPOTIFY_CLIENT_ID = process.env.SPOTIFY_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 spotify connection status, plugin setting id and preferences\n const result = await sqlite.execute({\n sql:\n \"select first_name, spotify_connected, plugin_setting_id, preferences from installations where uuid = :uuid\",\n args: {\n uuid: uuid,\n },\n });\n\n const firstName = result.rows[0][0];\n const spotifyConnected = 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}",[],[158,424],"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}",[],[158,432],"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}",[],[158,440],"67f4adb0-cc72-11f0-b74c-42dde27851f2","install.ts","67f4ae50-cc72-11f0-b74c-42dde27851f2",41,["D",1764345219083],"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 //uuid\tactive\tspotify_connected\tname\tfirst_name\tlast_name\temail\tlocale\ttime_zone_iana\tplugin_setting_id\ttrmnl_access_token\tpreferences\tuninstalled_at\tcreated_at\tupdated_at\n const sql =\n \"insert into installations(uuid, active, spotify_connected, name, first_name, last_name, email, locale, time_zone_iana, plugin_setting_id, trmnl_access_token, preferences) values (:uuid, :active, :spotify_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 spotify_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}",[],[158,448],"681b29ea-cc72-11f0-828d-42dde27851f2","index.ts","681b2aa8-cc72-11f0-828d-42dde27851f2",46,["D",1764345219337],"export * from \"./install.ts\";\nexport * from \"./markup.ts\";\nexport * from \"./uninstall.ts\";\nexport * from \"./settings.ts\";\nexport * from \"./spotifyCallback.ts\";\nexport * from \"./preferences.ts\";",[],[158,456],["D",1764345216441],[198,199,200,201,202,203,204],[158],"671c3034-cc72-11f0-88b9-42dde27851f2","trmnl-logo.svg","671c3138-cc72-11f0-88b9-42dde27851f2",13,["D",1764345217591],"\n \n \n \n \n \n \n \n",[],[164,467],"672f18de-cc72-11f0-82b4-42dde27851f2","spotify-logo.svg","672f19a6-cc72-11f0-82b4-42dde27851f2",14,["D",1764345217790],"\n",[],[164,475],"673dc5a0-cc72-11f0-bc7f-42dde27851f2","settings.tsx","673dc640-cc72-11f0-bc7f-42dde27851f2",17,["D",1764345217852],"/** @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 spotifyClientId: string;\n preferences: object;\n };\n }\n}\n\ncreateRoot(root).render();",[],[164,483],"6732eebe-cc72-11f0-99f5-42dde27851f2","settings.html","6732efa4-cc72-11f0-99f5-42dde27851f2",15,["D",1764345217804],"\n\n \n \n \n TRMNL Spotify\n \n \n \n \n \n \n \n

Loading...

\n \n \n \n \n",[],[164,491],"ddc59f80-cc82-11f0-a6b5-42dde27851f2",["D",1764352288696],[],[164,33],"170f5db8-cc82-11f0-9620-42dde27851f2","index.html","67144950-cc72-11f0-82b4-42dde27851f2",49,["D",1764351955309],"\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",[],[164,503],"6737e676-cc72-11f0-ad23-42dde27851f2","favicon.svg","6737e856-cc72-11f0-ad23-42dde27851f2",16,["D",1764345217849],"",[],[164,511],"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}",[],[164,519],"6741b3c2-cc72-11f0-ad23-42dde27851f2","ConnectSpotify.tsx","6741b462-cc72-11f0-ad23-42dde27851f2",18,["D",1764345217899],"/** @jsxImportSource https://esm.sh/react@19.2.0 */\n\nexport function ConnectSpotify(\n { uuid, firstName, pluginId, spotifyClientId }: {\n uuid: string;\n firstName: string;\n pluginId: number;\n spotifyClientId: string;\n },\n) {\n return (\n

\n Hello, {firstName}!\n

\n \n

\n Connect Your Spotify Account\n

\n Connect your Spotify account to display your music data on your TRMNL\n Device\n

\n {\n const data = {\n response_type: \"code\",\n client_id: spotifyClientId,\n scope: \"user-top-read user-read-recently-played\",\n redirect_uri: \"https://trmnl-spotify.val.run/spotify/callback\",\n state: uuid.toString(),\n };\n const params = new URLSearchParams(data);\n const url =\n `https://accounts.spotify.com/authorize?${params.toString()}`;\n globalThis.location.href = url;\n }}\n >\n Connect with Spotify\n \n

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

\n \n

\n );\n}",[],[164,527],"670c6960-cc72-11f0-82b4-42dde27851f2","App.tsx","670c6a50-cc72-11f0-82b4-42dde27851f2",10,["D",1764345217563],"/** @jsxImportSource https://esm.sh/react@19.2.0 */\nimport { ConnectSpotify } from \"./ConnectSpotify.tsx\";\nimport { TrmnlSettings } from \"./TrmnlSettings.tsx\";\n\nexport function App(\n {\n uuid,\n firstName,\n pluginId,\n isConnected = false,\n spotifyClientId,\n preferences,\n }: {\n uuid: string;\n firstName: string;\n pluginId: number;\n isConnected: boolean;\n spotifyClientId: string;\n preferences: object;\n },\n) {\n return (\n

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

\n TRMNL Spotify Plugin\n

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

\n \n

\n );\n}",[],[164,535],["D",1764345215398],[187,188,189,190,191,192,193,194,195,196],[164],"c427a588-cc72-11f0-96e3-42dde27851f2","dbqueries.md","6763721e-cc72-11f0-980e-42dde27851f2",48,["D",1764345373768],"# Database Queries\n\n## Create Installations Database\n\n```js\napp.get(\"/db/create\", async (c) => {\n await sqlite.execute(`create table if not exists lastfm_installations (\n uuid varchar(255) PRIMARY KEY not null,\n active boolean not null default 0,\n lastfm_connected boolean not null default 0,\n name varchar(255) null,\n first_name varchar(255) null,\n last_name varchar(255) null,\n email varchar(255) null,\n locale varchar(255) null,\n time_zone_iana varchar(255) null,\n plugin_setting_id INTEGER null,\n trmnl_access_token varchar(255) null,\n lastfm_session varchar(255) null,\n preferences text not null,\n uninstalled_at datetime null,\n created_at datetime not null default CURRENT_TIMESTAMP,\n updated_at datetime not null default CURRENT_TIMESTAMP\n)`);\n\n return c.text(\"ok\");\n});\n```",[],[169,546],["D",1764345215999],[185],[169],["D",1764345214194],{"_97":96,"_105":101},{"_97":96,"_98":99,"_100":101,"_18":55,"_102":103,"_104":24},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_124":593,"_594":595,"_596":597,"_598":24,"_599":24,"_600":24,"_601":59,"_602":-5,"_603":-7,"_604":-7,"_605":63,"_606":24,"_607":24,"_608":-5,"_609":24,"_610":24,"_611":24,"_612":-5},"ENV",{"_564":565,"_566":567,"_568":87,"_569":570,"_571":572,"_573":574,"_575":576,"_577":578,"_579":580,"_581":582,"_583":584,"_585":586,"_587":588,"_589":590,"_591":592},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Diff · v50