From f49fce455fd67834dd11a502facfa1abde076e22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Sat, 2 Oct 2021 15:11:04 +0200 Subject: [PATCH] Add #43: Posters of artists, look&feel of opened artist, albums --- dist/plex-meets-homeassistant.js | 101 ++++++++++++++++++++++--------- src/plex-meets-homeassistant.ts | 98 +++++++++++++++++++++--------- 2 files changed, 139 insertions(+), 60 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 1c9ae31..919bab2 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -22322,8 +22322,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { const moveElem = (elem) => { const seasonElemLocal = elem; seasonElemLocal.style.marginTop = '0'; - seasonElemLocal.style.width = `${CSS_STYLE.width}px`; - seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`; + if (lodash.isEqual(seasonElem.dataset.type, 'album')) { + seasonElemLocal.style.width = `${CSS_STYLE.width}px`; + seasonElemLocal.style.height = `${CSS_STYLE.width}px`; + } + else { + seasonElemLocal.style.width = `${CSS_STYLE.width}px`; + seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`; + } seasonElemLocal.style.zIndex = '3'; seasonElemLocal.style.marginLeft = `0px`; seasonElemLocal.dataset.clicked = 'false'; @@ -22626,17 +22632,22 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.detailElem.style.color = 'rgba(255,255,255,1)'; this.detailElem.style.zIndex = '4'; this.detailElem.style.width = `calc(100% - ${this.minExpandedWidth + 30 + 20}px)`; - this.detailElem.style.maxHeight = `${this.minExpandedHeight + 20}px`; + if (this.activeMovieElem) { + this.detailElem.style.maxHeight = `${getHeight(this.activeMovieElem) + 40}px`; + } + else { + this.detailElem.style.maxHeight = `${this.minExpandedHeight + 20}px`; + } } }, 200); } if (this.plex) { - let seasonsData = {}; + let childrenData = {}; if (lodash.isEqual(data.type, 'episode')) { - seasonsData = await this.plex.getLibraryData(data.grandparentKey.split('/')[3]); + childrenData = await this.plex.getLibraryData(data.grandparentKey.split('/')[3]); } - else if (data.childCount > 0) { - seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]); + else if (data.childCount > 0 || lodash.isEqual(data.type, 'artist')) { + childrenData = await this.plex.getLibraryData(data.key.split('/')[3]); } let dataDetails = {}; if (!lodash.isNil(data.key)) { @@ -22740,7 +22751,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } } - if (!lodash.isEmpty(seasonsData)) { + if (!lodash.isEmpty(childrenData)) { this.seasonElemFreshlyLoaded = true; if (this.seasonsElem) { this.seasonsElem.style.display = 'block'; @@ -22748,42 +22759,48 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.seasonsElem.style.transition = `0s`; this.seasonsElem.style.top = `${top + 2000}px`; } - lodash.forEach(seasonsData, seasonData => { + lodash.forEach(childrenData, childData => { + console.log(childData); if (this.seasonsElem && this.plex) { this.seasonsElemHidden = false; const seasonContainer = document.createElement('div'); seasonContainer.className = 'seasonContainer'; seasonContainer.style.width = `${CSS_STYLE.width}px`; - const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight}&minSize=1&upscale=1&url=${seasonData.thumb}&X-Plex-Token=${this.config.token}`; + const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight}&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`; const seasonElem = document.createElement('div'); seasonElem.className = 'seasonElem'; seasonElem.style.width = `${CSS_STYLE.width}px`; - seasonElem.style.height = `${CSS_STYLE.height - 3}px`; + if (lodash.isEqual(childData.type, 'album')) { + seasonElem.style.height = `${CSS_STYLE.width}px`; + } + else { + seasonElem.style.height = `${CSS_STYLE.height - 3}px`; + } seasonElem.style.backgroundImage = `url('${thumbURL}')`; seasonElem.dataset.clicked = 'false'; - if (this.playController && !this.playController.isPlaySupported(seasonData)) { + if (this.playController && !this.playController.isPlaySupported(childData)) { seasonElem.style.cursor = 'pointer'; } const interactiveArea = document.createElement('div'); interactiveArea.className = 'interactiveArea'; - if (seasonData.leafCount - seasonData.viewedLeafCount > 0) { + if (childData.leafCount - childData.viewedLeafCount > 0) { const toViewElem = document.createElement('div'); toViewElem.className = 'toViewSeason'; - toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString(); + toViewElem.innerHTML = (childData.leafCount - childData.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) { - const playButton = this.playController.getPlayButton(seasonData.type); - if (this.playController.isPlaySupported(seasonData)) { + const playButton = this.playController.getPlayButton(childData.type); + if (this.playController.isPlaySupported(childData)) { playButton.classList.remove('disabled'); } playButton.addEventListener('click', event => { event.stopPropagation(); if (this.plex && this.playController) { - this.playController.play(seasonData, true); + this.playController.play(childData, true); } }); interactiveArea.append(playButton); @@ -22792,13 +22809,18 @@ class PlexMeetsHomeAssistant extends HTMLElement { seasonContainer.append(seasonElem); const seasonTitleElem = document.createElement('div'); seasonTitleElem.className = 'seasonTitleElem'; - seasonTitleElem.innerHTML = escapeHtml(seasonData.title); + seasonTitleElem.innerHTML = escapeHtml(childData.title); seasonTitleElem.style.fontSize = `${this.fontSize1}px`; seasonTitleElem.style.lineHeight = `${this.fontSize1}px`; seasonContainer.append(seasonTitleElem); const seasonEpisodesCount = document.createElement('div'); seasonEpisodesCount.className = 'seasonEpisodesCount'; - seasonEpisodesCount.innerHTML = `${escapeHtml(seasonData.leafCount)} episodes`; + if (childData.leafCount > 0) { + seasonEpisodesCount.innerHTML = `${escapeHtml(childData.leafCount)} episodes`; + } + else if (!lodash.isNil(childData.year)) { + seasonEpisodesCount.innerHTML = `${escapeHtml(childData.year)} `; + } seasonEpisodesCount.style.fontSize = `${this.fontSize2}px`; seasonEpisodesCount.style.lineHeight = `${this.fontSize2}px`; seasonContainer.append(seasonEpisodesCount); @@ -22812,12 +22834,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.activeMovieElem) { if (seasonElem.dataset.clicked === 'false') { if (this.playController) { - this.playController.setPlayActionButtonType(seasonData.type); + this.playController.setPlayActionButtonType(childData.type); this.playController.setPlayButtonClickFunction((thisEvent) => { thisEvent.preventDefault(); thisEvent.stopPropagation(); if (this.playController) { - this.playController.play(seasonData, true); + this.playController.play(childData, true); } }); } @@ -22832,21 +22854,32 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }, 500); this.scrollDownInactiveSeasons(); - seasonContainer.style.top = `${-this.minExpandedHeight}px`; + if (this.activeMovieElem) { + seasonContainer.style.top = `${-getHeight(this.activeMovieElem)}px`; + } + else { + seasonContainer.style.top = `${-this.minExpandedHeight}px`; + } + seasonElem.dataset.type = childData.type; seasonElem.style.width = `${this.minExpandedWidth}px`; - seasonElem.style.height = `${this.minExpandedHeight - 6}px`; + if (lodash.isEqual(childData.type, 'album')) { + seasonElem.style.height = `${this.minExpandedWidth}px`; + } + else { + seasonElem.style.height = `${this.minExpandedHeight - 6}px`; + } seasonElem.style.zIndex = '3'; seasonElem.style.marginLeft = `-${getOffset(seasonElem).left - getOffset(this.activeMovieElem).left}px`; seasonTitleElem.style.color = 'rgba(255,255,255,0)'; seasonEpisodesCount.style.color = 'rgba(255,255,255,0)'; if (this.detailElem) { - this.detailElem.children[1].innerHTML = seasonData.title; + this.detailElem.children[1].innerHTML = childData.title; } (async () => { - if (seasonData.leafCount > 0 && this.plex) { + if (childData.leafCount > 0 && this.plex) { this.episodesElemFreshlyLoaded = true; - const episodesData = await this.plex.getLibraryData(seasonData.key.split('/')[3]); + const episodesData = await this.plex.getLibraryData(childData.key.split('/')[3]); if (this.episodesElem) { this.episodesElemHidden = false; this.episodesElem.style.display = 'block'; @@ -22877,7 +22910,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { else { // todo: change title from season and change media type of play button back if (this.playController) { - this.playController.setPlayActionButtonType(seasonData.type); + this.playController.setPlayActionButtonType(childData.type); } seasonContainer.style.top = `${seasonContainer.dataset.top}px`; this.minimizeSeasons(); @@ -22922,12 +22955,18 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.showSeasonElemTimeout = setTimeout(() => { if (this.seasonsElem) { this.seasonsElem.style.transition = `0.7s`; - this.seasonsElem.style.top = `${top + this.minExpandedHeight + 16}px`; + if (this.activeMovieElem) { + this.seasonsElem.style.top = `${top + getHeight(this.activeMovieElem) + 16 * 2}px`; + } + else { + this.seasonsElem.style.top = `${top + this.minExpandedHeight + 16}px`; + } this.resizeBackground(); } }, 200); } else { + console.log('else'); this.episodesElemFreshlyLoaded = true; if (this.episodesElem) { this.episodesElemHidden = false; @@ -23076,8 +23115,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { movieElem.className = 'movieElem'; movieElem.style.width = `${CSS_STYLE.width}px`; movieElem.style.height = `${CSS_STYLE.height}px`; - if (!lodash.isNil(data.channelCallSign)) { - movieElem.style.backgroundSize = '80%'; + if (!lodash.isNil(data.channelCallSign) || lodash.isEqual(data.type, 'artist')) { + if (!lodash.isEqual(data.type, 'artist')) { + movieElem.style.backgroundSize = '80%'; + } movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)'; movieElem.style.backgroundPosition = 'center'; movieElem.style.height = `${CSS_STYLE.width}px`; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index af9e051..37f57d5 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -977,8 +977,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { const moveElem = (elem: HTMLElement): void => { const seasonElemLocal = elem; seasonElemLocal.style.marginTop = '0'; - seasonElemLocal.style.width = `${CSS_STYLE.width}px`; - seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`; + if (_.isEqual(seasonElem.dataset.type, 'album')) { + seasonElemLocal.style.width = `${CSS_STYLE.width}px`; + seasonElemLocal.style.height = `${CSS_STYLE.width}px`; + } else { + seasonElemLocal.style.width = `${CSS_STYLE.width}px`; + seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`; + } seasonElemLocal.style.zIndex = '3'; seasonElemLocal.style.marginLeft = `0px`; seasonElemLocal.dataset.clicked = 'false'; @@ -1303,16 +1308,20 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.detailElem.style.color = 'rgba(255,255,255,1)'; this.detailElem.style.zIndex = '4'; this.detailElem.style.width = `calc(100% - ${this.minExpandedWidth + 30 + 20}px)`; - this.detailElem.style.maxHeight = `${this.minExpandedHeight + 20}px`; + if (this.activeMovieElem) { + this.detailElem.style.maxHeight = `${getHeight(this.activeMovieElem) + 40}px`; + } else { + this.detailElem.style.maxHeight = `${this.minExpandedHeight + 20}px`; + } } }, 200); } if (this.plex) { - let seasonsData: Record = {}; + let childrenData: Record = {}; if (_.isEqual(data.type, 'episode')) { - seasonsData = await this.plex.getLibraryData(data.grandparentKey.split('/')[3]); - } else if (data.childCount > 0) { - seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]); + childrenData = await this.plex.getLibraryData(data.grandparentKey.split('/')[3]); + } else if (data.childCount > 0 || _.isEqual(data.type, 'artist')) { + childrenData = await this.plex.getLibraryData(data.key.split('/')[3]); } let dataDetails: Record = {}; if (!_.isNil(data.key)) { @@ -1424,7 +1433,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } } - if (!_.isEmpty(seasonsData)) { + if (!_.isEmpty(childrenData)) { this.seasonElemFreshlyLoaded = true; if (this.seasonsElem) { this.seasonsElem.style.display = 'block'; @@ -1433,7 +1442,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.seasonsElem.style.top = `${top + 2000}px`; } - _.forEach(seasonsData, seasonData => { + _.forEach(childrenData, childData => { + console.log(childData); + if (this.seasonsElem && this.plex) { this.seasonsElemHidden = false; const seasonContainer = document.createElement('div'); @@ -1441,25 +1452,30 @@ class PlexMeetsHomeAssistant extends HTMLElement { seasonContainer.style.width = `${CSS_STYLE.width}px`; const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${ this.minExpandedHeight - }&minSize=1&upscale=1&url=${seasonData.thumb}&X-Plex-Token=${this.config.token}`; + }&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`; const seasonElem = document.createElement('div'); seasonElem.className = 'seasonElem'; seasonElem.style.width = `${CSS_STYLE.width}px`; - seasonElem.style.height = `${CSS_STYLE.height - 3}px`; + if (_.isEqual(childData.type, 'album')) { + seasonElem.style.height = `${CSS_STYLE.width}px`; + } else { + seasonElem.style.height = `${CSS_STYLE.height - 3}px`; + } + seasonElem.style.backgroundImage = `url('${thumbURL}')`; seasonElem.dataset.clicked = 'false'; - if (this.playController && !this.playController.isPlaySupported(seasonData)) { + if (this.playController && !this.playController.isPlaySupported(childData)) { seasonElem.style.cursor = 'pointer'; } const interactiveArea = document.createElement('div'); interactiveArea.className = 'interactiveArea'; - if (seasonData.leafCount - seasonData.viewedLeafCount > 0) { + if (childData.leafCount - childData.viewedLeafCount > 0) { const toViewElem = document.createElement('div'); toViewElem.className = 'toViewSeason'; - toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString(); + toViewElem.innerHTML = (childData.leafCount - childData.viewedLeafCount).toString(); toViewElem.style.fontSize = `${this.fontSize4}px`; toViewElem.style.lineHeight = `${this.fontSize4}px`; @@ -1469,14 +1485,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { } if (this.playController) { - const playButton = this.playController.getPlayButton(seasonData.type); - if (this.playController.isPlaySupported(seasonData)) { + const playButton = this.playController.getPlayButton(childData.type); + if (this.playController.isPlaySupported(childData)) { playButton.classList.remove('disabled'); } playButton.addEventListener('click', event => { event.stopPropagation(); if (this.plex && this.playController) { - this.playController.play(seasonData, true); + this.playController.play(childData, true); } }); @@ -1488,14 +1504,19 @@ class PlexMeetsHomeAssistant extends HTMLElement { const seasonTitleElem = document.createElement('div'); seasonTitleElem.className = 'seasonTitleElem'; - seasonTitleElem.innerHTML = escapeHtml(seasonData.title); + seasonTitleElem.innerHTML = escapeHtml(childData.title); seasonTitleElem.style.fontSize = `${this.fontSize1}px`; seasonTitleElem.style.lineHeight = `${this.fontSize1}px`; seasonContainer.append(seasonTitleElem); const seasonEpisodesCount = document.createElement('div'); seasonEpisodesCount.className = 'seasonEpisodesCount'; - seasonEpisodesCount.innerHTML = `${escapeHtml(seasonData.leafCount)} episodes`; + if (childData.leafCount > 0) { + seasonEpisodesCount.innerHTML = `${escapeHtml(childData.leafCount)} episodes`; + } else if (!_.isNil(childData.year)) { + seasonEpisodesCount.innerHTML = `${escapeHtml(childData.year)} `; + } + seasonEpisodesCount.style.fontSize = `${this.fontSize2}px`; seasonEpisodesCount.style.lineHeight = `${this.fontSize2}px`; seasonContainer.append(seasonEpisodesCount); @@ -1510,12 +1531,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.activeMovieElem) { if (seasonElem.dataset.clicked === 'false') { if (this.playController) { - this.playController.setPlayActionButtonType(seasonData.type); + this.playController.setPlayActionButtonType(childData.type); this.playController.setPlayButtonClickFunction((thisEvent: MouseEvent) => { thisEvent.preventDefault(); thisEvent.stopPropagation(); if (this.playController) { - this.playController.play(seasonData, true); + this.playController.play(childData, true); } }); } @@ -1533,9 +1554,19 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.scrollDownInactiveSeasons(); - seasonContainer.style.top = `${-this.minExpandedHeight}px`; + if (this.activeMovieElem) { + seasonContainer.style.top = `${-getHeight(this.activeMovieElem)}px`; + } else { + seasonContainer.style.top = `${-this.minExpandedHeight}px`; + } + + seasonElem.dataset.type = childData.type; seasonElem.style.width = `${this.minExpandedWidth}px`; - seasonElem.style.height = `${this.minExpandedHeight - 6}px`; + if (_.isEqual(childData.type, 'album')) { + seasonElem.style.height = `${this.minExpandedWidth}px`; + } else { + seasonElem.style.height = `${this.minExpandedHeight - 6}px`; + } seasonElem.style.zIndex = '3'; seasonElem.style.marginLeft = `-${getOffset(seasonElem).left - @@ -1545,12 +1576,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { seasonEpisodesCount.style.color = 'rgba(255,255,255,0)'; if (this.detailElem) { - (this.detailElem.children[1] as HTMLElement).innerHTML = seasonData.title; + (this.detailElem.children[1] as HTMLElement).innerHTML = childData.title; } (async (): Promise => { - if (seasonData.leafCount > 0 && this.plex) { + if (childData.leafCount > 0 && this.plex) { this.episodesElemFreshlyLoaded = true; - const episodesData = await this.plex.getLibraryData(seasonData.key.split('/')[3]); + const episodesData = await this.plex.getLibraryData(childData.key.split('/')[3]); if (this.episodesElem) { this.episodesElemHidden = false; this.episodesElem.style.display = 'block'; @@ -1589,7 +1620,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { } else { // todo: change title from season and change media type of play button back if (this.playController) { - this.playController.setPlayActionButtonType(seasonData.type); + this.playController.setPlayActionButtonType(childData.type); } seasonContainer.style.top = `${seasonContainer.dataset.top}px`; this.minimizeSeasons(); @@ -1639,12 +1670,17 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.showSeasonElemTimeout = setTimeout(() => { if (this.seasonsElem) { this.seasonsElem.style.transition = `0.7s`; - this.seasonsElem.style.top = `${top + this.minExpandedHeight + 16}px`; + if (this.activeMovieElem) { + this.seasonsElem.style.top = `${top + getHeight(this.activeMovieElem) + 16 * 2}px`; + } else { + this.seasonsElem.style.top = `${top + this.minExpandedHeight + 16}px`; + } this.resizeBackground(); } }, 200); } else { + console.log('else'); this.episodesElemFreshlyLoaded = true; if (this.episodesElem) { this.episodesElemHidden = false; @@ -1815,8 +1851,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { movieElem.style.width = `${CSS_STYLE.width}px`; movieElem.style.height = `${CSS_STYLE.height}px`; - if (!_.isNil(data.channelCallSign)) { - movieElem.style.backgroundSize = '80%'; + if (!_.isNil(data.channelCallSign) || _.isEqual(data.type, 'artist')) { + if (!_.isEqual(data.type, 'artist')) { + movieElem.style.backgroundSize = '80%'; + } movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)'; movieElem.style.backgroundPosition = 'center'; movieElem.style.height = `${CSS_STYLE.width}px`;