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, BlocklistService } 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 blocklist: BlocklistService,
  56     private screenService: ScreenService
  57   ) {
  58   }
  59
  60   ngOnInit () {
  61     this.routeSub = this.route.params
  62                         .pipe(
  63                           map(params => params['accountId']),
  64                           distinctUntilChanged(),
  65                           switchMap(accountId => this.accountService.getAccount(accountId)),
  66                           tap(account => this.onAccount(account)),
  67                           switchMap(account => this.videoChannelService.listAccountVideoChannels({ account })),
  68                           catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
  69                             HttpStatusCode.BAD_REQUEST_400,
  70                             HttpStatusCode.NOT_FOUND_404
  71                           ]))
  72                         )
  73                         .subscribe({
  74                           next: videoChannels => {
  75                             this.videoChannels = videoChannels.data
  76                           },
  77
  78                           error: err => this.notifier.error(err.message)
  79                         })
  80
  81     this.links = [
  82       { label: $localize`CHANNELS`, routerLink: 'video-channels' },
  83       { label: $localize`VIDEOS`, routerLink: 'videos' }
  84     ]
  85   }
  86
  87   ngOnDestroy () {
  88     if (this.routeSub) this.routeSub.unsubscribe()
  89   }
  90
  91   naiveAggregatedSubscribers () {
  92     return this.videoChannels.reduce(
  93       (acc, val) => acc + val.followersCount,
  94       this.account.followersCount // accumulator starts with the base number of subscribers the account has
  95     )
  96   }
  97
  98   isUserLoggedIn () {
  99     return this.authService.isLoggedIn()
 100   }
 101
 102   isInSmallView () {
 103     return this.screenService.isInSmallView()
 104   }
 105
 106   isManageable () {
 107     if (!this.isUserLoggedIn()) return false
 108
 109     return this.account?.userId === this.authService.getUser().id
 110   }
 111
 112   onUserChanged () {
 113     this.loadUserIfNeeded(this.account)
 114   }
 115
 116   onUserDeleted () {
 117     this.redirectService.redirectToHomepage()
 118   }
 119
 120   activateCopiedMessage () {
 121     this.notifier.success($localize`Username copied`)
 122   }
 123
 124   subscribersDisplayFor (count: number) {
 125     if (count === 1) return $localize`1 subscriber`
 126
 127     return $localize`${count} subscribers`
 128   }
 129
 130   searchChanged (search: string) {
 131     const queryParams = { search }
 132
 133     this.router.navigate([ './videos' ], { queryParams, relativeTo: this.route, queryParamsHandling: 'merge' })
 134   }
 135
 136   onSearchInputDisplayChanged (displayed: boolean) {
 137     this.hideMenu = this.isInSmallView() && displayed
 138   }
 139
 140   hasVideoChannels () {
 141     return this.videoChannels.length !== 0
 142   }
 143
 144   hasShowMoreDescription () {
 145     return !this.accountDescriptionExpanded && this.accountDescriptionHTML.length > 100
 146   }
 147
 148   isOnChannelPage () {
 149     return this.route.children[0].snapshot.url[0].path === 'video-channels'
 150   }
 151
 152   private async onAccount (account: Account) {
 153     this.accountFollowerTitle = $localize`${account.followersCount} direct account followers`
 154
 155     this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML(account.description)
 156
 157     // After the markdown renderer to avoid layout changes
 158     this.account = account
 159
 160     this.updateModerationActions()
 161     this.loadUserIfNeeded(account)
 162     this.loadAccountVideosCount()
 163     this.loadAccountBlockStatus()
 164   }
 165
 166   private showReportModal () {
 167     this.accountReportModal.show(this.account)
 168   }
 169
 170   private loadUserIfNeeded (account: Account) {
 171     if (!account.userId || !this.authService.isLoggedIn()) return
 172
 173     const user = this.authService.getUser()
 174     if (user.hasRight(UserRight.MANAGE_USERS)) {
 175       this.userService.getUser(account.userId)
 176         .subscribe({
 177           next: accountUser => {
 178             this.accountUser = accountUser
 179           },
 180
 181           error: err => this.notifier.error(err.message)
 182         })
 183     }
 184   }
 185
 186   private updateModerationActions () {
 187     this.prependModerationActions = []
 188
 189     if (!this.authService.isLoggedIn()) return
 190
 191     this.authService.userInformationLoaded.subscribe(
 192       () => {
 193         if (this.isManageable()) return
 194
 195         // It's not our account, we can report it
 196         this.prependModerationActions = [
 197           {
 198             label: $localize`Report`,
 199             isHeader: true
 200           },
 201           {
 202             label: $localize`Report this account`,
 203             handler: () => this.showReportModal()
 204           }
 205         ]
 206       }
 207     )
 208   }
 209
 210   private loadAccountVideosCount () {
 211     this.videoService.getAccountVideos({
 212       account: this.account,
 213       videoPagination: {
 214         currentPage: 1,
 215         itemsPerPage: 0
 216       },
 217       sort: '-publishedAt'
 218     }).subscribe(res => {
 219       this.accountVideosCount = res.total
 220     })
 221   }
 222
 223   private loadAccountBlockStatus () {
 224     this.blocklist.getStatus({ accounts: [ this.account.nameWithHostForced ], hosts: [ this.account.host ] })
 225       .subscribe(status => this.account.updateBlockStatus(status))
 226   }
 227 }