Fix: Infinite scroll not working

dist/plex-meets-homeassistant.js

@@ -20275,7 +20275,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
         this.valueUpdated = () => {
             const originalConfig = lodash.clone(this.config);
             this.config.protocol = this.protocol.value;
-            this.config.ip = this.ip.value.replace(/^https?\:\/\//i, '').replace(/\/$/, '');
+            this.config.ip = this.ip.value.replace(/^https?:\/\//i, '').replace(/\/$/, '');
             this.config.token = this.token.value;
             this.config.port = this.port.value;
             if (this.loaded) {
@@ -20527,7 +20527,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
             this.content.appendChild(this.protocol);
             this.ip.label = 'Plex IP Address / Hostname';
             if (this.config.ip) {
-                this.ip.value = this.config.ip.replace(/^https?\:\/\//i, '').replace(/\/$/, '');
+                this.ip.value = this.config.ip.replace(/^https?:\/\//i, '').replace(/\/$/, '');
             }
             else {
                 this.ip.value = this.config.ip;
@@ -20559,7 +20559,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
             this.content.appendChild(this.libraryName);
             this.content.appendChild(warningLibrary);
             this.appendChild(this.content);
-            this.plex = new Plex(this.config.ip.replace(/^https?\:\/\//i, '').replace(/\/$/, ''), this.plexPort, this.config.token, this.plexProtocol, this.config.sort);
+            this.plex = new Plex(this.config.ip.replace(/^https?:\/\//i, '').replace(/\/$/, ''), this.plexPort, this.config.token, this.plexProtocol, this.config.sort);
             this.sections = await this.plex.getSections();
             lodash.forEach(this.sections, section => {
                 if (lodash.isEqual(section.title, this.config.libraryName) && lodash.isEqual(section.type, 'artist')) {
@@ -20581,6 +20581,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
                     this.content.appendChild(this.useShuffle);
                     return false;
                 }
+                return true;
             });
             this.livetv = await this.plex.getLiveTV();
             this.collections = await this.plex.getCollections();
@@ -21971,11 +21972,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
         this.error = '';
         this.contentBGHeight = 0;
         this.initialDataLoaded = false;
+        this.haWindow = PlexMeetsHomeAssistant.querySelectorAllShadows('hui-view')[0];
         this.renderNewElementsIfNeeded = () => {
             const loadAdditionalRowsCount = 2; // todo: make this configurable
             const height = getHeight(this.content);
             if (!this.detailsShown &&
-                window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 &&
+                window.innerHeight + this.haWindow.scrollTop > height - 300 &&
                 this.renderedItems > 0 &&
                 this.renderedItems < this.data[this.config.libraryName].length &&
                 (!this.maxCount || this.renderedItems < this.maxCount) &&
@@ -22018,7 +22020,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
             if (this.hassObj) {
                 this.entityRegistry = await fetchEntityRegistry(this.hassObj.connection);
             }
-            window.addEventListener('scroll', () => {
+            window.addEventListener('wheel', () => {
                 // todo: improve performance by calculating this when needed only
                 if (this.detailsShown && this.activeMovieElem && !isVideoFullScreen(this) && this.isVisible) {
                     const seasonContainers = this.getElementsByClassName('seasonContainer');
@@ -23947,6 +23949,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
         return document.createElement('plex-meets-homeassistant-editor');
     }
 }
+PlexMeetsHomeAssistant.querySelectorAllShadows = (selector, el = document.body) => {
+    // recurse on childShadows
+    const childShadows = Array.from(el.querySelectorAll('*'))
+        .map(el2 => el2.shadowRoot)
+        .filter(Boolean);
+    // console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`);
+    const childResults = childShadows.map((child) => PlexMeetsHomeAssistant.querySelectorAllShadows(selector, child));
+    // fuse all results into singular, flat array
+    const result = Array.from(el.querySelectorAll(selector));
+    return result.concat(childResults).flat();
+};
 customElements.define('plex-meets-homeassistant-editor', PlexMeetsHomeAssistantEditor);
 customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant);
 window.customCards = window.customCards || [];

src/editor.ts

@@ -136,7 +136,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
 	valueUpdated = (): void => {
 		const originalConfig = _.clone(this.config);
 		this.config.protocol = this.protocol.value;
-		this.config.ip = this.ip.value.replace(/^https?\:\/\//i, '').replace(/\/$/, '');
+		this.config.ip = this.ip.value.replace(/^https?:\/\//i, '').replace(/\/$/, '');
 		this.config.token = this.token.value;
 		this.config.port = this.port.value;
 		if (this.loaded) {
@@ -393,7 +393,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
 
 		this.ip.label = 'Plex IP Address / Hostname';
 		if (this.config.ip) {
-			this.ip.value = this.config.ip.replace(/^https?\:\/\//i, '').replace(/\/$/, '');
+			this.ip.value = this.config.ip.replace(/^https?:\/\//i, '').replace(/\/$/, '');
 		} else {
 			this.ip.value = this.config.ip;
 		}
@@ -433,7 +433,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
 		this.appendChild(this.content);
 
 		this.plex = new Plex(
-			this.config.ip.replace(/^https?\:\/\//i, '').replace(/\/$/, ''),
+			this.config.ip.replace(/^https?:\/\//i, '').replace(/\/$/, ''),
 			this.plexPort,
 			this.config.token,
 			this.plexProtocol,
@@ -460,6 +460,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
 				this.content.appendChild(this.useShuffle);
 				return false;
 			}
+			return true;
 		});
 		this.livetv = await this.plex.getLiveTV();
 		this.collections = await this.plex.getCollections();

src/plex-meets-homeassistant.ts

@@ -171,6 +171,25 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 
 	initialDataLoaded = false;
 
+	static querySelectorAllShadows = (selector: any, el = document.body) => {
+		// recurse on childShadows
+		const childShadows = Array.from(el.querySelectorAll('*'))
+			.map(el2 => el2.shadowRoot)
+			.filter(Boolean);
+
+		// console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`);
+
+		const childResults: any = childShadows.map((child: any) =>
+			PlexMeetsHomeAssistant.querySelectorAllShadows(selector, child)
+		);
+
+		// fuse all results into singular, flat array
+		const result = Array.from(el.querySelectorAll(selector));
+		return (result.concat(childResults) as any).flat();
+	};
+
+	haWindow = PlexMeetsHomeAssistant.querySelectorAllShadows('hui-view')[0];
+
 	set hass(hass: HomeAssistant) {
 		this.hassObj = hass;
 
@@ -188,7 +207,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		const height = getHeight(this.content);
 		if (
 			!this.detailsShown &&
-			window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 &&
+			window.innerHeight + this.haWindow.scrollTop > height - 300 &&
 			this.renderedItems > 0 &&
 			this.renderedItems < this.data[this.config.libraryName].length &&
 			(!this.maxCount || this.renderedItems < this.maxCount) &&
@@ -236,7 +255,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 			this.entityRegistry = await fetchEntityRegistry(this.hassObj.connection);
 		}
 
-		window.addEventListener('scroll', () => {
+		window.addEventListener('wheel', () => {
 			// todo: improve performance by calculating this when needed only
 			if (this.detailsShown && this.activeMovieElem && !isVideoFullScreen(this) && this.isVisible) {
 				const seasonContainers = this.getElementsByClassName('seasonContainer') as HTMLCollectionOf<HTMLElement>;