Frontend: Show additional photo infos in card view

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

frontend/src/common/util.js

@@ -1,9 +1,9 @@
-const Nanosecond = 1
+const Nanosecond = 1;
-const Microsecond = 1000 * Nanosecond
+const Microsecond = 1000 * Nanosecond;
-const Millisecond = 1000 * Microsecond
+const Millisecond = 1000 * Microsecond;
-const Second = 1000 * Millisecond
+const Second = 1000 * Millisecond;
-const Minute = 60 * Second
+const Minute = 60 * Second;
-const Hour = 60 * Minute
+const Hour = 60 * Minute;
 
 export default class Util {
     static duration(d) {
@@ -12,7 +12,7 @@ export default class Util {
         let neg = d < 0;
 
         if (neg) {
-            u = -u
+            u = -u;
         }
 
         if (u < Second) {
@@ -33,15 +33,15 @@ export default class Util {
             return Math.round(u / Millisecond) + "ms";
         }
 
-        let result = []
+        let result = [];
 
-        let h = Math.floor(u / Hour)
+        let h = Math.floor(u / Hour);
-        let min = Math.floor(u / Minute)%60
+        let min = Math.floor(u / Minute)%60;
-        let sec = Math.ceil(u / Second)%60
+        let sec = Math.ceil(u / Second)%60;
 
-        result.push(h.toString().padStart(2, '0'))
+        result.push(h.toString().padStart(2, "0"));
-        result.push(min.toString().padStart(2, '0'))
+        result.push(min.toString().padStart(2, "0"));
-        result.push(sec.toString().padStart(2, '0'))
+        result.push(sec.toString().padStart(2, "0"));
 
         // return `${h}h${min}m${sec}s`
 

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

@@ -100,7 +100,7 @@
                                     </button>
                                     <button v-else @click.exact="editPhoto(index)" title="Camera">
                                         <v-icon size="14">photo_camera</v-icon>
-                                        {{ photo.getCamera() }}
+                                        {{ photo.getPhotoInfo() }}
                                     </button>
                                     <template v-if="showLocation && photo.LocationID">
                                         <br/>

frontend/src/model/photo.js

@@ -120,13 +120,13 @@ class Photo extends RestModel {
     }
 
     videoUri() {
-        const file = this.videoFile()
+        const file = this.videoFile();
 
         if (!file) {
             return "";
         }
 
-        return "/api/v1/videos/" + file.FileHash + "/mp4"
+        return "/api/v1/videos/" + file.FileHash + "/mp4";
     }
 
     mainFile() {
@@ -252,7 +252,7 @@ class Photo extends RestModel {
         }
 
         if (file.FileLength > 0) {
-            result.push(Util.duration(file.FileLength))
+            result.push(Util.duration(file.FileLength));
         }
 
         if (file.FileWidth && file.FileHeight) {
@@ -265,6 +265,37 @@ class Photo extends RestModel {
             result.push(size.toFixed(1) + " MB");
         }
 
+        if(!result) {
+            return "Video";
+        }
+
+        return result.join(", ");
+    }
+
+    getPhotoInfo() {
+        let result = [];
+        let file = this.mainFile();
+
+        if (this.Camera) {
+            result.push(this.Camera.CameraMake + " " + this.Camera.CameraModel);
+        } else if (this.CameraModel && this.CameraMake) {
+            result.push(this.CameraMake + " " + this.CameraModel);
+        }
+
+        if (file && file.FileWidth && file.FileHeight) {
+            result.push(file.FileWidth + " × " + file.FileHeight);
+        }
+
+        if(file && file.FileSize) {
+            const size = Number.parseFloat(file.FileSize) / 1048576;
+
+            result.push(size.toFixed(1) + " MB");
+        }
+
+        if(!result) {
+            return "Unknown";
+        }
+
         return result.join(", ");
     }