Update: HACS compatibility

hacs.json

@@ -0,0 +1,6 @@
+{
+  "name": "Plex Meets Home Assistant",
+  "render_readme": true,
+  "content_in_root": true,
+  "filename": "plex-meets-homeassistant.js"
+}

plex-meets-homeassistant.js

@@ -427,164 +427,164 @@ class ContentCardExample extends HTMLElement {
     let style = document.createElement("style");
 
     style.textContent = `
-        .detail h1 {
+          .detail h1 {
-          text-overflow: ellipsis; 
+            text-overflow: ellipsis; 
-          white-space: nowrap; 
+            white-space: nowrap; 
-          overflow: hidden;
+            overflow: hidden;
-          position: relative;
+            position: relative;
-          padding: 5px 0px;
+            padding: 5px 0px;
-        }
-        .detailDesc {
-  
-        }
-        .lds-ring {
-          display: inline-block;
-          position: relative;
-          width: 80px;
-          height: 80px;
-        }
-        .lds-ring div {
-          box-sizing: border-box;
-          display: block;
-          position: absolute;
-          width: 64px;
-          height: 64px;
-          margin: 8px;
-          border: 8px solid orange;
-          border-radius: 50%;
-          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-          border-color: orange transparent transparent transparent;
-        }
-        .lds-ring div:nth-child(1) {
-          animation-delay: -0.45s;
-        }
-        .lds-ring div:nth-child(2) {
-          animation-delay: -0.3s;
-        }
-        .lds-ring div:nth-child(3) {
-          animation-delay: -0.15s;
-        }
-        @keyframes lds-ring {
-          0% {
-            transform: rotate(0deg);
           }
-          100% {
+          .detailDesc {
-            transform: rotate(360deg);
+    
+          }
+          .lds-ring {
+            display: inline-block;
+            position: relative;
+            width: 80px;
+            height: 80px;
+          }
+          .lds-ring div {
+            box-sizing: border-box;
+            display: block;
+            position: absolute;
+            width: 64px;
+            height: 64px;
+            margin: 8px;
+            border: 8px solid orange;
+            border-radius: 50%;
+            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+            border-color: orange transparent transparent transparent;
+          }
+          .lds-ring div:nth-child(1) {
+            animation-delay: -0.45s;
+          }
+          .lds-ring div:nth-child(2) {
+            animation-delay: -0.3s;
+          }
+          .lds-ring div:nth-child(3) {
+            animation-delay: -0.15s;
+          }
+          @keyframes lds-ring {
+            0% {
+              transform: rotate(0deg);
+            }
+            100% {
+              transform: rotate(360deg);
+            }
+          }      
+          .detail {
+            position: absolute;
+            left: 247px;
+            width: calc(100% - 267px);
+            z-index: 4;
+            transition: 0.5s;
+            color: rgba(255,255,255,0);
+          }
+          .contentbg {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0);
+            z-index: 0;
+            transition: 0.5s;
+            left: 0;
+            top: 0;
+          }
+          .yearElem {
+            color:hsla(0,0%,100%,.45);
+            position: relative;
+          }
+          .titleElem {
+            text-overflow: ellipsis; 
+            white-space: nowrap; 
+            overflow: hidden;
+            position: relative;
+          }
+          .movieElem {
+            margin-bottom:5px;
+            background-repeat: no-repeat; 
+            background-size: contain; 
+            border-radius: 5px;
+            transition: 0.5s;
+            position: absolute;
+            z-index: 1;
+          }
+          .container {
+            z-index: 1;
+            float:left;
+            margin-bottom: 20px;
+            margin-right: 10px;
+            transition: 0.5s;
+          }
+          .interactiveArea {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            transition: 0.5s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .interactiveArea:hover {
+            background: rgba(0,0,0,0.3);
+          }
+          button[name="playButton"] {
+            width: 40px;
+            height: 40px;
+            border: 2px solid white;
+            border-radius: 100%;
+            margin: auto;
+            cursor: pointer;
+            transition: 0.2s;
+          }
+          button[name="playButton"]:hover {
+            background: orange !important;
+            border: 2px solid orange !important;
+          }
+          button[name="playButton"]:focus {
+            outline: 0;
+            background: orange !important;
+            border: 2px solid orange !important;
+            box-shadow: 0 0 0 3px orange !important;
+          }
+          
+          button[name="playButton"]::after {
+            content: '';
+            display: inline-block;
+            position: relative;
+            top: 1px;
+            left: 2px;
+            border-style: solid;
+            border-width: 6px 0 6px 12px;
+            border-color: transparent transparent transparent white;
+            transition: 0.2s;
           }
-        }      
-        .detail {
-          position: absolute;
-          left: 247px;
-          width: calc(100% - 267px);
-          z-index: 4;
-          transition: 0.5s;
-          color: rgba(255,255,255,0);
-        }
-        .contentbg {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(0,0,0,0);
-          z-index: 0;
-          transition: 0.5s;
-          left: 0;
-          top: 0;
-        }
-        .yearElem {
-          color:hsla(0,0%,100%,.45);
-          position: relative;
-        }
-        .titleElem {
-          text-overflow: ellipsis; 
-          white-space: nowrap; 
-          overflow: hidden;
-          position: relative;
-        }
-        .movieElem {
-          margin-bottom:5px;
-          background-repeat: no-repeat; 
-          background-size: contain; 
-          border-radius: 5px;
-          transition: 0.5s;
-          position: absolute;
-          z-index: 1;
-        }
-        .container {
-          z-index: 1;
-          float:left;
-          margin-bottom: 20px;
-          margin-right: 10px;
-          transition: 0.5s;
-        }
-        .interactiveArea {
-          position: relative;
-          width: 100%;
-          height: 100%;
-          transition: 0.5s;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-        .interactiveArea:hover {
-          background: rgba(0,0,0,0.3);
-        }
-        button[name="playButton"] {
-          width: 40px;
-          height: 40px;
-          border: 2px solid white;
-          border-radius: 100%;
-          margin: auto;
-          cursor: pointer;
-          transition: 0.2s;
-        }
-        button[name="playButton"]:hover {
-          background: orange !important;
-          border: 2px solid orange !important;
-        }
-        button[name="playButton"]:focus {
-          outline: 0;
-          background: orange !important;
-          border: 2px solid orange !important;
-          box-shadow: 0 0 0 3px orange !important;
-        }
-        
-        button[name="playButton"]::after {
-          content: '';
-          display: inline-block;
-          position: relative;
-          top: 1px;
-          left: 2px;
-          border-style: solid;
-          border-width: 6px 0 6px 12px;
-          border-color: transparent transparent transparent white;
-          transition: 0.2s;
-        }
-  
-        .interactiveArea button[name="playButton"] {
-          background: rgba(0,0,0,0.0);
-          border: 2px solid rgba(255,255,255,0.0);
-        }
-  
-        .interactiveArea:hover button[name="playButton"] {
-          background: rgba(0,0,0,0.4);
-          border: 2px solid rgba(255,255,255,1);
-        }
-  
-        .interactiveArea button[name="playButton"]:after {
-          border-color: transparent transparent transparent rgba(255,255,255,0);
-        }
-  
-        .interactiveArea:hover button[name="playButton"]:after {
-          border-color: transparent transparent transparent rgba(255,255,255,1);
-        }
     
-        button[name="playButton"]:hover:after {
+          .interactiveArea button[name="playButton"] {
-          border-color: transparent transparent transparent black !important;
+            background: rgba(0,0,0,0.0);
-        }
+            border: 2px solid rgba(255,255,255,0.0);
+          }
     
-        button[name="playButton"]:focus:after {
+          .interactiveArea:hover button[name="playButton"] {
-          border-color: transparent transparent transparent black !important;
+            background: rgba(0,0,0,0.4);
-        }`;
+            border: 2px solid rgba(255,255,255,1);
+          }
+    
+          .interactiveArea button[name="playButton"]:after {
+            border-color: transparent transparent transparent rgba(255,255,255,0);
+          }
+    
+          .interactiveArea:hover button[name="playButton"]:after {
+            border-color: transparent transparent transparent rgba(255,255,255,1);
+          }
+      
+          button[name="playButton"]:hover:after {
+            border-color: transparent transparent transparent black !important;
+          }
+      
+          button[name="playButton"]:focus:after {
+            border-color: transparent transparent transparent black !important;
+          }`;
 
     this.appendChild(style);
   };