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

add lyrics toggle for mobile

Browse source
This commit is contained in:
Alan Brooks 2026-04-05 23:41:34 -04:00
parent 4dd3ec1a0c
commit daa553488f
3 changed files with 100 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -261,6 +261,7 @@
</div>
<div class="fullscreen-controls">
<div id="fullscreen-mobile-quality" class="fullscreen-mobile-quality" aria-hidden="true"></div>
<div class="fullscreen-progress-container">
<span id="fs-current-time">0:00</span>
<div id="fs-progress-bar" class="progress-bar">
@ -284,7 +285,6 @@
<button id="fs-repeat-btn" title="Repeat">
<use svg="!lucide/repeat.svg" size="24" />
</button>
<button id="fs-quality-btn" class="fs-quality-btn" title="Quality" style="display: none">
<button id="fs-quality-btn" class="fs-quality-btn" title="Quality" style="display: none">
<use svg="!lucide/pencil-line.svg" size="20" />
<span class="fs-quality-label">Auto</span>

20
js/ui.js
View file

@ -1303,8 +1303,7 @@ export class UIRenderer {
await this.extractAndApplyColor(this.api.getCoverUrl(track.album?.cover, '80'));
}
const qualityBadge = this.getFullscreenQualityBadgeHTML(track);
title.innerHTML = `${escapeHtml(track.title)} ${qualityBadge}`;
this.updateFullscreenQualityBadgePlacement(track, overlay);
artist.textContent = getTrackArtists(track);
if (nextTrack) {
@ -1400,6 +1399,7 @@ export class UIRenderer {
const shouldShowLyrics = this.fullscreenLyricsVisible && !lyricsUnavailable;
overlay.classList.toggle('lyrics-hidden', !shouldShowLyrics);
this.updateFullscreenQualityBadgePlacement(this.player?.currentTrack, overlay);
lyricsToggleButtons.forEach((lyricsToggleBtn) => {
lyricsToggleBtn.classList.toggle('active', shouldShowLyrics);
@ -1413,6 +1413,22 @@ export class UIRenderer {
});
}
updateFullscreenQualityBadgePlacement(track, overlay = document.getElementById('fullscreen-cover-overlay')) {
if (!track || !overlay) return;
const title = document.getElementById('fullscreen-track-title');
const mobileQuality = document.getElementById('fullscreen-mobile-quality');
if (!title) return;
const qualityBadge = this.getFullscreenQualityBadgeHTML(track);
const useMobileBadgeOnly = window.matchMedia('(max-width: 768px)').matches && overlay.classList.contains('lyrics-hidden');
title.innerHTML = useMobileBadgeOnly ? escapeHtml(track.title) : `${escapeHtml(track.title)} ${qualityBadge}`;
if (mobileQuality) {
mobileQuality.innerHTML = useMobileBadgeOnly ? qualityBadge : '';
}
}
async dismissFullscreenCover({ animate = true } = {}) {
const overlay = document.getElementById('fullscreen-cover-overlay');
if (!overlay || overlay.style.display === 'none') return;

96
styles.css
View file

@ -3987,6 +3987,9 @@ input:checked + .slider::before {
justify-content: center;
width: 100%;
height: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
position: relative;
padding: 1rem;
overflow: hidden;
@ -10112,6 +10115,9 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
display: flex;
align-items: stretch;
justify-content: center;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
min-height: 0;
overflow: hidden;
}
@ -10665,6 +10671,10 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
#fullscreen-cover-overlay .fullscreen-main-view {
width: 100%;
height: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
box-sizing: border-box;
grid-template-columns: minmax(78px, 92px) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas:
@ -10682,12 +10692,14 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
#fullscreen-cover-overlay .fullscreen-media-column {
display: contents;
width: auto;
min-width: 0;
}
#fullscreen-cover-overlay .fullscreen-artwork-card {
grid-area: art;
width: 100%;
max-width: 92px;
box-sizing: border-box;
border-radius: 12px;
align-self: start;
margin-left: 0.95rem;
@ -10736,7 +10748,10 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
#fullscreen-cover-overlay .fullscreen-lyrics-pane {
grid-area: lyrics;
width: 100%;
max-width: 100%;
min-height: 0;
min-width: 0;
box-sizing: border-box;
justify-self: stretch;
}
@ -10776,11 +10791,17 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
grid-area: controls;
width: 100%;
max-width: none;
min-width: 0;
box-sizing: border-box;
margin-top: 0;
padding: 0.15rem 0 0;
gap: 0.9rem;
}
#fullscreen-cover-overlay .fullscreen-mobile-quality {
display: none;
}
#fullscreen-cover-overlay .fullscreen-volume-container {
display: none;
}
@ -10807,32 +10828,48 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
}
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-main-view {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto auto auto;
grid-template-areas:
'.'
'art'
'info'
'controls';
align-content: stretch;
grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto;
align-items: center;
justify-items: center;
gap: 0.95rem;
gap: 0;
padding:
calc(4.45rem + env(safe-area-inset-top))
0
clamp(1rem, 4vw, 1.4rem)
calc(0.8rem + env(safe-area-inset-bottom))
0;
clamp(1rem, 4vw, 1.4rem);
height: 100%;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-lyrics-pane {
display: none;
}
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-media-column {
display: flex;
flex-direction: column;
grid-row: 2;
justify-content: center;
align-items: center;
align-self: center;
width: min(100%, 320px);
max-width: min(88vw, 320px);
min-height: 0;
min-width: 0;
margin: 0 auto;
transform: none;
}
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-artwork-card {
max-width: min(88vw, 320px);
width: min(88vw, 320px);
margin-left: 0;
width: min(100%, 320px);
margin: 0 auto;
align-self: center;
justify-self: center;
border-radius: 14px;
box-shadow: 0 24px 56px rgb(0 0 0 / 0.28);
@ -10843,15 +10880,17 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
}
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-track-info {
align-self: start;
justify-self: center;
width: min(88vw, 320px);
align-self: center;
width: min(100%, 320px);
padding: 0;
gap: 0.3rem;
margin-top: 0.9rem;
text-align: center;
}
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-track-text {
gap: 0.2rem;
justify-items: center;
}
#fullscreen-cover-overlay.lyrics-hidden #fullscreen-track-title {
@ -10864,6 +10903,33 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
color: rgb(255 255 255 / 0.66);
}
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-controls {
grid-row: 4;
width: min(100%, 320px);
max-width: min(88vw, 320px);
justify-self: center;
align-self: end;
margin-top: 0;
}
#fullscreen-cover-overlay.lyrics-hidden #fullscreen-track-title .quality-badge,
#fullscreen-cover-overlay.lyrics-hidden #fullscreen-track-title .shaka-quality-badge {
display: none !important;
}
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-mobile-quality {
display: flex;
justify-content: center;
align-items: center;
min-height: 1.25rem;
margin: 0 auto -0.1rem;
}
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-mobile-quality .quality-badge,
#fullscreen-cover-overlay.lyrics-hidden .fullscreen-mobile-quality .shaka-quality-badge {
display: inline-flex !important;
}
#fullscreen-cover-overlay .fullscreen-volume-container {
width: min(280px, calc(100% - 3rem));
margin-top: 0;