Fix: Text fields not visible in UI editor

main 3.6.9
Juraj Nyíri 12 months ago
parent 8d9880da72
commit 3b9c084d18

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

File diff suppressed because one or more lines are too long

@ -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(/\/$/, '');

@ -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=${
CSS_STYLE.episodeHeight
`${plex.getBasicURL()}/photo/:/transcode?width=${CSS_STYLE.episodeWidth}&height=${CSS_STYLE.episodeHeight
}&minSize=1&upscale=1&url=${data.thumb}`
);
@ -388,5 +396,6 @@ export {
fetchEntityRegistry,
waitUntilState,
getState,
createTrackView
createTrackView,
createTextElement
};

@ -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
}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(
? `<span class='minutesDetail' 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; 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
}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(
? `<span class='contentRatingDetail' 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; 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
}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;'>${mainData.rating < 5 ? '&#128465;' : '&#11088;'
}&nbsp;${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}</span>`
? `<span class='ratingDetail' 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; 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
}px`;
this.videoElem.style.width = `${
(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
}&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`;
const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
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
}&minSize=1&upscale=1&url=${data.grandparentThumb}&X-Plex-Token=${this.config.token}`;
thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
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
}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
this.minExpandedHeight
}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
}
}

Loading…
Cancel
Save