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

   1 import { from, Subject, Subscription } from 'rxjs'
   2 import { concatMap, map, switchMap, tap } from 'rxjs/operators'
   3 import { Component, OnDestroy, OnInit } from '@angular/core'
   4 import { ComponentPagination, hasMoreItems, ScreenService, User, UserService } from '@app/core'
   5 import { Account, AccountService, Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
   6 import { NSFWPolicyType, VideoSortField } from '@shared/models'
   7
   8 @Component({
   9   selector: 'my-account-video-channels',
  10   templateUrl: './account-video-channels.component.html',
  11   styleUrls: [ './account-video-channels.component.scss' ]
  12 })
  13 export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
  14   account: Account
  15   videoChannels: VideoChannel[] = []
  16   videos: { [id: number]: Video[] } = {}
  17
  18   channelPagination: ComponentPagination = {
  19     currentPage: 1,
  20     itemsPerPage: 2,
  21     totalItems: null
  22   }
  23
  24   videosPagination: ComponentPagination = {
  25     currentPage: 1,
  26     itemsPerPage: 12,
  27     totalItems: null
  28   }
  29   videosSort: VideoSortField = '-publishedAt'
  30
  31   onChannelDataSubject = new Subject<any>()
  32
  33   userMiniature: User
  34   nsfwPolicy: NSFWPolicyType
  35
  36   private accountSub: Subscription
  37
  38   constructor (
  39     private accountService: AccountService,
  40     private videoChannelService: VideoChannelService,
  41     private videoService: VideoService,
  42     private screenService: ScreenService,
  43     private userService: UserService
  44   ) { }
  45
  46   ngOnInit () {
  47     // Parent get the account for us
  48     this.accountSub = this.accountService.accountLoaded
  49         .subscribe(account => {
  50           this.account = account
  51
  52           this.loadMoreChannels()
  53         })
  54
  55     this.userService.getAnonymousOrLoggedUser()
  56       .subscribe(user => {
  57         this.userMiniature = user
  58
  59         this.nsfwPolicy = user.nsfwPolicy
  60       })
  61   }
  62
  63   ngOnDestroy () {
  64     if (this.accountSub) this.accountSub.unsubscribe()
  65   }
  66
  67   loadMoreChannels () {
  68     this.videoChannelService.listAccountVideoChannels(this.account, this.channelPagination)
  69       .pipe(
  70         tap(res => this.channelPagination.totalItems = res.total),
  71         switchMap(res => from(res.data)),
  72         concatMap(videoChannel => {
  73           const options = {
  74             videoChannel,
  75             videoPagination: this.videosPagination,
  76             sort: this.videosSort,
  77             nsfwPolicy: this.nsfwPolicy
  78           }
  79
  80           return this.videoService.getVideoChannelVideos(options)
  81             .pipe(map(data => ({ videoChannel, videos: data.data })))
  82         })
  83       )
  84       .subscribe(({ videoChannel, videos }) => {
  85         this.videoChannels.push(videoChannel)
  86
  87         this.videos[videoChannel.id] = videos
  88
  89         this.onChannelDataSubject.next([ videoChannel ])
  90       })
  91   }
  92
  93   getVideosOf (videoChannel: VideoChannel) {
  94     const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
  95
  96     // 2 rows
  97     return this.videos[ videoChannel.id ].slice(0, numberOfVideos * 2)
  98   }
  99
 100   onNearOfBottom () {
 101     if (!hasMoreItems(this.channelPagination)) return
 102
 103     this.channelPagination.currentPage += 1
 104
 105     this.loadMoreChannels()
 106   }
 107
 108   getVideoChannelLink (videoChannel: VideoChannel) {
 109     return [ '/video-channels', videoChannel.nameWithHost ]
 110   }
 111 }