Frontend: Refactor photo model to use primary file as preview #212 #217

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

frontend/src/dialog/p-photo-share-dialog.vue

@@ -30,7 +30,7 @@
                             <v-card tile
                                     class="ma-1 elevation-0"
                                     :title="model.PhotoTitle">
-                                <v-img :src="model.getFileThumbUrl(0, 'tile_500')"
+                                <v-img :src="model.getThumbnailUrl('tile_500')"
                                        aspect-ratio="1"
                                        class="accent lighten-2 elevation-0"
                                        style="cursor: pointer"

frontend/src/dialog/photo-edit/meta.vue

@@ -12,7 +12,7 @@
                         <v-card tile
                                 class="ma-1 elevation-0"
                                 :title="model.PhotoTitle">
-                            <v-img :src="model.getFileThumbUrl(0, 'tile_500')"
+                            <v-img :src="model.getThumbnailUrl('tile_500')"
                                    aspect-ratio="1"
                                    class="accent lighten-2 elevation-0"
                                    style="cursor: pointer"
@@ -286,7 +286,7 @@
                             </v-flex>
                             <v-flex xs12 text-xs-right class="pt-3">
                                 <span class="subheading pb-3">
-                                    Note: This is a first draft and may contain bugs.
+                                    Note: This is a first draft and may contain bugs
                                 </span>
                                 <v-btn @click.stop="cancel" depressed color="secondary-light" class="p-photo-dialog-cancel">
                                     <translate>Cancel</translate>
@@ -379,26 +379,17 @@
         },
         methods: {
             openPhoto() {
-                const file = this.model.Files[0];
-
-                const values = [new Photo({
-                    PhotoUUID: this.model.PhotoUUID,
-                    PhotoTitle: this.model.PhotoTitle,
-                    FileHash: file.FileHash,
-                    FileWidth: file.FileWidth,
-                    FileHeight: file.FileHeight,
-                })];
-
-                this.$viewer.show(values, 0)
+                this.$viewer.show([this.model], 0)
             },
             refresh(model) {
                 if(!model.hasId()) return;
 
+                model.refreshFileAttr();
+
                 if(model.TakenAt) {
                     this.date = DateTime.fromISO(model.TakenAt).toISODate();
 
                     this.time = DateTime.fromISO(model.TakenAt).toFormat("HH:mm:ss");
-                    console.log("TIME", this.time);
                 }
             },
             save() {

frontend/src/model/photo.js

@@ -87,16 +87,28 @@ class Photo extends Abstract {
         return "https://www.google.com/maps/place/" + this.PhotoLat + "," + this.PhotoLng;
     }
 
+    refreshFileAttr() {
+        if(!this.Files) {
+            return
+        }
+
+        const primary = this.Files.find(f => f.FilePrimary === true);
+
+        if(!primary) {
+            return
+        }
+
+        this.FileHash = primary.FileHash;
+        this.FileWidth = primary.FileWidth;
+        this.FileHeight = primary.FileHeight;
+    }
+
     getThumbnailUrl(type) {
+        if(this.FileHash) {
             return "/api/v1/thumbnails/" + this.FileHash + "/" + type;
         }
 
-    getFileThumbUrl(index, type) {
-        if(!this.Files || !this.Files[index]) {
-            return "";
-        }
-
-        return "/api/v1/thumbnails/" + this.Files[index].FileHash + "/" + type;
+        return "/api/v1/svg/photo";
     }
 
     getDownloadUrl() {

internal/api/svg.go

@@ -1,5 +1,11 @@
 package api
 
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
 var photoIconSvg = []byte(`
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <path d="M0 0h24v24H0z" fill="none"/>
@@ -12,3 +18,18 @@ var albumIconSvg = []byte(`<svg xmlns="http://www.w3.org/2000/svg" width="24" he
 
 var labelIconSvg = []byte(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <path d="M0 0h24v24H0z" fill="none"/><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg>`)
+
+// GET /api/v1/svg/*
+func GetSvg(router *gin.RouterGroup) {
+	router.GET("/svg/photo", func(c *gin.Context) {
+		c.Data(http.StatusOK, "image/svg+xml", photoIconSvg)
+	})
+
+	router.GET("/svg/label", func(c *gin.Context) {
+		c.Data(http.StatusOK, "image/svg+xml", labelIconSvg)
+	})
+
+	router.GET("/svg/album", func(c *gin.Context) {
+		c.Data(http.StatusOK, "image/svg+xml", albumIconSvg)
+	})
+}

internal/server/routes.go

@@ -68,6 +68,8 @@ func registerRoutes(router *gin.Engine, conf *config.Config) {
 		api.GetSettings(v1, conf)
 		api.SaveSettings(v1, conf)
 
+		api.GetSvg(v1)
+
 		api.Websocket(v1, conf)
 	}