audio/noiz
2
0
Fork 0
mirror of https://codeberg.org/armin/noiz.git synced 2026-09-01 05:50:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

Display cover art in player area; add Clear button and reduce analyzer gap

Browse source
This commit is contained in:
Armin 2026-07-08 17:56:33 +02:00
commit 5bcfd0499a
1 changed files with 40 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

42
index.html
View file

@ -33,7 +33,7 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
.player .track-info .artist-name { font-size: 12px; color: #6b7089; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player .track-info .artist-name { font-size: 12px; color: #6b7089; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big-time { font-size: 28px; font-weight: 200; color: #d2d4de; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } .big-time { font-size: 28px; font-weight: 200; color: #d2d4de; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.big-time .sep { color: #6b7089; margin: 0 4px; } .big-time .sep { color: #6b7089; margin: 0 4px; }
.canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; } .canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; margin-right: 16px; }
.progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } .progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.waveform-wrap { flex: 1; min-width: 0; cursor: pointer; position: relative; height: 42px; } .waveform-wrap { flex: 1; min-width: 0; cursor: pointer; position: relative; height: 42px; }
.waveform-wrap canvas { display: block; width: 100%; height: 42px; } .waveform-wrap canvas { display: block; width: 100%; height: 42px; }
@ -136,6 +136,10 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
<div class="content"> <div class="content">
<div class="pinned" id="pinned"> <div class="pinned" id="pinned">
<div class="player" id="player"> <div class="player" id="player">
<div class="cover-art" id="coverArt">
<span class="no-cover" id="coverPlaceholder">&#9835;</span>
<img id="coverImage" src="" alt="" style="display:none">
</div>
<div class="canvas-area" id="canvasArea"> <div class="canvas-area" id="canvasArea">
<div class="empty-state" id="emptyState"> <div class="empty-state" id="emptyState">
<div class="icon">&#9835;</div> <div class="icon">&#9835;</div>
@ -1462,10 +1466,28 @@ function playTrack(i) {
} }
function updateUI() { function updateUI() {
const t = tracks[currentIndex]; const t = tracks[currentIndex];
if (!t) return; if (!t) {
trackTitle.textContent = '';
trackArtist.textContent = '';
footerTrack.textContent = '';
audioInfo.textContent = '';
coverImage.src = '';
coverImage.style.display = 'none';
coverPlaceholder.style.display = '';
return;
}
trackTitle.textContent = t.name; trackTitle.textContent = t.name;
trackArtist.textContent = t.artist || 'Unknown Artist'; trackArtist.textContent = t.artist || 'Unknown Artist';
footerTrack.textContent = `${t.name}${t.artist ? ' - ' + t.artist : ''}`; footerTrack.textContent = `${t.name}${t.artist ? ' - ' + t.artist : ''}`;
if (t.picture) {
coverImage.src = t.picture;
coverImage.style.display = '';
coverPlaceholder.style.display = 'none';
} else {
coverImage.src = '';
coverImage.style.display = 'none';
coverPlaceholder.style.display = '';
}
const ai = t.ainfo || {}; const ai = t.ainfo || {};
const parts = []; const parts = [];
if (ai.codec) parts.push(ai.codec); if (ai.codec) parts.push(ai.codec);
@ -1611,6 +1633,22 @@ addFolderBtn.addEventListener('click', addFolder);
addFilesBtn.addEventListener('click', addFiles); addFilesBtn.addEventListener('click', addFiles);
isolateBtn.addEventListener('click', isolateTracks); isolateBtn.addEventListener('click', isolateTracks);
deleteBtn.addEventListener('click', deleteTrack); deleteBtn.addEventListener('click', deleteTrack);
clearBtn.addEventListener('click', () => {
if (tracks.length === 0) return;
audio.pause();
audio.src = '';
audio.load();
if (isCrossfading) { audioNext.pause(); audioNext.src = ''; audioNext.load(); }
for (const t of tracks) URL.revokeObjectURL(t.url);
tracks = [];
currentIndex = -1;
selectedIndices.clear();
anchorTrack = null;
renderTracks();
updateUI();
drawSpectrum(spectrumCtx, new Uint8Array(1024), new Uint8Array(1024));
vuDraw(new Uint8Array(1024), new Uint8Array(1024));
});
infoBtn.addEventListener('click', openTagEditor); infoBtn.addEventListener('click', openTagEditor);
tagSaveBtn.addEventListener('click', saveTagEditor); tagSaveBtn.addEventListener('click', saveTagEditor);
tagCancelBtn.addEventListener('click', cancelTagEditor); tagCancelBtn.addEventListener('click', cancelTagEditor);