My account/library get user simplification

client/src/app/+accounts/accounts.component.ts

@@ -1,26 +1,26 @@
-import { Subscription } from 'rxjs'
-import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'
+import { DatePipe, NgClass, NgIf } from '@angular/common'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'
 import { AuthService, MarkdownService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
-import { HttpStatusCode, User, UserRight } from '@peertube/peertube-models'
-import { SimpleSearchInputComponent } from '../shared/shared-main/misc/simple-search-input.component'
-import { ListOverflowComponent, ListOverflowItem } from '../shared/shared-main/misc/list-overflow.component'
-import { SubscribeButtonComponent } from '../shared/shared-user-subscription/subscribe-button.component'
-import { CopyButtonComponent } from '../shared/shared-main/buttons/copy-button.component'
-import { AccountBlockBadgesComponent } from '../shared/shared-moderation/account-block-badges.component'
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
-import { UserModerationDropdownComponent } from '../shared/shared-moderation/user-moderation-dropdown.component'
-import { ActorAvatarComponent } from '../shared/shared-actor-image/actor-avatar.component'
-import { NgIf, NgClass, DatePipe } from '@angular/common'
+import { Account } from '@app/shared/shared-main/account/account.model'
 import { AccountService } from '@app/shared/shared-main/account/account.service'
 import { DropdownAction } from '@app/shared/shared-main/buttons/action-dropdown.component'
+import { VideoChannel } from '@app/shared/shared-main/video-channel/video-channel.model'
 import { VideoChannelService } from '@app/shared/shared-main/video-channel/video-channel.service'
 import { VideoService } from '@app/shared/shared-main/video/video.service'
-import { Account } from '@app/shared/shared-main/account/account.model'
-import { VideoChannel } from '@app/shared/shared-main/video-channel/video-channel.model'
 import { BlocklistService } from '@app/shared/shared-moderation/blocklist.service'
 import { AccountReportComponent } from '@app/shared/shared-moderation/report-modals'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { HttpStatusCode, User, UserRight } from '@peertube/peertube-models'
+import { Subscription } from 'rxjs'
+import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'
+import { ActorAvatarComponent } from '../shared/shared-actor-image/actor-avatar.component'
+import { CopyButtonComponent } from '../shared/shared-main/buttons/copy-button.component'
+import { ListOverflowComponent, ListOverflowItem } from '../shared/shared-main/misc/list-overflow.component'
+import { SimpleSearchInputComponent } from '../shared/shared-main/misc/simple-search-input.component'
+import { AccountBlockBadgesComponent } from '../shared/shared-moderation/account-block-badges.component'
+import { UserModerationDropdownComponent } from '../shared/shared-moderation/user-moderation-dropdown.component'
+import { SubscribeButtonComponent } from '../shared/shared-user-subscription/subscribe-button.component'
 
 @Component({
   templateUrl: './accounts.component.html',
@@ -208,24 +208,19 @@ export class AccountsComponent implements OnInit, OnDestroy {
     this.prependModerationActions = []
 
     if (!this.authService.isLoggedIn()) return
+    if (this.isManageable()) return
 
-    this.authService.userInformationLoaded.subscribe(
-      () => {
-        if (this.isManageable()) return
-
-        // It's not our account, we can report it
-        this.prependModerationActions = [
-          {
-            label: $localize`Report`,
-            isHeader: true
-          },
-          {
-            label: $localize`Report this account`,
-            handler: () => this.showReportModal()
-          }
-        ]
+    // It's not our account, we can report it
+    this.prependModerationActions = [
+      {
+        label: $localize`Report`,
+        isHeader: true
+      },
+      {
+        label: $localize`Report this account`,
+        handler: () => this.showReportModal()
       }
-    )
+    ]
   }
 
   private loadAccountVideosCount () {

client/src/app/+my-account/my-account-applications/my-account-applications.component.ts

@@ -29,6 +29,7 @@ export class MyAccountApplicationsComponent implements OnInit {
 
   ngOnInit () {
     this.feedUrl = this.baseURL
+
     this.scopedTokensService.getScopedTokens()
       .subscribe({
         next: tokens => this.regenApplications(tokens),

client/src/app/+my-account/my-account-auto-tag-policies/my-account-auto-tag-policies.component.ts

@@ -5,7 +5,6 @@ import { PeertubeCheckboxComponent } from '@app/shared/shared-forms/peertube-che
 import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 import { AutomaticTagAvailableType } from '@peertube/peertube-models'
 import { forkJoin } from 'rxjs'
-import { first } from 'rxjs/operators'
 import { AutomaticTagService } from './automatic-tag.service'
 
 @Component({
@@ -29,9 +28,7 @@ export class MyAccountAutoTagPoliciesComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.authService.userInformationLoaded
-      .pipe(first())
-      .subscribe(() => this.loadAvailableTags())
+    this.loadAvailableTags()
   }
 
   getLabelText (tag: { name: string, type: AutomaticTagAvailableType }) {

client/src/app/+my-account/my-account-import-export/my-account-export.component.ts

@@ -1,14 +1,14 @@
+import { DatePipe, NgFor, NgIf } from '@angular/common'
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
-import { AuthService, ServerService } from '@app/core'
-import { PeerTubeProblemDocument, ServerErrorCode, UserExport, UserExportState } from '@peertube/peertube-models'
-import { UserImportExportService } from './user-import-export.service'
-import { concatMap, first, from, of, switchMap, toArray } from 'rxjs'
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { BytesPipe } from '../../shared/shared-main/angular/bytes.pipe'
 import { FormsModule } from '@angular/forms'
+import { AuthService, ServerService } from '@app/core'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { PeerTubeProblemDocument, ServerErrorCode, UserExport, UserExportState } from '@peertube/peertube-models'
+import { concatMap, from, of, switchMap, toArray } from 'rxjs'
 import { PeertubeCheckboxComponent } from '../../shared/shared-forms/peertube-checkbox.component'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
-import { NgIf, NgFor, DatePipe } from '@angular/common'
+import { BytesPipe } from '../../shared/shared-main/angular/bytes.pipe'
+import { UserImportExportService } from './user-import-export.service'
 
 @Component({
   selector: 'my-account-export',
@@ -41,9 +41,8 @@ export class MyAccountExportComponent implements OnInit {
 
   ngOnInit () {
     this.archiveWeightEstimation = this.videoQuotaUsed
-    this.authService.userInformationLoaded
-      .pipe(first())
-      .subscribe(() => this.reloadUserExports())
+
+    this.reloadUserExports()
   }
 
   isExportEnabled () {

client/src/app/+my-account/my-account-import-export/my-account-import-export.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
-import { AuthService, CanComponentDeactivate, UserService } from '@app/core'
-import { MyAccountImportComponent } from './my-account-import.component'
-import { first } from 'rxjs'
-import { MyAccountExportComponent } from './my-account-export.component'
+import { CanComponentDeactivate, UserService } from '@app/core'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
+import { MyAccountExportComponent } from './my-account-export.component'
+import { MyAccountImportComponent } from './my-account-import.component'
 
 @Component({
   selector: 'my-account-import-export',
@@ -17,17 +16,12 @@ export class MyAccountImportExportComponent implements OnInit, CanComponentDeact
   videoQuotaUsed: number
 
   constructor (
-    private authService: AuthService,
     private userService: UserService
   ) {}
 
   ngOnInit () {
-    this.authService.userInformationLoaded
-      .pipe(first())
-      .subscribe(() => {
-        this.userService.getMyVideoQuotaUsed()
-          .subscribe(res => this.videoQuotaUsed = res.videoQuotaUsed)
-      })
+    this.userService.getMyVideoQuotaUsed()
+      .subscribe(res => this.videoQuotaUsed = res.videoQuotaUsed)
   }
 
   canDeactivate () {

client/src/app/+my-account/my-account-import-export/my-account-import.component.ts

@@ -1,15 +1,15 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { AuthService, ServerService, CanComponentDeactivate, Notifier } from '@app/core'
-import { Subscription, first, switchMap } from 'rxjs'
-import { UserImportExportService } from './user-import-export.service'
+import { DatePipe, NgIf } from '@angular/common'
 import { HttpErrorResponse } from '@angular/common/http'
+import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
 import { buildHTTPErrorResponse, genericUploadErrorHandler, getUploadXRetryConfig } from '@app/helpers'
-import { HttpStatusCode, UserImport, UserImportState } from '@peertube/peertube-models'
-import { UploadxService, UploadState, UploaderX } from 'ngx-uploadx'
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
-import { UploadProgressComponent } from '../../shared/standalone-upload/upload-progress.component'
-import { NgIf, DatePipe } from '@angular/common'
 import { BytesPipe } from '@app/shared/shared-main/angular/bytes.pipe'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { HttpStatusCode, UserImport, UserImportState } from '@peertube/peertube-models'
+import { UploadState, UploaderX, UploadxService } from 'ngx-uploadx'
+import { Subscription } from 'rxjs'
+import { UploadProgressComponent } from '../../shared/standalone-upload/upload-progress.component'
+import { UserImportExportService } from './user-import-export.service'
 
 @Component({
   selector: 'my-account-import',
@@ -43,11 +43,7 @@ export class MyAccountImportComponent implements OnInit, OnDestroy, CanComponent
   ) {}
 
   ngOnInit () {
-    this.authService.userInformationLoaded
-      .pipe(
-        first(),
-        switchMap(() => this.userImportExportService.getLatestImport({ userId: this.authService.getUser().id }))
-      )
+    this.userImportExportService.getLatestImport({ userId: this.authService.getUser().id })
       .subscribe(res => this.latestImport = res)
 
     this.uploadServiceSubscription = this.resumableUploadService.events

client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts

@@ -18,9 +18,9 @@ import { InputTextComponent } from '../../../shared/shared-forms/input-text.comp
   imports: [ NgIf, FormsModule, ReactiveFormsModule, NgClass, InputTextComponent ]
 })
 export class MyAccountChangeEmailComponent extends FormReactive implements OnInit {
-  error: string = null
-  success: string = null
-  user: User = null
+  error: string
+  success: string
+  user: User
 
   constructor (
     protected formReactiveService: FormReactiveService,

client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts

@@ -21,8 +21,8 @@ import { NgIf } from '@angular/common'
   imports: [ NgIf, FormsModule, ReactiveFormsModule, InputTextComponent ]
 })
 export class MyAccountChangePasswordComponent extends FormReactive implements OnInit {
-  error: string = null
-  user: User = null
+  error: string
+  user: User
 
   constructor (
     protected formReactiveService: FormReactiveService,

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts

@@ -8,7 +8,7 @@ import { AuthService, ConfirmService, Notifier, RedirectService, User, UserServi
   standalone: true
 })
 export class MyAccountDangerZoneComponent {
-  @Input() user: User = null
+  @Input() user: User
 
   constructor (
     private authService: AuthService,

client/src/app/+my-account/my-account-settings/my-account-email-preferences/my-account-email-preferences.component.ts

@@ -1,11 +1,10 @@
-import { Subject } from 'rxjs'
 import { Component, Input, OnInit } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Notifier, UserService } from '@app/core'
 import { FormReactive } from '@app/shared/shared-forms/form-reactive'
 import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
 import { User, UserUpdateMe } from '@peertube/peertube-models'
 import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'my-account-email-preferences',
@@ -15,8 +14,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
   imports: [ FormsModule, ReactiveFormsModule, PeertubeCheckboxComponent ]
 })
 export class MyAccountEmailPreferencesComponent extends FormReactive implements OnInit {
-  @Input() user: User = null
-  @Input() userInformationLoaded: Subject<any>
+  @Input() user: User
 
   constructor (
     protected formReactiveService: FormReactiveService,
@@ -31,9 +29,7 @@ export class MyAccountEmailPreferencesComponent extends FormReactive implements
       'email-public': null
     })
 
-    this.userInformationLoaded.subscribe(() => {
-      this.form.patchValue({ 'email-public': this.user.emailPublic })
-    })
+    this.form.patchValue({ 'email-public': this.user.emailPublic })
   }
 
   updateEmailPublic () {

client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts

@@ -1,13 +1,12 @@
-import { debounce } from 'lodash-es'
-import { Subject } from 'rxjs'
+import { NgFor, NgIf } from '@angular/common'
 import { Component, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { Notifier, ServerService, User } from '@app/core'
+import { UserNotificationService } from '@app/shared/shared-main/users/user-notification.service'
 import { objectKeysTyped } from '@peertube/peertube-core-utils'
 import { UserNotificationSetting, UserNotificationSettingValue, UserRight, UserRightType } from '@peertube/peertube-models'
-import { FormsModule } from '@angular/forms'
+import { debounce } from 'lodash-es'
 import { InputSwitchComponent } from '../../../shared/shared-forms/input-switch.component'
-import { NgIf, NgFor } from '@angular/common'
-import { UserNotificationService } from '@app/shared/shared-main/users/user-notification.service'
 
 @Component({
   selector: 'my-account-notification-preferences',
@@ -18,7 +17,6 @@ import { UserNotificationService } from '@app/shared/shared-main/users/user-noti
 })
 export class MyAccountNotificationPreferencesComponent implements OnInit {
   @Input() user: User
-  @Input() userInformationLoaded: Subject<any>
 
   notificationSettingGroups: { label: string, keys: (keyof UserNotificationSetting)[] }[] = []
   emailNotifications: { [ id in keyof UserNotificationSetting ]?: boolean } = {}
@@ -111,7 +109,7 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
     const serverConfig = this.serverService.getHTMLConfig()
     this.emailEnabled = serverConfig.email.enabled
 
-    this.userInformationLoaded.subscribe(() => this.loadNotificationSettings())
+    this.loadNotificationSettings()
   }
 
   hasUserRight (field: keyof UserNotificationSetting) {

client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts

@@ -1,11 +1,10 @@
-import { Subject } from 'rxjs'
+import { NgClass, NgIf } from '@angular/common'
 import { Component, Input, OnInit } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Notifier, User, UserService } from '@app/core'
 import { USER_DESCRIPTION_VALIDATOR, USER_DISPLAY_NAME_REQUIRED_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive } from '@app/shared/shared-forms/form-reactive'
 import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgIf, NgClass } from '@angular/common'
 
 @Component({
   selector: 'my-account-profile',
@@ -16,7 +15,6 @@ import { NgIf, NgClass } from '@angular/common'
 })
 export class MyAccountProfileComponent extends FormReactive implements OnInit {
   @Input() user: User = null
-  @Input() userInformationLoaded: Subject<any>
 
   error: string = null
 
@@ -36,12 +34,10 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
     })
     this.form.controls['username'].disable()
 
-    this.userInformationLoaded.subscribe(() => {
-      this.form.patchValue({
-        'username': this.user.username,
-        'display-name': this.user.account.displayName,
-        'description': this.user.account.description
-      })
+    this.form.patchValue({
+      'username': this.user.username,
+      'display-name': this.user.account.displayName,
+      'description': this.user.account.description
     })
   }
 

client/src/app/+my-account/my-account-settings/my-account-settings.component.html

@@ -13,9 +13,9 @@
       (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
     ></my-actor-avatar-edit>
 
-    <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
+    <my-user-quota></my-user-quota>
 
-    <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
+    <my-account-profile [user]="user"></my-account-profile>
   </div>
 </div>
 
@@ -47,7 +47,7 @@
   </div>
 
   <div class="content-col">
-    <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
+    <my-account-notification-preferences [user]="user"></my-account-notification-preferences>
   </div>
 </div>
 
@@ -67,7 +67,7 @@
   </div>
 
   <div class="content-col">
-    <my-account-two-factor-button [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-two-factor-button>
+    <my-account-two-factor-button [user]="user"></my-account-two-factor-button>
   </div>
 </div>
 
@@ -77,7 +77,7 @@
   </div>
 
   <div class="content-col">
-    <my-account-email-preferences class="d-block mb-5" [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-email-preferences>
+    <my-account-email-preferences class="d-block mb-5" [user]="user"></my-account-email-preferences>
 
     <my-account-change-email></my-account-change-email>
   </div>

client/src/app/+my-account/my-account-settings/my-account-settings.component.ts

@@ -39,7 +39,7 @@ import { ActorAvatarEditComponent } from '../../shared/shared-actor-image-edit/a
   ]
 })
 export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
-  user: User = null
+  user: User
 
   private lastScrollHash: string
 

client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.ts

@@ -1,9 +1,8 @@
-import { Subject } from 'rxjs'
+import { NgIf } from '@angular/common'
 import { Component, Input, OnInit } from '@angular/core'
 import { AuthService, ConfirmService, Notifier, User } from '@app/core'
-import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
-import { NgIf } from '@angular/common'
 import { TwoFactorService } from '@app/shared/shared-users/two-factor.service'
+import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
 
 @Component({
   selector: 'my-account-two-factor-button',
@@ -12,8 +11,7 @@ import { TwoFactorService } from '@app/shared/shared-users/two-factor.service'
   imports: [ NgIf, ButtonComponent ]
 })
 export class MyAccountTwoFactorButtonComponent implements OnInit {
-  @Input() user: User = null
-  @Input() userInformationLoaded: Subject<any>
+  @Input() user: User
 
   twoFactorEnabled = false
 
@@ -26,9 +24,7 @@ export class MyAccountTwoFactorButtonComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.userInformationLoaded.subscribe(() => {
-      this.twoFactorEnabled = this.user.twoFactorEnabled
-    })
+    this.twoFactorEnabled = this.user.twoFactorEnabled
   }
 
   async disableTwoFactor () {

client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.ts

@@ -1,14 +1,14 @@
+import { NgIf } from '@angular/common'
 import { Component, OnInit } from '@angular/core'
 import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import { AuthService, Notifier, User } from '@app/core'
 import { USER_EXISTING_PASSWORD_VALIDATOR, USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { TwoFactorService } from '@app/shared/shared-users/two-factor.service'
 import { QRCodeModule } from 'angularx-qrcode'
 import { InputTextComponent } from '../../../shared/shared-forms/input-text.component'
-import { NgIf } from '@angular/common'
 import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
-import { TwoFactorService } from '@app/shared/shared-users/two-factor.service'
 
 @Component({
   selector: 'my-account-two-factor',
@@ -49,11 +49,9 @@ export class MyAccountTwoFactorComponent implements OnInit {
     this.buildPasswordForm()
     this.buildOTPForm()
 
-    this.auth.userInformationLoaded.subscribe(() => {
-      this.user = this.auth.getUser()
+    this.user = this.auth.getUser()
 
-      this.twoFactorAlreadyEnabled = this.user.twoFactorEnabled
-    })
+    this.twoFactorAlreadyEnabled = this.user.twoFactorEnabled
   }
 
   requestTwoFactor () {

client/src/app/+my-account/my-account.component.ts

@@ -5,7 +5,6 @@ import { AuthUser, PluginService, ScreenService } from '@app/core'
 import { TopMenuDropdownComponent, TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
 
 @Component({
-  selector: 'my-my-account',
   templateUrl: './my-account.component.html',
   styleUrls: [ './my-account.component.scss' ],
   standalone: true,

client/src/app/+my-account/routes.ts

@@ -20,6 +20,7 @@ import { MyAccountSettingsComponent } from './my-account-settings/my-account-set
 import { MyAccountTwoFactorComponent } from './my-account-settings/my-account-two-factor/my-account-two-factor.component'
 import { MyAccountWatchedWordsListComponent } from './my-account-watched-words-list/my-account-watched-words-list.component'
 import { MyAccountComponent } from './my-account.component'
+import { userResolver } from '@app/core/routing/user.resolver'
 
 export default [
   {
@@ -35,6 +36,9 @@ export default [
       BulkService,
       WatchedWordsListService
     ],
+    resolve: {
+      user: userResolver
+    },
     canActivateChild: [ LoginGuard ],
     children: [
       {

client/src/app/+my-library/my-follows/my-followers.component.ts

@@ -1,14 +1,14 @@
-import { Subject } from 'rxjs'
+import { NgFor, NgIf } from '@angular/common'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { AuthService, ComponentPagination, Notifier } from '@app/core'
-import { ActorFollow } from '@peertube/peertube-models'
-import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/angular/infinite-scroller.directive'
-import { AdvancedInputFilter, AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
-import { NgIf, NgFor } from '@angular/common'
-import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 import { UserSubscriptionService } from '@app/shared/shared-user-subscription/user-subscription.service'
+import { ActorFollow } from '@peertube/peertube-models'
+import { Subject } from 'rxjs'
+import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component'
+import { AdvancedInputFilter, AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
+import { InfiniteScrollerDirective } from '../../shared/shared-main/angular/infinite-scroller.directive'
 
 @Component({
   templateUrl: './my-followers.component.html',
@@ -42,21 +42,19 @@ export class MyFollowersComponent implements OnInit {
       this.search = this.route.snapshot.queryParams['search']
     }
 
-    this.auth.userInformationLoaded.subscribe(() => {
-      const channelFilters = this.auth.getUser().videoChannels.map(c => {
-        return {
-          value: 'channel:' + c.name,
-          label: c.name
-        }
-      })
-
-      this.inputFilters = [
-        {
-          title: $localize`Channel filters`,
-          children: channelFilters
-        }
-      ]
+    const channelFilters = this.auth.getUser().videoChannels.map(c => {
+      return {
+        value: 'channel:' + c.name,
+        label: c.name
+      }
     })
+
+    this.inputFilters = [
+      {
+        title: $localize`Channel filters`,
+        children: channelFilters
+      }
+    ]
   }
 
   onNearOfBottom () {

client/src/app/+my-library/my-library.component.ts

@@ -1,9 +1,9 @@
+import { NgClass } from '@angular/common'
 import { Component, OnInit } from '@angular/core'
+import { RouterOutlet } from '@angular/router'
 import { AuthService, AuthUser, ScreenService, ServerService } from '@app/core'
 import { HTMLServerConfig } from '@peertube/peertube-models'
-import { TopMenuDropdownParam, TopMenuDropdownComponent } from '../shared/shared-main/misc/top-menu-dropdown.component'
-import { RouterOutlet } from '@angular/router'
-import { NgClass } from '@angular/common'
+import { TopMenuDropdownComponent, TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
 
 @Component({
   templateUrl: './my-library.component.html',
@@ -31,10 +31,7 @@ export class MyLibraryComponent implements OnInit {
     this.serverConfig = this.serverService.getHTMLConfig()
 
     this.user = this.authService.getUser()
-
-    this.authService.userInformationLoaded.subscribe(
-      () => this.buildMenu()
-    )
+    this.buildMenu()
   }
 
   isVideoImportEnabled () {

client/src/app/+my-library/my-videos/my-videos.component.ts

@@ -1,30 +1,30 @@
-import { uniqBy } from 'lodash-es'
-import { concat, Observable } from 'rxjs'
-import { tap, toArray } from 'rxjs/operators'
+import { NgIf } from '@angular/common'
 import { Component, OnInit, ViewChild } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { ActivatedRoute, Router, RouterLink } from '@angular/router'
 import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
-import { immutableAssign, formatICU } from '@app/helpers'
-import { VideoChannel, VideoExistInPlaylist, VideosExistInPlaylists, VideoSortField } from '@peertube/peertube-models'
-import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
-import {
-  VideoActionsDisplayType,
-  VideoActionsDropdownComponent
-} from '../../shared/shared-video-miniature/video-actions-dropdown.component'
-import { EditButtonComponent } from '../../shared/shared-main/buttons/edit-button.component'
-import { PeerTubeTemplateDirective } from '../../shared/shared-main/angular/peertube-template.directive'
-import { FormsModule } from '@angular/forms'
-import { AdvancedInputFilter, AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
-import { NgIf } from '@angular/common'
-import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
+import { formatICU, immutableAssign } from '@app/helpers'
 import { DropdownAction } from '@app/shared/shared-main/buttons/action-dropdown.component'
 import { Video } from '@app/shared/shared-main/video/video.model'
 import { VideoService } from '@app/shared/shared-main/video/video.service'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live/live-stream-information.component'
 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature/video-miniature.component'
-import { VideosSelectionComponent, SelectionType } from '@app/shared/shared-video-miniature/videos-selection.component'
+import { SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature/videos-selection.component'
 import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-playlist.service'
+import { VideoChannel, VideoExistInPlaylist, VideosExistInPlaylists, VideoSortField } from '@peertube/peertube-models'
+import { uniqBy } from 'lodash-es'
+import { concat, Observable } from 'rxjs'
+import { tap, toArray } from 'rxjs/operators'
+import { AdvancedInputFilter, AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
+import { PeerTubeTemplateDirective } from '../../shared/shared-main/angular/peertube-template.directive'
+import { EditButtonComponent } from '../../shared/shared-main/buttons/edit-button.component'
+import {
+  VideoActionsDisplayType,
+  VideoActionsDropdownComponent
+} from '../../shared/shared-video-miniature/video-actions-dropdown.component'
+import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
 
 @Component({
   templateUrl: './my-videos.component.html',
@@ -121,36 +121,34 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
       this.search = this.route.snapshot.queryParams['search']
     }
 
-    this.authService.userInformationLoaded.subscribe(() => {
-      this.user = this.authService.getUser()
-      this.userChannels = this.user.videoChannels
+    this.user = this.authService.getUser()
+    this.userChannels = this.user.videoChannels
 
-      const channelFilters = [ ...this.userChannels ]
-        .sort((a, b) => a.displayName.localeCompare(b.displayName))
-        .map(c => {
-          return {
-            value: 'channel:' + c.name,
-            label: c.displayName
-          }
-        })
-
-      this.inputFilters = [
-        {
-          title: $localize`Advanced filters`,
-          children: [
-            {
-              value: 'isLive:true',
-              label: $localize`Only live videos`
-            }
-          ]
-        },
-
-        {
-          title: $localize`Channel filters`,
-          children: channelFilters
+    const channelFilters = [ ...this.userChannels ]
+      .sort((a, b) => a.displayName.localeCompare(b.displayName))
+      .map(c => {
+        return {
+          value: 'channel:' + c.name,
+          label: c.displayName
         }
-      ]
-    })
+      })
+
+    this.inputFilters = [
+      {
+        title: $localize`Advanced filters`,
+        children: [
+          {
+            value: 'isLive:true',
+            label: $localize`Only live videos`
+          }
+        ]
+      },
+
+      {
+        title: $localize`Channel filters`,
+        children: channelFilters
+      }
+    ]
   }
 
   onSearch (search: string) {

client/src/app/+my-library/routes.ts

@@ -19,6 +19,7 @@ import { UserSubscriptionService } from '@app/shared/shared-user-subscription/us
 import { LiveVideoService } from '@app/shared/shared-video-live/live-video.service'
 import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-playlist.service'
 import { AbuseService } from '@app/shared/shared-moderation/abuse.service'
+import { userResolver } from '@app/core/routing/user.resolver'
 
 export default [
   {
@@ -32,6 +33,9 @@ export default [
       LiveVideoService,
       UserSubscriptionService
     ],
+    resolve: {
+      user: userResolver
+    },
     canActivateChild: [ LoginGuard ],
     children: [
       {

client/src/app/+videos/+video-edit/video-add.component.html

@@ -38,7 +38,7 @@
 </ng-container>
 
 <div *ngIf="!user.isUploadDisabled()" class="margin-content">
-  <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'" [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
+  <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'"></my-user-quota>
 
   <div class="title-page" *ngIf="isInSecondStep()">
     <ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container>

client/src/app/core/routing/user.resolver.ts

@@ -0,0 +1,11 @@
+import { inject } from '@angular/core'
+import { ResolveFn } from '@angular/router'
+import { first, map } from 'rxjs'
+import { AuthService, AuthUser } from '../auth'
+
+export const userResolver: ResolveFn<AuthUser> = () => {
+  const auth = inject(AuthService)
+
+  return auth.userInformationLoaded
+    .pipe(first(), map(() => auth.getUser()))
+}

client/src/app/shared/shared-main/users/user-quota.component.ts

@@ -1,8 +1,8 @@
-import { Subject } from 'rxjs'
-import { Component, Input, OnInit } from '@angular/core'
-import { User, UserService } from '@app/core'
 import { NgIf } from '@angular/common'
+import { Component, OnInit } from '@angular/core'
+import { AuthService, UserService } from '@app/core'
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { first } from 'rxjs'
 import { BytesPipe } from '../angular/bytes.pipe'
 
 @Component({
@@ -14,9 +14,6 @@ import { BytesPipe } from '../angular/bytes.pipe'
 })
 
 export class UserQuotaComponent implements OnInit {
-  @Input() user: User = null
-  @Input() userInformationLoaded: Subject<any>
-
   userVideoQuota = '0'
   userVideoQuotaUsed = 0
   userVideoQuotaPercentage = 15
@@ -25,10 +22,17 @@ export class UserQuotaComponent implements OnInit {
   userVideoQuotaUsedDaily = 0
   userVideoQuotaDailyPercentage = 15
 
-  constructor (private userService: UserService) { }
+  constructor (
+    private userService: UserService,
+    private auth: AuthService
+  ) { }
+
+  get user () {
+    return this.auth.getUser()
+  }
 
   ngOnInit () {
-    this.userInformationLoaded.subscribe(
+    this.auth.userInformationLoaded.pipe(first()).subscribe(
       () => {
         if (this.user.videoQuota !== -1) {
           this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()

client/src/app/shared/shared-user-settings/user-interface-settings.component.ts

@@ -16,7 +16,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
   imports: [ FormsModule, ReactiveFormsModule, NgFor, NgIf ]
 })
 export class UserInterfaceSettingsComponent extends FormReactive implements OnInit, OnDestroy {
-  @Input() user: User = null
+  @Input() user: User
   @Input() reactiveUpdate = false
   @Input() notifyOnUpdate = true
   @Input() userInformationLoaded: Subject<any>