From 4ba4020c2ae01b24303b0dc718abeb81c46430ac Mon Sep 17 00:00:00 2001
From: kodi <kodi@lab.local>
Date: Fri, 13 Mar 2026 11:57:49 +0100
Subject: [PATCH] imageviewer

---
 .../test_ui_smoke_golden.cpython-313.pyc      | Bin 22169 -> 22593 bytes
 .../tests/golden/test_ui_smoke_golden.py      |   5 +++
 webui/html/app.js                             |  35 ++++++++++++++++--
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/webui/backend/tests/golden/__pycache__/test_ui_smoke_golden.cpython-313.pyc b/webui/backend/tests/golden/__pycache__/test_ui_smoke_golden.cpython-313.pyc
index 387bf88e3b4c474618f2061b8990a5e56c8ea239..d92435555f0c12db11b0535d2f0f9f86757590b2 100644
GIT binary patch
delta 556
zcmbQamhs>QM!wIyyj%=GAozB3=2VA`e6N+6T0|%Fv8Zg8SNY91`JcKNW8&nG>dKQ_
zg#;#Ph)iAyq0WLS#?;Nc#@&pYeN1^6Cx0*znVe&$Hu;f>5@W&ShbGF5g&>l-D3oRL
zd@V)BVz5}r<cVg=jHMuwxh#}za=*DUBm3m@>WYjNlNHUCnJYs%K|JQFP%bcC9m)-s
zt(m+LsIqqQRdZd=y5RcY21}+qzR3^G6<O<o8-p7r8(OFWSxrDzw1q5V^W+Oc3M`@g
z!7U($P^ds~t0@!6n+yyJ4CxG-ZJW<qxUtvEW~M1<WEOkoCZ?wbr{<(4mt^MWX=Ik9
z=4xsxR96Y*7o_HaCBrgP%TtRqG_9+|(n|Bd$`qjb{DEpTG^=EbQVUB{i%T5yGIJ9_
z#<&$F=B8?BXe!v+0gaLY*`%13SpqgLBp+m8fkS>#i3ZpvGq7|SNDwHdmz<NCnpYB@
znNpIWP*bCzh$i8Ynwg$a0(9YK9S2Ts#_G*x-aIUmPXzFbYOQd)!eM-agQuUjllOv{
z-UhZS9Ojev2S|vSY)HGpVGEb>yATj|g(G~khyP_(M*qz+q27#Q0W6HJj59c{OK4t{
Q(EP#x=6*<<TpK0>06A>9o&W#<

delta 309
zcmX@OfpO+qM!wIyyj%=G(E4n1rmy`*zSqi37eprWv8Zg8SNYAi`J8bbBV*#^LQ`eN
zBrur_CR4y<Du~?dW6Hxgd5xCH<Qy|KM%Kya)fJfwLLqcvC>w~+STuQ~xiWKcC<j=!
zB$N|OmxgkIWy>ZzS|~G@hw^}V6_YzHbXhBdtAeX1@3v6otPHLRuC`>#<Db0WLJ=rl
z3l!(Klx3`&9B8S?%pY72q?P#_OqoEwU|>*SNN3P&+}v#G#y<IvgT&@eM-FaA{mqkn
zcvvRC^ylCFGvE{}qu1smVcv{J-Ykr+j59c{OK4t{(EP#x=6;CbU|`|tsJhH7d4q+g
T-M7iN)&B!C1B+CV7|?V8?6O{T

diff --git a/webui/backend/tests/golden/test_ui_smoke_golden.py b/webui/backend/tests/golden/test_ui_smoke_golden.py
index bd7f840..58fa5d5 100644
--- a/webui/backend/tests/golden/test_ui_smoke_golden.py
+++ b/webui/backend/tests/golden/test_ui_smoke_golden.py
@@ -200,7 +200,12 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertIn('function imageElements()', app_js)
         self.assertIn('function isImageSelection(item)', app_js)
         self.assertIn('async function openImageViewer()', app_js)
+        self.assertIn('if (isImageSelection(item)) {', app_js)
+        self.assertIn('openImageViewer();', app_js)
         self.assertIn('function isImageOpen()', app_js)
+        self.assertIn('requestAnimationFrame(() => {', app_js)
+        self.assertIn('if (!fitImageToViewport()) {', app_js)
+        self.assertIn('if (!viewport.clientWidth || !viewport.clientHeight) {', app_js)
         self.assertIn("`/api/files/image?", app_js)
         self.assertIn('if (isImageSelection(selected)) {', app_js)
         self.assertIn('document.getElementById("info-modal")', app_js)
diff --git a/webui/html/app.js b/webui/html/app.js
index 1fc8e6a..8e1ac4a 100644
--- a/webui/html/app.js
+++ b/webui/html/app.js
@@ -1009,7 +1009,16 @@ function renderPaneItems(pane) {
       }
       renderPaneItems(pane);
     };
-    if (entry.kind === "file" && isVideoSelection({ path: entry.path, name: entry.name, kind: entry.kind })) {
+    if (entry.kind === "file" && isImageSelection({ path: entry.path, name: entry.name, kind: entry.kind })) {
+      row.ondblclick = (ev) => {
+        ev.stopPropagation();
+        setActivePane(pane);
+        model.currentRowIndex = index;
+        setSingleSelectionAtIndex(pane, { path: entry.path, name: entry.name, kind: entry.kind }, index);
+        renderPaneItems(pane);
+        openImageViewer();
+      };
+    } else if (entry.kind === "file" && isVideoSelection({ path: entry.path, name: entry.name, kind: entry.kind })) {
       row.ondblclick = (ev) => {
         ev.stopPropagation();
         setActivePane(pane);
@@ -1827,13 +1836,21 @@ function fitImageToViewport() {
   const image = imageElements().image;
   const viewport = imageElements().viewport;
   if (!image.naturalWidth || !image.naturalHeight) {
-    return;
+    return false;
+  }
+  if (!viewport.clientWidth || !viewport.clientHeight) {
+    return false;
   }
   const widthScale = viewport.clientWidth / image.naturalWidth;
   const heightScale = viewport.clientHeight / image.naturalHeight;
-  imageViewerState.fitScale = Math.min(widthScale, heightScale, 1);
+  const fitScale = Math.min(widthScale, heightScale, 1);
+  if (!Number.isFinite(fitScale) || fitScale <= 0) {
+    return false;
+  }
+  imageViewerState.fitScale = fitScale;
   imageViewerState.scale = imageViewerState.fitScale;
   applyImageScale();
+  return true;
 }
 
 function adjustImageZoom(multiplier) {
@@ -2232,7 +2249,13 @@ async function openImageViewer() {
   image.error.textContent = "";
   image.image.alt = selected.name;
   image.image.onload = () => {
-    fitImageToViewport();
+    requestAnimationFrame(() => {
+      if (!fitImageToViewport()) {
+        requestAnimationFrame(() => {
+          fitImageToViewport();
+        });
+      }
+    });
     image.image.onload = null;
   };
   image.image.onerror = () => {
@@ -2405,6 +2428,10 @@ function openCurrentDirectory() {
     navigateTo(pane, item.path);
     return;
   }
+  if (isImageSelection(item)) {
+    openImageViewer();
+    return;
+  }
   if (isVideoSelection(item)) {
     openVideoViewer();
   }