Search: Add photo.isStack() method to only flag actual stacks #3993

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

frontend/src/component/photo/cards.vue

@@ -97,7 +97,7 @@
               </video>
             </v-layout>
 
-            <button v-if="photo.Type !== 'image' || photo.Files.length > 1"
+            <button v-if="photo.Type !== 'image' || photo.isStack()"
                   class="input-open"
                   @touchstart.stop.prevent="input.touchStart($event, index)"
                   @touchend.stop.prevent="onOpen($event, index, !isSharedView, photo.Type === 'live')"

frontend/src/component/photo/mosaic.vue

@@ -65,7 +65,7 @@
               </video>
             </v-layout>
 
-            <button v-if="photo.Type !== 'image' || photo.Files.length > 1"
+            <button v-if="photo.Type !== 'image' || photo.isStack()"
                   class="input-open"
                   @touchstart.stop.prevent="input.touchStart($event, index)"
                   @touchend.stop.prevent="onOpen($event, index, !isSharedView, photo.Type === 'live')"

frontend/src/model/photo.js

@@ -205,12 +205,12 @@ export class Photo extends RestModel {
       this.Portrait,
       this.Favorite,
       this.Private,
-      this.Files.length > 1
+      this.isStack()
     );
   }
 
   generateClasses = memoizeOne(
-    (isPlayable, isInClipboard, portrait, favorite, isPrivate, hasMultipleFiles) => {
+    (isPlayable, isInClipboard, portrait, favorite, isPrivate, isStack) => {
       let classes = ["is-photo", "uid-" + this.UID, "type-" + this.Type];
 
       if (isPlayable) classes.push("is-playable");
@@ -218,7 +218,7 @@ export class Photo extends RestModel {
       if (portrait) classes.push("is-portrait");
       if (favorite) classes.push("is-favorite");
       if (isPrivate) classes.push("is-private");
-      if (hasMultipleFiles) classes.push("is-stack");
+      if (isStack) classes.push("is-stack");
 
       return classes;
     }
@@ -402,6 +402,30 @@ export class Photo extends RestModel {
     return files.some((f) => f.Video);
   });
 
+  isStack() {
+    return this.generateIsStack(this.Type, this.Files);
+  }
+
+  generateIsStack = memoizeOne((type, files) => {
+    if (type !== MediaImage) {
+      return false;
+    } else if (!files) {
+      return false;
+    } else if (files.length < 2) {
+      return false;
+    }
+
+    let jpegs = 0;
+
+    this.Files.forEach((f) => {
+      if (f && f.FileType === FormatJpeg) {
+        jpegs++;
+      }
+    });
+
+    return jpegs > 1;
+  });
+
   videoParams() {
     const uri = this.videoUrl();
 

frontend/tests/unit/model/photo_test.js

@@ -113,7 +113,7 @@ describe("model/photo", () => {
     assert.include(result2, "is-portrait");
     assert.include(result2, "is-favorite");
     assert.include(result2, "is-private");
-    assert.include(result2, "is-stack");
+    assert.notInclude(result2, "is-stack");
     assert.include(result2, "is-playable");
   });