Skip to content

Commit

Permalink
Fix: Text fields not visible in UI editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@JurajNyiri
JurajNyiri committed Jan 12, 2024
1 parent 8d9880d commit 3b9c084
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 48 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
"javascript.suggestionActions.enabled": false,
"yaml.format.enable": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
}
}
10 changes: 5 additions & 5 deletions dist/plex-meets-homeassistant.js
View file

Large diffs are not rendered by default.

34 changes: 19 additions & 15 deletions src/editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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');

Expand All @@ -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');

Expand Down Expand Up @@ -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(/\/$/, '');
Expand Down
15 changes: 12 additions & 3 deletions src/modules/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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}`
);

Expand Down Expand Up @@ -388,5 +396,6 @@ export {
fetchEntityRegistry,
waitUntilState,
getState,
createTrackView
createTrackView,
createTextElement
};
56 changes: 32 additions & 24 deletions src/plex-meets-homeassistant.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand All @@ -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'>
Expand All @@ -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'>
Expand All @@ -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'>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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`;
}
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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}`;
}
}

Expand Down

0 comments on commit 3b9c084

Please sign in to comment.