From d3217560a611b94f888ecf3de93b428a7521d4de Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 28 Feb 2020 13:52:21 +0100 Subject: 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 --- .../my-account-history.component.ts | 2 + .../my-account-interface-settings.component.html | 2 +- .../my-account-interface-settings.component.ts | 40 ++++++++++---- .../my-account-video-settings.component.html | 4 +- .../my-account-video-settings.component.ts | 64 ++++++++++++++++------ .../src/app/+my-account/my-account.component.html | 2 +- client/src/app/+my-account/my-account.module.ts | 4 -- 7 files changed, 84 insertions(+), 34 deletions(-) (limited to 'client/src/app/+my-account') diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.ts b/client/src/app/+my-account/my-account-history/my-account-history.component.ts index 13607119e..5f0ccee50 100644 --- a/client/src/app/+my-account/my-account-history/my-account-history.component.ts +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.ts @@ -11,6 +11,7 @@ import { ScreenService } from '@app/shared/misc/screen.service' import { UserHistoryService } from '@app/shared/users/user-history.service' import { UserService } from '@app/shared' import { Notifier, ServerService } from '@app/core' +import { LocalStorageService } from '@app/shared/misc/storage.service' @Component({ selector: 'my-account-history', @@ -35,6 +36,7 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn protected userService: UserService, protected notifier: Notifier, protected screenService: ScreenService, + protected storageService: LocalStorageService, private confirmService: ConfirmService, private videoService: VideoService, private userHistoryService: UserHistoryService diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html index f034c6bb3..6f48d8f7d 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html @@ -12,5 +12,5 @@ - + diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts index 441f89f10..b6c17c0e3 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts @@ -1,21 +1,26 @@ -import { Component, Input, OnInit } from '@angular/core' +import { Component, Input, OnInit, OnDestroy } from '@angular/core' import { Notifier, ServerService } from '@app/core' import { ServerConfig, UserUpdateMe } from '../../../../../../shared' import { AuthService } from '../../../core' -import { FormReactive, User, UserService } from '../../../shared' +import { FormReactive } from '../../../shared/forms/form-reactive' +import { User, UserService } from '../../../shared/users' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -import { Subject } from 'rxjs' +import { Subject, Subscription } from 'rxjs' @Component({ selector: 'my-account-interface-settings', templateUrl: './my-account-interface-settings.component.html', styleUrls: [ './my-account-interface-settings.component.scss' ] }) -export class MyAccountInterfaceSettingsComponent extends FormReactive implements OnInit { +export class MyAccountInterfaceSettingsComponent extends FormReactive implements OnInit, OnDestroy { @Input() user: User = null + @Input() reactiveUpdate = false + @Input() notifyOnUpdate = true @Input() userInformationLoaded: Subject + formValuesWatcher: Subscription + private serverConfig: ServerConfig constructor ( @@ -48,9 +53,17 @@ export class MyAccountInterfaceSettingsComponent extends FormReactive implements this.form.patchValue({ theme: this.user.theme }) + + if (this.reactiveUpdate) { + this.formValuesWatcher = this.form.valueChanges.subscribe(val => this.updateInterfaceSettings()) + } }) } + ngOnDestroy () { + this.formValuesWatcher?.unsubscribe() + } + updateInterfaceSettings () { const theme = this.form.value['theme'] @@ -58,14 +71,19 @@ export class MyAccountInterfaceSettingsComponent extends FormReactive implements theme } - this.userService.updateMyProfile(details).subscribe( - () => { - this.authService.refreshUserInformation() + if (this.authService.isLoggedIn()) { + this.userService.updateMyProfile(details).subscribe( + () => { + this.authService.refreshUserInformation() - this.notifier.success(this.i18n('Interface settings updated.')) - }, + if (this.notifyOnUpdate) this.notifier.success(this.i18n('Interface settings updated.')) + }, - err => this.notifier.error(err.message) - ) + err => this.notifier.error(err.message) + ) + } else { + this.userService.updateMyAnonymousProfile(details) + if (this.notifyOnUpdate) this.notifier.success(this.i18n('Interface settings updated.')) + } } } 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 @@ + +
- + 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 @@ -import { Component, Input, OnInit } from '@angular/core' +import { Component, Input, OnInit, OnDestroy } from '@angular/core' import { Notifier, ServerService } from '@app/core' -import { UserUpdateMe } from '../../../../../../shared' +import { UserUpdateMe } from '../../../../../../shared/models/users' +import { User, UserService } from '@app/shared/users' import { AuthService } from '../../../core' -import { FormReactive, User, UserService } from '../../../shared' +import { FormReactive } from '@app/shared/forms/form-reactive' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -import { forkJoin, Subject } from 'rxjs' +import { forkJoin, Subject, Subscription } from 'rxjs' import { SelectItem } from 'primeng/api' import { first } from 'rxjs/operators' +import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' +import { pick } from 'lodash-es' @Component({ selector: 'my-account-video-settings', templateUrl: './my-account-video-settings.component.html', styleUrls: [ './my-account-video-settings.component.scss' ] }) -export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit { +export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit, OnDestroy { @Input() user: User = null + @Input() reactiveUpdate = false + @Input() notifyOnUpdate = true @Input() userInformationLoaded: Subject languageItems: SelectItem[] = [] + defaultNSFWPolicy: NSFWPolicyType + formValuesWatcher: Subscription constructor ( protected formValidatorService: FormValidatorService, @@ -32,6 +39,8 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI } ngOnInit () { + let oldForm: any + this.buildForm({ nsfwPolicy: null, webTorrentEnabled: null, @@ -42,8 +51,9 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI forkJoin([ this.serverService.getVideoLanguages(), + this.serverService.getConfig(), this.userInformationLoaded.pipe(first()) - ]).subscribe(([ languages ]) => { + ]).subscribe(([ languages, config ]) => { this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ] this.languageItems = this.languageItems .concat(languages.map(l => ({ label: l.label, value: l.id }))) @@ -52,17 +62,32 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI ? this.user.videoLanguages : this.languageItems.map(l => l.value) + this.defaultNSFWPolicy = config.instance.defaultNSFWPolicy + this.form.patchValue({ - nsfwPolicy: this.user.nsfwPolicy, + nsfwPolicy: this.user.nsfwPolicy || this.defaultNSFWPolicy, webTorrentEnabled: this.user.webTorrentEnabled, autoPlayVideo: this.user.autoPlayVideo === true, autoPlayNextVideo: this.user.autoPlayNextVideo, videoLanguages }) + + if (this.reactiveUpdate) { + oldForm = { ...this.form.value } + this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => { + const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k]) + oldForm = { ...this.form.value } + this.updateDetails([updatedKey]) + }) + } }) } - updateDetails () { + ngOnDestroy () { + this.formValuesWatcher?.unsubscribe() + } + + updateDetails (onlyKeys?: string[]) { const nsfwPolicy = this.form.value[ 'nsfwPolicy' ] const webTorrentEnabled = this.form.value['webTorrentEnabled'] const autoPlayVideo = this.form.value['autoPlayVideo'] @@ -81,7 +106,7 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI } } - const details: UserUpdateMe = { + let details: UserUpdateMe = { nsfwPolicy, webTorrentEnabled, autoPlayVideo, @@ -89,15 +114,22 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI videoLanguages } - this.userService.updateMyProfile(details).subscribe( - () => { - this.notifier.success(this.i18n('Video settings updated.')) + if (onlyKeys) details = pick(details, onlyKeys) - this.authService.refreshUserInformation() - }, + if (this.authService.isLoggedIn()) { + this.userService.updateMyProfile(details).subscribe( + () => { + this.authService.refreshUserInformation() - err => this.notifier.error(err.message) - ) + if (this.notifyOnUpdate) this.notifier.success(this.i18n('Video settings updated.')) + }, + + err => this.notifier.error(err.message) + ) + } else { + this.userService.updateMyAnonymousProfile(details) + if (this.notifyOnUpdate) this.notifier.success(this.i18n('Display/Video settings updated.')) + } } getDefaultVideoLanguageLabel () { diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html index 3999252be..d885eb243 100644 --- a/client/src/app/+my-account/my-account.component.html +++ b/client/src/app/+my-account/my-account.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index 6cf1499d3..db8ffac16 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts @@ -5,7 +5,6 @@ import { InputSwitchModule } from 'primeng/inputswitch' import { SharedModule } from '../shared' import { MyAccountRoutingModule } from './my-account-routing.module' import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component' -import { MyAccountVideoSettingsComponent } from './my-account-settings/my-account-video-settings/my-account-video-settings.component' import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component' import { MyAccountComponent } from './my-account.component' import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' @@ -37,7 +36,6 @@ import { } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component' import { DragDropModule } from '@angular/cdk/drag-drop' import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-settings/my-account-change-email' -import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account-settings/my-account-interface' @NgModule({ imports: [ @@ -54,10 +52,8 @@ import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account MyAccountComponent, MyAccountSettingsComponent, MyAccountChangePasswordComponent, - MyAccountVideoSettingsComponent, MyAccountProfileComponent, MyAccountChangeEmailComponent, - MyAccountInterfaceSettingsComponent, MyAccountVideosComponent, -- cgit v1.2.3