Fix: Text fields not visible in UI editor

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

@ -7,6 +7,6 @@
"javascript.suggestionActions.enabled": false, "javascript.suggestionActions.enabled": false,
"yaml.format.enable": true, "yaml.format.enable": true,
"editor.codeActionsOnSave": { "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 _ from 'lodash';
import { HomeAssistant } from 'custom-card-helpers'; import { HomeAssistant } from 'custom-card-helpers';
import Plex from './modules/Plex'; import Plex from './modules/Plex';
import { fetchEntityRegistry } from './modules/utils'; import { fetchEntityRegistry, createTextElement } from './modules/utils';
class PlexMeetsHomeAssistantEditor extends HTMLElement { class PlexMeetsHomeAssistantEditor extends HTMLElement {
content: any; content: any;
@ -16,15 +16,15 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
config: Record<string, any> = {}; 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'); displayTitleMain: any = document.createElement('select');
@ -34,23 +34,23 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
useShuffle: any = document.createElement('select'); 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'); libraryName: any = document.createElement('select');
@ -391,6 +391,10 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
} }
this.content.appendChild(this.protocol); 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'; this.ip.label = 'Plex IP Address / Hostname';
if (this.config.ip) { if (this.config.ip) {
this.ip.value = this.config.ip.replace(/^https?:\/\//i, '').replace(/\/$/, ''); this.ip.value = this.config.ip.replace(/^https?:\/\//i, '').replace(/\/$/, '');

@ -19,6 +19,15 @@ const escapeHtml = (unsafe: any): string => {
return ''; 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>>> => const fetchEntityRegistry = (conn: Connection): Promise<Array<Record<string, any>>> =>
conn.sendMessagePromise({ conn.sendMessagePromise({
type: 'config/entity_registry/list' type: 'config/entity_registry/list'
@ -275,8 +284,7 @@ const createEpisodesView = (
episodeContainer.className = 'episodeContainer'; episodeContainer.className = 'episodeContainer';
episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`; episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`;
const episodeThumbURL = plex.authorizeURL( 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}` }&minSize=1&upscale=1&url=${data.thumb}`
); );
@ -388,5 +396,6 @@ export {
fetchEntityRegistry, fetchEntityRegistry,
waitUntilState, waitUntilState,
getState, getState,
createTrackView createTrackView,
createTextElement
}; };

@ -944,7 +944,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
<table> <table>
<tr> <tr>
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this <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 Directed by
</td> </td>
<td class='metaInfoDetailsData'> <td class='metaInfoDetailsData'>
@ -953,7 +953,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
</tr> </tr>
<tr> <tr>
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this <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 Written by
</td> </td>
<td class='metaInfoDetailsData'> <td class='metaInfoDetailsData'>
@ -962,7 +962,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
</tr> </tr>
<tr> <tr>
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this <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 Studio
</td> </td>
<td class='metaInfoDetailsData'> <td class='metaInfoDetailsData'>
@ -971,7 +971,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
</tr> </tr>
<tr> <tr>
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this <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 Genre
</td> </td>
<td class='metaInfoDetailsData'> <td class='metaInfoDetailsData'>
@ -1425,24 +1425,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
(this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined (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 parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000
)} min</span>` )} min</span>`
: '') + : '') +
(mainData.contentRating !== undefined (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 mainData.contentRating
)}</span>` )}</span>`
: '') + : '') +
(mainData.rating !== undefined (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>`; : '')}<div class='clear'></div>`;
const detailDesc = this.getElementsByClassName('detailDesc')[0] as HTMLElement; const detailDesc = this.getElementsByClassName('detailDesc')[0] as HTMLElement;
@ -1582,8 +1586,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
fullscreenTrailer.style.visibility = 'visible'; fullscreenTrailer.style.visibility = 'visible';
contentbg.classList.add('no-transparency'); contentbg.classList.add('no-transparency');
playingFired = true; 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.visibility = 'visible';
this.videoElem.style.top = `${top}px`; this.videoElem.style.top = `${top}px`;
} }
@ -1670,8 +1675,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const seasonContainer = document.createElement('div'); const seasonContainer = document.createElement('div');
seasonContainer.className = 'seasonContainer'; seasonContainer.className = 'seasonContainer';
seasonContainer.style.width = `${CSS_STYLE.width}px`; 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'); const seasonElem = document.createElement('div');
seasonElem.className = 'seasonElem'; seasonElem.className = 'seasonElem';
@ -2068,11 +2074,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
let thumbURL = ''; let thumbURL = '';
if (this.plex) { if (this.plex) {
if (_.isEqual(data.type, 'episode')) { 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 { } 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}`;
} }
} }

Loading…
Cancel
Save