UX: Prefer original media files for cards view details #2040

This also adds camera lens information to the cards view details.

Signed-off-by: Michael Mayer <michael@photoprism.app>

frontend/src/common/util.js

@@ -243,6 +243,11 @@ export default class Util {
     }
 
     switch (codec) {
+      case "webp":
+      case "extended webp":
+        return "WebP";
+      case "webm":
+        return "WebM";
       case "av1c":
       case "av01":
         return "AV1";
@@ -288,6 +293,8 @@ export default class Util {
         return "Matroska Multimedia Container (MKV)";
       case "webp":
         return "Google WebP";
+      case "extended webp":
+        return "Extended WebP";
       case "webm":
         return "Google WebM";
       case "mpeg":

frontend/src/component/photo/cards.vue

@@ -205,7 +205,7 @@
                 </button>
                 <button v-else-if="photo.Type === 'live'" :title="$gettext('Live')"
                         @click.exact="openPhoto(index)">
-                  <i>play_circle_outline</i>
+                  <i>play_circle</i>
                   {{ photo.getVideoInfo() }}
                 </button>
                 <button v-else-if="photo.Type === 'animated'" :title="$gettext('Animated')+' GIF'"
@@ -223,6 +223,11 @@
                   <i>photo_camera</i>
                   {{ photo.getPhotoInfo() }}
                 </button>
+                <button v-if="photo.LensID > 1" :title="$gettext('Lens')" class="action-lens-edit"
+                        :data-uid="photo.UID" @click.exact="editPhoto(index)">
+                  <i>camera</i>
+                  {{ photo.LensModel }}
+                </button>
                 <template v-if="filter.order === 'name' && $config.feature('download')">
                   <br>
                   <button :title="$gettext('Name')"

frontend/src/model/photo.js

@@ -521,15 +521,38 @@ export class Photo extends RestModel {
       return this;
     }
 
+    // Return the primary image, if found.
     let file = files.find((f) => !!f.Primary);
-
     if (file) {
       return file;
     }
 
+    // Find and return the first JPEG or PNG image otherwise.
     return files.find((f) => f.FileType === FormatJpeg || f.FileType === FormatPng);
   });
 
+  originalFile() {
+    // Default to main file if there is only one.
+    if (this.Files?.length < 2) {
+      return this.mainFile();
+    }
+
+    // If there are multiple files, find the first one with
+    // a format other than JPEG, e.g. RAW or Live.
+    return this.getOriginalFileFromFiles(this.Files);
+  }
+
+  getOriginalFileFromFiles = memoizeOne((files) => {
+    // Find first original media file with a format other than JPEG.
+    let file = files.find((f) => !f.Sidecar && f.Root === "/" && f.FileType !== FormatJpeg);
+    if (file) {
+      return file;
+    }
+
+    // Find and return the primary JPEG or PNG otherwise.
+    return this.getMainFileFromFiles(files);
+  });
+
   jpegFiles() {
     if (!this.Files) {
       return [this];
@@ -853,7 +876,7 @@ export class Photo extends RestModel {
   });
 
   getPhotoInfo = () => {
-    let file = this.mainFile() || this.videoFile();
+    let file = this.originalFile() || this.videoFile();
     return this.generatePhotoInfo(this.Camera, this.CameraModel, this.CameraMake, file);
   };
 

internal/photoprism/mediafile.go

@@ -827,7 +827,7 @@ func (m *MediaFile) IsVector() bool {
 
 // IsSidecar checks if the file is a metadata sidecar file, independent of the storage location.
 func (m *MediaFile) IsSidecar() bool {
-	return m.Media() == media.Sidecar
+	return !m.Media().Main()
 }
 
 // IsSVG returns true if this is a SVG vector graphics.

pkg/txt/specialwords.go

@@ -1,6 +1,7 @@
 package txt
 
 var SpecialWords = map[string]string{
+	"av":                 "AV",
 	"xxs":                "XXS",
 	"xs":                 "XS",
 	"s":                  "S",
@@ -81,6 +82,8 @@ var SpecialWords = map[string]string{
 	"eps":                "EPS",
 	"mov":                "MOV",
 	"avc":                "AVC",
+	"hvc":                "HVC",
+	"hevc":               "HEVC",
 	"wto":                "WTO",
 	"fifa":               "FIFA",
 	"yaml":               "YAML",
@@ -164,6 +167,8 @@ var SpecialWords = map[string]string{
 	"zuerich":            "Zürich",
 	"wg":                 "WG",
 	"webdav":             "WebDAV",
+	"webp":               "WebP",
+	"webm":               "WebM",
 	"goland":             "GoLand",
 	"phpstorm":           "PhpStorm",
 	"vuejs":              "VueJS",