viewer: fix for multi-facerect

src/components/Timeline.vue

@@ -73,7 +73,7 @@
           <div
             class="photo"
             v-for="photo of item.photos"
-            :key="photo.key || photo.fileid"
+            :key="photo.key"
             :style="{
               height: photo.dispH + 'px',
               width: photo.dispW + 'px',
@@ -245,8 +245,8 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
 
       // Get params
       const dayid = parseInt(parts[1]);
-      const fileid = parseInt(parts[2]);
-      if (isNaN(dayid) || isNaN(fileid)) return;
+      const key = parts[2];
+      if (isNaN(dayid) || !key) return;
 
       // Get day
       const day = this.heads[dayid]?.day;
@@ -257,14 +257,13 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
       }
 
       // Find photo
-      const photo = day?.detail?.find((p) => p.fileid === fileid);
+      const photo = day?.detail?.find((p) => p.key === key);
       if (!photo) return;
 
       // Scroll to photo if initializing
       if (!from) {
         const index = this.list.findIndex(
-          (r) =>
-            r.day.dayid === dayid && r.photos?.find((p) => p.fileid === fileid)
+          (r) => r.day.dayid === dayid && r.photos?.includes(photo)
         );
         if (index !== -1) {
           (this.$refs.recycler as any).scrollToItem(index);
@@ -1095,7 +1094,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
         photo.key = `${photo.fileid}-${val}`;
         seen.set(photo.fileid, val + 1);
       } else {
-        photo.key = null;
+        photo.key = `${photo.fileid}`;
         seen.set(photo.fileid, 1);
       }
 

src/components/Viewer.vue

@@ -335,9 +335,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
         if (this.TagDayIDValueSet.has(r.dayId)) continue;
 
         if (r.day.dayid == anchorPhoto.d.dayid) {
-          startIndex = r.day.detail.findIndex(
-            (p) => p.fileid === anchorPhoto.fileid
-          );
+          startIndex = r.day.detail.indexOf(anchorPhoto);
           this.globalAnchor = this.globalCount;
         }
 
@@ -433,7 +431,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
     // Get the thumbnail image
     this.photoswipe.addFilter("thumbEl", (thumbEl, data, index) => {
       const photo = this.list[index - this.globalAnchor];
-      if (photo.flag & this.c.FLAG_IS_VIDEO) return thumbEl;
+      if (!photo || photo.flag & this.c.FLAG_IS_VIDEO) return thumbEl;
       return this.thumbElem(photo) || thumbEl;
     });
 
@@ -489,9 +487,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
   /** Get element for thumbnail if it exists */
   private thumbElem(photo: IPhoto): HTMLImageElement | undefined {
     if (!photo) return;
-    const elems = document.querySelectorAll(
-      `.memories-thumb-${photo.key || photo.fileid}`
-    );
+    const elems = document.querySelectorAll(`.memories-thumb-${photo.key}`);
 
     if (elems.length === 0) return;
     if (elems.length === 1) return elems[0] as HTMLImageElement;

src/components/frame/Photo.vue

@@ -29,7 +29,7 @@
     >
       <img
         ref="img"
-        :class="['fill-block', `memories-thumb-${data.key || data.fileid}`]"
+        :class="['fill-block', `memories-thumb-${data.key}`]"
         draggable="false"
         :src="src"
         :key="data.fileid"

src/services/Utils.ts

@@ -220,7 +220,7 @@ export function getFolderRoutePath(basePath: string) {
  * Get route hash for viewer for photo
  */
 export function getViewerHash(photo: IPhoto) {
-  return `#v/${photo.dayid}/${photo.fileid}`;
+  return `#v/${photo.dayid}/${photo.key}`;
 }
 
 /** Set a timer that renews if existing */