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, MarkdownService, User, UserService } from '@app/core'
   5 import { Account, AccountService, Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
   6 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
   7 import { NSFWPolicyType, VideoSortField } from '@shared/models'
   8
   9 @Component({
  10   selector: 'my-account-video-channels',
  11   templateUrl: './account-video-channels.component.html',
  12   styleUrls: [ './account-video-channels.component.scss' ]
  13 })
  14 export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
  15   account: Account
  16   videoChannels: VideoChannel[] = []
  17
  18   videos: { [id: number]: { total: number, videos: Video[] } } = {}
  19
  20   channelsDescriptionHTML: { [ id: number ]: string } = {}
  21
  22   channelPagination: ComponentPagination = {
  23     currentPage: 1,
  24     itemsPerPage: 2,
  25     totalItems: null
  26   }
  27
  28   videosPagination: ComponentPagination = {
  29     currentPage: 1,
  30     itemsPerPage: 5,
  31     totalItems: null
  32   }
  33   videosSort: VideoSortField = '-publishedAt'
  34
  35   onChannelDataSubject = new Subject<any>()
  36
  37   userMiniature: User
  38   nsfwPolicy: NSFWPolicyType
  39   miniatureDisplayOptions: MiniatureDisplayOptions = {
  40     date: true,
  41     views: true,
  42     by: false,
  43     avatar: false,
  44     privacyLabel: false,
  45     privacyText: false,
  46     state: false,
  47     blacklistInfo: false
  48   }
  49
  50   private accountSub: Subscription
  51
  52   constructor (
  53     private accountService: AccountService,
  54     private videoChannelService: VideoChannelService,
  55     private videoService: VideoService,
  56     private markdown: MarkdownService,
  57     private userService: UserService
  58   ) { }
  59
  60   ngOnInit () {
  61     // Parent get the account for us
  62     this.accountSub = this.accountService.accountLoaded
  63         .subscribe(account => {
  64           this.account = account
  65           this.videoChannels = []
  66
  67           this.loadMoreChannels()
  68         })
  69
  70     this.userService.getAnonymousOrLoggedUser()
  71       .subscribe(user => {
  72         this.userMiniature = user
  73
  74         this.nsfwPolicy = user.nsfwPolicy
  75       })
  76   }
  77
  78   ngOnDestroy () {
  79     if (this.accountSub) this.accountSub.unsubscribe()
  80   }
  81
  82   loadMoreChannels () {
  83     const options = {
  84       account: this.account,
  85       componentPagination: this.channelPagination,
  86       sort: '-updatedAt'
  87     }
  88
  89     this.videoChannelService.listAccountVideoChannels(options)
  90       .pipe(
  91         tap(res => {
  92           this.channelPagination.totalItems = res.total
  93         }),
  94         switchMap(res => from(res.data)),
  95         concatMap(videoChannel => {
  96           const options = {
  97             videoChannel,
  98             videoPagination: this.videosPagination,
  99             sort: this.videosSort,
 100             nsfwPolicy: this.nsfwPolicy
 101           }
 102
 103           return this.videoService.getVideoChannelVideos(options)
 104             .pipe(map(data => ({ videoChannel, videos: data.data, total: data.total })))
 105         })
 106       )
 107       .subscribe(async ({ videoChannel, videos, total }) => {
 108         this.channelsDescriptionHTML[videoChannel.id] = await this.markdown.textMarkdownToHTML({
 109           markdown: videoChannel.description,
 110           withEmoji: true,
 111           withHtml: true
 112         })
 113
 114         this.videoChannels.push(videoChannel)
 115
 116         this.videos[videoChannel.id] = { videos, total }
 117
 118         this.onChannelDataSubject.next([ videoChannel ])
 119       })
 120   }
 121
 122   getVideosOf (videoChannel: VideoChannel) {
 123     const obj = this.videos[videoChannel.id]
 124     if (!obj) return []
 125
 126     return obj.videos
 127   }
 128
 129   getTotalVideosOf (videoChannel: VideoChannel) {
 130     const obj = this.videos[videoChannel.id]
 131     if (!obj) return undefined
 132
 133     return obj.total
 134   }
 135
 136   getChannelDescription (videoChannel: VideoChannel) {
 137     return this.channelsDescriptionHTML[videoChannel.id]
 138   }
 139
 140   onNearOfBottom () {
 141     if (!hasMoreItems(this.channelPagination)) return
 142
 143     this.channelPagination.currentPage += 1
 144
 145     this.loadMoreChannels()
 146   }
 147
 148   getVideoChannelLink (videoChannel: VideoChannel) {
 149     return [ '/c', videoChannel.nameWithHost ]
 150   }
 151 }