Ensure active dialog times out correctly

src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.ts

@@ -19,21 +19,22 @@ export class LogOutDialogComponent implements OnInit, OnDestroy {
     private store: Store<GeneralEntityAppState>) { }
 
   private autoLogout: Subscription;
-  public countDown: number;
-  public countdownTotal: number;
+  private countDown: number;
+  private countdownTotal: number;
   public percentage = 0;
 
   ngOnInit() {
     const updateInterval = 500;
-    this.countdownTotal = this.countDown = this.data.expiryDate - Date.now();
+    this.countdownTotal = this.calcCountdown();
     this.autoLogout = interval(updateInterval)
       .pipe(
         tap(() => {
+          // Recalculate this every time, as `interval` slows down when tab not focused
+          this.countDown = this.calcCountdown();
           if (this.countDown <= 0) {
             this.autoLogout.unsubscribe();
             this.store.dispatch(new Logout());
           } else {
-            this.countDown -= updateInterval;
             this.percentage = ((this.countdownTotal - this.countDown) / this.countdownTotal) * 100;
           }
         })
@@ -44,4 +45,8 @@ export class LogOutDialogComponent implements OnInit, OnDestroy {
     this.percentage = 0;
     this.autoLogout.unsubscribe();
   }
+
+  private calcCountdown(): number {
+    return this.data.expiryDate - Date.now();
+  }
 }

src/frontend/packages/core/src/core/page-visible.ts

@@ -17,6 +17,7 @@ class VisibilityStatusConstant {
 export class PageVisible {
   private hidden: string;
   private visibilityState: string;
+  // private visibilityChanged: string;
 
   constructor(@Inject(DOCUMENT) private document: Document) {
     this.defineBrowserSupport();
@@ -30,6 +31,20 @@ export class PageVisible {
     return VisibilityStatusConstant.HIDDEN === this.getVisibilityState() || this.isHidden();
   }
 
+  // nowVisible(): Observable<any> {
+  //   return this.getVisibility().pipe(
+  //     startWith(false),
+  //     pairwise(),
+  //     filter(([oldV, newV]) => oldV === false && newV === true)
+  //   );
+  // }
+
+  // getVisibility(): Observable<boolean> {
+  //   return fromEvent(document, this.visibilityChanged).pipe(
+  //     map(() => this.isPageVisible())
+  //   );
+  // }
+
   private isHidden(): boolean {
     return document[this.hidden];
   }
@@ -42,12 +57,15 @@ export class PageVisible {
     if (typeof document[HiddenKeyConstant.DEFAULT] !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
       this.hidden = HiddenKeyConstant.DEFAULT;
       this.visibilityState = 'visibilityState';
+      // this.visibilityChanged = 'visibilitychange';
     } else if (typeof document[HiddenKeyConstant.MS] !== 'undefined') {
       this.hidden = HiddenKeyConstant.MS;
       this.visibilityState = 'msVisibilityState';
+      // this.visibilityChanged = 'msvisibilitychange';
     } else if (typeof document[HiddenKeyConstant.WEB_KIT] !== 'undefined') {
       this.hidden = HiddenKeyConstant.WEB_KIT;
       this.visibilityState = 'webkitVisibilityState';
+      // this.visibilityChanged = 'webkitvisibilitychange';
     }
   }
 }

src/frontend/packages/core/src/logged-in.service.ts

@@ -95,7 +95,7 @@ export class LoggedInService {
             this.store.select(selectDashboardState),
             this.store.select(s => s.auth)
           ),
-          tap(([i, dashboardState, authState]) => {
+          tap(([, dashboardState, authState]) => {
             this.ngZone.run(() => {
               this._checkSession(dashboardState, authState);
             });