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

WIP

Browse Source
horizontal_scroll_2
Juraj Nyíri 3 years ago
parent 39c4768e4c
commit c1fb0e8f7f
3 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File

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

@ -21324,7 +21324,10 @@ style.textContent = css `
transition: 0.5s; transition: 0.5s;
} }
.contentContainer { .contentContainer {
overflow: hidden; overflow-x: auto;
white-space: nowrap;
z-index: 1;
position: relative;
} }
.movieElem { .movieElem {
margin-bottom: 5px; margin-bottom: 5px;
@ -21904,13 +21907,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
count += 1; count += 1;
if (count > this.renderedItems) { if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem); this.contentContainer.appendChild(movieElem);
if (lodash.isEmpty(this.contentContainer.style.width)) { if (lodash.isEmpty(this.contentContainerInner.style.width)) {
console.log('1'); this.contentContainerInner.style.width = `${getWidth(movieElem) + 10}px`;
this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`;
} }
else { else {
console.log('2'); this.contentContainerInner.style.width = `${parseFloat(this.contentContainerInner.style.width) +
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
getWidth(movieElem) + getWidth(movieElem) +
10}px`; 10}px`;
} }
@ -22008,8 +22009,6 @@ 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}`;
} }
@ -22023,11 +22022,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.card.appendChild(this.content); this.card.appendChild(this.content);
this.contentContainer = document.createElement('div'); this.contentContainer = document.createElement('div');
this.contentContainer.className = 'contentContainer'; this.contentContainer.className = 'contentContainer';
// this.contentContainer.style.height = `${CSS_STYLE.height}px`; this.contentContainerInner = document.createElement('div');
this.contentContainerInner.className = 'contentContainerInner';
this.contentContainer.appendChild(this.contentContainerInner);
this.content.appendChild(this.contentContainer); this.content.appendChild(this.contentContainer);
const contentbg = document.createElement('div'); const contentbg = document.createElement('div');
contentbg.className = 'contentbg'; contentbg.className = 'contentbg';
this.contentContainer.appendChild(contentbg); this.content.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');
@ -22036,7 +22037,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.contentContainer.appendChild(contentArt); this.content.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>
@ -22099,7 +22100,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
}); });
this.contentContainer.appendChild(this.detailElem); this.content.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();
@ -22138,14 +22139,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
}); });
this.contentContainer.appendChild(this.seasonsElem); this.content.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.contentContainer.appendChild(this.episodesElem); this.content.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 => {
@ -22183,7 +22184,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.contentContainer.appendChild(this.videoElem); this.content.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', () => {
@ -22197,7 +22198,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}, 1); }, 1);
const endElem = document.createElement('div'); const endElem = document.createElement('div');
endElem.className = 'clear'; endElem.className = 'clear';
this.contentContainer.appendChild(endElem); this.content.appendChild(endElem);
this.renderMovieElems(); this.renderMovieElems();
this.calculatePositions(); this.calculatePositions();
this.loadCustomStyles(); this.loadCustomStyles();

5
src/modules/style.ts
Unescape View File

@ -378,7 +378,10 @@ style.textContent = css`
transition: 0.5s; transition: 0.5s;
} }
.contentContainer { .contentContainer {
overflow: hidden; overflow-x: auto;
white-space: nowrap;
z-index: 1;
position: relative;
} }
.movieElem { .movieElem {
margin-bottom: 5px; margin-bottom: 5px;

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

@ -150,6 +150,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
contentContainer: any; contentContainer: any;
contentContainerInner: any;
hassObj: HomeAssistant | undefined; hassObj: HomeAssistant | undefined;
contentBGHeight = 0; contentBGHeight = 0;
@ -595,12 +597,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
count += 1; count += 1;
if (count > this.renderedItems) { if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem); this.contentContainer.appendChild(movieElem);
if (_.isEmpty(this.contentContainer.style.width)) { if (_.isEmpty(this.contentContainerInner.style.width)) {
console.log('1'); this.contentContainerInner.style.width = `${getWidth(movieElem) + 10}px`;
this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`;
} else { } else {
console.log('2'); this.contentContainerInner.style.width = `${parseFloat(this.contentContainerInner.style.width) +
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
getWidth(movieElem) + getWidth(movieElem) +
10}px`; 10}px`;
} }
@ -711,8 +711,6 @@ 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}`;
@ -727,12 +725,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.contentContainer = document.createElement('div'); this.contentContainer = document.createElement('div');
this.contentContainer.className = 'contentContainer'; this.contentContainer.className = 'contentContainer';
// this.contentContainer.style.height = `${CSS_STYLE.height}px`;
this.contentContainerInner = document.createElement('div');
this.contentContainerInner.className = 'contentContainerInner';
this.contentContainer.appendChild(this.contentContainerInner);
this.content.appendChild(this.contentContainer); this.content.appendChild(this.contentContainer);
const contentbg = document.createElement('div'); const contentbg = document.createElement('div');
contentbg.className = 'contentbg'; contentbg.className = 'contentbg';
this.contentContainer.appendChild(contentbg); this.content.appendChild(contentbg);
const contentArt = document.createElement('div'); const contentArt = document.createElement('div');
contentArt.className = 'contentArt'; contentArt.className = 'contentArt';
@ -745,7 +747,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
contentArtBG2.className = 'videobg2'; contentArtBG2.className = 'videobg2';
contentArt.appendChild(contentArtBG2); contentArt.appendChild(contentArtBG2);
this.contentContainer.appendChild(contentArt); this.content.appendChild(contentArt);
this.detailElem = document.createElement('div'); this.detailElem = document.createElement('div');
this.detailElem.className = 'detail'; this.detailElem.className = 'detail';
@ -813,7 +815,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.minimizeAll(); this.minimizeAll();
}); });
this.contentContainer.appendChild(this.detailElem); this.content.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 => {
@ -852,7 +854,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
}); });
this.contentContainer.appendChild(this.seasonsElem); this.content.appendChild(this.seasonsElem);
this.episodesElem = document.createElement('div'); this.episodesElem = document.createElement('div');
this.episodesElem.className = 'episodes'; this.episodesElem.className = 'episodes';
@ -860,7 +862,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
}); });
this.contentContainer.appendChild(this.episodesElem); this.content.appendChild(this.episodesElem);
this.videoElem = document.createElement('div'); this.videoElem = document.createElement('div');
this.videoElem.className = 'video'; this.videoElem.className = 'video';
@ -904,7 +906,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
videoPlayer.className = 'videoPlayer'; videoPlayer.className = 'videoPlayer';
this.videoElem.appendChild(videoPlayer); this.videoElem.appendChild(videoPlayer);
this.contentContainer.appendChild(this.videoElem); this.content.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(() => {
@ -920,7 +922,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const endElem = document.createElement('div'); const endElem = document.createElement('div');
endElem.className = 'clear'; endElem.className = 'clear';
this.contentContainer.appendChild(endElem); this.content.appendChild(endElem);
this.renderMovieElems(); this.renderMovieElems();
this.calculatePositions(); this.calculatePositions();

Write Preview
Loading…
Cancel
Save