Browse Source

Add 'Most liked videos' page

Julien Maulny 1 month ago
parent
commit
c07eb94653

+ 5
- 0
client/src/app/menu/menu.component.html View File

@@ -71,6 +71,11 @@
71 71
           <ng-container i18n>Trending</ng-container>
72 72
         </a>
73 73
 
74
+        <a routerLink="/videos/most-liked" routerLinkActive="active">
75
+          <my-global-icon iconName="like"></my-global-icon>
76
+          <ng-container i18n>Most liked</ng-container>
77
+        </a>
78
+
74 79
         <a routerLink="/videos/recently-added" routerLinkActive="active">
75 80
           <my-global-icon iconName="recently-added"></my-global-icon>
76 81
           <ng-container i18n>Recently added</ng-container>

+ 1
- 0
client/src/app/videos/video-list/index.ts View File

@@ -1,3 +1,4 @@
1 1
 export * from './video-local.component'
2 2
 export * from './video-recently-added.component'
3 3
 export * from './video-trending.component'
4
+export * from './video-most-liked.component'

+ 71
- 0
client/src/app/videos/video-list/video-most-liked.component.ts View File

@@ -0,0 +1,71 @@
1
+import { Component, OnInit } from '@angular/core'
2
+import { ActivatedRoute, Router } from '@angular/router'
3
+import { immutableAssign } from '@app/shared/misc/utils'
4
+import { AuthService } from '../../core/auth'
5
+import { AbstractVideoList } from '../../shared/video/abstract-video-list'
6
+import { VideoSortField } from '../../shared/video/sort-field.type'
7
+import { VideoService } from '../../shared/video/video.service'
8
+import { I18n } from '@ngx-translate/i18n-polyfill'
9
+import { ScreenService } from '@app/shared/misc/screen.service'
10
+import { Notifier, ServerService } from '@app/core'
11
+import { HooksService } from '@app/core/plugins/hooks.service'
12
+
13
+@Component({
14
+  selector: 'my-videos-most-liked',
15
+  styleUrls: [ '../../shared/video/abstract-video-list.scss' ],
16
+  templateUrl: '../../shared/video/abstract-video-list.html'
17
+})
18
+export class VideoMostLikedComponent extends AbstractVideoList implements OnInit {
19
+  titlePage: string
20
+  defaultSort: VideoSortField = '-likes'
21
+
22
+  useUserVideoLanguagePreferences = true
23
+
24
+  constructor (
25
+    protected i18n: I18n,
26
+    protected router: Router,
27
+    protected serverService: ServerService,
28
+    protected route: ActivatedRoute,
29
+    protected notifier: Notifier,
30
+    protected authService: AuthService,
31
+    protected screenService: ScreenService,
32
+    private videoService: VideoService,
33
+    private hooks: HooksService
34
+  ) {
35
+    super()
36
+  }
37
+
38
+  ngOnInit () {
39
+    super.ngOnInit()
40
+
41
+    this.generateSyndicationList()
42
+
43
+    this.serverService.configLoaded.subscribe(
44
+      () => {
45
+        this.titlePage = this.i18n('Most liked videos')
46
+        this.titleTooltip = this.i18n('Videos that have the higher number of likes.')
47
+      })
48
+  }
49
+
50
+  getVideosObservable (page: number) {
51
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
52
+    const params = {
53
+      videoPagination: newPagination,
54
+      sort: this.sort,
55
+      categoryOneOf: this.categoryOneOf,
56
+      languageOneOf: this.languageOneOf
57
+    }
58
+
59
+    return this.hooks.wrapObsFun(
60
+      this.videoService.getVideos.bind(this.videoService),
61
+      params,
62
+      'common',
63
+      'filter:api.most-liked-videos.videos.list.params',
64
+      'filter:api.most-liked-videos.videos.list.result'
65
+    )
66
+  }
67
+
68
+  generateSyndicationList () {
69
+    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
70
+  }
71
+}

+ 14
- 0
client/src/app/videos/videos-routing.module.ts View File

@@ -4,6 +4,7 @@ import { VideoLocalComponent } from '@app/videos/video-list/video-local.componen
4 4
 import { MetaGuard } from '@ngx-meta/core'
5 5
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
6 6
 import { VideoTrendingComponent } from './video-list/video-trending.component'
7
+import { VideoMostLikedComponent } from './video-list/video-most-liked.component'
7 8
 import { VideosComponent } from './videos.component'
8 9
 import { VideoUserSubscriptionsComponent } from '@app/videos/video-list/video-user-subscriptions.component'
9 10
 import { VideoOverviewComponent } from '@app/videos/video-list/video-overview.component'
@@ -36,6 +37,19 @@ const videosRoutes: Routes = [
36 37
           }
37 38
         }
38 39
       },
40
+      {
41
+        path: 'most-liked',
42
+        component: VideoMostLikedComponent,
43
+        data: {
44
+          meta: {
45
+            title: 'Most liked videos'
46
+          },
47
+          reuse: {
48
+            enabled: true,
49
+            key: 'most-liked-videos-list'
50
+          }
51
+        }
52
+      },
39 53
       {
40 54
         path: 'recently-added',
41 55
         component: VideoRecentlyAddedComponent,

+ 2
- 0
client/src/app/videos/videos.module.ts View File

@@ -3,6 +3,7 @@ import { VideoLocalComponent } from '@app/videos/video-list/video-local.componen
3 3
 import { SharedModule } from '../shared'
4 4
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
5 5
 import { VideoTrendingComponent } from './video-list/video-trending.component'
6
+import { VideoMostLikedComponent } from './video-list/video-most-liked.component'
6 7
 import { VideosRoutingModule } from './videos-routing.module'
7 8
 import { VideosComponent } from './videos.component'
8 9
 import { VideoUserSubscriptionsComponent } from '@app/videos/video-list/video-user-subscriptions.component'
@@ -18,6 +19,7 @@ import { VideoOverviewComponent } from '@app/videos/video-list/video-overview.co
18 19
     VideosComponent,
19 20
 
20 21
     VideoTrendingComponent,
22
+    VideoMostLikedComponent,
21 23
     VideoRecentlyAddedComponent,
22 24
     VideoLocalComponent,
23 25
     VideoUserSubscriptionsComponent,

+ 4
- 0
shared/models/plugins/client-hook.model.ts View File

@@ -5,6 +5,10 @@ export const clientFilterHookObject = {
5 5
   'filter:api.trending-videos.videos.list.params': true,
6 6
   'filter:api.trending-videos.videos.list.result': true,
7 7
 
8
+  // Filter params/result of the function that fetch videos of the trending page
9
+  'filter:api.most-liked-videos.videos.list.params': true,
10
+  'filter:api.most-liked-videos.videos.list.result': true,
11
+
8 12
   // Filter params/result of the function that fetch videos of the local page
9 13
   'filter:api.local-videos.videos.list.params': true,
10 14
   'filter:api.local-videos.videos.list.result': true,

Loading…
Cancel
Save