client/src/app/shared/shared-video-miniature/video-filters-header.component.ts

   1 import * as debug from 'debug'
   2 import { Subscription } from 'rxjs'
   3 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
   4 import { FormBuilder, FormGroup } from '@angular/forms'
   5 import { AuthService } from '@app/core'
   6 import { ServerService } from '@app/core/server/server.service'
   7 import { UserRight } from '@shared/models'
   8 import { PeertubeModalService } from '../shared-main'
   9 import { VideoFilters } from './video-filters.model'
  10
  11 const logger = debug('peertube:videos:VideoFiltersHeaderComponent')
  12
  13 @Component({
  14   selector: 'my-video-filters-header',
  15   styleUrls: [ './video-filters-header.component.scss' ],
  16   templateUrl: './video-filters-header.component.html'
  17 })
  18 export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
  19   @Input() filters: VideoFilters
  20   @Input() displayModerationBlock = false
  21   @Input() hideScope = false
  22
  23   @Output() filtersChanged = new EventEmitter()
  24
  25   areFiltersCollapsed = true
  26
  27   form: FormGroup
  28
  29   private routeSub: Subscription
  30
  31   constructor (
  32     private auth: AuthService,
  33     private serverService: ServerService,
  34     private fb: FormBuilder,
  35     private modalService: PeertubeModalService
  36   ) {
  37   }
  38
  39   ngOnInit () {
  40     this.form = this.fb.group({
  41       sort: [ '' ],
  42       nsfw: [ '' ],
  43       languageOneOf: [ '' ],
  44       categoryOneOf: [ '' ],
  45       scope: [ '' ],
  46       allVideos: [ '' ],
  47       live: [ '' ]
  48     })
  49
  50     this.patchForm(false)
  51
  52     this.filters.onChange(() => {
  53       this.patchForm(false)
  54     })
  55
  56     this.form.valueChanges.subscribe(values => {
  57       logger('Loading values from form: %O', values)
  58
  59       this.filters.load(values)
  60       this.filtersChanged.emit()
  61     })
  62   }
  63
  64   ngOnDestroy () {
  65     if (this.routeSub) this.routeSub.unsubscribe()
  66   }
  67
  68   canSeeAllVideos () {
  69     if (!this.auth.isLoggedIn()) return false
  70     if (!this.displayModerationBlock) return false
  71
  72     return this.auth.getUser().hasRight(UserRight.SEE_ALL_VIDEOS)
  73   }
  74
  75   isTrendingSortEnabled (sort: 'most-viewed' | 'hot' | 'most-liked') {
  76     const serverConfig = this.serverService.getHTMLConfig()
  77
  78     return serverConfig.trending.videos.algorithms.enabled.includes(sort)
  79   }
  80
  81   resetFilter (key: string, canRemove: boolean) {
  82     if (!canRemove) return
  83
  84     this.filters.reset(key)
  85     this.patchForm(false)
  86     this.filtersChanged.emit()
  87   }
  88
  89   getFilterTitle (canRemove: boolean) {
  90     if (canRemove) return $localize`Remove this filter`
  91
  92     return ''
  93   }
  94
  95   onAccountSettingsClick (event: Event) {
  96     if (this.auth.isLoggedIn()) return
  97
  98     event.preventDefault()
  99     event.stopPropagation()
 100
 101     this.modalService.openQuickSettingsSubject.next()
 102   }
 103
 104   private patchForm (emitEvent: boolean) {
 105     const defaultValues = this.filters.toFormObject()
 106     this.form.patchValue(defaultValues, { emitEvent })
 107
 108     logger('Patched form: %O', defaultValues)
 109   }
 110 }