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

FULLY hide show ui button

Browse source
This commit is contained in:
edidealt 2026-03-02 20:35:45 +00:00
parent 5e437d4019
commit ebccec5903
3 changed files with 36 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
js/app.js
View file

@ -533,13 +533,29 @@ document.addEventListener('DOMContentLoaded', async () => {
break; break;
case 'hide-ui': case 'hide-ui':
if (overlay) { if (overlay) {
overlay.classList.toggle('ui-hidden'); const isCurrentlyHidden = overlay.classList.contains('ui-hidden');
const toggleBtn = document.getElementById('toggle-ui-btn'); if (isCurrentlyHidden) {
if (toggleBtn) { overlay.classList.remove('ui-hidden');
const isUIHidden = overlay.classList.contains('ui-hidden'); const toggleBtn = document.getElementById('toggle-ui-btn');
toggleBtn.classList.toggle('active', isUIHidden); if (toggleBtn) {
toggleBtn.classList.toggle('visible', true); toggleBtn.classList.remove('active');
toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI'; toggleBtn.classList.add('visible');
toggleBtn.title = 'Hide UI';
}
} else {
overlay.classList.add('ui-hidden');
const toggleBtn = document.getElementById('toggle-ui-btn');
if (toggleBtn) {
toggleBtn.classList.add('active');
toggleBtn.classList.remove('visible');
toggleBtn.title = 'Show UI';
}
}
if (ui && typeof ui.setupUIToggleButton === 'function') {
if (ui.uiToggleCleanup) {
ui.uiToggleCleanup();
}
ui.setupUIToggleButton(overlay);
} }
} }
break; break;

11
js/ui.js
View file

@ -1070,7 +1070,9 @@ export class UIRenderer {
const toggleBtn = document.getElementById('toggle-ui-btn'); const toggleBtn = document.getElementById('toggle-ui-btn');
if (!toggleBtn) return; if (!toggleBtn) return;
let isUIHidden = false; let isUIHidden = overlay.classList.contains('ui-hidden');
toggleBtn.classList.toggle('active', isUIHidden);
toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI';
// Show button // Show button
const showButton = () => { const showButton = () => {
@ -1082,6 +1084,13 @@ export class UIRenderer {
toggleBtn.classList.remove('visible'); toggleBtn.classList.remove('visible');
}; };
// Initial state: hide button if UI is hidden
if (isUIHidden) {
hideButton();
} else {
showButton();
}
// Mouse move handler // Mouse move handler
const handleMouseMove = (e) => { const handleMouseMove = (e) => {
const rect = overlay.getBoundingClientRect(); const rect = overlay.getBoundingClientRect();

7
styles.css
View file

@ -3607,11 +3607,10 @@ input:checked + .slider::before {
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
/* When UI is hidden, only toggle button stays visible at right edge */ /* When UI is hidden, only toggle button stays visible at right edge (when .visible class is added) */
#fullscreen-cover-overlay.ui-hidden #toggle-ui-btn { #fullscreen-cover-overlay.ui-hidden #toggle-ui-btn {
right: 1rem; opacity: 0;
opacity: 0.5; pointer-events: none;
pointer-events: auto;
} }
#fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle, #fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle,