client/src/app/+videos/video-list/trending/video-trending-header.component.ts

   1 import { Component, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core'
   2 import { ActivatedRoute, Router } from '@angular/router'
   3 import { VideoListHeaderComponent } from '@app/shared/shared-video-miniature'
   4 import { GlobalIconName } from '@app/shared/shared-icons'
   5 import { ServerService } from '@app/core/server/server.service'
   6 import { Subscription } from 'rxjs'
   7 import { RedirectService } from '@app/core'
   8
   9 interface VideoTrendingHeaderItem {
  10   label: string
  11   iconName: GlobalIconName
  12   value: string
  13   tooltip?: string
  14   hidden?: boolean
  15 }
  16
  17 @Component({
  18   selector: 'video-trending-title-page',
  19   styleUrls: [ './video-trending-header.component.scss' ],
  20   templateUrl: './video-trending-header.component.html'
  21 })
  22 export class VideoTrendingHeaderComponent extends VideoListHeaderComponent implements OnInit, OnDestroy {
  23   @HostBinding('class') class = 'title-page title-page-single'
  24
  25   buttons: VideoTrendingHeaderItem[]
  26
  27   private algorithmChangeSub: Subscription
  28
  29   constructor (
  30     @Inject('data') public data: any,
  31     private route: ActivatedRoute,
  32     private router: Router,
  33     private serverService: ServerService
  34   ) {
  35     super(data)
  36
  37     this.buttons = [
  38       {
  39         label: $localize`:A variant of Trending videos based on the number of recent interactions:Hot`,
  40         iconName: 'flame',
  41         value: 'hot',
  42         tooltip: $localize`Videos totalizing the most interactions for recent videos`,
  43         hidden: true
  44       },
  45       {
  46         label: $localize`:Main variant of Trending videos based on number of recent views:Views`,
  47         iconName: 'trending',
  48         value: 'most-viewed',
  49         tooltip: $localize`Videos totalizing the most views during the last 24 hours`
  50       },
  51       {
  52         label: $localize`:A variant of Trending videos based on the number of likes:Likes`,
  53         iconName: 'like',
  54         value: 'most-liked',
  55         tooltip: $localize`Videos that have the most likes`
  56       }
  57     ]
  58   }
  59
  60   ngOnInit () {
  61     this.serverService.getConfig()
  62         .subscribe(config => {
  63           this.buttons = this.buttons.map(b => {
  64             b.hidden = !config.trending.videos.algorithms.enabled.includes(b.value)
  65             return b
  66           })
  67         })
  68
  69     this.algorithmChangeSub = this.route.queryParams.subscribe(
  70       queryParams => {
  71         const algorithm = queryParams['alg']
  72         if (algorithm) {
  73           this.data.model = algorithm
  74         } else {
  75           this.data.model = RedirectService.DEFAULT_TRENDING_ALGORITHM
  76         }
  77       }
  78     )
  79   }
  80
  81   ngOnDestroy () {
  82     if (this.algorithmChangeSub) this.algorithmChangeSub.unsubscribe()
  83   }
  84
  85   setSort () {
  86     const alg = this.data.model !== RedirectService.DEFAULT_TRENDING_ALGORITHM
  87       ? this.data.model
  88       : undefined
  89
  90     this.router.navigate(
  91       [],
  92       {
  93         relativeTo: this.route,
  94         queryParams: { alg },
  95         queryParamsHandling: 'merge'
  96       }
  97     )
  98   }
  99 }