vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

IMP: html/css

Browse source
This commit is contained in:
Julien Maille 2026-01-04 13:40:02 +01:00
parent c77334a807
commit 4fc36f63e4
4 changed files with 89 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -293,7 +293,7 @@
<div class="detail-header-info">
<h1 class="title" id="playlist-detail-title"></h1>
<div class="meta" id="playlist-detail-meta"></div>
<p id="playlist-detail-description" class="detail-description"></p>
<div class="meta" id="playlist-detail-description" class="detail-description"></div>
<div class="detail-header-actions">
<button id="play-playlist-btn" class="btn-primary">
<span>Play</span>
@ -316,11 +316,14 @@
<div class="detail-header-info">
<h1 class="title" id="mix-detail-title"></h1>
<div class="meta" id="mix-detail-meta"></div>
<p id="mix-detail-description" class="detail-description"></p>
<div class="meta" id="mix-detail-description" class="detail-description"></div>
<div class="detail-header-actions">
<button id="play-mix-btn" class="btn-primary">
<span>Play</span>
</button>
<button id="download-mix-btn" class="btn-primary">
<span>Download</span>
</button>
</div>
</div>
</header>
@ -596,7 +599,7 @@
Monochrome is a lightweight, privacy-focused music streaming client designed for high-fidelity audio playback.
Built with modern web technologies, it provides a clean, distraction-free listening experience.
<br>
<h3><strong>NOTE:</strong> The instance you are currently on (monochrome.samidy.com) is a Community Fork adding additional features (library/playlists, accounts, mix + Big UI Improvments & More).</h3>
<strong>NOTE:</strong> The instance you are currently on (monochrome.samidy.com) is a Community Fork adding additional features (library/playlists, accounts, mix + Big UI Improvments & More).
<strong>I Am Not Affiliated With The Original owner.</strong>
</p>
<br>

24
js/app.js
View file

@ -325,6 +325,30 @@ document.addEventListener('DOMContentLoaded', async () => {
alert('Failed to play album: ' + error.message);
}
}
if (e.target.closest('#download-mix-btn')) {
const btn = e.target.closest('#download-mix-btn');
if (btn.disabled) return;
const param = window.location.hash.split('#mix/')[1];
if (!param) return;
const [mixId] = param.split('?');
btn.disabled = true;
const originalHTML = btn.innerHTML;
btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
try {
const { mix, tracks } = await api.getMix(mixId);
await downloadPlaylistAsZip(mix, tracks, api, player.quality, lyricsManager);
} catch (error) {
console.error('Mix download failed:', error);
alert('Failed to download mix: ' + error.message);
} finally {
btn.disabled = false;
btn.innerHTML = originalHTML;
}
}
if (e.target.closest('#download-playlist-btn')) {
const btn = e.target.closest('#download-playlist-btn');
if (btn.disabled) return;

2
js/ui.js
View file

@ -1185,6 +1185,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const tracklistContainer = document.getElementById('mix-detail-tracklist');
const playBtn = document.getElementById('play-mix-btn');
if (playBtn) playBtn.innerHTML = `${SVG_PLAY}<span>Play</span>`;
const dlBtn = document.getElementById('download-mix-btn');
if (dlBtn) dlBtn.innerHTML = `${SVG_DOWNLOAD}<span>Download</span>`;
// Skeleton loading
imageEl.src = '';

72
styles.css
View file

@ -2401,6 +2401,35 @@ input:checked + .slider::before {
border-bottom: none;
}
#playlist-detail-description,
#mix-detail-description {
color: var(--foreground);
font-size: 0.9rem;
}
#playlist-detail-tracklist {
display: flex;
flex-direction: column;
gap: 2px;
}
#playlist-detail-tracklist .track-list-header {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm);
color: var(--muted-foreground);
font-size: 0.9rem;
border-bottom: 1px solid var(--border);
margin-bottom: var(--spacing-xs);
}
#playlist-detail-tracklist .track-list-header .duration-header {
justify-self: flex-end;
}
/* Responsive Design */
@media (max-width: 1024px) {
.app-container {
@ -3165,49 +3194,6 @@ input:checked + .slider::before {
opacity: 1;
}
#playlist-detail-description,
#mix-detail-description {
color: var(--foreground);
font-size: 0.9rem;
line-height: 1.6;
margin-top: 1rem;
max-width: 600px;
}
#playlist-detail-tracklist {
display: flex;
flex-direction: column;
gap: 2px;
}
#playlist-detail-tracklist .track-list-header {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm);
color: var(--muted-foreground);
font-size: 0.9rem;
border-bottom: 1px solid var(--border);
margin-bottom: var(--spacing-xs);
}
#playlist-detail-tracklist .track-list-header .duration-header {
justify-self: flex-end;
}
@media (max-width: 480px) {
#playlist-detail-title {
font-size: 1.75rem;
}
}
@media (min-width: 1024px) {
#playlist-detail-title {
font-size: 4rem;
}
}
/* Window Controls Overlay */
@media (display-mode: window-controls-overlay) {
.app-container {