From c07eb946531dd190ae50624832e1147c8ccf3692 Mon Sep 17 00:00:00 2001 From: Julien Maulny Date: Tue, 1 Oct 2019 23:11:53 +0200 Subject: Add 'Most liked videos' page --- client/src/app/menu/menu.component.html | 5 ++ client/src/app/videos/video-list/index.ts | 1 + .../video-list/video-most-liked.component.ts | 71 ++++++++++++++++++++++ client/src/app/videos/videos-routing.module.ts | 14 +++++ client/src/app/videos/videos.module.ts | 2 + shared/models/plugins/client-hook.model.ts | 4 ++ 6 files changed, 97 insertions(+) create mode 100644 client/src/app/videos/video-list/video-most-liked.component.ts diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 7eb6f7b35..a29e145ad 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -71,6 +71,11 @@ Trending + + + Most liked + + Recently added diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts index 5f7c8bd48..b367110ae 100644 --- a/client/src/app/videos/video-list/index.ts +++ b/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' diff --git a/client/src/app/videos/video-list/video-most-liked.component.ts b/client/src/app/videos/video-list/video-most-liked.component.ts new file mode 100644 index 000000000..aff8413eb --- /dev/null +++ b/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) + } +} diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts index f0049d8c4..11a087d0a 100644 --- a/client/src/app/videos/videos-routing.module.ts +++ b/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, diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts index 5cf1e944f..95078a734 100644 --- a/client/src/app/videos/videos.module.ts +++ b/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, diff --git a/shared/models/plugins/client-hook.model.ts b/shared/models/plugins/client-hook.model.ts index cfa2653c6..fd560302c 100644 --- a/shared/models/plugins/client-hook.model.ts +++ b/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, -- cgit v1.2.3