beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Frontend: Add slideshow button to photo viewer #269

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-05-19 16:50:21 +02:00
parent 4300d45482
commit 8b79aa375a
2 changed files with 38 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/common/viewer.js
View file

@ -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;

32
frontend/src/component/p-photo-viewer.vue
View file

@ -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;