Music: use Plex as another person in your Plex Home (list, PIN, switch back), shown as Playing as <name>

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

public/music-extras.js

@@ -62,3 +62,42 @@ function sleepSheet() {
   if (sleepT.end || sleepT.eot) opts.push({ label: 'Turn off the timer', icon: 'x', run: () => sleepSet(0) });
   actionSheet('Sleep timer', sleepLabel() === 'Sleep' ? 'Fades the music out and pauses' : sleepLabel(), opts);
 }
+
+// ---- Plex Home: use Music as someone else in your Plex Home (their PIN if they have one)
+const plexHome = { t: 0, data: null };
+async function plexHomeUsers() {
+  if (plexHome.data && Date.now() - plexHome.t < 5 * 60e3) return plexHome.data;
+  plexHome.data = await jfetch('/api/plex/users'); plexHome.t = Date.now(); return plexHome.data;
+}
+/** After the Music header is drawn: "Playing as Nate" with a switch link, but only when the Plex Home has more than one person. */
+async function plexHomeBadge(st) {
+  try {
+    const d = await plexHomeUsers(), el = document.getElementById('phu');
+    if (!el || !d.users || d.users.length < 2) return;
+    const me = d.users.find(x => x.current) || d.users.find(x => x.admin) || d.users[0];
+    el.innerHTML = ` · <a href="#" id="pswitch" style="color:var(--accent)">Playing as ${esc(me.title)} ▾</a>`;
+    document.getElementById('pswitch').onclick = e => { e.preventDefault(); plexSwitchSheet(d.users); };
+  } catch { /* no Plex Home: nothing to switch */ }
+}
+function plexSwitchSheet(users) {
+  const el = openSheet('Who is listening?', 'People in your Plex Home. Playlists, ratings and what you have played follow the person you pick.',
+    `<div class="list">${users.map((u, i) => `<button class="row" data-u="${i}"><span class="ic" style="background:var(--panel2);overflow:hidden;color:var(--text)">${u.thumb ? `<img src="${esc(u.thumb)}" alt="" referrerpolicy="no-referrer" style="width:100%;height:100%;object-fit:cover" onerror="this.remove()">` : esc([...u.title][0].toUpperCase())}</span>
+      <span class="grow"><b>${esc(u.title)}${u.current ? ' ✓' : ''}</b><small>${[u.admin ? 'Admin' : '', u.restricted ? 'Restricted' : '', u.protected && !u.admin ? 'PIN' : ''].filter(Boolean).join(' · ') || ' '}</small></span>${u.current ? '' : icon('chev', 'chev')}</button>`).join('')}</div>
+    <div class="bar"><button class="btn ghost" id="sx" style="flex:1;justify-content:center">Close</button></div>`);
+  el.querySelector('#sx').onclick = closeSheet;
+  el.querySelectorAll('[data-u]').forEach(b => b.onclick = () => { const u = users[+b.dataset.u]; if (u.current) return closeSheet(); if (u.protected && !u.admin) plexPinSheet(u); else plexSwitchTo(u, ''); });
+}
+function plexPinSheet(u) {
+  const el = openSheet('PIN for ' + u.title, '', `<form id="ppf"><label for="ppi">PIN</label><input type="password" id="ppi" inputmode="numeric" autocomplete="off" maxlength="8" required>
+    <div class="bar"><button class="btn ghost" type="button" id="sx" style="flex:1;justify-content:center">Cancel</button><button class="btn" id="ppb" style="flex:1;justify-content:center">Switch</button></div><div class="err" id="ppe" role="alert"></div></form>`);
+  el.querySelector('#sx').onclick = closeSheet;
+  el.querySelector('#ppf').onsubmit = e => { e.preventDefault(); plexSwitchTo(u, el.querySelector('#ppi').value, msg => { el.querySelector('#ppe').textContent = msg; el.querySelector('#ppi').select(); }); };
+  setTimeout(() => el.querySelector('#ppi').focus(), 60);
+}
+async function plexSwitchTo(u, pin, onError) {
+  try {
+    await jfetch('/api/plex/switch', { method: 'POST', body: JSON.stringify({ id: u.id, pin }) });
+    closeSheet(); plexHome.data = null; px.secs = null;
+    toast('Now using Plex as ' + u.title); route();
+  } catch (e) { if (onError) onError(e.message); else toast(e.message); }
+}

public/music.js

@@ -108,8 +108,9 @@ async function musicRoute([kind = 'albums', key], st) {
   const card = (href, thumb, title, sub, round) => `<a class="acard ${round ? 'round' : ''}" href="${href}" data-q="${esc((title + ' ' + sub).toLowerCase())}">
     <img class="art" loading="lazy" alt="" src="${px.art(thumb)}"><b>${esc(title)}</b><small>${esc(sub)}</small></a>`;
   const listing = (items, html) => {
-    v.innerHTML = `<div class="wrap"><h1>Music</h1><p class="sub">${esc(st.server)}${secs.length > 1 ? ` · <a href="#" id="plib" style="color:var(--accent)">${esc(cur.title)} ▾</a>` : ''}</p>${seg}<input type="search" id="mq" placeholder="Filter" autocomplete="off">
+    v.innerHTML = `<div class="wrap"><h1>Music</h1><p class="sub">${esc(st.server)}${secs.length > 1 ? ` · <a href="#" id="plib" style="color:var(--accent)">${esc(cur.title)} ▾</a>` : ''}<span id="phu"></span></p>${seg}<input type="search" id="mq" placeholder="Filter" autocomplete="off">
       <div class="agrid" style="margin-top:14px">${html || '<p class="empty">Nothing here</p>'}</div></div>`;
+    plexHomeBadge(st);
     const pl2 = $('#plib');
     if (pl2) pl2.onclick = e => { e.preventDefault(); actionSheet('Music library', st.server, secs.map(x => ({ label: x.title + (x.key === cur.key ? '  ✓' : ''), icon: 'music',
       run: () => { const m = store.get('plex_lib', {}); m[st.server] = x.key; store.set('plex_lib', m); location.hash = '#/music/albums'; route(); } }))); };

public/settings.js

@@ -118,7 +118,7 @@ function viewSettings() {
     .catch(e => { const el = $('#sfst'); if (el) el.textContent = cfg.seafile + ' · ' + (sf.token() ? 'Signed in (could not check: ' + e.message + ')' : 'Signed out'); });
   if (allowed('music')) jfetch('/api/plex/status').then(st => {
     const el = $('#plexst'); if (!el) return;
-    el.textContent = st.signedIn ? (st.server ? 'Signed in · ' + st.server : 'Signed in · no server chosen') : 'Signed out';
+    el.textContent = st.signedIn ? (st.server ? 'Signed in · ' + st.server + (st.user ? ' · as ' + st.user.title : '') : 'Signed in · no server chosen') : 'Signed out';
     if (st.signedIn) { const b = $('#plexout'); b.hidden = false; b.onclick = async () => { await jfetch('/api/plex/logout', { method: 'POST' }); pl.a.pause(); pl.q = []; pl.i = -1; renderMini(); toast('Signed out of Plex'); viewSettings(); }; }
   }).catch(() => { const el = $('#plexst'); if (el) el.textContent = 'Unavailable'; });
   if (isAdmin) { loadPeople(); $('#addperson').onclick = () => addPersonSheet(); }