From 25ea75cf54c22fc575ffc97ba10999b47d5bc28e Mon Sep 17 00:00:00 2001
From: Yura <yura.bondarenko@atmire.com>
Date: Mon, 4 Oct 2021 19:00:15 +0200
Subject: [PATCH] Pause notification countdown on hover

---
 .../notification/notification.component.html  |  2 ++
 .../notification/notification.component.ts    | 29 ++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index e8b3d37b5f..57ac27d42f 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -1,4 +1,6 @@
 <div class="alert {{notification.type}} alert-dismissible m-3 shadow" role="alert"
+     (mouseenter)="isPaused$.next(true)"
+     (mouseleave)="isPaused$.next(false)"
      [@enterLeave]="animate">
 
   <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">
diff --git a/src/app/shared/notifications/notification/notification.component.ts b/src/app/shared/notifications/notification/notification.component.ts
index 0c64d3e263..6976b67834 100644
--- a/src/app/shared/notifications/notification/notification.component.ts
+++ b/src/app/shared/notifications/notification/notification.component.ts
@@ -1,4 +1,4 @@
-import {of as observableOf,  Observable } from 'rxjs';
+import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -23,6 +23,7 @@ import { fadeInEnter, fadeInState, fadeOutLeave, fadeOutState } from '../../anim
 import { NotificationAnimationsStatus } from '../models/notification-animations-type';
 import { isNotEmpty } from '../../empty.util';
 import { INotification } from '../models/notification.model';
+import { filter, first } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-notification',
@@ -65,6 +66,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
   private count = 0;
   private start: any;
   private diff: any;
+  public isPaused$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public animate: string;
 
   constructor(private notificationService: NotificationsService,
@@ -99,17 +101,22 @@ export class NotificationComponent implements OnInit, OnDestroy {
   private instance = () => {
     this.diff = (new Date().getTime() - this.start) - (this.count * this.speed);
 
-    if (this.count++ === this.steps) {
-      this.remove();
-      // this.item.timeoutEnd!.emit();
-    } else if (!this.stopTime) {
-      if (this.showProgressBar) {
-        this.progressWidth += 100 / this.steps;
-      }
+    this.isPaused$.pipe(
+      filter(paused => !paused),
+      first(),
+    ).subscribe(() => {
+      if (this.count++ === this.steps) {
+        this.remove();
+        // this.item.timeoutEnd!.emit();
+      } else if (!this.stopTime) {
+        if (this.showProgressBar) {
+          this.progressWidth += 100 / this.steps;
+        }
 
-      this.timer = setTimeout(this.instance, (this.speed - this.diff));
-    }
-    this.zone.run(() => this.cdr.detectChanges());
+        this.timer = setTimeout(this.instance, (this.speed - this.diff));
+      }
+      this.zone.run(() => this.cdr.detectChanges());
+    });
   }
 
   public remove() {