diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 611b4e3..6c34d24 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19415,6 +19415,20 @@ style.textContent = css ` color: hsla(0, 0%, 100%, 0.45); position: relative; } + .toViewEpisode { + position: relative; + height: 28px; + width: 28px; + float: right; + display: block; + background: #e5a00d; + font-weight: bold; + color: black; + transition: 0.5s; + right: -14px; + top: -14px; + transform: rotate(45deg); + } .toViewSeason { position: relative; top: 5px; @@ -19480,6 +19494,7 @@ style.textContent = css ` background-size: contain; border-radius: 5px; transition: 0.5s; + overflow: hidden; } .seasonElem { background-repeat: no-repeat; @@ -19517,9 +19532,12 @@ style.textContent = css ` height: 40px; border: 2px solid white; border-radius: 100%; - margin: auto; cursor: pointer; transition: 0.2s; + margin: 0 auto; + display: block; + position: relative; + top: calc(50% - 20px); } button[name='playButton']:hover { background: orange !important; @@ -20035,6 +20053,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { episodeElem.style.height = `${CSS_STYLE.episodeHeight}px`; episodeElem.style.backgroundImage = `url('${episodeThumbURL}')`; episodeElem.dataset.clicked = 'false'; + if (typeof episodeData.lastViewedAt === 'undefined') { + const toViewElem = document.createElement('div'); + toViewElem.className = 'toViewEpisode'; + episodeElem.appendChild(toViewElem); + } if (this.playController && this.playController.isPlaySupported(episodeData)) { const episodeInteractiveArea = document.createElement('div'); episodeInteractiveArea.className = 'interactiveArea'; diff --git a/src/modules/style.ts b/src/modules/style.ts index 981a055..ad717fe 100644 --- a/src/modules/style.ts +++ b/src/modules/style.ts @@ -168,6 +168,20 @@ style.textContent = css` color: hsla(0, 0%, 100%, 0.45); position: relative; } + .toViewEpisode { + position: relative; + height: 28px; + width: 28px; + float: right; + display: block; + background: #e5a00d; + font-weight: bold; + color: black; + transition: 0.5s; + right: -14px; + top: -14px; + transform: rotate(45deg); + } .toViewSeason { position: relative; top: 5px; @@ -233,6 +247,7 @@ style.textContent = css` background-size: contain; border-radius: 5px; transition: 0.5s; + overflow: hidden; } .seasonElem { background-repeat: no-repeat; @@ -270,9 +285,12 @@ style.textContent = css` height: 40px; border: 2px solid white; border-radius: 100%; - margin: auto; cursor: pointer; transition: 0.2s; + margin: 0 auto; + display: block; + position: relative; + top: calc(50% - 20px); } button[name='playButton']:hover { background: orange !important; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 85eeaaf..66445da 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -588,6 +588,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { episodeElem.style.backgroundImage = `url('${episodeThumbURL}')`; episodeElem.dataset.clicked = 'false'; + if (typeof episodeData.lastViewedAt === 'undefined') { + const toViewElem = document.createElement('div'); + toViewElem.className = 'toViewEpisode'; + episodeElem.appendChild(toViewElem); + } + if (this.playController && this.playController.isPlaySupported(episodeData)) { const episodeInteractiveArea = document.createElement('div'); episodeInteractiveArea.className = 'interactiveArea';