client/src/app/shared/shared-video-miniature/videos-selection.component.ts

   1 import { Observable, Subject } from 'rxjs'
   2 import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef } from '@angular/core'
   3 import { ComponentPagination, Notifier, User } from '@app/core'
   4 import { logger } from '@root-helpers/logger'
   5 import { ResultList, VideoSortField } from '@shared/models'
   6 import { PeerTubeTemplateDirective, Video } from '../shared-main'
   7 import { MiniatureDisplayOptions } from './video-miniature.component'
   8
   9 export type SelectionType = { [ id: number ]: boolean }
  10
  11 @Component({
  12   selector: 'my-videos-selection',
  13   templateUrl: './videos-selection.component.html',
  14   styleUrls: [ './videos-selection.component.scss' ]
  15 })
  16 export class VideosSelectionComponent implements AfterContentInit {
  17   @Input() user: User
  18   @Input() pagination: ComponentPagination
  19
  20   @Input() titlePage: string
  21
  22   @Input() miniatureDisplayOptions: MiniatureDisplayOptions
  23
  24   @Input() noResultMessage = $localize`No results.`
  25   @Input() enableSelection = true
  26
  27   @Input() disabled = false
  28
  29   @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>
  30
  31   @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'rowButtons' | 'globalButtons'>>
  32
  33   @Output() selectionChange = new EventEmitter<SelectionType>()
  34   @Output() videosModelChange = new EventEmitter<Video[]>()
  35
  36   _selection: SelectionType = {}
  37
  38   rowButtonsTemplate: TemplateRef<any>
  39   globalButtonsTemplate: TemplateRef<any>
  40
  41   videos: Video[] = []
  42   sort: VideoSortField = '-publishedAt'
  43
  44   onDataSubject = new Subject<any[]>()
  45
  46   hasDoneFirstQuery = false
  47
  48   private lastQueryLength: number
  49
  50   constructor (
  51     private notifier: Notifier
  52   ) { }
  53
  54   @Input() get selection () {
  55     return this._selection
  56   }
  57
  58   set selection (selection: SelectionType) {
  59     this._selection = selection
  60     this.selectionChange.emit(this._selection)
  61   }
  62
  63   @Input() get videosModel () {
  64     return this.videos
  65   }
  66
  67   set videosModel (videos: Video[]) {
  68     this.videos = videos
  69     this.videosModelChange.emit(this.videos)
  70   }
  71
  72   ngAfterContentInit () {
  73     {
  74       const t = this.templates.find(t => t.name === 'rowButtons')
  75       if (t) this.rowButtonsTemplate = t.template
  76     }
  77
  78     {
  79       const t = this.templates.find(t => t.name === 'globalButtons')
  80       if (t) this.globalButtonsTemplate = t.template
  81     }
  82
  83     this.loadMoreVideos()
  84   }
  85
  86   getVideosObservable (page: number) {
  87     return this.getVideosObservableFunction(page, this.sort)
  88   }
  89
  90   abortSelectionMode () {
  91     this._selection = {}
  92   }
  93
  94   isInSelectionMode () {
  95     return Object.keys(this._selection).some(k => this._selection[k] === true)
  96   }
  97
  98   videoById (index: number, video: Video) {
  99     return video.id
 100   }
 101
 102   onNearOfBottom () {
 103     if (this.disabled) return
 104
 105     // No more results
 106     if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
 107
 108     this.pagination.currentPage += 1
 109
 110     this.loadMoreVideos()
 111   }
 112
 113   loadMoreVideos (reset = false) {
 114     if (reset) this.hasDoneFirstQuery = false
 115
 116     this.getVideosObservable(this.pagination.currentPage)
 117       .subscribe({
 118         next: ({ data }) => {
 119           this.hasDoneFirstQuery = true
 120           this.lastQueryLength = data.length
 121
 122           if (reset) this.videos = []
 123           this.videos = this.videos.concat(data)
 124           this.videosModel = this.videos
 125
 126           this.onDataSubject.next(data)
 127         },
 128
 129         error: err => {
 130           const message = $localize`Cannot load more videos. Try again later.`
 131
 132           logger.error(message, err)
 133           this.notifier.error(message)
 134         }
 135       })
 136   }
 137
 138   reloadVideos () {
 139     this.pagination.currentPage = 1
 140     this.loadMoreVideos(true)
 141   }
 142
 143   removeVideoFromArray (video: Video) {
 144     this.videos = this.videos.filter(v => v.id !== video.id)
 145   }
 146 }