Add a Discord status text field to Settings

Author: rowkav09

src/app-config.js

@@ -80,6 +80,8 @@ export function parseAppConfig(text) {
       // "upload"; keep that, so an upgrade never starts sending covers.
       discordArtworkUpload: parsed.discord?.artworkUpload ?? parsed.discord?.artworkLookup === "upload",
       discordTimestamps: parsed.discord?.timestamps,
+      discordName: parsed.discord?.name,
+      discordStatusDisplayType: parsed.discord?.statusDisplayType,
       ...(parsed.hosted ? { hostedEnabled: parsed.hosted.enabled, hostedUrl: parsed.hosted.url } : {}),
       ...(parsed.privacy !== undefined ? { privacy: parsed.privacy } : {}),
       ...(parsed.card !== undefined ? { card: parsed.card } : {}),
@@ -220,7 +222,7 @@ export function startDiscordFromConfig(config, provider, { env = process.env, bu
   // Hidden titles or album art: never look covers up by title.
   const policy = privacyPolicyFromConfig(config);
   const artwork = createArtwork(policy.redactTitles || policy.hideArtwork ? { ...config.discord, artworkLookup: "off", artworkUpload: false } : config.discord);
-  const loop = createDiscordPresenceLoop({ getPresence: () => provider.getPresence(), client, artwork, idleBehavior: config.discord.idleBehavior, timestamps: config.discord.timestamps ?? "both", ...(intervalMs ? { intervalMs } : {}), ...(stuckAfterMs ? { stuckAfterMs } : {}), ...(now ? { now } : {}) });
+  const loop = createDiscordPresenceLoop({ getPresence: () => provider.getPresence(), client, artwork, idleBehavior: config.discord.idleBehavior, timestamps: config.discord.timestamps ?? "both", activityFields: { ...(config.discord.name ? { name: config.discord.name } : {}), ...(config.discord.statusDisplayType ? { statusDisplayType: config.discord.statusDisplayType } : {}) }, ...(intervalMs ? { intervalMs } : {}), ...(stuckAfterMs ? { stuckAfterMs } : {}), ...(now ? { now } : {}) });
   loop.start();
   // Refresh artwork: forget cached covers, then update Discord straight away.
   async function refreshArtwork() {

src/app-settings.js

@@ -8,7 +8,7 @@ import { IDLE_BEHAVIORS } from "./discord-presence.js";
 // checked against the same rules as setup, then config.json is replaced in one
 // step (temp file + rename) so a crash never leaves half a file.
 
-const DISCORD_KEYS = new Set(["enabled", "timestamps", "artworkLookup", "artworkUpload", "idleBehavior"]);
+const DISCORD_KEYS = new Set(["enabled", "timestamps", "artworkLookup", "artworkUpload", "idleBehavior", "name", "statusDisplayType"]);
 const HOSTED_KEYS = new Set(["enabled"]);
 const PRIVACY_KEYS = new Set(["hideTitles", "hideArtwork", "hideProgress", "hideMovies", "hideEpisodes", "hideMusic"]);
 const PRIVACY_KIND_KEYS = Object.freeze([["hideMovies", "movie"], ["hideEpisodes", "episode"], ["hideMusic", "track"]]);
@@ -20,6 +20,8 @@ export function discordSettingsView(config) {
     artworkLookup: config.discord?.artworkLookup ?? "off",
     artworkUpload: config.discord?.artworkUpload !== false,
     idleBehavior: config.discord?.idleBehavior ?? "clear",
+    name: config.discord?.name ?? "",
+    statusDisplayType: config.discord?.statusDisplayType ?? "name",
   });
 }
 
@@ -91,6 +93,8 @@ function rewrite(config, { servers = config.servers, discord = { ...discordSetti
     discordArtworkLookup: discord.artworkLookup,
     discordArtworkUpload: discord.artworkUpload,
     discordTimestamps: discord.timestamps,
+    discordName: discord.name,
+    discordStatusDisplayType: discord.statusDisplayType,
     ...(hosted ? { hostedEnabled: hosted.enabled, ...(hosted.url ? { hostedUrl: hosted.url } : {}) } : {}),
     ...(privacy ? { privacy } : {}),
     ...(card ? { card } : {}),
@@ -104,6 +108,8 @@ export function applyDiscordChanges(config, changes) {
   checkChanges(changes, DISCORD_KEYS, "discord");
   if (changes.idleBehavior !== undefined && !IDLE_BEHAVIORS.includes(changes.idleBehavior)) throw new TypeError("discord settings: idleBehavior is invalid");
   if (changes.artworkUpload !== undefined && typeof changes.artworkUpload !== "boolean") throw new TypeError("discord settings: artworkUpload must be true or false");
+  if (changes.name !== undefined && (typeof changes.name !== "string" || changes.name.length > 128)) throw new TypeError("discord settings: name must be text of at most 128 characters");
+  if (changes.statusDisplayType !== undefined && !["name", "state", "details"].includes(changes.statusDisplayType)) throw new TypeError("discord settings: statusDisplayType is invalid");
   return rewrite(config, { discord: { ...discordSettingsView(config), ...changes } });
 }
 

src/discord-presence.js

@@ -23,14 +23,14 @@ function validateLoopOptions({ getPresence, client, idleBehavior, timestamps, in
 }
 
 export function createDiscordPresenceLoop({
-  getPresence, client, idleBehavior = "clear", timestamps = "both", artwork,
+  getPresence, client, idleBehavior = "clear", timestamps = "both", artwork, activityFields = {},
   intervalMs = 15_000, graceMs = 120_000, stuckAfterMs = 300_000, stallAfterMs = 60_000, now = () => performance.now(),
   setTimer = setTimeout, clearTimer = clearTimeout,
 } = {}) {
   validateLoopOptions({ getPresence, client, idleBehavior, timestamps, intervalMs, graceMs, stuckAfterMs, stallAfterMs });
 
-  const live = createDiscordController({ client, settings: { idleBehavior: idleBehavior === "show" ? "show" : "clear", timestamps }, ...(artwork ? { artwork } : {}) });
-  const frozen = createDiscordController({ client, settings: { timestamps: "none" }, ...(artwork ? { artwork } : {}) });
+  const live = createDiscordController({ client, settings: { ...activityFields, idleBehavior: idleBehavior === "show" ? "show" : "clear", timestamps }, ...(artwork ? { artwork } : {}) });
+  const frozen = createDiscordController({ client, settings: { ...activityFields, timestamps: "none" }, ...(artwork ? { artwork } : {}) });
   let lastActive = null;
   let idleSince = null;
   let timer = null;

src/settings-page-handler.js

@@ -71,6 +71,15 @@ const buildPage = (startupCopy) => `<!doctype html>
 <option value="show">Show that nothing is playing</option>
 <option value="recent">Show what I played last</option>
 </select></p>
+<p class="row"><label for="discord-name">Status text</label>
+<input type="text" id="discord-name" name="name" maxlength="128" placeholder="{artist} on {service}" aria-describedby="discord-name-help"></p>
+<p class="hint" id="discord-name-help">What Discord shows in your status, next to your name. Leave it empty for "{artist} on {service}". Fields you can use: {artist}, {title}, {subtitle}, {album}, {year}, {series}, {season}, {episode} and {service} (Spotify, Navidrome and so on). Anything else you type is kept as it is. To show a literal brace, write {{ or }}.</p>
+<p class="row"><label for="discord-status-type">Status shows</label>
+<select id="discord-status-type" name="statusDisplayType">
+<option value="name">The status text above</option>
+<option value="state">The second line (artist or episode)</option>
+<option value="details">The first line (title)</option>
+</select></p>
 <p class="row"><label for="discord-upload">Show my server's cover</label>
 <input type="checkbox" id="discord-upload" name="artworkUpload" aria-describedby="discord-upload-help"></p>
 <p class="hint" id="discord-upload-help">Discord can only show a picture from a public address, so this uploads just the cover image to litterbox.catbox.moe, where it is kept for 72 hours. No title, artist, token or server address is sent. Turn it off and a private server's art is never sent to Discord.</p>
@@ -481,11 +490,11 @@ refreshVersion(); refreshLogs(); setInterval(refreshLogs, 3000); setInterval(ref
 
 const buildScript = (startupCopy) => `"use strict";
 const form = document.getElementById("discord-form");
-const fields = { enabled: document.getElementById("discord-enabled"), timestamps: document.getElementById("discord-timestamps"), artworkLookup: document.getElementById("discord-artwork"), artworkUpload: document.getElementById("discord-upload"), idleBehavior: document.getElementById("discord-idle") };
+const fields = { enabled: document.getElementById("discord-enabled"), timestamps: document.getElementById("discord-timestamps"), artworkLookup: document.getElementById("discord-artwork"), artworkUpload: document.getElementById("discord-upload"), idleBehavior: document.getElementById("discord-idle"), name: document.getElementById("discord-name"), statusDisplayType: document.getElementById("discord-status-type") };
 const save = document.getElementById("discord-save");
 function say(text, tone) { const el = document.getElementById("discord-result"); el.textContent = text; el.className = tone || ""; }
-function show(d) { fields.enabled.checked = d.enabled; fields.timestamps.value = d.timestamps; fields.artworkLookup.value = d.artworkLookup; fields.artworkUpload.checked = d.artworkUpload !== false; fields.idleBehavior.value = d.idleBehavior || "clear"; toggle(); }
-function toggle() { fields.timestamps.disabled = fields.artworkLookup.disabled = fields.artworkUpload.disabled = fields.idleBehavior.disabled = !fields.enabled.checked; }
+function show(d) { fields.enabled.checked = d.enabled; fields.timestamps.value = d.timestamps; fields.artworkLookup.value = d.artworkLookup; fields.artworkUpload.checked = d.artworkUpload !== false; fields.idleBehavior.value = d.idleBehavior || "clear"; fields.name.value = d.name || ""; fields.statusDisplayType.value = d.statusDisplayType || "name"; toggle(); }
+function toggle() { fields.timestamps.disabled = fields.artworkLookup.disabled = fields.artworkUpload.disabled = fields.idleBehavior.disabled = fields.name.disabled = fields.statusDisplayType.disabled = !fields.enabled.checked; }
 fields.enabled.addEventListener("change", toggle);
 async function load() {
   try {
@@ -510,7 +519,7 @@ form.addEventListener("submit", async (event) => {
   save.disabled = true;
   say("Saving...", "warn");
   try {
-    const body = { discord: { enabled: fields.enabled.checked, timestamps: fields.timestamps.value, artworkLookup: fields.artworkLookup.value, artworkUpload: fields.artworkUpload.checked, idleBehavior: fields.idleBehavior.value } };
+    const body = { discord: { enabled: fields.enabled.checked, timestamps: fields.timestamps.value, artworkLookup: fields.artworkLookup.value, artworkUpload: fields.artworkUpload.checked, idleBehavior: fields.idleBehavior.value, name: fields.name.value.trim(), statusDisplayType: fields.statusDisplayType.value } };
     const res = await fetch("/api/settings", { method: "PUT", cache: "no-store", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify(body) });
     if (!res.ok) throw new Error(String(res.status));
     show((await res.json()).discord);

src/settings-servers.js

@@ -46,6 +46,8 @@ export function createSettingsServers({ file, credentialStore, deviceId, version
       discordArtworkLookup: existing?.discord?.artworkLookup ?? "off",
       ...(typeof existing?.discord?.artworkUpload === "boolean" ? { discordArtworkUpload: existing.discord.artworkUpload } : {}),
       ...(existing?.discord?.timestamps ? { discordTimestamps: existing.discord.timestamps } : {}),
+      ...(existing?.discord?.name ? { discordName: existing.discord.name } : {}),
+      ...(existing?.discord?.statusDisplayType ? { discordStatusDisplayType: existing.discord.statusDisplayType } : {}),
       ...(existing?.hosted ? { hostedEnabled: existing.hosted.enabled, ...(existing.hosted.url ? { hostedUrl: existing.hosted.url } : {}) } : {}),
       ...(existing?.privacy ? { privacy: existing.privacy } : {}),
       ...(existing?.card ? { card: existing.card } : {}),

src/setup-app.js

@@ -76,6 +76,8 @@ function keptSettings(current) {
   return {
     ...(typeof current.discord?.artworkUpload === "boolean" ? { discordArtworkUpload: current.discord.artworkUpload } : {}),
     ...(current.discord?.timestamps !== undefined ? { discordTimestamps: current.discord.timestamps } : {}),
+    ...(current.discord?.name ? { discordName: current.discord.name } : {}),
+    ...(current.discord?.statusDisplayType ? { discordStatusDisplayType: current.discord.statusDisplayType } : {}),
     ...(current.hosted ? { hostedEnabled: current.hosted.enabled, ...(current.hosted.url ? { hostedUrl: current.hosted.url } : {}) } : {}),
     ...(current.privacy ? { privacy: current.privacy } : {}),
     ...(current.card ? { card: current.card } : {}),

src/setup-config.js

@@ -5,6 +5,7 @@ import { normalizeHostedUrl } from "./hosted-uploader.js";
 
 const PROVIDERS = new Set(["plex", "jellyfin", "navidrome", "emby"]);
 const ARTWORK_LOOKUPS = new Set(["off", "musicbrainz"]);
+const STATUS_DISPLAY_TYPES = new Set(["name", "state", "details"]);
 const TIMESTAMP_MODES = new Set(["elapsed", "remaining", "both", "none"]);
 const PRIVACY_FLAGS = ["redactTitles", "hideArtwork", "hideProgress"];
 const PRIVACY_KINDS = new Set(["movie", "episode", "track"]);
@@ -124,6 +125,12 @@ export function createSetupConfig(input = {}) {
   if (input.discordTimestamps !== undefined && !TIMESTAMP_MODES.has(input.discordTimestamps)) {
     throw new TypeError("setup config.discordTimestamps must be elapsed, remaining, both or none");
   }
+  if (input.discordName !== undefined && (typeof input.discordName !== "string" || input.discordName.length > 128)) {
+    throw new TypeError("setup config.discordName must be a string of at most 128 characters");
+  }
+  if (input.discordStatusDisplayType !== undefined && !STATUS_DISPLAY_TYPES.has(input.discordStatusDisplayType)) {
+    throw new TypeError("setup config.discordStatusDisplayType must be name, state or details");
+  }
   if (input.hostedEnabled !== undefined && typeof input.hostedEnabled !== "boolean") {
     throw new TypeError("setup config.hostedEnabled must be a boolean");
   }
@@ -151,6 +158,9 @@ export function createSetupConfig(input = {}) {
       // Discord timer (set from the settings page): elapsed, remaining, both
       // or none. Left out means "both", so setup's own output is unchanged.
       ...(input.discordTimestamps !== undefined ? { timestamps: input.discordTimestamps } : {}),
+      // The Discord header text template and which field it shows (left out = defaults).
+      ...(input.discordName ? { name: input.discordName } : {}),
+      ...(input.discordStatusDisplayType !== undefined && input.discordStatusDisplayType !== "name" ? { statusDisplayType: input.discordStatusDisplayType } : {}),
     }),
     // Hosted card upload (#140) is off unless the user turns it on.
     ...(input.hostedEnabled !== undefined || hostedUrl ? {

test/app-settings.test.js

@@ -18,7 +18,7 @@ async function configFile(input = JELLYFIN) {
 
 test("shows the Discord settings with defaults for older configs", () => {
   const config = parseAppConfig(serializeSetupConfig({ ...JELLYFIN, discordArtworkLookup: undefined }));
-  assert.deepEqual({ ...discordSettingsView(config) }, { enabled: true, timestamps: "both", artworkLookup: "off", artworkUpload: false, idleBehavior: "clear" });
+  assert.deepEqual({ ...discordSettingsView(config) }, { enabled: true, timestamps: "both", artworkLookup: "off", artworkUpload: false, idleBehavior: "clear", name: "", statusDisplayType: "name" });
 });
 
 test("applies Discord changes and keeps everything else", () => {
@@ -74,7 +74,7 @@ test("the running app saves Discord settings from its own page only", async () =
     assert.equal(page.status, 200);
     assert.match(page.headers.get("content-security-policy"), /script-src 'self'/);
     const cookie = page.headers.get("set-cookie").split(";")[0];
-    assert.deepEqual((await (await fetch(`${app.url}/api/settings`)).json()).discord, { enabled: true, timestamps: "both", artworkLookup: "musicbrainz", artworkUpload: false, idleBehavior: "clear" });
+    assert.deepEqual((await (await fetch(`${app.url}/api/settings`)).json()).discord, { enabled: true, timestamps: "both", artworkLookup: "musicbrainz", artworkUpload: false, idleBehavior: "clear", name: "", statusDisplayType: "name" });
     const put = (headers, body = { discord: { enabled: false, timestamps: "elapsed" } }) => fetch(`${app.url}/api/settings`, { method: "PUT", headers: { "Content-Type": "application/json", ...headers }, body: JSON.stringify(body) });
     // No session cookie, or a request from another site: refused, nothing saved.
     assert.equal((await put({})).status, 403);
@@ -85,7 +85,7 @@ test("the running app saves Discord settings from its own page only", async () =
     assert.equal((await put({ Cookie: cookie }, { discord: { enabled: true }, hosted: { enabled: true } })).status, 400);
     const saved = await put({ Cookie: cookie });
     assert.equal(saved.status, 200);
-    assert.deepEqual((await saved.json()).discord, { enabled: false, timestamps: "elapsed", artworkLookup: "musicbrainz", artworkUpload: false, idleBehavior: "clear" });
+    assert.deepEqual((await saved.json()).discord, { enabled: false, timestamps: "elapsed", artworkLookup: "musicbrainz", artworkUpload: false, idleBehavior: "clear", name: "", statusDisplayType: "name" });
     assert.equal(parseAppConfig(await readFile(file, "utf8")).discord.timestamps, "elapsed");
     const refresh = await fetch(`${app.url}/api/settings/discord/refresh-artwork`, { method: "POST", headers: { "Content-Type": "application/json", Cookie: cookie }, body: "{}" });
     assert.deepEqual([refresh.status, await refresh.json()], [200, { dropped: 0 }]);