Add: Play button in extended view WIP

plex-meets-homeassistant.js

@@ -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 {
     
           }