1 import { Subscription } from 'rxjs'
2 import { Component, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core'
3 import { ActivatedRoute, Router } from '@angular/router'
4 import { AuthService, RedirectService } from '@app/core'
5 import { ServerService } from '@app/core/server/server.service'
6 import { GlobalIconName } from '@app/shared/shared-icons'
7 import { VideoListHeaderComponent } from '@app/shared/shared-video-miniature'
9 interface VideoTrendingHeaderItem {
11 iconName: GlobalIconName
18 selector: 'video-trending-title-page',
19 styleUrls: [ './video-trending-header.component.scss' ],
20 templateUrl: './video-trending-header.component.html'
22 export class VideoTrendingHeaderComponent extends VideoListHeaderComponent implements OnInit, OnDestroy {
23 @HostBinding('class') class = 'title-page title-page-single'
25 buttons: VideoTrendingHeaderItem[]
27 private algorithmChangeSub: Subscription
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
41 label: $localize`:A variant of Trending videos based on the number of recent interactions, minus user history:Best`,
44 tooltip: $localize`Videos with the most interactions for recent videos, minus user history`,
48 label: $localize`:A variant of Trending videos based on the number of recent interactions:Hot`,
51 tooltip: $localize`Videos with the most interactions for recent videos`,
55 label: $localize`:Main variant of Trending videos based on number of recent views:Views`,
58 tooltip: $localize`Videos with the most views during the last 24 hours`
61 label: $localize`:A variant of Trending videos based on the number of likes:Likes`,
64 tooltip: $localize`Videos that have the most likes`
70 const serverConfig = this.serverService.getHTMLConfig()
71 const algEnabled = serverConfig.trending.videos.algorithms.enabled
73 this.buttons = this.buttons.map(b => {
74 b.hidden = !algEnabled.includes(b.value)
76 // Best is adapted by the user history so
77 if (b.value === 'best' && !this.auth.isLoggedIn()) {
84 this.algorithmChangeSub = this.route.queryParams.subscribe(
86 this.data.model = queryParams['alg'] || this.redirectService.getDefaultTrendingAlgorithm()
92 if (this.algorithmChangeSub) this.algorithmChangeSub.unsubscribe()
96 const alg = this.data.model !== this.redirectService.getDefaultTrendingAlgorithm()
100 this.router.navigate(
103 relativeTo: this.route,
104 queryParams: { alg },
105 queryParamsHandling: 'merge'