X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Baccounts%2Faccount-video-channels%2Faccount-video-channels.component.ts;h=59814a93d4aca2160486188ea26a96b6d2e97bcb;hb=0e45e336f62a411b3c423be46d16252355c754d7;hp=4c5782f9df0f644a533b01400d0ea85100cbe145;hpb=170726f523ff48f89da45473fc53ca54784f43dd;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts index 4c5782f9d..59814a93d 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts @@ -1,33 +1,151 @@ -import { Component, OnInit } from '@angular/core' -import { ActivatedRoute } from '@angular/router' -import 'rxjs/add/observable/from' -import 'rxjs/add/operator/concatAll' -import { Account } from '@app/shared/account/account.model' -import { AccountService } from '@app/shared/account/account.service' -import { VideoChannel } from '../../../../../shared/models/videos' -import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' +import { from, Subject, Subscription } from 'rxjs' +import { concatMap, map, switchMap, tap } from 'rxjs/operators' +import { Component, OnDestroy, OnInit } from '@angular/core' +import { ComponentPagination, hasMoreItems, MarkdownService, User, UserService } from '@app/core' +import { Account, AccountService, Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main' +import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature' +import { NSFWPolicyType, VideoSortField } from '@shared/models' @Component({ selector: 'my-account-video-channels', templateUrl: './account-video-channels.component.html', styleUrls: [ './account-video-channels.component.scss' ] }) -export class AccountVideoChannelsComponent implements OnInit { +export class AccountVideoChannelsComponent implements OnInit, OnDestroy { account: Account videoChannels: VideoChannel[] = [] + videos: { [id: number]: { total: number, videos: Video[] } } = {} + + channelsDescriptionHTML: { [ id: number ]: string } = {} + + channelPagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 2, + totalItems: null + } + + videosPagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 5, + totalItems: null + } + videosSort: VideoSortField = '-publishedAt' + + onChannelDataSubject = new Subject() + + userMiniature: User + nsfwPolicy: NSFWPolicyType + miniatureDisplayOptions: MiniatureDisplayOptions = { + date: true, + views: true, + by: false, + avatar: false, + privacyLabel: false, + privacyText: false, + state: false, + blacklistInfo: false + } + + private accountSub: Subscription + constructor ( - protected route: ActivatedRoute, private accountService: AccountService, - private videoChannelService: VideoChannelService + private videoChannelService: VideoChannelService, + private videoService: VideoService, + private markdown: MarkdownService, + private userService: UserService ) { } ngOnInit () { // Parent get the account for us - this.accountService.accountLoaded - .do(account => this.account = account) - .flatMap(account => this.videoChannelService.listAccountVideoChannels(account.id)) - .map(res => res.data) - .subscribe(videoChannels => this.videoChannels = videoChannels) + this.accountSub = this.accountService.accountLoaded + .subscribe(account => { + this.account = account + this.videoChannels = [] + + this.loadMoreChannels() + }) + + this.userService.getAnonymousOrLoggedUser() + .subscribe(user => { + this.userMiniature = user + + this.nsfwPolicy = user.nsfwPolicy + }) + } + + ngOnDestroy () { + if (this.accountSub) this.accountSub.unsubscribe() + } + + loadMoreChannels () { + const options = { + account: this.account, + componentPagination: this.channelPagination, + sort: '-updatedAt' + } + + this.videoChannelService.listAccountVideoChannels(options) + .pipe( + tap(res => { + this.channelPagination.totalItems = res.total + }), + switchMap(res => from(res.data)), + concatMap(videoChannel => { + const options = { + videoChannel, + videoPagination: this.videosPagination, + sort: this.videosSort, + nsfwPolicy: this.nsfwPolicy + } + + return this.videoService.getVideoChannelVideos(options) + .pipe(map(data => ({ videoChannel, videos: data.data, total: data.total }))) + }) + ) + .subscribe(async ({ videoChannel, videos, total }) => { + this.channelsDescriptionHTML[videoChannel.id] = await this.markdown.textMarkdownToHTML({ + markdown: videoChannel.description, + withEmoji: true, + withHtml: true + }) + + this.videoChannels.push(videoChannel) + + this.videos[videoChannel.id] = { videos, total } + + this.onChannelDataSubject.next([ videoChannel ]) + }) + } + + getVideosOf (videoChannel: VideoChannel) { + const obj = this.videos[videoChannel.id] + if (!obj) return [] + + return obj.videos + } + + getTotalVideosOf (videoChannel: VideoChannel) { + const obj = this.videos[videoChannel.id] + if (!obj) return undefined + + return obj.total + } + + getChannelDescription (videoChannel: VideoChannel) { + return this.channelsDescriptionHTML[videoChannel.id] + } + + onNearOfBottom () { + if (!hasMoreItems(this.channelPagination)) return + + this.channelPagination.currentPage += 1 + + this.loadMoreChannels() + } + + getVideoChannelLink (videoChannel: VideoChannel) { + return [ '/c', videoChannel.nameWithHost ] } }