client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts

   1 import { finalize } from 'rxjs/operators'
   2 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
   3 import { AuthService, Notifier } from '@app/core'
   4 import { VideoFilter, VideoSortField } from '@shared/models'
   5 import { Video, VideoService } from '../../shared-main'
   6 import { MiniatureDisplayOptions } from '../../shared-video-miniature'
   7 import { CustomMarkupComponent } from './shared'
   8
   9 /*
  10  * Markup component list videos depending on criterias
  11 */
  12
  13 @Component({
  14   selector: 'my-videos-list-markup',
  15   templateUrl: 'videos-list-markup.component.html',
  16   styleUrls: [ 'videos-list-markup.component.scss' ]
  17 })
  18 export class VideosListMarkupComponent implements CustomMarkupComponent, OnInit {
  19   @Input() sort: string
  20   @Input() categoryOneOf: number[]
  21   @Input() languageOneOf: string[]
  22   @Input() count: number
  23   @Input() onlyDisplayTitle: boolean
  24   @Input() filter: VideoFilter
  25   @Input() isLive: boolean
  26   @Input() maxRows: number
  27   @Input() channelHandle: string
  28   @Input() accountHandle: string
  29
  30   @Output() loaded = new EventEmitter<boolean>()
  31
  32   videos: Video[]
  33
  34   displayOptions: MiniatureDisplayOptions = {
  35     date: false,
  36     views: true,
  37     by: true,
  38     avatar: false,
  39     privacyLabel: false,
  40     privacyText: false,
  41     state: false,
  42     blacklistInfo: false
  43   }
  44
  45   constructor (
  46     private auth: AuthService,
  47     private videoService: VideoService,
  48     private notifier: Notifier
  49   ) { }
  50
  51   getUser () {
  52     return this.auth.getUser()
  53   }
  54
  55   limitRowsStyle () {
  56     if (this.maxRows <= 0) return {}
  57
  58     return {
  59       'grid-template-rows': `repeat(${this.maxRows}, 1fr)`,
  60       'grid-auto-rows': '0', // Set height to 0 for autogenerated grid rows
  61       'overflow-y': 'hidden' // Hide grid items that overflow
  62     }
  63   }
  64
  65   ngOnInit () {
  66     if (this.onlyDisplayTitle) {
  67       for (const key of Object.keys(this.displayOptions)) {
  68         this.displayOptions[key] = false
  69       }
  70     }
  71
  72     return this.getVideosObservable()
  73       .pipe(finalize(() => this.loaded.emit(true)))
  74       .subscribe(
  75         ({ data }) => this.videos = data,
  76
  77         err => this.notifier.error($localize`Error in videos list component: ${err.message}`)
  78       )
  79   }
  80
  81   getVideosObservable () {
  82     const options = {
  83       videoPagination: {
  84         currentPage: 1,
  85         itemsPerPage: this.count
  86       },
  87       categoryOneOf: this.categoryOneOf,
  88       languageOneOf: this.languageOneOf,
  89       filter: this.filter,
  90       isLive: this.isLive,
  91       sort: this.sort as VideoSortField,
  92       account: { nameWithHost: this.accountHandle },
  93       videoChannel: { nameWithHost: this.channelHandle }
  94     }
  95
  96     if (this.channelHandle) return this.videoService.getVideoChannelVideos(options)
  97     if (this.accountHandle) return this.videoService.getAccountVideos(options)
  98
  99     return this.videoService.getVideos(options)
 100   }
 101 }