Fix: render new items on scroll only if details element not shown

dist/plex-meets-homeassistant.js

@@ -19726,15 +19726,21 @@ class PlexMeetsHomeAssistant extends HTMLElement {
         this.error = '';
         this.previousPositions = [];
         this.contentBGHeight = 0;
-        this.loadInitialData = async () => {
+        this.renderNewElementsIfNeeded = () => {
-            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) {
+            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', () => {
+                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();

src/plex-meets-homeassistant.ts

@@ -101,16 +101,25 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		}
 	}
 
-	loadInitialData = async (): Promise<void> => {
+	renderNewElementsIfNeeded = (): 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) {
+		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', () => {
+			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> => {