From 69f4d24f56e42bd91657bde3409883ebc42d82f5 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james.p.ketrenos@intel.com>
Date: Tue, 25 Dec 2018 13:33:43 -0800
Subject: [PATCH] Slideshow working 'well enough' for Christmas

Signed-off-by: James Ketrenos <james.p.ketrenos@intel.com>
---
 frontend/elements/ken-burns.html          | 21 ++++++++++++++++++---
 frontend/src/ketr-photos/ketr-photos.html | 11 ++++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/elements/ken-burns.html b/frontend/elements/ken-burns.html
index d23d27b..02278f4 100755
--- a/frontend/elements/ken-burns.html
+++ b/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);
 
diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html
index 1b6d5c6..f9c5f8d 100755
--- a/frontend/src/ketr-photos/ketr-photos.html
+++ b/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;