Fix my videos pagination

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / video / abstract-video-list.ts

diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 4a220c93d246ce0c2d066686ae59c421f62e72b1..021c285c0c3e2c8d2923a4d315a078b68ccf16f3 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -13,9 +13,9 @@ import { SortField } from './sort-field.type'
 import { Video } from './video.model'
 
 export abstract class AbstractVideoList implements OnInit, OnDestroy {
-  private static LINES_PER_PAGE = 3
+  private static LINES_PER_PAGE = 4
 
-  @ViewChild('videoElement') videosElement: ElementRef
+  @ViewChild('videosElement') videosElement: ElementRef
   @ViewChild(InfiniteScrollerDirective) infiniteScroller: InfiniteScrollerDirective
 
   pagination: ComponentPagination = {
@@ -54,7 +54,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
 
   ngOnInit () {
     // Subscribe to route changes
-    const routeParams = this.route.snapshot.params
+    const routeParams = this.route.snapshot.queryParams
     this.loadRouteParams(routeParams)
 
     this.resizeSubscription = fromEvent(window, 'resize')
@@ -162,13 +162,18 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
 
   protected setNewRouteParams () {
     const routeParams = this.buildRouteParams()
-    this.router.navigate([ this.currentRoute, routeParams ])
+    this.router.navigate([ this.currentRoute ],  { queryParams: routeParams })
   }
 
   protected buildVideoPages () {
     this.videoPages = Object.values(this.loadedPages)
   }
 
+  protected buildVideoHeight () {
+    // Same ratios than base width/height
+    return this.videosElement.nativeElement.offsetWidth * (this.baseVideoHeight / this.baseVideoWidth)
+  }
+
   private minPageLoaded () {
     return Math.min(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
   }
@@ -183,6 +188,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
 
       // Video takes all the width
       this.videoWidth = -1
+      this.videoHeight = this.buildVideoHeight()
       this.pageHeight = this.pagination.itemsPerPage * this.videoHeight
     } else {
       this.videoWidth = this.baseVideoWidth