Fix #96: Scroll functionality broken

src/plex-meets-homeassistant.ts

@@ -205,9 +205,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 	renderNewElementsIfNeeded = (): void => {
 		const loadAdditionalRowsCount = 2; // todo: make this configurable
 		const height = getHeight(this.content);
+		let { scrollTop } = this.haWindow;
+		if (scrollTop < window.scrollY) {
+			scrollTop = window.scrollY;
+		}
 		if (
 			!this.detailsShown &&
-			window.innerHeight + this.haWindow.scrollTop > height - 300 &&
+			window.innerHeight + scrollTop > height - 300 &&
 			this.renderedItems > 0 &&
 			this.renderedItems < this.data[this.config.libraryName].length &&
 			(!this.maxCount || this.renderedItems < this.maxCount) &&
@@ -254,7 +258,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		if (this.hassObj) {
 			this.entityRegistry = await fetchEntityRegistry(this.hassObj.connection);
 		}
-
 		const scrollListener = () => {
 			// todo: improve performance by calculating this when needed only
 			if (this.detailsShown && this.activeMovieElem && !isVideoFullScreen(this) && this.isVisible) {
@@ -298,9 +301,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 
 		this.haWindow.addEventListener('scroll', scrollListener);
 
-		// window.addEventListener('scroll', scrollListener);
+		window.addEventListener('scroll', scrollListener);
-		// window.addEventListener('wheel', scrollListener);
+		window.addEventListener('wheel', scrollListener);
-		// window.addEventListener('touchmove', scrollListener);
+		window.addEventListener('touchmove', scrollListener);
 		window.addEventListener('resize', () => {
 			this.resizeHandler();
 		});
@@ -1422,27 +1425,23 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 					}
 
 					(this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined
-						? `<span class='minutesDetail' style='font-size:${this.fontSize4}px; line-height:${
+						? `<span class='minutesDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
-								this.fontSize4
 						}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
 							.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${Math.round(
 								parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000
 							)} min</span>`
 						: '') +
 						(mainData.contentRating !== undefined
-							? `<span class='contentRatingDetail' style='font-size:${this.fontSize4}px; line-height:${
+							? `<span class='contentRatingDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
-									this.fontSize4
 							}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
 								.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${escapeHtml(
 									mainData.contentRating
 								)}</span>`
 							: '') +
 						(mainData.rating !== undefined
-							? `<span class='ratingDetail' style='font-size:${this.fontSize4}px; line-height:${
+							? `<span class='ratingDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
-									this.fontSize4
 							}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
-									.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${
+								.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${mainData.rating < 5 ? '&#128465;' : '&#11088;'
-									mainData.rating < 5 ? '&#128465;' : '&#11088;'
 							}&nbsp;${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}</span>`
 							: '')}<div class='clear'></div>`;
 
@@ -1583,8 +1582,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 								fullscreenTrailer.style.visibility = 'visible';
 								contentbg.classList.add('no-transparency');
 								playingFired = true;
-								this.videoElem.style.width = `${
+								this.videoElem.style.width = `${(this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth
-									(this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth
 									}px`;
 								this.videoElem.style.visibility = 'visible';
 								this.videoElem.style.top = `${top}px`;
@@ -1672,8 +1670,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 							const seasonContainer = document.createElement('div');
 							seasonContainer.className = 'seasonContainer';
 							seasonContainer.style.width = `${CSS_STYLE.width}px`;
-							const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
+							const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
-								this.minExpandedHeight
 								}&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`;
 
 							const seasonElem = document.createElement('div');
@@ -2071,12 +2068,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		let thumbURL = '';
 		if (this.plex) {
 			if (_.isEqual(data.type, 'episode')) {
-				thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
+				thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
-					this.minExpandedHeight
 					}&minSize=1&upscale=1&url=${data.grandparentThumb}&X-Plex-Token=${this.config.token}`;
 			} else {
-				thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
+				thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
-					this.minExpandedHeight
 					}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
 			}
 		}