Add per-song notes on playlist entries
This commit is contained in:
Jonathan Sykes
104
frontend/app.js
104
frontend/app.js
@@ -2209,8 +2209,12 @@ function updateServiceMode() {
|
||||
if (chanEl) chanEl.textContent = meta ? (meta.channel || '') : '';
|
||||
|
||||
// Current track note (Section 5): read entry.notes, degrade gracefully if absent
|
||||
const currentEntry = (queue && queueIndex >= 0 && queueIndex < queue.length) ? queue[queueIndex] : meta;
|
||||
const note = (currentEntry && currentEntry.notes) ? String(currentEntry.notes).trim() : '';
|
||||
const currentEntry = (queue && queueIndex >= 0 && queueIndex < queue.length)
|
||||
? queue[queueIndex]
|
||||
: (currentPlaylistEntry() || meta);
|
||||
const note = (currentEntry && currentEntry.notes)
|
||||
? String(currentEntry.notes).trim()
|
||||
: ((meta && meta.notes) ? String(meta.notes).trim() : '');
|
||||
const noteEl = $('serviceNote');
|
||||
if (noteEl) {
|
||||
if (note) {
|
||||
@@ -3251,8 +3255,34 @@ function renderCard(v, index, list) {
|
||||
openChannel(channelKeyOf(v), v.channel);
|
||||
});
|
||||
}
|
||||
|
||||
// Playlist view: note under title (if present) and note edit button (Section 5)
|
||||
if (view.type === 'playlist') {
|
||||
const hasNote = !!(v.notes && v.notes.trim());
|
||||
if (hasNote) {
|
||||
const noteEl = document.createElement('div');
|
||||
noteEl.className = 'card-note';
|
||||
noteEl.textContent = v.notes.trim();
|
||||
noteEl.title = v.notes.trim();
|
||||
const titleEl = card.querySelector('.card-title');
|
||||
if (titleEl) titleEl.after(noteEl);
|
||||
}
|
||||
|
||||
const noteBtn = document.createElement('button');
|
||||
noteBtn.type = 'button';
|
||||
noteBtn.className = 'card-note-btn' + (hasNote ? ' has-note' : '');
|
||||
noteBtn.title = hasNote ? 'Edit note' : 'Add note';
|
||||
noteBtn.textContent = '✎';
|
||||
noteBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openSongNoteModal(v);
|
||||
});
|
||||
const menuBtn = card.querySelector('.card-menu');
|
||||
card.insertBefore(noteBtn, menuBtn);
|
||||
}
|
||||
|
||||
card.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.card-menu') || e.target.closest('.card-del') || e.target.closest('.card-channel.link')) return;
|
||||
if (e.target.closest('.card-menu') || e.target.closest('.card-del') || e.target.closest('.card-note-btn') || e.target.closest('.card-channel.link')) return;
|
||||
if (selectMode) { toggleSelectCard(v.id); return; }
|
||||
playFromList(list, index, view.type === 'playlist' ? 'playlist:' + view.id : view.type);
|
||||
});
|
||||
@@ -3680,6 +3710,74 @@ function renamePlaylist(pl) {
|
||||
setTimeout(() => { input.focus(); input.select(); }, 50);
|
||||
}
|
||||
|
||||
function openSongNoteModal(entry) {
|
||||
const body = document.createElement('div');
|
||||
body.className = 'song-note-modal';
|
||||
|
||||
if (entry.title) {
|
||||
const sub = document.createElement('div');
|
||||
sub.className = 'modal-subhead';
|
||||
sub.textContent = entry.title;
|
||||
body.appendChild(sub);
|
||||
}
|
||||
|
||||
const ta = document.createElement('textarea');
|
||||
ta.placeholder = 'Key, capo, arrangement cues…';
|
||||
ta.value = entry.notes || '';
|
||||
ta.maxLength = 500;
|
||||
ta.rows = 4;
|
||||
|
||||
const count = document.createElement('div');
|
||||
count.className = 'modal-char-count';
|
||||
const updateCount = () => {
|
||||
count.textContent = `${ta.value.length} / 500`;
|
||||
};
|
||||
ta.addEventListener('input', updateCount);
|
||||
updateCount();
|
||||
|
||||
body.append(ta, count);
|
||||
|
||||
const save = () => {
|
||||
const text = (ta.value || '').trim().slice(0, 500);
|
||||
if (text) {
|
||||
entry.notes = text;
|
||||
} else {
|
||||
delete entry.notes;
|
||||
}
|
||||
|
||||
// Keep live playing metadata in sync if this song is playing from this playlist
|
||||
if (current && current.meta && current.meta.id === entry.id) {
|
||||
if (queueSource && queueSource.startsWith('playlist:')) {
|
||||
if (text) current.meta.notes = text;
|
||||
else delete current.meta.notes;
|
||||
updateServiceMode();
|
||||
}
|
||||
}
|
||||
|
||||
persist();
|
||||
closeModal();
|
||||
renderList();
|
||||
toast(text ? 'Note saved' : 'Note cleared');
|
||||
};
|
||||
|
||||
ta.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
save();
|
||||
}
|
||||
});
|
||||
|
||||
showModal('Song note', body, [
|
||||
{ label: 'Cancel', onClick: closeModal },
|
||||
{ label: 'Save', primary: true, onClick: save },
|
||||
]);
|
||||
|
||||
setTimeout(() => {
|
||||
ta.focus();
|
||||
ta.select();
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function updatePlaylistOfflineButton(btn, pl) {
|
||||
if (!btn || !pl) return;
|
||||
const stats = playlistOfflineStats(pl);
|
||||
|
||||
@@ -983,6 +983,15 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-channel { font-size: 12px; color: var(--text-dim); margin-top: 5px; }
|
||||
.card-note {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
.card-menu {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
@@ -1138,6 +1147,38 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
|
||||
transition: border-color 0.16s, box-shadow 0.16s;
|
||||
}
|
||||
.modal input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,75,50,0.12); }
|
||||
.modal textarea {
|
||||
width: 100%;
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
padding: 11px 13px;
|
||||
color: var(--text);
|
||||
font-family: var(--ui);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
min-height: 90px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.16s, box-shadow 0.16s;
|
||||
}
|
||||
.modal textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,75,50,0.12); }
|
||||
.modal-subhead {
|
||||
font-size: 13px;
|
||||
color: var(--text-2);
|
||||
margin: -10px 0 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.modal-char-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
text-align: right;
|
||||
margin-top: 5px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.modal-list { display: flex; flex-direction: column; gap: 5px; max-height: 280px; overflow-y: auto; margin-top: 2px; }
|
||||
.modal-list button {
|
||||
text-align: left;
|
||||
@@ -1581,6 +1622,40 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
|
||||
.card-del:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
|
||||
.saved-card .card-del { opacity: 0.85; }
|
||||
|
||||
/* ============================================================================
|
||||
* Per-card note button (playlist view)
|
||||
* ========================================================================== */
|
||||
.card-note-btn {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text-dim);
|
||||
width: 30px; height: 30px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.16s var(--ease);
|
||||
}
|
||||
.card:hover .card-note-btn { opacity: 1; }
|
||||
.card-note-btn:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
|
||||
.card-note-btn.has-note {
|
||||
opacity: 1;
|
||||
color: var(--accent);
|
||||
border-color: rgba(255, 75, 50, 0.35);
|
||||
background: rgba(255, 75, 50, 0.1);
|
||||
}
|
||||
.card-note-btn.has-note:hover {
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
* Modal divider label
|
||||
* ========================================================================== */
|
||||
@@ -1657,6 +1732,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
|
||||
}
|
||||
:root[data-theme="contrast"] .card { border-color: var(--line-soft); }
|
||||
:root[data-theme="contrast"] .card-channel,
|
||||
:root[data-theme="contrast"] .card-note,
|
||||
:root[data-theme="contrast"] .card-title { color: var(--text); }
|
||||
|
||||
/* ============================================================================
|
||||
@@ -1676,6 +1752,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
|
||||
:root[data-density="compact"] .thumb { width: 104px; }
|
||||
:root[data-density="compact"] .card-title { font-size: 12.5px; -webkit-line-clamp: 1; }
|
||||
:root[data-density="compact"] .card-channel { margin-top: 2px; }
|
||||
:root[data-density="compact"] .card-note { font-size: 11px; margin-top: 1px; }
|
||||
:root[data-density="compact"] .nav-item { padding: 8px 12px; }
|
||||
:root[data-density="compact"] .playlist-item { padding: 7px 12px; }
|
||||
:root[data-density="compact"] .controls { padding: 12px 14px; margin-top: 12px; }
|
||||
@@ -2235,6 +2312,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
|
||||
.card-channel { margin-top: 6px; }
|
||||
/* No hover on touch — keep row actions always visible and finger-sized */
|
||||
.card-menu { width: 38px; height: 38px; border-radius: 12px; opacity: 1; }
|
||||
.card-note-btn { opacity: 1; width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
|
||||
.card-del { opacity: 1; width: 36px; height: 36px; border-radius: 11px; }
|
||||
|
||||
/* --- Settings: roomier rows --------------------------------------------- */
|
||||
@@ -2316,6 +2394,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
.modal input[type="text"] { font-size: 16px; padding: 13px 15px; border-radius: 13px; }
|
||||
.modal textarea { font-size: 16px; padding: 13px 15px; border-radius: 13px; }
|
||||
.modal-list button { padding: 14px 15px; border-radius: 13px; }
|
||||
.modal-actions { margin-top: 22px; }
|
||||
.modal-actions .btn { padding: 13px 20px; border-radius: 13px; }
|
||||
|
||||
Reference in New Issue
Block a user