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