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

   1 import { Subscription } from 'rxjs'
   2 import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'
   3 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
   4 import { ActivatedRoute, Router } from '@angular/router'
   5 import { AuthService, MarkdownService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
   6 import {
   7   Account,
   8   AccountService,
   9   DropdownAction,
  10   ListOverflowItem,
  11   VideoChannel,
  12   VideoChannelService,
  13   VideoService
  14 } from '@app/shared/shared-main'
  15 import { AccountReportComponent } from '@app/shared/shared-moderation'
  16 import { HttpStatusCode, User, UserRight } from '@shared/models'
  17
  18 @Component({
  19   templateUrl: './accounts.component.html',
  20   styleUrls: [ './accounts.component.scss' ]
  21 })
  22 export class AccountsComponent implements OnInit, OnDestroy {
  23   @ViewChild('accountReportModal') accountReportModal: AccountReportComponent
  24
  25   account: Account
  26   accountUser: User
  27
  28   videoChannels: VideoChannel[] = []
  29
  30   links: ListOverflowItem[] = []
  31   hideMenu = false
  32
  33   accountFollowerTitle = ''
  34
  35   accountVideosCount: number
  36   accountDescriptionHTML = ''
  37   accountDescriptionExpanded = false
  38
  39   prependModerationActions: DropdownAction<any>[] = []
  40
  41   private routeSub: Subscription
  42
  43   constructor (
  44     private route: ActivatedRoute,
  45     private router: Router,
  46     private userService: UserService,
  47     private accountService: AccountService,
  48     private videoChannelService: VideoChannelService,
  49     private notifier: Notifier,
  50     private restExtractor: RestExtractor,
  51     private redirectService: RedirectService,
  52     private authService: AuthService,
  53     private videoService: VideoService,
  54     private markdown: MarkdownService,
  55     private screenService: ScreenService
  56   ) {
  57   }
  58
  59   ngOnInit () {
  60     this.routeSub = this.route.params
  61                         .pipe(
  62                           map(params => params['accountId']),
  63                           distinctUntilChanged(),
  64                           switchMap(accountId => this.accountService.getAccount(accountId)),
  65                           tap(account => this.onAccount(account)),
  66                           switchMap(account => this.videoChannelService.listAccountVideoChannels({ account })),
  67                           catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
  68                             HttpStatusCode.BAD_REQUEST_400,
  69                             HttpStatusCode.NOT_FOUND_404
  70                           ]))
  71                         )
  72                         .subscribe({
  73                           next: videoChannels => {
  74                             this.videoChannels = videoChannels.data
  75                           },
  76
  77                           error: err => this.notifier.error(err.message)
  78                         })
  79
  80     this.links = [
  81       { label: $localize`CHANNELS`, routerLink: 'video-channels' },
  82       { label: $localize`VIDEOS`, routerLink: 'videos' }
  83     ]
  84   }
  85
  86   ngOnDestroy () {
  87     if (this.routeSub) this.routeSub.unsubscribe()
  88   }
  89
  90   naiveAggregatedSubscribers () {
  91     return this.videoChannels.reduce(
  92       (acc, val) => acc + val.followersCount,
  93       this.account.followersCount // accumulator starts with the base number of subscribers the account has
  94     )
  95   }
  96
  97   isUserLoggedIn () {
  98     return this.authService.isLoggedIn()
  99   }
 100
 101   isInSmallView () {
 102     return this.screenService.isInSmallView()
 103   }
 104
 105   isManageable () {
 106     if (!this.isUserLoggedIn()) return false
 107
 108     return this.account?.userId === this.authService.getUser().id
 109   }
 110
 111   onUserChanged () {
 112     this.loadUserIfNeeded(this.account)
 113   }
 114
 115   onUserDeleted () {
 116     this.redirectService.redirectToHomepage()
 117   }
 118
 119   activateCopiedMessage () {
 120     this.notifier.success($localize`Username copied`)
 121   }
 122
 123   subscribersDisplayFor (count: number) {
 124     if (count === 1) return $localize`1 subscriber`
 125
 126     return $localize`${count} subscribers`
 127   }
 128
 129   searchChanged (search: string) {
 130     const queryParams = { search }
 131
 132     this.router.navigate([ './videos' ], { queryParams, relativeTo: this.route, queryParamsHandling: 'merge' })
 133   }
 134
 135   onSearchInputDisplayChanged (displayed: boolean) {
 136     this.hideMenu = this.isInSmallView() && displayed
 137   }
 138
 139   hasVideoChannels () {
 140     return this.videoChannels.length !== 0
 141   }
 142
 143   hasShowMoreDescription () {
 144     return !this.accountDescriptionExpanded && this.accountDescriptionHTML.length > 100
 145   }
 146
 147   isOnChannelPage () {
 148     return this.route.children[0].snapshot.url[0].path === 'video-channels'
 149   }
 150
 151   private async onAccount (account: Account) {
 152     this.accountFollowerTitle = $localize`${account.followersCount} direct account followers`
 153
 154     this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML(account.description)
 155
 156     // After the markdown renderer to avoid layout changes
 157     this.account = account
 158
 159     this.updateModerationActions()
 160     this.loadUserIfNeeded(account)
 161     this.loadAccountVideosCount()
 162   }
 163
 164   private showReportModal () {
 165     this.accountReportModal.show(this.account)
 166   }
 167
 168   private loadUserIfNeeded (account: Account) {
 169     if (!account.userId || !this.authService.isLoggedIn()) return
 170
 171     const user = this.authService.getUser()
 172     if (user.hasRight(UserRight.MANAGE_USERS)) {
 173       this.userService.getUser(account.userId)
 174         .subscribe({
 175           next: accountUser => {
 176             this.accountUser = accountUser
 177           },
 178
 179           error: err => this.notifier.error(err.message)
 180         })
 181     }
 182   }
 183
 184   private updateModerationActions () {
 185     this.prependModerationActions = []
 186
 187     if (!this.authService.isLoggedIn()) return
 188
 189     this.authService.userInformationLoaded.subscribe(
 190       () => {
 191         if (this.isManageable()) return
 192
 193         // It's not our account, we can report it
 194         this.prependModerationActions = [
 195           {
 196             label: $localize`Report`,
 197             isHeader: true
 198           },
 199           {
 200             label: $localize`Report this account`,
 201             handler: () => this.showReportModal()
 202           }
 203         ]
 204       }
 205     )
 206   }
 207
 208   private loadAccountVideosCount () {
 209     this.videoService.getAccountVideos({
 210       account: this.account,
 211       videoPagination: {
 212         currentPage: 1,
 213         itemsPerPage: 0
 214       },
 215       sort: '-publishedAt'
 216     }).subscribe(res => {
 217       this.accountVideosCount = res.total
 218     })
 219   }
 220 }