From 8c147b797a9726e55a0259d8dfa45b8cc95b5c40 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Tue, 31 Dec 2024 16:50:19 +0100
Subject: [PATCH] Properly detect if image fills whole viewport

The thresholds are only for detecting if a specific side of the image is in the viewport.

For the check if the image fills the whole viewport, the thresholds incorrectly detect this depending on the readers reading direction.

E.g. in the continuous horizontal pager with theme direction LTR and reader reading direction RTL, the left threshold will be the total width of the viewport plus one which will lead to out of view images to be detected as completely filling the viewport
---
 src/modules/reader/utils/ReaderPager.utils.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/modules/reader/utils/ReaderPager.utils.tsx b/src/modules/reader/utils/ReaderPager.utils.tsx
index e615a2ae..8857e199 100644
--- a/src/modules/reader/utils/ReaderPager.utils.tsx
+++ b/src/modules/reader/utils/ReaderPager.utils.tsx
@@ -299,6 +299,10 @@ type InViewportThresholds = {
 };
 const getIsPageInViewportInfo = (
     element: HTMLElement,
+    /**
+     * Thresholds are not considered for the detection of an image filling the whole viewport.
+     * They are only used for detecting if a specific side of an image is inside the viewport
+     */
     argThresholds?: InViewportThresholds,
 ): {
     isLeftInViewport: boolean;
@@ -320,11 +324,11 @@ const getIsPageInViewportInfo = (
 
     const isLeftInViewport = left >= thresholds.left && left <= window.innerWidth;
     const isRightInViewport = right >= thresholds.right && right <= window.innerWidth;
-    const isFillingWidthViewportCompletely = left <= thresholds.left && right >= window.innerWidth;
+    const isFillingWidthViewportCompletely = left <= 0 && right >= window.innerWidth;
 
     const isTopInViewport = top >= thresholds.top && top <= window.innerHeight;
     const isBottomInViewport = bottom >= thresholds.bottom && bottom <= window.innerHeight;
-    const isFillingHeightViewportCompletely = top <= thresholds.top && bottom >= window.innerHeight;
+    const isFillingHeightViewportCompletely = top <= 0 && bottom >= window.innerHeight;
 
     return {
         isLeftInViewport,