diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 4959ded..611b4e3 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19415,6 +19415,19 @@ style.textContent = css ` color: hsla(0, 0%, 100%, 0.45); position: relative; } + .toViewSeason { + position: relative; + top: 5px; + right: 5px; + float: right; + display: block; + border-radius: 5px; + background: #e5a00d; + font-weight: bold; + color: black; + padding: 1px 6px; + transition: 0.5s; + } .seasonTitleElem { text-overflow: ellipsis; white-space: nowrap; @@ -19495,9 +19508,6 @@ style.textContent = css ` width: 100%; height: 100%; transition: 0.5s; - display: flex; - align-items: center; - justify-content: center; } .interactiveArea:hover { background: rgba(0, 0, 0, 0.3); @@ -19771,6 +19781,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { const seasonTitleElem = child.children[1]; const seasonEpisodesCount = child.children[2]; seasonElem.style.display = 'block'; + if (typeof seasonElem.children[0].children[0] !== 'undefined') { + seasonElem.children[0].children[0].style.display = 'block'; + } const moveElem = (elem) => { const seasonElemLocal = elem; seasonElemLocal.style.marginTop = '0'; @@ -19948,6 +19961,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { } const interactiveArea = document.createElement('div'); interactiveArea.className = 'interactiveArea'; + if (seasonData.leafCount - seasonData.viewedLeafCount > 0) { + const toViewElem = document.createElement('div'); + toViewElem.className = 'toViewSeason'; + toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString(); + interactiveArea.appendChild(toViewElem); + } if (this.playController && this.playController.isPlaySupported(seasonData)) { const playButton = this.getPlayButton(); playButton.addEventListener('click', event => { @@ -19977,6 +19996,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { }, 500); if (this.activeMovieElem) { if (seasonElem.dataset.clicked === 'false') { + if (typeof seasonElem.children[0].children[0] !== 'undefined') { + seasonElem.children[0].children[0].style.display = 'none'; + } seasonElem.dataset.clicked = 'true'; this.activeMovieElem.style.top = `${top - 1000}px`; this.scrollDownInactiveSeasons(); diff --git a/src/modules/style.ts b/src/modules/style.ts index 152d438..981a055 100644 --- a/src/modules/style.ts +++ b/src/modules/style.ts @@ -168,6 +168,19 @@ style.textContent = css` color: hsla(0, 0%, 100%, 0.45); position: relative; } + .toViewSeason { + position: relative; + top: 5px; + right: 5px; + float: right; + display: block; + border-radius: 5px; + background: #e5a00d; + font-weight: bold; + color: black; + padding: 1px 6px; + transition: 0.5s; + } .seasonTitleElem { text-overflow: ellipsis; white-space: nowrap; @@ -248,9 +261,6 @@ style.textContent = css` width: 100%; height: 100%; transition: 0.5s; - display: flex; - align-items: center; - justify-content: center; } .interactiveArea:hover { background: rgba(0, 0, 0, 0.3); diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 9589ec4..85eeaaf 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -304,6 +304,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { const seasonEpisodesCount = (child as HTMLElement).children[2] as HTMLElement; seasonElem.style.display = 'block'; + if (typeof seasonElem.children[0].children[0] !== 'undefined') { + (seasonElem.children[0].children[0] as HTMLElement).style.display = 'block'; + } + const moveElem = (elem: HTMLElement): void => { const seasonElemLocal = elem; seasonElemLocal.style.marginTop = '0'; @@ -497,6 +501,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { const interactiveArea = document.createElement('div'); interactiveArea.className = 'interactiveArea'; + if (seasonData.leafCount - seasonData.viewedLeafCount > 0) { + const toViewElem = document.createElement('div'); + toViewElem.className = 'toViewSeason'; + toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString(); + interactiveArea.appendChild(toViewElem); + } if (this.playController && this.playController.isPlaySupported(seasonData)) { const playButton = this.getPlayButton(); @@ -531,6 +541,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { }, 500); if (this.activeMovieElem) { if (seasonElem.dataset.clicked === 'false') { + if (typeof seasonElem.children[0].children[0] !== 'undefined') { + (seasonElem.children[0].children[0] as HTMLElement).style.display = 'none'; + } + seasonElem.dataset.clicked = 'true'; this.activeMovieElem.style.top = `${top - 1000}px`;