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