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