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

   1 import { Subject, Subscription } from 'rxjs'
   2 import { filter } from 'rxjs/operators'
   3 import { Component, EventEmitter, Output, OnDestroy, OnInit, ViewChild } from '@angular/core'
   4 import { NavigationEnd, Router } from '@angular/router'
   5 import { Notifier, PeerTubeSocket, ScreenService } 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-notification',
  11   templateUrl: './notification.component.html',
  12   styleUrls: [ './notification.component.scss' ]
  13 })
  14 export class NotificationComponent implements OnInit, OnDestroy {
  15   @ViewChild('popover', { static: true }) popover: NgbPopover
  16
  17   @Output() navigate = new EventEmitter<HTMLAnchorElement>()
  18
  19   unreadNotifications = 0
  20   loaded = false
  21   opened = 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 screenService: ScreenService,
  31     private peertubeSocket: PeerTubeSocket,
  32     private notifier: Notifier,
  33     private router: Router
  34   ) {
  35   }
  36
  37   ngOnInit () {
  38     this.userNotificationService.countUnreadNotifications()
  39         .subscribe({
  40           next: result => {
  41             this.unreadNotifications = Math.min(result, 99) // Limit number to 99
  42             this.subscribeToNotifications()
  43           },
  44
  45           error: err => this.notifier.error(err.message)
  46         })
  47
  48     this.routeSub = this.router.events
  49                         .pipe(filter(event => event instanceof NavigationEnd))
  50                         .subscribe(() => this.closePopover())
  51   }
  52
  53   ngOnDestroy () {
  54     if (this.notificationSub) this.notificationSub.unsubscribe()
  55     if (this.routeSub) this.routeSub.unsubscribe()
  56   }
  57
  58   get isInMobileView () {
  59     return this.screenService.isInMobileView()
  60   }
  61
  62   closePopover () {
  63     this.popover.close()
  64   }
  65
  66   onPopoverShown () {
  67     this.opened = true
  68
  69     document.querySelector('menu').scrollTo(0, 0) // Reset menu scroll to easy lock
  70     document.querySelector('menu').addEventListener('scroll', this.onMenuScrollEvent)
  71   }
  72
  73   onPopoverHidden () {
  74     this.loaded = false
  75     this.opened = false
  76
  77     document.querySelector('menu').removeEventListener('scroll', this.onMenuScrollEvent)
  78   }
  79
  80   // Lock menu scroll when menu scroll to avoid fleeing / detached dropdown
  81   onMenuScrollEvent () {
  82     document.querySelector('menu').scrollTo(0, 0)
  83   }
  84
  85   onNotificationLoaded () {
  86     this.loaded = true
  87   }
  88
  89   onNavigate (link: HTMLAnchorElement) {
  90     this.closePopover()
  91     this.navigate.emit(link)
  92   }
  93
  94   markAllAsRead () {
  95     this.markAllAsReadSubject.next(true)
  96   }
  97
  98   private async subscribeToNotifications () {
  99     const obs = await this.peertubeSocket.getMyNotificationsSocket()
 100
 101     this.notificationSub = obs.subscribe(data => {
 102       if (data.type === 'new') return this.unreadNotifications++
 103       if (data.type === 'read') return this.unreadNotifications--
 104       if (data.type === 'read-all') return this.unreadNotifications = 0
 105     })
 106   }
 107 }