feat(frontend): fullscreen toggle and album back button
- add fullscreen/fullscreen_exit icons and a top-bar toggle (right of themes) - add back arrow left of the album title to return to the albums overview
This commit is contained in:
@@ -24,13 +24,29 @@
|
||||
let railWidth = $state(RAIL.def);
|
||||
let panelWidth = $state(PANEL.def);
|
||||
|
||||
let isFullscreen = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
const r = parseInt(localStorage.getItem(RAIL.key) ?? '', 10);
|
||||
if (r >= RAIL.min && r <= RAIL.max) railWidth = r;
|
||||
const p = parseInt(localStorage.getItem(PANEL.key) ?? '', 10);
|
||||
if (p >= PANEL.min && p <= PANEL.max) panelWidth = p;
|
||||
|
||||
const onFs = () => (isFullscreen = !!document.fullscreenElement);
|
||||
document.addEventListener('fullscreenchange', onFs);
|
||||
onFs();
|
||||
return () => document.removeEventListener('fullscreenchange', onFs);
|
||||
});
|
||||
|
||||
async function toggleFullscreen() {
|
||||
try {
|
||||
if (document.fullscreenElement) await document.exitFullscreen();
|
||||
else await document.documentElement.requestFullscreen();
|
||||
} catch {
|
||||
/* недоступно */
|
||||
}
|
||||
}
|
||||
|
||||
function startResize(side: 'left' | 'right', ev: PointerEvent) {
|
||||
ev.preventDefault();
|
||||
const cfg = side === 'left' ? RAIL : PANEL;
|
||||
@@ -134,6 +150,16 @@
|
||||
</a>
|
||||
{/if}
|
||||
<ThemeSwitcher />
|
||||
<button
|
||||
type="button"
|
||||
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5"
|
||||
aria-label={isFullscreen ? 'Выйти из полноэкранного режима' : 'На весь экран'}
|
||||
title={isFullscreen ? 'Выйти из полноэкранного режима' : 'На весь экран'}
|
||||
aria-pressed={isFullscreen}
|
||||
onclick={toggleFullscreen}
|
||||
>
|
||||
<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user