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