web: Stem Now button on album, artist and playlist pages

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

web/app.js

@@ -662,14 +662,27 @@ view.addEventListener("click", ev => {
   if (act) {
     const tracks = lists[act.dataset.play];
     if (act.dataset.mode === "queue") Q.add(tracks);
+    else if (act.dataset.mode === "stem") stemNow(tracks);
     else Q.playList(tracks, act.dataset.mode === "shuffle" ? -1 : 0, act.dataset.mode === "shuffle");
   }
 });
 
+async function stemNow(tracks) {
+  const seen = new Set();
+  const paths = tracks.filter(t => t.file && !Stems.find(t) && !seen.has(t.file) && seen.add(t.file)).map(t => t.file);
+  if (!paths.length) return toast("Already has stems");
+  try {
+    const r = await fetch(stemBase() + "/api/stem" + stemQuery(), { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ paths }) });
+    const j = await r.json().catch(() => ({}));
+    toast(r.ok ? `Stemming ${paths.length === 1 ? "1 track" : paths.length + " tracks"} next` : `Couldn't queue: ${j.error || r.status}`);
+  } catch (e) { toast("Couldn't queue: " + e.message); }
+}
+
 const playButtons = id => `<div class="actions">
   <button class="btn primary" data-play="${id}">${ICON.play} Play</button>
   <button class="btn" data-play="${id}" data-mode="shuffle">${ICON.shuffle} Shuffle</button>
-  <button class="btn" data-play="${id}" data-mode="queue">${ICON.queue} Add to queue</button></div>`;
+  <button class="btn" data-play="${id}" data-mode="queue">${ICON.queue} Add to queue</button>
+  <button class="btn" data-play="${id}" data-mode="stem">Stem Now</button></div>`;
 
 function needPlex() {
   view.innerHTML = `<h1>Welcome</h1><p class="sub">Sign in to Plex in <a href="#/settings" style="color:var(--accent)">Settings</a> to browse your library, or open <a href="#/stems" style="color:var(--accent)">Stems only</a>.</p>`;