diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-02-28 13:52:21 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-02-28 13:52:21 +0100 |
commit | d3217560a611b94f888ecf3de93b428a7521d4de (patch) | |
tree | 26fc984f351afb994dc13c94e138476ded50c76a /client/src/app/+my-account/my-account-settings/my-account-video-settings | |
parent | 64645512b08875c18ebdc009a550cdfa69def955 (diff) | |
download | PeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.tar.gz PeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.tar.zst PeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.zip |
Add visitor settings, rework logged-in dropdown (#2514)
* Add visitor settings, rework logged-in dropdown
* Make user dropdown P2P switch functional
* Fix lint
* Fix unnecessary notification when user logs out
* Simplify visitor settings code and remove unnecessary icons
* Catch parsing errors and reindent menu styles
Diffstat (limited to 'client/src/app/+my-account/my-account-settings/my-account-video-settings')
2 files changed, 51 insertions, 17 deletions
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html index 51a672734..f17829127 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html | |||
@@ -35,6 +35,8 @@ | |||
35 | </div> | 35 | </div> |
36 | </div> | 36 | </div> |
37 | 37 | ||
38 | <ng-content select="inner-title"></ng-content> | ||
39 | |||
38 | <div class="form-group"> | 40 | <div class="form-group"> |
39 | <my-peertube-checkbox | 41 | <my-peertube-checkbox |
40 | inputName="webTorrentEnabled" formControlName="webTorrentEnabled" | 42 | inputName="webTorrentEnabled" formControlName="webTorrentEnabled" |
@@ -56,5 +58,5 @@ | |||
56 | ></my-peertube-checkbox> | 58 | ></my-peertube-checkbox> |
57 | </div> | 59 | </div> |
58 | 60 | ||
59 | <input type="submit" i18n-value value="Save" [disabled]="!form.valid"> | 61 | <input *ngIf="!reactiveUpdate" type="submit" i18n-value value="Save" [disabled]="!form.valid"> |
60 | </form> | 62 | </form> |
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts index a66159b3f..0aaa54cd7 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts | |||
@@ -1,24 +1,31 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | 1 | import { Component, Input, OnInit, OnDestroy } from '@angular/core' |
2 | import { Notifier, ServerService } from '@app/core' | 2 | import { Notifier, ServerService } from '@app/core' |
3 | import { UserUpdateMe } from '../../../../../../shared' | 3 | import { UserUpdateMe } from '../../../../../../shared/models/users' |
4 | import { User, UserService } from '@app/shared/users' | ||
4 | import { AuthService } from '../../../core' | 5 | import { AuthService } from '../../../core' |
5 | import { FormReactive, User, UserService } from '../../../shared' | 6 | import { FormReactive } from '@app/shared/forms/form-reactive' |
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | 7 | import { I18n } from '@ngx-translate/i18n-polyfill' |
7 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | 8 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' |
8 | import { forkJoin, Subject } from 'rxjs' | 9 | import { forkJoin, Subject, Subscription } from 'rxjs' |
9 | import { SelectItem } from 'primeng/api' | 10 | import { SelectItem } from 'primeng/api' |
10 | import { first } from 'rxjs/operators' | 11 | import { first } from 'rxjs/operators' |
12 | import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' | ||
13 | import { pick } from 'lodash-es' | ||
11 | 14 | ||
12 | @Component({ | 15 | @Component({ |
13 | selector: 'my-account-video-settings', | 16 | selector: 'my-account-video-settings', |
14 | templateUrl: './my-account-video-settings.component.html', | 17 | templateUrl: './my-account-video-settings.component.html', |
15 | styleUrls: [ './my-account-video-settings.component.scss' ] | 18 | styleUrls: [ './my-account-video-settings.component.scss' ] |
16 | }) | 19 | }) |
17 | export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit { | 20 | export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit, OnDestroy { |
18 | @Input() user: User = null | 21 | @Input() user: User = null |
22 | @Input() reactiveUpdate = false | ||
23 | @Input() notifyOnUpdate = true | ||
19 | @Input() userInformationLoaded: Subject<any> | 24 | @Input() userInformationLoaded: Subject<any> |
20 | 25 | ||
21 | languageItems: SelectItem[] = [] | 26 | languageItems: SelectItem[] = [] |
27 | defaultNSFWPolicy: NSFWPolicyType | ||
28 | formValuesWatcher: Subscription | ||
22 | 29 | ||
23 | constructor ( | 30 | constructor ( |
24 | protected formValidatorService: FormValidatorService, | 31 | protected formValidatorService: FormValidatorService, |
@@ -32,6 +39,8 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI | |||
32 | } | 39 | } |
33 | 40 | ||
34 | ngOnInit () { | 41 | ngOnInit () { |
42 | let oldForm: any | ||
43 | |||
35 | this.buildForm({ | 44 | this.buildForm({ |
36 | nsfwPolicy: null, | 45 | nsfwPolicy: null, |
37 | webTorrentEnabled: null, | 46 | webTorrentEnabled: null, |
@@ -42,8 +51,9 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI | |||
42 | 51 | ||
43 | forkJoin([ | 52 | forkJoin([ |
44 | this.serverService.getVideoLanguages(), | 53 | this.serverService.getVideoLanguages(), |
54 | this.serverService.getConfig(), | ||
45 | this.userInformationLoaded.pipe(first()) | 55 | this.userInformationLoaded.pipe(first()) |
46 | ]).subscribe(([ languages ]) => { | 56 | ]).subscribe(([ languages, config ]) => { |
47 | this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ] | 57 | this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ] |
48 | this.languageItems = this.languageItems | 58 | this.languageItems = this.languageItems |
49 | .concat(languages.map(l => ({ label: l.label, value: l.id }))) | 59 | .concat(languages.map(l => ({ label: l.label, value: l.id }))) |
@@ -52,17 +62,32 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI | |||
52 | ? this.user.videoLanguages | 62 | ? this.user.videoLanguages |
53 | : this.languageItems.map(l => l.value) | 63 | : this.languageItems.map(l => l.value) |
54 | 64 | ||
65 | this.defaultNSFWPolicy = config.instance.defaultNSFWPolicy | ||
66 | |||
55 | this.form.patchValue({ | 67 | this.form.patchValue({ |
56 | nsfwPolicy: this.user.nsfwPolicy, | 68 | nsfwPolicy: this.user.nsfwPolicy || this.defaultNSFWPolicy, |
57 | webTorrentEnabled: this.user.webTorrentEnabled, | 69 | webTorrentEnabled: this.user.webTorrentEnabled, |
58 | autoPlayVideo: this.user.autoPlayVideo === true, | 70 | autoPlayVideo: this.user.autoPlayVideo === true, |
59 | autoPlayNextVideo: this.user.autoPlayNextVideo, | 71 | autoPlayNextVideo: this.user.autoPlayNextVideo, |
60 | videoLanguages | 72 | videoLanguages |
61 | }) | 73 | }) |
74 | |||
75 | if (this.reactiveUpdate) { | ||
76 | oldForm = { ...this.form.value } | ||
77 | this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => { | ||
78 | const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k]) | ||
79 | oldForm = { ...this.form.value } | ||
80 | this.updateDetails([updatedKey]) | ||
81 | }) | ||
82 | } | ||
62 | }) | 83 | }) |
63 | } | 84 | } |
64 | 85 | ||
65 | updateDetails () { | 86 | ngOnDestroy () { |
87 | this.formValuesWatcher?.unsubscribe() | ||
88 | } | ||
89 | |||
90 | updateDetails (onlyKeys?: string[]) { | ||
66 | const nsfwPolicy = this.form.value[ 'nsfwPolicy' ] | 91 | const nsfwPolicy = this.form.value[ 'nsfwPolicy' ] |
67 | const webTorrentEnabled = this.form.value['webTorrentEnabled'] | 92 | const webTorrentEnabled = this.form.value['webTorrentEnabled'] |
68 | const autoPlayVideo = this.form.value['autoPlayVideo'] | 93 | const autoPlayVideo = this.form.value['autoPlayVideo'] |
@@ -81,7 +106,7 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI | |||
81 | } | 106 | } |
82 | } | 107 | } |
83 | 108 | ||
84 | const details: UserUpdateMe = { | 109 | let details: UserUpdateMe = { |
85 | nsfwPolicy, | 110 | nsfwPolicy, |
86 | webTorrentEnabled, | 111 | webTorrentEnabled, |
87 | autoPlayVideo, | 112 | autoPlayVideo, |
@@ -89,15 +114,22 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI | |||
89 | videoLanguages | 114 | videoLanguages |
90 | } | 115 | } |
91 | 116 | ||
92 | this.userService.updateMyProfile(details).subscribe( | 117 | if (onlyKeys) details = pick(details, onlyKeys) |
93 | () => { | ||
94 | this.notifier.success(this.i18n('Video settings updated.')) | ||
95 | 118 | ||
96 | this.authService.refreshUserInformation() | 119 | if (this.authService.isLoggedIn()) { |
97 | }, | 120 | this.userService.updateMyProfile(details).subscribe( |
121 | () => { | ||
122 | this.authService.refreshUserInformation() | ||
98 | 123 | ||
99 | err => this.notifier.error(err.message) | 124 | if (this.notifyOnUpdate) this.notifier.success(this.i18n('Video settings updated.')) |
100 | ) | 125 | }, |
126 | |||
127 | err => this.notifier.error(err.message) | ||
128 | ) | ||
129 | } else { | ||
130 | this.userService.updateMyAnonymousProfile(details) | ||
131 | if (this.notifyOnUpdate) this.notifier.success(this.i18n('Display/Video settings updated.')) | ||
132 | } | ||
101 | } | 133 | } |
102 | 134 | ||
103 | getDefaultVideoLanguageLabel () { | 135 | getDefaultVideoLanguageLabel () { |