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, minus user history:Best`,
  40         iconName: 'award',
  41         value: 'best',
  42         tooltip: $localize`Videos with the most interactions for recent videos, minus user history`,
  43         hidden: true
  44       },
  45       {
  46         label: $localize`:A variant of Trending videos based on the number of recent interactions:Hot`,
  47         iconName: 'flame',
  48         value: 'hot',
  49         tooltip: $localize`Videos with the most interactions for recent videos`,
  50         hidden: true
  51       },
  52       {
  53         label: $localize`:Main variant of Trending videos based on number of recent views:Views`,
  54         iconName: 'trending',
  55         value: 'most-viewed',
  56         tooltip: $localize`Videos with the most views during the last 24 hours`
  57       },
  58       {
  59         label: $localize`:A variant of Trending videos based on the number of likes:Likes`,
  60         iconName: 'like',
  61         value: 'most-liked',
  62         tooltip: $localize`Videos that have the most likes`
  63       }
  64     ]
  65   }
  66
  67   ngOnInit () {
  68     this.serverService.getConfig()
  69         .subscribe(config => {
  70           this.buttons = this.buttons.map(b => {
  71             b.hidden = !config.trending.videos.algorithms.enabled.includes(b.value)
  72             return b
  73           })
  74         })
  75
  76     this.algorithmChangeSub = this.route.queryParams.subscribe(
  77       queryParams => {
  78         const algorithm = queryParams['alg']
  79         if (algorithm) {
  80           this.data.model = algorithm
  81         } else {
  82           this.data.model = RedirectService.DEFAULT_TRENDING_ALGORITHM
  83         }
  84       }
  85     )
  86   }
  87
  88   ngOnDestroy () {
  89     if (this.algorithmChangeSub) this.algorithmChangeSub.unsubscribe()
  90   }
  91
  92   setSort () {
  93     const alg = this.data.model !== RedirectService.DEFAULT_TRENDING_ALGORITHM
  94       ? this.data.model
  95       : undefined
  96
  97     this.router.navigate(
  98       [],
  99       {
 100         relativeTo: this.route,
 101         queryParams: { alg },
 102         queryParamsHandling: 'merge'
 103       }
 104     )
 105   }
 106 }