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

UI hiding

Browse source
This commit is contained in:
Eduard Prigoana 2026-02-27 22:57:11 +00:00
parent dd7a60e002
commit fa4da493e6
4 changed files with 211 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
index.html
View file

@ -144,7 +144,22 @@
<div id="fullscreen-cover-overlay" style="display: none">
<div class="fullscreen-cover-content">
<canvas id="visualizer-canvas"></canvas>
<button id="close-fullscreen-cover-btn" title="Close">&times;</button>
<button id="toggle-ui-btn" class="fullscreen-ui-toggle" title="Toggle UI">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="3" x2="9" y2="21"></line>
</svg>
</button>
<button id="toggle-fullscreen-lyrics-btn" class="fullscreen-lyrics-toggle" title="Toggle Lyrics">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -163,6 +178,7 @@
<line x1="8" y1="22" x2="16" y2="22" />
</svg>
</button>
<button id="close-fullscreen-cover-btn" title="Close">&times;</button>
<div class="fullscreen-main-view">
<img
id="fullscreen-cover-image"

79
js/ui.js
View file

@ -1009,8 +1009,14 @@ export class UIRenderer {
if (this.visualizer) {
this.visualizer.start();
}
// Add visualizer-active class for enhanced drop shadow
overlay.classList.add('visualizer-active');
};
// Setup UI toggle button
this.setupUIToggleButton(overlay);
if (localStorage.getItem('epilepsy-warning-dismissed') === 'true') {
startVisualizer();
} else {
@ -1039,6 +1045,7 @@ export class UIRenderer {
closeFullscreenCover() {
const overlay = document.getElementById('fullscreen-cover-overlay');
overlay.style.display = 'none';
overlay.classList.remove('visualizer-active', 'ui-hidden');
const playerBar = document.querySelector('.now-playing-bar');
if (playerBar) playerBar.style.removeProperty('display');
@ -1051,6 +1058,78 @@ export class UIRenderer {
if (this.visualizer) {
this.visualizer.stop();
}
// Clear UI toggle button timers
if (this.uiToggleMouseTimer) {
clearTimeout(this.uiToggleMouseTimer);
this.uiToggleMouseTimer = null;
}
}
setupUIToggleButton(overlay) {
const toggleBtn = document.getElementById('toggle-ui-btn');
if (!toggleBtn) return;
let isUIHidden = false;
// Show button
const showButton = () => {
toggleBtn.classList.add('visible');
};
// Hide button
const hideButton = () => {
toggleBtn.classList.remove('visible');
};
// Mouse move handler
const handleMouseMove = (e) => {
const rect = overlay.getBoundingClientRect();
// Check if mouse is near the top-right corner (within 150px from right, 100px from top)
const isNearTopRight = e.clientY < 100 && e.clientX > rect.width - 150;
if (isUIHidden) {
// When UI is hidden, only show button when mouse is near top-right
if (isNearTopRight) {
showButton();
} else {
hideButton();
}
}
// When UI is visible, button stays visible (no auto-hide)
};
// Toggle UI visibility
const toggleUI = () => {
isUIHidden = !isUIHidden;
overlay.classList.toggle('ui-hidden', isUIHidden);
toggleBtn.classList.toggle('active', isUIHidden);
toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI';
if (isUIHidden) {
// When UI is hidden, immediately hide the button
// It will reappear when mouse nears top-right
hideButton();
} else {
// When UI is shown, keep button visible
showButton();
}
};
// Add event listeners
toggleBtn.addEventListener('click', toggleUI);
overlay.addEventListener('mousemove', handleMouseMove);
overlay.addEventListener('mouseleave', () => {
if (isUIHidden) {
hideButton();
}
});
// Store cleanup function
this.uiToggleCleanup = () => {
toggleBtn.removeEventListener('click', toggleUI);
overlay.removeEventListener('mousemove', handleMouseMove);
};
}
setupFullscreenControls(audioPlayer) {

11
public/editors-picks.json
View file

@ -43,17 +43,6 @@
"audioQuality": "LOSSLESS",
"mediaMetadata": { "tags": ["LOSSLESS"] }
},
{
"type": "album",
"id": 487053581,
"title": "USB A (Deluxe)",
"artist": { "id": 46882510, "name": "PRODYSGROUP" },
"releaseDate": "2025-08-9",
"cover": "6409de67-1a4e-421b-9820-cc67a21792ec",
"explicit": true,
"audioQuality": "LOSSLESS",
"mediaMetadata": { "tags": ["LOSSLESS"] }
},
{
"type": "album",
"id": 4527433,

144
styles.css
View file

@ -3496,13 +3496,89 @@ input:checked + .slider::before {
padding: 1rem;
}
#close-fullscreen-cover-btn {
/* UI Toggle Button for Visualizer Mode - Rightmost position */
#toggle-ui-btn {
position: absolute;
top: 1rem;
right: 1rem;
background-color: var(--background);
border: none;
color: var(--foreground);
width: 48px;
height: 48px;
border-radius: var(--radius-full);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
opacity 0.3s ease,
transform 0.2s ease,
right 0.3s ease;
z-index: 10;
opacity: 0.5;
pointer-events: auto;
}
#toggle-ui-btn:hover {
opacity: 0.8;
transform: scale(1.05);
}
#toggle-ui-btn.active {
color: var(--primary);
opacity: 0.8;
}
/* When UI is hidden, toggle button is hidden by default */
#fullscreen-cover-overlay.ui-hidden #toggle-ui-btn {
opacity: 0;
pointer-events: none;
}
/* When UI is hidden and mouse is near, show the toggle button */
#fullscreen-cover-overlay.ui-hidden #toggle-ui-btn.visible {
opacity: 0.5;
pointer-events: auto;
}
/* Lyrics Toggle - Middle position */
.fullscreen-lyrics-toggle {
position: absolute;
top: 1rem;
right: 4.5rem;
background: rgb(0, 0, 0, 0.5);
border: none;
color: white;
padding: 0.75rem;
border-radius: var(--radius-full);
cursor: pointer;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
transition:
all 0.2s ease,
right 0.3s ease;
}
.fullscreen-lyrics-toggle:hover {
background: rgb(0, 0, 0, 0.7);
transform: scale(1.1);
}
.fullscreen-lyrics-toggle.active {
background: var(--primary);
}
/* Close Button - Leftmost position */
#close-fullscreen-cover-btn {
position: absolute;
top: 1rem;
right: 8rem;
background-color: var(--background);
border: none;
color: var(--foreground);
font-size: 2rem;
width: 48px;
height: 48px;
@ -3522,6 +3598,36 @@ input:checked + .slider::before {
opacity: 0.8;
}
/* UI Hidden State for Visualizer Mode */
#fullscreen-cover-overlay.ui-hidden .fullscreen-main-view,
#fullscreen-cover-overlay.ui-hidden .fullscreen-controls,
#fullscreen-cover-overlay.ui-hidden #fullscreen-next-track {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
/* When UI is hidden, only toggle button stays visible at right edge */
#fullscreen-cover-overlay.ui-hidden #toggle-ui-btn {
right: 1rem;
opacity: 0.5;
pointer-events: auto;
}
#fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle,
#fullscreen-cover-overlay.ui-hidden #close-fullscreen-cover-btn {
opacity: 0;
pointer-events: none;
}
#fullscreen-cover-overlay:not(.ui-hidden) .fullscreen-main-view,
#fullscreen-cover-overlay:not(.ui-hidden) .fullscreen-controls,
#fullscreen-cover-overlay:not(.ui-hidden) #fullscreen-next-track {
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s ease;
}
#fullscreen-cover-image {
max-width: 55vw;
max-height: 45vh;
@ -3532,6 +3638,14 @@ input:checked + .slider::before {
z-index: 1;
}
/* Enhanced drop shadow for album cover in visualizer mode */
#fullscreen-cover-overlay.visualizer-active #fullscreen-cover-image {
box-shadow:
0 25px 60px rgb(0, 0, 0, 0.6),
0 10px 30px rgb(0, 0, 0, 0.4),
0 0 100px rgb(0, 0, 0, 0.3);
}
.fullscreen-track-info {
text-align: center;
z-index: 1;
@ -4961,34 +5075,6 @@ img[src=''] {
margin-right 0.3s ease;
}
.fullscreen-lyrics-toggle {
position: absolute;
top: 1rem;
right: 4.5rem;
background: rgb(0, 0, 0, 0.5);
border: none;
color: white;
padding: 0.75rem;
border-radius: var(--radius-full);
cursor: pointer;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
transition:
all 0.2s ease,
right 0.3s ease;
}
.fullscreen-lyrics-toggle:hover {
background: rgb(0, 0, 0, 0.7);
transform: scale(1.1);
}
.fullscreen-lyrics-toggle.active {
background: var(--primary);
}
/* Modals */
.modal {
position: fixed;