diff options
author | Chocobozzz <me@florianbigard.com> | 2019-01-08 11:26:41 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2019-01-09 11:15:15 +0100 |
commit | 2f1548fda32c3ba9e53913270394eedfacd55986 (patch) | |
tree | afee28df36a9e00f921603d9091e5d08d5818159 /client/src/app/+my-account/my-account-settings/my-account-notification-preferences | |
parent | f7cc67b455a12ccae9b0ea16876d166720364357 (diff) | |
download | PeerTube-2f1548fda32c3ba9e53913270394eedfacd55986.tar.gz PeerTube-2f1548fda32c3ba9e53913270394eedfacd55986.tar.zst PeerTube-2f1548fda32c3ba9e53913270394eedfacd55986.zip |
Add notifications in the client
Diffstat (limited to 'client/src/app/+my-account/my-account-settings/my-account-notification-preferences')
4 files changed, 144 insertions, 0 deletions
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/index.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/index.ts new file mode 100644 index 000000000..5e1d51339 --- /dev/null +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/index.ts | |||
@@ -0,0 +1 @@ | |||
export * from './my-account-notification-preferences.component' | |||
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html new file mode 100644 index 000000000..59422d682 --- /dev/null +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html | |||
@@ -0,0 +1,19 @@ | |||
1 | <div class="custom-row"> | ||
2 | <div i18n>Activities</div> | ||
3 | <div i18n>Web</div> | ||
4 | <div i18n *ngIf="emailEnabled">Email</div> | ||
5 | </div> | ||
6 | |||
7 | <div class="custom-row" *ngFor="let notificationType of notificationSettingKeys"> | ||
8 | <ng-container *ngIf="hasUserRight(notificationType)"> | ||
9 | <div>{{ labelNotifications[notificationType] }}</div> | ||
10 | |||
11 | <div> | ||
12 | <p-inputSwitch [(ngModel)]="webNotifications[notificationType]" (onChange)="updateWebSetting(notificationType, $event.checked)"></p-inputSwitch> | ||
13 | </div> | ||
14 | |||
15 | <div *ngIf="emailEnabled"> | ||
16 | <p-inputSwitch [(ngModel)]="emailNotifications[notificationType]" (onChange)="updateEmailSetting(notificationType, $event.checked)"></p-inputSwitch> | ||
17 | </div> | ||
18 | </ng-container> | ||
19 | </div> | ||
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss new file mode 100644 index 000000000..6feb16ab1 --- /dev/null +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss | |||
@@ -0,0 +1,25 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .custom-row { | ||
5 | display: flex; | ||
6 | align-items: center; | ||
7 | border-bottom: 1px solid rgba(0, 0, 0, 0.10); | ||
8 | |||
9 | &:first-child { | ||
10 | font-size: 16px; | ||
11 | |||
12 | & > div { | ||
13 | font-weight: $font-semibold; | ||
14 | } | ||
15 | } | ||
16 | |||
17 | & > div { | ||
18 | width: 350px; | ||
19 | } | ||
20 | |||
21 | & > div { | ||
22 | padding: 10px | ||
23 | } | ||
24 | } | ||
25 | |||
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts new file mode 100644 index 000000000..519bdfab4 --- /dev/null +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts | |||
@@ -0,0 +1,99 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | ||
2 | import { User } from '@app/shared' | ||
3 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
4 | import { Subject } from 'rxjs' | ||
5 | import { UserNotificationSetting, UserNotificationSettingValue, UserRight } from '../../../../../../shared' | ||
6 | import { Notifier, ServerService } from '@app/core' | ||
7 | import { debounce } from 'lodash-es' | ||
8 | import { UserNotificationService } from '@app/shared/users/user-notification.service' | ||
9 | |||
10 | @Component({ | ||
11 | selector: 'my-account-notification-preferences', | ||
12 | templateUrl: './my-account-notification-preferences.component.html', | ||
13 | styleUrls: [ './my-account-notification-preferences.component.scss' ] | ||
14 | }) | ||
15 | export class MyAccountNotificationPreferencesComponent implements OnInit { | ||
16 | @Input() user: User = null | ||
17 | @Input() userInformationLoaded: Subject<any> | ||
18 | |||
19 | notificationSettingKeys: (keyof UserNotificationSetting)[] = [] | ||
20 | emailNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any | ||
21 | webNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any | ||
22 | labelNotifications: { [ id in keyof UserNotificationSetting ]: string } = {} as any | ||
23 | rightNotifications: { [ id in keyof Partial<UserNotificationSetting> ]: UserRight } = {} as any | ||
24 | emailEnabled: boolean | ||
25 | |||
26 | private savePreferences = debounce(this.savePreferencesImpl.bind(this), 500) | ||
27 | |||
28 | constructor ( | ||
29 | private i18n: I18n, | ||
30 | private userNotificationService: UserNotificationService, | ||
31 | private serverService: ServerService, | ||
32 | private notifier: Notifier | ||
33 | ) { | ||
34 | this.labelNotifications = { | ||
35 | newVideoFromSubscription: this.i18n('New video from your subscriptions'), | ||
36 | newCommentOnMyVideo: this.i18n('New comment on your video'), | ||
37 | videoAbuseAsModerator: this.i18n('New video abuse on local video'), | ||
38 | blacklistOnMyVideo: this.i18n('One of your video is blacklisted/unblacklisted'), | ||
39 | myVideoPublished: this.i18n('Video published (after transcoding/scheduled update)'), | ||
40 | myVideoImportFinished: this.i18n('Video import finished'), | ||
41 | newUserRegistration: this.i18n('A new user registered on your instance'), | ||
42 | newFollow: this.i18n('You or your channel(s) has a new follower'), | ||
43 | commentMention: this.i18n('Someone mentioned you in video comments') | ||
44 | } | ||
45 | this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[] | ||
46 | |||
47 | this.rightNotifications = { | ||
48 | videoAbuseAsModerator: UserRight.MANAGE_VIDEO_ABUSES, | ||
49 | newUserRegistration: UserRight.MANAGE_USERS | ||
50 | } | ||
51 | |||
52 | this.emailEnabled = this.serverService.getConfig().email.enabled | ||
53 | } | ||
54 | |||
55 | ngOnInit () { | ||
56 | this.userInformationLoaded.subscribe(() => this.loadNotificationSettings()) | ||
57 | } | ||
58 | |||
59 | hasUserRight (field: keyof UserNotificationSetting) { | ||
60 | const rightToHave = this.rightNotifications[field] | ||
61 | if (!rightToHave) return true // No rights needed | ||
62 | |||
63 | return this.user.hasRight(rightToHave) | ||
64 | } | ||
65 | |||
66 | updateEmailSetting (field: keyof UserNotificationSetting, value: boolean) { | ||
67 | if (value === true) this.user.notificationSettings[field] |= UserNotificationSettingValue.EMAIL | ||
68 | else this.user.notificationSettings[field] &= ~UserNotificationSettingValue.EMAIL | ||
69 | |||
70 | this.savePreferences() | ||
71 | } | ||
72 | |||
73 | updateWebSetting (field: keyof UserNotificationSetting, value: boolean) { | ||
74 | if (value === true) this.user.notificationSettings[field] |= UserNotificationSettingValue.WEB | ||
75 | else this.user.notificationSettings[field] &= ~UserNotificationSettingValue.WEB | ||
76 | |||
77 | this.savePreferences() | ||
78 | } | ||
79 | |||
80 | private savePreferencesImpl () { | ||
81 | this.userNotificationService.updateNotificationSettings(this.user, this.user.notificationSettings) | ||
82 | .subscribe( | ||
83 | () => { | ||
84 | this.notifier.success(this.i18n('Preferences saved'), undefined, 2000) | ||
85 | }, | ||
86 | |||
87 | err => this.notifier.error(err.message) | ||
88 | ) | ||
89 | } | ||
90 | |||
91 | private loadNotificationSettings () { | ||
92 | for (const key of Object.keys(this.user.notificationSettings)) { | ||
93 | const value = this.user.notificationSettings[key] | ||
94 | this.emailNotifications[key] = value & UserNotificationSettingValue.EMAIL | ||
95 | |||
96 | this.webNotifications[key] = value & UserNotificationSettingValue.WEB | ||
97 | } | ||
98 | } | ||
99 | } | ||