client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts

   1 import { from } from 'rxjs'
   2 import { finalize, map, switchMap, tap } from 'rxjs/operators'
   3 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
   4 import { MarkdownService, Notifier, UserService } from '@app/core'
   5 import { FindInBulkService } from '@app/shared/shared-search'
   6 import { VideoSortField } from '@shared/models'
   7 import { Video, VideoChannel, VideoService } from '../../shared-main'
   8 import { CustomMarkupComponent } from './shared'
   9
  10 /*
  11  * Markup component that creates a channel miniature only
  12 */
  13
  14 @Component({
  15   selector: 'my-channel-miniature-markup',
  16   templateUrl: 'channel-miniature-markup.component.html',
  17   styleUrls: [ 'channel-miniature-markup.component.scss' ],
  18   changeDetection: ChangeDetectionStrategy.OnPush
  19 })
  20 export class ChannelMiniatureMarkupComponent implements CustomMarkupComponent, OnInit {
  21   @Input() name: string
  22   @Input() displayLatestVideo: boolean
  23   @Input() displayDescription: boolean
  24
  25   @Output() loaded = new EventEmitter<boolean>()
  26
  27   channel: VideoChannel
  28   descriptionHTML: string
  29   totalVideos: number
  30   video: Video
  31
  32   constructor (
  33     private markdown: MarkdownService,
  34     private findInBulk: FindInBulkService,
  35     private videoService: VideoService,
  36     private userService: UserService,
  37     private notifier: Notifier,
  38     private cd: ChangeDetectorRef
  39   ) { }
  40
  41   ngOnInit () {
  42     this.findInBulk.getChannel(this.name)
  43       .pipe(
  44         tap(channel => {
  45           this.channel = channel
  46         }),
  47         switchMap(() => from(this.markdown.textMarkdownToHTML({
  48           markdown: this.channel.description,
  49           withEmoji: true,
  50           withHtml: true
  51         }))),
  52         tap(html => {
  53           this.descriptionHTML = html
  54         }),
  55         switchMap(() => this.loadVideosObservable()),
  56         finalize(() => this.loaded.emit(true))
  57       ).subscribe({
  58         next: ({ total, data }) => {
  59           this.totalVideos = total
  60           this.video = data[0]
  61
  62           this.cd.markForCheck()
  63         },
  64
  65         error: err => this.notifier.error($localize`Error in channel miniature component: ${err.message}`)
  66       })
  67   }
  68
  69   getVideoChannelLink () {
  70     return [ '/c', this.channel.nameWithHost ]
  71   }
  72
  73   private loadVideosObservable () {
  74     const videoOptions = {
  75       videoChannel: this.channel,
  76       videoPagination: {
  77         currentPage: 1,
  78         itemsPerPage: 1
  79       },
  80       sort: '-publishedAt' as VideoSortField,
  81       count: 1
  82     }
  83
  84     return this.userService.getAnonymousOrLoggedUser()
  85       .pipe(
  86         map(user => user.nsfwPolicy),
  87         switchMap(nsfwPolicy => this.videoService.getVideoChannelVideos({ ...videoOptions, nsfwPolicy }))
  88       )
  89   }
  90 }