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(account.description)
 146
 147     // After the markdown renderer to avoid layout changes
 148     this.account = account
 149
 150     this.updateModerationActions()
 151     this.loadUserIfNeeded(account)
 152     this.loadAccountVideosCount()
 153     this.loadAccountBlockStatus()
 154   }
 155
 156   private showReportModal () {
 157     this.accountReportModal.show(this.account)
 158   }
 159
 160   private loadUserIfNeeded (account: Account) {
 161     if (!account.userId || !this.authService.isLoggedIn()) return
 162
 163     const user = this.authService.getUser()
 164     if (user.hasRight(UserRight.MANAGE_USERS)) {
 165       this.userService.getUser(account.userId)
 166         .subscribe({
 167           next: accountUser => {
 168             this.accountUser = accountUser
 169           },
 170
 171           error: err => this.notifier.error(err.message)
 172         })
 173     }
 174   }
 175
 176   private updateModerationActions () {
 177     this.prependModerationActions = []
 178
 179     if (!this.authService.isLoggedIn()) return
 180
 181     this.authService.userInformationLoaded.subscribe(
 182       () => {
 183         if (this.isManageable()) return
 184
 185         // It's not our account, we can report it
 186         this.prependModerationActions = [
 187           {
 188             label: $localize`Report`,
 189             isHeader: true
 190           },
 191           {
 192             label: $localize`Report this account`,
 193             handler: () => this.showReportModal()
 194           }
 195         ]
 196       }
 197     )
 198   }
 199
 200   private loadAccountVideosCount () {
 201     this.videoService.getAccountVideos({
 202       account: this.account,
 203       videoPagination: {
 204         currentPage: 1,
 205         itemsPerPage: 0
 206       },
 207       sort: '-publishedAt'
 208     }).subscribe(res => {
 209       this.accountVideosCount = res.total
 210     })
 211   }
 212
 213   private loadAccountBlockStatus () {
 214     this.blocklist.getStatus({ accounts: [ this.account.nameWithHostForced ], hosts: [ this.account.host ] })
 215       .subscribe(status => this.account.updateBlockStatus(status))
 216   }
 217 }