Slideshow working 'well enough' for Christmas

Signed-off-by: James Ketrenos <james.p.ketrenos@intel.com>

frontend/elements/ken-burns.html

@@ -24,9 +24,25 @@
         box-sizing: border-box;
         pointer-events: all;
       }
+
+      #image {
+        display: inline-block;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-position: center center;
+        background-repeat: no-repeat;
+        transition: opacity 0.5s ease-in-out;
+        -webkit-transition: opacity 0.5s ease-in-out;
+    }
+
   </style>
   
-    <img id="image">
+    <div id="image">
+    </div>
 
 </template>
 
@@ -83,10 +99,9 @@
 
                     this.showImage();
 
-                    this.$.image.src = this.image.src;
+                    this.$.image.style.backgroundImage = 'url(' + this.image.src + ')';
                     this.$.image.style.opacity = 1;
                     this.image = undefined;
-                    this.setActive(true);
                 }, remaining);
             }.bind(this, path);
 

frontend/src/ketr-photos/ketr-photos.html

@@ -1245,10 +1245,19 @@
             delete this.slideshowTimeout;
             return;
           }
-          this.slideshowTimeout = window.setTimeout(this.slideshowNext.bind(this), 24 * 1000);
+          
+          if (this.slideshowTimeout) {
+            window.cancelTimeout(this.slideshowTimeout);
+            delete this.slideshowTimeout;
+          }
+          
           if (!this.thumbnails.length) {
+            this.slideshowTimeout = window.setTimeout(this.slideshowNext.bind(this), 150);
             return;
           }
+
+          this.slideshowTimeout = window.setTimeout(this.slideshowNext.bind(this), 24 * 1000);
+
           var photo = this.thumbnails[Math.floor(this.thumbnails.length * Math.random())].item;
           this.$.kenBurns.item = photo;
           this.$.kenBurns.src = this.base + photo.path + "thumbs/scaled/" + photo.filename;