Improve screen resizing

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

@@ -1,3 +1,8 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
 div {
     /*display: block;*/
     line-height: normal;

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

@@ -1,4 +1,4 @@
-<div #gridContainer>
+<div #gridContainer [style.width]="renderDelayTimer ? containerWidth+'px' : ''">
     <app-gallery-grid-photo
             *ngFor="let gridPhoto of photosToRender"
             (click)="photoClicked(gridPhoto.media)"

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

@@ -55,6 +55,7 @@ export class GalleryGridComponent
   private MAX_ROW_COUNT = 5;
   private onScrollFired = false;
   private helperTime: number = null;
+  public renderDelayTimer: number = null; // delays render on resize
   private renderedPhotoIndex = 0;
 
   constructor(
@@ -94,7 +95,6 @@ export class GalleryGridComponent
       return;
     }
     this.updateContainerDimensions();
-    this.mergeNewPhotos();
     this.helperTime = window.setTimeout((): void => {
       this.renderPhotos();
       if (this.delayedRenderUpToPhoto) {
@@ -107,6 +107,10 @@ export class GalleryGridComponent
     if (this.helperTime != null) {
       clearTimeout(this.helperTime);
     }
+    if (this.renderDelayTimer) {
+      clearTimeout(this.renderDelayTimer);
+      this.renderDelayTimer = null;
+    }
     if (this.subscriptions.route !== null) {
       this.subscriptions.route.unsubscribe();
       this.subscriptions.route = null;
@@ -118,6 +122,12 @@ export class GalleryGridComponent
     if (this.isAfterViewInit === false) {
       return;
     }
+    if (this.renderDelayTimer) {
+      clearTimeout(this.renderDelayTimer);
+      this.renderDelayTimer = null;
+    }
+    this.renderDelayTimer = window.setTimeout(() => {
+      this.renderDelayTimer = null;
       // render the same amount of images on resize
       const renderedIndex = this.renderedPhotoIndex;
       // do not rerender if container is not changes
@@ -125,6 +135,7 @@ export class GalleryGridComponent
         return;
       }
       this.renderPhotos(renderedIndex);
+    }, 100);
   }
 
   photoClicked(media: MediaDTO): void {
@@ -256,43 +267,6 @@ export class GalleryGridComponent
     this.changeDetector.detectChanges();
   }
 
-  // TODO: This is deprecated,
-  // we do not post update galleries anymore since the cover member in the DriectoryDTO
-  private mergeNewPhotos(): void {
-    // merge new data with old one
-    let lastSameIndex = 0;
-    let lastRowId = null;
-    let i = 0;
-    for (; i < this.media.length && i < this.photosToRender.length; ++i) {
-      // If a media changed the whole row has to be removed
-      if (this.photosToRender[i].rowId !== lastRowId) {
-        lastSameIndex = i;
-        lastRowId = this.photosToRender[i].rowId;
-      }
-      if (this.photosToRender[i].equals(this.media[i]) === false) {
-        break;
-      }
-    }
-    // if all the same
-    if (
-      this.photosToRender.length > 0 &&
-      i === this.photosToRender.length &&
-      i === this.media.length &&
-      this.photosToRender[i - 1].equals(this.media[i - 1])
-    ) {
-      lastSameIndex = i;
-    }
-    if (lastSameIndex > 0) {
-      this.photosToRender.splice(
-        lastSameIndex,
-        this.photosToRender.length - lastSameIndex
-      );
-      this.renderedPhotoIndex = lastSameIndex;
-    } else {
-      this.clearRenderedPhotos();
-    }
-  }
-
   /**
    * Returns true, if scroll is >= 70% to render more images.
    * Or of onscroll rendering is off: return always to render all the images at once
@@ -348,12 +322,12 @@ export class GalleryGridComponent
     PageHelper.showScrollY();
     // if the width changed a bit or the height changed a lot
     if (
-      this.containerWidth !== this.gridContainer.nativeElement.clientWidth ||
+        this.containerWidth !== this.gridContainer.nativeElement.parentElement.clientWidth ||
         this.screenHeight < window.innerHeight * 0.75 ||
         this.screenHeight > window.innerHeight * 1.25
     ) {
       this.screenHeight = window.innerHeight;
-      this.containerWidth = this.gridContainer.nativeElement.clientWidth;
+      this.containerWidth = this.gridContainer.nativeElement.parentElement.clientWidth;
       this.clearRenderedPhotos();
       if (!pre) {
         PageHelper.hideScrollY();