HomeAssistant
/
PlexMeetsHomeAssistant
mirror of https://github.com/JurajNyiri/PlexMeetsHomeAssistant.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix: Edge cases where animation could get stuck in incorrect position or rapidly clicking

Browse Source
pull/16/head
Juraj Nyíri 4 years ago
parent 95a83f2e2e
commit 74cef333ee
2 changed files with 277 additions and 207 deletions
Show Stats Download Patch File Download Diff File

53
dist/plex-meets-homeassistant.js vendored
Unescape View File

@ -19457,6 +19457,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.plexProtocol = 'http'; this.plexProtocol = 'http';
this.seasonContainerClickEnabled = true;
this.looseSearch = false; this.looseSearch = false;
this.movieElems = []; this.movieElems = [];
this.searchValue = ''; this.searchValue = '';
@ -19673,7 +19674,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonElemLocal.dataset.clicked = 'false'; seasonElemLocal.dataset.clicked = 'false';
seasonTitleElem.style.display = 'block'; seasonTitleElem.style.display = 'block';
seasonEpisodesCount.style.display = 'block'; seasonEpisodesCount.style.display = 'block';
setTimeout(() => { // clearInterval(this.seasonTitleColorTimeout);
this.seasonTitleColorTimeout = setTimeout(() => {
seasonTitleElem.style.color = 'rgba(255,255,255,1)'; seasonTitleElem.style.color = 'rgba(255,255,255,1)';
seasonEpisodesCount.style.color = 'rgba(255,255,255,1)'; seasonEpisodesCount.style.color = 'rgba(255,255,255,1)';
}, 500); }, 500);
@ -19682,7 +19684,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
moveElem(seasonElem); moveElem(seasonElem);
} }
else { else {
setTimeout(() => { // clearInterval(this.moveElemTimeout);
this.moveElemTimeout = setTimeout(() => {
moveElem(seasonElem); moveElem(seasonElem);
}, 100); }, 100);
} }
@ -19692,28 +19695,37 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.minimizeAll = () => { this.minimizeAll = () => {
this.activeMovieElem = undefined; this.activeMovieElem = undefined;
for (let i = 0; i < this.movieElems.length; i += 1) { for (let i = 0; i < this.movieElems.length; i += 1) {
if (this.movieElems[i].dataset.clicked === 'true') { if (parseInt(this.movieElems[i].style.width, 10) > CSS_STYLE.width) {
this.movieElems[i].style.width = `${CSS_STYLE.width}px`; this.movieElems[i].style.width = `${CSS_STYLE.width}px`;
this.movieElems[i].style.height = `${CSS_STYLE.height}px`; this.movieElems[i].style.height = `${CSS_STYLE.height}px`;
this.movieElems[i].style['z-index'] = 1; this.movieElems[i].style['z-index'] = 1;
this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.position = 'absolute';
this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`; this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`;
this.movieElems[i].style.top = `${this.movieElems[i].dataset.top}px`; this.movieElems[i].style.top = `${this.movieElems[i].dataset.top}px`;
setTimeout(() => {
this.movieElems[i].dataset.clicked = false; this.movieElems[i].dataset.clicked = false;
}, 500);
} }
} }
this.hideSeasons(); this.hideSeasons();
this.hideEpisodes(); this.hideEpisodes();
this.hideDetails(); this.hideDetails();
clearInterval(this.showDetailsTimeout);
clearInterval(this.showSeasonElemTimeout);
clearInterval(this.seasonTitleColorTimeout);
clearInterval(this.moveElemTimeout);
clearInterval(this.hideSeasonsTimeout);
clearInterval(this.hideEpisodesTimeout);
clearInterval(this.scrollDownInactiveSeasonsTimeout);
clearInterval(this.episodesLoadTimeout);
clearInterval(this.episodesElemFreshlyLoadedTimeout);
clearInterval(this.seasonElemFreshlyLoadedTimeout);
}; };
this.hideSeasons = () => { this.hideSeasons = () => {
if (this.seasonsElem) { if (this.seasonsElem) {
this.seasonsElemHidden = true; this.seasonsElemHidden = true;
const top = this.getTop(); const top = this.getTop();
this.seasonsElem.style.top = `${top + 2000}px`; this.seasonsElem.style.top = `${top + 2000}px`;
setTimeout(() => { clearInterval(this.hideSeasonsTimeout);
this.hideSeasonsTimeout = setTimeout(() => {
if (this.seasonsElem && !this.seasonElemFreshlyLoaded) { if (this.seasonsElem && !this.seasonElemFreshlyLoaded) {
this.seasonsElem.innerHTML = ''; this.seasonsElem.innerHTML = '';
this.seasonsElem.style.display = 'none'; this.seasonsElem.style.display = 'none';
@ -19727,7 +19739,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.episodesElemHidden = true; this.episodesElemHidden = true;
const top = this.getTop(); const top = this.getTop();
this.episodesElem.style.top = `${top + 2000}px`; this.episodesElem.style.top = `${top + 2000}px`;
setTimeout(() => { clearInterval(this.hideEpisodesTimeout);
this.hideEpisodesTimeout = setTimeout(() => {
if (this.episodesElem && !this.episodesElemFreshlyLoaded) { if (this.episodesElem && !this.episodesElemFreshlyLoaded) {
this.episodesElem.innerHTML = ''; this.episodesElem.innerHTML = '';
this.episodesElem.style.display = 'none'; this.episodesElem.style.display = 'none';
@ -19746,7 +19759,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (seasonElem.dataset.clicked === 'false') { if (seasonElem.dataset.clicked === 'false') {
seasonElem.style.marginTop = '1000px'; seasonElem.style.marginTop = '1000px';
seasonElem.style.marginLeft = `0px`; seasonElem.style.marginLeft = `0px`;
setTimeout(() => { this.scrollDownInactiveSeasonsTimeout = setTimeout(() => {
seasonElem.style.display = 'none'; seasonElem.style.display = 'none';
seasonTitleElem.style.display = 'none'; seasonTitleElem.style.display = 'none';
seasonEpisodesCount.style.display = 'none'; seasonEpisodesCount.style.display = 'none';
@ -19769,7 +19782,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.detailElem) { if (this.detailElem) {
this.detailElem.style.transition = '0s'; this.detailElem.style.transition = '0s';
this.detailElem.style.top = `${top - 1000}px`; this.detailElem.style.top = `${top - 1000}px`;
setTimeout(() => { clearInterval(this.showDetailsTimeout);
this.showDetailsTimeout = setTimeout(() => {
if (this.detailElem) { if (this.detailElem) {
this.detailElem.style.visibility = 'visible'; this.detailElem.style.visibility = 'visible';
this.detailElem.style.transition = '0.7s'; this.detailElem.style.transition = '0.7s';
@ -19849,6 +19863,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonContainer.append(seasonEpisodesCount); seasonContainer.append(seasonEpisodesCount);
seasonContainer.addEventListener('click', event => { seasonContainer.addEventListener('click', event => {
event.stopPropagation(); event.stopPropagation();
if (this.seasonContainerClickEnabled) {
this.seasonContainerClickEnabled = false;
setTimeout(() => {
this.seasonContainerClickEnabled = true;
}, 500);
if (this.activeMovieElem) { if (this.activeMovieElem) {
if (seasonElem.dataset.clicked === 'false') { if (seasonElem.dataset.clicked === 'false') {
seasonElem.dataset.clicked = 'true'; seasonElem.dataset.clicked = 'true';
@ -19858,7 +19877,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonElem.style.width = `${CSS_STYLE.expandedWidth}px`; seasonElem.style.width = `${CSS_STYLE.expandedWidth}px`;
seasonElem.style.height = `${CSS_STYLE.expandedHeight - 6}px`; seasonElem.style.height = `${CSS_STYLE.expandedHeight - 6}px`;
seasonElem.style.zIndex = '3'; seasonElem.style.zIndex = '3';
seasonElem.style.marginLeft = `-${getOffset(seasonElem).left - getOffset(this.activeMovieElem).left}px`; seasonElem.style.marginLeft = `-${getOffset(seasonElem).left -
getOffset(this.activeMovieElem).left}px`;
seasonTitleElem.style.color = 'rgba(255,255,255,0)'; seasonTitleElem.style.color = 'rgba(255,255,255,0)';
seasonEpisodesCount.style.color = 'rgba(255,255,255,0)'; seasonEpisodesCount.style.color = 'rgba(255,255,255,0)';
if (this.detailElem) { if (this.detailElem) {
@ -19915,14 +19935,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.episodesElem.append(episodeContainer); this.episodesElem.append(episodeContainer);
} }
}); });
setTimeout(() => { clearInterval(this.episodesLoadTimeout);
this.episodesLoadTimeout = setTimeout(() => {
if (this.episodesElem) { if (this.episodesElem) {
this.episodesElem.style.transition = `0.7s`; this.episodesElem.style.transition = `0.7s`;
this.episodesElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`; this.episodesElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`;
this.resizeBackground(); this.resizeBackground();
} }
}, 200); }, 200);
setTimeout(() => { clearInterval(this.episodesElemFreshlyLoadedTimeout);
this.episodesElemFreshlyLoadedTimeout = setTimeout(() => {
this.episodesElemFreshlyLoaded = false; this.episodesElemFreshlyLoaded = false;
}, 700); }, 700);
} }
@ -19942,6 +19964,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
} }
} }
}
}); });
this.seasonsElem.append(seasonContainer); this.seasonsElem.append(seasonContainer);
} }
@ -19959,10 +19982,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const seasonElem = elem; const seasonElem = elem;
seasonElem.style.position = 'absolute'; seasonElem.style.position = 'absolute';
}); });
setTimeout(() => { clearInterval(this.seasonElemFreshlyLoadedTimeout);
this.seasonElemFreshlyLoadedTimeout = setTimeout(() => {
this.seasonElemFreshlyLoaded = false; this.seasonElemFreshlyLoaded = false;
}, 700); }, 700);
setTimeout(() => { clearInterval(this.showSeasonElemTimeout);
this.showSeasonElemTimeout = setTimeout(() => {
if (this.seasonsElem) { if (this.seasonsElem) {
this.seasonsElem.style.transition = `0.7s`; this.seasonsElem.style.transition = `0.7s`;
this.seasonsElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`; this.seasonsElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`;

75
src/plex-meets-homeassistant.ts
Unescape View File

@ -13,6 +13,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
plex: Plex | undefined; plex: Plex | undefined;
seasonContainerClickEnabled = true;
showDetailsTimeout: any;
showSeasonElemTimeout: any;
seasonTitleColorTimeout: any;
moveElemTimeout: any;
hideSeasonsTimeout: any;
hideEpisodesTimeout: any;
scrollDownInactiveSeasonsTimeout: any;
episodesLoadTimeout: any;
episodesElemFreshlyLoadedTimeout: any;
seasonElemFreshlyLoadedTimeout: any;
looseSearch = false; looseSearch = false;
playController: PlayController | undefined; playController: PlayController | undefined;
@ -294,7 +316,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonElemLocal.dataset.clicked = 'false'; seasonElemLocal.dataset.clicked = 'false';
seasonTitleElem.style.display = 'block'; seasonTitleElem.style.display = 'block';
seasonEpisodesCount.style.display = 'block'; seasonEpisodesCount.style.display = 'block';
setTimeout(() => { // clearInterval(this.seasonTitleColorTimeout);
this.seasonTitleColorTimeout = setTimeout(() => {
seasonTitleElem.style.color = 'rgba(255,255,255,1)'; seasonTitleElem.style.color = 'rgba(255,255,255,1)';
seasonEpisodesCount.style.color = 'rgba(255,255,255,1)'; seasonEpisodesCount.style.color = 'rgba(255,255,255,1)';
}, 500); }, 500);
@ -303,7 +326,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (seasonElem.dataset.clicked === 'true') { if (seasonElem.dataset.clicked === 'true') {
moveElem(seasonElem); moveElem(seasonElem);
} else { } else {
setTimeout(() => { // clearInterval(this.moveElemTimeout);
this.moveElemTimeout = setTimeout(() => {
moveElem(seasonElem); moveElem(seasonElem);
}, 100); }, 100);
} }
@ -314,21 +338,29 @@ class PlexMeetsHomeAssistant extends HTMLElement {
minimizeAll = (): void => { minimizeAll = (): void => {
this.activeMovieElem = undefined; this.activeMovieElem = undefined;
for (let i = 0; i < this.movieElems.length; i += 1) { for (let i = 0; i < this.movieElems.length; i += 1) {
if (this.movieElems[i].dataset.clicked === 'true') { if (parseInt(this.movieElems[i].style.width, 10) > CSS_STYLE.width) {
this.movieElems[i].style.width = `${CSS_STYLE.width}px`; this.movieElems[i].style.width = `${CSS_STYLE.width}px`;
this.movieElems[i].style.height = `${CSS_STYLE.height}px`; this.movieElems[i].style.height = `${CSS_STYLE.height}px`;
this.movieElems[i].style['z-index'] = 1; this.movieElems[i].style['z-index'] = 1;
this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.position = 'absolute';
this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`; this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`;
this.movieElems[i].style.top = `${this.movieElems[i].dataset.top}px`; this.movieElems[i].style.top = `${this.movieElems[i].dataset.top}px`;
setTimeout(() => {
this.movieElems[i].dataset.clicked = false; this.movieElems[i].dataset.clicked = false;
}, 500);
} }
} }
this.hideSeasons(); this.hideSeasons();
this.hideEpisodes(); this.hideEpisodes();
this.hideDetails(); this.hideDetails();
clearInterval(this.showDetailsTimeout);
clearInterval(this.showSeasonElemTimeout);
clearInterval(this.seasonTitleColorTimeout);
clearInterval(this.moveElemTimeout);
clearInterval(this.hideSeasonsTimeout);
clearInterval(this.hideEpisodesTimeout);
clearInterval(this.scrollDownInactiveSeasonsTimeout);
clearInterval(this.episodesLoadTimeout);
clearInterval(this.episodesElemFreshlyLoadedTimeout);
clearInterval(this.seasonElemFreshlyLoadedTimeout);
}; };
hideSeasons = (): void => { hideSeasons = (): void => {
@ -336,7 +368,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.seasonsElemHidden = true; this.seasonsElemHidden = true;
const top = this.getTop(); const top = this.getTop();
this.seasonsElem.style.top = `${top + 2000}px`; this.seasonsElem.style.top = `${top + 2000}px`;
setTimeout(() => { clearInterval(this.hideSeasonsTimeout);
this.hideSeasonsTimeout = setTimeout(() => {
if (this.seasonsElem && !this.seasonElemFreshlyLoaded) { if (this.seasonsElem && !this.seasonElemFreshlyLoaded) {
this.seasonsElem.innerHTML = ''; this.seasonsElem.innerHTML = '';
this.seasonsElem.style.display = 'none'; this.seasonsElem.style.display = 'none';
@ -351,7 +384,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.episodesElemHidden = true; this.episodesElemHidden = true;
const top = this.getTop(); const top = this.getTop();
this.episodesElem.style.top = `${top + 2000}px`; this.episodesElem.style.top = `${top + 2000}px`;
setTimeout(() => { clearInterval(this.hideEpisodesTimeout);
this.hideEpisodesTimeout = setTimeout(() => {
if (this.episodesElem && !this.episodesElemFreshlyLoaded) { if (this.episodesElem && !this.episodesElemFreshlyLoaded) {
this.episodesElem.innerHTML = ''; this.episodesElem.innerHTML = '';
this.episodesElem.style.display = 'none'; this.episodesElem.style.display = 'none';
@ -371,7 +405,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (seasonElem.dataset.clicked === 'false') { if (seasonElem.dataset.clicked === 'false') {
seasonElem.style.marginTop = '1000px'; seasonElem.style.marginTop = '1000px';
seasonElem.style.marginLeft = `0px`; seasonElem.style.marginLeft = `0px`;
setTimeout(() => { this.scrollDownInactiveSeasonsTimeout = setTimeout(() => {
seasonElem.style.display = 'none'; seasonElem.style.display = 'none';
seasonTitleElem.style.display = 'none'; seasonTitleElem.style.display = 'none';
seasonEpisodesCount.style.display = 'none'; seasonEpisodesCount.style.display = 'none';
@ -396,8 +430,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.detailElem) { if (this.detailElem) {
this.detailElem.style.transition = '0s'; this.detailElem.style.transition = '0s';
this.detailElem.style.top = `${top - 1000}px`; this.detailElem.style.top = `${top - 1000}px`;
clearInterval(this.showDetailsTimeout);
setTimeout(() => { this.showDetailsTimeout = setTimeout(() => {
if (this.detailElem) { if (this.detailElem) {
this.detailElem.style.visibility = 'visible'; this.detailElem.style.visibility = 'visible';
this.detailElem.style.transition = '0.7s'; this.detailElem.style.transition = '0.7s';
@ -492,6 +526,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonContainer.addEventListener('click', event => { seasonContainer.addEventListener('click', event => {
event.stopPropagation(); event.stopPropagation();
if (this.seasonContainerClickEnabled) {
this.seasonContainerClickEnabled = false;
setTimeout(() => {
this.seasonContainerClickEnabled = true;
}, 500);
if (this.activeMovieElem) { if (this.activeMovieElem) {
if (seasonElem.dataset.clicked === 'false') { if (seasonElem.dataset.clicked === 'false') {
seasonElem.dataset.clicked = 'true'; seasonElem.dataset.clicked = 'true';
@ -504,7 +543,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonElem.style.height = `${CSS_STYLE.expandedHeight - 6}px`; seasonElem.style.height = `${CSS_STYLE.expandedHeight - 6}px`;
seasonElem.style.zIndex = '3'; seasonElem.style.zIndex = '3';
seasonElem.style.marginLeft = `-${getOffset(seasonElem).left - getOffset(this.activeMovieElem).left}px`; seasonElem.style.marginLeft = `-${getOffset(seasonElem).left -
getOffset(this.activeMovieElem).left}px`;
seasonTitleElem.style.color = 'rgba(255,255,255,0)'; seasonTitleElem.style.color = 'rgba(255,255,255,0)';
seasonEpisodesCount.style.color = 'rgba(255,255,255,0)'; seasonEpisodesCount.style.color = 'rgba(255,255,255,0)';
@ -571,7 +611,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.episodesElem.append(episodeContainer); this.episodesElem.append(episodeContainer);
} }
}); });
setTimeout(() => { clearInterval(this.episodesLoadTimeout);
this.episodesLoadTimeout = setTimeout(() => {
if (this.episodesElem) { if (this.episodesElem) {
this.episodesElem.style.transition = `0.7s`; this.episodesElem.style.transition = `0.7s`;
this.episodesElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`; this.episodesElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`;
@ -579,7 +620,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.resizeBackground(); this.resizeBackground();
} }
}, 200); }, 200);
setTimeout(() => { clearInterval(this.episodesElemFreshlyLoadedTimeout);
this.episodesElemFreshlyLoadedTimeout = setTimeout(() => {
this.episodesElemFreshlyLoaded = false; this.episodesElemFreshlyLoaded = false;
}, 700); }, 700);
} }
@ -598,6 +640,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
} }
} }
}
}); });
this.seasonsElem.append(seasonContainer); this.seasonsElem.append(seasonContainer);
@ -618,11 +661,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonElem.style.position = 'absolute'; seasonElem.style.position = 'absolute';
}); });
setTimeout(() => { clearInterval(this.seasonElemFreshlyLoadedTimeout);
this.seasonElemFreshlyLoadedTimeout = setTimeout(() => {
this.seasonElemFreshlyLoaded = false; this.seasonElemFreshlyLoaded = false;
}, 700); }, 700);
setTimeout(() => { clearInterval(this.showSeasonElemTimeout);
this.showSeasonElemTimeout = setTimeout(() => {
if (this.seasonsElem) { if (this.seasonsElem) {
this.seasonsElem.style.transition = `0.7s`; this.seasonsElem.style.transition = `0.7s`;
this.seasonsElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`; this.seasonsElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`;

Write Preview
Loading…
Cancel
Save