Skip to content

Commit 3b9c084

Browse files
JurajNyiriJurajNyiri
committed
Fix: Text fields not visible in UI editor
1 parent 8d9880d commit 3b9c084

File tree

5 files changed

+69
-48
lines changed

5 files changed

+69
-48
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
"javascript.suggestionActions.enabled": false,
88
"yaml.format.enable": true,
99
"editor.codeActionsOnSave": {
10-
"source.fixAll.eslint": true
10+
"source.fixAll.eslint": "explicit"
1111
}
1212
}

‎dist/plex-meets-homeassistant.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/editor.ts‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import _ from 'lodash';
44
import { HomeAssistant } from 'custom-card-helpers';
55
import Plex from './modules/Plex';
6-
import { fetchEntityRegistry } from './modules/utils';
6+
import { fetchEntityRegistry, createTextElement } from './modules/utils';
77

88
class PlexMeetsHomeAssistantEditor extends HTMLElement {
99
content: any;
@@ -16,15 +16,15 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
1616

1717
config: Record<string, any> = {};
1818

19-
ip: any = document.createElement('paper-input');
19+
ip: any = createTextElement();
2020

21-
token: any = document.createElement('paper-input');
21+
token: any = createTextElement();
2222

23-
port: any = document.createElement('paper-input');
23+
port: any = createTextElement();
2424

25-
maxCount: any = document.createElement('paper-input');
25+
maxCount: any = createTextElement();
2626

27-
maxRows: any = document.createElement('paper-input');
27+
maxRows: any = createTextElement();
2828

2929
displayTitleMain: any = document.createElement('select');
3030

@@ -34,23 +34,23 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
3434

3535
useShuffle: any = document.createElement('select');
3636

37-
minWidth: any = document.createElement('paper-input');
37+
minWidth: any = createTextElement();
3838

39-
minEpisodeWidth: any = document.createElement('paper-input');
39+
minEpisodeWidth: any = createTextElement();
4040

41-
minExpandedWidth: any = document.createElement('paper-input');
41+
minExpandedWidth: any = createTextElement();
4242

43-
minExpandedHeight: any = document.createElement('paper-input');
43+
minExpandedHeight: any = createTextElement();
4444

45-
fontSize1: any = document.createElement('paper-input');
45+
fontSize1: any = createTextElement();
4646

47-
fontSize2: any = document.createElement('paper-input');
47+
fontSize2: any = createTextElement();
4848

49-
fontSize3: any = document.createElement('paper-input');
49+
fontSize3: any = createTextElement();
5050

51-
fontSize4: any = document.createElement('paper-input');
51+
fontSize4: any = createTextElement();
5252

53-
cardTitle: any = document.createElement('paper-input');
53+
cardTitle: any = createTextElement();
5454

5555
libraryName: any = document.createElement('select');
5656

@@ -391,6 +391,10 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
391391
}
392392
this.content.appendChild(this.protocol);
393393

394+
this.ip.style.width = '100%';
395+
this.ip.style.marginTop = '10px';
396+
this.ip.style.marginBottom = '10px';
397+
394398
this.ip.label = 'Plex IP Address / Hostname';
395399
if (this.config.ip) {
396400
this.ip.value = this.config.ip.replace(/^https?:\/\//i, '').replace(/\/$/, '');

‎src/modules/utils.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@ const escapeHtml = (unsafe: any): string => {
1919
return '';
2020
};
2121

22+
const createTextElement = () => {
23+
const textElem = document.createElement('ha-textfield');
24+
25+
textElem.style.width = "100%"
26+
textElem.style.marginTop = "10px"
27+
textElem.style.marginBottom = "10px"
28+
return textElem;
29+
}
30+
2231
const fetchEntityRegistry = (conn: Connection): Promise<Array<Record<string, any>>> =>
2332
conn.sendMessagePromise({
2433
type: 'config/entity_registry/list'
@@ -275,8 +284,7 @@ const createEpisodesView = (
275284
episodeContainer.className = 'episodeContainer';
276285
episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`;
277286
const episodeThumbURL = plex.authorizeURL(
278-
`${plex.getBasicURL()}/photo/:/transcode?width=${CSS_STYLE.episodeWidth}&height=${
279-
CSS_STYLE.episodeHeight
287+
`${plex.getBasicURL()}/photo/:/transcode?width=${CSS_STYLE.episodeWidth}&height=${CSS_STYLE.episodeHeight
280288
}&minSize=1&upscale=1&url=${data.thumb}`
281289
);
282290

@@ -388,5 +396,6 @@ export {
388396
fetchEntityRegistry,
389397
waitUntilState,
390398
getState,
391-
createTrackView
399+
createTrackView,
400+
createTextElement
392401
};

‎src/plex-meets-homeassistant.ts‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -944,7 +944,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
944944
<table>
945945
<tr>
946946
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
947-
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
947+
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
948948
Directed by
949949
</td>
950950
<td class='metaInfoDetailsData'>
@@ -953,7 +953,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
953953
</tr>
954954
<tr>
955955
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
956-
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
956+
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
957957
Written by
958958
</td>
959959
<td class='metaInfoDetailsData'>
@@ -962,7 +962,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
962962
</tr>
963963
<tr>
964964
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
965-
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
965+
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
966966
Studio
967967
</td>
968968
<td class='metaInfoDetailsData'>
@@ -971,7 +971,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
971971
</tr>
972972
<tr>
973973
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
974-
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
974+
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
975975
Genre
976976
</td>
977977
<td class='metaInfoDetailsData'>
@@ -1425,24 +1425,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
14251425
}
14261426

14271427
(this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined
1428-
? `<span class='minutesDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
1429-
}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
1430-
.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${Math.round(
1428+
? `<span class='minutesDetail' style='font-size:${this.fontSize4}px; line-height:${
1429+
this.fontSize4
1430+
}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
1431+
.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${Math.round(
14311432
parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000
1432-
)} min</span>`
1433+
)} min</span>`
14331434
: '') +
14341435
(mainData.contentRating !== undefined
1435-
? `<span class='contentRatingDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
1436-
}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
1437-
.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${escapeHtml(
1436+
? `<span class='contentRatingDetail' style='font-size:${this.fontSize4}px; line-height:${
1437+
this.fontSize4
1438+
}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
1439+
.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${escapeHtml(
14381440
mainData.contentRating
1439-
)}</span>`
1441+
)}</span>`
14401442
: '') +
14411443
(mainData.rating !== undefined
1442-
? `<span class='ratingDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
1443-
}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
1444-
.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${mainData.rating < 5 ? '&#128465;' : '&#11088;'
1445-
}&nbsp;${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}</span>`
1444+
? `<span class='ratingDetail' style='font-size:${this.fontSize4}px; line-height:${
1445+
this.fontSize4
1446+
}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
1447+
.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${
1448+
mainData.rating < 5 ? '&#128465;' : '&#11088;'
1449+
}&nbsp;${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}</span>`
14461450
: '')}<div class='clear'></div>`;
14471451

14481452
const detailDesc = this.getElementsByClassName('detailDesc')[0] as HTMLElement;
@@ -1582,8 +1586,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
15821586
fullscreenTrailer.style.visibility = 'visible';
15831587
contentbg.classList.add('no-transparency');
15841588
playingFired = true;
1585-
this.videoElem.style.width = `${(this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth
1586-
}px`;
1589+
this.videoElem.style.width = `${
1590+
(this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth
1591+
}px`;
15871592
this.videoElem.style.visibility = 'visible';
15881593
this.videoElem.style.top = `${top}px`;
15891594
}
@@ -1670,8 +1675,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
16701675
const seasonContainer = document.createElement('div');
16711676
seasonContainer.className = 'seasonContainer';
16721677
seasonContainer.style.width = `${CSS_STYLE.width}px`;
1673-
const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
1674-
}&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`;
1678+
const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
1679+
this.minExpandedHeight
1680+
}&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`;
16751681

16761682
const seasonElem = document.createElement('div');
16771683
seasonElem.className = 'seasonElem';
@@ -2068,11 +2074,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
20682074
let thumbURL = '';
20692075
if (this.plex) {
20702076
if (_.isEqual(data.type, 'episode')) {
2071-
thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
2072-
}&minSize=1&upscale=1&url=${data.grandparentThumb}&X-Plex-Token=${this.config.token}`;
2077+
thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
2078+
this.minExpandedHeight
2079+
}&minSize=1&upscale=1&url=${data.grandparentThumb}&X-Plex-Token=${this.config.token}`;
20732080
} else {
2074-
thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
2075-
}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
2081+
thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${
2082+
this.minExpandedHeight
2083+
}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
20762084
}
20772085
}
20782086

0 commit comments

Comments
 (0)