diff options
author | Chocobozzz <me@florianbigard.com> | 2019-06-19 14:55:58 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-06-19 15:05:36 +0200 |
commit | 3caf77d3b11f2dbc12e52d665183d36604c1dab9 (patch) | |
tree | 53e08727d5f1dc8be2bd4f4a14dadc05f607a9fb /client/src/app/+my-account/my-account-settings/my-account-video-settings | |
parent | bbe078ba55be635b5fc92f8f6286c45792b9e7e5 (diff) | |
download | PeerTube-3caf77d3b11f2dbc12e52d665183d36604c1dab9.tar.gz PeerTube-3caf77d3b11f2dbc12e52d665183d36604c1dab9.tar.zst PeerTube-3caf77d3b11f2dbc12e52d665183d36604c1dab9.zip |
Add language filters in user preferences
Diffstat (limited to 'client/src/app/+my-account/my-account-settings/my-account-video-settings')
2 files changed, 68 insertions, 11 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 049119fa8..2796dd2db 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 | |||
@@ -16,6 +16,21 @@ | |||
16 | </div> | 16 | </div> |
17 | 17 | ||
18 | <div class="form-group"> | 18 | <div class="form-group"> |
19 | <label i18n for="videoLanguages">Only display videos in the following languages</label> | ||
20 | <my-help i18n-customHtml | ||
21 | customHtml="In Recently added, Trending, Local and Search pages" | ||
22 | ></my-help> | ||
23 | |||
24 | <div> | ||
25 | <p-multiSelect | ||
26 | [options]="languageItems" formControlName="videoLanguages" showToggleAll="true" | ||
27 | [defaultLabel]="getDefaultVideoLanguageLabel()" [selectedItemsLabel]="getSelectedVideoLanguageLabel()" | ||
28 | emptyFilterMessage="No results found" i18n-emptyFilterMessage | ||
29 | ></p-multiSelect> | ||
30 | </div> | ||
31 | </div> | ||
32 | |||
33 | <div class="form-group"> | ||
19 | <my-peertube-checkbox | 34 | <my-peertube-checkbox |
20 | inputName="webTorrentEnabled" formControlName="webTorrentEnabled" | 35 | inputName="webTorrentEnabled" formControlName="webTorrentEnabled" |
21 | i18n-labelText labelText="Use WebTorrent to exchange parts of the video with others" | 36 | i18n-labelText labelText="Use WebTorrent to exchange parts of the video with others" |
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 b8f80bc1a..77febf179 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,11 +1,13 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | 1 | import { Component, Input, OnInit } from '@angular/core' |
2 | import { Notifier } from '@app/core' | 2 | import { Notifier, ServerService } from '@app/core' |
3 | import { UserUpdateMe } from '../../../../../../shared' | 3 | import { UserUpdateMe } from '../../../../../../shared' |
4 | import { AuthService } from '../../../core' | 4 | import { AuthService } from '../../../core' |
5 | import { FormReactive, User, UserService } from '../../../shared' | 5 | import { FormReactive, User, UserService } from '../../../shared' |
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | 6 | import { I18n } from '@ngx-translate/i18n-polyfill' |
7 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | 7 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' |
8 | import { Subject } from 'rxjs' | 8 | import { Subject } from 'rxjs' |
9 | import { SelectItem } from 'primeng/api' | ||
10 | import { switchMap } from 'rxjs/operators' | ||
9 | 11 | ||
10 | @Component({ | 12 | @Component({ |
11 | selector: 'my-account-video-settings', | 13 | selector: 'my-account-video-settings', |
@@ -16,11 +18,14 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI | |||
16 | @Input() user: User = null | 18 | @Input() user: User = null |
17 | @Input() userInformationLoaded: Subject<any> | 19 | @Input() userInformationLoaded: Subject<any> |
18 | 20 | ||
21 | languageItems: SelectItem[] = [] | ||
22 | |||
19 | constructor ( | 23 | constructor ( |
20 | protected formValidatorService: FormValidatorService, | 24 | protected formValidatorService: FormValidatorService, |
21 | private authService: AuthService, | 25 | private authService: AuthService, |
22 | private notifier: Notifier, | 26 | private notifier: Notifier, |
23 | private userService: UserService, | 27 | private userService: UserService, |
28 | private serverService: ServerService, | ||
24 | private i18n: I18n | 29 | private i18n: I18n |
25 | ) { | 30 | ) { |
26 | super() | 31 | super() |
@@ -30,31 +35,60 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI | |||
30 | this.buildForm({ | 35 | this.buildForm({ |
31 | nsfwPolicy: null, | 36 | nsfwPolicy: null, |
32 | webTorrentEnabled: null, | 37 | webTorrentEnabled: null, |
33 | autoPlayVideo: null | 38 | autoPlayVideo: null, |
39 | videoLanguages: null | ||
34 | }) | 40 | }) |
35 | 41 | ||
36 | this.userInformationLoaded.subscribe(() => { | 42 | this.serverService.videoLanguagesLoaded |
37 | this.form.patchValue({ | 43 | .pipe(switchMap(() => this.userInformationLoaded)) |
38 | nsfwPolicy: this.user.nsfwPolicy, | 44 | .subscribe(() => { |
39 | webTorrentEnabled: this.user.webTorrentEnabled, | 45 | const languages = this.serverService.getVideoLanguages() |
40 | autoPlayVideo: this.user.autoPlayVideo === true | 46 | |
41 | }) | 47 | this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ] |
42 | }) | 48 | this.languageItems = this.languageItems |
49 | .concat(languages.map(l => ({ label: l.label, value: l.id }))) | ||
50 | |||
51 | const videoLanguages = this.user.videoLanguages | ||
52 | ? this.user.videoLanguages | ||
53 | : this.languageItems.map(l => l.value) | ||
54 | |||
55 | this.form.patchValue({ | ||
56 | nsfwPolicy: this.user.nsfwPolicy, | ||
57 | webTorrentEnabled: this.user.webTorrentEnabled, | ||
58 | autoPlayVideo: this.user.autoPlayVideo === true, | ||
59 | videoLanguages | ||
60 | }) | ||
61 | }) | ||
43 | } | 62 | } |
44 | 63 | ||
45 | updateDetails () { | 64 | updateDetails () { |
46 | const nsfwPolicy = this.form.value['nsfwPolicy'] | 65 | const nsfwPolicy = this.form.value['nsfwPolicy'] |
47 | const webTorrentEnabled = this.form.value['webTorrentEnabled'] | 66 | const webTorrentEnabled = this.form.value['webTorrentEnabled'] |
48 | const autoPlayVideo = this.form.value['autoPlayVideo'] | 67 | const autoPlayVideo = this.form.value['autoPlayVideo'] |
68 | |||
69 | let videoLanguages: string[] = this.form.value['videoLanguages'] | ||
70 | if (Array.isArray(videoLanguages)) { | ||
71 | if (videoLanguages.length === this.languageItems.length) { | ||
72 | videoLanguages = null // null means "All" | ||
73 | } else if (videoLanguages.length > 20) { | ||
74 | this.notifier.error('Too many languages are enabled. Please enable them all or stay below 20 enabled languages.') | ||
75 | return | ||
76 | } else if (videoLanguages.length === 0) { | ||
77 | this.notifier.error('You need to enabled at least 1 video language.') | ||
78 | return | ||
79 | } | ||
80 | } | ||
81 | |||
49 | const details: UserUpdateMe = { | 82 | const details: UserUpdateMe = { |
50 | nsfwPolicy, | 83 | nsfwPolicy, |
51 | webTorrentEnabled, | 84 | webTorrentEnabled, |
52 | autoPlayVideo | 85 | autoPlayVideo, |
86 | videoLanguages | ||
53 | } | 87 | } |
54 | 88 | ||
55 | this.userService.updateMyProfile(details).subscribe( | 89 | this.userService.updateMyProfile(details).subscribe( |
56 | () => { | 90 | () => { |
57 | this.notifier.success(this.i18n('Information updated.')) | 91 | this.notifier.success(this.i18n('Video settings updated.')) |
58 | 92 | ||
59 | this.authService.refreshUserInformation() | 93 | this.authService.refreshUserInformation() |
60 | }, | 94 | }, |
@@ -62,4 +96,12 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI | |||
62 | err => this.notifier.error(err.message) | 96 | err => this.notifier.error(err.message) |
63 | ) | 97 | ) |
64 | } | 98 | } |
99 | |||
100 | getDefaultVideoLanguageLabel () { | ||
101 | return this.i18n('No language') | ||
102 | } | ||
103 | |||
104 | getSelectedVideoLanguageLabel () { | ||
105 | return this.i18n('{{\'{0} languages selected') | ||
106 | } | ||
65 | } | 107 | } |