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 { AuthService } from '../../core/auth'
8 import { ComponentPagination } from '../rest/component-pagination.model'
9 import { SortField } from './sort-field.type'
10 import { Video } from './video.model'
12 export abstract class AbstractVideoList implements OnInit {
13 private static LINES_PER_PAGE = 3
15 @ViewChild('videoElement') videosElement: ElementRef
16 @ViewChild(InfiniteScrollerDirective) infiniteScroller: InfiniteScrollerDirective
18 pagination: ComponentPagination = {
23 sort: SortField = '-createdAt'
24 defaultSort: SortField = '-createdAt'
31 protected abstract notificationsService: NotificationsService
32 protected abstract authService: AuthService
33 protected abstract router: Router
34 protected abstract route: ActivatedRoute
35 protected abstract currentRoute: string
36 abstract titlePage: string
38 protected loadedPages: { [ id: number ]: Video[] } = {}
39 protected otherRouteParams = {}
41 abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}>
44 return this.authService.getUser()
48 // Subscribe to route changes
49 const routeParams = this.route.snapshot.params
50 this.loadRouteParams(routeParams)
52 if (isInMobileView()) {
53 this.pagination.itemsPerPage = 5
57 if (this.videoWidth !== -1) {
58 const videosWidth = this.videosElement.nativeElement.offsetWidth
59 this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE
62 // Video takes all the width
63 if (this.videoWidth === -1) {
64 this.pageHeight = this.pagination.itemsPerPage * this.videoHeight
66 this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE
69 if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage)
77 if (this.hasMoreVideos()) {
82 onPageChanged (page: number) {
83 this.pagination.currentPage = page
84 this.setNewRouteParams()
89 this.loadMoreVideos(this.pagination.currentPage)
92 loadMoreVideos (page: number) {
93 if (this.loadedPages[page] !== undefined) return
95 const observable = this.getVideosObservable(page)
98 ({ videos, totalVideos }) => {
99 // Paging is too high, return to the first one
100 if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
101 this.pagination.currentPage = 1
102 this.setNewRouteParams()
103 return this.reloadVideos()
106 this.loadedPages[page] = videos
107 this.buildVideoPages()
108 this.pagination.totalItems = totalVideos
110 // Initialize infinite scroller now we loaded the first page
111 if (Object.keys(this.loadedPages).length === 1) {
112 // Wait elements creation
113 setTimeout(() => this.infiniteScroller.initialize(), 500)
116 error => this.notificationsService.error('Error', error.message)
120 protected hasMoreVideos () {
122 if (this.pagination.totalItems === 0) return false
125 if (!this.pagination.totalItems) return true
127 const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
128 return maxPage > this.pagination.currentPage
131 protected previousPage () {
132 const min = this.minPageLoaded()
135 this.loadMoreVideos(min - 1)
139 protected nextPage () {
140 this.loadMoreVideos(this.maxPageLoaded() + 1)
143 protected buildRouteParams () {
144 // There is always a sort and a current page
147 page: this.pagination.currentPage
150 return Object.assign(params, this.otherRouteParams)
153 protected loadRouteParams (routeParams: { [ key: string ]: any }) {
154 this.sort = routeParams['sort'] as SortField || this.defaultSort
156 if (routeParams['page'] !== undefined) {
157 this.pagination.currentPage = parseInt(routeParams['page'], 10)
159 this.pagination.currentPage = 1
163 protected setNewRouteParams () {
164 const routeParams = this.buildRouteParams()
165 this.router.navigate([ this.currentRoute, routeParams ])
168 protected buildVideoPages () {
169 this.videoPages = Object.values(this.loadedPages)
172 private minPageLoaded () {
173 return Math.min(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
176 private maxPageLoaded () {
177 return Math.max(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))