From 3086fd35424e0a499cf0b1f94568eb85b86e95c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Sat, 5 Jun 2021 23:19:04 +0200 Subject: [PATCH] Fix: Movie element position on close when scrolled all the way to bottom --- dist/plex-meets-homeassistant.js | 12 ++++++++---- src/plex-meets-homeassistant.ts | 15 +++++++++++---- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 3839732..f4dcfd3 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19707,6 +19707,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { constructor() { super(...arguments); this.plexProtocol = 'http'; + this.detailsShown = false; this.columnsCount = 0; this.renderedItems = 0; this.maxRenderCount = false; @@ -19729,8 +19730,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { 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 === '') && + if (!this.detailsShown && window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 && this.renderedItems > 0) { this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * (loadAdditionalRowsCount * 2); @@ -19995,6 +19995,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }; this.minimizeAll = () => { + this.detailsShown = false; if (this.activeMovieElem) { this.activeMovieElem.style.display = `block`; } @@ -20079,9 +20080,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.detailElem.style.zIndex = '0'; this.detailElem.style.visibility = 'hidden'; } - this.renderNewElementsIfNeeded(); + clearTimeout(this.renderNewElementsIfNeededTimeout); + this.renderNewElementsIfNeededTimeout = setTimeout(() => { + this.renderNewElementsIfNeeded(); + }, 1000); }; this.showDetails = async (data) => { + this.detailsShown = true; const top = this.getTop(); if (this.detailElem) { this.detailElem.style.transition = '0s'; @@ -20361,7 +20366,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { } else { const top = this.getTop(); - this.minimizeAll(); this.showDetails(this.activeMovieElemData); this.showBackground(); movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index a797d6e..2c7c172 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -11,6 +11,10 @@ import style from './modules/style'; class PlexMeetsHomeAssistant extends HTMLElement { plexProtocol: 'http' | 'https' = 'http'; + detailsShown = false; + + renderNewElementsIfNeededTimeout: any; + columnsCount = 0; renderedItems = 0; @@ -105,8 +109,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { const loadAdditionalRowsCount = 2; // todo: make this configurable const height = getHeight(this.content); if ( - this.detailElem && - (this.detailElem.style.visibility === 'hidden' || this.detailElem.style.visibility === '') && + !this.detailsShown && window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 && this.renderedItems > 0 ) { @@ -401,6 +404,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; minimizeAll = (): void => { + this.detailsShown = false; if (this.activeMovieElem) { this.activeMovieElem.style.display = `block`; } @@ -490,10 +494,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.detailElem.style.zIndex = '0'; this.detailElem.style.visibility = 'hidden'; } - this.renderNewElementsIfNeeded(); + clearTimeout(this.renderNewElementsIfNeededTimeout); + this.renderNewElementsIfNeededTimeout = setTimeout(() => { + this.renderNewElementsIfNeeded(); + }, 1000); }; showDetails = async (data: any): Promise => { + this.detailsShown = true; const top = this.getTop(); if (this.detailElem) { this.detailElem.style.transition = '0s'; @@ -828,7 +836,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideBackground(); } else { const top = this.getTop(); - this.minimizeAll(); this.showDetails(this.activeMovieElemData); this.showBackground(); movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`;