move from trending routes to alg param

8 files changed, 85 insertions, 256 deletions

diff --git a/client/src/app/+videos/video-list/trending/index.ts b/client/src/app/+videos/video-list/trending/index.ts
index 93f4b1df6..70835885a 100644
--- a/client/src/app/+videos/video-list/trending/index.ts
+++ b/client/src/app/+videos/video-list/trending/index.ts
@@ -1,4 +1,2 @@
 export * from './video-trending-header.component'
-export * from './video-hot.component'
-export * from './video-most-viewed.component'
-export * from './video-most-liked.component'
+export * from './video-trending.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
deleted file mode 100644
index 1617eb21e..000000000
--- a/client/src/app/+videos/video-list/trending/video-hot.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Component, ComponentFactoryResolver, Injector, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { immutableAssign } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { VideoSortField } from '@shared/models'
-import { VideoTrendingHeaderComponent } from './video-trending-header.component'
-
-@Component({
-  selector: 'my-videos-hot',
-  styleUrls: [ '../../../shared/shared-video-miniature/abstract-video-list.scss' ],
-  templateUrl: '../../../shared/shared-video-miniature/abstract-video-list.html'
-})
-export class VideoHotComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  HeaderComponent = VideoTrendingHeaderComponent
-  titlePage: string
-  defaultSort: VideoSortField = '-hot'
-
-  useUserVideoPreferences = true
-
-  constructor (
-    protected router: Router,
-    protected serverService: ServerService,
-    protected route: ActivatedRoute,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected userService: UserService,
-    protected screenService: ScreenService,
-    protected storageService: LocalStorageService,
-    protected cfr: ComponentFactoryResolver,
-    private videoService: VideoService,
-    private hooks: HooksService
-  ) {
-    super()
-
-    this.headerComponentInjector = this.getInjector()
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-
-    this.generateSyndicationList()
-  }
-
-  ngOnDestroy () {
-    super.ngOnDestroy()
-  }
-
-  getVideosObservable (page: number) {
-    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    const params = {
-      videoPagination: newPagination,
-      sort: this.sort,
-      categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf,
-      nsfwPolicy: this.nsfwPolicy,
-      skipCount: true
-    }
-
-    return this.hooks.wrapObsFun(
-      this.videoService.getVideos.bind(this.videoService),
-      params,
-      'common',
-      'filter:api.trending-videos.videos.list.params',
-      'filter:api.trending-videos.videos.list.result'
-    )
-  }
-
-  generateSyndicationList () {
-    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
-  }
-
-  getInjector () {
-    return Injector.create({
-      providers: [{
-        provide: 'data',
-        useValue: {
-          model: this.defaultSort
-        }
-      }]
-    })
-  }
-}
diff --git a/client/src/app/+videos/video-list/trending/video-most-liked.component.ts b/client/src/app/+videos/video-list/trending/video-most-liked.component.ts
deleted file mode 100644
index 1781cc6aa..000000000
--- a/client/src/app/+videos/video-list/trending/video-most-liked.component.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Component, ComponentFactoryResolver, Injector, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { immutableAssign } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { VideoSortField } from '@shared/models'
-import { VideoTrendingHeaderComponent } from './video-trending-header.component'
-
-@Component({
-  selector: 'my-videos-most-liked',
-  styleUrls: [ '../../../shared/shared-video-miniature/abstract-video-list.scss' ],
-  templateUrl: '../../../shared/shared-video-miniature/abstract-video-list.html'
-})
-export class VideoMostLikedComponent extends AbstractVideoList implements OnInit {
-  HeaderComponent = VideoTrendingHeaderComponent
-  titlePage: string
-  defaultSort: VideoSortField = '-likes'
-
-  useUserVideoPreferences = true
-
-  constructor (
-    protected router: Router,
-    protected serverService: ServerService,
-    protected route: ActivatedRoute,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected userService: UserService,
-    protected screenService: ScreenService,
-    protected storageService: LocalStorageService,
-    protected cfr: ComponentFactoryResolver,
-    private videoService: VideoService,
-    private hooks: HooksService
-  ) {
-    super()
-
-    this.headerComponentInjector = this.getInjector()
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-
-    this.generateSyndicationList()
-  }
-
-  getVideosObservable (page: number) {
-    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    const params = {
-      videoPagination: newPagination,
-      sort: this.sort,
-      categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf,
-      nsfwPolicy: this.nsfwPolicy,
-      skipCount: true
-    }
-
-    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)
-  }
-
-  getInjector () {
-    return Injector.create({
-      providers: [{
-        provide: 'data',
-        useValue: {
-          model: this.defaultSort
-        }
-      }]
-    })
-  }
-}
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
index a025bf1a2..7eb1e4f95 100644
--- 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
@@ -1,6 +1,8 @@
 <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="data.model" (ngModelChange)="setSort()">
-  <label *ngFor="let button of visibleButtons" ngbButtonLabel class="btn-light" placement="bottom" [ngbTooltip]="button.tooltip" container="body">
-    <my-global-icon [iconName]="button.iconName"></my-global-icon>
-    <input ngbButton type="radio" [value]="button.value"> {{ button.label }}
-  </label>
+  <ng-container *ngFor="let button of buttons">
+    <label *ngIf="!button.hidden" ngbButtonLabel class="btn-light" placement="bottom" [ngbTooltip]="button.tooltip" container="body">
+      <my-global-icon [iconName]="button.iconName"></my-global-icon>
+      <input ngbButton type="radio" [value]="button.value"> {{ button.label }}
+    </label>
+  </ng-container>
 </div>
\ 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
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 @@
-import { Component, Inject, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { Component, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
 import { VideoListHeaderComponent } from '@app/shared/shared-video-miniature'
 import { GlobalIconName } from '@app/shared/shared-icons'
-import { VideoSortField } from '@shared/models'
 import { ServerService } from '@app/core/server/server.service'
+import { Subscription } from 'rxjs'
+import { RedirectService } from '@app/core'
 
 interface VideoTrendingHeaderItem {
   label: string
   iconName: GlobalIconName
-  value: VideoSortField
-  path: string
+  value: string
   tooltip?: string
   hidden?: boolean
 }
 
 @Component({
   selector: 'video-trending-title-page',
-  host: { 'class': 'title-page title-page-single' },
   styleUrls: [ './video-trending-header.component.scss' ],
   templateUrl: './video-trending-header.component.html'
 })
-export class VideoTrendingHeaderComponent extends VideoListHeaderComponent implements OnInit {
+export class VideoTrendingHeaderComponent extends VideoListHeaderComponent implements OnInit, OnDestroy {
+  @HostBinding('class') class = 'title-page title-page-single'
+
   buttons: VideoTrendingHeaderItem[]
 
+  private algorithmChangeSub: Subscription
+
   constructor (
     @Inject('data') public data: any,
+    private route: ActivatedRoute,
     private router: Router,
     private serverService: ServerService
   ) {
@@ -34,23 +38,20 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple
       {
         label: $localize`:A variant of Trending videos based on the number of recent interactions:Hot`,
         iconName: 'flame',
-        value: '-hot',
-        path: 'hot',
+        value: 'hot',
         tooltip: $localize`Videos totalizing the most interactions for recent videos`,
         hidden: true
       },
       {
         label: $localize`:Main variant of Trending videos based on number of recent views:Views`,
         iconName: 'trending',
-        value: '-trending',
-        path: 'most-viewed',
-        tooltip: $localize`Videos totalizing the most views during the last 24 hours`,
+        value: 'most-viewed',
+        tooltip: $localize`Videos totalizing the most views during the last 24 hours`
       },
       {
         label: $localize`:A variant of Trending videos based on the number of likes:Likes`,
         iconName: 'like',
-        value: '-likes',
-        path: 'most-liked',
+        value: 'most-liked',
         tooltip: $localize`Videos that have the most likes`
       }
     ]
@@ -59,20 +60,40 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple
   ngOnInit () {
     this.serverService.getConfig()
         .subscribe(config => {
-          // don't filter if auto-blacklist is not enabled as this will be the only list
-          if (config.instance.pages.hot.enabled) {
-            const index = this.buttons.findIndex(b => b.path === 'hot')
-            this.buttons[index].hidden = false
-          }
+          this.buttons = this.buttons.map(b => {
+            b.hidden = !config.trending.videos.algorithms.enabled.includes(b.value)
+            return b
+          })
         })
+
+    this.algorithmChangeSub = this.route.queryParams.subscribe(
+      queryParams => {
+        const algorithm = queryParams['alg']
+        if (algorithm) {
+          this.data.model = algorithm
+        } else {
+          this.data.model = RedirectService.DEFAULT_TRENDING_ALGORITHM
+        }
+      }
+    )
   }
 
-  get visibleButtons () {
-    return this.buttons.filter(b => !b.hidden)
+  ngOnDestroy () {
+    if (this.algorithmChangeSub) this.algorithmChangeSub.unsubscribe()
   }
 
   setSort () {
-    const path = this.buttons.find(b => b.value === this.data.model).path
-    this.router.navigate([ `/videos/${path}` ])
+    const alg = this.data.model !== RedirectService.DEFAULT_TRENDING_ALGORITHM
+      ? this.data.model
+      : undefined
+
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.route,
+        queryParams: { alg },
+        queryParamsHandling: 'merge'
+      }
+    )
   }
 }
diff --git a/client/src/app/+videos/video-list/trending/video-most-viewed.component.ts b/client/src/app/+videos/video-list/trending/video-trending.component.ts
index 98ced42d6..6128c4acd 100644
--- a/client/src/app/+videos/video-list/trending/video-most-viewed.component.ts
+++ b/client/src/app/+videos/video-list/trending/video-trending.component.ts
@@ -1,25 +1,28 @@
 import { Component, ComponentFactoryResolver, Injector, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
+import { AuthService, LocalStorageService, Notifier, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { immutableAssign } from '@app/helpers'
 import { VideoService } from '@app/shared/shared-main'
 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
 import { VideoSortField } from '@shared/models'
+import { Subscription } from 'rxjs'
 import { VideoTrendingHeaderComponent } from './video-trending-header.component'
 
 @Component({
-  selector: 'my-videos-most-viewed',
+  selector: 'my-videos-hot',
   styleUrls: [ '../../../shared/shared-video-miniature/abstract-video-list.scss' ],
   templateUrl: '../../../shared/shared-video-miniature/abstract-video-list.html'
 })
-export class VideoMostViewedComponent extends AbstractVideoList implements OnInit, OnDestroy {
+export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
   HeaderComponent = VideoTrendingHeaderComponent
   titlePage: string
   defaultSort: VideoSortField = '-trending'
 
   useUserVideoPreferences = true
 
+  private algorithmChangeSub: Subscription
+
   constructor (
     protected router: Router,
     protected serverService: ServerService,
@@ -35,6 +38,8 @@ export class VideoMostViewedComponent extends AbstractVideoList implements OnIni
   ) {
     super()
 
+    this.defaultSort = this.parseAlgorithm(RedirectService.DEFAULT_TRENDING_ALGORITHM)
+
     this.headerComponentInjector = this.getInjector()
   }
 
@@ -43,23 +48,19 @@ export class VideoMostViewedComponent extends AbstractVideoList implements OnIni
 
     this.generateSyndicationList()
 
-    this.serverService.getConfig().subscribe(
-      config => {
-        const trendingDays = config.trending.videos.intervalDays
-
-        if (trendingDays === 1) {
-          this.titleTooltip = $localize`Trending videos are those totalizing the greatest number of views during the last 24 hours`
-        } else {
-          this.titleTooltip = $localize`Trending videos are those totalizing the greatest number of views during the last ${trendingDays} days`
-        }
+    this.algorithmChangeSub = this.route.queryParams.subscribe(
+      queryParams => {
+        const algorithm = queryParams['alg'] || RedirectService.DEFAULT_TRENDING_ALGORITHM
 
-        this.headerComponentInjector = this.getInjector()
-        this.setHeader()
-      })
+        this.sort = this.parseAlgorithm(algorithm)
+        this.reloadVideos()
+      }
+    )
   }
 
   ngOnDestroy () {
     super.ngOnDestroy()
+    if (this.algorithmChangeSub) this.algorithmChangeSub.unsubscribe()
   }
 
   getVideosObservable (page: number) {
@@ -96,4 +97,15 @@ export class VideoMostViewedComponent extends AbstractVideoList implements OnIni
       }]
     })
   }
+
+  private parseAlgorithm (algorithm: string): VideoSortField {
+    switch (algorithm) {
+      case 'most-viewed':
+        return '-trending'
+      case 'most-liked':
+        return '-likes'
+      default:
+        return '-' + algorithm as VideoSortField
+    }
+  }
 }
diff --git a/client/src/app/+videos/videos-routing.module.ts b/client/src/app/+videos/videos-routing.module.ts
index 973935af8..16e3b9bb2 100644
--- a/client/src/app/+videos/videos-routing.module.ts
+++ b/client/src/app/+videos/videos-routing.module.ts
@@ -1,11 +1,9 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { LoginGuard, TrendingGuard } from '@app/core'
+import { LoginGuard } from '@app/core'
 import { MetaGuard } from '@ngx-meta/core'
+import { VideoTrendingComponent } from './video-list'
 import { VideoOverviewComponent } from './video-list/overview/video-overview.component'
-import { VideoHotComponent } from './video-list/trending/video-hot.component'
-import { VideoMostLikedComponent } from './video-list/trending/video-most-liked.component'
-import { VideoMostViewedComponent } from './video-list/trending/video-most-viewed.component'
 import { VideoLocalComponent } from './video-list/video-local.component'
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
 import { VideoUserSubscriptionsComponent } from './video-list/video-user-subscriptions.component'
@@ -28,46 +26,16 @@ const videosRoutes: Routes = [
       },
       {
         path: 'trending',
-        canActivate: [ TrendingGuard ]
-      },
-      {
-        path: 'hot',
-        component: VideoHotComponent,
+        component: VideoTrendingComponent,
         data: {
           meta: {
-            title: $localize`Hot videos`
-          },
-          reuse: {
-            enabled: true,
-            key: 'hot-videos-list'
-          }
-        }
-      },
-      {
-        path: 'most-viewed',
-        component: VideoMostViewedComponent,
-        data: {
-          meta: {
-            title: $localize`Most viewed videos`
-          },
-          reuse: {
-            enabled: true,
-            key: 'most-viewed-videos-list'
+            title: $localize`Trending videos`
           }
         }
       },
       {
         path: 'most-liked',
-        component: VideoMostLikedComponent,
-        data: {
-          meta: {
-            title: $localize`Most liked videos`
-          },
-          reuse: {
-            enabled: true,
-            key: 'most-liked-videos-list'
-          }
-        }
+        redirectTo: 'trending?alg=most-liked'
       },
       {
         path: 'recently-added',
diff --git a/client/src/app/+videos/videos.module.ts b/client/src/app/+videos/videos.module.ts
index ae9c680eb..61d012d63 100644
--- a/client/src/app/+videos/videos.module.ts
+++ b/client/src/app/+videos/videos.module.ts
@@ -1,16 +1,12 @@
-import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
 import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
-import { OverviewService } from './video-list'
+import { OverviewService, VideoTrendingComponent } from './video-list'
 import { VideoOverviewComponent } from './video-list/overview/video-overview.component'
 import { VideoTrendingHeaderComponent } from './video-list/trending/video-trending-header.component'
-import { VideoHotComponent } from './video-list/trending/video-hot.component'
-import { VideoMostViewedComponent } from './video-list/trending/video-most-viewed.component'
-import { VideoMostLikedComponent } from './video-list/trending/video-most-liked.component'
 import { VideoLocalComponent } from './video-list/video-local.component'
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
 import { VideoUserSubscriptionsComponent } from './video-list/video-user-subscriptions.component'
@@ -32,9 +28,7 @@ import { VideosComponent } from './videos.component'
     VideosComponent,
 
     VideoTrendingHeaderComponent,
-    VideoMostViewedComponent,
-    VideoHotComponent,
-    VideoMostLikedComponent,
+    VideoTrendingComponent,
     VideoRecentlyAddedComponent,
     VideoLocalComponent,
     VideoUserSubscriptionsComponent,