Fixing media merging #706

src/frontend/app/ui/gallery/grid/grid.gallery.component.spec.ts

@@ -109,7 +109,7 @@ describe('GalleryGridComponent', () => {
     component.mediaGroups = [{name: 'removed 2nd 2', media: [phs[0], phs[1]]}, {name: '2', media: [phs[2], phs[5]]}];
     component.mediaToRender = [{name: 'removed 2nd 2', media: [gPhs[0], gPhs[1]]}, {name: '2', media: [gPhs[2], gPhs[5], gPhs[3], gPhs[4]]}];
     component.mergeNewPhotos();
-    expect(component.mediaToRender).toEqual([{name: 'removed 2nd 2', media: [gPhs[0], gPhs[1]]}, {name: '2', media: [gPhs[2]]}]);
+    expect(component.mediaToRender).toEqual([{name: 'removed 2nd 2', media: [gPhs[0], gPhs[1]]}, {name: '2', media: [gPhs[2], gPhs[5]]}]);
     /*-----------------------*/
     component.mediaGroups = [{name: 'removed from 1st', media: [phs[0]]},{name: '2', media: [phs[2],phs[3],phs[4]]}];
     component.mediaToRender = [{name: 'removed from 1st', media: [gPhs[0], gPhs[1]]},{name: '2', media: [gPhs[2], gPhs[3], gPhs[4]]}];
@@ -129,12 +129,20 @@ describe('GalleryGridComponent', () => {
     component.mediaGroups = [{name: 'merged', media: [phs[0], phs[1],phs[2],phs[3]]}];
     component.mediaToRender = [{name: 'merged dif name', media: [gPhs[0], gPhs[1]]},{name: '2', media: [gPhs[2], gPhs[3]]}];
     component.mergeNewPhotos();
-    expect(component.mediaToRender).toEqual([{name: 'merged', media: [gPhs[0], gPhs[1]]}]);
+    expect(component.mediaToRender).toEqual([{name: 'merged', media: [gPhs[0]]}]);
     /*-----------------------*/
     component.mediaGroups = [{name: '3', media: [phs[0], phs[1],phs[2],phs[3]]}];
     component.mediaToRender = [{name: '1', media: [gPhs[0], gPhs[1],gPhs[3], gPhs[2]]}];
     component.mergeNewPhotos();
     expect(component.mediaToRender).toEqual([{name: '3', media: [gPhs[0], gPhs[1]]}]);
+    /*-----------------------*/
+    gPhs[1].rowId = 3;
+    gPhs[3].rowId = 3;
+    gPhs[2].rowId = 3;
+    component.mediaGroups = [{name: '3', media: [phs[0], phs[1],phs[2],phs[3]]}];
+    component.mediaToRender = [{name: '1', media: [gPhs[0], gPhs[1],gPhs[3], gPhs[2]]}];
+    component.mergeNewPhotos();
+    expect(component.mediaToRender).toEqual([{name: '3', media: [gPhs[0]]}]);
 
   });
 });

src/frontend/app/ui/gallery/grid/grid.gallery.component.ts

@@ -176,16 +176,21 @@ export class GalleryGridComponent
       this.clearRenderedPhotos();
       return;
     }
-    //  const minGI = Math.min(this.mediaGroups.length, this.mediaToRender.length) - 1;
-    // const minMI = Math.min(this.mediaGroups[minGI].media.length, this.mediaToRender[minGI].media.length) - 1;
     // merge new data with old one
     const firstDeleteIndex = {
       groups: 0,
       media: 0
     };
+    const lastOkIndex = {
+      groups: 0,
+      media: 0
+    };
     let diffFound = false;
+    let i = 0;
+    let j = 0;
+
+    for (; i < this.mediaGroups.length && i < this.mediaToRender.length; ++i) {
 
-    for (let i = 0; i < this.mediaGroups.length && i < this.mediaToRender.length; ++i) {
      if (diffFound) {
         break;
       }
@@ -193,57 +198,39 @@ export class GalleryGridComponent
       this.mediaToRender[i].name = this.mediaGroups[i].name; // update name if only this changed
 
       let lastRowId = null;
-      for (let j = 0; j < this.mediaGroups[i].media.length && j < this.mediaToRender[i].media.length; ++j) {
+      j = 0;
+      for (; j < this.mediaGroups[i].media.length && j < this.mediaToRender[i].media.length; ++j) {
         const media = this.mediaGroups[i].media[j];
         const gridMedia = this.mediaToRender[i].media[j];
+
         // If a media changed the whole row has to be removed
         if (gridMedia.rowId !== lastRowId) {
           firstDeleteIndex.groups = i;
           firstDeleteIndex.media = j;
           lastRowId = gridMedia.rowId;
         }
+
+        // we go no further. Found the first bad media
         if (gridMedia.equals(media) === false) {
           diffFound = true;
           break;
         }
+        // save the last media that was checked and was ok
+        lastOkIndex.groups = i;
+        lastOkIndex.media = j;
       }
-
+      if (this.mediaGroups[i].media.length != this.mediaToRender[i].media.length) {
-      // delete last row if the length of the two are not equal
-
-      if (!diffFound && this.mediaGroups[i].media.length > this.mediaToRender[i].media.length) {
-        firstDeleteIndex.groups = i;
-        firstDeleteIndex.media = this.mediaToRender[i].media.length;
-        diffFound = true;
-      }
-
-      if (!diffFound && this.mediaGroups[i].media.length < this.mediaToRender[i].media.length) {
-        const endIndex = Math.min(this.mediaToRender[i].media.length, this.mediaGroups[i].media.length) - 1;
-        lastRowId = this.mediaToRender[i].media[endIndex].rowId;
-
-        // make sure we delete if there is no 2 rows
-        diffFound = true;
-        firstDeleteIndex.groups = i;
-        firstDeleteIndex.media = endIndex + 1;
-
-        // finding the last but one row
-        for (let j = endIndex; j >= 0; --j) {
-          const gridMedia = this.mediaToRender[i].media[j];
-          if (gridMedia.rowId !== lastRowId) {
-            firstDeleteIndex.groups = i;
-            firstDeleteIndex.media = j + 1;
         break;
       }
     }
-      }
+
-    }
+    // if all check passed, nothing to delete from the last group
-    if (!diffFound && this.mediaGroups.length < this.mediaToRender.length) {
+    if (!diffFound &&
-      diffFound = true;
+      lastOkIndex.media == this.mediaGroups[lastOkIndex.groups].media.length - 1) {
-      firstDeleteIndex.groups = this.mediaGroups.length - 1;
+      firstDeleteIndex.groups = lastOkIndex.groups;
-      firstDeleteIndex.media = 0;
+      firstDeleteIndex.media = lastOkIndex.media + 1;
     }
 
-    // if all the same
-    if (diffFound) {
     if (firstDeleteIndex.media < 0 && firstDeleteIndex.groups < 0) {
       this.clearRenderedPhotos();
       return;
@@ -254,11 +241,9 @@ export class GalleryGridComponent
       return;
     }
     this.mediaToRender.splice(firstDeleteIndex.groups + 1);
-
     const media = this.mediaToRender[firstDeleteIndex.groups].media;
     media.splice(firstDeleteIndex.media);
 
-    }
 
   }