client/src/app/+video-channels/video-channels.component.ts

   1 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
   2 import { Subscription } from 'rxjs'
   3 import { catchError, distinctUntilChanged, map, switchMap } from 'rxjs/operators'
   4 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
   5 import { ActivatedRoute } from '@angular/router'
   6 import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService } from '@app/core'
   7 import { ListOverflowItem, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
   8 import { SupportModalComponent } from '@app/shared/shared-support-modal'
   9 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
  10 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
  11
  12 @Component({
  13   templateUrl: './video-channels.component.html',
  14   styleUrls: [ './video-channels.component.scss' ]
  15 })
  16 export class VideoChannelsComponent implements OnInit, OnDestroy {
  17   @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
  18   @ViewChild('supportModal') supportModal: SupportModalComponent
  19
  20   videoChannel: VideoChannel
  21   hotkeys: Hotkey[]
  22   links: ListOverflowItem[] = []
  23   isChannelManageable = false
  24
  25   channelVideosCount: number
  26   ownerDescriptionHTML = ''
  27   channelDescriptionHTML = ''
  28   channelDescriptionExpanded = false
  29
  30   private routeSub: Subscription
  31
  32   constructor (
  33     private route: ActivatedRoute,
  34     private notifier: Notifier,
  35     private authService: AuthService,
  36     private videoChannelService: VideoChannelService,
  37     private videoService: VideoService,
  38     private restExtractor: RestExtractor,
  39     private hotkeysService: HotkeysService,
  40     private screenService: ScreenService,
  41     private markdown: MarkdownService
  42   ) { }
  43
  44   ngOnInit () {
  45     this.routeSub = this.route.params
  46                         .pipe(
  47                           map(params => params[ 'videoChannelName' ]),
  48                           distinctUntilChanged(),
  49                           switchMap(videoChannelName => this.videoChannelService.getVideoChannel(videoChannelName)),
  50                           catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
  51                             HttpStatusCode.BAD_REQUEST_400,
  52                             HttpStatusCode.NOT_FOUND_404
  53                           ]))
  54                         )
  55                         .subscribe(async videoChannel => {
  56                           this.channelDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.description)
  57                           this.ownerDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.ownerAccount.description)
  58
  59                           // After the markdown renderer to avoid layout changes
  60                           this.videoChannel = videoChannel
  61
  62                           this.loadChannelVideosCount()
  63                         })
  64
  65     this.hotkeys = [
  66       new Hotkey('S', (event: KeyboardEvent): boolean => {
  67         this.subscribeButton.subscribed ?
  68           this.subscribeButton.unsubscribe() :
  69           this.subscribeButton.subscribe()
  70         return false
  71       }, undefined, $localize`Subscribe to the account`)
  72     ]
  73     if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
  74
  75     this.links = [
  76       { label: $localize`VIDEOS`, routerLink: 'videos' },
  77       { label: $localize`VIDEO PLAYLISTS`, routerLink: 'video-playlists' }
  78     ]
  79   }
  80
  81   ngOnDestroy () {
  82     if (this.routeSub) this.routeSub.unsubscribe()
  83
  84     // Unbind hotkeys
  85     if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
  86   }
  87
  88   isInSmallView () {
  89     return this.screenService.isInSmallView()
  90   }
  91
  92   isUserLoggedIn () {
  93     return this.authService.isLoggedIn()
  94   }
  95
  96   isManageable () {
  97     if (!this.isUserLoggedIn()) return false
  98
  99     return this.videoChannel?.ownerAccount.userId === this.authService.getUser().id
 100   }
 101
 102   activateCopiedMessage () {
 103     this.notifier.success($localize`Username copied`)
 104   }
 105
 106   showSupportModal () {
 107     this.supportModal.show()
 108   }
 109
 110   private loadChannelVideosCount () {
 111     this.videoService.getVideoChannelVideos({
 112       videoChannel: this.videoChannel,
 113       videoPagination: {
 114         currentPage: 1,
 115         itemsPerPage: 0
 116       },
 117       sort: '-publishedAt'
 118     }).subscribe(res => this.channelVideosCount = res.total)
 119   }
 120 }