/*
* fee[dB]ack v0.3.0 โ Playlists + Saved for Later screens.
*
* Vanilla JS (constitution P-II). Core REST (/api/playlists, /api/saved/*),
* no capability domain. Renders #v3-playlists (list + detail with drag-
* reorder) and #v3-saved (the reserved system playlist). Exposes
* window.v3Saved.toggle(filename) for the "Save for later" affordance on song
* cards/rows (used by the library/dashboard).
*/
(function () {
'use strict';
const sm = window.feedBack;
const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => (
{ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
// Return null (don't throw) on a network/connection failure so a fetch
// rejection can't abort rendering โ matches the "degrades gracefully"
// contract and the other v3 modules' jget/jsend.
async function jget(u) { try { const r = await fetch(u); return r.ok ? r.json() : null; } catch (e) { return null; } }
async function jsend(method, u, body) {
try {
const r = await fetch(u, {
method, headers: { 'Content-Type': 'application/json' },
body: body == null ? undefined : JSON.stringify(body),
});
return r.ok ? r.json() : null;
} catch (e) { return null; }
}
// Content-dependent playlist cover: a custom uploaded cover wins; otherwise
// the playlist's own song art โ the icon when empty, one cover for a few
// songs, a 2ร2 mosaic at 4+. `art_urls` / `cover_url` come from /api/playlists.
function playlistCoverHtml(p) {
const box = 'w-full aspect-square rounded-lg overflow-hidden bg-fb-bg/50 mb-3';
const img = (u, cls) => ' + ')
';
if (p.cover_url) return '' + img(p.cover_url, 'w-full h-full object-cover') + '
';
const arts = Array.isArray(p.art_urls) ? p.art_urls : [];
if (!arts.length) {
return '' + (p.kind === 'album' ? '๐ฟ' : p.system_key ? '๐' : '๐ต') + '
';
}
if (arts.length < 4) return '' + img(arts[0], 'w-full h-full object-cover') + '
';
return '' +
arts.slice(0, 4).map((u) => img(u, 'w-full h-full object-cover')).join('') + '
';
}
// The slot's pinned-arrangement INDEX, resolved from the stored NAME
// against the slot's current chart (names survive rescans; an index
// wouldn't). null = no pin / the name isn't on this chart โ full song.
function _slotArrIndex(s) {
if (!s.arrangement || !Array.isArray(s.arrangements)) return null;
const m = s.arrangements.find((a) => a && (a.smart_name === s.arrangement || a.name === s.arrangement));
return (m && m.index != null) ? m.index : null;
}
function songRow(s, opts) {
opts = opts || {};
const handle = opts.draggable
? 'โ ฟ' : '';
const tuning = s.tuning_name
? '' + esc(s.tuning_name) + '' : '';
// โโ Curated-album slot extras (P6) โ mixes/saved emit none of this โโ
// A slot plays its RESOLVED chart (data-play-fn: the pinned file, or
// the work's current keeper when the pinned file is gone) with its
// pinned arrangement (data-play-arr); `missing` = the whole work left
// the library, so the row dims and loses play (denominator stays
// honest). โพ opens the slot editor (chart + arrangement pin).
const isAlbum = !!opts.album;
const missing = isAlbum && !!s.missing;
const playFn = s.resolved_filename || s.filename;
const arrIdx = isAlbum ? _slotArrIndex(s) : null;
const playAttrs = isAlbum && !missing
? ' data-play-fn="' + esc(playFn) + '"' + (arrIdx != null ? ' data-play-arr="' + arrIdx + '"' : '')
: '';
const acc = (isAlbum && typeof opts.acc === 'number')
? '' + Math.round(opts.acc * 100) + '%'
: '';
const pin = (isAlbum && s.arrangement)
? '' + esc(s.arrangement) + '' : '';
const orphan = (isAlbum && s.resolved_from_orphan)
? '(auto)' : '';
const slotBtn = (isAlbum && !missing)
? '' : '';
return '' +
handle +
' + ')
' +
'' + esc(s.title) + tuning + pin + orphan + '' +
'' + (missing ? 'Missing โ no version of this song is in your library' : esc(s.artist)) + '' +
acc +
(missing ? '' : '') +
slotBtn +
'' +
'';
}
function wireSongRows(listEl, pid, onChange) {
listEl.querySelectorAll('li[data-fn]').forEach((li) => {
const fn = li.getAttribute('data-fn');
li.querySelector('[data-v3-play]')?.addEventListener('click', () => {
// playSong decodeURIComponent()s its arg for the highway WS, so
// pass an encoded filename (like the rest of v3) โ a raw name
// with %/#/?/ in it would otherwise misroute or throw.
// Album slots override the play target (data-play-fn = the
// orphan-resolved chart) + pass the pinned arrangement index;
// mix/saved rows carry neither attribute and behave as before.
const pfn = li.getAttribute('data-play-fn') || fn;
const pa = li.getAttribute('data-play-arr');
if (typeof window.playSong === 'function') {
window.playSong(encodeURIComponent(pfn), pa == null ? undefined : Number(pa));
}
});
li.querySelector('[data-remove]')?.addEventListener('click', async () => {
await fetch('/api/playlists/' + pid + '/songs/' + encodeURIComponent(fn), { method: 'DELETE' });
onChange();
});
});
// Drag-reorder.
let dragEl = null;
listEl.querySelectorAll('li[draggable="true"]').forEach((li) => {
li.addEventListener('dragstart', () => { dragEl = li; li.classList.add('opacity-50'); });
li.addEventListener('dragend', () => { li.classList.remove('opacity-50'); });
li.addEventListener('dragover', (e) => {
e.preventDefault();
if (!dragEl || dragEl === li) return;
const rect = li.getBoundingClientRect();
const after = (e.clientY - rect.top) > rect.height / 2;
li.parentNode.insertBefore(dragEl, after ? li.nextSibling : li);
});
li.addEventListener('drop', async (e) => {
e.preventDefault();
const order = Array.from(listEl.querySelectorAll('li[data-fn]')).map((x) => x.getAttribute('data-fn'));
await jsend('POST', '/api/playlists/' + pid + '/reorder', { order });
// Re-sync from the server: if /reorder was rejected (concurrent
// change) or the request failed, the optimistic DOM order would
// otherwise diverge from what was actually persisted.
onChange();
});
});
}
// โโ #v3-playlists โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ--
async function renderPlaylists() {
const root = document.getElementById('v3-playlists');
if (!root) return;
const lists = (await jget('/api/playlists')) || [];
root.innerHTML =
'' +
'
' +
// Curated album (P6): a hand-picked ORDERED set with a chosen chart
// per track โ same machinery as a playlist, kind='album'.
'' +
'' +
'
' +
(lists.length
? '
' + lists.map((p) =>
'
').join('') + '
'
: '
No playlists yet. Create one to group songs.
') +
'
' +
'
' +
'Album repertoire' +
'' + mastered + ' of ' + tracks.length + ' mastered' +
(started ? ' · ' + started + ' in progress' : '') + '
' +
'
' +
'
' +
'
' +
'
' +
'
' + (isAlbum ? '๐ฟ ' : '') + esc(pl.name) + '
' +
'
' +
(pl.songs.length ? '' : '') +
(isSystem ? '' :
'' +
(pl.cover_url ? '' : '') +
'' +
'' +
'') +
'
' +
'
' +
meter +
(pl.songs.length
? '
' + pl.songs.map((s) => songRow(s, { draggable: !isSystem, album: isAlbum, acc: isAlbum ? slotAcc(s) : undefined })).join('') + '
'
: '
Empty โ add songs from the library' + (isAlbum ? ' (the โฎ menu or the batch bar\'s "Add to playlist")' : '') + '.
') +
'
' +
(pl && pl.songs.length
? '
' + pl.songs.map((s) => songRow(s, {})).join('') + '
'
: '
Nothing saved yet. Use โSave for laterโ on a song to add it here.
') +
'