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                           videoChannels => this.videoChannels = videoChannels.data,
  76
  77                           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   onOutletLoaded (component: Component) {
 130     if (component instanceof AccountSearchComponent) {
 131       this.accountSearch = component
 132     } else {
 133       this.accountSearch = undefined
 134     }
 135   }
 136
 137   searchChanged (search: string) {
 138     if (this.accountSearch) this.accountSearch.updateSearch(search)
 139   }
 140
 141   onSearchInputDisplayChanged (displayed: boolean) {
 142     this.hideMenu = this.isInSmallView() && displayed
 143   }
 144
 145   hasVideoChannels () {
 146     return this.videoChannels.length !== 0
 147   }
 148
 149   hasShowMoreDescription () {
 150     return !this.accountDescriptionExpanded && this.accountDescriptionHTML.length > 100
 151   }
 152
 153   private async onAccount (account: Account) {
 154     this.accountFollowerTitle = $localize`${account.followersCount} direct account followers`
 155
 156     this.prependModerationActions = undefined
 157
 158     this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML(account.description)
 159
 160     // After the markdown renderer to avoid layout changes
 161     this.account = account
 162
 163     this.updateModerationActions()
 164     this.loadUserIfNeeded(account)
 165     this.loadAccountVideosCount()
 166   }
 167
 168   private showReportModal () {
 169     this.accountReportModal.show()
 170   }
 171
 172   private loadUserIfNeeded (account: Account) {
 173     if (!account.userId || !this.authService.isLoggedIn()) return
 174
 175     const user = this.authService.getUser()
 176     if (user.hasRight(UserRight.MANAGE_USERS)) {
 177       this.userService.getUser(account.userId).subscribe(
 178         accountUser => this.accountUser = accountUser,
 179
 180         err => this.notifier.error(err.message)
 181       )
 182     }
 183   }
 184
 185   private updateModerationActions () {
 186     if (!this.authService.isLoggedIn()) return
 187
 188     this.authService.userInformationLoaded.subscribe(
 189       () => {
 190         if (this.isManageable()) return
 191
 192         // It's not our account, we can report it
 193         this.prependModerationActions = [
 194           {
 195             label: $localize`Report this account`,
 196             handler: () => this.showReportModal()
 197           }
 198         ]
 199       }
 200     )
 201   }
 202
 203   private loadAccountVideosCount () {
 204     this.videoService.getAccountVideos({
 205       account: this.account,
 206       videoPagination: {
 207         currentPage: 1,
 208         itemsPerPage: 0
 209       },
 210       sort: '-publishedAt'
 211     }).subscribe(res => this.accountVideosCount = res.total)
 212   }
 213 }