From 6e060713b428f479d26993f6fd79a062630d2432 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 16 Feb 2023 16:13:19 +0100 Subject: [PATCH] Correctly unsubscribe on menu destroy --- .../recommended-videos.component.ts | 1 - client/src/app/menu/menu.component.ts | 56 +++++++++++-------- .../modal/quick-settings-modal.component.ts | 23 ++++++-- 3 files changed, 51 insertions(+), 29 deletions(-) diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts index ee3a6c73e..42259129c 100644 --- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts +++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts @@ -58,7 +58,6 @@ export class RecommendedVideosComponent implements OnInit, OnChanges, OnDestroy .subscribe(user => { this.user = user this.autoPlayNextVideo = user.autoPlayNextVideo - console.log(this.autoPlayNextVideo) }) } diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 21354e52d..896c824b8 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -1,8 +1,9 @@ import { HotkeysService } from 'angular2-hotkeys' import * as debug from 'debug' -import { switchMap } from 'rxjs/operators' +import { forkJoin, Subscription } from 'rxjs' +import { first, switchMap } from 'rxjs/operators' import { ViewportScroller } from '@angular/common' -import { Component, OnInit, ViewChild } from '@angular/core' +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' import { Router } from '@angular/router' import { AuthService, @@ -30,7 +31,7 @@ const debugLogger = debug('peertube:menu:MenuComponent') templateUrl: './menu.component.html', styleUrls: [ './menu.component.scss' ] }) -export class MenuComponent implements OnInit { +export class MenuComponent implements OnInit, OnDestroy { @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent @ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent @ViewChild('dropdown') dropdown: NgbDropdown @@ -62,6 +63,11 @@ export class MenuComponent implements OnInit { [UserRight.MANAGE_CONFIGURATION]: '/admin/config' } + private languagesSub: Subscription + private modalSub: Subscription + private hotkeysSub: Subscription + private authSub: Subscription + constructor ( private viewportScroller: ViewportScroller, private authService: AuthService, @@ -102,37 +108,43 @@ export class MenuComponent implements OnInit { this.updateUserState() this.buildMenuSections() - this.authService.loginChangedSource.subscribe( - status => { - if (status === AuthStatus.LoggedIn) { - this.isLoggedIn = true - } else if (status === AuthStatus.LoggedOut) { - this.isLoggedIn = false - } - - this.updateUserState() - this.buildMenuSections() + this.authSub = this.authService.loginChangedSource.subscribe(status => { + if (status === AuthStatus.LoggedIn) { + this.isLoggedIn = true + } else if (status === AuthStatus.LoggedOut) { + this.isLoggedIn = false } - ) - this.hotkeysService.cheatSheetToggle + this.updateUserState() + this.buildMenuSections() + }) + + this.hotkeysSub = this.hotkeysService.cheatSheetToggle .subscribe(isOpen => this.helpVisible = isOpen) - this.serverService.getVideoLanguages() - .subscribe(languages => { - this.languages = languages + this.languagesSub = forkJoin([ + this.serverService.getVideoLanguages(), + this.authService.userInformationLoaded.pipe(first()) + ]).subscribe(([ languages ]) => { + this.languages = languages - this.authService.userInformationLoaded - .subscribe(() => this.buildUserLanguages()) - }) + this.buildUserLanguages() + }) this.serverService.getConfig() .subscribe(config => this.serverConfig = config) - this.modalService.openQuickSettingsSubject + this.modalSub = this.modalService.openQuickSettingsSubject .subscribe(() => this.openQuickSettings()) } + ngOnDestroy () { + if (this.modalSub) this.modalSub.unsubscribe() + if (this.languagesSub) this.languagesSub.unsubscribe() + if (this.hotkeysSub) this.hotkeysSub.unsubscribe() + if (this.authSub) this.authSub.unsubscribe() + } + isRegistrationAllowed () { if (!this.serverConfig) return false diff --git a/client/src/app/modal/quick-settings-modal.component.ts b/client/src/app/modal/quick-settings-modal.component.ts index 19f75ad5c..8ba58a23a 100644 --- a/client/src/app/modal/quick-settings-modal.component.ts +++ b/client/src/app/modal/quick-settings-modal.component.ts @@ -1,6 +1,6 @@ -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 { NgbModal } from '@ng-bootstrap/ng-bootstrap' @@ -10,7 +10,7 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' selector: 'my-quick-settings', templateUrl: './quick-settings-modal.component.html' }) -export class QuickSettingsModalComponent implements OnInit { +export class QuickSettingsModalComponent implements OnInit, OnDestroy { private static readonly QUERY_MODAL_NAME = 'quick-settings' @ViewChild('modal', { static: true }) modal: NgbModal @@ -20,6 +20,10 @@ export class QuickSettingsModalComponent implements OnInit { private openedModal: NgbModalRef + private routeSub: Subscription + private loginSub: Subscription + private localStorageSub: Subscription + constructor ( private modalService: NgbModal, private userService: UserService, @@ -32,14 +36,15 @@ export class QuickSettingsModalComponent implements OnInit { ngOnInit () { this.user = this.userService.getAnonymousUser() - this.localStorageService.watch() + + 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({ next: () => { @@ -48,7 +53,7 @@ export class QuickSettingsModalComponent implements OnInit { } }) - this.route.queryParams.subscribe(params => { + this.routeSub = this.route.queryParams.subscribe(params => { if (params['modal'] === QuickSettingsModalComponent.QUERY_MODAL_NAME) { this.openedModal = this.modalService.open(this.modal, { centered: true }) @@ -57,6 +62,12 @@ export class QuickSettingsModalComponent implements OnInit { }) } + ngOnDestroy () { + if (this.routeSub) this.routeSub.unsubscribe() + if (this.loginSub) this.loginSub.unsubscribe() + if (this.localStorageSub) this.localStorageSub.unsubscribe() + } + isUserLoggedIn () { return this.authService.isLoggedIn() }