diff --git a/plex-meets-homeassistant.js b/plex-meets-homeassistant.js
index 5cb79c0..c539259 100644
--- a/plex-meets-homeassistant.js
+++ b/plex-meets-homeassistant.js
@@ -12,6 +12,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
loading = false;
maxCount = false;
+ escapeHtml = (unsafe) => {
+ return unsafe
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+ };
+
renderPage = (hass) => {
const _this = this;
if (this) this.innerHTML = "";
@@ -28,11 +37,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.data[this.config.libraryName].length === 0
) {
this.content.innerHTML =
- "Library " + this.config.libraryName + " has no items.";
+ "Library " +
+ this.escapeHtml(this.config.libraryName) +
+ " has no items.";
} else if (this.loading) {
this.content.style.padding = "16px 16px 16px";
this.content.innerHTML =
- '
'; //ttmp
+ '';
}
card.appendChild(this.content);
@@ -46,7 +57,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem = document.createElement("div");
this.detailElem.className = "detail";
- this.detailElem.innerHTML = "";
+ this.detailElem.innerHTML =
+ "";
this.content.appendChild(this.detailElem);
//todo: figure out why timeout is needed here and do it properly
@@ -90,7 +102,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const _this = this;
this.previousPositions = [];
- console.log("render");
//todo: find a better way to detect resize...
setInterval(() => {
if (_this.movieElems.length > 0) {
@@ -297,8 +308,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
_this.detailElem.style["transition"] = "0.7s";
_this.detailElem.style.top = top + "px";
- _this.detailElem.children[0].innerHTML = data.title;
- _this.detailElem.children[1].innerHTML = data.summary;
+ _this.detailElem.children[0].innerHTML = _this.escapeHtml(data.title);
+ _this.detailElem.children[1].innerHTML = _this.escapeHtml(data.year);
+ _this.detailElem.children[2].innerHTML = _this.escapeHtml(data.summary);
_this.detailElem.style.color = "rgba(255,255,255,1)";
_this.detailElem.style["z-index"] = "4";
}, 1);
@@ -408,12 +420,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
});
const titleElem = document.createElement("div");
- titleElem.innerHTML = data.title;
+ titleElem.innerHTML = this.escapeHtml(data.title);
titleElem.className = "titleElem";
titleElem.style["margin-top"] = this.height + "px";
const yearElem = document.createElement("div");
- yearElem.innerHTML = data.year;
+ yearElem.innerHTML = this.escapeHtml(data.year);
yearElem.className = "yearElem";
container.appendChild(movieElem);
@@ -427,12 +439,21 @@ class PlexMeetsHomeAssistant extends HTMLElement {
let style = document.createElement("style");
style.textContent = `
+ .detail h2 {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ position: relative;
+ margin: 5px 0px 10px 0px;
+ font-size: 16px;
+ }
.detail h1 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: relative;
padding: 5px 0px;
+ margin: 16px 0 10px 0;
}
.detailDesc {
@@ -623,6 +644,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
getData = (url) => {
+ console.log(url);
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);