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