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