-import { ElementRef, OnInit, ViewChild } from '@angular/core'
+import { debounceTime } from 'rxjs/operators'
+import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
import { NotificationsService } from 'angular2-notifications'
import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
import { NotificationsService } from 'angular2-notifications'
import { AuthService } from '../../core/auth'
import { ComponentPagination } from '../rest/component-pagination.model'
import { AuthService } from '../../core/auth'
import { ComponentPagination } from '../rest/component-pagination.model'
-export abstract class AbstractVideoList implements OnInit {
- private static LINES_PER_PAGE = 3
+export abstract class AbstractVideoList implements OnInit, OnDestroy {
+ private static LINES_PER_PAGE = 4
@ViewChild(InfiniteScrollerDirective) infiniteScroller: InfiniteScrollerDirective
pagination: ComponentPagination = {
@ViewChild(InfiniteScrollerDirective) infiniteScroller: InfiniteScrollerDirective
pagination: ComponentPagination = {
protected abstract notificationsService: NotificationsService
protected abstract authService: AuthService
protected abstract router: Router
protected abstract route: ActivatedRoute
protected abstract notificationsService: NotificationsService
protected abstract authService: AuthService
protected abstract router: Router
protected abstract route: ActivatedRoute
protected abstract currentRoute: string
abstract titlePage: string
protected loadedPages: { [ id: number ]: Video[] } = {}
protected abstract currentRoute: string
abstract titlePage: string
protected loadedPages: { [ id: number ]: Video[] } = {}
.subscribe(() => this.calcPageSizes())
this.calcPageSizes()
if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage)
}
.subscribe(() => this.calcPageSizes())
this.calcPageSizes()
if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage)
}
const observable = this.getVideosObservable(page)
observable.subscribe(
({ videos, totalVideos }) => {
const observable = this.getVideosObservable(page)
observable.subscribe(
({ videos, totalVideos }) => {
// Paging is too high, return to the first one
if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
this.pagination.currentPage = 1
// Paging is too high, return to the first one
if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
this.pagination.currentPage = 1
if (routeParams['page'] !== undefined) {
this.pagination.currentPage = parseInt(routeParams['page'], 10)
} else {
if (routeParams['page'] !== undefined) {
this.pagination.currentPage = parseInt(routeParams['page'], 10)
} else {
- const routeParams = this.buildRouteParams()
- this.router.navigate([ this.currentRoute, routeParams ])
+ const paramsObject = this.buildRouteParams()
+
+ const queryParams = Object.keys(paramsObject).map(p => p + '=' + paramsObject[p]).join('&')
+ this.location.replaceState(this.currentRoute, queryParams)
private minPageLoaded () {
return Math.min(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
}
private minPageLoaded () {
return Math.min(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
}
const videosWidth = this.videosElement.nativeElement.offsetWidth
this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE
this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE
}
// Rebuild pages because maybe we modified the number of items per page
const videosWidth = this.videosElement.nativeElement.offsetWidth
this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE
this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE
}
// Rebuild pages because maybe we modified the number of items per page
- for (let i = 1; (i * this.pagination.itemsPerPage) <= videos.length; i++) {
- this.loadedPages[i] = videos.slice((i - 1) * this.pagination.itemsPerPage, this.pagination.itemsPerPage * i)
+ let i = 1
+ // Don't include the last page if it not complete
+ while (videos.length >= this.pagination.itemsPerPage && i < 10000) { // 10000 -> Hard limit in case of infinite loop
+ this.loadedPages[i] = videos.splice(0, this.pagination.itemsPerPage)
+ i++