TRMNL Spotify

\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}",[],[186,193],{"_103":203,"_96":204,"_157":205,"_159":187,"_160":142,"_161":206,"_163":118,"_105":207,"_100":208,"_165":198,"_167":209,"_168":22,"_169":-5,"_170":210,"_99":211},"38cecaee-c8ca-11f0-a16b-42dde27851f2","ConnectSpotify.tsx","34570bb0-c745-11f0-bd93-42dde27851f2",734,["D",1763943131036],15,"/** @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}",[],[186,204],{"_103":213,"_96":214,"_157":215,"_159":187,"_160":142,"_161":216,"_163":118,"_105":217,"_100":218,"_165":198,"_167":219,"_168":22,"_169":-5,"_170":220,"_99":221},"6faf182e-c8d0-11f0-b533-42dde27851f2","TrmnlSettings.tsx","b74d415e-c74c-11f0-a7af-42dde27851f2",741,["D",1763945800091],108,"/** @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}",[],[186,214],{"_103":223,"_96":224,"_157":225,"_159":187,"_160":142,"_161":226,"_163":118,"_105":227,"_100":228,"_165":179,"_167":229,"_168":22,"_169":-5,"_170":230,"_99":231},"a86cc308-c760-11f0-8d4e-42dde27851f2","favicon.svg","9e718596-c760-11f0-8dc2-42dde27851f2",340,["D",1763787840480],3,"",[],[186,224],{"_103":233,"_96":234,"_157":235,"_159":187,"_160":142,"_161":236,"_163":118,"_105":237,"_100":238,"_165":179,"_167":239,"_168":22,"_169":-5,"_170":240,"_99":241},"a6d8d768-c8c6-11f0-b64b-42dde27851f2","index.html","152e0134-c8a4-11f0-ad02-42dde27851f2",713,["D",1763941597668],50,"\n\n \n \n \n TRMNL Spotify\n \n \n \n \n \n \n \n

\n TRMNL Spotify Plugin\n

+

\n Hey, welcome! 👋\n

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

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

\n Preview\n

\n \n \n",[],[186,234],{"_103":243,"_96":244,"_157":245,"_159":187,"_160":142,"_161":246,"_163":118,"_105":247,"_100":248,"_165":179,"_167":249,"_168":22,"_169":-5,"_170":250,"_99":251},"0071ffac-c8c7-11f0-a551-42dde27851f2","settings.html","34570f3e-c745-11f0-bd93-42dde27851f2",717,["D",1763941747990],27,"\n\n \n \n \n TRMNL Spotify\n \n \n \n \n \n \n \n

Loading...

\n \n \n \n \n",[],[186,244],{"_103":253,"_96":254,"_157":255,"_159":187,"_160":142,"_161":256,"_163":118,"_105":257,"_100":258,"_165":198,"_167":259,"_168":22,"_169":-5,"_170":260,"_99":261},"9cbea016-c8c9-11f0-9b14-42dde27851f2","settings.tsx","34571470-c745-11f0-bd93-42dde27851f2",724,["D",1763942869213],9,"/** @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();",[],[186,254],{"_103":263,"_96":264,"_157":265,"_159":187,"_160":142,"_161":266,"_163":118,"_105":267,"_100":268,"_165":179,"_167":269,"_168":22,"_169":-5,"_170":270,"_99":271},"9542f6ac-c8bf-11f0-b8c4-42dde27851f2","spotify-logo.svg","f02b5b92-c8bd-11f0-abb7-42dde27851f2",677,["D",1763938561690],5,"\n",[],[186,264],{"_103":273,"_96":274,"_157":275,"_159":187,"_160":142,"_161":276,"_163":118,"_105":277,"_100":228,"_165":179,"_167":278,"_168":22,"_169":-5,"_170":279,"_99":280},"48b75afa-c8b8-11f0-b623-42dde27851f2","trmnl-logo.svg","356cb436-c8b8-11f0-aea9-42dde27851f2",667,["D",1763935426791],"\n \n \n \n \n \n \n \n",[],[186,274],[186],{"_103":283,"_96":284,"_157":285,"_159":-5,"_160":142,"_161":286,"_163":118,"_105":287,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":288,"_99":356},"88be0f4c-c63b-11f0-b9c3-42dde27851f2","routes","847808a2-c63b-11f0-9519-42dde27851f2",48,["D",1763661944794],[289,299,308,318,327,337,347],{"_103":290,"_96":291,"_157":292,"_159":285,"_160":142,"_161":293,"_163":118,"_105":294,"_100":295,"_165":198,"_167":296,"_168":22,"_169":-5,"_170":297,"_99":298},"394322a4-c8d4-11f0-991e-42dde27851f2","index.ts","9f239996-c63b-11f0-ac44-42dde27851f2",749,["D",1763947426768],11,"export * from \"./install.ts\";\nexport * from \"./markup.ts\";\nexport * from \"./uninstall.ts\";\nexport * from \"./settings.ts\";\nexport * from \"./spotifyCallback.ts\";\nexport * from \"./preferences.ts\";",[],[284,291],{"_103":300,"_96":301,"_157":302,"_159":285,"_160":142,"_161":303,"_163":118,"_105":304,"_100":178,"_165":198,"_167":305,"_168":22,"_169":-5,"_170":306,"_99":307},"30af4ad6-c7f4-11f0-b144-42dde27851f2","install.ts","9def2848-c63a-11f0-88ec-42dde27851f2",412,["D",1763851205116],"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}",[],[284,301],{"_103":309,"_96":310,"_157":311,"_159":285,"_160":142,"_161":312,"_163":118,"_105":313,"_100":314,"_165":198,"_167":315,"_168":22,"_169":-5,"_170":316,"_99":317},"c573c81e-c8d9-11f0-82cb-42dde27851f2","markup.ts","ed7f25da-c643-11f0-bfc0-42dde27851f2",775,["D",1763949809457],59,"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}",[],[284,310],{"_103":319,"_96":320,"_157":321,"_159":285,"_160":142,"_161":322,"_163":118,"_105":323,"_100":268,"_165":198,"_167":324,"_168":22,"_169":-5,"_170":325,"_99":326},"24d48a60-c8d4-11f0-ba9a-42dde27851f2","preferences.ts","eb49b81a-c8d3-11f0-a003-42dde27851f2",748,["D",1763947392489],"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}",[],[284,320],{"_103":328,"_96":329,"_157":330,"_159":285,"_160":142,"_161":331,"_163":118,"_105":332,"_100":333,"_165":198,"_167":334,"_168":22,"_169":-5,"_170":335,"_99":336},"9d947aa0-c8d9-11f0-9ea7-42dde27851f2","settings.ts","a4979aaa-c64d-11f0-975e-42dde27851f2",774,["D",1763949742558],115,"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}",[],[284,329],{"_103":338,"_96":339,"_157":340,"_159":285,"_160":142,"_161":341,"_163":118,"_105":342,"_100":343,"_165":198,"_167":344,"_168":22,"_169":-5,"_170":345,"_99":346},"f4e434fc-c803-11f0-a36b-42dde27851f2","spotifyCallback.ts","b39d06fe-c745-11f0-8f7e-42dde27851f2",514,["D",1763857976744],21,"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}",[],[284,339],{"_103":348,"_96":349,"_157":350,"_159":285,"_160":142,"_161":351,"_163":118,"_105":352,"_100":268,"_165":198,"_167":353,"_168":22,"_169":-5,"_170":354,"_99":355},"4b784f3e-c7f4-11f0-b555-42dde27851f2","uninstall.ts","e55e270a-c645-11f0-97a8-42dde27851f2",413,["D",1763851250052],"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}",[],[284,349],[284],{"_103":358,"_96":359,"_157":360,"_159":-5,"_160":142,"_161":361,"_163":118,"_105":362,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":363,"_99":558},"3db98c0a-c7fe-11f0-8a6c-42dde27851f2","templates","3bac546a-c7fe-11f0-8704-42dde27851f2",480,["D",1763855521961],[364,418,467,514],{"_103":365,"_96":366,"_157":367,"_159":360,"_160":142,"_161":368,"_163":118,"_105":369,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":370,"_99":417},"dc58a1fe-c892-11f0-9529-42dde27851f2","recent_tracks","da5a7648-c892-11f0-bf35-42dde27851f2",602,["D",1763919353599],[371,381,390,399,408],{"_103":372,"_96":373,"_157":374,"_159":367,"_160":142,"_161":375,"_163":118,"_105":376,"_100":377,"_165":179,"_167":378,"_168":22,"_169":-5,"_170":379,"_99":380},"48c064a8-c893-11f0-b300-42dde27851f2","full.liquid","de2eb78e-c892-11f0-a9e9-42dde27851f2",619,["D",1763919535468],4,"{% 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

",[],[359,366,373],{"_103":382,"_96":383,"_157":384,"_159":367,"_160":142,"_161":385,"_163":118,"_105":386,"_100":268,"_165":179,"_167":387,"_168":22,"_169":-5,"_170":388,"_99":389},"90c77570-c893-11f0-80d7-42dde27851f2","hh.liquid","e697ef8a-c892-11f0-99a7-42dde27851f2",622,["D",1763919656314],"{% 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 {{ 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

\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

",[],[359,366,383],{"_103":391,"_96":392,"_157":393,"_159":367,"_160":142,"_161":394,"_163":118,"_105":395,"_100":228,"_165":179,"_167":396,"_168":22,"_169":-5,"_170":397,"_99":398},"c4909ae4-c893-11f0-a3b4-42dde27851f2","hv.liquid","e9e64114-c892-11f0-af80-42dde27851f2",623,["D",1763919743195],"{% 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

",[],[359,366,392],{"_103":400,"_96":401,"_157":402,"_159":367,"_160":142,"_161":403,"_163":118,"_105":404,"_100":228,"_165":179,"_167":405,"_168":22,"_169":-5,"_170":406,"_99":407},"f446fd78-c893-11f0-a3b4-42dde27851f2","quad.liquid","e233c37e-c892-11f0-b9eb-42dde27851f2",624,["D",1763919823246],"{% 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 {% endfor %}\n

\n Spotify\n Recent Tracks\n

",[],[359,366,401],{"_103":409,"_96":410,"_157":411,"_159":367,"_160":142,"_161":412,"_163":118,"_105":413,"_100":414,"_165":179,"_167":73,"_168":22,"_169":-5,"_170":415,"_99":416},"f710e01a-c892-11f0-bbdf-42dde27851f2","shared.liquid","f34b7760-c892-11f0-add7-42dde27851f2",617,["D",1763919398428],2,[],[359,366,410],[359,366],{"_103":419,"_96":420,"_157":421,"_159":360,"_160":142,"_161":422,"_163":118,"_105":423,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":424,"_99":466},"a747079a-c80a-11f0-bea0-42dde27851f2","top_artists","a4574f0e-c80a-11f0-8dd7-42dde27851f2",544,["D",1763860853007],[425,434,442,450,458],{"_103":426,"_96":373,"_157":427,"_159":421,"_160":142,"_161":428,"_163":118,"_105":429,"_100":430,"_165":179,"_167":431,"_168":22,"_169":-5,"_170":432,"_99":433},"b3fdd2c0-c80a-11f0-97db-42dde27851f2","450b1942-c7fe-11f0-b80a-42dde27851f2",550,["D",1763860874341],20,"\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

",[],[359,420,373],{"_103":435,"_96":383,"_157":436,"_159":421,"_160":142,"_161":437,"_163":118,"_105":438,"_100":268,"_165":179,"_167":439,"_168":22,"_169":-5,"_170":440,"_99":441},"202af7a6-c87a-11f0-ae12-42dde27851f2","83df28d2-c80a-11f0-919d-42dde27851f2",571,["D",1763908729963],"

\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

",[],[359,420,383],{"_103":443,"_96":392,"_157":444,"_159":421,"_160":142,"_161":445,"_163":118,"_105":446,"_100":268,"_165":179,"_167":447,"_168":22,"_169":-5,"_170":448,"_99":449},"3eee1f24-c87a-11f0-9819-42dde27851f2","8baea1e6-c80a-11f0-8356-42dde27851f2",572,["D",1763908781573],"

\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

",[],[359,420,392],{"_103":451,"_96":401,"_157":452,"_159":421,"_160":142,"_161":453,"_163":118,"_105":454,"_100":268,"_165":179,"_167":455,"_168":22,"_169":-5,"_170":456,"_99":457},"5cb35b00-c87a-11f0-909b-42dde27851f2","923d359a-c80a-11f0-9520-42dde27851f2",573,["D",1763908831519],"

\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

",[],[359,420,401],{"_103":459,"_96":410,"_157":460,"_159":421,"_160":142,"_161":461,"_163":118,"_105":462,"_100":377,"_165":179,"_167":463,"_168":22,"_169":-5,"_170":464,"_99":465},"b55eeb8a-c879-11f0-8048-42dde27851f2","99e5f17e-c80a-11f0-919d-42dde27851f2",567,["D",1763908550787],"",[],[359,420,410],[359,420],{"_103":468,"_96":469,"_157":470,"_159":360,"_160":142,"_161":471,"_163":118,"_105":472,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":473,"_99":513},"e507e96e-c891-11f0-8936-42dde27851f2","top_tracks","e3a06bd2-c891-11f0-bbb1-42dde27851f2",575,["D",1763918938672],[474,482,490,498,506],{"_103":475,"_96":373,"_157":476,"_159":470,"_160":142,"_161":477,"_163":118,"_105":478,"_100":228,"_165":179,"_167":479,"_168":22,"_169":-5,"_170":480,"_99":481},"f24cb99c-c891-11f0-a9e9-42dde27851f2","e8149396-c891-11f0-99a7-42dde27851f2",579,["D",1763918960926],"{% 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

",[],[359,469,373],{"_103":483,"_96":383,"_157":484,"_159":470,"_160":142,"_161":485,"_163":118,"_105":486,"_100":228,"_165":179,"_167":487,"_168":22,"_169":-5,"_170":488,"_99":489},"fbcd7272-c891-11f0-9c49-42dde27851f2","f3e19070-c891-11f0-8936-42dde27851f2",583,["D",1763918976877],"{% 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

",[],[359,469,383],{"_103":491,"_96":392,"_157":492,"_159":470,"_160":142,"_161":493,"_163":118,"_105":494,"_100":228,"_165":179,"_167":495,"_168":22,"_169":-5,"_170":496,"_99":497},"0632b060-c892-11f0-8060-42dde27851f2","fdbdb1be-c891-11f0-b979-42dde27851f2",587,["D",1763918994313],"{% 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

",[],[359,469,392],{"_103":499,"_96":401,"_157":500,"_159":470,"_160":142,"_161":501,"_163":118,"_105":502,"_100":228,"_165":179,"_167":503,"_168":22,"_169":-5,"_170":504,"_99":505},"11969fa2-c892-11f0-827b-42dde27851f2","09b783f0-c892-11f0-971e-42dde27851f2",591,["D",1763919013419],"{% 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

",[],[359,469,401],{"_103":507,"_96":410,"_157":508,"_159":470,"_160":142,"_161":509,"_163":118,"_105":510,"_100":228,"_165":179,"_167":73,"_168":22,"_169":-5,"_170":511,"_99":512},"1842c7ea-c892-11f0-a738-42dde27851f2","145bb70e-c892-11f0-9e1a-42dde27851f2",595,["D",1763919024611],[],[359,469,410],[359,469],{"_103":515,"_96":516,"_157":517,"_159":360,"_160":142,"_161":518,"_163":118,"_105":519,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":520,"_99":557},"710b936a-c8d9-11f0-b27f-42dde27851f2","welcome","6f34f0d6-c8d9-11f0-abf0-42dde27851f2",753,["D",1763949667805],[521,529,536,543,550],{"_103":522,"_96":373,"_157":523,"_159":517,"_160":142,"_161":524,"_163":118,"_105":525,"_100":377,"_165":179,"_167":526,"_168":22,"_169":-5,"_170":527,"_99":528},"3862e5da-c8da-11f0-adff-42dde27851f2","73237172-c8d9-11f0-a72c-42dde27851f2",776,["D",1763950002285],"

\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

",[],[359,516,373],{"_103":530,"_96":383,"_157":531,"_159":517,"_160":142,"_161":532,"_163":118,"_105":533,"_100":377,"_165":179,"_167":526,"_168":22,"_169":-5,"_170":534,"_99":535},"3b1beb8c-c8da-11f0-abb3-42dde27851f2","7bb06cf0-c8d9-11f0-935d-42dde27851f2",777,["D",1763950006853],[],[359,516,383],{"_103":537,"_96":392,"_157":538,"_159":517,"_160":142,"_161":539,"_163":118,"_105":540,"_100":377,"_165":179,"_167":526,"_168":22,"_169":-5,"_170":541,"_99":542},"3ecb6fb4-c8da-11f0-936b-42dde27851f2","8214d4aa-c8d9-11f0-81a6-42dde27851f2",778,["D",1763950013036],[],[359,516,392],{"_103":544,"_96":401,"_157":545,"_159":517,"_160":142,"_161":141,"_163":118,"_105":546,"_100":377,"_165":179,"_167":547,"_168":22,"_169":-5,"_170":548,"_99":549},"42de134a-c8da-11f0-abb3-42dde27851f2","87ca1464-c8d9-11f0-adff-42dde27851f2",["D",1763950019870],"

\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

",[],[359,516,401],{"_103":551,"_96":410,"_157":552,"_159":517,"_160":142,"_161":553,"_163":118,"_105":554,"_100":228,"_165":179,"_167":73,"_168":22,"_169":-5,"_170":555,"_99":556},"931b699e-c8d9-11f0-8412-42dde27851f2","8f62e980-c8d9-11f0-abb3-42dde27851f2",773,["D",1763949724992],[],[359,516,410],[359,516],[359],{"_103":560,"_96":561,"_157":562,"_159":-5,"_160":142,"_161":563,"_163":118,"_105":564,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":565,"_99":586},"9ac09ed8-c7fa-11f0-8fda-42dde27851f2","utils","9954c2c2-c7fa-11f0-8fda-42dde27851f2",458,["D",1763853960040],[566,576],{"_103":567,"_96":568,"_157":569,"_159":562,"_160":142,"_161":570,"_163":118,"_105":571,"_100":572,"_165":198,"_167":573,"_168":22,"_169":-5,"_170":574,"_99":575},"8767c97c-c80b-11f0-85c3-42dde27851f2","renderer.ts","9dc8486a-c7ff-11f0-b491-42dde27851f2",558,["D",1763861229034],8,"import { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Liquid } from 'npm:liquidjs@10.24.0';\n\nexport async function render(template: string, data: object) {\n const engine = new Liquid();\n\n // read all templates\n const fullTpl = await readFile(`/templates/${template}/full.liquid`);\n const hhTpl = await readFile(`/templates/${template}/hh.liquid`);\n const hvTpl = await readFile(`/templates/${template}/hv.liquid`);\n const quadTpl = await readFile(`/templates/${template}/quad.liquid`);\n const sharedTpl = await readFile(`/templates/${template}/shared.liquid`);\n\n // parse all\n const fullParsed = engine.parse(fullTpl);\n const hhParsed = engine.parse(hhTpl);\n const hvParsed = engine.parse(hvTpl);\n const quadParsed = engine.parse(quadTpl);\n const sharedParsed = engine.parse(sharedTpl);\n\n // generate all\n const full = await engine.render(fullParsed, data);\n const hh = await engine.render(hhParsed, data);\n const hv = await engine.render(hvParsed, data);\n const quad = await engine.render(quadParsed, data);\n const shared = await engine.render(sharedParsed, data);\n \n return {\n markup: full,\n markup_half_horizontal: hh,\n markup_half_vertical: hv,\n markup_quadrant: quad,\n shared: shared\n };\n}",[],[561,568],{"_103":577,"_96":578,"_157":579,"_159":562,"_160":142,"_161":580,"_163":118,"_105":581,"_100":582,"_165":198,"_167":583,"_168":22,"_169":-5,"_170":584,"_99":585},"dd4bfaa2-c80b-11f0-a914-42dde27851f2","spotifyService.ts","9eed06ea-c7fa-11f0-b069-42dde27851f2",563,["D",1763861373130],33,"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport process from \"node:process\";\nimport { Buffer } from \"node:buffer\";\n\nconst { SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET } = process.env;\n\nexport async function refreshToken(uuid: string, refreshToken: string) {\n const params = new URLSearchParams();\n params.append(\"grant_type\", \"refresh_token\");\n params.append(\"refresh_token\", refreshToken);\n\n const authHeader = Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString(\"base64\");\n\n const resp = 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: params,\n });\n\n // TODO: better error handling here (throw and catch on caller, then render error template)\n if (!resp.ok) {\n console.error(`Failed to refresh Spotify access token: ${await resp.text()}`);\n }\n\n const data = await resp.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 database\n await sqlite.execute({\n sql: \"update tokens set access_token = :access_token, refresh_token = :refresh_token, expires_at = :expires_at where uuid = :uuid\",\n args: {\n access_token: data.access_token,\n refresh_token: data.refresh_token ?? refreshToken, // use the same if not returned as per the Spotify docs\n expires_at: expiresAt,\n uuid: uuid,\n }\n });\n\n // return refreshed token\n return data.access_token;\n}\n\nexport async function getRecentTracks(accessToken: string, limit: number) {\n const resp = await fetch(`https://api.spotify.com/v1/me/player/recently-played?limit=${limit}`, {\n headers: {\n authorization: `Bearer ${accessToken}`\n }\n });\n\n return await resp.json();\n}\n\nexport async function getTopTracks(accessToken: string, timeRange: string, limit: number) {\n const resp = await fetch(`https://api.spotify.com/v1/me/top/tracks?time_range=${timeRange}&limit=${limit}`, {\n headers: {\n authorization: `Bearer ${accessToken}`\n }\n });\n \n return await resp.json();\n}\n\nexport async function getTopArtists(accessToken: string, timeRange: string, limit: number) {\n const resp = await fetch(`https://api.spotify.com/v1/me/top/artists?time_range=${timeRange}&limit=${limit}`, {\n headers: {\n authorization: `Bearer ${accessToken}`\n }\n });\n \n return await resp.json();\n}",[],[561,578],[561],{"_103":588,"_96":589,"_157":116,"_159":-5,"_160":142,"_161":590,"_163":118,"_105":591,"_100":592,"_165":593,"_167":594,"_168":22,"_169":97,"_170":595,"_99":596},"45e68d20-c8d4-11f0-9ff7-42dde27851f2","main.ts",750,["D",1763947447973],83,"http","import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono@4\";\nimport { bearerAuth } from \"npm:hono@4/bearer-auth\";\nimport {\n install,\n markup,\n postInstall,\n savePreferences,\n settings,\n spotifyCallback,\n uninstall,\n} from \"./routes/index.ts\";\n\n// create app\nconst app = new Hono();\n\n// root route\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\"));\n\n// serve frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// setup trmnl routes token protection (only on hooks and markup)\napp.use(\n \"/trmnl/{(hooks\\/(install|uninstall)|markup)}\",\n bearerAuth({\n verifyToken: (token, c) => {\n return true;\n },\n }),\n);\n\n// installation route\napp.get(\"/trmnl/install\", install);\n\n// post installation webhook\napp.post(\"/trmnl/hooks/install\", postInstall);\n\n// markup route\napp.post(\"/trmnl/markup\", markup);\n\n// uninstallation route\napp.post(\"/trmnl/hooks/uninstall\", uninstall);\n\n// configuration route\napp.get(\"/trmnl/settings\", settings);\n\n// spotify callback route\napp.get(\"/spotify/callback\", spotifyCallback);\n\n// save user preferences\napp.post(\"/api/prefs\", savePreferences);\n\nexport default app.fetch;",[],[589],"files",[154,172,184,191,202,212,222,232,242,252,262,272,282,289,299,308,318,327,337,347,357,364,371,381,390,399,408,418,425,434,442,450,458,467,474,482,490,498,506,514,521,529,536,543,550,559,566,576,587],"counts",{"_601":32,"_602":414,"_603":32,"_604":605},"pulls","branches","forks","envVars",{"_606":377,"_607":32},"count","emptyCount","contents",[610,613,616,619,622,625],{"_103":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":118,"_105":611,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_99":612},["D",1763586291764],[156],{"_103":185,"_96":186,"_157":187,"_159":-5,"_160":142,"_161":188,"_163":118,"_105":614,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_99":615},["D",1763776049315],[186],{"_103":283,"_96":284,"_157":285,"_159":-5,"_160":142,"_161":286,"_163":118,"_105":617,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_99":618},["D",1763661944794],[284],{"_103":358,"_96":359,"_157":360,"_159":-5,"_160":142,"_161":361,"_163":118,"_105":620,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_99":621},["D",1763855521961],[359],{"_103":560,"_96":561,"_157":562,"_159":-5,"_160":142,"_161":563,"_163":118,"_105":623,"_100":122,"_165":166,"_167":-5,"_168":22,"_169":-5,"_99":624},["D",1763853960040],[561],{"_103":588,"_96":589,"_157":116,"_159":-5,"_160":142,"_161":590,"_163":118,"_105":626,"_100":592,"_165":593,"_167":594,"_168":22,"_169":97,"_99":627},["D",1763947447973],[589],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_94":95,"_96":97,"_101":636,"_604":641,"_661":22},{"_103":104,"_96":97,"_105":637,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":118,"_120":-5,"_121":122,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":638,"_136":639,"_139":640,"_151":22},["D",1763583368118],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":114},{"_100":141,"_96":44,"_103":142,"_143":104,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[642,649,653,657],{"_643":644,"_105":645,"_646":-5,"_111":647,"_648":22},"key","SPOTIFY_CLIENT_SECRET",["D",1763763219498],"updatedAt","Spotify client secret","isEmpty",{"_643":650,"_105":651,"_646":-5,"_111":652,"_648":22},"SPOTIFY_CLIENT_ID",["D",1763763203625],"Spotify client id",{"_643":654,"_105":655,"_646":-5,"_111":656,"_648":22},"TRMNL_CLIENT_SECRET",["D",1763583904734],"TRMNL client secret",{"_643":658,"_105":659,"_646":-5,"_111":660,"_648":22},"TRMNL_CLIENT_ID",["D",1763583881459],"TRMNL client id","isTeamOrg","actionData","errors"]

sitnik

trmnl-spotify

Environment variables