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

Fix: Edge case scenario where episodes would not dissappear after navigating back to seasons

Browse Source
pull/16/head
Juraj Nyíri 4 years ago
parent 02fc49eea4
commit 8f732cc60c
2 changed files with 246 additions and 258 deletions
Show Stats Download Patch File Download Diff File

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

@ -19453,41 +19453,38 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}, 100); }, 100);
}; };
this.minimizeSeasons = () => { this.minimizeSeasons = () => {
return new Promise((resolve, reject) => { this.seasonsElemHidden = false;
this.seasonsElemHidden = false; if (this.seasonsElem) {
if (this.seasonsElem) { lodash.forEach(this.seasonsElem.childNodes, child => {
lodash.forEach(this.seasonsElem.childNodes, child => { const seasonElem = child.children[0];
const seasonElem = child.children[0]; const seasonTitleElem = child.children[1];
const seasonTitleElem = child.children[1]; const seasonEpisodesCount = child.children[2];
const seasonEpisodesCount = child.children[2]; seasonElem.style.display = 'block';
seasonElem.style.display = 'block'; const moveElem = (elem) => {
const moveElem = (elem) => { const seasonElemLocal = elem;
const seasonElemLocal = elem; seasonElemLocal.style.marginTop = '0';
seasonElemLocal.style.marginTop = '0'; seasonElemLocal.style.width = `${CSS_STYLE.width}px`;
seasonElemLocal.style.width = `${CSS_STYLE.width}px`; seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`;
seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`; seasonElemLocal.style.zIndex = '3';
seasonElemLocal.style.zIndex = '3'; seasonElemLocal.style.marginLeft = `0px`;
seasonElemLocal.style.marginLeft = `0px`; 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(() => {
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); };
}; if (seasonElem.dataset.clicked === 'true') {
if (seasonElem.dataset.clicked === 'true') { moveElem(seasonElem);
}
else {
setTimeout(() => {
moveElem(seasonElem); moveElem(seasonElem);
} }, 100);
else { }
setTimeout(() => { });
moveElem(seasonElem); }
resolve();
}, 100);
}
});
}
});
}; };
this.minimizeAll = () => { this.minimizeAll = () => {
this.activeMovieElem = undefined; this.activeMovieElem = undefined;
@ -19648,100 +19645,97 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonEpisodesCount.innerHTML = `${escapeHtml(seasonData.leafCount)} episodes`; seasonEpisodesCount.innerHTML = `${escapeHtml(seasonData.leafCount)} episodes`;
seasonContainer.append(seasonEpisodesCount); seasonContainer.append(seasonEpisodesCount);
seasonContainer.addEventListener('click', event => { seasonContainer.addEventListener('click', event => {
(async () => { event.stopPropagation();
event.stopPropagation(); if (this.activeMovieElem) {
if (this.activeMovieElem) { if (seasonElem.dataset.clicked === 'false') {
if (seasonElem.dataset.clicked === 'false') { seasonElem.dataset.clicked = 'true';
seasonElem.dataset.clicked = 'true'; this.activeMovieElem.style.top = `${top - 1000}px`;
this.activeMovieElem.style.top = `${top - 1000}px`; this.scrollDownInactiveSeasons();
this.scrollDownInactiveSeasons(); seasonElem.style.marginTop = `${-CSS_STYLE.expandedHeight - 16}px`;
seasonElem.style.marginTop = `${-CSS_STYLE.expandedHeight - 16}px`; 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 - seasonTitleElem.style.color = 'rgba(255,255,255,0)';
getOffset(this.activeMovieElem).left}px`; seasonEpisodesCount.style.color = 'rgba(255,255,255,0)';
seasonTitleElem.style.color = 'rgba(255,255,255,0)'; if (this.detailElem) {
seasonEpisodesCount.style.color = 'rgba(255,255,255,0)'; this.detailElem.children[1].innerHTML = seasonData.title;
if (this.detailElem) {
this.detailElem.children[1].innerHTML = seasonData.title;
}
(async () => {
if (seasonData.leafCount > 0 && this.plex) {
this.episodesElemFreshlyLoaded = true;
const episodesData = await this.plex.getLibraryData(seasonData.key.split('/')[3]);
if (this.episodesElem) {
this.episodesElemHidden = false;
this.episodesElem.style.display = 'block';
this.episodesElem.innerHTML = '';
this.episodesElem.style.transition = `0s`;
this.episodesElem.style.top = `${top + 2000}px`;
lodash.forEach(episodesData, episodeData => {
if (this.episodesElem) {
const episodeContainer = document.createElement('div');
episodeContainer.className = 'episodeContainer';
episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`;
const episodeThumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.episodeWidth}&height=${CSS_STYLE.episodeHeight}&minSize=1&upscale=1&url=${episodeData.thumb}&X-Plex-Token=${this.config.token}`;
const episodeElem = document.createElement('div');
episodeElem.className = 'episodeElem';
episodeElem.style.width = `${CSS_STYLE.episodeWidth}px`;
episodeElem.style.height = `${CSS_STYLE.episodeHeight}px`;
episodeElem.style.backgroundImage = `url('${episodeThumbURL}')`;
episodeElem.dataset.clicked = 'false';
const episodeInteractiveArea = document.createElement('div');
episodeInteractiveArea.className = 'interactiveArea';
const episodePlayButton = document.createElement('button');
episodePlayButton.name = 'playButton';
episodePlayButton.addEventListener('click', episodeEvent => {
episodeEvent.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(episodeData.key.split('/')[3]);
}
});
episodeInteractiveArea.append(episodePlayButton);
episodeElem.append(episodeInteractiveArea);
episodeContainer.append(episodeElem);
const episodeTitleElem = document.createElement('div');
episodeTitleElem.className = 'episodeTitleElem';
episodeTitleElem.innerHTML = escapeHtml(episodeData.title);
episodeContainer.append(episodeTitleElem);
const episodeNumber = document.createElement('div');
episodeNumber.className = 'episodeNumber';
episodeNumber.innerHTML = escapeHtml(`Episode ${escapeHtml(episodeData.index)}`);
episodeContainer.append(episodeNumber);
episodeContainer.addEventListener('click', episodeEvent => {
episodeEvent.stopPropagation();
});
this.episodesElem.append(episodeContainer);
}
});
setTimeout(() => {
if (this.episodesElem) {
this.episodesElem.style.transition = `0.7s`;
this.episodesElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`;
this.resizeBackground();
}
}, 200);
setTimeout(() => {
this.episodesElemFreshlyLoaded = false;
}, 700);
}
}
})();
} }
else { (async () => {
await this.minimizeSeasons(); if (seasonData.leafCount > 0 && this.plex) {
this.hideEpisodes(); this.episodesElemFreshlyLoaded = true;
this.activeMovieElem.style.top = `${top + 16}px`; const episodesData = await this.plex.getLibraryData(seasonData.key.split('/')[3]);
if (this.detailElem && this.detailElem.children[1]) { if (this.episodesElem) {
const { year } = this.detailElem.children[1].dataset; this.episodesElemHidden = false;
if (year) { this.episodesElem.style.display = 'block';
this.detailElem.children[1].innerHTML = year; this.episodesElem.innerHTML = '';
this.episodesElem.style.transition = `0s`;
this.episodesElem.style.top = `${top + 2000}px`;
lodash.forEach(episodesData, episodeData => {
if (this.episodesElem) {
const episodeContainer = document.createElement('div');
episodeContainer.className = 'episodeContainer';
episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`;
const episodeThumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.episodeWidth}&height=${CSS_STYLE.episodeHeight}&minSize=1&upscale=1&url=${episodeData.thumb}&X-Plex-Token=${this.config.token}`;
const episodeElem = document.createElement('div');
episodeElem.className = 'episodeElem';
episodeElem.style.width = `${CSS_STYLE.episodeWidth}px`;
episodeElem.style.height = `${CSS_STYLE.episodeHeight}px`;
episodeElem.style.backgroundImage = `url('${episodeThumbURL}')`;
episodeElem.dataset.clicked = 'false';
const episodeInteractiveArea = document.createElement('div');
episodeInteractiveArea.className = 'interactiveArea';
const episodePlayButton = document.createElement('button');
episodePlayButton.name = 'playButton';
episodePlayButton.addEventListener('click', episodeEvent => {
episodeEvent.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(episodeData.key.split('/')[3]);
}
});
episodeInteractiveArea.append(episodePlayButton);
episodeElem.append(episodeInteractiveArea);
episodeContainer.append(episodeElem);
const episodeTitleElem = document.createElement('div');
episodeTitleElem.className = 'episodeTitleElem';
episodeTitleElem.innerHTML = escapeHtml(episodeData.title);
episodeContainer.append(episodeTitleElem);
const episodeNumber = document.createElement('div');
episodeNumber.className = 'episodeNumber';
episodeNumber.innerHTML = escapeHtml(`Episode ${escapeHtml(episodeData.index)}`);
episodeContainer.append(episodeNumber);
episodeContainer.addEventListener('click', episodeEvent => {
episodeEvent.stopPropagation();
});
this.episodesElem.append(episodeContainer);
}
});
setTimeout(() => {
if (this.episodesElem) {
this.episodesElem.style.transition = `0.7s`;
this.episodesElem.style.top = `${top + CSS_STYLE.expandedHeight + 16}px`;
this.resizeBackground();
}
}, 200);
setTimeout(() => {
this.episodesElemFreshlyLoaded = false;
}, 700);
} }
} }
})();
}
else {
this.minimizeSeasons();
this.hideEpisodes();
this.activeMovieElem.style.top = `${top + 16}px`;
if (this.detailElem && this.detailElem.children[1]) {
const { year } = this.detailElem.children[1].dataset;
if (year) {
this.detailElem.children[1].innerHTML = year;
}
} }
} }
})(); }
}); });
this.seasonsElem.append(seasonContainer); this.seasonsElem.append(seasonContainer);
} }

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

@ -238,43 +238,40 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}, 100); }, 100);
}; };
minimizeSeasons = (): Promise<void> => { minimizeSeasons = (): void => {
return new Promise((resolve, reject) => { this.seasonsElemHidden = false;
this.seasonsElemHidden = false; if (this.seasonsElem) {
if (this.seasonsElem) { _.forEach(this.seasonsElem.childNodes, child => {
_.forEach(this.seasonsElem.childNodes, child => { const seasonElem = (child as HTMLElement).children[0] as HTMLElement;
const seasonElem = (child as HTMLElement).children[0] as HTMLElement; const seasonTitleElem = (child as HTMLElement).children[1] as HTMLElement;
const seasonTitleElem = (child as HTMLElement).children[1] as HTMLElement; const seasonEpisodesCount = (child as HTMLElement).children[2] as HTMLElement;
const seasonEpisodesCount = (child as HTMLElement).children[2] as HTMLElement; seasonElem.style.display = 'block';
seasonElem.style.display = 'block';
const moveElem = (elem: HTMLElement): void => {
const moveElem = (elem: HTMLElement): void => { const seasonElemLocal = elem;
const seasonElemLocal = elem; seasonElemLocal.style.marginTop = '0';
seasonElemLocal.style.marginTop = '0'; seasonElemLocal.style.width = `${CSS_STYLE.width}px`;
seasonElemLocal.style.width = `${CSS_STYLE.width}px`; seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`;
seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`; seasonElemLocal.style.zIndex = '3';
seasonElemLocal.style.zIndex = '3'; seasonElemLocal.style.marginLeft = `0px`;
seasonElemLocal.style.marginLeft = `0px`; 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(() => {
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); };
};
if (seasonElem.dataset.clicked === 'true') {
if (seasonElem.dataset.clicked === 'true') { moveElem(seasonElem);
} else {
setTimeout(() => {
moveElem(seasonElem); moveElem(seasonElem);
} else { }, 100);
setTimeout(() => { }
moveElem(seasonElem); });
resolve(); }
}, 100);
}
});
}
});
}; };
minimizeAll = (): void => { minimizeAll = (): void => {
@ -456,114 +453,111 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonContainer.append(seasonEpisodesCount); seasonContainer.append(seasonEpisodesCount);
seasonContainer.addEventListener('click', event => { seasonContainer.addEventListener('click', event => {
(async (): Promise<void> => { event.stopPropagation();
event.stopPropagation(); if (this.activeMovieElem) {
if (this.activeMovieElem) { if (seasonElem.dataset.clicked === 'false') {
if (seasonElem.dataset.clicked === 'false') { seasonElem.dataset.clicked = 'true';
seasonElem.dataset.clicked = 'true'; this.activeMovieElem.style.top = `${top - 1000}px`;
this.activeMovieElem.style.top = `${top - 1000}px`;
this.scrollDownInactiveSeasons(); this.scrollDownInactiveSeasons();
seasonElem.style.marginTop = `${-CSS_STYLE.expandedHeight - 16}px`; seasonElem.style.marginTop = `${-CSS_STYLE.expandedHeight - 16}px`;
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 - seasonElem.style.marginLeft = `-${getOffset(seasonElem).left - getOffset(this.activeMovieElem).left}px`;
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) {
(this.detailElem.children[1] as HTMLElement).innerHTML = seasonData.title; (this.detailElem.children[1] as HTMLElement).innerHTML = seasonData.title;
} }
(async (): Promise<void> => { (async (): Promise<void> => {
if (seasonData.leafCount > 0 && this.plex) { if (seasonData.leafCount > 0 && this.plex) {
this.episodesElemFreshlyLoaded = true; this.episodesElemFreshlyLoaded = true;
const episodesData = await this.plex.getLibraryData(seasonData.key.split('/')[3]); const episodesData = await this.plex.getLibraryData(seasonData.key.split('/')[3]);
if (this.episodesElem) { if (this.episodesElem) {
this.episodesElemHidden = false; this.episodesElemHidden = false;
this.episodesElem.style.display = 'block'; this.episodesElem.style.display = 'block';
this.episodesElem.innerHTML = ''; this.episodesElem.innerHTML = '';
this.episodesElem.style.transition = `0s`; this.episodesElem.style.transition = `0s`;
this.episodesElem.style.top = `${top + 2000}px`; this.episodesElem.style.top = `${top + 2000}px`;
_.forEach(episodesData, episodeData => { _.forEach(episodesData, episodeData => {
if (this.episodesElem) { if (this.episodesElem) {
const episodeContainer = document.createElement('div'); const episodeContainer = document.createElement('div');
episodeContainer.className = 'episodeContainer'; episodeContainer.className = 'episodeContainer';
episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`; episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`;
const episodeThumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.episodeWidth}&height=${CSS_STYLE.episodeHeight}&minSize=1&upscale=1&url=${episodeData.thumb}&X-Plex-Token=${this.config.token}`; const episodeThumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.episodeWidth}&height=${CSS_STYLE.episodeHeight}&minSize=1&upscale=1&url=${episodeData.thumb}&X-Plex-Token=${this.config.token}`;
const episodeElem = document.createElement('div'); const episodeElem = document.createElement('div');
episodeElem.className = 'episodeElem'; episodeElem.className = 'episodeElem';
episodeElem.style.width = `${CSS_STYLE.episodeWidth}px`; episodeElem.style.width = `${CSS_STYLE.episodeWidth}px`;
episodeElem.style.height = `${CSS_STYLE.episodeHeight}px`; episodeElem.style.height = `${CSS_STYLE.episodeHeight}px`;
episodeElem.style.backgroundImage = `url('${episodeThumbURL}')`; episodeElem.style.backgroundImage = `url('${episodeThumbURL}')`;
episodeElem.dataset.clicked = 'false'; episodeElem.dataset.clicked = 'false';
const episodeInteractiveArea = document.createElement('div'); const episodeInteractiveArea = document.createElement('div');
episodeInteractiveArea.className = 'interactiveArea'; episodeInteractiveArea.className = 'interactiveArea';
const episodePlayButton = document.createElement('button'); const episodePlayButton = document.createElement('button');
episodePlayButton.name = 'playButton'; episodePlayButton.name = 'playButton';
episodePlayButton.addEventListener('click', episodeEvent => { episodePlayButton.addEventListener('click', episodeEvent => {
episodeEvent.stopPropagation(); episodeEvent.stopPropagation();
if (this.plex && this.playController) { if (this.plex && this.playController) {
this.playController.play(episodeData.key.split('/')[3]); this.playController.play(episodeData.key.split('/')[3]);
} }
}); });
episodeInteractiveArea.append(episodePlayButton); episodeInteractiveArea.append(episodePlayButton);
episodeElem.append(episodeInteractiveArea); episodeElem.append(episodeInteractiveArea);
episodeContainer.append(episodeElem); episodeContainer.append(episodeElem);
const episodeTitleElem = document.createElement('div'); const episodeTitleElem = document.createElement('div');
episodeTitleElem.className = 'episodeTitleElem'; episodeTitleElem.className = 'episodeTitleElem';
episodeTitleElem.innerHTML = escapeHtml(episodeData.title); episodeTitleElem.innerHTML = escapeHtml(episodeData.title);
episodeContainer.append(episodeTitleElem); episodeContainer.append(episodeTitleElem);
const episodeNumber = document.createElement('div'); const episodeNumber = document.createElement('div');
episodeNumber.className = 'episodeNumber'; episodeNumber.className = 'episodeNumber';
episodeNumber.innerHTML = escapeHtml(`Episode ${escapeHtml(episodeData.index)}`); episodeNumber.innerHTML = escapeHtml(`Episode ${escapeHtml(episodeData.index)}`);
episodeContainer.append(episodeNumber); episodeContainer.append(episodeNumber);
episodeContainer.addEventListener('click', episodeEvent => { episodeContainer.addEventListener('click', episodeEvent => {
episodeEvent.stopPropagation(); episodeEvent.stopPropagation();
}); });
this.episodesElem.append(episodeContainer); this.episodesElem.append(episodeContainer);
} }
}); });
setTimeout(() => { 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(() => { setTimeout(() => {
this.episodesElemFreshlyLoaded = false; this.episodesElemFreshlyLoaded = false;
}, 700); }, 700);
}
}
})();
} else {
await this.minimizeSeasons();
this.hideEpisodes();
this.activeMovieElem.style.top = `${top + 16}px`;
if (this.detailElem && (this.detailElem.children[1] as HTMLElement)) {
const { year } = (this.detailElem.children[1] as HTMLElement).dataset;
if (year) {
(this.detailElem.children[1] as HTMLElement).innerHTML = year;
} }
} }
})();
} else {
this.minimizeSeasons();
this.hideEpisodes();
this.activeMovieElem.style.top = `${top + 16}px`;
if (this.detailElem && (this.detailElem.children[1] as HTMLElement)) {
const { year } = (this.detailElem.children[1] as HTMLElement).dataset;
if (year) {
(this.detailElem.children[1] as HTMLElement).innerHTML = year;
}
} }
} }
})(); }
}); });
this.seasonsElem.append(seasonContainer); this.seasonsElem.append(seasonContainer);

Write Preview
Loading…
Cancel
Save