client/src/app/shared/video/abstract-video-list.ts

   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'
  11
  12 export abstract class AbstractVideoList implements OnInit {
  13   private static LINES_PER_PAGE = 3
  14
  15   @ViewChild('videoElement') videosElement: ElementRef
  16   @ViewChild(InfiniteScrollerDirective) infiniteScroller: InfiniteScrollerDirective
  17
  18   pagination: ComponentPagination = {
  19     currentPage: 1,
  20     itemsPerPage: 10,
  21     totalItems: null
  22   }
  23   sort: SortField = '-createdAt'
  24   defaultSort: SortField = '-createdAt'
  25   loadOnInit = true
  26   pageHeight: number
  27   videoWidth = 215
  28   videoHeight = 230
  29   videoPages: Video[][]
  30
  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
  37
  38   protected loadedPages: { [ id: number ]: Video[] } = {}
  39   protected otherRouteParams = {}
  40
  41   abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}>
  42
  43   get user () {
  44     return this.authService.getUser()
  45   }
  46
  47   ngOnInit () {
  48     // Subscribe to route changes
  49     const routeParams = this.route.snapshot.params
  50     this.loadRouteParams(routeParams)
  51
  52     if (isInMobileView()) {
  53       this.pagination.itemsPerPage = 5
  54       this.videoWidth = -1
  55     }
  56
  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
  60     }
  61
  62     // Video takes all the width
  63     if (this.videoWidth === -1) {
  64       this.pageHeight = this.pagination.itemsPerPage * this.videoHeight
  65     } else {
  66       this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE
  67     }
  68
  69     if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage)
  70   }
  71
  72   onNearOfTop () {
  73     this.previousPage()
  74   }
  75
  76   onNearOfBottom () {
  77     if (this.hasMoreVideos()) {
  78       this.nextPage()
  79     }
  80   }
  81
  82   onPageChanged (page: number) {
  83     this.pagination.currentPage = page
  84     this.setNewRouteParams()
  85   }
  86
  87   reloadVideos () {
  88     this.loadedPages = {}
  89     this.loadMoreVideos(this.pagination.currentPage)
  90   }
  91
  92   loadMoreVideos (page: number) {
  93     if (this.loadedPages[page] !== undefined) return
  94
  95     const observable = this.getVideosObservable(page)
  96
  97     observable.subscribe(
  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()
 104         }
 105
 106         this.loadedPages[page] = videos
 107         this.buildVideoPages()
 108         this.pagination.totalItems = totalVideos
 109
 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)
 114         }
 115       },
 116       error => this.notificationsService.error('Error', error.message)
 117     )
 118   }
 119
 120   protected hasMoreVideos () {
 121     // No results
 122     if (this.pagination.totalItems === 0) return false
 123
 124     // Not loaded yet
 125     if (!this.pagination.totalItems) return true
 126
 127     const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
 128     return maxPage > this.maxPageLoaded()
 129   }
 130
 131   protected previousPage () {
 132     const min = this.minPageLoaded()
 133
 134     if (min > 1) {
 135       this.loadMoreVideos(min - 1)
 136     }
 137   }
 138
 139   protected nextPage () {
 140     this.loadMoreVideos(this.maxPageLoaded() + 1)
 141   }
 142
 143   protected buildRouteParams () {
 144     // There is always a sort and a current page
 145     const params = {
 146       sort: this.sort,
 147       page: this.pagination.currentPage
 148     }
 149
 150     return Object.assign(params, this.otherRouteParams)
 151   }
 152
 153   protected loadRouteParams (routeParams: { [ key: string ]: any }) {
 154     this.sort = routeParams['sort'] as SortField || this.defaultSort
 155
 156     if (routeParams['page'] !== undefined) {
 157       this.pagination.currentPage = parseInt(routeParams['page'], 10)
 158     } else {
 159       this.pagination.currentPage = 1
 160     }
 161   }
 162
 163   protected setNewRouteParams () {
 164     const routeParams = this.buildRouteParams()
 165     this.router.navigate([ this.currentRoute, routeParams ])
 166   }
 167
 168   protected buildVideoPages () {
 169     this.videoPages = Object.values(this.loadedPages)
 170   }
 171
 172   private minPageLoaded () {
 173     return Math.min(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
 174   }
 175
 176   private maxPageLoaded () {
 177     return Math.max(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
 178   }
 179 }