From 6ef18a5f09e622d3d9223ed6cd5861a1be40e910 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:43:50 +0200
Subject: [PATCH] Update: Opening and closing now works in horizontal

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

diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js
index 1eddf8f..c815b85 100644
--- a/dist/plex-meets-homeassistant.js
+++ b/dist/plex-meets-homeassistant.js
@@ -22295,11 +22295,19 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                         this.movieElems[i].style.width = `${CSS_STYLE.width}px`;
                         this.movieElems[i].style.height = `${CSS_STYLE.height}px`;
                     }
-                    this.movieElems[i].style['z-index'] = 1;
-                    this.movieElems[i].style.position = 'relative';
-                    this.movieElems[i].style.left = `0px`;
-                    this.movieElems[i].style.top = `0px`;
-                    this.movieElems[i].dataset.clicked = false;
+                    this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`;
+                    this.movieElems[i].style.top = `${this.movieElems[i].dataset.top}px`;
+                    setTimeout(() => {
+                        this.movieElems[i].style.transition = '0s';
+                        this.movieElems[i].style['z-index'] = 1;
+                        this.movieElems[i].style.position = 'relative';
+                        this.movieElems[i].style.left = `0px`;
+                        this.movieElems[i].style.top = `0px`;
+                        this.movieElems[i].dataset.clicked = false;
+                        setTimeout(() => {
+                            this.movieElems[i].style.transition = '0.5s';
+                        }, 10);
+                    }, 510);
                 }
             }
             this.hideSeasons();
@@ -22906,11 +22914,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                 this.minimizeAll();
                 this.activeMovieElem = undefined;
                 this.hideDetails();
-                if (lodash.isEqual(movieElem.style.width, movieElem.style.height)) {
+                /*
+                if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
                     movieElemLocal.style.width = `${CSS_STYLE.width}px`;
                     movieElemLocal.style.height = `${CSS_STYLE.width}px`;
-                }
-                else {
+                } else {
                     movieElemLocal.style.width = `${CSS_STYLE.width}px`;
                     movieElemLocal.style.height = `${CSS_STYLE.height}px`;
                 }
@@ -22918,6 +22926,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                 movieElemLocal.style.position = 'relative';
                 movieElemLocal.style.top = `0px`;
                 movieElemLocal.style.left = `0px`;
+                */
                 setTimeout(() => {
                     movieElemLocal.dataset.clicked = 'false';
                 }, 500);
@@ -22929,6 +22938,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                 movieElemLocal.style.left = `${movieElemLocal.offsetLeft - this.content.scrollLeft}px`;
                 movieElemLocal.style.top = `${movieElemLocal.offsetTop}px`;
                 movieElemLocal.style.position = 'absolute';
+                movieElemLocal.dataset.left = `${movieElemLocal.offsetLeft}`;
+                movieElemLocal.dataset.top = `${movieElemLocal.offsetTop}`;
                 movieElemLocal.style.zIndex = '3';
                 setTimeout(() => {
                     movieElemLocal.style.transition = '0.5s';
diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts
index 43e948f..b6c1738 100644
--- a/src/plex-meets-homeassistant.ts
+++ b/src/plex-meets-homeassistant.ts
@@ -1027,12 +1027,20 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 					this.movieElems[i].style.width = `${CSS_STYLE.width}px`;
 					this.movieElems[i].style.height = `${CSS_STYLE.height}px`;
 				}
+				this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`;
+				this.movieElems[i].style.top = `${this.movieElems[i].dataset.top}px`;
 
-				this.movieElems[i].style['z-index'] = 1;
-				this.movieElems[i].style.position = 'relative';
-				this.movieElems[i].style.left = `0px`;
-				this.movieElems[i].style.top = `0px`;
-				this.movieElems[i].dataset.clicked = false;
+				setTimeout(() => {
+					this.movieElems[i].style.transition = '0s';
+					this.movieElems[i].style['z-index'] = 1;
+					this.movieElems[i].style.position = 'relative';
+					this.movieElems[i].style.left = `0px`;
+					this.movieElems[i].style.top = `0px`;
+					this.movieElems[i].dataset.clicked = false;
+					setTimeout(() => {
+						this.movieElems[i].style.transition = '0.5s';
+					}, 10);
+				}, 510);
 			}
 		}
 		this.hideSeasons();
@@ -1704,6 +1712,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 			this.minimizeAll();
 			this.activeMovieElem = undefined;
 			this.hideDetails();
+			/*
 			if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
 				movieElemLocal.style.width = `${CSS_STYLE.width}px`;
 				movieElemLocal.style.height = `${CSS_STYLE.width}px`;
@@ -1715,6 +1724,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 			movieElemLocal.style.position = 'relative';
 			movieElemLocal.style.top = `0px`;
 			movieElemLocal.style.left = `0px`;
+			*/
 
 			setTimeout(() => {
 				movieElemLocal.dataset.clicked = 'false';
@@ -1728,6 +1738,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 			movieElemLocal.style.left = `${movieElemLocal.offsetLeft - this.content.scrollLeft}px`;
 			movieElemLocal.style.top = `${movieElemLocal.offsetTop}px`;
 			movieElemLocal.style.position = 'absolute';
+			movieElemLocal.dataset.left = `${movieElemLocal.offsetLeft}`;
+			movieElemLocal.dataset.top = `${movieElemLocal.offsetTop}`;
 			movieElemLocal.style.zIndex = '3';
 			setTimeout(() => {
 				movieElemLocal.style.transition = '0.5s';