- |
+ |
Genre
|
@@ -22304,6 +22372,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
mainData.title = `${mainData.title} - ${data.title}`;
}
const directorElem = this.getElementsByClassName('metaInfoDetailsData')[0];
+ directorElem.style.fontSize = `${this.fontSize4}px`;
+ directorElem.style.lineHeight = `${this.fontSize4}px`;
+ directorElem.style.marginTop = `${this.fontSize4 / 4}px`;
+ directorElem.style.marginBottom = `${this.fontSize4 / 4}px`;
+ directorElem.style.display = 'block';
if (directorElem.parentElement) {
if (mainData.Director && mainData.Director.length > 0) {
directorElem.innerHTML = escapeHtml(mainData.Director[0].tag);
@@ -22314,6 +22387,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
}
const writerElem = this.getElementsByClassName('metaInfoDetailsData')[1];
+ writerElem.style.fontSize = `${this.fontSize4}px`;
+ writerElem.style.lineHeight = `${this.fontSize4}px`;
+ writerElem.style.marginTop = `${this.fontSize4 / 4}px`;
+ writerElem.style.marginBottom = `${this.fontSize4 / 4}px`;
+ writerElem.style.display = 'block';
if (writerElem.parentElement) {
if (mainData.Writer && mainData.Writer.length > 0) {
writerElem.innerHTML = escapeHtml(mainData.Writer[0].tag);
@@ -22324,6 +22402,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
}
const studioElem = this.getElementsByClassName('metaInfoDetailsData')[2];
+ studioElem.style.fontSize = `${this.fontSize4}px`;
+ studioElem.style.lineHeight = `${this.fontSize4}px`;
+ studioElem.style.marginTop = `${this.fontSize4 / 4}px`;
+ studioElem.style.marginBottom = `${this.fontSize4 / 4}px`;
+ studioElem.style.display = 'block';
if (studioElem.parentElement) {
if (mainData.studio) {
studioElem.innerHTML = escapeHtml(mainData.studio);
@@ -22334,6 +22417,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
}
const genreElem = this.getElementsByClassName('metaInfoDetailsData')[3];
+ genreElem.style.fontSize = `${this.fontSize4}px`;
+ genreElem.style.lineHeight = `${this.fontSize4}px`;
+ genreElem.style.marginTop = `${this.fontSize4 / 4}px`;
+ genreElem.style.marginBottom = `${this.fontSize4 / 4}px`;
+ genreElem.style.display = 'block';
if (genreElem.parentElement) {
if (mainData.Genre && mainData.Genre.length > 0) {
let genre = '';
@@ -22347,38 +22435,59 @@ class PlexMeetsHomeAssistant extends HTMLElement {
genreElem.parentElement.style.display = 'none';
}
}
+ const detailsTitle = this.getElementsByClassName('detailsTitle')[0];
if (!lodash.isNil(mainData.channelCallSign)) {
- this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(mainData.channelCallSign);
+ detailsTitle.innerHTML = escapeHtml(mainData.channelCallSign);
}
else {
- this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(mainData.title);
+ detailsTitle.innerHTML = escapeHtml(mainData.title);
}
+ detailsTitle.style.lineHeight = `${this.fontSize3}px`;
+ detailsTitle.style.fontSize = `${this.fontSize3}px`;
+ detailsTitle.style.marginBottom = `${this.fontSize3 / 4}px`;
+ const detailsYear = this.getElementsByClassName('detailsYear')[0];
+ detailsYear.style.display = 'block';
+ detailsYear.style.fontSize = `${this.fontSize4}px`;
+ detailsYear.style.lineHeight = `${this.fontSize4}px`;
+ detailsYear.style.marginTop = `0px`;
+ detailsYear.style.marginBottom = `${this.fontSize4 / 4}px`;
if (!lodash.isNil(mainData.year)) {
- this.getElementsByClassName('detailsYear')[0].innerHTML = escapeHtml(mainData.year);
+ detailsYear.innerHTML = escapeHtml(mainData.year);
}
else if (!lodash.isNil(mainData.epg) && !lodash.isNil(mainData.epg.title)) {
- this.getElementsByClassName('detailsYear')[0].innerHTML = escapeHtml(mainData.epg.title);
+ detailsYear.innerHTML = escapeHtml(mainData.epg.title);
}
else {
- this.getElementsByClassName('detailsYear')[0].innerHTML = '';
+ detailsYear.style.display = 'none';
+ detailsYear.innerHTML = '';
}
this.getElementsByClassName('metaInfo')[0].innerHTML = `${(mainData.duration !== undefined
- ? `${Math.round(parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000)} min`
+ ? `${Math.round(parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000)} min`
: '') +
(mainData.contentRating !== undefined
- ? `${escapeHtml(mainData.contentRating)}`
+ ? `${escapeHtml(mainData.contentRating)}`
: '') +
(mainData.rating !== undefined
- ? `${mainData.rating < 5 ? '🗑' : '⭐'} ${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}`
+ ? `${mainData.rating < 5 ? '🗑' : '⭐'} ${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}`
: '')}`;
+ const detailDesc = this.getElementsByClassName('detailDesc')[0];
+ detailDesc.style.fontSize = `${this.fontSize4}px`;
+ detailDesc.style.lineHeight = `${this.fontSize4}px`;
+ detailDesc.style.marginTop = `${this.fontSize4 / 4}px`;
+ detailDesc.style.marginBottom = `${this.fontSize4 / 4}px`;
+ detailDesc.style.display = 'block';
if (!lodash.isNil(mainData.summary)) {
- this.getElementsByClassName('detailDesc')[0].innerHTML = escapeHtml(mainData.summary);
+ detailDesc.innerHTML = escapeHtml(mainData.summary);
}
else if (!lodash.isNil(mainData.epg) && !lodash.isNil(mainData.epg.summary)) {
- this.getElementsByClassName('detailDesc')[0].innerHTML = escapeHtml(mainData.epg.summary);
+ detailDesc.innerHTML = escapeHtml(mainData.epg.summary);
}
else {
- this.getElementsByClassName('detailDesc')[0].innerHTML = '';
+ detailDesc.innerHTML = '';
+ detailDesc.style.display = 'none';
}
this.detailElem.style.color = 'rgba(255,255,255,1)';
this.detailElem.style.zIndex = '4';
@@ -22469,6 +22578,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.videoElem && !playingFired) {
const contentbg = this.getElementsByClassName('contentbg')[0];
const fullscreenTrailer = this.getElementsByClassName('detailPlayTrailerAction')[0];
+ fullscreenTrailer.style.fontSize = `${this.fontSize4}px`;
+ fullscreenTrailer.style.lineHeight = `${this.fontSize4}px`;
+ fullscreenTrailer.style.marginTop = `${this.fontSize4 / 4}px`;
+ fullscreenTrailer.style.marginBottom = `${this.fontSize4 / 4}px`;
+ fullscreenTrailer.style.marginRight = `${this.fontSize4 / 4}px`;
+ fullscreenTrailer.style.padding = `${this.fontSize4 / 2}px ${this.fontSize4}px`;
fullscreenTrailer.style.visibility = 'visible';
contentbg.classList.add('no-transparency');
playingFired = true;
@@ -22521,6 +22636,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const toViewElem = document.createElement('div');
toViewElem.className = 'toViewSeason';
toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString();
+ toViewElem.style.fontSize = `${this.fontSize4}px`;
+ toViewElem.style.lineHeight = `${this.fontSize4}px`;
+ toViewElem.style.padding = `${this.fontSize4 / 2}px`;
interactiveArea.appendChild(toViewElem);
}
if (this.playController) {
@@ -22603,7 +22721,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.episodesElem.style.top = `${top + 2000}px`;
lodash.forEach(episodesData, episodeData => {
if (this.episodesElem && this.playController && this.plex) {
- this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData));
+ this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData, this.fontSize1, this.fontSize2));
}
});
clearInterval(this.episodesLoadTimeout);
@@ -22687,7 +22805,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const episodesData = await this.plex.getLibraryData(data.key.split('/')[3]);
lodash.forEach(episodesData, episodeData => {
if (this.episodesElem && this.playController && this.plex) {
- this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData));
+ this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData, this.fontSize1, this.fontSize2));
}
});
}
@@ -22695,7 +22813,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const extras = dataDetails.Extras.Metadata;
lodash.forEach(extras, extrasData => {
if (this.episodesElem && this.playController && this.plex) {
- this.episodesElem.append(createEpisodesView(this.playController, this.plex, extrasData));
+ this.episodesElem.append(createEpisodesView(this.playController, this.plex, extrasData, this.fontSize1, this.fontSize2));
}
});
}
@@ -22853,6 +22971,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const toViewElem = document.createElement('div');
toViewElem.className = 'toViewSeason';
toViewElem.innerHTML = (data.leafCount - data.viewedLeafCount).toString();
+ toViewElem.style.fontSize = `${this.fontSize4}px`;
+ toViewElem.style.lineHeight = `${this.fontSize4}px`;
+ toViewElem.style.padding = `${this.fontSize4 / 2}px`;
interactiveArea.appendChild(toViewElem);
}
if (data.viewOffset > 0 && data.duration > 0) {
@@ -22987,6 +23108,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (config.minWidth && config.minWidth !== '' && config.minWidth !== '0' && config.minWidth !== 0) {
this.minWidth = parseInt(config.minWidth, 10);
}
+ if (config.minEpisodeWidth &&
+ config.minEpisodeWidth !== '' &&
+ config.minEpisodeWidth !== '0' &&
+ config.minEpisodeWidth !== 0) {
+ this.minEpisodeWidth = parseInt(config.minEpisodeWidth, 10);
+ }
if (config.minExpandedWidth &&
config.minExpandedWidth !== '' &&
config.minExpandedWidth !== '0' &&
@@ -22999,6 +23126,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (config.fontSize2 && config.fontSize2 !== '' && config.fontSize2 !== '0' && config.fontSize2 !== 0) {
this.fontSize2 = parseInt(config.fontSize2, 10);
}
+ if (config.fontSize3 && config.fontSize3 !== '' && config.fontSize3 !== '0' && config.fontSize3 !== 0) {
+ this.fontSize3 = parseInt(config.fontSize3, 10);
+ }
+ if (config.fontSize4 && config.fontSize4 !== '' && config.fontSize4 !== '0' && config.fontSize4 !== 0) {
+ this.fontSize4 = parseInt(config.fontSize4, 10);
+ }
if (config.minExpandedHeight &&
config.minExpandedHeight !== '' &&
config.minExpandedHeight !== '0' &&
diff --git a/src/editor.ts b/src/editor.ts
index 302e3de..692c3b8 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -28,6 +28,8 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
minWidth: any = document.createElement('paper-input');
+ minEpisodeWidth: any = document.createElement('paper-input');
+
minExpandedWidth: any = document.createElement('paper-input');
minExpandedHeight: any = document.createElement('paper-input');
@@ -36,6 +38,10 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
fontSize2: any = document.createElement('paper-input');
+ fontSize3: any = document.createElement('paper-input');
+
+ fontSize4: any = document.createElement('paper-input');
+
cardTitle: any = document.createElement('paper-input');
libraryName: any = document.createElement('paper-dropdown-menu');
@@ -145,6 +151,12 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.config.minWidth = this.minWidth.value;
}
+ if (_.isEmpty(this.minEpisodeWidth.value)) {
+ this.config.minEpisodeWidth = '';
+ } else {
+ this.config.minEpisodeWidth = this.minEpisodeWidth.value;
+ }
+
if (_.isEmpty(this.minExpandedWidth.value)) {
this.config.minExpandedWidth = '';
} else {
@@ -163,6 +175,18 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.config.fontSize2 = this.fontSize2.value;
}
+ if (_.isEmpty(this.fontSize3.value)) {
+ this.config.fontSize3 = '';
+ } else {
+ this.config.fontSize3 = this.fontSize3.value;
+ }
+
+ if (_.isEmpty(this.fontSize4.value)) {
+ this.config.fontSize4 = '';
+ } else {
+ this.config.fontSize4 = this.fontSize4.value;
+ }
+
if (_.isEmpty(this.minExpandedHeight.value)) {
this.config.minExpandedHeight = '';
} else {
@@ -604,18 +628,36 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.minExpandedHeight.addEventListener('change', this.valueUpdated);
this.plexValidSection.appendChild(this.minExpandedHeight);
+ this.minEpisodeWidth.label = 'Minimum width of the episode card';
+ this.minEpisodeWidth.value = this.config.minEpisodeWidth;
+ this.minEpisodeWidth.type = 'number';
+ this.minEpisodeWidth.addEventListener('change', this.valueUpdated);
+ this.plexValidSection.appendChild(this.minEpisodeWidth);
+
this.fontSize1.label = 'Font size used in titles under cards';
this.fontSize1.value = this.config.fontSize1;
this.fontSize1.type = 'number';
this.fontSize1.addEventListener('change', this.valueUpdated);
this.plexValidSection.appendChild(this.fontSize1);
- this.fontSize2.label = 'Font size used in subtitles under cards';
+ this.fontSize2.label = 'Font size used in sub-titles under cards';
this.fontSize2.value = this.config.fontSize2;
this.fontSize2.type = 'number';
this.fontSize2.addEventListener('change', this.valueUpdated);
this.plexValidSection.appendChild(this.fontSize2);
+ this.fontSize3.label = 'Font size used in title of the opened content';
+ this.fontSize3.value = this.config.fontSize3;
+ this.fontSize3.type = 'number';
+ this.fontSize3.addEventListener('change', this.valueUpdated);
+ this.plexValidSection.appendChild(this.fontSize3);
+
+ this.fontSize4.label = 'Font size used in sub-titles, to-view count and description of the opened content';
+ this.fontSize4.value = this.config.fontSize4;
+ this.fontSize4.type = 'number';
+ this.fontSize4.addEventListener('change', this.valueUpdated);
+ this.plexValidSection.appendChild(this.fontSize4);
+
if (!_.isEmpty(this.livetv)) {
libraryItems.appendChild(addDropdownItem('Live TV', true));
_.forEach(_.keys(this.livetv), (livetv: string) => {
@@ -778,6 +820,10 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.config.minWidth = `${this.config.minWidth}`;
}
+ if (_.isNumber(this.config.minEpisodeWidth)) {
+ this.config.minEpisodeWidth = `${this.config.minEpisodeWidth}`;
+ }
+
if (_.isNumber(this.config.minExpandedWidth)) {
this.config.minExpandedWidth = `${this.config.minExpandedWidth}`;
}
@@ -790,6 +836,14 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.config.fontSize2 = `${this.config.fontSize2}`;
}
+ if (_.isNumber(this.config.fontSize3)) {
+ this.config.fontSize3 = `${this.config.fontSize3}`;
+ }
+
+ if (_.isNumber(this.config.fontSize4)) {
+ this.config.fontSize4 = `${this.config.fontSize4}`;
+ }
+
if (_.isNumber(this.config.minExpandedHeight)) {
this.config.minExpandedHeight = `${this.config.minExpandedHeight}`;
}
diff --git a/src/modules/utils.ts b/src/modules/utils.ts
index e381e23..fe3582a 100644
--- a/src/modules/utils.ts
+++ b/src/modules/utils.ts
@@ -178,7 +178,13 @@ const waitUntilState = async (hass: HomeAssistant, entityID: string, state: stri
}
};
-const createEpisodesView = (playController: any, plex: Plex, data: Record): HTMLElement => {
+const createEpisodesView = (
+ playController: any,
+ plex: Plex,
+ data: Record,
+ fontSize1: number,
+ fontSize2: number
+): HTMLElement => {
const episodeContainer = document.createElement('div');
episodeContainer.className = 'episodeContainer';
episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`;
@@ -221,10 +227,21 @@ const createEpisodesView = (playController: any, plex: Plex, data: Record 0) {
CSS_STYLE.width = areaSize / postersInRow - marginRight;
CSS_STYLE.height = CSS_STYLE.width * CSS_STYLE.ratio;
- const episodesInRow = Math.floor(areaSize / CSS_STYLE.minimumEpisodeWidth);
+ const episodesInRow = Math.floor(areaSize / this.minEpisodeWidth);
CSS_STYLE.episodeWidth = Math.floor(areaSize / episodesInRow - marginRight);
CSS_STYLE.episodeHeight = Math.round(CSS_STYLE.episodeWidth * CSS_STYLE.episodeRatio);
@@ -727,7 +733,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
`;
if (this.playController) {
- this.detailElem.appendChild(this.playController.getPlayActionButton());
+ const playActionButton = this.playController.getPlayActionButton();
+ playActionButton.style.fontSize = `${this.fontSize4}px`;
+ playActionButton.style.lineHeight = `${this.fontSize4}px`;
+ playActionButton.style.marginTop = `${this.fontSize4 / 4}px`;
+ playActionButton.style.marginBottom = `${this.fontSize4 / 4}px`;
+ playActionButton.style.marginRight = `${this.fontSize4 / 4}px`;
+ playActionButton.style.padding = `${this.fontSize4 / 2}px ${this.fontSize4}px`;
+ this.detailElem.appendChild(playActionButton);
}
this.detailElem.innerHTML += `
@@ -737,7 +750,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
- |
+ |
Directed by
|
@@ -745,7 +759,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
|
- |
+ |
Written by
|
@@ -753,7 +768,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
|
- |
+ |
Studio
|
@@ -761,7 +777,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
|
- |
+ |
Genre
|
@@ -1111,6 +1128,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
mainData.title = `${mainData.title} - ${data.title}`;
}
const directorElem = this.getElementsByClassName('metaInfoDetailsData')[0] as HTMLElement;
+ directorElem.style.fontSize = `${this.fontSize4}px`;
+ directorElem.style.lineHeight = `${this.fontSize4}px`;
+ directorElem.style.marginTop = `${this.fontSize4 / 4}px`;
+ directorElem.style.marginBottom = `${this.fontSize4 / 4}px`;
+ directorElem.style.display = 'block';
if (directorElem.parentElement) {
if (mainData.Director && mainData.Director.length > 0) {
directorElem.innerHTML = escapeHtml(mainData.Director[0].tag);
@@ -1121,6 +1143,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
const writerElem = this.getElementsByClassName('metaInfoDetailsData')[1] as HTMLElement;
+ writerElem.style.fontSize = `${this.fontSize4}px`;
+ writerElem.style.lineHeight = `${this.fontSize4}px`;
+ writerElem.style.marginTop = `${this.fontSize4 / 4}px`;
+ writerElem.style.marginBottom = `${this.fontSize4 / 4}px`;
+ writerElem.style.display = 'block';
if (writerElem.parentElement) {
if (mainData.Writer && mainData.Writer.length > 0) {
writerElem.innerHTML = escapeHtml(mainData.Writer[0].tag);
@@ -1130,6 +1157,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
}
const studioElem = this.getElementsByClassName('metaInfoDetailsData')[2] as HTMLElement;
+ studioElem.style.fontSize = `${this.fontSize4}px`;
+ studioElem.style.lineHeight = `${this.fontSize4}px`;
+ studioElem.style.marginTop = `${this.fontSize4 / 4}px`;
+ studioElem.style.marginBottom = `${this.fontSize4 / 4}px`;
+ studioElem.style.display = 'block';
if (studioElem.parentElement) {
if (mainData.studio) {
studioElem.innerHTML = escapeHtml(mainData.studio);
@@ -1139,6 +1171,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
}
const genreElem = this.getElementsByClassName('metaInfoDetailsData')[3] as HTMLElement;
+ genreElem.style.fontSize = `${this.fontSize4}px`;
+ genreElem.style.lineHeight = `${this.fontSize4}px`;
+ genreElem.style.marginTop = `${this.fontSize4 / 4}px`;
+ genreElem.style.marginBottom = `${this.fontSize4 / 4}px`;
+ genreElem.style.display = 'block';
if (genreElem.parentElement) {
if (mainData.Genre && mainData.Genre.length > 0) {
let genre = '';
@@ -1151,42 +1188,69 @@ class PlexMeetsHomeAssistant extends HTMLElement {
genreElem.parentElement.style.display = 'none';
}
}
+ const detailsTitle = this.getElementsByClassName('detailsTitle')[0] as HTMLElement;
if (!_.isNil(mainData.channelCallSign)) {
- (this.getElementsByClassName('detailsTitle')[0] as HTMLElement).innerHTML = escapeHtml(
- mainData.channelCallSign
- );
+ detailsTitle.innerHTML = escapeHtml(mainData.channelCallSign);
} else {
- (this.getElementsByClassName('detailsTitle')[0] as HTMLElement).innerHTML = escapeHtml(mainData.title);
+ detailsTitle.innerHTML = escapeHtml(mainData.title);
}
-
+ detailsTitle.style.lineHeight = `${this.fontSize3}px`;
+ detailsTitle.style.fontSize = `${this.fontSize3}px`;
+ detailsTitle.style.marginBottom = `${this.fontSize3 / 4}px`;
+
+ const detailsYear = this.getElementsByClassName('detailsYear')[0] as HTMLElement;
+ detailsYear.style.display = 'block';
+ detailsYear.style.fontSize = `${this.fontSize4}px`;
+ detailsYear.style.lineHeight = `${this.fontSize4}px`;
+ detailsYear.style.marginTop = `0px`;
+ detailsYear.style.marginBottom = `${this.fontSize4 / 4}px`;
if (!_.isNil(mainData.year)) {
- (this.getElementsByClassName('detailsYear')[0] as HTMLElement).innerHTML = escapeHtml(mainData.year);
+ detailsYear.innerHTML = escapeHtml(mainData.year);
} else if (!_.isNil(mainData.epg) && !_.isNil(mainData.epg.title)) {
- (this.getElementsByClassName('detailsYear')[0] as HTMLElement).innerHTML = escapeHtml(mainData.epg.title);
+ detailsYear.innerHTML = escapeHtml(mainData.epg.title);
} else {
- (this.getElementsByClassName('detailsYear')[0] as HTMLElement).innerHTML = '';
+ detailsYear.style.display = 'none';
+ detailsYear.innerHTML = '';
}
(this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined
- ? `${Math.round(
+ ? `${Math.round(
parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000
)} min`
: '') +
(mainData.contentRating !== undefined
- ? `${escapeHtml(mainData.contentRating)}`
+ ? `${escapeHtml(
+ mainData.contentRating
+ )}`
: '') +
(mainData.rating !== undefined
- ? `${mainData.rating < 5 ? '🗑' : '⭐'} ${Math.round(
- parseFloat(escapeHtml(mainData.rating)) * 10
- ) / 10}`
+ ? `${
+ mainData.rating < 5 ? '🗑' : '⭐'
+ } ${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}`
: '')}`;
+ const detailDesc = this.getElementsByClassName('detailDesc')[0] as HTMLElement;
+ detailDesc.style.fontSize = `${this.fontSize4}px`;
+ detailDesc.style.lineHeight = `${this.fontSize4}px`;
+ detailDesc.style.marginTop = `${this.fontSize4 / 4}px`;
+ detailDesc.style.marginBottom = `${this.fontSize4 / 4}px`;
+ detailDesc.style.display = 'block';
if (!_.isNil(mainData.summary)) {
- (this.getElementsByClassName('detailDesc')[0] as HTMLElement).innerHTML = escapeHtml(mainData.summary);
+ detailDesc.innerHTML = escapeHtml(mainData.summary);
} else if (!_.isNil(mainData.epg) && !_.isNil(mainData.epg.summary)) {
- (this.getElementsByClassName('detailDesc')[0] as HTMLElement).innerHTML = escapeHtml(mainData.epg.summary);
+ detailDesc.innerHTML = escapeHtml(mainData.epg.summary);
} else {
- (this.getElementsByClassName('detailDesc')[0] as HTMLElement).innerHTML = '';
+ detailDesc.innerHTML = '';
+ detailDesc.style.display = 'none';
}
this.detailElem.style.color = 'rgba(255,255,255,1)';
@@ -1283,6 +1347,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.videoElem && !playingFired) {
const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;
const fullscreenTrailer = this.getElementsByClassName('detailPlayTrailerAction')[0] as HTMLElement;
+ fullscreenTrailer.style.fontSize = `${this.fontSize4}px`;
+ fullscreenTrailer.style.lineHeight = `${this.fontSize4}px`;
+ fullscreenTrailer.style.marginTop = `${this.fontSize4 / 4}px`;
+ fullscreenTrailer.style.marginBottom = `${this.fontSize4 / 4}px`;
+ fullscreenTrailer.style.marginRight = `${this.fontSize4 / 4}px`;
+ fullscreenTrailer.style.padding = `${this.fontSize4 / 2}px ${this.fontSize4}px`;
fullscreenTrailer.style.visibility = 'visible';
contentbg.classList.add('no-transparency');
playingFired = true;
@@ -1343,6 +1413,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const toViewElem = document.createElement('div');
toViewElem.className = 'toViewSeason';
toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString();
+
+ toViewElem.style.fontSize = `${this.fontSize4}px`;
+ toViewElem.style.lineHeight = `${this.fontSize4}px`;
+ toViewElem.style.padding = `${this.fontSize4 / 2}px`;
+
interactiveArea.appendChild(toViewElem);
}
@@ -1437,7 +1512,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.episodesElem.style.top = `${top + 2000}px`;
_.forEach(episodesData, episodeData => {
if (this.episodesElem && this.playController && this.plex) {
- this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData));
+ this.episodesElem.append(
+ createEpisodesView(
+ this.playController,
+ this.plex,
+ episodeData,
+ this.fontSize1,
+ this.fontSize2
+ )
+ );
}
});
clearInterval(this.episodesLoadTimeout);
@@ -1526,14 +1609,18 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const episodesData = await this.plex.getLibraryData(data.key.split('/')[3]);
_.forEach(episodesData, episodeData => {
if (this.episodesElem && this.playController && this.plex) {
- this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData));
+ this.episodesElem.append(
+ createEpisodesView(this.playController, this.plex, episodeData, this.fontSize1, this.fontSize2)
+ );
}
});
} else if (this.showExtras && !_.isNil(dataDetails.Extras)) {
const extras = dataDetails.Extras.Metadata;
_.forEach(extras, extrasData => {
if (this.episodesElem && this.playController && this.plex) {
- this.episodesElem.append(createEpisodesView(this.playController, this.plex, extrasData));
+ this.episodesElem.append(
+ createEpisodesView(this.playController, this.plex, extrasData, this.fontSize1, this.fontSize2)
+ );
}
});
}
@@ -1709,6 +1796,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const toViewElem = document.createElement('div');
toViewElem.className = 'toViewSeason';
toViewElem.innerHTML = (data.leafCount - data.viewedLeafCount).toString();
+ toViewElem.style.fontSize = `${this.fontSize4}px`;
+ toViewElem.style.lineHeight = `${this.fontSize4}px`;
+ toViewElem.style.padding = `${this.fontSize4 / 2}px`;
interactiveArea.appendChild(toViewElem);
}
@@ -1853,6 +1943,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (config.minWidth && config.minWidth !== '' && config.minWidth !== '0' && config.minWidth !== 0) {
this.minWidth = parseInt(config.minWidth, 10);
}
+ if (
+ config.minEpisodeWidth &&
+ config.minEpisodeWidth !== '' &&
+ config.minEpisodeWidth !== '0' &&
+ config.minEpisodeWidth !== 0
+ ) {
+ this.minEpisodeWidth = parseInt(config.minEpisodeWidth, 10);
+ }
if (
config.minExpandedWidth &&
@@ -1869,6 +1967,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (config.fontSize2 && config.fontSize2 !== '' && config.fontSize2 !== '0' && config.fontSize2 !== 0) {
this.fontSize2 = parseInt(config.fontSize2, 10);
}
+ if (config.fontSize3 && config.fontSize3 !== '' && config.fontSize3 !== '0' && config.fontSize3 !== 0) {
+ this.fontSize3 = parseInt(config.fontSize3, 10);
+ }
+ if (config.fontSize4 && config.fontSize4 !== '' && config.fontSize4 !== '0' && config.fontSize4 !== 0) {
+ this.fontSize4 = parseInt(config.fontSize4, 10);
+ }
if (
config.minExpandedHeight &&
| |