1 import { ElementRef, OnInit, ViewChild } from '@angular/core'
2 import { ActivatedRoute, Router } from '@angular/router'
3 import { isInMobileView } from '@app/shared/misc/utils'
4 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
5 import { NotificationsService } from 'angular2-notifications'
6 import { Observable } from 'rxjs/Observable'
7 import { fromEvent } from 'rxjs/observable/fromEvent'
8 import { AuthService } from '../../core/auth'
9 import { ComponentPagination } from '../rest/component-pagination.model'
10 import { SortField } from './sort-field.type'
11 import { Video } from './video.model'
13 export abstract class AbstractVideoList implements OnInit {
14 private static LINES_PER_PAGE = 3
16 @ViewChild('videoElement') videosElement: ElementRef
17 @ViewChild(InfiniteScrollerDirective) infiniteScroller: InfiniteScrollerDirective
19 pagination: ComponentPagination = {
24 sort: SortField = '-createdAt'
25 defaultSort: SortField = '-createdAt'
32 protected abstract notificationsService: NotificationsService
33 protected abstract authService: AuthService
34 protected abstract router: Router
35 protected abstract route: ActivatedRoute
36 protected abstract currentRoute: string
37 abstract titlePage: string
39 protected loadedPages: { [ id: number ]: Video[] } = {}
40 protected otherRouteParams = {}
42 abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}>
45 return this.authService.getUser()
49 // Subscribe to route changes
50 const routeParams = this.route.snapshot.params
51 this.loadRouteParams(routeParams)
53 fromEvent(window, 'resize')
55 .subscribe(() => this.calcPageSizes())
58 if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage)
66 if (this.hasMoreVideos()) {
71 onPageChanged (page: number) {
72 this.pagination.currentPage = page
73 this.setNewRouteParams()
78 this.loadMoreVideos(this.pagination.currentPage)
81 loadMoreVideos (page: number) {
82 if (this.loadedPages[page] !== undefined) return
84 const observable = this.getVideosObservable(page)
87 ({ videos, totalVideos }) => {
88 // Paging is too high, return to the first one
89 if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
90 this.pagination.currentPage = 1
91 this.setNewRouteParams()
92 return this.reloadVideos()
95 this.loadedPages[page] = videos
96 this.buildVideoPages()
97 this.pagination.totalItems = totalVideos
99 // Initialize infinite scroller now we loaded the first page
100 if (Object.keys(this.loadedPages).length === 1) {
101 // Wait elements creation
102 setTimeout(() => this.infiniteScroller.initialize(), 500)
105 error => this.notificationsService.error('Error', error.message)
109 protected hasMoreVideos () {
111 if (this.pagination.totalItems === 0) return false
114 if (!this.pagination.totalItems) return true
116 const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
117 return maxPage > this.maxPageLoaded()
120 protected previousPage () {
121 const min = this.minPageLoaded()
124 this.loadMoreVideos(min - 1)
128 protected nextPage () {
129 this.loadMoreVideos(this.maxPageLoaded() + 1)
132 protected buildRouteParams () {
133 // There is always a sort and a current page
136 page: this.pagination.currentPage
139 return Object.assign(params, this.otherRouteParams)
142 protected loadRouteParams (routeParams: { [ key: string ]: any }) {
143 this.sort = routeParams['sort'] as SortField || this.defaultSort
145 if (routeParams['page'] !== undefined) {
146 this.pagination.currentPage = parseInt(routeParams['page'], 10)
148 this.pagination.currentPage = 1
152 protected setNewRouteParams () {
153 const routeParams = this.buildRouteParams()
154 this.router.navigate([ this.currentRoute, routeParams ])
157 protected buildVideoPages () {
158 this.videoPages = Object.values(this.loadedPages)
161 private minPageLoaded () {
162 return Math.min(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
165 private maxPageLoaded () {
166 return Math.max(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
169 private calcPageSizes () {
170 if (isInMobileView()) {
171 this.pagination.itemsPerPage = 5
173 // Video takes all the width
175 this.pageHeight = this.pagination.itemsPerPage * this.videoHeight
177 const videosWidth = this.videosElement.nativeElement.offsetWidth
178 this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE
179 this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE
182 // Rebuild pages because maybe we modified the number of items per page
183 let videos: Video[] = []
184 Object.values(this.loadedPages)
185 .forEach(videosPage => videos = videos.concat(videosPage))
186 this.loadedPages = {}
188 for (let i = 1; (i * this.pagination.itemsPerPage) <= videos.length; i++) {
189 this.loadedPages[i] = videos.slice((i - 1) * this.pagination.itemsPerPage, this.pagination.itemsPerPage * i)
192 this.buildVideoPages()
194 console.log('Re calculated pages after a resize!')