Fix: Text fields not visible in UI editor

.vscode/settings.json

@@ -7,6 +7,6 @@
 	"javascript.suggestionActions.enabled": false,
 	"yaml.format.enable": true,
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	}
 }

src/editor.ts

@@ -3,7 +3,7 @@
 import _ from 'lodash';
 import { HomeAssistant } from 'custom-card-helpers';
 import Plex from './modules/Plex';
-import { fetchEntityRegistry } from './modules/utils';
+import { fetchEntityRegistry, createTextElement } from './modules/utils';
 
 class PlexMeetsHomeAssistantEditor extends HTMLElement {
 	content: any;
@@ -16,15 +16,15 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
 
 	config: Record<string, any> = {};
 
-	ip: any = document.createElement('paper-input');
+	ip: any = createTextElement();
 
-	token: any = document.createElement('paper-input');
+	token: any = createTextElement();
 
-	port: any = document.createElement('paper-input');
+	port: any = createTextElement();
 
-	maxCount: any = document.createElement('paper-input');
+	maxCount: any = createTextElement();
 
-	maxRows: any = document.createElement('paper-input');
+	maxRows: any = createTextElement();
 
 	displayTitleMain: any = document.createElement('select');
 
@@ -34,23 +34,23 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
 
 	useShuffle: any = document.createElement('select');
 
-	minWidth: any = document.createElement('paper-input');
+	minWidth: any = createTextElement();
 
-	minEpisodeWidth: any = document.createElement('paper-input');
+	minEpisodeWidth: any = createTextElement();
 
-	minExpandedWidth: any = document.createElement('paper-input');
+	minExpandedWidth: any = createTextElement();
 
-	minExpandedHeight: any = document.createElement('paper-input');
+	minExpandedHeight: any = createTextElement();
 
-	fontSize1: any = document.createElement('paper-input');
+	fontSize1: any = createTextElement();
 
-	fontSize2: any = document.createElement('paper-input');
+	fontSize2: any = createTextElement();
 
-	fontSize3: any = document.createElement('paper-input');
+	fontSize3: any = createTextElement();
 
-	fontSize4: any = document.createElement('paper-input');
+	fontSize4: any = createTextElement();
 
-	cardTitle: any = document.createElement('paper-input');
+	cardTitle: any = createTextElement();
 
 	libraryName: any = document.createElement('select');
 
@@ -391,6 +391,10 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
 		}
 		this.content.appendChild(this.protocol);
 
+		this.ip.style.width = '100%';
+		this.ip.style.marginTop = '10px';
+		this.ip.style.marginBottom = '10px';
+
 		this.ip.label = 'Plex IP Address / Hostname';
 		if (this.config.ip) {
 			this.ip.value = this.config.ip.replace(/^https?:\/\//i, '').replace(/\/$/, '');

src/modules/utils.ts

@@ -19,6 +19,15 @@ const escapeHtml = (unsafe: any): string => {
 	return '';
 };
 
+const createTextElement = () => {
+	const textElem = document.createElement('ha-textfield');
+
+	textElem.style.width = "100%"
+	textElem.style.marginTop = "10px"
+	textElem.style.marginBottom = "10px"
+	return textElem;
+}
+
 const fetchEntityRegistry = (conn: Connection): Promise<Array<Record<string, any>>> =>
 	conn.sendMessagePromise({
 		type: 'config/entity_registry/list'
@@ -275,8 +284,7 @@ const createEpisodesView = (
 	episodeContainer.className = 'episodeContainer';
 	episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`;
 	const episodeThumbURL = plex.authorizeURL(
-		`${plex.getBasicURL()}/photo/:/transcode?width=${CSS_STYLE.episodeWidth}&height=${
+		`${plex.getBasicURL()}/photo/:/transcode?width=${CSS_STYLE.episodeWidth}&height=${CSS_STYLE.episodeHeight
-			CSS_STYLE.episodeHeight
 		}&minSize=1&upscale=1&url=${data.thumb}`
 	);
 
@@ -388,5 +396,6 @@ export {
 	fetchEntityRegistry,
 	waitUntilState,
 	getState,
-	createTrackView
+	createTrackView,
+	createTextElement
 };

src/plex-meets-homeassistant.ts

@@ -944,7 +944,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 			<table>
 				<tr>
 					<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
-				.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
+			.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
 						Directed by
 					</td>
 					<td class='metaInfoDetailsData'>
@@ -953,7 +953,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 				</tr>
 				<tr>
 					<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
-				.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
+			.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
 						Written by
 					</td>
 					<td class='metaInfoDetailsData'>
@@ -962,7 +962,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 				</tr>
 				<tr>
 					<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
-				.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
+			.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
 						Studio
 					</td>
 					<td class='metaInfoDetailsData'>
@@ -971,7 +971,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 				</tr>
 				<tr>
 					<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
-				.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
+			.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
 						Genre
 					</td>
 					<td class='metaInfoDetailsData'>
@@ -1425,24 +1425,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 					}
 
 					(this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined
-						? `<span class='minutesDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
+						? `<span class='minutesDetail' style='font-size:${this.fontSize4}px; line-height:${
-						}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
+								this.fontSize4
-							.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${Math.round(
+						  }px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
+								.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${Math.round(
 								parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000
-							)} min</span>`
+						  )} min</span>`
 						: '') +
 						(mainData.contentRating !== undefined
-							? `<span class='contentRatingDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
+							? `<span class='contentRatingDetail' style='font-size:${this.fontSize4}px; line-height:${
-							}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
+									this.fontSize4
-								.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${escapeHtml(
+							  }px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
+									.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${escapeHtml(
 									mainData.contentRating
-								)}</span>`
+							  )}</span>`
 							: '') +
 						(mainData.rating !== undefined
-							? `<span class='ratingDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
+							? `<span class='ratingDetail' style='font-size:${this.fontSize4}px; line-height:${
-							}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
+									this.fontSize4
-								.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${mainData.rating < 5 ? '&#128465;' : '&#11088;'
+							  }px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
-							}&nbsp;${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}</span>`
+									.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${
+									mainData.rating < 5 ? '&#128465;' : '&#11088;'
+							  }&nbsp;${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}</span>`
 							: '')}<div class='clear'></div>`;
 
 					const detailDesc = this.getElementsByClassName('detailDesc')[0] as HTMLElement;
@@ -1582,8 +1586,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 								fullscreenTrailer.style.visibility = 'visible';
 								contentbg.classList.add('no-transparency');
 								playingFired = true;
-								this.videoElem.style.width = `${(this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth
+								this.videoElem.style.width = `${
-									}px`;
+									(this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth
+								}px`;
 								this.videoElem.style.visibility = 'visible';
 								this.videoElem.style.top = `${top}px`;
 							}
@@ -1670,8 +1675,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 							const seasonContainer = document.createElement('div');
 							seasonContainer.className = 'seasonContainer';
 							seasonContainer.style.width = `${CSS_STYLE.width}px`;
-							const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
+							const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
-								}&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`;
+								this.minExpandedHeight
+							}&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`;
 
 							const seasonElem = document.createElement('div');
 							seasonElem.className = 'seasonElem';
@@ -2068,11 +2074,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		let thumbURL = '';
 		if (this.plex) {
 			if (_.isEqual(data.type, 'episode')) {
-				thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
+				thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
-					}&minSize=1&upscale=1&url=${data.grandparentThumb}&X-Plex-Token=${this.config.token}`;
+					this.minExpandedHeight
+				}&minSize=1&upscale=1&url=${data.grandparentThumb}&X-Plex-Token=${this.config.token}`;
 			} else {
-				thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
+				thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
-					}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
+					this.minExpandedHeight
+				}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
 			}
 		}