Add: Font size2 now applies to additionalTitle, margins and proper height calculation

horizontal_scroll_2
Juraj Nyíri 3 years ago
parent 4b153d307c
commit 3c9878bcfc

@ -22099,22 +22099,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.loadCustomStyles(); this.loadCustomStyles();
}; };
this.calculatePositions = () => { this.calculatePositions = () => {
// todo: figure out why interval is needed here and do it properly return; // temp
const setLeftOffsetsInterval = setInterval(() => {
this.movieElems = this.getElementsByClassName('movieElem');
for (let i = 0; i < this.movieElems.length; i += 1) {
if (this.movieElems[i].offsetLeft === 0) {
break;
}
else {
clearInterval(setLeftOffsetsInterval);
}
this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`;
this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft;
this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`;
this.movieElems[i].dataset.top = this.movieElems[i].offsetTop;
}
}, 100);
}; };
this.minimizeSeasons = () => { this.minimizeSeasons = () => {
this.seasonsElemHidden = false; this.seasonsElemHidden = false;
@ -22811,10 +22796,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
container.className = 'plexMeetsContainer'; container.className = 'plexMeetsContainer';
container.style.width = `${CSS_STYLE.width}px`; container.style.width = `${CSS_STYLE.width}px`;
if (hasAdditionalData) { if (hasAdditionalData) {
container.style.height = `${CSS_STYLE.height + 50}px`; container.style.height = `${CSS_STYLE.height +
this.fontSize1 +
2 * (this.fontSize1 / 4) +
this.fontSize2 +
2 * (this.fontSize2 / 4)}px`;
} }
else { else {
container.style.height = `${CSS_STYLE.height + 30}px`; container.style.height = `${CSS_STYLE.height + this.fontSize1 + this.fontSize2}px`;
} }
if (!lodash.isNil(data.channelCallSign)) { if (!lodash.isNil(data.channelCallSign)) {
container.style.marginBottom = '50px'; container.style.marginBottom = '50px';
@ -22884,14 +22873,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
else { else {
titleElem.innerHTML = escapeHtml(data.title); titleElem.innerHTML = escapeHtml(data.title);
} }
const margin1 = this.fontSize1 / 4;
const margin2 = this.fontSize2 / 4;
titleElem.className = 'titleElem'; titleElem.className = 'titleElem';
if (!lodash.isNil(data.channelCallSign)) { if (!lodash.isNil(data.channelCallSign)) {
titleElem.style.marginTop = `${CSS_STYLE.width}px`; titleElem.style.marginTop = `${CSS_STYLE.width}px`;
} }
else { else {
titleElem.style.marginTop = `${CSS_STYLE.height}px`; titleElem.style.marginTop = `${CSS_STYLE.height + margin1}px`;
} }
titleElem.style.fontSize = `${this.fontSize1}px`; titleElem.style.fontSize = `${this.fontSize1}px`;
titleElem.style.marginBottom = `${margin1}px`;
titleElem.style.lineHeight = `${this.fontSize1}px`; titleElem.style.lineHeight = `${this.fontSize1}px`;
const yearElem = document.createElement('div'); const yearElem = document.createElement('div');
if (lodash.isEqual(data.type, 'episode')) { if (lodash.isEqual(data.type, 'episode')) {
@ -22906,10 +22898,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
yearElem.className = 'yearElem'; yearElem.className = 'yearElem';
yearElem.style.fontSize = `${this.fontSize2}px`; yearElem.style.fontSize = `${this.fontSize2}px`;
yearElem.style.lineHeight = `${this.fontSize2}px`; yearElem.style.lineHeight = `${this.fontSize2}px`;
yearElem.style.marginTop = `${margin2}px`;
yearElem.style.marginBottom = `${margin2}px`;
const additionalElem = document.createElement('div'); const additionalElem = document.createElement('div');
if (lodash.isEqual(data.type, 'episode')) { if (lodash.isEqual(data.type, 'episode')) {
additionalElem.innerHTML = escapeHtml(`S${data.parentIndex} E${data.index}`); additionalElem.innerHTML = escapeHtml(`S${data.parentIndex} E${data.index}`);
additionalElem.className = 'additionalElem'; additionalElem.className = 'additionalElem';
additionalElem.style.fontSize = `${this.fontSize2}px`;
additionalElem.style.lineHeight = `${this.fontSize2}px`;
additionalElem.style.marginTop = `${margin2}px`;
additionalElem.style.marginBottom = `${margin2}px`;
} }
container.appendChild(movieElem); container.appendChild(movieElem);
container.appendChild(titleElem); container.appendChild(titleElem);

@ -890,6 +890,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
calculatePositions = (): void => { calculatePositions = (): void => {
return; // temp
// todo: figure out why interval is needed here and do it properly // todo: figure out why interval is needed here and do it properly
const setLeftOffsetsInterval = setInterval(() => { const setLeftOffsetsInterval = setInterval(() => {
this.movieElems = this.getElementsByClassName('movieElem'); this.movieElems = this.getElementsByClassName('movieElem');
@ -1658,9 +1659,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
container.className = 'plexMeetsContainer'; container.className = 'plexMeetsContainer';
container.style.width = `${CSS_STYLE.width}px`; container.style.width = `${CSS_STYLE.width}px`;
if (hasAdditionalData) { if (hasAdditionalData) {
container.style.height = `${CSS_STYLE.height + 50}px`; container.style.height = `${CSS_STYLE.height +
this.fontSize1 +
2 * (this.fontSize1 / 4) +
this.fontSize2 +
2 * (this.fontSize2 / 4)}px`;
} else { } else {
container.style.height = `${CSS_STYLE.height + 30}px`; container.style.height = `${CSS_STYLE.height + this.fontSize1 + this.fontSize2}px`;
} }
if (!_.isNil(data.channelCallSign)) { if (!_.isNil(data.channelCallSign)) {
container.style.marginBottom = '50px'; container.style.marginBottom = '50px';
@ -1747,13 +1752,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} else { } else {
titleElem.innerHTML = escapeHtml(data.title); titleElem.innerHTML = escapeHtml(data.title);
} }
const margin1 = this.fontSize1 / 4;
const margin2 = this.fontSize2 / 4;
titleElem.className = 'titleElem'; titleElem.className = 'titleElem';
if (!_.isNil(data.channelCallSign)) { if (!_.isNil(data.channelCallSign)) {
titleElem.style.marginTop = `${CSS_STYLE.width}px`; titleElem.style.marginTop = `${CSS_STYLE.width}px`;
} else { } else {
titleElem.style.marginTop = `${CSS_STYLE.height}px`; titleElem.style.marginTop = `${CSS_STYLE.height + margin1}px`;
} }
titleElem.style.fontSize = `${this.fontSize1}px`; titleElem.style.fontSize = `${this.fontSize1}px`;
titleElem.style.marginBottom = `${margin1}px`;
titleElem.style.lineHeight = `${this.fontSize1}px`; titleElem.style.lineHeight = `${this.fontSize1}px`;
const yearElem = document.createElement('div'); const yearElem = document.createElement('div');
@ -1767,11 +1775,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
yearElem.className = 'yearElem'; yearElem.className = 'yearElem';
yearElem.style.fontSize = `${this.fontSize2}px`; yearElem.style.fontSize = `${this.fontSize2}px`;
yearElem.style.lineHeight = `${this.fontSize2}px`; yearElem.style.lineHeight = `${this.fontSize2}px`;
yearElem.style.marginTop = `${margin2}px`;
yearElem.style.marginBottom = `${margin2}px`;
const additionalElem = document.createElement('div'); const additionalElem = document.createElement('div');
if (_.isEqual(data.type, 'episode')) { if (_.isEqual(data.type, 'episode')) {
additionalElem.innerHTML = escapeHtml(`S${data.parentIndex} E${data.index}`); additionalElem.innerHTML = escapeHtml(`S${data.parentIndex} E${data.index}`);
additionalElem.className = 'additionalElem'; additionalElem.className = 'additionalElem';
additionalElem.style.fontSize = `${this.fontSize2}px`;
additionalElem.style.lineHeight = `${this.fontSize2}px`;
additionalElem.style.marginTop = `${margin2}px`;
additionalElem.style.marginBottom = `${margin2}px`;
} }
container.appendChild(movieElem); container.appendChild(movieElem);

Loading…
Cancel
Save