X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fmodal%2Fquick-settings-modal.component.ts;h=8ba58a23afa76dd12adcd29e1d7f9c7a5b08cdfd;hb=7815dc450ea9f8fd63e2234b6215013a132e6229;hp=95726ab63f540f2a03dfc3c27c6ae4d8415fd996;hpb=67ed6552b831df66713bac9e672738796128d33f;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/modal/quick-settings-modal.component.ts b/client/src/app/modal/quick-settings-modal.component.ts index 95726ab63..8ba58a23a 100644 --- a/client/src/app/modal/quick-settings-modal.component.ts +++ b/client/src/app/modal/quick-settings-modal.component.ts @@ -1,17 +1,18 @@ -import { ReplaySubject } from 'rxjs' +import { ReplaySubject, Subscription } from 'rxjs' import { filter } from 'rxjs/operators' -import { Component, OnInit, ViewChild } from '@angular/core' +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' import { AuthService, AuthStatus, LocalStorageService, User, UserService } from '@app/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' @Component({ selector: 'my-quick-settings', - templateUrl: './quick-settings-modal.component.html', - styleUrls: [ './quick-settings-modal.component.scss' ] + templateUrl: './quick-settings-modal.component.html' }) -export class QuickSettingsModalComponent extends FormReactive implements OnInit { +export class QuickSettingsModalComponent implements OnInit, OnDestroy { + private static readonly QUERY_MODAL_NAME = 'quick-settings' + @ViewChild('modal', { static: true }) modal: NgbModal user: User @@ -19,33 +20,52 @@ export class QuickSettingsModalComponent extends FormReactive implements OnInit private openedModal: NgbModalRef + private routeSub: Subscription + private loginSub: Subscription + private localStorageSub: Subscription + constructor ( - protected formValidatorService: FormValidatorService, private modalService: NgbModal, private userService: UserService, private authService: AuthService, - private localStorageService: LocalStorageService + private localStorageService: LocalStorageService, + private route: ActivatedRoute, + private router: Router ) { - super() } ngOnInit () { this.user = this.userService.getAnonymousUser() - this.localStorageService.watch() - .subscribe( - () => this.user = this.userService.getAnonymousUser() - ) + + this.localStorageSub = this.localStorageService.watch() + .subscribe({ + next: () => this.user = this.userService.getAnonymousUser() + }) this.userInformationLoaded.next(true) - this.authService.loginChangedSource + this.loginSub = this.authService.loginChangedSource .pipe(filter(status => status !== AuthStatus.LoggedIn)) - .subscribe( - () => { + .subscribe({ + next: () => { this.user = this.userService.getAnonymousUser() this.userInformationLoaded.next(true) } - ) + }) + + this.routeSub = this.route.queryParams.subscribe(params => { + if (params['modal'] === QuickSettingsModalComponent.QUERY_MODAL_NAME) { + this.openedModal = this.modalService.open(this.modal, { centered: true }) + + this.openedModal.hidden.subscribe(() => this.setModalQuery('remove')) + } + }) + } + + ngOnDestroy () { + if (this.routeSub) this.routeSub.unsubscribe() + if (this.loginSub) this.loginSub.unsubscribe() + if (this.localStorageSub) this.localStorageSub.unsubscribe() } isUserLoggedIn () { @@ -53,11 +73,14 @@ export class QuickSettingsModalComponent extends FormReactive implements OnInit } show () { - this.openedModal = this.modalService.open(this.modal, { centered: true }) + this.setModalQuery('add') } - hide () { - this.openedModal.close() - this.form.reset() + private setModalQuery (type: 'add' | 'remove') { + const modal = type === 'add' + ? QuickSettingsModalComponent.QUERY_MODAL_NAME + : null + + this.router.navigate([], { queryParams: { modal }, queryParamsHandling: 'merge' }) } }