fullscreen mode settings
This commit is contained in:
edidealt
parent
b3332084d1
commit
5e437d4019
4 changed files with 97 additions and 17 deletions
42
index.html
42
index.html
|
|
@ -3915,6 +3915,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>
|
||||
|
|
@ -4788,19 +4817,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"
|
||||
|
|
|
|||
46
js/app.js
46
js/app.js
|
|
@ -4,6 +4,7 @@ import {
|
|||
apiSettings,
|
||||
themeManager,
|
||||
nowPlayingSettings,
|
||||
fullscreenCoverClickSettings,
|
||||
downloadQualitySettings,
|
||||
sidebarSettings,
|
||||
pwaUpdateSettings,
|
||||
|
|
@ -518,10 +519,47 @@ 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) {
|
||||
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';
|
||||
}
|
||||
}
|
||||
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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue