Fix: Expanded card top position on multiple cards

pull/16/head
Juraj Nyíri 4 years ago
parent 73f441742e
commit 0e8e8dbc82

@ -19515,8 +19515,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideSeasons = () => { this.hideSeasons = () => {
if (this.seasonsElem) { if (this.seasonsElem) {
this.seasonsElemHidden = true; this.seasonsElemHidden = true;
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
this.seasonsElem.style.top = `${top + 2000}px`; this.seasonsElem.style.top = `${top + 2000}px`;
setTimeout(() => { setTimeout(() => {
if (this.seasonsElem && !this.seasonElemFreshlyLoaded) { if (this.seasonsElem && !this.seasonElemFreshlyLoaded) {
@ -19530,8 +19529,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideEpisodes = () => { this.hideEpisodes = () => {
if (this.episodesElem) { if (this.episodesElem) {
this.episodesElemHidden = true; this.episodesElemHidden = true;
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
this.episodesElem.style.top = `${top + 2000}px`; this.episodesElem.style.top = `${top + 2000}px`;
setTimeout(() => { setTimeout(() => {
if (this.episodesElem && !this.episodesElemFreshlyLoaded) { if (this.episodesElem && !this.episodesElemFreshlyLoaded) {
@ -19562,8 +19560,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}; };
this.hideDetails = () => { this.hideDetails = () => {
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (this.detailElem) { if (this.detailElem) {
this.detailElem.style.top = `${top - 1000}px`; this.detailElem.style.top = `${top - 1000}px`;
this.detailElem.style.color = 'rgba(255,255,255,0)'; this.detailElem.style.color = 'rgba(255,255,255,0)';
@ -19572,8 +19569,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}; };
this.showDetails = async (data) => { this.showDetails = async (data) => {
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
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`;
@ -19819,8 +19815,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
} }
else { else {
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
this.minimizeAll(); this.minimizeAll();
this.showDetails(this.activeMovieElemData); this.showDetails(this.activeMovieElemData);
this.showBackground(); this.showBackground();
@ -19833,6 +19828,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.activeMovieElem = movieElemLocal; this.activeMovieElem = movieElemLocal;
} }
}; };
this.getTop = () => {
const doc = document.documentElement;
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
const cardTop = getOffset(this.content).top;
if (top < cardTop) {
return 0;
}
return top - cardTop + 64;
};
this.getMovieElement = (data, serverID) => { this.getMovieElement = (data, serverID) => {
const thumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.expandedWidth}&height=${CSS_STYLE.expandedHeight}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`; const thumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.expandedWidth}&height=${CSS_STYLE.expandedHeight}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
const container = document.createElement('div'); const container = document.createElement('div');

@ -297,8 +297,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
hideSeasons = (): void => { hideSeasons = (): void => {
if (this.seasonsElem) { if (this.seasonsElem) {
this.seasonsElemHidden = true; this.seasonsElemHidden = true;
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
this.seasonsElem.style.top = `${top + 2000}px`; this.seasonsElem.style.top = `${top + 2000}px`;
setTimeout(() => { setTimeout(() => {
if (this.seasonsElem && !this.seasonElemFreshlyLoaded) { if (this.seasonsElem && !this.seasonElemFreshlyLoaded) {
@ -313,8 +312,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
hideEpisodes = (): void => { hideEpisodes = (): void => {
if (this.episodesElem) { if (this.episodesElem) {
this.episodesElemHidden = true; this.episodesElemHidden = true;
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
this.episodesElem.style.top = `${top + 2000}px`; this.episodesElem.style.top = `${top + 2000}px`;
setTimeout(() => { setTimeout(() => {
if (this.episodesElem && !this.episodesElemFreshlyLoaded) { if (this.episodesElem && !this.episodesElemFreshlyLoaded) {
@ -347,8 +345,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
hideDetails = (): void => { hideDetails = (): void => {
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (this.detailElem) { if (this.detailElem) {
this.detailElem.style.top = `${top - 1000}px`; this.detailElem.style.top = `${top - 1000}px`;
this.detailElem.style.color = 'rgba(255,255,255,0)'; this.detailElem.style.color = 'rgba(255,255,255,0)';
@ -358,8 +355,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
showDetails = async (data: any): Promise<void> => { showDetails = async (data: any): Promise<void> => {
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
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`;
@ -645,8 +641,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
} else { } else {
const doc = document.documentElement; const top = this.getTop();
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
this.minimizeAll(); this.minimizeAll();
this.showDetails(this.activeMovieElemData); this.showDetails(this.activeMovieElemData);
this.showBackground(); this.showBackground();
@ -660,6 +655,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}; };
getTop = (): number => {
const doc = document.documentElement;
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
const cardTop = getOffset(this.content).top;
if (top < cardTop) {
return 0;
}
return top - cardTop + 64;
};
getMovieElement = (data: any, serverID: string): HTMLDivElement => { getMovieElement = (data: any, serverID: string): HTMLDivElement => {
const thumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.expandedWidth}&height=${CSS_STYLE.expandedHeight}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`; const thumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.expandedWidth}&height=${CSS_STYLE.expandedHeight}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;

Loading…
Cancel
Save