From 12cba398b40c137afb8cf1f73a983f614db228a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= <jnyiri@sk.ibm.com>
Date: Fri, 11 Jun 2021 15:05:11 +0200
Subject: [PATCH] Add: Fade in for contentArt

---
 dist/plex-meets-homeassistant.js | 58 ++++++++++++++++++++++++++++++--
 src/modules/style.ts             | 53 +++++++++++++++++++++++++++++
 src/plex-meets-homeassistant.ts  |  6 ++--
 3 files changed, 113 insertions(+), 4 deletions(-)

diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js
index 3e912c8..d704e3d 100644
--- a/dist/plex-meets-homeassistant.js
+++ b/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');
                     }
                 }
diff --git a/src/modules/style.ts b/src/modules/style.ts
index 6c60bdc..9f7f6cf 100644
--- a/src/modules/style.ts
+++ b/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;
diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts
index 943a485..5cf5e21 100644
--- a/src/plex-meets-homeassistant.ts
+++ b/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');
 				}
 			}