aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu/notification.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu/notification.component.ts')
-rw-r--r--client/src/app/menu/notification.component.ts107
1 files changed, 107 insertions, 0 deletions
diff --git a/client/src/app/menu/notification.component.ts b/client/src/app/menu/notification.component.ts
new file mode 100644
index 000000000..b7d9e9abb
--- /dev/null
+++ b/client/src/app/menu/notification.component.ts
@@ -0,0 +1,107 @@
1import { Subject, Subscription } from 'rxjs'
2import { filter } from 'rxjs/operators'
3import { Component, EventEmitter, Output, OnDestroy, OnInit, ViewChild } from '@angular/core'
4import { NavigationEnd, Router } from '@angular/router'
5import { Notifier, PeerTubeSocket, ScreenService } from '@app/core'
6import { UserNotificationService } from '@app/shared/shared-main'
7import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
8
9@Component({
10 selector: 'my-notification',
11 templateUrl: './notification.component.html',
12 styleUrls: [ './notification.component.scss' ]
13})
14export 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 result => {
41 this.unreadNotifications = Math.min(result, 99) // Limit number to 99
42 this.subscribeToNotifications()
43 },
44
45 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}