From a83f487ff5e69909bdb9148d9aba7fde2fdcf8cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Fri, 1 Oct 2021 14:04:39 +0200 Subject: [PATCH] Add: More font sizes customisation and minimum episode width --- dist/plex-meets-homeassistant.js | 177 +++++++++++++++++++++++++++---- src/editor.ts | 56 +++++++++- src/modules/utils.ts | 19 +++- src/plex-meets-homeassistant.ts | 154 ++++++++++++++++++++++----- 4 files changed, 357 insertions(+), 49 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 467d35e..6ba5e2a 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19249,7 +19249,7 @@ const waitUntilState = async (hass, entityID, state) => { await sleep(1000); } }; -const createEpisodesView = (playController, plex, data) => { +const createEpisodesView = (playController, plex, data, fontSize1, fontSize2) => { const episodeContainer = document.createElement('div'); episodeContainer.className = 'episodeContainer'; episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`; @@ -19283,9 +19283,18 @@ const createEpisodesView = (playController, plex, data) => { const episodeTitleElem = document.createElement('div'); episodeTitleElem.className = 'episodeTitleElem'; episodeTitleElem.innerHTML = escapeHtml(data.title); + const margin1 = fontSize1 / 4; + const margin2 = fontSize2 / 4; + episodeTitleElem.style.fontSize = `${fontSize1}px`; + episodeTitleElem.style.lineHeight = `${fontSize1}px`; + episodeTitleElem.style.marginBottom = `${margin1}px`; episodeContainer.append(episodeTitleElem); const episodeNumber = document.createElement('div'); episodeNumber.className = 'episodeNumber'; + episodeNumber.style.fontSize = `${fontSize2}px`; + episodeNumber.style.lineHeight = `${fontSize2}px`; + episodeNumber.style.marginTop = `${margin2}px`; + episodeNumber.style.marginBottom = `${margin2}px`; if (data.type === 'episode') { episodeNumber.innerHTML = escapeHtml(`Episode ${escapeHtml(data.index)}`); } @@ -19950,10 +19959,13 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { this.maxCount = document.createElement('paper-input'); this.maxRows = document.createElement('paper-input'); this.minWidth = document.createElement('paper-input'); + this.minEpisodeWidth = document.createElement('paper-input'); this.minExpandedWidth = document.createElement('paper-input'); this.minExpandedHeight = document.createElement('paper-input'); this.fontSize1 = document.createElement('paper-input'); this.fontSize2 = document.createElement('paper-input'); + this.fontSize3 = document.createElement('paper-input'); + this.fontSize4 = document.createElement('paper-input'); this.cardTitle = document.createElement('paper-input'); this.libraryName = document.createElement('paper-dropdown-menu'); this.protocol = document.createElement('paper-dropdown-menu'); @@ -20032,6 +20044,12 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { else { this.config.minWidth = this.minWidth.value; } + if (lodash.isEmpty(this.minEpisodeWidth.value)) { + this.config.minEpisodeWidth = ''; + } + else { + this.config.minEpisodeWidth = this.minEpisodeWidth.value; + } if (lodash.isEmpty(this.minExpandedWidth.value)) { this.config.minExpandedWidth = ''; } @@ -20050,6 +20068,18 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { else { this.config.fontSize2 = this.fontSize2.value; } + if (lodash.isEmpty(this.fontSize3.value)) { + this.config.fontSize3 = ''; + } + else { + this.config.fontSize3 = this.fontSize3.value; + } + if (lodash.isEmpty(this.fontSize4.value)) { + this.config.fontSize4 = ''; + } + else { + this.config.fontSize4 = this.fontSize4.value; + } if (lodash.isEmpty(this.minExpandedHeight.value)) { this.config.minExpandedHeight = ''; } @@ -20460,16 +20490,31 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { this.minExpandedHeight.type = 'number'; this.minExpandedHeight.addEventListener('change', this.valueUpdated); this.plexValidSection.appendChild(this.minExpandedHeight); + this.minEpisodeWidth.label = 'Minimum width of the episode card'; + this.minEpisodeWidth.value = this.config.minEpisodeWidth; + this.minEpisodeWidth.type = 'number'; + this.minEpisodeWidth.addEventListener('change', this.valueUpdated); + this.plexValidSection.appendChild(this.minEpisodeWidth); this.fontSize1.label = 'Font size used in titles under cards'; this.fontSize1.value = this.config.fontSize1; this.fontSize1.type = 'number'; this.fontSize1.addEventListener('change', this.valueUpdated); this.plexValidSection.appendChild(this.fontSize1); - this.fontSize2.label = 'Font size used in subtitles under cards'; + this.fontSize2.label = 'Font size used in sub-titles under cards'; this.fontSize2.value = this.config.fontSize2; this.fontSize2.type = 'number'; this.fontSize2.addEventListener('change', this.valueUpdated); this.plexValidSection.appendChild(this.fontSize2); + this.fontSize3.label = 'Font size used in title of the opened content'; + this.fontSize3.value = this.config.fontSize3; + this.fontSize3.type = 'number'; + this.fontSize3.addEventListener('change', this.valueUpdated); + this.plexValidSection.appendChild(this.fontSize3); + this.fontSize4.label = 'Font size used in sub-titles, to-view count and description of the opened content'; + this.fontSize4.value = this.config.fontSize4; + this.fontSize4.type = 'number'; + this.fontSize4.addEventListener('change', this.valueUpdated); + this.plexValidSection.appendChild(this.fontSize4); if (!lodash.isEmpty(this.livetv)) { libraryItems.appendChild(addDropdownItem('Live TV', true)); lodash.forEach(lodash.keys(this.livetv), (livetv) => { @@ -20625,6 +20670,9 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { if (lodash.isNumber(this.config.minWidth)) { this.config.minWidth = `${this.config.minWidth}`; } + if (lodash.isNumber(this.config.minEpisodeWidth)) { + this.config.minEpisodeWidth = `${this.config.minEpisodeWidth}`; + } if (lodash.isNumber(this.config.minExpandedWidth)) { this.config.minExpandedWidth = `${this.config.minExpandedWidth}`; } @@ -20634,6 +20682,12 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { if (lodash.isNumber(this.config.fontSize2)) { this.config.fontSize2 = `${this.config.fontSize2}`; } + if (lodash.isNumber(this.config.fontSize3)) { + this.config.fontSize3 = `${this.config.fontSize3}`; + } + if (lodash.isNumber(this.config.fontSize4)) { + this.config.fontSize4 = `${this.config.fontSize4}`; + } if (lodash.isNumber(this.config.minExpandedHeight)) { this.config.minExpandedHeight = `${this.config.minExpandedHeight}`; } @@ -21408,10 +21462,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.renderedItems = 0; this.maxRenderCount = false; this.minWidth = CSS_STYLE.minimumWidth; + this.minEpisodeWidth = CSS_STYLE.minimumEpisodeWidth; this.minExpandedWidth = CSS_STYLE.expandedWidth; this.minExpandedHeight = CSS_STYLE.expandedHeight; this.fontSize1 = 14; this.fontSize2 = 14; + this.fontSize3 = 28; + this.fontSize4 = 16; this.seasonContainerClickEnabled = true; this.looseSearch = false; this.movieElems = []; @@ -21867,7 +21924,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (areaSize > 0) { CSS_STYLE.width = areaSize / postersInRow - marginRight; CSS_STYLE.height = CSS_STYLE.width * CSS_STYLE.ratio; - const episodesInRow = Math.floor(areaSize / CSS_STYLE.minimumEpisodeWidth); + const episodesInRow = Math.floor(areaSize / this.minEpisodeWidth); CSS_STYLE.episodeWidth = Math.floor(areaSize / episodesInRow - marginRight); CSS_STYLE.episodeHeight = Math.round(CSS_STYLE.episodeWidth * CSS_STYLE.episodeRatio); } @@ -21950,7 +22007,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {

`; if (this.playController) { - this.detailElem.appendChild(this.playController.getPlayActionButton()); + const playActionButton = this.playController.getPlayActionButton(); + playActionButton.style.fontSize = `${this.fontSize4}px`; + playActionButton.style.lineHeight = `${this.fontSize4}px`; + playActionButton.style.marginTop = `${this.fontSize4 / 4}px`; + playActionButton.style.marginBottom = `${this.fontSize4 / 4}px`; + playActionButton.style.marginRight = `${this.fontSize4 / 4}px`; + playActionButton.style.padding = `${this.fontSize4 / 2}px ${this.fontSize4}px`; + this.detailElem.appendChild(playActionButton); } this.detailElem.innerHTML += ` @@ -21959,7 +22023,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
- - - -
+ Directed by @@ -21967,7 +22032,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
+ Written by @@ -21975,7 +22041,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
+ Studio @@ -21983,7 +22050,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
+ Genre @@ -22304,6 +22372,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { mainData.title = `${mainData.title} - ${data.title}`; } const directorElem = this.getElementsByClassName('metaInfoDetailsData')[0]; + directorElem.style.fontSize = `${this.fontSize4}px`; + directorElem.style.lineHeight = `${this.fontSize4}px`; + directorElem.style.marginTop = `${this.fontSize4 / 4}px`; + directorElem.style.marginBottom = `${this.fontSize4 / 4}px`; + directorElem.style.display = 'block'; if (directorElem.parentElement) { if (mainData.Director && mainData.Director.length > 0) { directorElem.innerHTML = escapeHtml(mainData.Director[0].tag); @@ -22314,6 +22387,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } const writerElem = this.getElementsByClassName('metaInfoDetailsData')[1]; + writerElem.style.fontSize = `${this.fontSize4}px`; + writerElem.style.lineHeight = `${this.fontSize4}px`; + writerElem.style.marginTop = `${this.fontSize4 / 4}px`; + writerElem.style.marginBottom = `${this.fontSize4 / 4}px`; + writerElem.style.display = 'block'; if (writerElem.parentElement) { if (mainData.Writer && mainData.Writer.length > 0) { writerElem.innerHTML = escapeHtml(mainData.Writer[0].tag); @@ -22324,6 +22402,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } const studioElem = this.getElementsByClassName('metaInfoDetailsData')[2]; + studioElem.style.fontSize = `${this.fontSize4}px`; + studioElem.style.lineHeight = `${this.fontSize4}px`; + studioElem.style.marginTop = `${this.fontSize4 / 4}px`; + studioElem.style.marginBottom = `${this.fontSize4 / 4}px`; + studioElem.style.display = 'block'; if (studioElem.parentElement) { if (mainData.studio) { studioElem.innerHTML = escapeHtml(mainData.studio); @@ -22334,6 +22417,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } const genreElem = this.getElementsByClassName('metaInfoDetailsData')[3]; + genreElem.style.fontSize = `${this.fontSize4}px`; + genreElem.style.lineHeight = `${this.fontSize4}px`; + genreElem.style.marginTop = `${this.fontSize4 / 4}px`; + genreElem.style.marginBottom = `${this.fontSize4 / 4}px`; + genreElem.style.display = 'block'; if (genreElem.parentElement) { if (mainData.Genre && mainData.Genre.length > 0) { let genre = ''; @@ -22347,38 +22435,59 @@ class PlexMeetsHomeAssistant extends HTMLElement { genreElem.parentElement.style.display = 'none'; } } + const detailsTitle = this.getElementsByClassName('detailsTitle')[0]; if (!lodash.isNil(mainData.channelCallSign)) { - this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(mainData.channelCallSign); + detailsTitle.innerHTML = escapeHtml(mainData.channelCallSign); } else { - this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(mainData.title); + detailsTitle.innerHTML = escapeHtml(mainData.title); } + detailsTitle.style.lineHeight = `${this.fontSize3}px`; + detailsTitle.style.fontSize = `${this.fontSize3}px`; + detailsTitle.style.marginBottom = `${this.fontSize3 / 4}px`; + const detailsYear = this.getElementsByClassName('detailsYear')[0]; + detailsYear.style.display = 'block'; + detailsYear.style.fontSize = `${this.fontSize4}px`; + detailsYear.style.lineHeight = `${this.fontSize4}px`; + detailsYear.style.marginTop = `0px`; + detailsYear.style.marginBottom = `${this.fontSize4 / 4}px`; if (!lodash.isNil(mainData.year)) { - this.getElementsByClassName('detailsYear')[0].innerHTML = escapeHtml(mainData.year); + detailsYear.innerHTML = escapeHtml(mainData.year); } else if (!lodash.isNil(mainData.epg) && !lodash.isNil(mainData.epg.title)) { - this.getElementsByClassName('detailsYear')[0].innerHTML = escapeHtml(mainData.epg.title); + detailsYear.innerHTML = escapeHtml(mainData.epg.title); } else { - this.getElementsByClassName('detailsYear')[0].innerHTML = ''; + detailsYear.style.display = 'none'; + detailsYear.innerHTML = ''; } this.getElementsByClassName('metaInfo')[0].innerHTML = `${(mainData.duration !== undefined - ? `${Math.round(parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000)} min` + ? `${Math.round(parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000)} min` : '') + (mainData.contentRating !== undefined - ? `${escapeHtml(mainData.contentRating)}` + ? `${escapeHtml(mainData.contentRating)}` : '') + (mainData.rating !== undefined - ? `${mainData.rating < 5 ? '🗑' : '⭐'} ${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}` + ? `${mainData.rating < 5 ? '🗑' : '⭐'} ${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}` : '')}
`; + const detailDesc = this.getElementsByClassName('detailDesc')[0]; + detailDesc.style.fontSize = `${this.fontSize4}px`; + detailDesc.style.lineHeight = `${this.fontSize4}px`; + detailDesc.style.marginTop = `${this.fontSize4 / 4}px`; + detailDesc.style.marginBottom = `${this.fontSize4 / 4}px`; + detailDesc.style.display = 'block'; if (!lodash.isNil(mainData.summary)) { - this.getElementsByClassName('detailDesc')[0].innerHTML = escapeHtml(mainData.summary); + detailDesc.innerHTML = escapeHtml(mainData.summary); } else if (!lodash.isNil(mainData.epg) && !lodash.isNil(mainData.epg.summary)) { - this.getElementsByClassName('detailDesc')[0].innerHTML = escapeHtml(mainData.epg.summary); + detailDesc.innerHTML = escapeHtml(mainData.epg.summary); } else { - this.getElementsByClassName('detailDesc')[0].innerHTML = ''; + detailDesc.innerHTML = ''; + detailDesc.style.display = 'none'; } this.detailElem.style.color = 'rgba(255,255,255,1)'; this.detailElem.style.zIndex = '4'; @@ -22469,6 +22578,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.videoElem && !playingFired) { const contentbg = this.getElementsByClassName('contentbg')[0]; const fullscreenTrailer = this.getElementsByClassName('detailPlayTrailerAction')[0]; + fullscreenTrailer.style.fontSize = `${this.fontSize4}px`; + fullscreenTrailer.style.lineHeight = `${this.fontSize4}px`; + fullscreenTrailer.style.marginTop = `${this.fontSize4 / 4}px`; + fullscreenTrailer.style.marginBottom = `${this.fontSize4 / 4}px`; + fullscreenTrailer.style.marginRight = `${this.fontSize4 / 4}px`; + fullscreenTrailer.style.padding = `${this.fontSize4 / 2}px ${this.fontSize4}px`; fullscreenTrailer.style.visibility = 'visible'; contentbg.classList.add('no-transparency'); playingFired = true; @@ -22521,6 +22636,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { const toViewElem = document.createElement('div'); toViewElem.className = 'toViewSeason'; toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString(); + toViewElem.style.fontSize = `${this.fontSize4}px`; + toViewElem.style.lineHeight = `${this.fontSize4}px`; + toViewElem.style.padding = `${this.fontSize4 / 2}px`; interactiveArea.appendChild(toViewElem); } if (this.playController) { @@ -22603,7 +22721,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.episodesElem.style.top = `${top + 2000}px`; lodash.forEach(episodesData, episodeData => { if (this.episodesElem && this.playController && this.plex) { - this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData)); + this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData, this.fontSize1, this.fontSize2)); } }); clearInterval(this.episodesLoadTimeout); @@ -22687,7 +22805,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { const episodesData = await this.plex.getLibraryData(data.key.split('/')[3]); lodash.forEach(episodesData, episodeData => { if (this.episodesElem && this.playController && this.plex) { - this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData)); + this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData, this.fontSize1, this.fontSize2)); } }); } @@ -22695,7 +22813,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { const extras = dataDetails.Extras.Metadata; lodash.forEach(extras, extrasData => { if (this.episodesElem && this.playController && this.plex) { - this.episodesElem.append(createEpisodesView(this.playController, this.plex, extrasData)); + this.episodesElem.append(createEpisodesView(this.playController, this.plex, extrasData, this.fontSize1, this.fontSize2)); } }); } @@ -22853,6 +22971,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { const toViewElem = document.createElement('div'); toViewElem.className = 'toViewSeason'; toViewElem.innerHTML = (data.leafCount - data.viewedLeafCount).toString(); + toViewElem.style.fontSize = `${this.fontSize4}px`; + toViewElem.style.lineHeight = `${this.fontSize4}px`; + toViewElem.style.padding = `${this.fontSize4 / 2}px`; interactiveArea.appendChild(toViewElem); } if (data.viewOffset > 0 && data.duration > 0) { @@ -22987,6 +23108,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (config.minWidth && config.minWidth !== '' && config.minWidth !== '0' && config.minWidth !== 0) { this.minWidth = parseInt(config.minWidth, 10); } + if (config.minEpisodeWidth && + config.minEpisodeWidth !== '' && + config.minEpisodeWidth !== '0' && + config.minEpisodeWidth !== 0) { + this.minEpisodeWidth = parseInt(config.minEpisodeWidth, 10); + } if (config.minExpandedWidth && config.minExpandedWidth !== '' && config.minExpandedWidth !== '0' && @@ -22999,6 +23126,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (config.fontSize2 && config.fontSize2 !== '' && config.fontSize2 !== '0' && config.fontSize2 !== 0) { this.fontSize2 = parseInt(config.fontSize2, 10); } + if (config.fontSize3 && config.fontSize3 !== '' && config.fontSize3 !== '0' && config.fontSize3 !== 0) { + this.fontSize3 = parseInt(config.fontSize3, 10); + } + if (config.fontSize4 && config.fontSize4 !== '' && config.fontSize4 !== '0' && config.fontSize4 !== 0) { + this.fontSize4 = parseInt(config.fontSize4, 10); + } if (config.minExpandedHeight && config.minExpandedHeight !== '' && config.minExpandedHeight !== '0' && diff --git a/src/editor.ts b/src/editor.ts index 302e3de..692c3b8 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -28,6 +28,8 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { minWidth: any = document.createElement('paper-input'); + minEpisodeWidth: any = document.createElement('paper-input'); + minExpandedWidth: any = document.createElement('paper-input'); minExpandedHeight: any = document.createElement('paper-input'); @@ -36,6 +38,10 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { fontSize2: any = document.createElement('paper-input'); + fontSize3: any = document.createElement('paper-input'); + + fontSize4: any = document.createElement('paper-input'); + cardTitle: any = document.createElement('paper-input'); libraryName: any = document.createElement('paper-dropdown-menu'); @@ -145,6 +151,12 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { this.config.minWidth = this.minWidth.value; } + if (_.isEmpty(this.minEpisodeWidth.value)) { + this.config.minEpisodeWidth = ''; + } else { + this.config.minEpisodeWidth = this.minEpisodeWidth.value; + } + if (_.isEmpty(this.minExpandedWidth.value)) { this.config.minExpandedWidth = ''; } else { @@ -163,6 +175,18 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { this.config.fontSize2 = this.fontSize2.value; } + if (_.isEmpty(this.fontSize3.value)) { + this.config.fontSize3 = ''; + } else { + this.config.fontSize3 = this.fontSize3.value; + } + + if (_.isEmpty(this.fontSize4.value)) { + this.config.fontSize4 = ''; + } else { + this.config.fontSize4 = this.fontSize4.value; + } + if (_.isEmpty(this.minExpandedHeight.value)) { this.config.minExpandedHeight = ''; } else { @@ -604,18 +628,36 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { this.minExpandedHeight.addEventListener('change', this.valueUpdated); this.plexValidSection.appendChild(this.minExpandedHeight); + this.minEpisodeWidth.label = 'Minimum width of the episode card'; + this.minEpisodeWidth.value = this.config.minEpisodeWidth; + this.minEpisodeWidth.type = 'number'; + this.minEpisodeWidth.addEventListener('change', this.valueUpdated); + this.plexValidSection.appendChild(this.minEpisodeWidth); + this.fontSize1.label = 'Font size used in titles under cards'; this.fontSize1.value = this.config.fontSize1; this.fontSize1.type = 'number'; this.fontSize1.addEventListener('change', this.valueUpdated); this.plexValidSection.appendChild(this.fontSize1); - this.fontSize2.label = 'Font size used in subtitles under cards'; + this.fontSize2.label = 'Font size used in sub-titles under cards'; this.fontSize2.value = this.config.fontSize2; this.fontSize2.type = 'number'; this.fontSize2.addEventListener('change', this.valueUpdated); this.plexValidSection.appendChild(this.fontSize2); + this.fontSize3.label = 'Font size used in title of the opened content'; + this.fontSize3.value = this.config.fontSize3; + this.fontSize3.type = 'number'; + this.fontSize3.addEventListener('change', this.valueUpdated); + this.plexValidSection.appendChild(this.fontSize3); + + this.fontSize4.label = 'Font size used in sub-titles, to-view count and description of the opened content'; + this.fontSize4.value = this.config.fontSize4; + this.fontSize4.type = 'number'; + this.fontSize4.addEventListener('change', this.valueUpdated); + this.plexValidSection.appendChild(this.fontSize4); + if (!_.isEmpty(this.livetv)) { libraryItems.appendChild(addDropdownItem('Live TV', true)); _.forEach(_.keys(this.livetv), (livetv: string) => { @@ -778,6 +820,10 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { this.config.minWidth = `${this.config.minWidth}`; } + if (_.isNumber(this.config.minEpisodeWidth)) { + this.config.minEpisodeWidth = `${this.config.minEpisodeWidth}`; + } + if (_.isNumber(this.config.minExpandedWidth)) { this.config.minExpandedWidth = `${this.config.minExpandedWidth}`; } @@ -790,6 +836,14 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { this.config.fontSize2 = `${this.config.fontSize2}`; } + if (_.isNumber(this.config.fontSize3)) { + this.config.fontSize3 = `${this.config.fontSize3}`; + } + + if (_.isNumber(this.config.fontSize4)) { + this.config.fontSize4 = `${this.config.fontSize4}`; + } + if (_.isNumber(this.config.minExpandedHeight)) { this.config.minExpandedHeight = `${this.config.minExpandedHeight}`; } diff --git a/src/modules/utils.ts b/src/modules/utils.ts index e381e23..fe3582a 100644 --- a/src/modules/utils.ts +++ b/src/modules/utils.ts @@ -178,7 +178,13 @@ const waitUntilState = async (hass: HomeAssistant, entityID: string, state: stri } }; -const createEpisodesView = (playController: any, plex: Plex, data: Record): HTMLElement => { +const createEpisodesView = ( + playController: any, + plex: Plex, + data: Record, + fontSize1: number, + fontSize2: number +): HTMLElement => { const episodeContainer = document.createElement('div'); episodeContainer.className = 'episodeContainer'; episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`; @@ -221,10 +227,21 @@ const createEpisodesView = (playController: any, plex: Plex, data: Record 0) { CSS_STYLE.width = areaSize / postersInRow - marginRight; CSS_STYLE.height = CSS_STYLE.width * CSS_STYLE.ratio; - const episodesInRow = Math.floor(areaSize / CSS_STYLE.minimumEpisodeWidth); + const episodesInRow = Math.floor(areaSize / this.minEpisodeWidth); CSS_STYLE.episodeWidth = Math.floor(areaSize / episodesInRow - marginRight); CSS_STYLE.episodeHeight = Math.round(CSS_STYLE.episodeWidth * CSS_STYLE.episodeRatio); @@ -727,7 +733,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { `; if (this.playController) { - this.detailElem.appendChild(this.playController.getPlayActionButton()); + const playActionButton = this.playController.getPlayActionButton(); + playActionButton.style.fontSize = `${this.fontSize4}px`; + playActionButton.style.lineHeight = `${this.fontSize4}px`; + playActionButton.style.marginTop = `${this.fontSize4 / 4}px`; + playActionButton.style.marginBottom = `${this.fontSize4 / 4}px`; + playActionButton.style.marginRight = `${this.fontSize4 / 4}px`; + playActionButton.style.padding = `${this.fontSize4 / 2}px ${this.fontSize4}px`; + this.detailElem.appendChild(playActionButton); } this.detailElem.innerHTML += ` @@ -737,7 +750,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
- - - -
+ Directed by @@ -745,7 +759,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
+ Written by @@ -753,7 +768,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
+ Studio @@ -761,7 +777,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
+ Genre @@ -1111,6 +1128,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { mainData.title = `${mainData.title} - ${data.title}`; } const directorElem = this.getElementsByClassName('metaInfoDetailsData')[0] as HTMLElement; + directorElem.style.fontSize = `${this.fontSize4}px`; + directorElem.style.lineHeight = `${this.fontSize4}px`; + directorElem.style.marginTop = `${this.fontSize4 / 4}px`; + directorElem.style.marginBottom = `${this.fontSize4 / 4}px`; + directorElem.style.display = 'block'; if (directorElem.parentElement) { if (mainData.Director && mainData.Director.length > 0) { directorElem.innerHTML = escapeHtml(mainData.Director[0].tag); @@ -1121,6 +1143,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { } const writerElem = this.getElementsByClassName('metaInfoDetailsData')[1] as HTMLElement; + writerElem.style.fontSize = `${this.fontSize4}px`; + writerElem.style.lineHeight = `${this.fontSize4}px`; + writerElem.style.marginTop = `${this.fontSize4 / 4}px`; + writerElem.style.marginBottom = `${this.fontSize4 / 4}px`; + writerElem.style.display = 'block'; if (writerElem.parentElement) { if (mainData.Writer && mainData.Writer.length > 0) { writerElem.innerHTML = escapeHtml(mainData.Writer[0].tag); @@ -1130,6 +1157,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } const studioElem = this.getElementsByClassName('metaInfoDetailsData')[2] as HTMLElement; + studioElem.style.fontSize = `${this.fontSize4}px`; + studioElem.style.lineHeight = `${this.fontSize4}px`; + studioElem.style.marginTop = `${this.fontSize4 / 4}px`; + studioElem.style.marginBottom = `${this.fontSize4 / 4}px`; + studioElem.style.display = 'block'; if (studioElem.parentElement) { if (mainData.studio) { studioElem.innerHTML = escapeHtml(mainData.studio); @@ -1139,6 +1171,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } const genreElem = this.getElementsByClassName('metaInfoDetailsData')[3] as HTMLElement; + genreElem.style.fontSize = `${this.fontSize4}px`; + genreElem.style.lineHeight = `${this.fontSize4}px`; + genreElem.style.marginTop = `${this.fontSize4 / 4}px`; + genreElem.style.marginBottom = `${this.fontSize4 / 4}px`; + genreElem.style.display = 'block'; if (genreElem.parentElement) { if (mainData.Genre && mainData.Genre.length > 0) { let genre = ''; @@ -1151,42 +1188,69 @@ class PlexMeetsHomeAssistant extends HTMLElement { genreElem.parentElement.style.display = 'none'; } } + const detailsTitle = this.getElementsByClassName('detailsTitle')[0] as HTMLElement; if (!_.isNil(mainData.channelCallSign)) { - (this.getElementsByClassName('detailsTitle')[0] as HTMLElement).innerHTML = escapeHtml( - mainData.channelCallSign - ); + detailsTitle.innerHTML = escapeHtml(mainData.channelCallSign); } else { - (this.getElementsByClassName('detailsTitle')[0] as HTMLElement).innerHTML = escapeHtml(mainData.title); + detailsTitle.innerHTML = escapeHtml(mainData.title); } - + detailsTitle.style.lineHeight = `${this.fontSize3}px`; + detailsTitle.style.fontSize = `${this.fontSize3}px`; + detailsTitle.style.marginBottom = `${this.fontSize3 / 4}px`; + + const detailsYear = this.getElementsByClassName('detailsYear')[0] as HTMLElement; + detailsYear.style.display = 'block'; + detailsYear.style.fontSize = `${this.fontSize4}px`; + detailsYear.style.lineHeight = `${this.fontSize4}px`; + detailsYear.style.marginTop = `0px`; + detailsYear.style.marginBottom = `${this.fontSize4 / 4}px`; if (!_.isNil(mainData.year)) { - (this.getElementsByClassName('detailsYear')[0] as HTMLElement).innerHTML = escapeHtml(mainData.year); + detailsYear.innerHTML = escapeHtml(mainData.year); } else if (!_.isNil(mainData.epg) && !_.isNil(mainData.epg.title)) { - (this.getElementsByClassName('detailsYear')[0] as HTMLElement).innerHTML = escapeHtml(mainData.epg.title); + detailsYear.innerHTML = escapeHtml(mainData.epg.title); } else { - (this.getElementsByClassName('detailsYear')[0] as HTMLElement).innerHTML = ''; + detailsYear.style.display = 'none'; + detailsYear.innerHTML = ''; } (this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined - ? `${Math.round( + ? `${Math.round( parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000 )} min` : '') + (mainData.contentRating !== undefined - ? `${escapeHtml(mainData.contentRating)}` + ? `${escapeHtml( + mainData.contentRating + )}` : '') + (mainData.rating !== undefined - ? `${mainData.rating < 5 ? '🗑' : '⭐'} ${Math.round( - parseFloat(escapeHtml(mainData.rating)) * 10 - ) / 10}` + ? `${ + mainData.rating < 5 ? '🗑' : '⭐' + } ${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}` : '')}
`; + const detailDesc = this.getElementsByClassName('detailDesc')[0] as HTMLElement; + detailDesc.style.fontSize = `${this.fontSize4}px`; + detailDesc.style.lineHeight = `${this.fontSize4}px`; + detailDesc.style.marginTop = `${this.fontSize4 / 4}px`; + detailDesc.style.marginBottom = `${this.fontSize4 / 4}px`; + detailDesc.style.display = 'block'; if (!_.isNil(mainData.summary)) { - (this.getElementsByClassName('detailDesc')[0] as HTMLElement).innerHTML = escapeHtml(mainData.summary); + detailDesc.innerHTML = escapeHtml(mainData.summary); } else if (!_.isNil(mainData.epg) && !_.isNil(mainData.epg.summary)) { - (this.getElementsByClassName('detailDesc')[0] as HTMLElement).innerHTML = escapeHtml(mainData.epg.summary); + detailDesc.innerHTML = escapeHtml(mainData.epg.summary); } else { - (this.getElementsByClassName('detailDesc')[0] as HTMLElement).innerHTML = ''; + detailDesc.innerHTML = ''; + detailDesc.style.display = 'none'; } this.detailElem.style.color = 'rgba(255,255,255,1)'; @@ -1283,6 +1347,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.videoElem && !playingFired) { const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement; const fullscreenTrailer = this.getElementsByClassName('detailPlayTrailerAction')[0] as HTMLElement; + fullscreenTrailer.style.fontSize = `${this.fontSize4}px`; + fullscreenTrailer.style.lineHeight = `${this.fontSize4}px`; + fullscreenTrailer.style.marginTop = `${this.fontSize4 / 4}px`; + fullscreenTrailer.style.marginBottom = `${this.fontSize4 / 4}px`; + fullscreenTrailer.style.marginRight = `${this.fontSize4 / 4}px`; + fullscreenTrailer.style.padding = `${this.fontSize4 / 2}px ${this.fontSize4}px`; fullscreenTrailer.style.visibility = 'visible'; contentbg.classList.add('no-transparency'); playingFired = true; @@ -1343,6 +1413,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { const toViewElem = document.createElement('div'); toViewElem.className = 'toViewSeason'; toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString(); + + toViewElem.style.fontSize = `${this.fontSize4}px`; + toViewElem.style.lineHeight = `${this.fontSize4}px`; + toViewElem.style.padding = `${this.fontSize4 / 2}px`; + interactiveArea.appendChild(toViewElem); } @@ -1437,7 +1512,15 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.episodesElem.style.top = `${top + 2000}px`; _.forEach(episodesData, episodeData => { if (this.episodesElem && this.playController && this.plex) { - this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData)); + this.episodesElem.append( + createEpisodesView( + this.playController, + this.plex, + episodeData, + this.fontSize1, + this.fontSize2 + ) + ); } }); clearInterval(this.episodesLoadTimeout); @@ -1526,14 +1609,18 @@ class PlexMeetsHomeAssistant extends HTMLElement { const episodesData = await this.plex.getLibraryData(data.key.split('/')[3]); _.forEach(episodesData, episodeData => { if (this.episodesElem && this.playController && this.plex) { - this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData)); + this.episodesElem.append( + createEpisodesView(this.playController, this.plex, episodeData, this.fontSize1, this.fontSize2) + ); } }); } else if (this.showExtras && !_.isNil(dataDetails.Extras)) { const extras = dataDetails.Extras.Metadata; _.forEach(extras, extrasData => { if (this.episodesElem && this.playController && this.plex) { - this.episodesElem.append(createEpisodesView(this.playController, this.plex, extrasData)); + this.episodesElem.append( + createEpisodesView(this.playController, this.plex, extrasData, this.fontSize1, this.fontSize2) + ); } }); } @@ -1709,6 +1796,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { const toViewElem = document.createElement('div'); toViewElem.className = 'toViewSeason'; toViewElem.innerHTML = (data.leafCount - data.viewedLeafCount).toString(); + toViewElem.style.fontSize = `${this.fontSize4}px`; + toViewElem.style.lineHeight = `${this.fontSize4}px`; + toViewElem.style.padding = `${this.fontSize4 / 2}px`; interactiveArea.appendChild(toViewElem); } @@ -1853,6 +1943,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (config.minWidth && config.minWidth !== '' && config.minWidth !== '0' && config.minWidth !== 0) { this.minWidth = parseInt(config.minWidth, 10); } + if ( + config.minEpisodeWidth && + config.minEpisodeWidth !== '' && + config.minEpisodeWidth !== '0' && + config.minEpisodeWidth !== 0 + ) { + this.minEpisodeWidth = parseInt(config.minEpisodeWidth, 10); + } if ( config.minExpandedWidth && @@ -1869,6 +1967,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (config.fontSize2 && config.fontSize2 !== '' && config.fontSize2 !== '0' && config.fontSize2 !== 0) { this.fontSize2 = parseInt(config.fontSize2, 10); } + if (config.fontSize3 && config.fontSize3 !== '' && config.fontSize3 !== '0' && config.fontSize3 !== 0) { + this.fontSize3 = parseInt(config.fontSize3, 10); + } + if (config.fontSize4 && config.fontSize4 !== '' && config.fontSize4 !== '0' && config.fontSize4 !== 0) { + this.fontSize4 = parseInt(config.fontSize4, 10); + } if ( config.minExpandedHeight &&