1
0
Fork 0
peertube/client/src/app/menu/avatar-notification.component.ts

83 lines
2.3 KiB
TypeScript
Raw Normal View History

2020-01-06 09:59:17 -05:00
import { Subject, Subscription } from 'rxjs'
2019-01-08 05:26:41 -05:00
import { filter } from 'rxjs/operators'
2020-06-23 08:10:17 -04:00
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
import { NavigationEnd, Router } from '@angular/router'
import { Notifier, User, UserNotificationSocket } from '@app/core'
import { UserNotificationService } from '@app/shared/shared-main'
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
2019-01-08 05:26:41 -05:00
@Component({
selector: 'my-avatar-notification',
templateUrl: './avatar-notification.component.html',
styleUrls: [ './avatar-notification.component.scss' ]
})
export class AvatarNotificationComponent implements OnInit, OnDestroy {
2019-07-24 10:05:59 -04:00
@ViewChild('popover', { static: true }) popover: NgbPopover
2020-01-06 09:59:17 -05:00
2019-01-08 05:26:41 -05:00
@Input() user: User
unreadNotifications = 0
2019-02-20 04:16:04 -05:00
loaded = false
2019-01-08 05:26:41 -05:00
2020-01-06 09:59:17 -05:00
markAllAsReadSubject = new Subject<boolean>()
2019-01-08 05:26:41 -05:00
private notificationSub: Subscription
private routeSub: Subscription
constructor (
private userNotificationService: UserNotificationService,
private userNotificationSocket: UserNotificationSocket,
2019-01-08 05:26:41 -05:00
private notifier: Notifier,
private router: Router
2019-02-15 09:52:18 -05:00
) {
}
2019-01-08 05:26:41 -05:00
ngOnInit () {
this.userNotificationService.countUnreadNotifications()
2019-02-15 09:52:18 -05:00
.subscribe(
result => {
this.unreadNotifications = Math.min(result, 99) // Limit number to 99
this.subscribeToNotifications()
},
2019-01-08 05:26:41 -05:00
2019-02-15 09:52:18 -05:00
err => this.notifier.error(err.message)
)
2019-01-08 05:26:41 -05:00
this.routeSub = this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe(() => this.closePopover())
}
ngOnDestroy () {
if (this.notificationSub) this.notificationSub.unsubscribe()
if (this.routeSub) this.routeSub.unsubscribe()
}
closePopover () {
this.popover.close()
}
2019-02-20 04:16:04 -05:00
onPopoverHidden () {
this.loaded = false
}
onNotificationLoaded () {
this.loaded = true
}
markAllAsRead () {
2020-01-06 09:59:17 -05:00
this.markAllAsReadSubject.next(true)
}
2019-02-15 09:52:18 -05:00
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
})
2019-01-08 05:26:41 -05:00
}
}