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