nate/hub
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Music: close button no longer offsets the Now Playing art, Family playlists get a 2x2 art cover, phone tabs fit one row with a More menu
build-container / build (push) Successful in 3m9s
Details

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed 2026-10-28 07:58:51 -04:00
1 parent e248bac143
commit 94ad5a8e1d
3 files changed
+29 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/music.js
+6 -2
View File
@@ -115,13 +115,17 @@ async function musicRoute([kind = 'featured', key, key2], st) {
px.serverKey = st.server;
const v = $('#view'), sec = await px.section(), secs = await px.sections(), cur = secs.find(x => x.key === sec) || secs[0];
const tabs = ['featured', 'mixes', 'albums', 'artists', 'playlists', 'favorites', 'stats', 'recent'], TAB_NAME = { recent: 'New', stats: 'Stats' };
const seg = `<div class="seg">${tabs.map(t => `<a href="#/music/${t}" class="${t === kind ? 'on' : ''}">${TAB_NAME[t] || t[0].toUpperCase() + t.slice(1)}</a>`).join('')}</div>`;
const tname = t => TAB_NAME[t] || t[0].toUpperCase() + t.slice(1), MAIN = ['featured', 'albums', 'artists', 'playlists'], MORE = tabs.filter(t => !MAIN.includes(t));
// wide screens: every tab in one row. phones: the four main tabs fill one row and the rest are behind "More"
const seg = `<div class="seg segwide">${tabs.map(t => `<a href="#/music/${t}" class="${t === kind ? 'on' : ''}">${tname(t)}</a>`).join('')}</div>
<div class="seg segphone">${MAIN.map(t => `<a href="#/music/${t}" class="${t === kind ? 'on' : ''}">${tname(t)}</a>`).join('')}<a href="#" id="segmore" class="${MORE.includes(kind) ? 'on' : ''}">${MORE.includes(kind) ? tname(kind) : 'More'} ▾</a></div>`;
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>`;
${thumb ? `<img class="art" loading="lazy" alt="" src="${px.art(thumb)}">` : '<span class="mixart"></span>'}<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>` : ''}<span id="phu"></span></p>${seg}${items === 'raw' ? '' : '<input type="search" id="mq" placeholder="Filter" autocomplete="off">'}
<div class="${items === 'raw' ? '' : 'agrid'}" style="margin-top:14px">${html || '<p class="empty">Nothing here</p>'}</div></div>`;
plexHomeBadge(st);
const sm = $('#segmore'); if (sm) sm.onclick = e => { e.preventDefault(); actionSheet('Music', '', MORE.map(t => ({ label: tname(t) + (t === kind ? ' ✓' : ''), icon: 'music', run: () => { location.hash = '#/music/' + t; } }))); };
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(); } }))); };