From e164c080da8356159a8feb8faafe545aca8e288a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= <jnyiri@sk.ibm.com>
Date: Sun, 4 Jul 2021 15:43:34 +0200
Subject: [PATCH] Update: Episodes span the whole width

---
 dist/plex-meets-homeassistant.js | 11 +++++++----
 src/const.ts                     |  4 ++--
 src/modules/style.ts             |  4 ++--
 src/plex-meets-homeassistant.ts  |  5 +++++
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js
index 6dae45f..eebd9ca 100644
--- a/dist/plex-meets-homeassistant.js
+++ b/dist/plex-meets-homeassistant.js
@@ -17200,8 +17200,8 @@ const CSS_STYLE = {
     minimumWidth: 138,
     expandedWidth: 220,
     expandedHeight: 324,
-    episodeWidth: 300,
-    episodeHeight: 169
+    episodeRatio: 0.563,
+    minimumEpisodeWidth: 300
 };
 const supported = {
     kodi: ['movie', 'episode'],
@@ -19550,7 +19550,7 @@ style.textContent = css `
 		z-index: 5;
 		position: absolute;
 		top: ${CSS_STYLE.expandedHeight + 16}px;
-		width: calc(100% - 32px);
+		width: calc(100% - 22px);
 		left: 0;
 		padding: 16px;
 		display: none;
@@ -19847,7 +19847,7 @@ style.textContent = css `
 	.episodeContainer {
 		position: relative;
 		float: left;
-		margin-right: 16px;
+		margin-right: 10px;
 		margin-bottom: 15px;
 		transition: 0.5s;
 	}
@@ -20270,6 +20270,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                 const postersInRow = Math.floor(areaSize / CSS_STYLE.minimumWidth);
                 CSS_STYLE.width = areaSize / postersInRow - marginRight;
                 CSS_STYLE.height = CSS_STYLE.width * CSS_STYLE.ratio;
+                const episodesInRow = Math.floor(areaSize / CSS_STYLE.minimumEpisodeWidth);
+                CSS_STYLE.episodeWidth = Math.floor(areaSize / episodesInRow - marginRight);
+                CSS_STYLE.episodeHeight = Math.round(CSS_STYLE.episodeWidth * CSS_STYLE.episodeRatio);
             }
             this.renderedItems = 0;
             this.columnsCount = 0;
diff --git a/src/const.ts b/src/const.ts
index be0a9f3..12de975 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -4,8 +4,8 @@ const CSS_STYLE: any = {
 	minimumWidth: 138,
 	expandedWidth: 220,
 	expandedHeight: 324,
-	episodeWidth: 300,
-	episodeHeight: 169
+	episodeRatio: 0.563,
+	minimumEpisodeWidth: 300
 };
 
 const supported: any = {
diff --git a/src/modules/style.ts b/src/modules/style.ts
index ddd23ee..ae1462e 100644
--- a/src/modules/style.ts
+++ b/src/modules/style.ts
@@ -35,7 +35,7 @@ style.textContent = css`
 		z-index: 5;
 		position: absolute;
 		top: ${CSS_STYLE.expandedHeight + 16}px;
-		width: calc(100% - 32px);
+		width: calc(100% - 22px);
 		left: 0;
 		padding: 16px;
 		display: none;
@@ -332,7 +332,7 @@ style.textContent = css`
 	.episodeContainer {
 		position: relative;
 		float: left;
-		margin-right: 16px;
+		margin-right: 10px;
 		margin-bottom: 15px;
 		transition: 0.5s;
 	}
diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts
index 9a295ff..b9a0b0b 100644
--- a/src/plex-meets-homeassistant.ts
+++ b/src/plex-meets-homeassistant.ts
@@ -400,6 +400,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 			const postersInRow = Math.floor(areaSize / CSS_STYLE.minimumWidth);
 			CSS_STYLE.width = areaSize / postersInRow - marginRight;
 			CSS_STYLE.height = CSS_STYLE.width * CSS_STYLE.ratio;
+
+			const episodesInRow = Math.floor(areaSize / CSS_STYLE.minimumEpisodeWidth);
+
+			CSS_STYLE.episodeWidth = Math.floor(areaSize / episodesInRow - marginRight);
+			CSS_STYLE.episodeHeight = Math.round(CSS_STYLE.episodeWidth * CSS_STYLE.episodeRatio);
 		}
 
 		this.renderedItems = 0;