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

Update: Make posters span the whole width always

Browse Source
pull/16/head
Juraj Nyíri 3 years ago
parent 64fc5d76df
commit dc0000cc1d
4 changed files with 66 additions and 83 deletions
Show Stats Download Patch File Download Diff File

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

@ -17196,8 +17196,8 @@ var lodash = createCommonjsModule(function (module, exports) {
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
const CSS_STYLE = { const CSS_STYLE = {
width: 138, ratio: 1.471,
height: 203, minimumWidth: 138,
expandedWidth: 220, expandedWidth: 220,
expandedHeight: 324, expandedHeight: 324,
episodeWidth: 300, episodeWidth: 300,
@ -19625,6 +19625,7 @@ style.textContent = css `
.searchContainer { .searchContainer {
position: relative; position: relative;
z-index: 2; z-index: 2;
padding-right: 8px;
} }
.searchContainer input { .searchContainer input {
@ -20001,6 +20002,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.runBefore = ''; this.runBefore = '';
this.playTrailer = true; this.playTrailer = true;
this.showExtras = true; this.showExtras = true;
this.previousPageWidth = 0;
this.runAfter = ''; this.runAfter = '';
this.columnsCount = 0; this.columnsCount = 0;
this.renderedItems = 0; this.renderedItems = 0;
@ -20019,7 +20021,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.loading = false; this.loading = false;
this.maxCount = false; this.maxCount = false;
this.error = ''; this.error = '';
this.previousPositions = [];
this.contentBGHeight = 0; this.contentBGHeight = 0;
this.renderNewElementsIfNeeded = () => { this.renderNewElementsIfNeeded = () => {
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
@ -20075,8 +20076,26 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.renderNewElementsIfNeeded(); this.renderNewElementsIfNeeded();
}); });
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (!this.detailsShown) {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0];
let isFullScreen = false;
if (videoPlayer.children.length > 0) {
isFullScreen = isVideoFullScreen(this);
}
if (this.card && this.movieElems.length > 0 && !isFullScreen) {
if (this.previousPageWidth !== this.card.offsetWidth) {
this.previousPageWidth = this.card.offsetWidth;
this.renderPage();
const contentbg = this.getElementsByClassName('contentbg');
this.contentBGHeight = getHeight(contentbg[0]);
}
}
}
this.renderNewElementsIfNeeded(); this.renderNewElementsIfNeeded();
}); });
if (this.card) {
this.previousPageWidth = this.card.offsetWidth;
}
this.loading = true; this.loading = true;
this.renderPage(); this.renderPage();
try { try {
@ -20166,41 +20185,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.resizeBackground(); this.resizeBackground();
}; };
this.render = () => { this.render = () => {
this.previousPositions = [];
// todo: find a better way to detect resize...
setInterval(() => {
if (!this.detailsShown) {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0];
let isFullScreen = false;
if (videoPlayer.children.length > 0) {
isFullScreen = isVideoFullScreen(this);
}
if (this.movieElems.length > 0 && !isFullScreen) {
let renderNeeded = false;
if (this.previousPositions.length === 0) {
for (let i = 0; i < this.movieElems.length; i += 1) {
this.previousPositions[i] = {};
this.previousPositions[i].top = this.movieElems[i].parentElement.offsetTop;
this.previousPositions[i].left = this.movieElems[i].parentElement.offsetLeft;
}
}
for (let i = 0; i < this.movieElems.length; i += 1) {
if (this.previousPositions[i] &&
this.movieElems[i].dataset.clicked !== 'true' &&
(this.previousPositions[i].top !== this.movieElems[i].parentElement.offsetTop ||
this.previousPositions[i].left !== this.movieElems[i].parentElement.offsetLeft)) {
renderNeeded = true;
this.previousPositions = [];
}
}
if (renderNeeded) {
this.renderPage();
const contentbg = this.getElementsByClassName('contentbg');
this.contentBGHeight = getHeight(contentbg[0]);
}
}
}
}, 250);
this.renderPage(); this.renderPage();
}; };
this.searchInput = () => { this.searchInput = () => {
@ -20280,6 +20264,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.contentBGHeight = getHeight(contentbg); this.contentBGHeight = getHeight(contentbg);
}; };
this.renderPage = () => { this.renderPage = () => {
if (this.card) {
const marginRight = 10; // needs to be equal to .container margin right
const areaSize = this.card.offsetWidth - parseInt(this.card.style.paddingRight, 10) - parseInt(this.card.style.paddingLeft, 10);
const postersInRow = Math.floor(areaSize / CSS_STYLE.minimumWidth);
CSS_STYLE.width = areaSize / postersInRow - marginRight;
CSS_STYLE.height = CSS_STYLE.width * CSS_STYLE.ratio;
}
this.renderedItems = 0; this.renderedItems = 0;
this.columnsCount = 0; this.columnsCount = 0;
const spinner = document.createElement('div'); const spinner = document.createElement('div');
@ -20295,6 +20286,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.card.style.transition = '0.5s'; this.card.style.transition = '0.5s';
this.card.style.overflow = 'hidden'; this.card.style.overflow = 'hidden';
this.card.style.padding = '16px'; this.card.style.padding = '16px';
this.card.style.paddingRight = '6px';
this.card.appendChild(this.searchInput()); this.card.appendChild(this.searchInput());
this.appendChild(this.card); this.appendChild(this.card);
} }

6
src/const.ts
Unescape View File

@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
const CSS_STYLE = { const CSS_STYLE: any = {
width: 138, ratio: 1.471,
height: 203, minimumWidth: 138,
expandedWidth: 220, expandedWidth: 220,
expandedHeight: 324, expandedHeight: 324,
episodeWidth: 300, episodeWidth: 300,

1
src/modules/style.ts
Unescape View File

@ -110,6 +110,7 @@ style.textContent = css`
.searchContainer { .searchContainer {
position: relative; position: relative;
z-index: 2; z-index: 2;
padding-right: 8px;
} }
.searchContainer input { .searchContainer input {

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

@ -32,6 +32,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
showExtras = true; showExtras = true;
previousPageWidth = 0;
runAfter = ''; runAfter = '';
renderNewElementsIfNeededTimeout: any; renderNewElementsIfNeededTimeout: any;
@ -106,8 +108,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
content: any; content: any;
previousPositions: Array<any> = [];
hassObj: HomeAssistant | undefined; hassObj: HomeAssistant | undefined;
contentBGHeight = 0; contentBGHeight = 0;
@ -192,8 +192,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.renderNewElementsIfNeeded(); this.renderNewElementsIfNeeded();
}); });
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (!this.detailsShown) {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
let isFullScreen = false;
if (videoPlayer.children.length > 0) {
isFullScreen = isVideoFullScreen(this);
}
if (this.card && this.movieElems.length > 0 && !isFullScreen) {
if (this.previousPageWidth !== this.card.offsetWidth) {
this.previousPageWidth = this.card.offsetWidth;
this.renderPage();
const contentbg = this.getElementsByClassName('contentbg');
this.contentBGHeight = getHeight(contentbg[0] as HTMLElement);
}
}
}
this.renderNewElementsIfNeeded(); this.renderNewElementsIfNeeded();
}); });
if (this.card) {
this.previousPageWidth = this.card.offsetWidth;
}
this.loading = true; this.loading = true;
this.renderPage(); this.renderPage();
try { try {
@ -282,46 +302,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
render = (): void => { render = (): void => {
this.previousPositions = [];
// todo: find a better way to detect resize...
setInterval(() => {
if (!this.detailsShown) {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
let isFullScreen = false;
if (videoPlayer.children.length > 0) {
isFullScreen = isVideoFullScreen(this);
}
if (this.movieElems.length > 0 && !isFullScreen) {
let renderNeeded = false;
if (this.previousPositions.length === 0) {
for (let i = 0; i < this.movieElems.length; i += 1) {
this.previousPositions[i] = {};
this.previousPositions[i].top = this.movieElems[i].parentElement.offsetTop;
this.previousPositions[i].left = this.movieElems[i].parentElement.offsetLeft;
}
}
for (let i = 0; i < this.movieElems.length; i += 1) {
if (
this.previousPositions[i] &&
this.movieElems[i].dataset.clicked !== 'true' &&
(this.previousPositions[i].top !== this.movieElems[i].parentElement.offsetTop ||
this.previousPositions[i].left !== this.movieElems[i].parentElement.offsetLeft)
) {
renderNeeded = true;
this.previousPositions = [];
}
}
if (renderNeeded) {
this.renderPage();
const contentbg = this.getElementsByClassName('contentbg');
this.contentBGHeight = getHeight(contentbg[0] as HTMLElement);
}
}
}
}, 250);
this.renderPage(); this.renderPage();
}; };
@ -413,6 +393,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
renderPage = (): void => { renderPage = (): void => {
if (this.card) {
const marginRight = 10; // needs to be equal to .container margin right
const areaSize =
this.card.offsetWidth - parseInt(this.card.style.paddingRight, 10) - parseInt(this.card.style.paddingLeft, 10);
const postersInRow = Math.floor(areaSize / CSS_STYLE.minimumWidth);
CSS_STYLE.width = areaSize / postersInRow - marginRight;
CSS_STYLE.height = CSS_STYLE.width * CSS_STYLE.ratio;
}
this.renderedItems = 0; this.renderedItems = 0;
this.columnsCount = 0; this.columnsCount = 0;
const spinner = document.createElement('div'); const spinner = document.createElement('div');
@ -429,6 +418,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.card.style.transition = '0.5s'; this.card.style.transition = '0.5s';
this.card.style.overflow = 'hidden'; this.card.style.overflow = 'hidden';
this.card.style.padding = '16px'; this.card.style.padding = '16px';
this.card.style.paddingRight = '6px';
this.card.appendChild(this.searchInput()); this.card.appendChild(this.searchInput());
this.appendChild(this.card); this.appendChild(this.card);
} }

Write Preview
Loading…
Cancel
Save