From 6152c3b359fca18bec781ef247903fe470415da9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 14:49:57 +0200 Subject: [PATCH 01/12] Add: Enable folders in UI editor --- dist/plex-meets-homeassistant.js | 7 +++++-- src/editor.ts | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 9834204..0f2a822 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -20833,8 +20833,11 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { typeItems.appendChild(addDropdownItem('', '')); let typeAvailable = false; lodash.forEach(types, (sectionType) => { - if (sectionType.type !== 'folder' && sectionType.type !== 'track' && sectionType.type !== 'episode') { - const key = sectionType.key.split('type=')[1]; + if (sectionType.type !== 'track' && sectionType.type !== 'episode') { + let key = sectionType.key.split('type=')[1]; + if (sectionType.type === 'folder') { + key = 'folder'; + } if (lodash.isEqual(key, this.config.displayType)) { typeAvailable = true; } diff --git a/src/editor.ts b/src/editor.ts index 1870811..0a75d0f 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -797,8 +797,11 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { typeItems.appendChild(addDropdownItem('', '')); let typeAvailable = false; _.forEach(types, (sectionType: Record) => { - if (sectionType.type !== 'folder' && sectionType.type !== 'track' && sectionType.type !== 'episode') { - const key = sectionType.key.split('type=')[1]; + if (sectionType.type !== 'track' && sectionType.type !== 'episode') { + let key = sectionType.key.split('type=')[1]; + if (sectionType.type === 'folder') { + key = 'folder'; + } if (_.isEqual(key, this.config.displayType)) { typeAvailable = true; } From 8a888ac0fde5de5c0c6f1e13c84ebb7e77325d43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 14:54:27 +0200 Subject: [PATCH 02/12] Add: Support for folders in getSectionDataWithoutProcessing --- dist/plex-meets-homeassistant.js | 16 +++++++++++++--- src/modules/Plex.ts | 14 +++++++++++--- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 0f2a822..9e04e98 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -18863,11 +18863,21 @@ class Plex { }; this.getSectionDataWithoutProcessing = async (sectionID, type = false) => { const bulkItems = 50; - let url = this.authorizeURL(`${this.getBasicURL()}/library/sections/${sectionID}/all`); - url += `&sort=${this.sort}`; + let url = `${this.getBasicURL()}/library/sections/${sectionID}`; if (type) { - url += `&type=${type}`; + if (lodash.isEqual(type, 'folder')) { + url += `/folder`; + } + else { + url += `/all`; + url += `?type=${type}`; + } } + else { + url += `/all`; + } + url = this.authorizeURL(url); + url += `&sort=${this.sort}`; url += `&includeCollections=1&includeExternalMedia=1&includeAdvanced=1&includeMeta=1`; let result = {}; try { diff --git a/src/modules/Plex.ts b/src/modules/Plex.ts index 2ca4377..1a0ccf0 100644 --- a/src/modules/Plex.ts +++ b/src/modules/Plex.ts @@ -259,11 +259,19 @@ class Plex { private getSectionDataWithoutProcessing = async (sectionID: string, type: string | false = false): Promise => { const bulkItems = 50; - let url = this.authorizeURL(`${this.getBasicURL()}/library/sections/${sectionID}/all`); - url += `&sort=${this.sort}`; + let url = `${this.getBasicURL()}/library/sections/${sectionID}`; if (type) { - url += `&type=${type}`; + if (_.isEqual(type, 'folder')) { + url += `/folder`; + } else { + url += `/all`; + url += `?type=${type}`; + } + } else { + url += `/all`; } + url = this.authorizeURL(url); + url += `&sort=${this.sort}`; url += `&includeCollections=1&includeExternalMedia=1&includeAdvanced=1&includeMeta=1`; let result: Record = {}; try { From f4e9eec304fd87ceabcd6e79fcd65e4cf5ca0faf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:12:31 +0200 Subject: [PATCH 03/12] Update: Folders now work and display tracks --- dist/plex-meets-homeassistant.js | 40 ++++++++++++++++++++------------ src/modules/Plex.ts | 4 ++-- src/modules/utils.ts | 6 ++++- src/plex-meets-homeassistant.ts | 34 +++++++++++++++++---------- 4 files changed, 54 insertions(+), 30 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 9e04e98..64c9c46 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19101,8 +19101,8 @@ class Plex { timeout: this.requestTimeout })).data.MediaContainer.Metadata[0]; }; - this.getLibraryData = async (id) => { - const url = this.authorizeURL(`${this.getBasicURL()}/library/metadata/${id}/children`); + this.getLibraryData = async (path) => { + const url = this.authorizeURL(`${this.getBasicURL()}${path}`); return (await axios.get(url, { timeout: this.requestTimeout })).data.MediaContainer.Metadata; @@ -19303,7 +19303,12 @@ const createTrackView = (playController, plex, data, fontSize1, fontSize2, isEve trackContainer.append(trackIndexElem); const trackTitleElem = document.createElement('td'); trackTitleElem.className = 'trackTitleElem'; - trackTitleElem.innerHTML = escapeHtml(data.title); + if (!lodash.isEmpty(data.title)) { + trackTitleElem.innerHTML = escapeHtml(data.title); + } + else if (!lodash.isEmpty(data.titleSort)) { + trackTitleElem.innerHTML = escapeHtml(data.titleSort); + } trackTitleElem.style.fontSize = `${fontSize1}px`; trackTitleElem.style.lineHeight = `${fontSize1}px`; trackTitleElem.style.marginBottom = `${margin1}px`; @@ -22960,14 +22965,19 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.plex) { let childrenData = {}; if (lodash.isEqual(data.type, 'episode')) { - childrenData = await this.plex.getLibraryData(data.grandparentKey.split('/')[3]); + childrenData = await this.plex.getLibraryData(data.grandparentKey); } - else if (data.childCount > 0 || lodash.isEqual(data.type, 'artist') || lodash.isEqual(data.type, 'album')) { - childrenData = await this.plex.getLibraryData(data.key.split('/')[3]); + else if (data.childCount > 0 || + lodash.isEqual(data.type, 'artist') || + lodash.isEqual(data.type, 'album') || + lodash.includes(data.key, 'folder')) { + childrenData = await this.plex.getLibraryData(data.key); } let dataDetails = {}; if (!lodash.isNil(data.key)) { - dataDetails = await this.plex.getDetails(data.key.split('/')[3]); + if (!lodash.includes(data.key, 'folder')) { + dataDetails = await this.plex.getDetails(data.key.split('/')[3]); + } if (this.videoElem) { const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); const trailerURL = findTrailerURL(dataDetails); @@ -23087,9 +23097,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { tableView.style.border = 'none'; tableView.cellSpacing = '0'; tableView.cellPadding = '0'; - if (lodash.isEqual(data.type, 'album')) { - this.episodesElem.append(tableView); - } + this.episodesElem.append(tableView); let isEven = false; lodash.forEach(childrenData, childData => { if (this.episodesElem && this.playController && this.plex) { @@ -23124,7 +23132,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { else { lodash.forEach(childrenData, childData => { if (this.seasonsElem && this.plex) { - console.log(childData); this.seasonsElemHidden = false; const seasonContainer = document.createElement('div'); seasonContainer.className = 'seasonContainer'; @@ -23242,7 +23249,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { (async () => { if (this.plex && (childData.leafCount > 0 || lodash.isEqual(childData.type, 'album'))) { this.episodesElemFreshlyLoaded = true; - const episodesData = await this.plex.getLibraryData(childData.key.split('/')[3]); + const episodesData = await this.plex.getLibraryData(childData.key); if (this.episodesElem) { this.episodesElemHidden = false; this.episodesElem.style.display = 'block'; @@ -23358,7 +23365,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.episodesElem.style.transition = `0s`; this.episodesElem.style.top = `${top + 2000}px`; if (lodash.isEqual(data.type, 'season')) { - const episodesData = await this.plex.getLibraryData(data.key.split('/')[3]); + const episodesData = await this.plex.getLibraryData(data.key); lodash.forEach(episodesData, episodeData => { if (this.episodesElem && this.playController && this.plex) { this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData, this.fontSize1, this.fontSize2)); @@ -23498,8 +23505,11 @@ 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) || lodash.isEqual(data.type, 'artist') || lodash.isEqual(data.type, 'album')) { - if (!lodash.isEqual(data.type, 'artist') && !lodash.isEqual(data.type, 'album')) { + if (!lodash.isNil(data.channelCallSign) || + lodash.isEqual(data.type, 'artist') || + lodash.isEqual(data.type, 'album') || + lodash.includes(data.key, 'folder')) { + if (!lodash.isEqual(data.type, 'artist') && !lodash.isEqual(data.type, 'album') && !lodash.includes(data.key, 'folder')) { movieElem.style.backgroundSize = '80%'; } movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)'; diff --git a/src/modules/Plex.ts b/src/modules/Plex.ts index 1a0ccf0..26e8c1b 100644 --- a/src/modules/Plex.ts +++ b/src/modules/Plex.ts @@ -551,8 +551,8 @@ class Plex { ).data.MediaContainer.Metadata[0]; }; - getLibraryData = async (id: number): Promise => { - const url = this.authorizeURL(`${this.getBasicURL()}/library/metadata/${id}/children`); + getLibraryData = async (path: string): Promise => { + const url = this.authorizeURL(`${this.getBasicURL()}${path}`); return ( await axios.get(url, { timeout: this.requestTimeout diff --git a/src/modules/utils.ts b/src/modules/utils.ts index 9684030..6f43022 100644 --- a/src/modules/utils.ts +++ b/src/modules/utils.ts @@ -232,7 +232,11 @@ const createTrackView = ( const trackTitleElem = document.createElement('td'); trackTitleElem.className = 'trackTitleElem'; - trackTitleElem.innerHTML = escapeHtml(data.title); + if (!_.isEmpty(data.title)) { + trackTitleElem.innerHTML = escapeHtml(data.title); + } else if (!_.isEmpty(data.titleSort)) { + trackTitleElem.innerHTML = escapeHtml(data.titleSort); + } trackTitleElem.style.fontSize = `${fontSize1}px`; trackTitleElem.style.lineHeight = `${fontSize1}px`; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 64a2e43..6b79cfd 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -1339,13 +1339,21 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.plex) { let childrenData: Record = {}; if (_.isEqual(data.type, 'episode')) { - childrenData = await this.plex.getLibraryData(data.grandparentKey.split('/')[3]); - } else if (data.childCount > 0 || _.isEqual(data.type, 'artist') || _.isEqual(data.type, 'album')) { - childrenData = await this.plex.getLibraryData(data.key.split('/')[3]); + childrenData = await this.plex.getLibraryData(data.grandparentKey); + } else if ( + data.childCount > 0 || + _.isEqual(data.type, 'artist') || + _.isEqual(data.type, 'album') || + _.includes(data.key, 'folder') + ) { + childrenData = await this.plex.getLibraryData(data.key); } let dataDetails: Record = {}; if (!_.isNil(data.key)) { - dataDetails = await this.plex.getDetails(data.key.split('/')[3]); + if (!_.includes(data.key, 'folder')) { + dataDetails = await this.plex.getDetails(data.key.split('/')[3]); + } + if (this.videoElem) { const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); const trailerURL = findTrailerURL(dataDetails); @@ -1474,9 +1482,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { tableView.style.border = 'none'; tableView.cellSpacing = '0'; tableView.cellPadding = '0'; - if (_.isEqual(data.type, 'album')) { - this.episodesElem.append(tableView); - } + this.episodesElem.append(tableView); let isEven = false; _.forEach(childrenData, childData => { if (this.episodesElem && this.playController && this.plex) { @@ -1513,7 +1519,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { } else { _.forEach(childrenData, childData => { if (this.seasonsElem && this.plex) { - console.log(childData); this.seasonsElemHidden = false; const seasonContainer = document.createElement('div'); seasonContainer.className = 'seasonContainer'; @@ -1649,7 +1654,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { (async (): Promise => { if (this.plex && (childData.leafCount > 0 || _.isEqual(childData.type, 'album'))) { this.episodesElemFreshlyLoaded = true; - const episodesData = await this.plex.getLibraryData(childData.key.split('/')[3]); + const episodesData = await this.plex.getLibraryData(childData.key); if (this.episodesElem) { this.episodesElemHidden = false; this.episodesElem.style.display = 'block'; @@ -1784,7 +1789,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.episodesElem.style.transition = `0s`; this.episodesElem.style.top = `${top + 2000}px`; if (_.isEqual(data.type, 'season')) { - const episodesData = await this.plex.getLibraryData(data.key.split('/')[3]); + const episodesData = await this.plex.getLibraryData(data.key); _.forEach(episodesData, episodeData => { if (this.episodesElem && this.playController && this.plex) { this.episodesElem.append( @@ -1946,8 +1951,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { movieElem.style.width = `${CSS_STYLE.width}px`; movieElem.style.height = `${CSS_STYLE.height}px`; - if (!_.isNil(data.channelCallSign) || _.isEqual(data.type, 'artist') || _.isEqual(data.type, 'album')) { - if (!_.isEqual(data.type, 'artist') && !_.isEqual(data.type, 'album')) { + if ( + !_.isNil(data.channelCallSign) || + _.isEqual(data.type, 'artist') || + _.isEqual(data.type, 'album') || + _.includes(data.key, 'folder') + ) { + if (!_.isEqual(data.type, 'artist') && !_.isEqual(data.type, 'album') && !_.includes(data.key, 'folder')) { movieElem.style.backgroundSize = '80%'; } movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)'; From c91f41e1002b369f7e95468d14f52a6501563ba0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:19:20 +0200 Subject: [PATCH 04/12] Update: Move title to left if image is missing for opened active item --- dist/plex-meets-homeassistant.js | 7 ++++++- src/plex-meets-homeassistant.ts | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 64c9c46..2853fb3 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -22819,7 +22819,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { } this.detailElem.style.transition = '0s'; this.detailElem.style.top = `${top - 1000}px`; - this.detailElem.style.left = `${this.minExpandedWidth + 30}px`; + if (!lodash.isEmpty(lodash.get(data, 'thumb'))) { + this.detailElem.style.left = `${this.minExpandedWidth + 30}px`; + } + else { + this.detailElem.style.left = `16px`; + } clearInterval(this.showDetailsTimeout); // eslint-disable-next-line @typescript-eslint/no-misused-promises this.showDetailsTimeout = setTimeout(async () => { diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 6b79cfd..561361e 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -1185,7 +1185,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.detailElem.style.transition = '0s'; this.detailElem.style.top = `${top - 1000}px`; - this.detailElem.style.left = `${this.minExpandedWidth + 30}px`; + if (!_.isEmpty(_.get(data, 'thumb'))) { + this.detailElem.style.left = `${this.minExpandedWidth + 30}px`; + } else { + this.detailElem.style.left = `16px`; + } + clearInterval(this.showDetailsTimeout); // eslint-disable-next-line @typescript-eslint/no-misused-promises this.showDetailsTimeout = setTimeout(async () => { From 113788b50d9bc9fba0f72b07ef40b76673ecb5de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:25:38 +0200 Subject: [PATCH 05/12] Update: Nicer look for opened folder --- dist/plex-meets-homeassistant.js | 11 ++++++++++- src/plex-meets-homeassistant.ts | 8 +++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 2853fb3..b0c6375 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -23120,9 +23120,18 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.episodesElem) { this.episodesElem.style.transition = `0.7s`; if (this.activeMovieElem) { - this.episodesElem.style.top = `${top + getHeight(this.activeMovieElem) + 16 * 2}px`; + if (!lodash.isEmpty(lodash.get(data, 'thumb'))) { + this.episodesElem.style.top = `${top + getHeight(this.activeMovieElem) + 16 * 2}px`; + } + else if (this.detailElem) { + this.episodesElem.style.top = `${top + getHeight(this.detailElem)}px`; + } + else { + this.episodesElem.style.top = `${top}px`; + } } else { + console.log('2'); this.episodesElem.style.top = `${top + this.minExpandedHeight + 16}px`; } this.resizeBackground(); diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 561361e..f2ba2fa 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -1508,7 +1508,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.episodesElem) { this.episodesElem.style.transition = `0.7s`; if (this.activeMovieElem) { - this.episodesElem.style.top = `${top + getHeight(this.activeMovieElem) + 16 * 2}px`; + if (!_.isEmpty(_.get(data, 'thumb'))) { + this.episodesElem.style.top = `${top + getHeight(this.activeMovieElem) + 16 * 2}px`; + } else if (this.detailElem) { + this.episodesElem.style.top = `${top + getHeight(this.detailElem)}px`; + } else { + this.episodesElem.style.top = `${top}px`; + } } else { this.episodesElem.style.top = `${top + this.minExpandedHeight + 16}px`; } From 1de9854afc24ca1cd791e14d97e7ad0335236252 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:29:34 +0200 Subject: [PATCH 06/12] Fix: Loading seasons when episode opened --- dist/plex-meets-homeassistant.js | 3 +-- src/plex-meets-homeassistant.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index b0c6375..6276d23 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -22970,7 +22970,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.plex) { let childrenData = {}; if (lodash.isEqual(data.type, 'episode')) { - childrenData = await this.plex.getLibraryData(data.grandparentKey); + childrenData = await this.plex.getLibraryData(`${data.grandparentKey}/children`); } else if (data.childCount > 0 || lodash.isEqual(data.type, 'artist') || @@ -23131,7 +23131,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } else { - console.log('2'); this.episodesElem.style.top = `${top + this.minExpandedHeight + 16}px`; } this.resizeBackground(); diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index f2ba2fa..68ada28 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -1344,7 +1344,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.plex) { let childrenData: Record = {}; if (_.isEqual(data.type, 'episode')) { - childrenData = await this.plex.getLibraryData(data.grandparentKey); + childrenData = await this.plex.getLibraryData(`${data.grandparentKey}/children`); } else if ( data.childCount > 0 || _.isEqual(data.type, 'artist') || From ffffa0d50b4fdfb2556b091dd510ed9ba99de8d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:34:06 +0200 Subject: [PATCH 07/12] Fix: Disable sort for folders --- dist/plex-meets-homeassistant.js | 2 +- src/editor.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 6276d23..fb141d9 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -20890,7 +20890,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { }); } const sortFields = lodash.get(libraryData, `[0].Meta.Type[${displayTypeIndex}].Sort`); - if (!lodash.isNil(sortFields) && sortFields.length > 0) { + if (!lodash.isNil(sortFields) && sortFields.length > 0 && this.config.displayType !== 'folder') { lodash.forEach(sortFields, (sortField) => { sortItems.appendChild(addDropdownItem(sortField.key)); }); diff --git a/src/editor.ts b/src/editor.ts index 0a75d0f..ba5abfa 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -838,7 +838,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { }); } const sortFields = _.get(libraryData, `[0].Meta.Type[${displayTypeIndex}].Sort`); - if (!_.isNil(sortFields) && sortFields.length > 0) { + if (!_.isNil(sortFields) && sortFields.length > 0 && this.config.displayType !== 'folder') { _.forEach(sortFields, (sortField: Record) => { sortItems.appendChild(addDropdownItem(sortField.key)); }); From a99ced6b26ac1260701bd37df04992c9c752daca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:38:22 +0200 Subject: [PATCH 08/12] Update: Enable folder display view only for music --- dist/plex-meets-homeassistant.js | 5 ++++- src/editor.ts | 7 ++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index fb141d9..52d9307 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -20848,7 +20848,10 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { typeItems.appendChild(addDropdownItem('', '')); let typeAvailable = false; lodash.forEach(types, (sectionType) => { - if (sectionType.type !== 'track' && sectionType.type !== 'episode') { + if (sectionType.type !== 'track' && + sectionType.type !== 'episode' && + (sectionType.type !== 'folder' || + (sectionType.type === 'folder' && lodash.isEqual(lodash.get(libraryData, '[0].viewGroup'), 'artist')))) { let key = sectionType.key.split('type=')[1]; if (sectionType.type === 'folder') { key = 'folder'; diff --git a/src/editor.ts b/src/editor.ts index ba5abfa..8d5fb66 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -797,7 +797,12 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement { typeItems.appendChild(addDropdownItem('', '')); let typeAvailable = false; _.forEach(types, (sectionType: Record) => { - if (sectionType.type !== 'track' && sectionType.type !== 'episode') { + if ( + sectionType.type !== 'track' && + sectionType.type !== 'episode' && + (sectionType.type !== 'folder' || + (sectionType.type === 'folder' && _.isEqual(_.get(libraryData, '[0].viewGroup'), 'artist'))) + ) { let key = sectionType.key.split('type=')[1]; if (sectionType.type === 'folder') { key = 'folder'; From 088d46f3845cbeaaaf52bb8dc59af3f121e6312e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:46:12 +0200 Subject: [PATCH 09/12] Update: Hide play button for music folders --- dist/plex-meets-homeassistant.js | 12 ++++++++++++ src/modules/PlayController.ts | 5 +++++ src/plex-meets-homeassistant.ts | 7 +++++++ 3 files changed, 24 insertions(+) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 52d9307..6648597 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19826,6 +19826,10 @@ class PlayController { this.playButtons.push(playButton); return playButton; }; + this.setPlayActionDisplay = (displayValue) => { + const playActionButton = this.updateDetailPlayAction(); + playActionButton.style.display = displayValue; + }; this.setPlayActionButtonType = (mediaType) => { const playActionButton = this.updateDetailPlayAction(); playActionButton.setAttribute('data-mediaType', mediaType); @@ -22981,6 +22985,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { lodash.includes(data.key, 'folder')) { childrenData = await this.plex.getLibraryData(data.key); } + if (this.playController) { + if (lodash.includes(data.key, 'folder')) { + this.playController.setPlayActionDisplay('none'); + } + else { + this.playController.setPlayActionDisplay('block'); + } + } let dataDetails = {}; if (!lodash.isNil(data.key)) { if (!lodash.includes(data.key, 'folder')) { diff --git a/src/modules/PlayController.ts b/src/modules/PlayController.ts index 233a229..bca777b 100644 --- a/src/modules/PlayController.ts +++ b/src/modules/PlayController.ts @@ -507,6 +507,11 @@ class PlayController { return playButton; }; + setPlayActionDisplay = (displayValue: string): void => { + const playActionButton = this.updateDetailPlayAction(); + playActionButton.style.display = displayValue; + }; + setPlayActionButtonType = (mediaType: string): void => { const playActionButton = this.updateDetailPlayAction(); playActionButton.setAttribute('data-mediaType', mediaType); diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 68ada28..cbab17b 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -1353,6 +1353,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { ) { childrenData = await this.plex.getLibraryData(data.key); } + if (this.playController) { + if (_.includes(data.key, 'folder')) { + this.playController.setPlayActionDisplay('none'); + } else { + this.playController.setPlayActionDisplay('block'); + } + } let dataDetails: Record = {}; if (!_.isNil(data.key)) { if (!_.includes(data.key, 'folder')) { From d67b7056058ee2a4fd918e03b8877b64e825ac49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:49:14 +0200 Subject: [PATCH 10/12] Remove: calculatePositions no longer needed --- dist/plex-meets-homeassistant.js | 24 ------------------------ src/plex-meets-homeassistant.ts | 24 ------------------------ 2 files changed, 48 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 6648597..5c97420 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -21907,7 +21907,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { (!this.maxRows || this.renderedRows < this.config.maxRows)) { this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2); this.renderMovieElems(); - this.calculatePositions(); } }; this.loadInitialData = async () => { @@ -22611,31 +22610,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { endElem.className = 'clear'; this.contentContainer.appendChild(endElem); this.renderMovieElems(); - this.calculatePositions(); this.loadCustomStyles(); }; - this.calculatePositions = () => { - // return; // temp - // todo: figure out why interval is needed here and do it properly - const setLeftOffsetsInterval = setInterval(() => { - this.movieElems = this.getElementsByClassName('movieElem'); - for (let i = 0; i < this.movieElems.length; i += 1) { - if (this.movieElems[i].offsetLeft === 0) { - break; - } - else { - clearInterval(setLeftOffsetsInterval); - } - /* - this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`; - this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft; - this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`; - this.movieElems[i].dataset.top = this.movieElems[i].offsetTop; - this.movieElems[i].style.position = 'absolute'; - */ - } - }, 100); - }; this.minimizeSeasons = () => { this.seasonsElemHidden = false; if (this.seasonsElem) { diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index cbab17b..78765a4 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -193,7 +193,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { ) { this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2); this.renderMovieElems(); - this.calculatePositions(); } }; @@ -955,32 +954,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.contentContainer.appendChild(endElem); this.renderMovieElems(); - this.calculatePositions(); this.loadCustomStyles(); }; - calculatePositions = (): void => { - // return; // temp - // todo: figure out why interval is needed here and do it properly - const setLeftOffsetsInterval = setInterval(() => { - this.movieElems = this.getElementsByClassName('movieElem'); - for (let i = 0; i < this.movieElems.length; i += 1) { - if (this.movieElems[i].offsetLeft === 0) { - break; - } else { - clearInterval(setLeftOffsetsInterval); - } - /* - this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`; - this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft; - this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`; - this.movieElems[i].dataset.top = this.movieElems[i].offsetTop; - this.movieElems[i].style.position = 'absolute'; - */ - } - }, 100); - }; - minimizeSeasons = (): void => { this.seasonsElemHidden = false; if (this.seasonsElem) { From e3f39623112ad1a53986c2eecf14abd551ebac7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:49:56 +0200 Subject: [PATCH 11/12] Revert "Remove: calculatePositions no longer needed" This reverts commit d67b7056058ee2a4fd918e03b8877b64e825ac49. --- dist/plex-meets-homeassistant.js | 24 ++++++++++++++++++++++++ src/plex-meets-homeassistant.ts | 24 ++++++++++++++++++++++++ 2 files changed, 48 insertions(+) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 5c97420..6648597 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -21907,6 +21907,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { (!this.maxRows || this.renderedRows < this.config.maxRows)) { this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2); this.renderMovieElems(); + this.calculatePositions(); } }; this.loadInitialData = async () => { @@ -22610,8 +22611,31 @@ class PlexMeetsHomeAssistant extends HTMLElement { endElem.className = 'clear'; this.contentContainer.appendChild(endElem); this.renderMovieElems(); + this.calculatePositions(); this.loadCustomStyles(); }; + this.calculatePositions = () => { + // return; // temp + // todo: figure out why interval is needed here and do it properly + const setLeftOffsetsInterval = setInterval(() => { + this.movieElems = this.getElementsByClassName('movieElem'); + for (let i = 0; i < this.movieElems.length; i += 1) { + if (this.movieElems[i].offsetLeft === 0) { + break; + } + else { + clearInterval(setLeftOffsetsInterval); + } + /* + this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`; + this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft; + this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`; + this.movieElems[i].dataset.top = this.movieElems[i].offsetTop; + this.movieElems[i].style.position = 'absolute'; + */ + } + }, 100); + }; this.minimizeSeasons = () => { this.seasonsElemHidden = false; if (this.seasonsElem) { diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 78765a4..cbab17b 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -193,6 +193,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { ) { this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2); this.renderMovieElems(); + this.calculatePositions(); } }; @@ -954,9 +955,32 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.contentContainer.appendChild(endElem); this.renderMovieElems(); + this.calculatePositions(); this.loadCustomStyles(); }; + calculatePositions = (): void => { + // return; // temp + // todo: figure out why interval is needed here and do it properly + const setLeftOffsetsInterval = setInterval(() => { + this.movieElems = this.getElementsByClassName('movieElem'); + for (let i = 0; i < this.movieElems.length; i += 1) { + if (this.movieElems[i].offsetLeft === 0) { + break; + } else { + clearInterval(setLeftOffsetsInterval); + } + /* + this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`; + this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft; + this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`; + this.movieElems[i].dataset.top = this.movieElems[i].offsetTop; + this.movieElems[i].style.position = 'absolute'; + */ + } + }, 100); + }; + minimizeSeasons = (): void => { this.seasonsElemHidden = false; if (this.seasonsElem) { From 0bced3b554c6b6bba73aa7150468cdc2d4c9108d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 19 Oct 2021 15:54:06 +0200 Subject: [PATCH 12/12] Fix: Edge case where incorrect width was calculated in sidebar panel --- dist/plex-meets-homeassistant.js | 47 ++++++++++++++---------------- src/plex-meets-homeassistant.ts | 50 +++++++++++++++----------------- 2 files changed, 46 insertions(+), 51 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 6648597..0f0e1d1 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -21910,6 +21910,26 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.calculatePositions(); } }; + this.resizeHandler = () => { + if (this.isVisible) { + 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.loadInitialData = async () => { this.initialDataLoaded = true; setInterval(() => { @@ -21964,24 +21984,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.renderNewElementsIfNeeded(); }); window.addEventListener('resize', () => { - if (this.isVisible) { - 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.resizeHandler(); }); if (this.card) { this.previousPageWidth = this.card.offsetWidth; @@ -22624,15 +22627,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { break; } else { + this.resizeHandler(); clearInterval(setLeftOffsetsInterval); } - /* - this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`; - this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft; - this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`; - this.movieElems[i].dataset.top = this.movieElems[i].offsetTop; - this.movieElems[i].style.position = 'absolute'; - */ } }, 100); }; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index cbab17b..e940291 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -197,6 +197,28 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }; + resizeHandler = (): void => { + if (this.isVisible) { + 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(); + } + }; + loadInitialData = async (): Promise => { this.initialDataLoaded = true; setInterval(() => { @@ -252,25 +274,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.renderNewElementsIfNeeded(); }); window.addEventListener('resize', () => { - if (this.isVisible) { - 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.resizeHandler(); }); if (this.card) { @@ -968,15 +972,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.movieElems[i].offsetLeft === 0) { break; } else { + this.resizeHandler(); clearInterval(setLeftOffsetsInterval); } - /* - this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`; - this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft; - this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`; - this.movieElems[i].dataset.top = this.movieElems[i].offsetTop; - this.movieElems[i].style.position = 'absolute'; - */ } }, 100); };