Add user notification animation

[oweals/peertube.git] / client / src / app / menu / avatar-notification.component.ts

diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index 60e09072641e282fc5e363484fa92a9a90d4a714..a77a001ca4255f083d68cc7badc2e63e2f39a42a 100644 (file)
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { User } from '../shared/users/user.model'
 import { UserNotificationService } from '@app/shared/users/user-notification.service'
 import { Subscription } from 'rxjs'
-import { Notifier } from '@app/core'
+import { Notifier, UserNotificationSocket } from '@app/core'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { NavigationEnd, Router } from '@angular/router'
 import { filter } from 'rxjs/operators'
@@ -17,26 +17,29 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
   @Input() user: User
 
   unreadNotifications = 0
+  loaded = false
 
   private notificationSub: Subscription
   private routeSub: Subscription
 
   constructor (
     private userNotificationService: UserNotificationService,
+    private userNotificationSocket: UserNotificationSocket,
     private notifier: Notifier,
     private router: Router
-  ) {}
+  ) {
+  }
 
   ngOnInit () {
     this.userNotificationService.countUnreadNotifications()
-      .subscribe(
-        result => {
-          this.unreadNotifications = Math.min(result, 99) // Limit number to 99
-          this.subscribeToNotifications()
-        },
+        .subscribe(
+          result => {
+            this.unreadNotifications = Math.min(result, 99) // Limit number to 99
+            this.subscribeToNotifications()
+          },
 
-        err => this.notifier.error(err.message)
-      )
+          err => this.notifier.error(err.message)
+        )
 
     this.routeSub = this.router.events
                         .pipe(filter(event => event instanceof NavigationEnd))
@@ -52,13 +55,22 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
     this.popover.close()
   }
 
-  private subscribeToNotifications () {
-    this.notificationSub = this.userNotificationService.getMyNotificationsSocket()
-                               .subscribe(data => {
-                                 if (data.type === 'new') return this.unreadNotifications++
-                                 if (data.type === 'read') return this.unreadNotifications--
-                                 if (data.type === 'read-all') return this.unreadNotifications = 0
-                               })
+  onPopoverHidden () {
+    this.loaded = false
+  }
+
+  onNotificationLoaded () {
+    this.loaded = true
+  }
+
+  private async subscribeToNotifications () {
+    const obs = await this.userNotificationSocket.getMyNotificationsSocket()
+
+    this.notificationSub = obs.subscribe(data => {
+      if (data.type === 'new') return this.unreadNotifications++
+      if (data.type === 'read') return this.unreadNotifications--
+      if (data.type === 'read-all') return this.unreadNotifications = 0
+    })
   }
 
 }