Update: Seasons now scroll down on season focus

pull/16/head
Juraj Nyíri 4 years ago
parent 3ecc1de620
commit a98897256f

@ -19410,17 +19410,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
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];
if (seasonElem.dataset.clicked === 'true') { seasonElem.style.display = 'block';
const moveElem = (seasonElem) => {
seasonElem.style.marginTop = '0'; seasonElem.style.marginTop = '0';
seasonElem.style.width = `${CSS_STYLE.width}px`; seasonElem.style.width = `${CSS_STYLE.width}px`;
seasonElem.style.height = `${CSS_STYLE.height - 3}px`; seasonElem.style.height = `${CSS_STYLE.height - 3}px`;
seasonElem.style.zIndex = '3'; seasonElem.style.zIndex = '3';
seasonElem.style.marginLeft = `0px`; seasonElem.style.marginLeft = `0px`;
seasonElem.dataset.clicked = 'false'; seasonElem.dataset.clicked = 'false';
seasonTitleElem.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') {
moveElem(seasonElem);
}
else {
setTimeout(() => {
moveElem(seasonElem);
}, 100);
} }
}); });
} }
@ -19440,6 +19451,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}, 500); }, 500);
} }
} }
this.hideSeasons();
this.hideDetails();
};
this.hideSeasons = () => {
if (this.seasonsElem) { if (this.seasonsElem) {
const doc = document.documentElement; const doc = document.documentElement;
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
@ -19454,7 +19469,26 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}, 700); }, 700);
} }
this.hideDetails(); };
this.scrollDownInactiveSeasons = () => {
console.log('scrollDownInactiveSeasons');
if (this.seasonsElem) {
lodash.forEach(this.seasonsElem.childNodes, child => {
const seasonElem = child.children[0];
console.log(seasonElem);
const seasonTitleElem = child.children[1];
const seasonEpisodesCount = child.children[2];
if (seasonElem.dataset.clicked === 'false') {
seasonElem.style.marginTop = '1000px';
seasonElem.style.marginLeft = `0px`;
setTimeout(() => {
seasonElem.style.display = 'none';
seasonTitleElem.style.display = 'none';
seasonEpisodesCount.style.display = 'none';
}, 500);
}
});
}
}; };
this.hideDetails = () => { this.hideDetails = () => {
const doc = document.documentElement; const doc = document.documentElement;
@ -19548,14 +19582,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
event.stopPropagation(); event.stopPropagation();
if (this.activeMovieElem) { if (this.activeMovieElem) {
if (seasonElem.dataset.clicked === 'false') { if (seasonElem.dataset.clicked === 'false') {
seasonElem.dataset.clicked = 'true';
this.activeMovieElem.style.top = `${top - 1000}px`; this.activeMovieElem.style.top = `${top - 1000}px`;
this.minimizeSeasons(); 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 - getOffset(this.activeMovieElem).left}px`;
seasonElem.dataset.clicked = 'true';
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)';
} }

@ -224,17 +224,29 @@ class PlexMeetsHomeAssistant extends HTMLElement {
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;
if (seasonElem.dataset.clicked === 'true') { seasonElem.style.display = 'block';
const moveElem = (seasonElem: HTMLElement) => {
seasonElem.style.marginTop = '0'; seasonElem.style.marginTop = '0';
seasonElem.style.width = `${CSS_STYLE.width}px`; seasonElem.style.width = `${CSS_STYLE.width}px`;
seasonElem.style.height = `${CSS_STYLE.height - 3}px`; seasonElem.style.height = `${CSS_STYLE.height - 3}px`;
seasonElem.style.zIndex = '3'; seasonElem.style.zIndex = '3';
seasonElem.style.marginLeft = `0px`; seasonElem.style.marginLeft = `0px`;
seasonElem.dataset.clicked = 'false'; seasonElem.dataset.clicked = 'false';
seasonTitleElem.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') {
moveElem(seasonElem);
} else {
setTimeout(() => {
moveElem(seasonElem);
}, 100);
} }
}); });
} }
@ -255,6 +267,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}, 500); }, 500);
} }
} }
this.hideSeasons();
this.hideDetails();
};
hideSeasons = (): void => {
if (this.seasonsElem) { if (this.seasonsElem) {
const doc = document.documentElement; const doc = document.documentElement;
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
@ -269,8 +286,27 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}, 700); }, 700);
} }
};
this.hideDetails(); scrollDownInactiveSeasons = (): void => {
console.log('scrollDownInactiveSeasons');
if (this.seasonsElem) {
_.forEach(this.seasonsElem.childNodes, child => {
const seasonElem = (child as HTMLElement).children[0] as HTMLElement;
console.log(seasonElem);
const seasonTitleElem = (child as HTMLElement).children[1] as HTMLElement;
const seasonEpisodesCount = (child as HTMLElement).children[2] as HTMLElement;
if (seasonElem.dataset.clicked === 'false') {
seasonElem.style.marginTop = '1000px';
seasonElem.style.marginLeft = `0px`;
setTimeout(() => {
seasonElem.style.display = 'none';
seasonTitleElem.style.display = 'none';
seasonEpisodesCount.style.display = 'none';
}, 500);
}
});
}
}; };
hideDetails = (): void => { hideDetails = (): void => {
@ -381,9 +417,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
event.stopPropagation(); event.stopPropagation();
if (this.activeMovieElem) { if (this.activeMovieElem) {
if (seasonElem.dataset.clicked === 'false') { if (seasonElem.dataset.clicked === 'false') {
seasonElem.dataset.clicked = 'true';
this.activeMovieElem.style.top = `${top - 1000}px`; this.activeMovieElem.style.top = `${top - 1000}px`;
this.minimizeSeasons(); this.scrollDownInactiveSeasons();
seasonElem.style.marginTop = `${-CSS_STYLE.expandedHeight - 16}px`; seasonElem.style.marginTop = `${-CSS_STYLE.expandedHeight - 16}px`;
@ -392,7 +429,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
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`;
seasonElem.dataset.clicked = 'true';
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)';

Loading…
Cancel
Save