Add: Play button in extended view WIP

pull/16/head
Juraj Nyíri 4 years ago
parent c7b4b53dba
commit 8fb0d03d8e

@ -59,7 +59,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem = document.createElement("div");
this.detailElem.className = "detail";
this.detailElem.innerHTML =
"<h1></h1><h2></h2><span class='metaInfo'></span><span class='detailDesc'></span>";
"<h1></h1><h2></h2><span class='metaInfo'></span><span class='detailDesc'></span><div class='clear'></div>";
if (this.playSupported) {
this.detailElem.innerHTML += "<span class='detailPlayAction'></span>";
}
this.content.appendChild(this.detailElem);
//todo: figure out why timeout is needed here and do it properly
@ -238,6 +243,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
duration: title.attributes.duration
? title.attributes.duration.textContent
: undefined,
type: sectionType ? sectionType : undefined,
});
});
});
@ -305,15 +311,19 @@ class PlexMeetsHomeAssistant extends HTMLElement {
};
hideDetails = () => {
this.detailElem.style.top = "0px";
const doc = document.documentElement;
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
this.detailElem.style.top = top - 1000 + "px";
this.detailElem.style.color = "rgba(255,255,255,0)";
this.detailElem.style["z-index"] = "0";
this.detailElem.style["visibility"] = "hidden";
};
showDetails = (data) => {
const _this = this;
const doc = document.documentElement;
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
this.detailElem.style["visibility"] = "visible";
this.detailElem.style["transition"] = "0s";
this.detailElem.style.top = top - 1000 + "px";
@ -343,6 +353,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
: "") +
"<div class='clear'></div>";
_this.detailElem.children[3].innerHTML = _this.escapeHtml(data.summary);
if (data.type === "movie") {
_this.detailElem.children[5].style.visibility = "visible";
_this.detailElem.children[5].innerHTML = "Play";
} else {
_this.detailElem.children[5].style.visibility = "hidden";
}
_this.detailElem.style.color = "rgba(255,255,255,1)";
_this.detailElem.style["z-index"] = "4";
}, 1);
@ -477,6 +494,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
let style = document.createElement("style");
style.textContent = `
.detailPlayAction {
top: 10px;
color: rgb(15 17 19);
font-weight: bold;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
position: relative;
background: orange;
}
.ratingDetail {
background: #ffffff24;
padding: 5px 10px;
@ -517,6 +544,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
padding: 5px 0px;
margin: 16px 0 10px 0;
}
.detail {
visibility: hidden;
}
.detailDesc {
}

Loading…
Cancel
Save