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;
case 'hide-ui':
if (overlay) {
overlay.classList.toggle('ui-hidden');
const toggleBtn = document.getElementById('toggle-ui-btn');
if (toggleBtn) {
const isUIHidden = overlay.classList.contains('ui-hidden');
toggleBtn.classList.toggle('active', isUIHidden);
toggleBtn.classList.toggle('visible', true);
toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI';
const isCurrentlyHidden = overlay.classList.contains('ui-hidden');
if (isCurrentlyHidden) {
overlay.classList.remove('ui-hidden');
const toggleBtn = document.getElementById('toggle-ui-btn');
if (toggleBtn) {
toggleBtn.classList.remove('active');
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;

11
js/ui.js
View file

@ -1070,7 +1070,9 @@ export class UIRenderer {
const toggleBtn = document.getElementById('toggle-ui-btn');
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
const showButton = () => {
@ -1082,6 +1084,13 @@ export class UIRenderer {
toggleBtn.classList.remove('visible');
};
// Initial state: hide button if UI is hidden
if (isUIHidden) {
hideButton();
} else {
showButton();
}
// Mouse move handler
const handleMouseMove = (e) => {
const rect = overlay.getBoundingClientRect();

7
styles.css
View file

@ -3607,11 +3607,10 @@ input:checked + .slider::before {
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 {
right: 1rem;
opacity: 0.5;
pointer-events: auto;
opacity: 0;
pointer-events: none;
}
#fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle,