From 642e3bcf8add7b8b70cf909b51932421996fe599 Mon Sep 17 00:00:00 2001
From: Iu <iu@prhub.ru>
Date: Sat, 10 Oct 2026 21:26:46 +0300
Subject: [PATCH] fix(frontend): immediate viewer chrome and correct f
 fullscreen

- remove all hide timers in Viewer; top/bottom bars and arrows now show/hide immediately
- arrows reveal only within the viewer bounds (no longer stay visible when the pointer is over the left/right panels)
- f (and the viewer button) toggle the viewer's own fullscreen via nested fullscreen, so f works inside app-level fullscreen without turning it off
---
 frontend/src/lib/components/Viewer.svelte | 84 ++---------------------
 1 file changed, 7 insertions(+), 77 deletions(-)

diff --git a/frontend/src/lib/components/Viewer.svelte b/frontend/src/lib/components/Viewer.svelte
index 2bef15f..d5dac1a 100644
--- a/frontend/src/lib/components/Viewer.svelte
+++ b/frontend/src/lib/components/Viewer.svelte
@@ -37,12 +37,7 @@
 	let showBottom = $state(false);
 	let showLeft = $state(false);
 	let showRight = $state(false);
-
 	const EDGE = 8;
-	let hideTopTimer: ReturnType<typeof setTimeout> | undefined;
-	let hideBottomTimer: ReturnType<typeof setTimeout> | undefined;
-	let hideLeftTimer: ReturnType<typeof setTimeout> | undefined;
-	let hideRightTimer: ReturnType<typeof setTimeout> | undefined;
 
 	let dragging = false;
 	let startX = 0;
@@ -99,13 +94,7 @@
 			resetBars();
 		};
 		document.addEventListener('fullscreenchange', onFs);
-		return () => {
-			document.removeEventListener('fullscreenchange', onFs);
-			clearTimeout(hideTopTimer);
-			clearTimeout(hideBottomTimer);
-			clearTimeout(hideLeftTimer);
-			clearTimeout(hideRightTimer);
-		};
+		return () => document.removeEventListener('fullscreenchange', onFs);
 	});
 
 	const topClass = $derived(
@@ -132,14 +121,6 @@
 	);
 
 	function resetBars() {
-		clearTimeout(hideTopTimer);
-		clearTimeout(hideBottomTimer);
-		clearTimeout(hideLeftTimer);
-		clearTimeout(hideRightTimer);
-		hideTopTimer = undefined;
-		hideBottomTimer = undefined;
-		hideLeftTimer = undefined;
-		hideRightTimer = undefined;
 		showTop = false;
 		showBottom = false;
 		showLeft = false;
@@ -152,70 +133,19 @@
 		return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
 	}
 
-	function scheduleTop(shouldShow: boolean) {
-		if (shouldShow) {
-			clearTimeout(hideTopTimer);
-			hideTopTimer = undefined;
-			showTop = true;
-		} else if (showTop && !hideTopTimer) {
-			hideTopTimer = setTimeout(() => {
-				showTop = false;
-				hideTopTimer = undefined;
-			}, 1000);
-		}
-	}
-
-	function scheduleBottom(shouldShow: boolean) {
-		if (shouldShow) {
-			clearTimeout(hideBottomTimer);
-			hideBottomTimer = undefined;
-			showBottom = true;
-		} else if (showBottom && !hideBottomTimer) {
-			hideBottomTimer = setTimeout(() => {
-				showBottom = false;
-				hideBottomTimer = undefined;
-			}, 1000);
-		}
-	}
-
-	function scheduleLeft(shouldShow: boolean) {
-		if (shouldShow) {
-			clearTimeout(hideLeftTimer);
-			hideLeftTimer = undefined;
-			showLeft = true;
-		} else if (showLeft && !hideLeftTimer) {
-			hideLeftTimer = setTimeout(() => {
-				showLeft = false;
-				hideLeftTimer = undefined;
-			}, 300);
-		}
-	}
-
-	function scheduleRight(shouldShow: boolean) {
-		if (shouldShow) {
-			clearTimeout(hideRightTimer);
-			hideRightTimer = undefined;
-			showRight = true;
-		} else if (showRight && !hideRightTimer) {
-			hideRightTimer = setTimeout(() => {
-				showRight = false;
-				hideRightTimer = undefined;
-			}, 300);
-		}
-	}
-
 	function onWinMouseMove(e: MouseEvent) {
 		const r = viewerEl?.getBoundingClientRect();
 		if (r) {
 			const zoneX = r.width / 6;
-			scheduleLeft(!zoomed && e.clientX <= r.left + zoneX);
-			scheduleRight(!zoomed && e.clientX >= r.right - zoneX);
+			const insideY = e.clientY >= r.top && e.clientY <= r.bottom;
+			showLeft = !zoomed && insideY && e.clientX >= r.left && e.clientX <= r.left + zoneX;
+			showRight = !zoomed && insideY && e.clientX <= r.right && e.clientX >= r.right - zoneX;
 		}
 		if (!isFullscreen) return;
 		const nearTop = e.clientY <= EDGE;
 		const nearBottom = e.clientY >= window.innerHeight - EDGE;
-		scheduleTop(nearTop || inRect(topEl, e.clientX, e.clientY));
-		scheduleBottom(nearBottom || inRect(bottomEl, e.clientX, e.clientY));
+		showTop = nearTop || inRect(topEl, e.clientX, e.clientY);
+		showBottom = nearBottom || inRect(bottomEl, e.clientX, e.clientY);
 	}
 
 	function baseWidth(): number {
@@ -313,7 +243,7 @@
 	async function toggleViewerFullscreen() {
 		if (!viewerEl) return;
 		try {
-			if (document.fullscreenElement) await document.exitFullscreen();
+			if (document.fullscreenElement === viewerEl) await document.exitFullscreen();
 			else await viewerEl.requestFullscreen();
 		} catch {
 			/* недоступно */