client/src/app/menu/avatar-notification.component.ts

   1 import { Subject, Subscription } from 'rxjs'
   2 import { filter } from 'rxjs/operators'
   3 import { Component, EventEmitter, Input, Output, OnDestroy, OnInit, ViewChild } from '@angular/core'
   4 import { NavigationEnd, Router } from '@angular/router'
   5 import { Notifier, User, PeerTubeSocket } from '@app/core'
   6 import { UserNotificationService } from '@app/shared/shared-main'
   7 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
   8
   9 @Component({
  10   selector: 'my-avatar-notification',
  11   templateUrl: './avatar-notification.component.html',
  12   styleUrls: [ './avatar-notification.component.scss' ]
  13 })
  14 export class AvatarNotificationComponent implements OnInit, OnDestroy {
  15   @ViewChild('popover', { static: true }) popover: NgbPopover
  16
  17   @Input() user: User
  18   @Output() navigate = new EventEmitter<HTMLAnchorElement>()
  19
  20   unreadNotifications = 0
  21   loaded = false
  22
  23   markAllAsReadSubject = new Subject<boolean>()
  24
  25   private notificationSub: Subscription
  26   private routeSub: Subscription
  27
  28   constructor (
  29     private userNotificationService: UserNotificationService,
  30     private peertubeSocket: PeerTubeSocket,
  31     private notifier: Notifier,
  32     private router: Router
  33   ) {
  34   }
  35
  36   ngOnInit () {
  37     this.userNotificationService.countUnreadNotifications()
  38         .subscribe(
  39           result => {
  40             this.unreadNotifications = Math.min(result, 99) // Limit number to 99
  41             this.subscribeToNotifications()
  42           },
  43
  44           err => this.notifier.error(err.message)
  45         )
  46
  47     this.routeSub = this.router.events
  48                         .pipe(filter(event => event instanceof NavigationEnd))
  49                         .subscribe(() => this.closePopover())
  50   }
  51
  52   ngOnDestroy () {
  53     if (this.notificationSub) this.notificationSub.unsubscribe()
  54     if (this.routeSub) this.routeSub.unsubscribe()
  55   }
  56
  57   closePopover () {
  58     this.popover.close()
  59   }
  60
  61   onPopoverHidden () {
  62     this.loaded = false
  63   }
  64
  65   onNotificationLoaded () {
  66     this.loaded = true
  67   }
  68
  69   onNavigate (link: HTMLAnchorElement) {
  70     this.navigate.emit(link)
  71   }
  72
  73   markAllAsRead () {
  74     this.markAllAsReadSubject.next(true)
  75   }
  76
  77   private async subscribeToNotifications () {
  78     const obs = await this.peertubeSocket.getMyNotificationsSocket()
  79
  80     this.notificationSub = obs.subscribe(data => {
  81       if (data.type === 'new') return this.unreadNotifications++
  82       if (data.type === 'read') return this.unreadNotifications--
  83       if (data.type === 'read-all') return this.unreadNotifications = 0
  84     })
  85   }
  86
  87 }