Fix loading things twice on trending page

2 files changed, 33 insertions, 12 deletions

diff --git a/client/src/app/+videos/video-list/trending/video-trending.component.ts b/client/src/app/+videos/video-list/trending/video-trending.component.ts
index c11f0da9d..e50d6ec3a 100644
--- a/client/src/app/+videos/video-list/trending/video-trending.component.ts
+++ b/client/src/app/+videos/video-list/trending/video-trending.component.ts
@@ -1,12 +1,13 @@
+import { Subscription } from 'rxjs'
+import { first, switchMap } from 'rxjs/operators'
 import { Component, ComponentFactoryResolver, Injector, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute, Params, Router } from '@angular/router'
 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({
@@ -48,12 +49,18 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
 
     this.generateSyndicationList()
 
-    this.algorithmChangeSub = this.route.queryParams.subscribe(
-      queryParams => {
-        const algorithm = queryParams['alg'] || RedirectService.DEFAULT_TRENDING_ALGORITHM
+    // Subscribe to alg change after we loaded the data
+    // The initial alg load is handled by the parent class
+    this.algorithmChangeSub = this.onDataSubject
+      .pipe(
+        first(),
+        switchMap(() => this.route.queryParams)
+      ).subscribe(queryParams => {
+        const oldSort = this.sort
+
+        this.loadPageRouteParams(queryParams)
 
-        this.sort = this.parseAlgorithm(algorithm)
-        this.reloadVideos()
+        if (oldSort !== this.sort) this.reloadVideos()
       }
     )
   }
@@ -98,6 +105,12 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
     })
   }
 
+  protected loadPageRouteParams (queryParams: Params) {
+    const algorithm = queryParams['alg'] || RedirectService.DEFAULT_TRENDING_ALGORITHM
+
+    this.sort = this.parseAlgorithm(algorithm)
+  }
+
   private parseAlgorithm (algorithm: string): VideoSortField {
     switch (algorithm) {
       case 'most-viewed':
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 f8abc1656..c13cb3748 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
@@ -11,7 +11,7 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute, Params, Router } from '@angular/router'
 import {
   AuthService,
   ComponentPaginationLight,
@@ -199,6 +199,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
     // No more results
     if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
 
+    console.log('near of bottom')
     this.pagination.currentPage += 1
 
     this.setScrollRouteParams()
@@ -322,10 +323,17 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
   // On videos hook for children that want to do something
   protected onMoreVideos () { /* empty */ }
 
-  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
-    this.sort = routeParams[ 'sort' ] as VideoSortField || this.defaultSort
-    this.categoryOneOf = routeParams[ 'categoryOneOf' ]
-    this.angularState = routeParams[ 'a-state' ]
+  protected load () { /* empty */ }
+
+  // Hook if the page has custom route params
+  protected loadPageRouteParams (_queryParams: Params) { /* empty */ }
+
+  protected loadRouteParams (queryParams: Params) {
+    this.sort = queryParams[ 'sort' ] as VideoSortField || this.defaultSort
+    this.categoryOneOf = queryParams[ 'categoryOneOf' ]
+    this.angularState = queryParams[ 'a-state' ]
+
+    this.loadPageRouteParams(queryParams)
   }
 
   protected buildLocalFilter (existing: VideoFilter, base: VideoFilter) {