fixing scroll and photo details error

frontend/app/app.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewContainerRef} from "@angular/core";
+import {Component, OnDestroy, OnInit, ViewContainerRef} from "@angular/core";
 import {AuthenticationService} from "./model/network/authentication.service";
 import {UserDTO} from "../../common/entities/UserDTO";
 import {Router} from "@angular/router";
@@ -7,12 +7,15 @@ import {Title} from "@angular/platform-browser";
 import {NotificationService} from "./model/notification.service";
 import {ShareService} from "./gallery/share.service";
 import "hammerjs";
+
 @Component({
   selector: 'pi-gallery2-app',
   template: `<router-outlet></router-outlet>`,
 
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
+
+  private subscription = null;
 
   constructor(private _router: Router,
               private _authenticationService: AuthenticationService,
@@ -25,7 +28,7 @@ export class AppComponent implements OnInit {
   async ngOnInit() {
     this._title.setTitle(Config.Client.applicationTitle);
     await this._shareService.wait();
-    this._authenticationService.user.subscribe((user: UserDTO) => {
+    this.subscription = this._authenticationService.user.subscribe((user: UserDTO) => {
       if (this._authenticationService.isAuthenticated()) {
         if (this.isLoginPage()) {
           return this.toGallery();
@@ -38,7 +41,12 @@ export class AppComponent implements OnInit {
 
     });
 
+  }
 
+  ngOnDestroy() {
+    if (this.subscription != null) {
+      this.subscription.unsubscribe();
+    }
   }
 
   private isLoginPage() {

frontend/app/gallery/gallery.component.ts

@@ -89,6 +89,9 @@ export class GalleryComponent implements OnInit, OnDestroy {
     if (this.subscription.route !== null) {
       this.subscription.route.unsubscribe();
     }
+    if (this.subscription.timer !== null) {
+      this.subscription.timer.unsubscribe();
+    }
   }
 
   private onContentChange = (content) => {

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

@@ -6,6 +6,7 @@ import {
   HostListener,
   Input,
   OnChanges,
+  OnDestroy,
   QueryList,
   ViewChild,
   ViewChildren
@@ -23,7 +24,7 @@ import {Config} from "../../../../common/config/public/Config";
   templateUrl: './grid.gallery.component.html',
   styleUrls: ['./grid.gallery.component.css'],
 })
-export class GalleryGridComponent implements OnChanges, AfterViewInit {
+export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy {
 
   @ViewChild('gridContainer') gridContainer: ElementRef;
   @ViewChildren(GalleryPhotoComponent) gridPhotoQL: QueryList<GalleryPhotoComponent>;
@@ -41,8 +42,10 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit {
 
   private onScrollFired = false;
   private scrollbarWidth = 0;
+  private helperTime = null;
 
-  constructor(private overlayService: OverlayService, private changeDetector: ChangeDetectorRef) {
+  constructor(private overlayService: OverlayService,
+              private changeDetector: ChangeDetectorRef) {
   }
 
   ngOnChanges() {
@@ -52,11 +55,18 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit {
     this.updateContainerWidth();
     this.sortPhotos();
     this.mergeNewPhotos();
-    setTimeout(() => {
+    this.helperTime = setTimeout(() => {
       this.renderPhotos();
     }, 0);
   }
 
+  ngOnDestroy() {
+
+    if (this.helperTime != null) {
+      clearTimeout(this.helperTime);
+    }
+  }
+
   @HostListener('window:resize')
   onResize() {
     if (this.isAfterViewInit === false) {
@@ -73,6 +83,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit {
 
   isAfterViewInit: boolean = false;
 
+
   ngAfterViewInit() {
     this.lightbox.setGridPhotoQL(this.gridPhotoQL);
 
@@ -82,7 +93,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit {
     this.updateContainerWidth();
     this.sortPhotos();
     this.clearRenderedPhotos();
-    setTimeout(() => {
+    this.helperTime = setTimeout(() => {
       this.renderPhotos();
     }, 0);
     this.isAfterViewInit = true;
@@ -142,7 +153,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit {
 
     while (this.renderedPhotoIndex < this.photos.length &&
     (this.shouldRenderMore(renderedContentHeight) === true ||
-    this.renderedPhotoIndex < numberOfPhotos)) {
+      this.renderedPhotoIndex < numberOfPhotos)) {
       let ret = this.renderARow();
       if (ret === null) {
         throw "Gridphotos rendering failed";

frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts

@@ -6,6 +6,7 @@ import {RouterLink} from "@angular/router";
 import {Thumbnail, ThumbnailManagerService} from "../../thumnailManager.service";
 import {Config} from "../../../../../common/config/public/Config";
 import {AnimationBuilder} from "@angular/animations";
+
 @Component({
   selector: 'gallery-grid-photo',
   templateUrl: './photo.grid.gallery.component.html',
@@ -56,6 +57,10 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.thumbnail.destroy();
+
+    if (this.animationTimer != null) {
+      clearTimeout(this.animationTimer);
+    }
   }
 
 
@@ -93,7 +98,6 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
     }
     this.animationTimer = setTimeout(() => {
       this.infoBar.background = "rgba(0,0,0,0.8)";
-
       if (!this.infoDiv) {
         this.animationTimer = setTimeout(() => {
           if (!this.infoDiv) {
@@ -104,6 +108,7 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
         }, 10);
         return;
       }
+      this.infoBar.marginTop = -this.infoDiv.nativeElement.clientHeight;
     }, 1);
 
   }

frontend/app/gallery/lightbox/lightbox.gallery.component.ts

@@ -34,6 +34,7 @@ export class GalleryLightboxComponent implements OnDestroy {
   public navigation = {hasPrev: true, hasNext: true};
   public blackCanvasOpacity: any = 0;
 
+  private activePhotoId: number = null;
   public activePhoto: GalleryPhotoComponent;
   private gridPhotoQL: QueryList<GalleryPhotoComponent>;
 
@@ -64,6 +65,13 @@ export class GalleryLightboxComponent implements OnDestroy {
     if (this.changeSubscription != null) {
       this.changeSubscription.unsubscribe();
     }
+
+    if (this.visibilityTimer != null) {
+      clearTimeout(this.visibilityTimer);
+    }
+    if (this.iPvisibilityTimer != null) {
+      clearTimeout(this.iPvisibilityTimer);
+    }
   }
 
 //noinspection JSUnusedGlobalSymbols
@@ -94,8 +102,6 @@ export class GalleryLightboxComponent implements OnDestroy {
   }
 
 
-  activePhotoId: number = null;
-
   private showPhoto(photoIndex: number, resize: boolean = true) {
     this.activePhoto = null;
     this.changeDetector.detectChanges();
@@ -182,6 +188,7 @@ export class GalleryLightboxComponent implements OnDestroy {
 
       this.visible = false;
       this.activePhoto = null;
+      this.activePhotoId = null;
       this.overlayService.hideOverlay();
     });
 

frontend/app/settings/_abstract/abstract.settings.component.ts

@@ -24,6 +24,7 @@ export abstract class SettingsComponent<T> implements OnInit, OnDestroy, OnChang
   public error: string = null;
   public changed: boolean = false;
   private subscription = null;
+  private settingsSubscription = null;
 
   public settings: T = <any>{};
   public original: T = <any>{};
@@ -34,7 +35,7 @@ export abstract class SettingsComponent<T> implements OnInit, OnDestroy, OnChang
               public _settingsService: AbstractSettingsService<T>,
               protected notification: NotificationService,
               private sliceFN: (s: IPrivateConfig) => T) {
-    this._settingsService.Settings.subscribe(this.onNewSettings);
+    this.settingsSubscription = this._settingsService.Settings.subscribe(this.onNewSettings);
     this.onNewSettings(this._settingsService._settingsService.settings.value);
   }
 
@@ -67,6 +68,9 @@ export abstract class SettingsComponent<T> implements OnInit, OnDestroy, OnChang
     if (this.subscription != null) {
       this.subscription.unsubscribe();
     }
+    if (this.settingsSubscription != null) {
+      this.settingsSubscription.unsubscribe();
+    }
   }
 
   private async getSettings() {