From 5e6c7be25a82412bdfeed1b3d2e1e4c49217b637 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= <jnyiri@sk.ibm.com>
Date: Fri, 1 Oct 2021 17:24:50 +0200
Subject: [PATCH] Update: Opening from horizontal animation

---
 dist/plex-meets-homeassistant.js | 34 +++++++++++++++++-------------
 src/plex-meets-homeassistant.ts  | 36 ++++++++++++++++++++------------
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js
index 354663b..1eddf8f 100644
--- a/dist/plex-meets-homeassistant.js
+++ b/dist/plex-meets-homeassistant.js
@@ -22925,22 +22925,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
             }
             else {
                 const top = this.getTop();
-                this.showDetails(this.activeMovieElemData);
-                this.showBackground();
-                if (lodash.isEqual(movieElem.style.width, movieElem.style.height)) {
-                    movieElemLocal.style.width = `${this.minExpandedWidth}px`;
-                    movieElemLocal.style.height = `${this.minExpandedWidth}px`;
-                }
-                else {
-                    movieElemLocal.style.width = `${this.minExpandedWidth}px`;
-                    movieElemLocal.style.height = `${this.minExpandedHeight}px`;
-                }
+                movieElemLocal.style.transition = '0s';
+                movieElemLocal.style.left = `${movieElemLocal.offsetLeft - this.content.scrollLeft}px`;
+                movieElemLocal.style.top = `${movieElemLocal.offsetTop}px`;
                 movieElemLocal.style.position = 'absolute';
                 movieElemLocal.style.zIndex = '3';
-                movieElemLocal.style.left = '16px';
-                movieElemLocal.style.top = `${top + 16}px`;
-                movieElemLocal.dataset.clicked = 'true';
-                this.activeMovieElem = movieElemLocal;
+                setTimeout(() => {
+                    movieElemLocal.style.transition = '0.5s';
+                    this.showDetails(this.activeMovieElemData);
+                    this.showBackground();
+                    if (lodash.isEqual(movieElem.style.width, movieElem.style.height)) {
+                        movieElemLocal.style.width = `${this.minExpandedWidth}px`;
+                        movieElemLocal.style.height = `${this.minExpandedWidth}px`;
+                    }
+                    else {
+                        movieElemLocal.style.width = `${this.minExpandedWidth}px`;
+                        movieElemLocal.style.height = `${this.minExpandedHeight}px`;
+                    }
+                    movieElemLocal.style.left = '16px';
+                    movieElemLocal.style.top = `${top + 16}px`;
+                    movieElemLocal.dataset.clicked = 'true';
+                    this.activeMovieElem = movieElemLocal;
+                }, 1);
             }
         };
         this.getTop = () => {
diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts
index 23fee2f..43e948f 100644
--- a/src/plex-meets-homeassistant.ts
+++ b/src/plex-meets-homeassistant.ts
@@ -1723,21 +1723,31 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 			this.hideBackground();
 		} else {
 			const top = this.getTop();
-			this.showDetails(this.activeMovieElemData);
-			this.showBackground();
-			if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
-				movieElemLocal.style.width = `${this.minExpandedWidth}px`;
-				movieElemLocal.style.height = `${this.minExpandedWidth}px`;
-			} else {
-				movieElemLocal.style.width = `${this.minExpandedWidth}px`;
-				movieElemLocal.style.height = `${this.minExpandedHeight}px`;
-			}
+
+			movieElemLocal.style.transition = '0s';
+			movieElemLocal.style.left = `${movieElemLocal.offsetLeft - this.content.scrollLeft}px`;
+			movieElemLocal.style.top = `${movieElemLocal.offsetTop}px`;
 			movieElemLocal.style.position = 'absolute';
 			movieElemLocal.style.zIndex = '3';
-			movieElemLocal.style.left = '16px';
-			movieElemLocal.style.top = `${top + 16}px`;
-			movieElemLocal.dataset.clicked = 'true';
-			this.activeMovieElem = movieElemLocal;
+			setTimeout(() => {
+				movieElemLocal.style.transition = '0.5s';
+
+				this.showDetails(this.activeMovieElemData);
+				this.showBackground();
+				if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
+					movieElemLocal.style.width = `${this.minExpandedWidth}px`;
+					movieElemLocal.style.height = `${this.minExpandedWidth}px`;
+				} else {
+					movieElemLocal.style.width = `${this.minExpandedWidth}px`;
+					movieElemLocal.style.height = `${this.minExpandedHeight}px`;
+				}
+
+				movieElemLocal.style.left = '16px';
+				movieElemLocal.style.top = `${top + 16}px`;
+
+				movieElemLocal.dataset.clicked = 'true';
+				this.activeMovieElem = movieElemLocal;
+			}, 1);
 		}
 	};