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() maxRows: number
  26
  27   @Output() loaded = new EventEmitter<boolean>()
  28
  29   videos: Video[]
  30
  31   displayOptions: MiniatureDisplayOptions = {
  32     date: false,
  33     views: true,
  34     by: true,
  35     avatar: false,
  36     privacyLabel: false,
  37     privacyText: false,
  38     state: false,
  39     blacklistInfo: false
  40   }
  41
  42   constructor (
  43     private auth: AuthService,
  44     private videoService: VideoService,
  45     private notifier: Notifier
  46   ) { }
  47
  48   getUser () {
  49     return this.auth.getUser()
  50   }
  51
  52   limitRowsStyle () {
  53     if (this.maxRows <= 0) return {}
  54
  55     return {
  56       'grid-template-rows': `repeat(${this.maxRows}, 1fr)`,
  57       'grid-auto-rows': '0', // Set height to 0 for autogenerated grid rows
  58       'overflow-y': 'hidden' // Hide grid items that overflow
  59     }
  60   }
  61
  62   ngOnInit () {
  63     if (this.onlyDisplayTitle) {
  64       for (const key of Object.keys(this.displayOptions)) {
  65         this.displayOptions[key] = false
  66       }
  67     }
  68
  69     const options = {
  70       videoPagination: {
  71         currentPage: 1,
  72         itemsPerPage: this.count
  73       },
  74       categoryOneOf: this.categoryOneOf,
  75       languageOneOf: this.languageOneOf,
  76       filter: this.filter,
  77       sort: this.sort as VideoSortField
  78     }
  79
  80     this.videoService.getVideos(options)
  81       .pipe(finalize(() => this.loaded.emit(true)))
  82       .subscribe(
  83         ({ data }) => this.videos = data,
  84
  85         err => this.notifier.error('Error in videos list component: ' + err.message)
  86       )
  87   }
  88 }