Add 'Most liked videos' page

client/src/app/menu/menu.component.html

@@ -71,6 +71,11 @@
           <ng-container i18n>Trending</ng-container>
         </a>
 
+        <a routerLink="/videos/most-liked" routerLinkActive="active">
+          <my-global-icon iconName="like"></my-global-icon>
+          <ng-container i18n>Most liked</ng-container>
+        </a>
+
         <a routerLink="/videos/recently-added" routerLinkActive="active">
           <my-global-icon iconName="recently-added"></my-global-icon>
           <ng-container i18n>Recently added</ng-container>

client/src/app/videos/video-list/index.ts

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

client/src/app/videos/video-list/video-most-liked.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { immutableAssign } from '@app/shared/misc/utils'
+import { AuthService } from '../../core/auth'
+import { AbstractVideoList } from '../../shared/video/abstract-video-list'
+import { VideoSortField } from '../../shared/video/sort-field.type'
+import { VideoService } from '../../shared/video/video.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ScreenService } from '@app/shared/misc/screen.service'
+import { Notifier, ServerService } from '@app/core'
+import { HooksService } from '@app/core/plugins/hooks.service'
+
+@Component({
+  selector: 'my-videos-most-liked',
+  styleUrls: [ '../../shared/video/abstract-video-list.scss' ],
+  templateUrl: '../../shared/video/abstract-video-list.html'
+})
+export class VideoMostLikedComponent extends AbstractVideoList implements OnInit {
+  titlePage: string
+  defaultSort: VideoSortField = '-likes'
+
+  useUserVideoLanguagePreferences = true
+
+  constructor (
+    protected i18n: I18n,
+    protected router: Router,
+    protected serverService: ServerService,
+    protected route: ActivatedRoute,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected screenService: ScreenService,
+    private videoService: VideoService,
+    private hooks: HooksService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+
+    this.generateSyndicationList()
+
+    this.serverService.configLoaded.subscribe(
+      () => {
+        this.titlePage = this.i18n('Most liked videos')
+        this.titleTooltip = this.i18n('Videos that have the higher number of likes.')
+      })
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+    const params = {
+      videoPagination: newPagination,
+      sort: this.sort,
+      categoryOneOf: this.categoryOneOf,
+      languageOneOf: this.languageOneOf
+    }
+
+    return this.hooks.wrapObsFun(
+      this.videoService.getVideos.bind(this.videoService),
+      params,
+      'common',
+      'filter:api.most-liked-videos.videos.list.params',
+      'filter:api.most-liked-videos.videos.list.result'
+    )
+  }
+
+  generateSyndicationList () {
+    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
+  }
+}

client/src/app/videos/videos-routing.module.ts

@@ -4,6 +4,7 @@ import { VideoLocalComponent } from '@app/videos/video-list/video-local.componen
 import { MetaGuard } from '@ngx-meta/core'
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
 import { VideoTrendingComponent } from './video-list/video-trending.component'
+import { VideoMostLikedComponent } from './video-list/video-most-liked.component'
 import { VideosComponent } from './videos.component'
 import { VideoUserSubscriptionsComponent } from '@app/videos/video-list/video-user-subscriptions.component'
 import { VideoOverviewComponent } from '@app/videos/video-list/video-overview.component'
@@ -36,6 +37,19 @@ const videosRoutes: Routes = [
           }
         }
       },
+      {
+        path: 'most-liked',
+        component: VideoMostLikedComponent,
+        data: {
+          meta: {
+            title: 'Most liked videos'
+          },
+          reuse: {
+            enabled: true,
+            key: 'most-liked-videos-list'
+          }
+        }
+      },
       {
         path: 'recently-added',
         component: VideoRecentlyAddedComponent,

client/src/app/videos/videos.module.ts

@@ -3,6 +3,7 @@ import { VideoLocalComponent } from '@app/videos/video-list/video-local.componen
 import { SharedModule } from '../shared'
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
 import { VideoTrendingComponent } from './video-list/video-trending.component'
+import { VideoMostLikedComponent } from './video-list/video-most-liked.component'
 import { VideosRoutingModule } from './videos-routing.module'
 import { VideosComponent } from './videos.component'
 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
     VideosComponent,
 
     VideoTrendingComponent,
+    VideoMostLikedComponent,
     VideoRecentlyAddedComponent,
     VideoLocalComponent,
     VideoUserSubscriptionsComponent,

shared/models/plugins/client-hook.model.ts

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