Frontend: Add slideshow button to photo viewer #269

Signed-off-by: Michael Mayer <michael@liquidbytes.net>

frontend/src/common/viewer.js

@@ -101,9 +101,12 @@ class Viewer {
 
         this.gallery = gallery;
 
-        gallery.listen("beforeChange", function() {
-            Event.publish("viewer.change", {gallery: gallery, item: gallery.currItem});
-        });
+        gallery.listen("close", () => Event.publish("viewer.pause"));
+        gallery.listen("shareLinkClick", () => Event.publish("viewer.pause"));
+        gallery.listen("initialZoomIn", () => Event.publish("viewer.pause"));
+        gallery.listen("initialZoomOut", () => Event.publish("viewer.pause"));
+
+        gallery.listen("beforeChange", () => Event.publish("viewer.change", {gallery: gallery, item: gallery.currItem}));
 
         gallery.listen("beforeResize", () => {
             realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;

frontend/src/component/p-photo-viewer.vue

@@ -34,6 +34,11 @@
 
                     <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 
+                    <button class="pswp__button" style="background: none;" @click.exact="onSlideshow" title="Slideshow">
+                        <v-icon v-show="!interval" size="16" color="white">slideshow</v-icon>
+                        <v-icon v-show="interval" size="16" color="white">pause</v-icon>
+                    </button>
+
                     <div class="pswp__preloader">
                         <div class="pswp__preloader__icn">
                             <div class="pswp__preloader__cut">
@@ -75,10 +80,12 @@
                 config: this.$config.values,
                 item: new Thumb(),
                 subscriptions: [],
+                interval: false,
             };
         },
         created() {
             this.subscriptions['viewer.change'] = Event.subscribe('viewer.change', this.onChange);
+            this.subscriptions['viewer.pause'] = Event.subscribe('viewer.pause', this.onPause);
         },
         destroyed() {
             for (let i = 0; i < this.subscriptions.length; i++) {
@@ -92,6 +99,31 @@
             toggleLike() {
                 this.item.toggleLike();
             },
+            onPause() {
+                if (this.interval) {
+                    clearInterval(this.interval);
+                    this.interval = false;
+                }
+            },
+            onSlideshow() {
+                if (this.interval) {
+                    this.onPause();
+                    return;
+                }
+
+                const self = this;
+                const psp = this.$viewer.gallery;
+
+                psp.next();
+
+                self.interval = setInterval(() => {
+                    if (psp && typeof psp.next === "function") {
+                        psp.next();
+                    } else {
+                        this.onPause();
+                    }
+                }, 4000);
+            },
             onEdit() {
                 const g = this.$viewer.gallery; // Gallery
                 let index = 0;