diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2021-01-27 17:15:21 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-01-28 15:55:34 +0100 |
commit | ba5d4a849c7d7ba05f093480ae12286c4af61556 (patch) | |
tree | 704a80b96d3b437ad12feacaaaf58a96b97282a1 /client/src/app/+videos/video-list/trending/video-trending-header.component.ts | |
parent | 3da68f0a781ebd893521e2e6fa200280c92ae815 (diff) | |
download | PeerTube-ba5d4a849c7d7ba05f093480ae12286c4af61556.tar.gz PeerTube-ba5d4a849c7d7ba05f093480ae12286c4af61556.tar.zst PeerTube-ba5d4a849c7d7ba05f093480ae12286c4af61556.zip |
move from trending routes to alg param
Diffstat (limited to 'client/src/app/+videos/video-list/trending/video-trending-header.component.ts')
-rw-r--r-- | client/src/app/+videos/video-list/trending/video-trending-header.component.ts | 67 |
1 files changed, 44 insertions, 23 deletions
diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.ts b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts index e49b61c68..33eaa2c1e 100644 --- a/client/src/app/+videos/video-list/trending/video-trending-header.component.ts +++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts | |||
@@ -1,30 +1,34 @@ | |||
1 | import { Component, Inject, OnInit } from '@angular/core' | 1 | import { Component, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core' |
2 | import { Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { VideoListHeaderComponent } from '@app/shared/shared-video-miniature' | 3 | import { VideoListHeaderComponent } from '@app/shared/shared-video-miniature' |
4 | import { GlobalIconName } from '@app/shared/shared-icons' | 4 | import { GlobalIconName } from '@app/shared/shared-icons' |
5 | import { VideoSortField } from '@shared/models' | ||
6 | import { ServerService } from '@app/core/server/server.service' | 5 | import { ServerService } from '@app/core/server/server.service' |
6 | import { Subscription } from 'rxjs' | ||
7 | import { RedirectService } from '@app/core' | ||
7 | 8 | ||
8 | interface VideoTrendingHeaderItem { | 9 | interface VideoTrendingHeaderItem { |
9 | label: string | 10 | label: string |
10 | iconName: GlobalIconName | 11 | iconName: GlobalIconName |
11 | value: VideoSortField | 12 | value: string |
12 | path: string | ||
13 | tooltip?: string | 13 | tooltip?: string |
14 | hidden?: boolean | 14 | hidden?: boolean |
15 | } | 15 | } |
16 | 16 | ||
17 | @Component({ | 17 | @Component({ |
18 | selector: 'video-trending-title-page', | 18 | selector: 'video-trending-title-page', |
19 | host: { 'class': 'title-page title-page-single' }, | ||
20 | styleUrls: [ './video-trending-header.component.scss' ], | 19 | styleUrls: [ './video-trending-header.component.scss' ], |
21 | templateUrl: './video-trending-header.component.html' | 20 | templateUrl: './video-trending-header.component.html' |
22 | }) | 21 | }) |
23 | export class VideoTrendingHeaderComponent extends VideoListHeaderComponent implements OnInit { | 22 | export class VideoTrendingHeaderComponent extends VideoListHeaderComponent implements OnInit, OnDestroy { |
23 | @HostBinding('class') class = 'title-page title-page-single' | ||
24 | |||
24 | buttons: VideoTrendingHeaderItem[] | 25 | buttons: VideoTrendingHeaderItem[] |
25 | 26 | ||
27 | private algorithmChangeSub: Subscription | ||
28 | |||
26 | constructor ( | 29 | constructor ( |
27 | @Inject('data') public data: any, | 30 | @Inject('data') public data: any, |
31 | private route: ActivatedRoute, | ||
28 | private router: Router, | 32 | private router: Router, |
29 | private serverService: ServerService | 33 | private serverService: ServerService |
30 | ) { | 34 | ) { |
@@ -34,23 +38,20 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple | |||
34 | { | 38 | { |
35 | label: $localize`:A variant of Trending videos based on the number of recent interactions:Hot`, | 39 | label: $localize`:A variant of Trending videos based on the number of recent interactions:Hot`, |
36 | iconName: 'flame', | 40 | iconName: 'flame', |
37 | value: '-hot', | 41 | value: 'hot', |
38 | path: 'hot', | ||
39 | tooltip: $localize`Videos totalizing the most interactions for recent videos`, | 42 | tooltip: $localize`Videos totalizing the most interactions for recent videos`, |
40 | hidden: true | 43 | hidden: true |
41 | }, | 44 | }, |
42 | { | 45 | { |
43 | label: $localize`:Main variant of Trending videos based on number of recent views:Views`, | 46 | label: $localize`:Main variant of Trending videos based on number of recent views:Views`, |
44 | iconName: 'trending', | 47 | iconName: 'trending', |
45 | value: '-trending', | 48 | value: 'most-viewed', |
46 | path: 'most-viewed', | 49 | tooltip: $localize`Videos totalizing the most views during the last 24 hours` |
47 | tooltip: $localize`Videos totalizing the most views during the last 24 hours`, | ||
48 | }, | 50 | }, |
49 | { | 51 | { |
50 | label: $localize`:A variant of Trending videos based on the number of likes:Likes`, | 52 | label: $localize`:A variant of Trending videos based on the number of likes:Likes`, |
51 | iconName: 'like', | 53 | iconName: 'like', |
52 | value: '-likes', | 54 | value: 'most-liked', |
53 | path: 'most-liked', | ||
54 | tooltip: $localize`Videos that have the most likes` | 55 | tooltip: $localize`Videos that have the most likes` |
55 | } | 56 | } |
56 | ] | 57 | ] |
@@ -59,20 +60,40 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple | |||
59 | ngOnInit () { | 60 | ngOnInit () { |
60 | this.serverService.getConfig() | 61 | this.serverService.getConfig() |
61 | .subscribe(config => { | 62 | .subscribe(config => { |
62 | // don't filter if auto-blacklist is not enabled as this will be the only list | 63 | this.buttons = this.buttons.map(b => { |
63 | if (config.instance.pages.hot.enabled) { | 64 | b.hidden = !config.trending.videos.algorithms.enabled.includes(b.value) |
64 | const index = this.buttons.findIndex(b => b.path === 'hot') | 65 | return b |
65 | this.buttons[index].hidden = false | 66 | }) |
66 | } | ||
67 | }) | 67 | }) |
68 | |||
69 | this.algorithmChangeSub = this.route.queryParams.subscribe( | ||
70 | queryParams => { | ||
71 | const algorithm = queryParams['alg'] | ||
72 | if (algorithm) { | ||
73 | this.data.model = algorithm | ||
74 | } else { | ||
75 | this.data.model = RedirectService.DEFAULT_TRENDING_ALGORITHM | ||
76 | } | ||
77 | } | ||
78 | ) | ||
68 | } | 79 | } |
69 | 80 | ||
70 | get visibleButtons () { | 81 | ngOnDestroy () { |
71 | return this.buttons.filter(b => !b.hidden) | 82 | if (this.algorithmChangeSub) this.algorithmChangeSub.unsubscribe() |
72 | } | 83 | } |
73 | 84 | ||
74 | setSort () { | 85 | setSort () { |
75 | const path = this.buttons.find(b => b.value === this.data.model).path | 86 | const alg = this.data.model !== RedirectService.DEFAULT_TRENDING_ALGORITHM |
76 | this.router.navigate([ `/videos/${path}` ]) | 87 | ? this.data.model |
88 | : undefined | ||
89 | |||
90 | this.router.navigate( | ||
91 | [], | ||
92 | { | ||
93 | relativeTo: this.route, | ||
94 | queryParams: { alg }, | ||
95 | queryParamsHandling: 'merge' | ||
96 | } | ||
97 | ) | ||
77 | } | 98 | } |
78 | } | 99 | } |