Add: Mark for episodes left to be seen

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';

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;

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';