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

Merge branch 'main' of github.com:monochrome-music/monochrome

Browse source
This commit is contained in:
Samidy 2026-03-02 23:42:14 +03:00
commit 103cce6338
6 changed files with 126 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
index.html
View file

@ -3916,6 +3916,35 @@
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Now Playing View Mode</span>
<span class="description">Choose what shows when you click the album art</span>
</div>
<select id="now-playing-mode">
<option value="album">Go to Album</option>
<option value="cover">Fullscreen Mode</option>
<option value="lyrics">Lyrics Panel</option>
</select>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Fullscreen Cover Click Action</span>
<span class="description"
>Choose what happens when you click the cover in fullscreen mode</span
>
</div>
<select id="fullscreen-cover-click-action">
<option value="exit">Exit fullscreen mode</option>
<option value="hide-ui">Hide UI</option>
<option value="pause-resume">Pause/resume track</option>
<option value="next">Skip song</option>
<option value="previous">Previous song</option>
<option value="nothing">Do nothing</option>
</select>
</div>
</div>
</div>
</div>
@ -4789,19 +4818,6 @@
</div>
<div class="settings-group">
<div class="setting-item">
<div class="info">
<span class="label">Now Playing View Mode</span>
<span class="description">Choose what shows when you click the album art</span>
</div>
<select id="now-playing-mode">
<option value="album">Go to Album</option>
<option value="cover">Fullscreen Mode</option>
<option value="lyrics">Lyrics Panel</option>
</select>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Compact Artists</span>
<span class="description"

62
js/app.js
View file

@ -4,6 +4,7 @@ import {
apiSettings,
themeManager,
nowPlayingSettings,
fullscreenCoverClickSettings,
downloadQualitySettings,
sidebarSettings,
pwaUpdateSettings,
@ -518,10 +519,63 @@ document.addEventListener('DOMContentLoaded', async () => {
});
document.getElementById('fullscreen-cover-image')?.addEventListener('click', () => {
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
const action = fullscreenCoverClickSettings.getAction();
const overlay = document.getElementById('fullscreen-cover-overlay');
const playerInstance = window.monochromePlayer;
switch (action) {
case 'exit':
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
}
break;
case 'hide-ui':
if (overlay) {
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;
case 'pause-resume':
if (playerInstance) playerInstance.handlePlayPause();
break;
case 'next':
if (playerInstance) playerInstance.playNext();
break;
case 'previous':
if (playerInstance) playerInstance.playPrev();
break;
case 'nothing':
break;
default:
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
}
}
});

10
js/settings.js
View file

@ -3,6 +3,7 @@ import {
themeManager,
lastFMStorage,
nowPlayingSettings,
fullscreenCoverClickSettings,
lyricsSettings,
backgroundSettings,
dynamicColorSettings,
@ -1986,6 +1987,15 @@ export function initializeSettings(scrobbler, player, api, ui) {
});
}
// Fullscreen Cover Click Action
const fullscreenCoverClickAction = document.getElementById('fullscreen-cover-click-action');
if (fullscreenCoverClickAction) {
fullscreenCoverClickAction.value = fullscreenCoverClickSettings.getAction();
fullscreenCoverClickAction.addEventListener('change', (e) => {
fullscreenCoverClickSettings.setAction(e.target.value);
});
}
// Close Modals on Navigation Toggle
const closeModalsOnNavigationToggle = document.getElementById('close-modals-on-navigation-toggle');
if (closeModalsOnNavigationToggle) {

16
js/storage.js
View file

@ -421,6 +421,22 @@ export const nowPlayingSettings = {
},
};
export const fullscreenCoverClickSettings = {
STORAGE_KEY: 'fullscreen-cover-click-action',
getAction() {
try {
return localStorage.getItem(this.STORAGE_KEY) || 'exit';
} catch {
return 'exit';
}
},
setAction(action) {
localStorage.setItem(this.STORAGE_KEY, action);
},
};
export const lyricsSettings = {
DOWNLOAD_WITH_TRACKS: 'lyrics-download-with-tracks',

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,