support images

Villhellm · May 11, 2020 · c5bf760 · c5bf760
1 parent ff213cb
commit c5bf760
Showing 1 changed file with 31 additions and 5 deletions.
diff --git a/dist/animated-background.js b/dist/animated-background.js
@@ -427,6 +427,14 @@ function renderBackgroundHTML() {
   var html_to_render;
   if (state_url != "" && Hui) {
     var bg = Hui.shadowRoot.getElementById("background-iframe");
+    var video_type = urlIsVideo(state_url);
+    var doc_body;
+    if(video_type){
+      doc_body = `<video id='cinemagraph' autoplay='' loop='' preload='' playsinline='' muted='' poster=''><source src='${state_url}' type='video/${video_type}'></video>`
+    }
+    else{
+      doc_body = `<img src='${state_url}'>`      
+    }
     var source_doc = `
     <html>
     <head>
@@ -451,12 +459,21 @@ function renderBackgroundHTML() {
           left: 50%;
           transform: translate(-50%, -50%);
         }
+
+        img {
+          min-width: 100%;
+          min-height: 100%;
+          width: auto;
+          height: auto;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
       </style>
     </head>  
-    <body>
-      <video id='cinemagraph' autoplay='' loop='' preload='' playsinline='' muted='' poster=''>
-        <source src='${state_url}' type='video/mp4'>
-      </video>
+    <body id='source-body'>
+    ${doc_body}
     </body>
     </html>`;
     if (!bg) {
@@ -485,7 +502,6 @@ function renderBackgroundHTML() {
       Previous_Url = state_url;
     }
     else {
-      html_to_render = `<source src='${state_url}' type='video/mp4'>`;
       if (current_config.entity || (Previous_Url != state_url)) {
         if (!current_config.entity) {
           STATUS_MESSAGE("Applying default background", true);
@@ -499,6 +515,16 @@ function renderBackgroundHTML() {
   }
 }
 
+function urlIsVideo(url){
+  if(url.slice(url.length - 3).toLowerCase() == "mp4" || url.slice(url.length - 4).toLowerCase() == "webm"){
+    return url.slice(url.length - 3).toLowerCase();
+  }
+  if(url.slice(url.length - 4).toLowerCase() == "webm"){
+    return url.slice(url.length - 4).toLowerCase();
+  }
+  return false;
+}
+
 //removes lovelace theme background
 function removeDefaultBackground(node) {
   if (node.style.background != 'transparent' || View_Layout.style.background != 'transparent') {