Add: Additional div parent

horizontal_scroll_2
Juraj Nyíri 3 years ago
parent 2ee83a7f65
commit 07bf8f531c

@ -21896,7 +21896,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (shouldRender) { if (shouldRender) {
count += 1; count += 1;
if (count > this.renderedItems) { if (count > this.renderedItems) {
this.content.appendChild(movieElem); this.contentContainer.appendChild(movieElem);
this.renderedItems += 1; this.renderedItems += 1;
} }
} }
@ -21990,6 +21990,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
this.content = document.createElement('div'); this.content = document.createElement('div');
this.content.innerHTML = this.loadCustomStyles(); this.content.innerHTML = this.loadCustomStyles();
this.content.style.overflowX = 'auto';
this.content.style.whiteSpace = 'nowrap';
if (this.error !== '') { if (this.error !== '') {
this.content.innerHTML += `Error: ${this.error}`; this.content.innerHTML += `Error: ${this.error}`;
} }
@ -22001,9 +22003,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.content.appendChild(spinner); this.content.appendChild(spinner);
} }
this.card.appendChild(this.content); this.card.appendChild(this.content);
this.contentContainer = document.createElement('div');
this.contentContainer.className = 'contentContainer';
this.content.appendChild(this.contentContainer);
const contentbg = document.createElement('div'); const contentbg = document.createElement('div');
contentbg.className = 'contentbg'; contentbg.className = 'contentbg';
this.content.appendChild(contentbg); this.contentContainer.appendChild(contentbg);
const contentArt = document.createElement('div'); const contentArt = document.createElement('div');
contentArt.className = 'contentArt'; contentArt.className = 'contentArt';
const contentArtBG1 = document.createElement('div'); const contentArtBG1 = document.createElement('div');
@ -22012,7 +22017,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const contentArtBG2 = document.createElement('div'); const contentArtBG2 = document.createElement('div');
contentArtBG2.className = 'videobg2'; contentArtBG2.className = 'videobg2';
contentArt.appendChild(contentArtBG2); contentArt.appendChild(contentArtBG2);
this.content.appendChild(contentArt); this.contentContainer.appendChild(contentArt);
this.detailElem = document.createElement('div'); this.detailElem = document.createElement('div');
this.detailElem.className = 'detail'; this.detailElem.className = 'detail';
this.detailElem.innerHTML = `<h1 class='detailsTitle'></h1> this.detailElem.innerHTML = `<h1 class='detailsTitle'></h1>
@ -22075,7 +22080,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
}); });
this.content.appendChild(this.detailElem); this.contentContainer.appendChild(this.detailElem);
const fullscreenTrailer = this.getElementsByClassName('detailPlayTrailerAction')[0]; const fullscreenTrailer = this.getElementsByClassName('detailPlayTrailerAction')[0];
fullscreenTrailer.addEventListener('click', event => { fullscreenTrailer.addEventListener('click', event => {
event.stopPropagation(); event.stopPropagation();
@ -22114,14 +22119,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
}); });
this.content.appendChild(this.seasonsElem); this.contentContainer.appendChild(this.seasonsElem);
this.episodesElem = document.createElement('div'); this.episodesElem = document.createElement('div');
this.episodesElem.className = 'episodes'; this.episodesElem.className = 'episodes';
this.episodesElem.addEventListener('click', () => { this.episodesElem.addEventListener('click', () => {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
}); });
this.content.appendChild(this.episodesElem); this.contentContainer.appendChild(this.episodesElem);
this.videoElem = document.createElement('div'); this.videoElem = document.createElement('div');
this.videoElem.className = 'video'; this.videoElem.className = 'video';
this.videoElem.addEventListener('click', event => { this.videoElem.addEventListener('click', event => {
@ -22159,7 +22164,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const videoPlayer = document.createElement('div'); const videoPlayer = document.createElement('div');
videoPlayer.className = 'videoPlayer'; videoPlayer.className = 'videoPlayer';
this.videoElem.appendChild(videoPlayer); this.videoElem.appendChild(videoPlayer);
this.content.appendChild(this.videoElem); this.contentContainer.appendChild(this.videoElem);
// todo: figure out why timeout is needed here and do it properly // todo: figure out why timeout is needed here and do it properly
setTimeout(() => { setTimeout(() => {
contentbg.addEventListener('click', () => { contentbg.addEventListener('click', () => {
@ -22173,30 +22178,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}, 1); }, 1);
const endElem = document.createElement('div'); const endElem = document.createElement('div');
endElem.className = 'clear'; endElem.className = 'clear';
this.content.appendChild(endElem); this.contentContainer.appendChild(endElem);
this.renderMovieElems(); this.renderMovieElems();
this.calculatePositions(); this.calculatePositions();
this.loadCustomStyles(); this.loadCustomStyles();
}; };
this.calculatePositions = () => { this.calculatePositions = () => {
// return; // temp return; // temp
// todo: figure out why interval is needed here and do it properly
const setLeftOffsetsInterval = setInterval(() => {
this.movieElems = this.getElementsByClassName('movieElem');
for (let i = 0; i < this.movieElems.length; i += 1) {
if (this.movieElems[i].offsetLeft === 0) {
break;
}
else {
clearInterval(setLeftOffsetsInterval);
}
this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`;
this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft;
this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`;
this.movieElems[i].dataset.top = this.movieElems[i].offsetTop;
this.movieElems[i].style.position = 'absolute';
}
}, 100);
}; };
this.minimizeSeasons = () => { this.minimizeSeasons = () => {
this.seasonsElemHidden = false; this.seasonsElemHidden = false;

@ -147,6 +147,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
content: any; content: any;
contentContainer: any;
hassObj: HomeAssistant | undefined; hassObj: HomeAssistant | undefined;
contentBGHeight = 0; contentBGHeight = 0;
@ -591,7 +593,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (shouldRender) { if (shouldRender) {
count += 1; count += 1;
if (count > this.renderedItems) { if (count > this.renderedItems) {
this.content.appendChild(movieElem); this.contentContainer.appendChild(movieElem);
this.renderedItems += 1; this.renderedItems += 1;
} }
} }
@ -697,6 +699,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.content = document.createElement('div'); this.content = document.createElement('div');
this.content.innerHTML = this.loadCustomStyles(); this.content.innerHTML = this.loadCustomStyles();
this.content.style.overflowX = 'auto';
this.content.style.whiteSpace = 'nowrap';
if (this.error !== '') { if (this.error !== '') {
this.content.innerHTML += `Error: ${this.error}`; this.content.innerHTML += `Error: ${this.error}`;
@ -709,9 +713,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.card.appendChild(this.content); this.card.appendChild(this.content);
this.contentContainer = document.createElement('div');
this.contentContainer.className = 'contentContainer';
this.content.appendChild(this.contentContainer);
const contentbg = document.createElement('div'); const contentbg = document.createElement('div');
contentbg.className = 'contentbg'; contentbg.className = 'contentbg';
this.content.appendChild(contentbg); this.contentContainer.appendChild(contentbg);
const contentArt = document.createElement('div'); const contentArt = document.createElement('div');
contentArt.className = 'contentArt'; contentArt.className = 'contentArt';
@ -724,7 +732,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
contentArtBG2.className = 'videobg2'; contentArtBG2.className = 'videobg2';
contentArt.appendChild(contentArtBG2); contentArt.appendChild(contentArtBG2);
this.content.appendChild(contentArt); this.contentContainer.appendChild(contentArt);
this.detailElem = document.createElement('div'); this.detailElem = document.createElement('div');
this.detailElem.className = 'detail'; this.detailElem.className = 'detail';
@ -792,7 +800,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.minimizeAll(); this.minimizeAll();
}); });
this.content.appendChild(this.detailElem); this.contentContainer.appendChild(this.detailElem);
const fullscreenTrailer = this.getElementsByClassName('detailPlayTrailerAction')[0] as HTMLElement; const fullscreenTrailer = this.getElementsByClassName('detailPlayTrailerAction')[0] as HTMLElement;
fullscreenTrailer.addEventListener('click', event => { fullscreenTrailer.addEventListener('click', event => {
@ -831,7 +839,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
}); });
this.content.appendChild(this.seasonsElem); this.contentContainer.appendChild(this.seasonsElem);
this.episodesElem = document.createElement('div'); this.episodesElem = document.createElement('div');
this.episodesElem.className = 'episodes'; this.episodesElem.className = 'episodes';
@ -839,7 +847,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
}); });
this.content.appendChild(this.episodesElem); this.contentContainer.appendChild(this.episodesElem);
this.videoElem = document.createElement('div'); this.videoElem = document.createElement('div');
this.videoElem.className = 'video'; this.videoElem.className = 'video';
@ -883,7 +891,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
videoPlayer.className = 'videoPlayer'; videoPlayer.className = 'videoPlayer';
this.videoElem.appendChild(videoPlayer); this.videoElem.appendChild(videoPlayer);
this.content.appendChild(this.videoElem); this.contentContainer.appendChild(this.videoElem);
// todo: figure out why timeout is needed here and do it properly // todo: figure out why timeout is needed here and do it properly
setTimeout(() => { setTimeout(() => {
@ -899,7 +907,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const endElem = document.createElement('div'); const endElem = document.createElement('div');
endElem.className = 'clear'; endElem.className = 'clear';
this.content.appendChild(endElem); this.contentContainer.appendChild(endElem);
this.renderMovieElems(); this.renderMovieElems();
this.calculatePositions(); this.calculatePositions();
@ -907,7 +915,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
calculatePositions = (): void => { calculatePositions = (): void => {
// return; // temp return; // temp
// todo: figure out why interval is needed here and do it properly // todo: figure out why interval is needed here and do it properly
const setLeftOffsetsInterval = setInterval(() => { const setLeftOffsetsInterval = setInterval(() => {
this.movieElems = this.getElementsByClassName('movieElem'); this.movieElems = this.getElementsByClassName('movieElem');

Loading…
Cancel
Save