aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2021-01-22 00:12:44 +0100
committerChocobozzz <chocobozzz@cpy.re>2021-01-28 15:55:34 +0100
commit5bcbcbe338ef5a1ed14f084311d013fbb25dabcf (patch)
treeb0f6382b30b67f1f7adddaf7d12af9adae0c9f5d /client
parent7a4994873c0b3394d04e16e877fc7418bc8b146a (diff)
downloadPeerTube-5bcbcbe338ef5a1ed14f084311d013fbb25dabcf.tar.gz
PeerTube-5bcbcbe338ef5a1ed14f084311d013fbb25dabcf.tar.zst
PeerTube-5bcbcbe338ef5a1ed14f084311d013fbb25dabcf.zip
modularize abstract video list header and implement video hotness recommendation variant
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+accounts/account-search/account-search.component.ts10
-rw-r--r--client/src/app/+accounts/account-videos/account-videos.component.ts5
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.ts6
-rw-r--r--client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts3
-rw-r--r--client/src/app/+videos/video-list/index.ts3
-rw-r--r--client/src/app/+videos/video-list/trending/index.ts4
-rw-r--r--client/src/app/+videos/video-list/trending/video-hot.component.ts85
-rw-r--r--client/src/app/+videos/video-list/trending/video-most-liked.component.ts (renamed from client/src/app/+videos/video-list/video-most-liked.component.ts)25
-rw-r--r--client/src/app/+videos/video-list/trending/video-trending-header.component.html6
-rw-r--r--client/src/app/+videos/video-list/trending/video-trending-header.component.scss17
-rw-r--r--client/src/app/+videos/video-list/trending/video-trending-header.component.ts59
-rw-r--r--client/src/app/+videos/video-list/trending/video-trending.component.ts (renamed from client/src/app/+videos/video-list/video-trending.component.ts)30
-rw-r--r--client/src/app/+videos/video-list/video-local.component.ts3
-rw-r--r--client/src/app/+videos/video-list/video-recently-added.component.ts3
-rw-r--r--client/src/app/+videos/video-list/video-user-subscriptions.component.ts6
-rw-r--r--client/src/app/+videos/videos-routing.module.ts18
-rw-r--r--client/src/app/+videos/videos.module.ts9
-rw-r--r--client/src/app/menu/menu.component.html5
-rw-r--r--client/src/app/shared/shared-icons/global-icon.component.ts1
-rw-r--r--client/src/app/shared/shared-main/shared-main.module.ts5
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.html8
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.scss10
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.ts50
-rw-r--r--client/src/app/shared/shared-video-miniature/index.ts2
-rw-r--r--client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts4
-rw-r--r--client/src/app/shared/shared-video-miniature/video-list-header.component.ts20
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-selection.component.ts4
-rw-r--r--client/src/assets/images/misc/flame.svg4
28 files changed, 349 insertions, 56 deletions
diff --git a/client/src/app/+accounts/account-search/account-search.component.ts b/client/src/app/+accounts/account-search/account-search.component.ts
index 10c7a12d8..378aa78c4 100644
--- a/client/src/app/+accounts/account-search/account-search.component.ts
+++ b/client/src/app/+accounts/account-search/account-search.component.ts
@@ -1,6 +1,6 @@
1import { Subscription } from 'rxjs' 1import { Subscription } from 'rxjs'
2import { first, tap } from 'rxjs/operators' 2import { first, tap } from 'rxjs/operators'
3import { Component, OnDestroy, OnInit } from '@angular/core' 3import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core' 5import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
6import { immutableAssign } from '@app/helpers' 6import { immutableAssign } from '@app/helpers'
@@ -11,9 +11,7 @@ import { VideoFilter } from '@shared/models'
11@Component({ 11@Component({
12 selector: 'my-account-search', 12 selector: 'my-account-search',
13 templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html', 13 templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html',
14 styleUrls: [ 14 styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ]
15 '../../shared/shared-video-miniature/abstract-video-list.scss'
16 ]
17}) 15})
18export class AccountSearchComponent extends AbstractVideoList implements OnInit, OnDestroy { 16export class AccountSearchComponent extends AbstractVideoList implements OnInit, OnDestroy {
19 titlePage: string 17 titlePage: string
@@ -35,6 +33,7 @@ export class AccountSearchComponent extends AbstractVideoList implements OnInit,
35 protected confirmService: ConfirmService, 33 protected confirmService: ConfirmService,
36 protected screenService: ScreenService, 34 protected screenService: ScreenService,
37 protected storageService: LocalStorageService, 35 protected storageService: LocalStorageService,
36 protected cfr: ComponentFactoryResolver,
38 private accountService: AccountService, 37 private accountService: AccountService,
39 private videoService: VideoService 38 private videoService: VideoService
40 ) { 39 ) {
@@ -99,6 +98,7 @@ export class AccountSearchComponent extends AbstractVideoList implements OnInit,
99 } 98 }
100 99
101 generateSyndicationList () { 100 generateSyndicationList () {
102 /* disable syndication */ 101 /* method disabled */
102 throw new Error('Method not implemented.')
103 } 103 }
104} 104}
diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts
index 58d0719fd..da3903d2c 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -1,6 +1,6 @@
1import { Subscription } from 'rxjs' 1import { Subscription } from 'rxjs'
2import { first, tap } from 'rxjs/operators' 2import { first, tap } from 'rxjs/operators'
3import { Component, OnDestroy, OnInit } from '@angular/core' 3import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core' 5import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
6import { immutableAssign } from '@app/helpers' 6import { immutableAssign } from '@app/helpers'
@@ -35,7 +35,8 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
35 protected screenService: ScreenService, 35 protected screenService: ScreenService,
36 protected storageService: LocalStorageService, 36 protected storageService: LocalStorageService,
37 private accountService: AccountService, 37 private accountService: AccountService,
38 private videoService: VideoService 38 private videoService: VideoService,
39 protected cfr: ComponentFactoryResolver
39 ) { 40 ) {
40 super() 41 super()
41 } 42 }
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index 0c8e4b83f..1695bd7ad 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -1,4 +1,4 @@
1import { Component, OnDestroy, OnInit } from '@angular/core' 1import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { 3import {
4 AuthService, 4 AuthService,
@@ -42,7 +42,8 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
42 protected screenService: ScreenService, 42 protected screenService: ScreenService,
43 protected storageService: LocalStorageService, 43 protected storageService: LocalStorageService,
44 private confirmService: ConfirmService, 44 private confirmService: ConfirmService,
45 private userHistoryService: UserHistoryService 45 private userHistoryService: UserHistoryService,
46 protected cfr: ComponentFactoryResolver
46 ) { 47 ) {
47 super() 48 super()
48 49
@@ -95,6 +96,7 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
95 } 96 }
96 97
97 generateSyndicationList () { 98 generateSyndicationList () {
99 /* method disabled */
98 throw new Error('Method not implemented.') 100 throw new Error('Method not implemented.')
99 } 101 }
100 102
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index 645696f48..a49fd0d5d 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -1,6 +1,6 @@
1import { Subscription } from 'rxjs' 1import { Subscription } from 'rxjs'
2import { first, tap } from 'rxjs/operators' 2import { first, tap } from 'rxjs/operators'
3import { Component, OnDestroy, OnInit } from '@angular/core' 3import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core' 5import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
6import { immutableAssign } from '@app/helpers' 6import { immutableAssign } from '@app/helpers'
@@ -34,6 +34,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
34 protected confirmService: ConfirmService, 34 protected confirmService: ConfirmService,
35 protected screenService: ScreenService, 35 protected screenService: ScreenService,
36 protected storageService: LocalStorageService, 36 protected storageService: LocalStorageService,
37 protected cfr: ComponentFactoryResolver,
37 private videoChannelService: VideoChannelService, 38 private videoChannelService: VideoChannelService,
38 private videoService: VideoService 39 private videoService: VideoService
39 ) { 40 ) {
diff --git a/client/src/app/+videos/video-list/index.ts b/client/src/app/+videos/video-list/index.ts
index af1bd58b7..dc27e29e2 100644
--- a/client/src/app/+videos/video-list/index.ts
+++ b/client/src/app/+videos/video-list/index.ts
@@ -1,5 +1,4 @@
1export * from './overview' 1export * from './overview'
2export * from './trending'
2export * from './video-local.component' 3export * from './video-local.component'
3export * from './video-recently-added.component' 4export * from './video-recently-added.component'
4export * from './video-trending.component'
5export * from './video-most-liked.component'
diff --git a/client/src/app/+videos/video-list/trending/index.ts b/client/src/app/+videos/video-list/trending/index.ts
new file mode 100644
index 000000000..8bae205a5
--- /dev/null
+++ b/client/src/app/+videos/video-list/trending/index.ts
@@ -0,0 +1,4 @@
1export * from './video-trending-header.component'
2export * from './video-trending.component'
3export * from './video-hot.component'
4export * from './video-most-liked.component'
diff --git a/client/src/app/+videos/video-list/trending/video-hot.component.ts b/client/src/app/+videos/video-list/trending/video-hot.component.ts
new file mode 100644
index 000000000..1617eb21e
--- /dev/null
+++ b/client/src/app/+videos/video-list/trending/video-hot.component.ts
@@ -0,0 +1,85 @@
1import { Component, ComponentFactoryResolver, Injector, OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router'
3import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
4import { HooksService } from '@app/core/plugins/hooks.service'
5import { immutableAssign } from '@app/helpers'
6import { VideoService } from '@app/shared/shared-main'
7import { AbstractVideoList } from '@app/shared/shared-video-miniature'
8import { VideoSortField } from '@shared/models'
9import { VideoTrendingHeaderComponent } from './video-trending-header.component'
10
11@Component({
12 selector: 'my-videos-hot',
13 styleUrls: [ '../../../shared/shared-video-miniature/abstract-video-list.scss' ],
14 templateUrl: '../../../shared/shared-video-miniature/abstract-video-list.html'
15})
16export class VideoHotComponent extends AbstractVideoList implements OnInit, OnDestroy {
17 HeaderComponent = VideoTrendingHeaderComponent
18 titlePage: string
19 defaultSort: VideoSortField = '-hot'
20
21 useUserVideoPreferences = true
22
23 constructor (
24 protected router: Router,
25 protected serverService: ServerService,
26 protected route: ActivatedRoute,
27 protected notifier: Notifier,
28 protected authService: AuthService,
29 protected userService: UserService,
30 protected screenService: ScreenService,
31 protected storageService: LocalStorageService,
32 protected cfr: ComponentFactoryResolver,
33 private videoService: VideoService,
34 private hooks: HooksService
35 ) {
36 super()
37
38 this.headerComponentInjector = this.getInjector()
39 }
40
41 ngOnInit () {
42 super.ngOnInit()
43
44 this.generateSyndicationList()
45 }
46
47 ngOnDestroy () {
48 super.ngOnDestroy()
49 }
50
51 getVideosObservable (page: number) {
52 const newPagination = immutableAssign(this.pagination, { currentPage: page })
53 const params = {
54 videoPagination: newPagination,
55 sort: this.sort,
56 categoryOneOf: this.categoryOneOf,
57 languageOneOf: this.languageOneOf,
58 nsfwPolicy: this.nsfwPolicy,
59 skipCount: true
60 }
61
62 return this.hooks.wrapObsFun(
63 this.videoService.getVideos.bind(this.videoService),
64 params,
65 'common',
66 'filter:api.trending-videos.videos.list.params',
67 'filter:api.trending-videos.videos.list.result'
68 )
69 }
70
71 generateSyndicationList () {
72 this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
73 }
74
75 getInjector () {
76 return Injector.create({
77 providers: [{
78 provide: 'data',
79 useValue: {
80 model: this.defaultSort
81 }
82 }]
83 })
84 }
85}
diff --git a/client/src/app/+videos/video-list/video-most-liked.component.ts b/client/src/app/+videos/video-list/trending/video-most-liked.component.ts
index 93408d76b..1781cc6aa 100644
--- a/client/src/app/+videos/video-list/video-most-liked.component.ts
+++ b/client/src/app/+videos/video-list/trending/video-most-liked.component.ts
@@ -1,4 +1,4 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, ComponentFactoryResolver, Injector, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core' 3import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
4import { HooksService } from '@app/core/plugins/hooks.service' 4import { HooksService } from '@app/core/plugins/hooks.service'
@@ -6,13 +6,15 @@ import { immutableAssign } from '@app/helpers'
6import { VideoService } from '@app/shared/shared-main' 6import { VideoService } from '@app/shared/shared-main'
7import { AbstractVideoList } from '@app/shared/shared-video-miniature' 7import { AbstractVideoList } from '@app/shared/shared-video-miniature'
8import { VideoSortField } from '@shared/models' 8import { VideoSortField } from '@shared/models'
9import { VideoTrendingHeaderComponent } from './video-trending-header.component'
9 10
10@Component({ 11@Component({
11 selector: 'my-videos-most-liked', 12 selector: 'my-videos-most-liked',
12 styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ], 13 styleUrls: [ '../../../shared/shared-video-miniature/abstract-video-list.scss' ],
13 templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html' 14 templateUrl: '../../../shared/shared-video-miniature/abstract-video-list.html'
14}) 15})
15export class VideoMostLikedComponent extends AbstractVideoList implements OnInit { 16export class VideoMostLikedComponent extends AbstractVideoList implements OnInit {
17 HeaderComponent = VideoTrendingHeaderComponent
16 titlePage: string 18 titlePage: string
17 defaultSort: VideoSortField = '-likes' 19 defaultSort: VideoSortField = '-likes'
18 20
@@ -27,19 +29,19 @@ export class VideoMostLikedComponent extends AbstractVideoList implements OnInit
27 protected userService: UserService, 29 protected userService: UserService,
28 protected screenService: ScreenService, 30 protected screenService: ScreenService,
29 protected storageService: LocalStorageService, 31 protected storageService: LocalStorageService,
32 protected cfr: ComponentFactoryResolver,
30 private videoService: VideoService, 33 private videoService: VideoService,
31 private hooks: HooksService 34 private hooks: HooksService
32 ) { 35 ) {
33 super() 36 super()
37
38 this.headerComponentInjector = this.getInjector()
34 } 39 }
35 40
36 ngOnInit () { 41 ngOnInit () {
37 super.ngOnInit() 42 super.ngOnInit()
38 43
39 this.generateSyndicationList() 44 this.generateSyndicationList()
40
41 this.titlePage = $localize`Most liked videos`
42 this.titleTooltip = $localize`Videos that have the most likes.`
43 } 45 }
44 46
45 getVideosObservable (page: number) { 47 getVideosObservable (page: number) {
@@ -65,4 +67,15 @@ export class VideoMostLikedComponent extends AbstractVideoList implements OnInit
65 generateSyndicationList () { 67 generateSyndicationList () {
66 this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf) 68 this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
67 } 69 }
70
71 getInjector () {
72 return Injector.create({
73 providers: [{
74 provide: 'data',
75 useValue: {
76 model: this.defaultSort
77 }
78 }]
79 })
80 }
68} 81}
diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.html b/client/src/app/+videos/video-list/trending/video-trending-header.component.html
new file mode 100644
index 000000000..6319ee6d3
--- /dev/null
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.html
@@ -0,0 +1,6 @@
1<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="data.model" (ngModelChange)="setSort()">
2 <label *ngFor="let button of buttons" ngbButtonLabel class="btn-light" placement="bottom" [ngbTooltip]="button.tooltip" container="body">
3 <my-global-icon [iconName]="button.iconName"></my-global-icon>
4 <input ngbButton type="radio" [value]="button.value"> {{ button.label }}
5 </label>
6</div> \ No newline at end of file
diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
new file mode 100644
index 000000000..923a1d67a
--- /dev/null
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
@@ -0,0 +1,17 @@
1.btn-group label {
2 border: 1px solid transparent;
3 border-radius: 9999px !important;
4 padding: 5px 16px;
5 opacity: .8;
6
7 &:not(:first-child) {
8 margin-left: .5rem;
9 }
10
11 my-global-icon {
12 position: relative;
13 top: -2px;
14 height: 1rem;
15 margin-right: .1rem;
16 }
17} \ No newline at end of file
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
new file mode 100644
index 000000000..125f14e33
--- /dev/null
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts
@@ -0,0 +1,59 @@
1import { Component, Inject } from '@angular/core'
2import { Router } from '@angular/router'
3import { VideoListHeaderComponent } from '@app/shared/shared-video-miniature'
4import { GlobalIconName } from '@app/shared/shared-icons'
5import { VideoSortField } from '@shared/models'
6
7interface VideoTrendingHeaderItem {
8 label: string
9 iconName: GlobalIconName
10 value: VideoSortField
11 path: string
12 tooltip?: string
13}
14
15@Component({
16 selector: 'video-trending-title-page',
17 host: { 'class': 'title-page title-page-single' },
18 styleUrls: [ './video-trending-header.component.scss' ],
19 templateUrl: './video-trending-header.component.html'
20})
21export class VideoTrendingHeaderComponent extends VideoListHeaderComponent {
22 buttons: VideoTrendingHeaderItem[]
23
24 constructor (
25 @Inject('data') public data: any,
26 private router: Router
27 ) {
28 super(data)
29
30 this.buttons = [
31 {
32 label: $localize`:A variant of Trending videos based on the number of recent interactions:Hot`,
33 iconName: 'flame',
34 value: '-hot',
35 path: 'hot',
36 tooltip: $localize`Videos totalizing the most interactions for recent videos`,
37 },
38 {
39 label: $localize`:Main variant of Trending videos based on number of recent views:Views`,
40 iconName: 'trending',
41 value: '-trending',
42 path: 'trending',
43 tooltip: $localize`Videos totalizing the most views during the last 24 hours`,
44 },
45 {
46 label: $localize`:a variant of Trending videos based on the number of likes:Likes`,
47 iconName: 'like',
48 value: '-likes',
49 path: 'most-liked',
50 tooltip: $localize`Videos that have the most likes`
51 }
52 ]
53 }
54
55 setSort () {
56 const path = this.buttons.find(b => b.value === this.data.model).path
57 this.router.navigate([ `/videos/${path}` ])
58 }
59}
diff --git a/client/src/app/+videos/video-list/video-trending.component.ts b/client/src/app/+videos/video-list/trending/video-trending.component.ts
index a188795d1..e77231586 100644
--- a/client/src/app/+videos/video-list/video-trending.component.ts
+++ b/client/src/app/+videos/video-list/trending/video-trending.component.ts
@@ -1,4 +1,4 @@
1import { Component, OnDestroy, OnInit } from '@angular/core' 1import { Component, ComponentFactoryResolver, Injector, OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core' 3import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
4import { HooksService } from '@app/core/plugins/hooks.service' 4import { HooksService } from '@app/core/plugins/hooks.service'
@@ -6,13 +6,15 @@ import { immutableAssign } from '@app/helpers'
6import { VideoService } from '@app/shared/shared-main' 6import { VideoService } from '@app/shared/shared-main'
7import { AbstractVideoList } from '@app/shared/shared-video-miniature' 7import { AbstractVideoList } from '@app/shared/shared-video-miniature'
8import { VideoSortField } from '@shared/models' 8import { VideoSortField } from '@shared/models'
9import { VideoTrendingHeaderComponent } from './video-trending-header.component'
9 10
10@Component({ 11@Component({
11 selector: 'my-videos-trending', 12 selector: 'my-videos-trending',
12 styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ], 13 styleUrls: [ '../../../shared/shared-video-miniature/abstract-video-list.scss' ],
13 templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html' 14 templateUrl: '../../../shared/shared-video-miniature/abstract-video-list.html'
14}) 15})
15export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy { 16export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
17 HeaderComponent = VideoTrendingHeaderComponent
16 titlePage: string 18 titlePage: string
17 defaultSort: VideoSortField = '-trending' 19 defaultSort: VideoSortField = '-trending'
18 20
@@ -27,10 +29,13 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
27 protected userService: UserService, 29 protected userService: UserService,
28 protected screenService: ScreenService, 30 protected screenService: ScreenService,
29 protected storageService: LocalStorageService, 31 protected storageService: LocalStorageService,
32 protected cfr: ComponentFactoryResolver,
30 private videoService: VideoService, 33 private videoService: VideoService,
31 private hooks: HooksService 34 private hooks: HooksService
32 ) { 35 ) {
33 super() 36 super()
37
38 this.headerComponentInjector = this.getInjector()
34 } 39 }
35 40
36 ngOnInit () { 41 ngOnInit () {
@@ -43,13 +48,13 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
43 const trendingDays = config.trending.videos.intervalDays 48 const trendingDays = config.trending.videos.intervalDays
44 49
45 if (trendingDays === 1) { 50 if (trendingDays === 1) {
46 this.titlePage = $localize`Trending for the last 24 hours`
47 this.titleTooltip = $localize`Trending videos are those totalizing the greatest number of views during the last 24 hours` 51 this.titleTooltip = $localize`Trending videos are those totalizing the greatest number of views during the last 24 hours`
48 return 52 } else {
53 this.titleTooltip = $localize`Trending videos are those totalizing the greatest number of views during the last ${trendingDays} days`
49 } 54 }
50 55
51 this.titlePage = $localize`Trending for the last ${trendingDays} days` 56 this.headerComponentInjector = this.getInjector()
52 this.titleTooltip = $localize`Trending videos are those totalizing the greatest number of views during the last ${trendingDays} days` 57 this.setHeader()
53 }) 58 })
54 } 59 }
55 60
@@ -80,4 +85,15 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
80 generateSyndicationList () { 85 generateSyndicationList () {
81 this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf) 86 this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
82 } 87 }
88
89 getInjector () {
90 return Injector.create({
91 providers: [{
92 provide: 'data',
93 useValue: {
94 model: this.defaultSort
95 }
96 }]
97 })
98 }
83} 99}
diff --git a/client/src/app/+videos/video-list/video-local.component.ts b/client/src/app/+videos/video-list/video-local.component.ts
index 20dd61db9..af7eecff4 100644
--- a/client/src/app/+videos/video-list/video-local.component.ts
+++ b/client/src/app/+videos/video-list/video-local.component.ts
@@ -1,4 +1,4 @@
1import { Component, OnDestroy, OnInit } from '@angular/core' 1import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core' 3import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
4import { HooksService } from '@app/core/plugins/hooks.service' 4import { HooksService } from '@app/core/plugins/hooks.service'
@@ -28,6 +28,7 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
28 protected userService: UserService, 28 protected userService: UserService,
29 protected screenService: ScreenService, 29 protected screenService: ScreenService,
30 protected storageService: LocalStorageService, 30 protected storageService: LocalStorageService,
31 protected cfr: ComponentFactoryResolver,
31 private videoService: VideoService, 32 private videoService: VideoService,
32 private hooks: HooksService 33 private hooks: HooksService
33 ) { 34 ) {
diff --git a/client/src/app/+videos/video-list/video-recently-added.component.ts b/client/src/app/+videos/video-list/video-recently-added.component.ts
index 34db6aabd..2f4908074 100644
--- a/client/src/app/+videos/video-list/video-recently-added.component.ts
+++ b/client/src/app/+videos/video-list/video-recently-added.component.ts
@@ -1,4 +1,4 @@
1import { Component, OnDestroy, OnInit } from '@angular/core' 1import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core' 3import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
4import { HooksService } from '@app/core/plugins/hooks.service' 4import { HooksService } from '@app/core/plugins/hooks.service'
@@ -28,6 +28,7 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On
28 protected userService: UserService, 28 protected userService: UserService,
29 protected screenService: ScreenService, 29 protected screenService: ScreenService,
30 protected storageService: LocalStorageService, 30 protected storageService: LocalStorageService,
31 protected cfr: ComponentFactoryResolver,
31 private videoService: VideoService, 32 private videoService: VideoService,
32 private hooks: HooksService 33 private hooks: HooksService
33 ) { 34 ) {
diff --git a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
index 62d862ec9..e352a2b2c 100644
--- a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
+++ b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
@@ -1,6 +1,6 @@
1 1
2import { switchMap } from 'rxjs/operators' 2import { switchMap } from 'rxjs/operators'
3import { Component, OnDestroy, OnInit } from '@angular/core' 3import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, LocalStorageService, Notifier, ScopedTokensService, ScreenService, ServerService, UserService } from '@app/core' 5import { AuthService, LocalStorageService, Notifier, ScopedTokensService, ScreenService, ServerService, UserService } from '@app/core'
6import { HooksService } from '@app/core/plugins/hooks.service' 6import { HooksService } from '@app/core/plugins/hooks.service'
@@ -33,6 +33,7 @@ export class VideoUserSubscriptionsComponent extends AbstractVideoList implement
33 protected screenService: ScreenService, 33 protected screenService: ScreenService,
34 protected storageService: LocalStorageService, 34 protected storageService: LocalStorageService,
35 private userSubscription: UserSubscriptionService, 35 private userSubscription: UserSubscriptionService,
36 protected cfr: ComponentFactoryResolver,
36 private hooks: HooksService, 37 private hooks: HooksService,
37 private videoService: VideoService, 38 private videoService: VideoService,
38 private scopedTokensService: ScopedTokensService 39 private scopedTokensService: ScopedTokensService
@@ -102,7 +103,8 @@ export class VideoUserSubscriptionsComponent extends AbstractVideoList implement
102 } 103 }
103 104
104 generateSyndicationList () { 105 generateSyndicationList () {
105 // not implemented yet 106 /* method disabled: the view provides its own */
107 throw new Error('Method not implemented.')
106 } 108 }
107 109
108 activateCopiedMessage () { 110 activateCopiedMessage () {
diff --git a/client/src/app/+videos/videos-routing.module.ts b/client/src/app/+videos/videos-routing.module.ts
index f658182e0..b6850b436 100644
--- a/client/src/app/+videos/videos-routing.module.ts
+++ b/client/src/app/+videos/videos-routing.module.ts
@@ -3,10 +3,11 @@ import { RouterModule, Routes } from '@angular/router'
3import { LoginGuard } from '@app/core' 3import { LoginGuard } from '@app/core'
4import { MetaGuard } from '@ngx-meta/core' 4import { MetaGuard } from '@ngx-meta/core'
5import { VideoOverviewComponent } from './video-list/overview/video-overview.component' 5import { VideoOverviewComponent } from './video-list/overview/video-overview.component'
6import { VideoHotComponent } from './video-list/trending/video-hot.component'
7import { VideoMostLikedComponent } from './video-list/trending/video-most-liked.component'
8import { VideoTrendingComponent } from './video-list/trending/video-trending.component'
6import { VideoLocalComponent } from './video-list/video-local.component' 9import { VideoLocalComponent } from './video-list/video-local.component'
7import { VideoMostLikedComponent } from './video-list/video-most-liked.component'
8import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component' 10import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
9import { VideoTrendingComponent } from './video-list/video-trending.component'
10import { VideoUserSubscriptionsComponent } from './video-list/video-user-subscriptions.component' 11import { VideoUserSubscriptionsComponent } from './video-list/video-user-subscriptions.component'
11import { VideosComponent } from './videos.component' 12import { VideosComponent } from './videos.component'
12 13
@@ -39,6 +40,19 @@ const videosRoutes: Routes = [
39 } 40 }
40 }, 41 },
41 { 42 {
43 path: 'hot',
44 component: VideoHotComponent,
45 data: {
46 meta: {
47 title: $localize`Hot videos`
48 },
49 reuse: {
50 enabled: true,
51 key: 'hot-videos-list'
52 }
53 }
54 },
55 {
42 path: 'most-liked', 56 path: 'most-liked',
43 component: VideoMostLikedComponent, 57 component: VideoMostLikedComponent,
44 data: { 58 data: {
diff --git a/client/src/app/+videos/videos.module.ts b/client/src/app/+videos/videos.module.ts
index 1cf68bf83..4c88a0397 100644
--- a/client/src/app/+videos/videos.module.ts
+++ b/client/src/app/+videos/videos.module.ts
@@ -1,3 +1,4 @@
1import { CommonModule } from '@angular/common'
1import { NgModule } from '@angular/core' 2import { NgModule } from '@angular/core'
2import { SharedFormModule } from '@app/shared/shared-forms' 3import { SharedFormModule } from '@app/shared/shared-forms'
3import { SharedGlobalIconModule } from '@app/shared/shared-icons' 4import { SharedGlobalIconModule } from '@app/shared/shared-icons'
@@ -6,10 +7,12 @@ import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscripti
6import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' 7import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
7import { OverviewService } from './video-list' 8import { OverviewService } from './video-list'
8import { VideoOverviewComponent } from './video-list/overview/video-overview.component' 9import { VideoOverviewComponent } from './video-list/overview/video-overview.component'
10import { VideoTrendingHeaderComponent } from './video-list/trending/video-trending-header.component'
11import { VideoHotComponent } from './video-list/trending/video-hot.component'
12import { VideoTrendingComponent } from './video-list/trending/video-trending.component'
13import { VideoMostLikedComponent } from './video-list/trending/video-most-liked.component'
9import { VideoLocalComponent } from './video-list/video-local.component' 14import { VideoLocalComponent } from './video-list/video-local.component'
10import { VideoMostLikedComponent } from './video-list/video-most-liked.component'
11import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component' 15import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
12import { VideoTrendingComponent } from './video-list/video-trending.component'
13import { VideoUserSubscriptionsComponent } from './video-list/video-user-subscriptions.component' 16import { VideoUserSubscriptionsComponent } from './video-list/video-user-subscriptions.component'
14import { VideosRoutingModule } from './videos-routing.module' 17import { VideosRoutingModule } from './videos-routing.module'
15import { VideosComponent } from './videos.component' 18import { VideosComponent } from './videos.component'
@@ -28,7 +31,9 @@ import { VideosComponent } from './videos.component'
28 declarations: [ 31 declarations: [
29 VideosComponent, 32 VideosComponent,
30 33
34 VideoTrendingHeaderComponent,
31 VideoTrendingComponent, 35 VideoTrendingComponent,
36 VideoHotComponent,
32 VideoMostLikedComponent, 37 VideoMostLikedComponent,
33 VideoRecentlyAddedComponent, 38 VideoRecentlyAddedComponent,
34 VideoLocalComponent, 39 VideoLocalComponent,
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index f9e8ec2f4..9aa397edd 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -132,11 +132,6 @@
132 <ng-container i18n>Trending</ng-container> 132 <ng-container i18n>Trending</ng-container>
133 </a> 133 </a>
134 134
135 <a routerLink="/videos/most-liked" routerLinkActive="active">
136 <my-global-icon iconName="like" aria-hidden="true"></my-global-icon>
137 <ng-container i18n>Most liked</ng-container>
138 </a>
139
140 <a routerLink="/videos/recently-added" routerLinkActive="active"> 135 <a routerLink="/videos/recently-added" routerLinkActive="active">
141 <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon> 136 <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon>
142 <ng-container i18n>Recently added</ng-container> 137 <ng-container i18n>Recently added</ng-container>
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index 0924b8119..def488df0 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -16,6 +16,7 @@ const icons = {
16 'playlist-add': require('!!raw-loader?!../../../assets/images/misc/playlist-add.svg').default, // material ui 16 'playlist-add': require('!!raw-loader?!../../../assets/images/misc/playlist-add.svg').default, // material ui
17 'follower': require('!!raw-loader?!../../../assets/images/misc/account-arrow-left.svg').default, // material ui 17 'follower': require('!!raw-loader?!../../../assets/images/misc/account-arrow-left.svg').default, // material ui
18 'following': require('!!raw-loader?!../../../assets/images/misc/account-arrow-right.svg').default, // material ui 18 'following': require('!!raw-loader?!../../../assets/images/misc/account-arrow-right.svg').default, // material ui
19 'flame': require('!!raw-loader?!../../../assets/images/misc/flame.svg').default,
19 20
20 // feather icons 21 // feather icons
21 'flag': require('!!raw-loader?!../../../assets/images/feather/flag.svg').default, 22 'flag': require('!!raw-loader?!../../../assets/images/feather/flag.svg').default,
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index c69a4c8b2..9d550996d 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -11,7 +11,8 @@ import {
11 NgbModalModule, 11 NgbModalModule,
12 NgbNavModule, 12 NgbNavModule,
13 NgbPopoverModule, 13 NgbPopoverModule,
14 NgbTooltipModule 14 NgbTooltipModule,
15 NgbButtonsModule
15} from '@ng-bootstrap/ng-bootstrap' 16} from '@ng-bootstrap/ng-bootstrap'
16import { LoadingBarModule } from '@ngx-loading-bar/core' 17import { LoadingBarModule } from '@ngx-loading-bar/core'
17import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client' 18import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
@@ -53,6 +54,7 @@ import { VideoChannelService } from './video-channel'
53 NgbNavModule, 54 NgbNavModule,
54 NgbTooltipModule, 55 NgbTooltipModule,
55 NgbCollapseModule, 56 NgbCollapseModule,
57 NgbButtonsModule,
56 58
57 ClipboardModule, 59 ClipboardModule,
58 60
@@ -110,6 +112,7 @@ import { VideoChannelService } from './video-channel'
110 NgbNavModule, 112 NgbNavModule,
111 NgbTooltipModule, 113 NgbTooltipModule,
112 NgbCollapseModule, 114 NgbCollapseModule,
115 NgbButtonsModule,
113 116
114 ClipboardModule, 117 ClipboardModule,
115 118
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 368a7d70e..07f79cd6d 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -1,13 +1,9 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <div class="videos-header"> 2 <div class="videos-header">
3 <h1 *ngIf="titlePage" class="title-page title-page-single"> 3 <ng-template #videoListHeader></ng-template>
4 <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
5 {{ titlePage }}
6 </div>
7 </h1>
8 4
9 <div class="action-block"> 5 <div class="action-block">
10 <my-feed *ngIf="titlePage" [syndicationItems]="syndicationItems"></my-feed> 6 <my-feed *ngIf="syndicationItems" [syndicationItems]="syndicationItems"></my-feed>
11 <ng-container *ngFor="let action of actions"> 7 <ng-container *ngFor="let action of actions">
12 <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active"> 8 <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
13 <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container> 9 <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 1c27c58c3..2eaf0dc70 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -5,16 +5,16 @@
5 5
6$iconSize: 16px; 6$iconSize: 16px;
7 7
8::ng-deep .title-page.title-page-single {
9 display: flex;
10 flex-grow: 1;
11}
12
8.videos-header { 13.videos-header {
9 display: flex; 14 display: flex;
10 justify-content: space-between; 15 justify-content: space-between;
11 align-items: center; 16 align-items: center;
12 17
13 .title-page.title-page-single {
14 display: flex;
15 flex-grow: 1;
16 }
17
18 .action-block { 18 .action-block {
19 ::ng-deep my-feed { 19 ::ng-deep my-feed {
20 my-global-icon { 20 my-global-icon {
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
index a5f22585d..3e84589cd 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
@@ -1,6 +1,16 @@
1import { fromEvent, Observable, Subject, Subscription } from 'rxjs' 1import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
2import { debounceTime, switchMap, tap } from 'rxjs/operators' 2import { debounceTime, switchMap, tap } from 'rxjs/operators'
3import { Directive, OnDestroy, OnInit } from '@angular/core' 3import {
4 AfterContentInit,
5 ComponentFactoryResolver,
6 Directive,
7 Injector,
8 OnDestroy,
9 OnInit,
10 Type,
11 ViewChild,
12 ViewContainerRef
13} from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 14import { ActivatedRoute, Router } from '@angular/router'
5import { 15import {
6 AuthService, 16 AuthService,
@@ -19,6 +29,7 @@ import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/mo
19import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' 29import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
20import { Syndication, Video } from '../shared-main' 30import { Syndication, Video } from '../shared-main'
21import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component' 31import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
32import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component'
22 33
23enum GroupDate { 34enum GroupDate {
24 UNKNOWN = 0, 35 UNKNOWN = 0,
@@ -32,7 +43,12 @@ enum GroupDate {
32 43
33@Directive() 44@Directive()
34// tslint:disable-next-line: directive-class-suffix 45// tslint:disable-next-line: directive-class-suffix
35export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook { 46export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterContentInit, DisableForReuseHook {
47 @ViewChild('videoListHeader', { static: true, read: ViewContainerRef }) videoListHeader: ViewContainerRef
48
49 HeaderComponent: Type<GenericHeaderComponent> = VideoListHeaderComponent
50 headerComponentInjector: Injector
51
36 pagination: ComponentPaginationLight = { 52 pagination: ComponentPaginationLight = {
37 currentPage: 1, 53 currentPage: 1,
38 itemsPerPage: 25 54 itemsPerPage: 25
@@ -92,6 +108,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
92 protected abstract screenService: ScreenService 108 protected abstract screenService: ScreenService
93 protected abstract storageService: LocalStorageService 109 protected abstract storageService: LocalStorageService
94 protected abstract router: Router 110 protected abstract router: Router
111 protected abstract cfr: ComponentFactoryResolver
95 abstract titlePage: string 112 abstract titlePage: string
96 113
97 private resizeSubscription: Subscription 114 private resizeSubscription: Subscription
@@ -153,6 +170,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
153 if (this.resizeSubscription) this.resizeSubscription.unsubscribe() 170 if (this.resizeSubscription) this.resizeSubscription.unsubscribe()
154 } 171 }
155 172
173 ngAfterContentInit () {
174 if (this.videoListHeader) {
175 // some components don't use the header: they use their own template, like my-history.component.html
176 this.setHeader.apply(this, [ this.HeaderComponent, this.headerComponentInjector ])
177 }
178 }
179
156 disableForReuse () { 180 disableForReuse () {
157 this.disabled = true 181 this.disabled = true
158 } 182 }
@@ -268,7 +292,27 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
268 } 292 }
269 293
270 toggleModerationDisplay () { 294 toggleModerationDisplay () {
271 throw new Error('toggleModerationDisplay is not implemented') 295 throw new Error('toggleModerationDisplay ' + $localize`function is not implemented`)
296 }
297
298 setHeader (
299 t: Type<any> = this.HeaderComponent,
300 i: Injector = this.headerComponentInjector
301 ) {
302 const injector = i || Injector.create({
303 providers: [{
304 provide: 'data',
305 useValue: {
306 titlePage: this.titlePage,
307 titleTooltip: this.titleTooltip
308 }
309 }]
310 })
311 const viewContainerRef = this.videoListHeader
312 viewContainerRef.clear()
313
314 const componentFactory = this.cfr.resolveComponentFactory(t)
315 viewContainerRef.createComponent(componentFactory, 0, injector)
272 } 316 }
273 317
274 // On videos hook for children that want to do something 318 // On videos hook for children that want to do something
diff --git a/client/src/app/shared/shared-video-miniature/index.ts b/client/src/app/shared/shared-video-miniature/index.ts
index 47ca6f51b..a8fd82bb9 100644
--- a/client/src/app/shared/shared-video-miniature/index.ts
+++ b/client/src/app/shared/shared-video-miniature/index.ts
@@ -3,5 +3,5 @@ export * from './video-actions-dropdown.component'
3export * from './video-download.component' 3export * from './video-download.component'
4export * from './video-miniature.component' 4export * from './video-miniature.component'
5export * from './videos-selection.component' 5export * from './videos-selection.component'
6 6export * from './video-list-header.component'
7export * from './shared-video-miniature.module' 7export * from './shared-video-miniature.module'
diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
index 3035bcfb3..7a7868853 100644
--- a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
+++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
@@ -12,6 +12,7 @@ import { VideoActionsDropdownComponent } from './video-actions-dropdown.componen
12import { VideoDownloadComponent } from './video-download.component' 12import { VideoDownloadComponent } from './video-download.component'
13import { VideoMiniatureComponent } from './video-miniature.component' 13import { VideoMiniatureComponent } from './video-miniature.component'
14import { VideosSelectionComponent } from './videos-selection.component' 14import { VideosSelectionComponent } from './videos-selection.component'
15import { VideoListHeaderComponent } from './video-list-header.component'
15 16
16@NgModule({ 17@NgModule({
17 imports: [ 18 imports: [
@@ -29,7 +30,8 @@ import { VideosSelectionComponent } from './videos-selection.component'
29 VideoActionsDropdownComponent, 30 VideoActionsDropdownComponent,
30 VideoDownloadComponent, 31 VideoDownloadComponent,
31 VideoMiniatureComponent, 32 VideoMiniatureComponent,
32 VideosSelectionComponent 33 VideosSelectionComponent,
34 VideoListHeaderComponent
33 ], 35 ],
34 36
35 exports: [ 37 exports: [
diff --git a/client/src/app/shared/shared-video-miniature/video-list-header.component.ts b/client/src/app/shared/shared-video-miniature/video-list-header.component.ts
new file mode 100644
index 000000000..a07248b96
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-list-header.component.ts
@@ -0,0 +1,20 @@
1import { Component, Inject } from '@angular/core'
2
3export abstract class GenericHeaderComponent {
4 constructor (@Inject('data') public data: any) {}
5}
6
7@Component({
8 selector: 'h1',
9 host: { 'class': 'title-page title-page-single' },
10 template: `
11<div placement="bottom" [ngbTooltip]="data.titleTooltip" container="body">
12 {{ data.titlePage }}
13</div>
14 `
15})
16export class VideoListHeaderComponent extends GenericHeaderComponent {
17 constructor (@Inject('data') public data: any) {
18 super(data)
19 }
20}
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
index 2b060b130..ef59975d4 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -2,6 +2,7 @@ import { Observable } from 'rxjs'
2import { 2import {
3 AfterContentInit, 3 AfterContentInit,
4 Component, 4 Component,
5 ComponentFactoryResolver,
5 ContentChildren, 6 ContentChildren,
6 EventEmitter, 7 EventEmitter,
7 Input, 8 Input,
@@ -51,7 +52,8 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
51 protected userService: UserService, 52 protected userService: UserService,
52 protected screenService: ScreenService, 53 protected screenService: ScreenService,
53 protected storageService: LocalStorageService, 54 protected storageService: LocalStorageService,
54 protected serverService: ServerService 55 protected serverService: ServerService,
56 protected cfr: ComponentFactoryResolver
55 ) { 57 ) {
56 super() 58 super()
57 } 59 }
diff --git a/client/src/assets/images/misc/flame.svg b/client/src/assets/images/misc/flame.svg
new file mode 100644
index 000000000..be478bdd4
--- /dev/null
+++ b/client/src/assets/images/misc/flame.svg
@@ -0,0 +1,4 @@
1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-78 0 512 512">
2 <defs/>
3 <path d="M178.2 512A178.9 178.9 0 010 332.8c0-43 14.7-72.3 31.6-106.2 9.5-18.8 19.2-38.2 28.2-63l9.4-25.9 23 5.6-3.7 27.3c-3 22.2 1 47.5 11.1 69.2 4.3 9.3 9.5 17.4 15.2 24.3a316 316 0 0111-104 288 288 0 0146.8-94.7c26.4-35.2 56.7-58.1 70.8-60L283.3 0l-26.9 30a74 74 0 00-18.8 49.5c0 35.3 21.6 60.4 46.8 89.5a359.4 359.4 0 0148.1 65.7c16 30 23.8 62.1 23.8 98.1 0 98.8-79.9 179.2-178.1 179.2zm0 0" fill="currentColor"/>
4</svg>