${MODEL.filter(it => !it._del).slice().sort(sortFn).map(detailRow).join('')}
`
: SETTINGS.group
? groups.map(g => groupRow(g.type, g.items)).join('') // compact: label column + cards beside it
: groups.map(g => section(g.type, g.items)).join('');
root.innerHTML = bar(n) + commentPresets() + dropZone() + newSection() + body + deletedSection();
wire();
applyOriginal(); // keep the native/script view state across re-renders
applyZoomClass();
fitTypePills(); // show as many types as the pill width allows
fitToolbar(); // icon-only buttons if the toolbar would otherwise wrap
if (window.scrollY !== y) window.scrollTo(0, y);
}
// #234: a grid card's type pill shows as many of its types as fit on one line;
// a trailing "+" appears only when some types are hidden for lack of space.
function fitTypePills() {
root.querySelectorAll('.as-foot-type .as-type').forEach(pill => {
if (pill.classList.contains('as-type-add')) return; // untyped placeholder
const it = byId(cardId(pill)); if (!it || !it.types.length) return;
const types = it.types;
pill.textContent = types.join(', ');
let n = types.length;
while (n > 1 && pill.scrollWidth > pill.clientWidth) { n--; pill.textContent = types.slice(0, n).join(', ') + ' +'; }
});
}
// shared autocomplete of the comments already used on this release (#238 presets)
function commentPresets() {
const seen = [...new Set(MODEL.map(it => (it.comment || '').trim()).filter(Boolean))];
return ``;
}
function grouped() {
if (!SETTINGS.group) {
// Position view (committed order): new uploads sit INLINE, positioned among covers
const items = MODEL.filter(it => !it._del).slice().sort(sortFn);
return [{ type: null, items }];
}
// group mode is view-only; new uploads get their own section on top (see newSection)
let items = MODEL.filter(it => !it._del && !it._new);
// group by primary type; untyped → NO_TYPE; order groups by TYPE_ORDER then alpha
const map = new Map();
for (const it of items) { const t = (it.types[0] || NO_TYPE); if (!map.has(t)) map.set(t, []); map.get(t).push(it); }
const keys = [...map.keys()].sort((a, b) => {
const ia = TYPE_ORDER.indexOf(a), ib = TYPE_ORDER.indexOf(b);
if (a === NO_TYPE) return 1; if (b === NO_TYPE) return -1;
return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib) || a.localeCompare(b);
});
for (const k of keys) map.get(k).sort(sortFn);
return keys.map(k => ({ type: k, items: map.get(k) }));
}
const typeRank = t => { const i = TYPE_ORDER.indexOf(t); return i < 0 ? 99 : i; };
function sortFn(a, b) {
if (SETTINGS.sort === 'bytype') return typeRank(a.types[0] || '') - typeRank(b.types[0] || '') || a.order - b.order;
if (SETTINGS.sort === 'dim') return (b.w * b.h) - (a.w * a.h) || a.order - b.order;
if (SETTINGS.sort === 'newest') return b.id - a.id; // CAA id desc ≈ upload recency (no real date in CAA)
return a.order - b.order; // position (committed order)
}
const esc = s => String(s == null ? '' : s).replace(/[&<>"]/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c]));
function bar(n) {
return ``;
}
const commitInner = n => `✓Enter edit${n ? ` (${n})` : ''}`;
// #234: the selection cluster lives in the center of the main toolbar (the old
// bottom bulk bar is gone). syncSel() rebuilds just this span in place so
// right-click paint-select never reflows the grid.
function selBox() {
const sel = MODEL.filter(it => it._sel && !it._del);
return `${sel.length ? `${sel.length} selected` : 'none selected'}
${sel.length ? `
` : ''}`;
}
function section(type, items) {
const label = type === null ? 'All covers' : type;
return `${esc(label)}
${items.length}${items.map(card).join('')}
`;
}
// compact group: type label in a left column, cards flow beside it (no full-width waste)
function groupRow(type, items) {
const label = type === NO_TYPE ? 'No type' : type;
return `${esc(label)}${items.length}
${items.map(card).join('')}
⬇ Drop cover images hereor click to browse · new covers go first
New uploads
${news.length}${news.map(card).join('')}
`;
}
function deletedSection() {
const dels = MODEL.filter(it => it._del);
if (!dels.length) return '';
return `Marked for removal
${dels.length}${dels.map(card).join('')}
`;
}
function card(it) {
const src = it._new ? it._file : thumb(it.id, SETTINGS.tile > 260 ? 500 : 250);
return `${typePill}
`;
const dim = `${esc(dimText(it))}`;
if (it._del) return `${dim}
${typeRow}${cmt}${dim}
${typeRow}
${it._new ? 'NEW' : ''}})
${it._pdf ? 'PDF' : ''}
${esc(dimText(it))}
${it._new ? '' : `#${esc(it.id)}
`}
Sort
`
+ sorts.map(([v, l]) => ``).join('')
+ `View
`
+ [['grid', 'Grid', ''], ['detailed', 'Detailed view', '(list + all types & comment)'], ['group', 'Group by type', '(view-only)']]
.map(([v, l, note]) => ``).join('');
document.body.appendChild(pop);
placePop(pop, btn.getBoundingClientRect());
pop.querySelectorAll('input[name="as-vsort"]').forEach(r => r.onchange = () => { SETTINGS.sort = r.value; save(); render(); });
// #234: the view modes are mutually exclusive — Grid / Detailed / Group.
pop.querySelectorAll('input[name="as-vmode"]').forEach(r => r.onchange = () => {
SETTINGS.detailed = r.value === 'detailed'; SETTINGS.group = r.value === 'group';
save(); render();
});
const off = e => { if (!pop.contains(e.target) && e.target !== btn) { pop.remove(); document.removeEventListener('mousedown', off); } };
setTimeout(() => document.addEventListener('mousedown', off), 0);
}
// position a popover next to an anchor, flipping up / clamping so it stays on-screen
function placePop(pop, r) {
const ph = pop.offsetHeight, pw = pop.offsetWidth, vh = innerHeight, vw = innerWidth, M = 8;
let top = r.bottom + 3;
if (top + ph > vh - M && r.top - ph - 3 >= M) top = r.top - ph - 3; // flip above the anchor
top = Math.max(M, Math.min(top, vh - ph - M));
let left = Math.max(M, Math.min(r.left, vw - pw - M));
pop.style.top = (top + scrollY) + 'px';
pop.style.left = (left + scrollX) + 'px';
}
function openTypePop(chip) {
document.querySelectorAll('.as-pop').forEach(p => p.remove());
const it = byId(cardId(chip)); if (!it) return;
const pop = document.createElement('div'); pop.className = 'as-pop';
pop.innerHTML = `${ALL_TYPES.map(t => ``).join('')}
`;
document.body.appendChild(pop);
placePop(pop, chip.getBoundingClientRect());
pop.querySelectorAll('input').forEach(cb => cb.onchange = () => {
it.types = ALL_TYPES.filter(t => pop.querySelector(`input[value="${CSS.escape(t)}"]`).checked);
render();
});
const off = e => { if (!pop.contains(e.target)) { pop.remove(); document.removeEventListener('mousedown', off); } };
setTimeout(() => document.addEventListener('mousedown', off), 0);
}
let _drag = null;
// the block being dragged: the whole selection if the grabbed card is selected, else just it
const dragBlock = () => (_drag && _drag._sel) ? MODEL.filter(it => it._sel && !it._del).sort((a, b) => a.order - b.order) : (_drag ? [_drag] : []);
function wireDrag() {
root.querySelectorAll('.as-card[draggable="true"]').forEach(card => {
card.ondragstart = e => { _drag = byId(card.dataset.id); dragBlock().forEach(g => cardEl(g)?.classList.add('as-dragging')); e.dataTransfer.effectAllowed = 'move'; };
card.ondragend = () => { root.querySelectorAll('.as-dragging').forEach(c => c.classList.remove('as-dragging')); _drag = null; root.querySelectorAll('.as-drop').forEach(c => c.classList.remove('as-drop')); };
card.ondragover = e => {
const tgt = byId(card.dataset.id);
if (!_drag || dragBlock().includes(tgt)) return; // not onto a member of the moving block
e.preventDefault(); root.querySelectorAll('.as-drop').forEach(c => c.classList.remove('as-drop')); card.classList.add('as-drop');
};
card.ondrop = e => {
e.preventDefault(); const tgt = byId(card.dataset.id); const block = dragBlock();
if (!_drag || !tgt || block.includes(tgt)) return;
reorder(block, tgt); render();
};
});
}
const cardEl = it => root.querySelector(`.as-card[data-id="${CSS.escape(String(it.id))}"]`);
function reorder(block, tgt) {
// move the block (one card, or the whole selection) next to tgt, preserving the
// block's relative order. Drop on the side you came from: forward → after tgt.
const seq = MODEL.filter(it => !it._del).slice().sort((a, b) => a.order - b.order);
const set = new Set(block);
const fromFirst = Math.min(...block.map(b => seq.indexOf(b)));
const forward = fromFirst < seq.indexOf(tgt);
const rest = seq.filter(it => !set.has(it));
const to = rest.indexOf(tgt) + (forward ? 1 : 0);
rest.splice(to, 0, ...block);
rest.forEach((it, i) => it.order = i);
}
// ── actions ───────────────────────────────────────────────────────────────────
async function dlOne(it) {
const url = it._img || imgUrl(it.id);
const ext = (url.match(/\.(jpg|jpeg|png|gif|pdf|webp)(?:$|\?)/i) || [, 'jpg'])[1].toLowerCase();
const name = `${MBID}-${it.id}.${ext}`;
try {
// cross-origin is ignored by browsers — fetch the blob (CAA
// sends CORS) and download via a same-origin object URL so it actually saves
const blob = await fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.blob(); });
const obj = URL.createObjectURL(blob);
const a = document.createElement('a'); a.href = obj; a.download = name;
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(obj), 8000);
} catch (e) { window.open(url, '_blank'); } // fallback: just open it
}
let _dropZone = false;
function toggleDropZone() { _dropZone = !_dropZone; render(); if (_dropZone) root.querySelector('.as-dropzone')?.scrollIntoView({ block: 'nearest' }); }
function newItem(f) {
return { id: 'new-' + Math.random().toString(36).slice(2, 8), types: [], comment: '', order: 0, w: 0, h: 0,
_del: false, _new: true, _file: URL.createObjectURL(f), _fileObj: f, _origTypes: [], _origComment: '', _origOrder: -1 };
}
function addFiles(files) {
const news = [...files].filter(f => f.type.startsWith('image/') || f.type === 'application/pdf').map(newItem);
if (!news.length) return;
// new covers go FIRST (majkinetor: they were landing last), then existing in order
const rest = MODEL.slice().sort((a, b) => a.order - b.order);
MODEL = [...news, ...rest];
MODEL.forEach((it, i) => it.order = i);
_dropZone = false; render();
}
function pickFiles() {
const inp = document.createElement('input'); inp.type = 'file'; inp.accept = 'image/*,.pdf'; inp.multiple = true;
inp.onchange = () => addFiles(inp.files);
inp.click();
}
// ── Phase 2a: apply staged changes as real MB edits (form-replay) ─────────────
const R = `/release/${MBID}`;
// credit the tool in every edit note (user's note first, then the attribution)
const editNote = m => [m.note && m.note.trim(), ATTRIBUTION].filter(Boolean).join('\n\n');
async function getPostForm(url) {
const html = await fetch(url, { credentials: 'same-origin' }).then(r => { if (!r.ok) throw new Error('GET ' + r.status); return r.text(); });
const doc = new DOMParser().parseFromString(html, 'text/html');
const form = [...doc.querySelectorAll('form')].find(f => (f.getAttribute('method') || '').toUpperCase() === 'POST');
if (!form) throw new Error('no POST form at ' + url);
form._action = new URL(form.getAttribute('action') || url, location.origin + url).href;
return form;
}
// carry every hidden field (csrf/nonce/etc.) verbatim — that's the point of form-replay
function copyHidden(form, params, skip) {
form.querySelectorAll('input[type=hidden]').forEach(h => { if (h.name && !(skip && skip.test(h.name))) params.append(h.name, h.value); });
}
function typeMapOf(form, prefix) {
const m = {};
form.querySelectorAll(`input[name="${prefix}.type_id"]`).forEach(cb => { const l = cb.closest('label'); const n = (l ? l.textContent : '').trim(); if (n) m[n] = cb.value; });
return m;
}
async function buildEdit(it, meta) { // retype / comment on an existing cover
const form = await getPostForm(`${R}/edit-cover-art/${it.id}`);
const p = new URLSearchParams(); copyHidden(form, p);
const tm = typeMapOf(form, 'edit-cover-art');
it.types.forEach(t => { if (tm[t]) p.append('edit-cover-art.type_id', tm[t]); });
p.append('edit-cover-art.comment', it.comment);
p.append('edit-cover-art.edit_note', editNote(meta));
if (meta.votable) p.append('edit-cover-art.make_votable', '1');
return { method: 'POST', url: form._action, body: p };
}
async function buildRemove(it, meta) {
const form = await getPostForm(`${R}/remove-cover-art/${it.id}`);
const p = new URLSearchParams(); copyHidden(form, p);
p.append('confirm.edit_note', editNote(meta));
if (meta.votable) p.append('confirm.make_votable', '1');
return { method: 'POST', url: form._action, body: p };
}
// Phase 2b: upload a new image. (1) sign via MB, (2) POST file to archive.org, (3) register.
async function signUpload(mime) {
const r = await fetch(`/ws/js/cover-art-upload/${MBID}?mime_type=${encodeURIComponent(mime || 'image/jpeg')}`, { credentials: 'same-origin' });
if (!r.ok) throw new Error('sign ' + r.status);
return r.json(); // { action, image_id, formdata, nonce }
}
let _addForm = null;
const addForm = () => (_addForm = _addForm || getPostForm(`${R}/add-cover-art`));
// step 1 (parallel-safe): sign + PUT the file to archive.org. Stores the signed
// upload on the item; the slow network part — like Turbo, run these concurrently.
async function uploadStep(it) {
const mime = (it._fileObj && it._fileObj.type) || 'image/jpeg';
const signed = await signUpload(mime);
const fd = new FormData();
Object.entries(signed.formdata).forEach(([k, v]) => fd.append(k, v));
fd.append('file', it._fileObj, (it._fileObj && it._fileObj.name) || String(signed.image_id));
const up = await fetch(signed.action, { method: 'POST', body: fd }); // archive.org (auth in the signed policy)
if (!up.ok) throw new Error('IA upload ' + up.status);
it._signed = signed;
}
// step 2 (SEQUENTIAL): register on MB. Submitted in order so positions stay correct.
async function registerStep(it, meta) {
const form = await addForm();
const tm = typeMapOf(form, 'add-cover-art');
const typeIds = it.types.map(t => tm[t]).filter(Boolean);
const mime = (it._fileObj && it._fileObj.type) || 'image/jpeg';
const p = new URLSearchParams(); copyHidden(form, p, /\.(nonce|position|id|type_id|comment|mime_type)$/);
p.append('add-cover-art.id', it._signed.image_id);
p.append('add-cover-art.position', String(it.order + 1));
p.append('add-cover-art.nonce', it._signed.nonce);
p.append('add-cover-art.mime_type', mime); // required Select (MB Form::Role::AddArt)
typeIds.forEach(id => p.append('add-cover-art.type_id', id));
p.append('add-cover-art.comment', it.comment);
p.append('add-cover-art.edit_note', editNote(meta));
if (meta.votable) p.append('add-cover-art.make_votable', '1');
const add = await fetch(`${R}/add-cover-art`, { method: 'POST', body: p, credentials: 'same-origin' });
if (!add.ok) throw new Error('add ' + add.status);
}
async function runAdd(it, meta, dry, report) { // dry-run summary only (live uses runAdds)
const mime = (it._fileObj && it._fileObj.type) || 'image/jpeg';
const form = await addForm();
const typeIds = it.types.map(t => typeMapOf(form, 'add-cover-art')[t]).filter(Boolean);
report(`1. GET /ws/js/cover-art-upload/${MBID}?mime_type=${mime} → {action,image_id,formdata,nonce}\n`
+ `2. POST ‹signed archive.org action› multipart: ‹policy,signature,key,AWSAccessKeyId…› + file (${(it._fileObj && it._fileObj.name) || 'file'}, ${(it._fileObj && it._fileObj.size) || '?'}b)\n`
+ `3. POST ${R}/add-cover-art\n add-cover-art.id=‹image_id›\n add-cover-art.position=${it.order + 1}\n add-cover-art.nonce=‹nonce›\n add-cover-art.mime_type=${mime}\n`
+ ` add-cover-art.type_id=${typeIds.join(',') || '(none)'}\n add-cover-art.comment=${it.comment}\n add-cover-art.edit_note=${editNote(meta).replace(/\n+/g, ' / ')}`
+ (meta.votable ? `\n add-cover-art.make_votable=1` : ''));
}
async function buildReorder(meta) { // single edit: full ordered artwork list
const form = await getPostForm(`${R}/reorder-cover-art`);
const p = new URLSearchParams(); copyHidden(form, p, /\.artwork\./);
const seq = MODEL.filter(it => !it._del && !it._new).sort((a, b) => a.order - b.order);
seq.forEach((it, i) => { p.append(`reorder-cover-art.artwork.${i}.id`, it.id); p.append(`reorder-cover-art.artwork.${i}.position`, String(i + 1)); });
p.append('reorder-cover-art.edit_note', editNote(meta));
if (meta.votable) p.append('reorder-cover-art.make_votable', '1');
return { method: 'POST', url: form._action, body: p };
}
// ordered work list (uploads are Phase 2b): remove → retype/comment → reorder
function buildPlan() {
const plan = [];
MODEL.filter(it => it._new && !it._del).forEach(it => plan.push({ label: `Add ${it.types[0] || 'new image'}${it.comment ? ` “${it.comment}”` : ''} (upload)`, kind: 'add', it, run: (m, dry, report) => runAdd(it, m, dry, report) }));
MODEL.filter(it => it._del && !it._new).forEach(it => plan.push({ label: `Remove ${it.types[0] || 'cover'}`, id: it.id, kind: 'remove', build: m => buildRemove(it, m) }));
MODEL.filter(it => !it._del && !it._new && (it.comment !== it._origComment || it.types.join('|') !== it._origTypes.join('|')))
.forEach(it => {
// readable description of what changed on this cover (the panel list now
// doubles as the "pending operations" view — #234)
const ch = [];
if (it.types.join('|') !== it._origTypes.join('|')) ch.push(`type → ${it.types.join(', ') || '(none)'}`);
if (it.comment !== it._origComment) ch.push(`comment → ${it.comment ? `“${it.comment}”` : '(cleared)'}`);
plan.push({ label: `Edit ${it._origTypes[0] || 'cover'}: ${ch.join(', ')}`, id: it.id, kind: 'edit', build: m => buildEdit(it, m) });
});
const ex = MODEL.filter(it => !it._del && !it._new);
const now = ex.slice().sort((a, b) => a.order - b.order).map(it => it.id).join(',');
const orig = ex.slice().sort((a, b) => a._origOrder - b._origOrder).map(it => it.id).join(',');
if (now !== orig) plan.push({ label: 'Reorder covers', kind: 'reorder', build: m => buildReorder(m) });
return plan;
}
function enterEdit() {
document.getElementById('as-commit')?.remove();
const plan = buildPlan();
const ov = document.createElement('div'); ov.id = 'as-commit';
ov.innerHTML = `Apply ${plan.length} change${plan.length===1?'':'s'} as MusicBrainz edits
${plan.map((o, i) => `
○ ${esc(o.label)}${o.id ? ` #${esc(o.id)}` : ''}${o.skip ? `${esc(o.skip)}` : ''}
`).join('')}${esc(it.comment)}
`;
area.querySelector('.as-lb-cmt-text').onclick = () => { _lbEditCmt = true; paintCmtArea(ov, byId(_lb)); };
} else {
area.innerHTML = ``;
area.querySelector('.as-lb-cmtadd').onclick = () => { _lbEditCmt = true; paintCmtArea(ov, byId(_lb)); };
}
}
let _lbDirty = false;
function closeLightbox() {
stopPlay(); resetZoom(); _lb = null;
const ov = document.getElementById('as-lb'); if (ov) ov.style.display = 'none';
if (_lbDirty) { _lbDirty = false; render(); } // reflect comment edits in the grid
}
let _play = null;
function updatePlayBtn() { const b = document.querySelector('.as-lb-play'); if (b) b.textContent = _play ? '⏸ Pause' : '▶ Play'; }
function stopPlay() { if (_play) { clearInterval(_play); _play = null; updatePlayBtn(); } }
function togglePlay() { if (_play) stopPlay(); else { _play = setInterval(() => lbNav(1), 3000); updatePlayBtn(); } }
function lbNav(d, keepEdit) {
const seq = visible().filter(it => !it._pdf); // PDFs open in a tab, not the lightbox
if (!seq.length) return;
let i = seq.findIndex(it => String(it.id) === String(_lb));
if (i < 0) i = 0;
i = (i + d + seq.length) % seq.length;
// keepEdit (Enter in the comment field) carries edit-mode to the next image
_lb = seq[i].id; _cursorId = _lb; _lbEditCmt = !!keepEdit; paintLightbox(); markCursor(true); preloadNeighbors();
}
// ── keyboard cursor (arrows select / move; Enter opens lightbox) ──────────────
let _cursorId = null;
function markCursor(scroll) {
root.querySelectorAll('.as-card.as-cursor').forEach(c => c.classList.remove('as-cursor'));
if (!_cursorId) return;
const c = root.querySelector(`.as-card[data-id="${CSS.escape(String(_cursorId))}"]`);
if (c) { c.classList.add('as-cursor'); if (scroll) c.scrollIntoView({ block: 'nearest' }); }
}
function moveCursor(dx, dy) {
const cards = [...root.querySelectorAll('.as-card:not(.del)')];
if (!cards.length) return;
let cur = cards.find(c => c.dataset.id === String(_cursorId)) || cards[0];
if (!_cursorId) { _cursorId = cur.dataset.id; markCursor(true); return; }
const r0 = cur.getBoundingClientRect();
let best = null, bestD = Infinity;
for (const c of cards) {
if (c === cur) continue;
const r = c.getBoundingClientRect();
const ddx = (r.left + r.width / 2) - (r0.left + r0.width / 2);
const ddy = (r.top + r.height / 2) - (r0.top + r0.height / 2);
if (dx > 0 && ddx <= 4) continue; if (dx < 0 && ddx >= -4) continue;
if (dy > 0 && ddy <= 4) continue; if (dy < 0 && ddy >= -4) continue;
// penalise off-axis drift so motion stays mostly in the requested direction
const d = (dx ? Math.abs(ddx) + Math.abs(ddy) * 3 : Math.abs(ddy) + Math.abs(ddx) * 3);
if (d < bestD) { bestD = d; best = c; }
}
if (best) { _cursorId = best.dataset.id; markCursor(true); }
}
document.addEventListener('keydown', e => {
const t = e.target;
if (t && /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)) return;
if (_lb) {
if (e.key === 'Escape') { e.preventDefault(); closeLightbox(); }
else if (e.key === 'ArrowLeft') { e.preventDefault(); lbNav(-1); }
else if (e.key === 'ArrowRight') { e.preventDefault(); lbNav(1); }
else if (e.key === 'ArrowUp') { e.preventDefault(); zoomKey(1); } // ↑ zoom in
else if (e.key === 'ArrowDown') { e.preventDefault(); zoomKey(-1); } // ↓ zoom out
else if (e.key === 'p' || e.key === 'P') { e.preventDefault(); togglePlay(); }
return;
}
if (!root.isConnected || !root.querySelector('.as-card')) return;
const map = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
if (map[e.key]) { e.preventDefault(); moveCursor(map[e.key][0], map[e.key][1]); }
else if (e.key === 'Enter' && _cursorId) { e.preventDefault(); openLightbox(_cursorId); }
else if (e.key === ' ' && _cursorId) { e.preventDefault(); const it = byId(_cursorId); if (it && !it._del) { it._sel = !it._sel; render(); } }
});
function openBulkTypePop(btn) {
document.querySelectorAll('.as-pop').forEach(p => p.remove());
const sel = MODEL.filter(it => it._sel && !it._del); if (!sel.length) return;
const pop = document.createElement('div'); pop.className = 'as-pop';
pop.innerHTML = `Set type on ${sel.length} cover${sel.length===1?'':'s'}
`
+ `${ALL_TYPES.map(t => ``).join('')}
`
+ ``;
document.body.appendChild(pop);
placePop(pop, btn.getBoundingClientRect());
const picked = () => ALL_TYPES.filter(t => pop.querySelector(`input[value="${CSS.escape(t)}"]`).checked);
pop.querySelector('.as-pop-apply').onclick = () => { const ts = picked(); sel.forEach(it => it.types = ts.slice()); pop.remove(); render(); };
pop.querySelector('.as-pop-add').onclick = () => { const ts = picked(); sel.forEach(it => it.types = [...new Set([...it.types, ...ts])]); pop.remove(); render(); };
const off = e => { if (!pop.contains(e.target)) { pop.remove(); document.removeEventListener('mousedown', off); } };
setTimeout(() => document.addEventListener('mousedown', off), 0);
}
// #236: set one comment on every selected cover at once. Pre-fills the shared
// comment if they already agree; Apply writes it, Clear blanks them all.
function openBulkCommentPop(btn) {
document.querySelectorAll('.as-pop').forEach(p => p.remove());
const sel = MODEL.filter(it => it._sel && !it._del); if (!sel.length) return;
const common = sel.every(it => it.comment === sel[0].comment) ? sel[0].comment : '';
const pop = document.createElement('div'); pop.className = 'as-pop as-cmt-pop';
pop.innerHTML = `Comment on ${sel.length} cover${sel.length===1?'':'s'}
`
+ ``
+ ``;
document.body.appendChild(pop);
placePop(pop, btn.getBoundingClientRect());
const inp = pop.querySelector('.as-bulk-cmt'); inp.focus(); inp.select();
const apply = v => { sel.forEach(it => it.comment = v); pop.remove(); render(); };
pop.querySelector('.as-pop-apply').onclick = () => apply(inp.value);
pop.querySelector('.as-bulk-cmt-clr').onclick = () => apply('');
inp.onkeydown = e => { if (e.key === 'Enter') { e.preventDefault(); apply(inp.value); } else if (e.key === 'Escape') { e.preventDefault(); pop.remove(); } };
const off = e => { if (!pop.contains(e.target) && e.target !== btn) { pop.remove(); document.removeEventListener('mousedown', off); } };
setTimeout(() => document.addEventListener('mousedown', off), 0);
}
// ── #239 postable report (Markdown / HTML) of the selected covers ─────────────
// release artist(s) + title, linked, parsed from the page header
function releaseInfo() {
const title = (document.querySelector('h1 bdi') || document.querySelector('h1'))?.textContent?.trim() || 'release';
const sub = document.querySelector('p.subheader') || document.querySelector('.subheader');
const artists = sub ? [...sub.querySelectorAll('a[href*="/artist/"]')]
.filter(a => !/\/create(\?|$)/.test(a.getAttribute('href')))
.map(a => ({ name: a.textContent.trim(), url: 'https://musicbrainz.org' + a.getAttribute('href').split(/[?#]/)[0] })) : [];
return { title, url: `https://musicbrainz.org/release/${MBID}`, artists };
}
function buildReport(opts) {
const info = releaseInfo();
const sel = MODEL.filter(it => it._sel && !it._del && !it._new).slice().sort(sortFn);
const sz = opts.size, W = sz === 'original' ? null : sz;
const url = it => `https://coverartarchive.org/release/${MBID}/${it.id}${sz === 'original' ? '' : '-' + sz}.jpg`;
const alt = it => (it.types[0] || 'cover').toLowerCase();
const cap = it => [it.types.join(', ') || 'no type', it.comment].filter(Boolean).join(' — ');
const out = [];
if (opts.format === 'html') {
const artists = info.artists.length ? info.artists.map(a => `${esc(a.name)}`).join(', ') : 'Unknown artist';
out.push(`