luisgulo/photoprism
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Frontend: Add like button to photo viewer

Browse Source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-04-24 09:55:14 +02:00
parent 89b75a05f1
commit e9c9601a22
3 changed files with 46 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/common/viewer.js
View File

@ -1,5 +1,6 @@
import PhotoSwipe from "photoswipe";
import PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default.js";
import Event from "pubsub-js";
const thumbs = window.clientConfig.thumbnails;
@ -75,6 +76,10 @@ class Viewer {
this.gallery = gallery;
gallery.listen('beforeChange', function() {
Event.publish("viewer.change", {gallery: gallery, item: gallery.currItem});
});
gallery.listen("beforeResize", () => {
realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;
realViewportHeight = gallery.viewportSize.y * window.devicePixelRatio;

26
frontend/src/component/p-photo-viewer.vue
View File

@ -19,10 +19,15 @@
v-if="config.settings.features.download">
</button>
<button class="pswp__button" style="background: none;" @click.exact="editDialog" title="Edit">
<button class="pswp__button" style="background: none;" @click.exact="onEdit" title="Edit">
<v-icon size="16" color="white">edit</v-icon>
</button>
<button class="pswp__button" style="background: none;" @click.exact="toggleLike" title="Like">
<v-icon v-if="item.favorite" size="16" color="white">favorite</v-icon>
<v-icon v-else size="16" color="white">favorite_border</v-icon>
</button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
@ -59,16 +64,33 @@
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'
import Event from "pubsub-js";
import Thumb from "../model/thumb";
export default {
name: "p-photo-viewer",
data() {
return {
config: this.$config.values,
item: new Thumb(),
subscriptions: [],
};
},
created() {
this.subscriptions['viewer.change'] = Event.subscribe('viewer.change', this.onChange);
},
destroyed() {
for (let i = 0; i < this.subscriptions.length; i++) {
Event.unsubscribe(this.subscriptions[i]);
}
},
methods: {
editDialog() {
onChange(ev, data) {
this.item = data.item;
},
toggleLike() {
this.item.toggleLike();
},
onEdit() {
const g = this.$viewer.gallery; // Gallery
let index = 0;

20
frontend/src/model/thumb.js
View File

@ -1,4 +1,5 @@
import Model from "./model";
import Api from "../common/api";
const thumbs = window.clientConfig.thumbnails;
@ -7,12 +8,23 @@ class Thumb extends Model {
return {
uuid: "",
title: "",
favorite: false,
original_w: "",
original_h: "",
download_url: "",
};
}
toggleLike() {
this.favorite = !this.favorite;
if (this.favorite) {
return Api.post("photos/" + this.uuid + "/like");
} else {
return Api.delete("photos/" + this.uuid + "/like");
}
}
static fromPhotos(photos) {
let result = [];
@ -31,6 +43,7 @@ class Thumb extends Model {
const result = {
uuid: photo.PhotoUUID,
title: photo.PhotoTitle,
favorite: photo.PhotoFavorite,
download_url: "/api/v1/download/" + photo.FileHash,
original_w: photo.FileWidth,
original_h: photo.FileHeight,
@ -53,6 +66,7 @@ class Thumb extends Model {
const result = {
uuid: photo.PhotoUUID,
title: photo.PhotoTitle,
favorite: photo.PhotoFavorite,
download_url: "/api/v1/download/" + file.FileHash,
original_w: file.FileWidth,
original_h: file.FileHeight,
@ -78,10 +92,10 @@ class Thumb extends Model {
if (!p.Files) return;
p.Files.forEach((f) => {
if (f.FileType === "jpg") {
result.push(this.fromFile(p, f));
if (f.FileType === "jpg") {
result.push(this.fromFile(p, f));
}
}
}
);
});