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

Add #43: Posters of artists, look&feel of opened artist, albums

Browse Source
music
Juraj Nyíri 3 years ago
parent 664aa8de3a
commit f49fce455f
2 changed files with 139 additions and 60 deletions
Show Stats Download Patch File Download Diff File

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

@ -22322,8 +22322,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const moveElem = (elem) => { const moveElem = (elem) => {
const seasonElemLocal = elem; const seasonElemLocal = elem;
seasonElemLocal.style.marginTop = '0'; seasonElemLocal.style.marginTop = '0';
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.width = `${CSS_STYLE.width}px`;
seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`; seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`;
}
seasonElemLocal.style.zIndex = '3'; seasonElemLocal.style.zIndex = '3';
seasonElemLocal.style.marginLeft = `0px`; seasonElemLocal.style.marginLeft = `0px`;
seasonElemLocal.dataset.clicked = 'false'; seasonElemLocal.dataset.clicked = 'false';
@ -22626,17 +22632,22 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem.style.color = 'rgba(255,255,255,1)'; this.detailElem.style.color = 'rgba(255,255,255,1)';
this.detailElem.style.zIndex = '4'; this.detailElem.style.zIndex = '4';
this.detailElem.style.width = `calc(100% - ${this.minExpandedWidth + 30 + 20}px)`; this.detailElem.style.width = `calc(100% - ${this.minExpandedWidth + 30 + 20}px)`;
if (this.activeMovieElem) {
this.detailElem.style.maxHeight = `${getHeight(this.activeMovieElem) + 40}px`;
}
else {
this.detailElem.style.maxHeight = `${this.minExpandedHeight + 20}px`; this.detailElem.style.maxHeight = `${this.minExpandedHeight + 20}px`;
} }
}
}, 200); }, 200);
} }
if (this.plex) { if (this.plex) {
let seasonsData = {}; let childrenData = {};
if (lodash.isEqual(data.type, 'episode')) { 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) { else if (data.childCount > 0 || lodash.isEqual(data.type, 'artist')) {
seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]); childrenData = await this.plex.getLibraryData(data.key.split('/')[3]);
} }
let dataDetails = {}; let dataDetails = {};
if (!lodash.isNil(data.key)) { if (!lodash.isNil(data.key)) {
@ -22740,7 +22751,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
} }
} }
if (!lodash.isEmpty(seasonsData)) { if (!lodash.isEmpty(childrenData)) {
this.seasonElemFreshlyLoaded = true; this.seasonElemFreshlyLoaded = true;
if (this.seasonsElem) { if (this.seasonsElem) {
this.seasonsElem.style.display = 'block'; this.seasonsElem.style.display = 'block';
@ -22748,42 +22759,48 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.seasonsElem.style.transition = `0s`; this.seasonsElem.style.transition = `0s`;
this.seasonsElem.style.top = `${top + 2000}px`; this.seasonsElem.style.top = `${top + 2000}px`;
} }
lodash.forEach(seasonsData, seasonData => { lodash.forEach(childrenData, childData => {
console.log(childData);
if (this.seasonsElem && this.plex) { if (this.seasonsElem && this.plex) {
this.seasonsElemHidden = false; this.seasonsElemHidden = false;
const seasonContainer = document.createElement('div'); const seasonContainer = document.createElement('div');
seasonContainer.className = 'seasonContainer'; seasonContainer.className = 'seasonContainer';
seasonContainer.style.width = `${CSS_STYLE.width}px`; 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'); const seasonElem = document.createElement('div');
seasonElem.className = 'seasonElem'; seasonElem.className = 'seasonElem';
seasonElem.style.width = `${CSS_STYLE.width}px`; seasonElem.style.width = `${CSS_STYLE.width}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.height = `${CSS_STYLE.height - 3}px`;
}
seasonElem.style.backgroundImage = `url('${thumbURL}')`; seasonElem.style.backgroundImage = `url('${thumbURL}')`;
seasonElem.dataset.clicked = 'false'; seasonElem.dataset.clicked = 'false';
if (this.playController && !this.playController.isPlaySupported(seasonData)) { if (this.playController && !this.playController.isPlaySupported(childData)) {
seasonElem.style.cursor = 'pointer'; seasonElem.style.cursor = 'pointer';
} }
const interactiveArea = document.createElement('div'); const interactiveArea = document.createElement('div');
interactiveArea.className = 'interactiveArea'; interactiveArea.className = 'interactiveArea';
if (seasonData.leafCount - seasonData.viewedLeafCount > 0) { if (childData.leafCount - childData.viewedLeafCount > 0) {
const toViewElem = document.createElement('div'); const toViewElem = document.createElement('div');
toViewElem.className = 'toViewSeason'; 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.fontSize = `${this.fontSize4}px`;
toViewElem.style.lineHeight = `${this.fontSize4}px`; toViewElem.style.lineHeight = `${this.fontSize4}px`;
toViewElem.style.padding = `${this.fontSize4 / 2}px`; toViewElem.style.padding = `${this.fontSize4 / 2}px`;
interactiveArea.appendChild(toViewElem); interactiveArea.appendChild(toViewElem);
} }
if (this.playController) { if (this.playController) {
const playButton = this.playController.getPlayButton(seasonData.type); const playButton = this.playController.getPlayButton(childData.type);
if (this.playController.isPlaySupported(seasonData)) { if (this.playController.isPlaySupported(childData)) {
playButton.classList.remove('disabled'); playButton.classList.remove('disabled');
} }
playButton.addEventListener('click', event => { playButton.addEventListener('click', event => {
event.stopPropagation(); event.stopPropagation();
if (this.plex && this.playController) { if (this.plex && this.playController) {
this.playController.play(seasonData, true); this.playController.play(childData, true);
} }
}); });
interactiveArea.append(playButton); interactiveArea.append(playButton);
@ -22792,13 +22809,18 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonContainer.append(seasonElem); seasonContainer.append(seasonElem);
const seasonTitleElem = document.createElement('div'); const seasonTitleElem = document.createElement('div');
seasonTitleElem.className = 'seasonTitleElem'; seasonTitleElem.className = 'seasonTitleElem';
seasonTitleElem.innerHTML = escapeHtml(seasonData.title); seasonTitleElem.innerHTML = escapeHtml(childData.title);
seasonTitleElem.style.fontSize = `${this.fontSize1}px`; seasonTitleElem.style.fontSize = `${this.fontSize1}px`;
seasonTitleElem.style.lineHeight = `${this.fontSize1}px`; seasonTitleElem.style.lineHeight = `${this.fontSize1}px`;
seasonContainer.append(seasonTitleElem); seasonContainer.append(seasonTitleElem);
const seasonEpisodesCount = document.createElement('div'); const seasonEpisodesCount = document.createElement('div');
seasonEpisodesCount.className = 'seasonEpisodesCount'; 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.fontSize = `${this.fontSize2}px`;
seasonEpisodesCount.style.lineHeight = `${this.fontSize2}px`; seasonEpisodesCount.style.lineHeight = `${this.fontSize2}px`;
seasonContainer.append(seasonEpisodesCount); seasonContainer.append(seasonEpisodesCount);
@ -22812,12 +22834,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.activeMovieElem) { if (this.activeMovieElem) {
if (seasonElem.dataset.clicked === 'false') { if (seasonElem.dataset.clicked === 'false') {
if (this.playController) { if (this.playController) {
this.playController.setPlayActionButtonType(seasonData.type); this.playController.setPlayActionButtonType(childData.type);
this.playController.setPlayButtonClickFunction((thisEvent) => { this.playController.setPlayButtonClickFunction((thisEvent) => {
thisEvent.preventDefault(); thisEvent.preventDefault();
thisEvent.stopPropagation(); thisEvent.stopPropagation();
if (this.playController) { if (this.playController) {
this.playController.play(seasonData, true); this.playController.play(childData, true);
} }
}); });
} }
@ -22832,21 +22854,32 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}, 500); }, 500);
this.scrollDownInactiveSeasons(); this.scrollDownInactiveSeasons();
if (this.activeMovieElem) {
seasonContainer.style.top = `${-getHeight(this.activeMovieElem)}px`;
}
else {
seasonContainer.style.top = `${-this.minExpandedHeight}px`; seasonContainer.style.top = `${-this.minExpandedHeight}px`;
}
seasonElem.dataset.type = childData.type;
seasonElem.style.width = `${this.minExpandedWidth}px`; seasonElem.style.width = `${this.minExpandedWidth}px`;
if (lodash.isEqual(childData.type, 'album')) {
seasonElem.style.height = `${this.minExpandedWidth}px`;
}
else {
seasonElem.style.height = `${this.minExpandedHeight - 6}px`; seasonElem.style.height = `${this.minExpandedHeight - 6}px`;
}
seasonElem.style.zIndex = '3'; seasonElem.style.zIndex = '3';
seasonElem.style.marginLeft = `-${getOffset(seasonElem).left - seasonElem.style.marginLeft = `-${getOffset(seasonElem).left -
getOffset(this.activeMovieElem).left}px`; getOffset(this.activeMovieElem).left}px`;
seasonTitleElem.style.color = 'rgba(255,255,255,0)'; seasonTitleElem.style.color = 'rgba(255,255,255,0)';
seasonEpisodesCount.style.color = 'rgba(255,255,255,0)'; seasonEpisodesCount.style.color = 'rgba(255,255,255,0)';
if (this.detailElem) { if (this.detailElem) {
this.detailElem.children[1].innerHTML = seasonData.title; this.detailElem.children[1].innerHTML = childData.title;
} }
(async () => { (async () => {
if (seasonData.leafCount > 0 && this.plex) { if (childData.leafCount > 0 && this.plex) {
this.episodesElemFreshlyLoaded = true; 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) { if (this.episodesElem) {
this.episodesElemHidden = false; this.episodesElemHidden = false;
this.episodesElem.style.display = 'block'; this.episodesElem.style.display = 'block';
@ -22877,7 +22910,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
else { else {
// todo: change title from season and change media type of play button back // todo: change title from season and change media type of play button back
if (this.playController) { if (this.playController) {
this.playController.setPlayActionButtonType(seasonData.type); this.playController.setPlayActionButtonType(childData.type);
} }
seasonContainer.style.top = `${seasonContainer.dataset.top}px`; seasonContainer.style.top = `${seasonContainer.dataset.top}px`;
this.minimizeSeasons(); this.minimizeSeasons();
@ -22922,12 +22955,18 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.showSeasonElemTimeout = setTimeout(() => { this.showSeasonElemTimeout = setTimeout(() => {
if (this.seasonsElem) { if (this.seasonsElem) {
this.seasonsElem.style.transition = `0.7s`; this.seasonsElem.style.transition = `0.7s`;
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.seasonsElem.style.top = `${top + this.minExpandedHeight + 16}px`;
}
this.resizeBackground(); this.resizeBackground();
} }
}, 200); }, 200);
} }
else { else {
console.log('else');
this.episodesElemFreshlyLoaded = true; this.episodesElemFreshlyLoaded = true;
if (this.episodesElem) { if (this.episodesElem) {
this.episodesElemHidden = false; this.episodesElemHidden = false;
@ -23076,8 +23115,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
movieElem.className = 'movieElem'; movieElem.className = 'movieElem';
movieElem.style.width = `${CSS_STYLE.width}px`; movieElem.style.width = `${CSS_STYLE.width}px`;
movieElem.style.height = `${CSS_STYLE.height}px`; movieElem.style.height = `${CSS_STYLE.height}px`;
if (!lodash.isNil(data.channelCallSign)) { if (!lodash.isNil(data.channelCallSign) || lodash.isEqual(data.type, 'artist')) {
if (!lodash.isEqual(data.type, 'artist')) {
movieElem.style.backgroundSize = '80%'; movieElem.style.backgroundSize = '80%';
}
movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)'; movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)';
movieElem.style.backgroundPosition = 'center'; movieElem.style.backgroundPosition = 'center';
movieElem.style.height = `${CSS_STYLE.width}px`; movieElem.style.height = `${CSS_STYLE.width}px`;

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

@ -977,8 +977,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const moveElem = (elem: HTMLElement): void => { const moveElem = (elem: HTMLElement): void => {
const seasonElemLocal = elem; const seasonElemLocal = elem;
seasonElemLocal.style.marginTop = '0'; seasonElemLocal.style.marginTop = '0';
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.width = `${CSS_STYLE.width}px`;
seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`; seasonElemLocal.style.height = `${CSS_STYLE.height - 3}px`;
}
seasonElemLocal.style.zIndex = '3'; seasonElemLocal.style.zIndex = '3';
seasonElemLocal.style.marginLeft = `0px`; seasonElemLocal.style.marginLeft = `0px`;
seasonElemLocal.dataset.clicked = 'false'; seasonElemLocal.dataset.clicked = 'false';
@ -1303,16 +1308,20 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem.style.color = 'rgba(255,255,255,1)'; this.detailElem.style.color = 'rgba(255,255,255,1)';
this.detailElem.style.zIndex = '4'; this.detailElem.style.zIndex = '4';
this.detailElem.style.width = `calc(100% - ${this.minExpandedWidth + 30 + 20}px)`; this.detailElem.style.width = `calc(100% - ${this.minExpandedWidth + 30 + 20}px)`;
if (this.activeMovieElem) {
this.detailElem.style.maxHeight = `${getHeight(this.activeMovieElem) + 40}px`;
} else {
this.detailElem.style.maxHeight = `${this.minExpandedHeight + 20}px`; this.detailElem.style.maxHeight = `${this.minExpandedHeight + 20}px`;
} }
}
}, 200); }, 200);
} }
if (this.plex) { if (this.plex) {
let seasonsData: Record<string, any> = {}; let childrenData: Record<string, any> = {};
if (_.isEqual(data.type, 'episode')) { if (_.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) { } else if (data.childCount > 0 || _.isEqual(data.type, 'artist')) {
seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]); childrenData = await this.plex.getLibraryData(data.key.split('/')[3]);
} }
let dataDetails: Record<string, any> = {}; let dataDetails: Record<string, any> = {};
if (!_.isNil(data.key)) { if (!_.isNil(data.key)) {
@ -1424,7 +1433,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
} }
} }
if (!_.isEmpty(seasonsData)) { if (!_.isEmpty(childrenData)) {
this.seasonElemFreshlyLoaded = true; this.seasonElemFreshlyLoaded = true;
if (this.seasonsElem) { if (this.seasonsElem) {
this.seasonsElem.style.display = 'block'; this.seasonsElem.style.display = 'block';
@ -1433,7 +1442,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.seasonsElem.style.top = `${top + 2000}px`; this.seasonsElem.style.top = `${top + 2000}px`;
} }
_.forEach(seasonsData, seasonData => { _.forEach(childrenData, childData => {
console.log(childData);
if (this.seasonsElem && this.plex) { if (this.seasonsElem && this.plex) {
this.seasonsElemHidden = false; this.seasonsElemHidden = false;
const seasonContainer = document.createElement('div'); const seasonContainer = document.createElement('div');
@ -1441,25 +1452,30 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonContainer.style.width = `${CSS_STYLE.width}px`; seasonContainer.style.width = `${CSS_STYLE.width}px`;
const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${ const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
this.minExpandedHeight 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'); const seasonElem = document.createElement('div');
seasonElem.className = 'seasonElem'; seasonElem.className = 'seasonElem';
seasonElem.style.width = `${CSS_STYLE.width}px`; seasonElem.style.width = `${CSS_STYLE.width}px`;
if (_.isEqual(childData.type, 'album')) {
seasonElem.style.height = `${CSS_STYLE.width}px`;
} else {
seasonElem.style.height = `${CSS_STYLE.height - 3}px`; seasonElem.style.height = `${CSS_STYLE.height - 3}px`;
}
seasonElem.style.backgroundImage = `url('${thumbURL}')`; seasonElem.style.backgroundImage = `url('${thumbURL}')`;
seasonElem.dataset.clicked = 'false'; seasonElem.dataset.clicked = 'false';
if (this.playController && !this.playController.isPlaySupported(seasonData)) { if (this.playController && !this.playController.isPlaySupported(childData)) {
seasonElem.style.cursor = 'pointer'; seasonElem.style.cursor = 'pointer';
} }
const interactiveArea = document.createElement('div'); const interactiveArea = document.createElement('div');
interactiveArea.className = 'interactiveArea'; interactiveArea.className = 'interactiveArea';
if (seasonData.leafCount - seasonData.viewedLeafCount > 0) { if (childData.leafCount - childData.viewedLeafCount > 0) {
const toViewElem = document.createElement('div'); const toViewElem = document.createElement('div');
toViewElem.className = 'toViewSeason'; 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.fontSize = `${this.fontSize4}px`;
toViewElem.style.lineHeight = `${this.fontSize4}px`; toViewElem.style.lineHeight = `${this.fontSize4}px`;
@ -1469,14 +1485,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
if (this.playController) { if (this.playController) {
const playButton = this.playController.getPlayButton(seasonData.type); const playButton = this.playController.getPlayButton(childData.type);
if (this.playController.isPlaySupported(seasonData)) { if (this.playController.isPlaySupported(childData)) {
playButton.classList.remove('disabled'); playButton.classList.remove('disabled');
} }
playButton.addEventListener('click', event => { playButton.addEventListener('click', event => {
event.stopPropagation(); event.stopPropagation();
if (this.plex && this.playController) { 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'); const seasonTitleElem = document.createElement('div');
seasonTitleElem.className = 'seasonTitleElem'; seasonTitleElem.className = 'seasonTitleElem';
seasonTitleElem.innerHTML = escapeHtml(seasonData.title); seasonTitleElem.innerHTML = escapeHtml(childData.title);
seasonTitleElem.style.fontSize = `${this.fontSize1}px`; seasonTitleElem.style.fontSize = `${this.fontSize1}px`;
seasonTitleElem.style.lineHeight = `${this.fontSize1}px`; seasonTitleElem.style.lineHeight = `${this.fontSize1}px`;
seasonContainer.append(seasonTitleElem); seasonContainer.append(seasonTitleElem);
const seasonEpisodesCount = document.createElement('div'); const seasonEpisodesCount = document.createElement('div');
seasonEpisodesCount.className = 'seasonEpisodesCount'; 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.fontSize = `${this.fontSize2}px`;
seasonEpisodesCount.style.lineHeight = `${this.fontSize2}px`; seasonEpisodesCount.style.lineHeight = `${this.fontSize2}px`;
seasonContainer.append(seasonEpisodesCount); seasonContainer.append(seasonEpisodesCount);
@ -1510,12 +1531,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.activeMovieElem) { if (this.activeMovieElem) {
if (seasonElem.dataset.clicked === 'false') { if (seasonElem.dataset.clicked === 'false') {
if (this.playController) { if (this.playController) {
this.playController.setPlayActionButtonType(seasonData.type); this.playController.setPlayActionButtonType(childData.type);
this.playController.setPlayButtonClickFunction((thisEvent: MouseEvent) => { this.playController.setPlayButtonClickFunction((thisEvent: MouseEvent) => {
thisEvent.preventDefault(); thisEvent.preventDefault();
thisEvent.stopPropagation(); thisEvent.stopPropagation();
if (this.playController) { if (this.playController) {
this.playController.play(seasonData, true); this.playController.play(childData, true);
} }
}); });
} }
@ -1533,9 +1554,19 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.scrollDownInactiveSeasons(); this.scrollDownInactiveSeasons();
if (this.activeMovieElem) {
seasonContainer.style.top = `${-getHeight(this.activeMovieElem)}px`;
} else {
seasonContainer.style.top = `${-this.minExpandedHeight}px`; seasonContainer.style.top = `${-this.minExpandedHeight}px`;
}
seasonElem.dataset.type = childData.type;
seasonElem.style.width = `${this.minExpandedWidth}px`; seasonElem.style.width = `${this.minExpandedWidth}px`;
if (_.isEqual(childData.type, 'album')) {
seasonElem.style.height = `${this.minExpandedWidth}px`;
} else {
seasonElem.style.height = `${this.minExpandedHeight - 6}px`; seasonElem.style.height = `${this.minExpandedHeight - 6}px`;
}
seasonElem.style.zIndex = '3'; seasonElem.style.zIndex = '3';
seasonElem.style.marginLeft = `-${getOffset(seasonElem).left - seasonElem.style.marginLeft = `-${getOffset(seasonElem).left -
@ -1545,12 +1576,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
seasonEpisodesCount.style.color = 'rgba(255,255,255,0)'; seasonEpisodesCount.style.color = 'rgba(255,255,255,0)';
if (this.detailElem) { if (this.detailElem) {
(this.detailElem.children[1] as HTMLElement).innerHTML = seasonData.title; (this.detailElem.children[1] as HTMLElement).innerHTML = childData.title;
} }
(async (): Promise<void> => { (async (): Promise<void> => {
if (seasonData.leafCount > 0 && this.plex) { if (childData.leafCount > 0 && this.plex) {
this.episodesElemFreshlyLoaded = true; 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) { if (this.episodesElem) {
this.episodesElemHidden = false; this.episodesElemHidden = false;
this.episodesElem.style.display = 'block'; this.episodesElem.style.display = 'block';
@ -1589,7 +1620,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} else { } else {
// todo: change title from season and change media type of play button back // todo: change title from season and change media type of play button back
if (this.playController) { if (this.playController) {
this.playController.setPlayActionButtonType(seasonData.type); this.playController.setPlayActionButtonType(childData.type);
} }
seasonContainer.style.top = `${seasonContainer.dataset.top}px`; seasonContainer.style.top = `${seasonContainer.dataset.top}px`;
this.minimizeSeasons(); this.minimizeSeasons();
@ -1639,12 +1670,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.showSeasonElemTimeout = setTimeout(() => { this.showSeasonElemTimeout = setTimeout(() => {
if (this.seasonsElem) { if (this.seasonsElem) {
this.seasonsElem.style.transition = `0.7s`; this.seasonsElem.style.transition = `0.7s`;
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.seasonsElem.style.top = `${top + this.minExpandedHeight + 16}px`;
}
this.resizeBackground(); this.resizeBackground();
} }
}, 200); }, 200);
} else { } else {
console.log('else');
this.episodesElemFreshlyLoaded = true; this.episodesElemFreshlyLoaded = true;
if (this.episodesElem) { if (this.episodesElem) {
this.episodesElemHidden = false; this.episodesElemHidden = false;
@ -1815,8 +1851,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
movieElem.style.width = `${CSS_STYLE.width}px`; movieElem.style.width = `${CSS_STYLE.width}px`;
movieElem.style.height = `${CSS_STYLE.height}px`; movieElem.style.height = `${CSS_STYLE.height}px`;
if (!_.isNil(data.channelCallSign)) { if (!_.isNil(data.channelCallSign) || _.isEqual(data.type, 'artist')) {
if (!_.isEqual(data.type, 'artist')) {
movieElem.style.backgroundSize = '80%'; movieElem.style.backgroundSize = '80%';
}
movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)'; movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)';
movieElem.style.backgroundPosition = 'center'; movieElem.style.backgroundPosition = 'center';
movieElem.style.height = `${CSS_STYLE.width}px`; movieElem.style.height = `${CSS_STYLE.width}px`;

Write Preview
Loading…
Cancel
Save