Add: Fade in for contentArt

dist/plex-meets-homeassistant.js

@@ -19691,6 +19691,11 @@ style.textContent = css `
 		top: 0;
 		background-size: cover;
 		display: none;
+		-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+		-moz-animation: fadein 0.5s; /* Firefox < 16 */
+		-ms-animation: fadein 0.5s; /* Internet Explorer */
+		-o-animation: fadein 0.5s; /* Opera < 12.1 */
+		animation: fadein 0.5s;
 	}
 	.yearElem {
 		color: hsla(0, 0%, 100%, 0.45);
@@ -19719,6 +19724,54 @@ style.textContent = css `
 		top: -14px;
 		transform: rotate(45deg);
 	}
+	@keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Firefox < 16 */
+	@-moz-keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Safari, Chrome and Opera > 12.1 */
+	@-webkit-keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Internet Explorer */
+	@-ms-keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Opera < 12.1 */
+	@-o-keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
 	.toViewSeason {
 		position: relative;
 		top: 5px;
@@ -20672,14 +20725,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                             }
                         });
                     }
-                    else {
+                    else if (!lodash.isEmpty(art)) {
                         const contentArt = this.getElementsByClassName('contentArt')[0];
                         const contentbg = this.getElementsByClassName('contentbg')[0];
                         contentArt.style.width = `${window.innerWidth}px`;
                         contentArt.style.height = `${window.innerHeight}px`;
-                        contentArt.style.display = 'block';
                         contentArt.style.backgroundImage = `url('${art}')`;
                         contentArt.style.top = `${top - 8}px`;
+                        contentArt.style.transition = '0.5s';
+                        contentArt.style.display = 'block';
                         contentbg.classList.add('no-transparency');
                     }
                 }

src/modules/style.ts

@@ -190,6 +190,11 @@ style.textContent = css`
 		top: 0;
 		background-size: cover;
 		display: none;
+		-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+		-moz-animation: fadein 0.5s; /* Firefox < 16 */
+		-ms-animation: fadein 0.5s; /* Internet Explorer */
+		-o-animation: fadein 0.5s; /* Opera < 12.1 */
+		animation: fadein 0.5s;
 	}
 	.yearElem {
 		color: hsla(0, 0%, 100%, 0.45);
@@ -218,6 +223,54 @@ style.textContent = css`
 		top: -14px;
 		transform: rotate(45deg);
 	}
+	@keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Firefox < 16 */
+	@-moz-keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Safari, Chrome and Opera > 12.1 */
+	@-webkit-keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Internet Explorer */
+	@-ms-keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Opera < 12.1 */
+	@-o-keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
 	.toViewSeason {
 		position: relative;
 		top: 5px;

src/plex-meets-homeassistant.ts

@@ -916,14 +916,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 							this.videoElem.style.top = `${top}px`;
 						}
 					});
-				} else {
+				} else if (!_.isEmpty(art)) {
 					const contentArt = this.getElementsByClassName('contentArt')[0] as HTMLElement;
 					const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;
 					contentArt.style.width = `${window.innerWidth}px`;
 					contentArt.style.height = `${window.innerHeight}px`;
-					contentArt.style.display = 'block';
 					contentArt.style.backgroundImage = `url('${art}')`;
 					contentArt.style.top = `${top - 8}px`;
+					contentArt.style.transition = '0.5s';
+
+					contentArt.style.display = 'block';
 					contentbg.classList.add('no-transparency');
 				}
 			}