From a25a21f2fa1b460a79b7143cef3fd5c99aaba905 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= <jnyiri@sk.ibm.com>
Date: Sat, 5 Jun 2021 22:28:29 +0200
Subject: [PATCH] Fix: render new items on scroll only if details element not
 shown

---
 dist/plex-meets-homeassistant.js | 21 ++++++++++++++-------
 src/plex-meets-homeassistant.ts  | 26 ++++++++++++++++++--------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js
index 61cd92d..3839732 100644
--- a/dist/plex-meets-homeassistant.js
+++ b/dist/plex-meets-homeassistant.js
@@ -19726,15 +19726,21 @@ class PlexMeetsHomeAssistant extends HTMLElement {
         this.error = '';
         this.previousPositions = [];
         this.contentBGHeight = 0;
+        this.renderNewElementsIfNeeded = () => {
+            const loadAdditionalRowsCount = 2; // todo: make this configurable
+            const height = getHeight(this.content);
+            if (this.detailElem &&
+                (this.detailElem.style.visibility === 'hidden' || this.detailElem.style.visibility === '') &&
+                window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 &&
+                this.renderedItems > 0) {
+                this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * (loadAdditionalRowsCount * 2);
+                this.renderMovieElems();
+                this.calculatePositions();
+            }
+        };
         this.loadInitialData = async () => {
             window.addEventListener('scroll', () => {
-                const loadAdditionalRowsCount = 2; // todo: make this configurable
-                const height = getHeight(this.content);
-                if (window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 && this.renderedItems > 0) {
-                    this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * (loadAdditionalRowsCount * 2);
-                    this.renderMovieElems();
-                    this.calculatePositions();
-                }
+                this.renderNewElementsIfNeeded();
             });
             this.loading = true;
             this.renderPage();
@@ -20073,6 +20079,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                 this.detailElem.style.zIndex = '0';
                 this.detailElem.style.visibility = 'hidden';
             }
+            this.renderNewElementsIfNeeded();
         };
         this.showDetails = async (data) => {
             const top = this.getTop();
diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts
index 36e7a6e..a797d6e 100644
--- a/src/plex-meets-homeassistant.ts
+++ b/src/plex-meets-homeassistant.ts
@@ -101,16 +101,25 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		}
 	}
 
+	renderNewElementsIfNeeded = (): void => {
+		const loadAdditionalRowsCount = 2; // todo: make this configurable
+		const height = getHeight(this.content);
+		if (
+			this.detailElem &&
+			(this.detailElem.style.visibility === 'hidden' || this.detailElem.style.visibility === '') &&
+			window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 &&
+			this.renderedItems > 0
+		) {
+			this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * (loadAdditionalRowsCount * 2);
+
+			this.renderMovieElems();
+			this.calculatePositions();
+		}
+	};
+
 	loadInitialData = async (): Promise<void> => {
 		window.addEventListener('scroll', () => {
-			const loadAdditionalRowsCount = 2; // todo: make this configurable
-			const height = getHeight(this.content);
-			if (window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 && this.renderedItems > 0) {
-				this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * (loadAdditionalRowsCount * 2);
-
-				this.renderMovieElems();
-				this.calculatePositions();
-			}
+			this.renderNewElementsIfNeeded();
 		});
 		this.loading = true;
 		this.renderPage();
@@ -481,6 +490,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 			this.detailElem.style.zIndex = '0';
 			this.detailElem.style.visibility = 'hidden';
 		}
+		this.renderNewElementsIfNeeded();
 	};
 
 	showDetails = async (data: any): Promise<void> => {