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

   1 import { ElementRef, OnDestroy, 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 'rxjs/add/operator/debounceTime'
   7 import { Observable } from 'rxjs/Observable'
   8 import { fromEvent } from 'rxjs/observable/fromEvent'
   9 import { Subscription } from 'rxjs/Subscription'
  10 import { AuthService } from '../../core/auth'
  11 import { ComponentPagination } from '../rest/component-pagination.model'
  12 import { SortField } from './sort-field.type'
  13 import { Video } from './video.model'
  14
  15 export abstract class AbstractVideoList implements OnInit, OnDestroy {
  16   private static LINES_PER_PAGE = 4
  17
  18   @ViewChild('videosElement') videosElement: ElementRef
  19   @ViewChild(InfiniteScrollerDirective) infiniteScroller: InfiniteScrollerDirective
  20
  21   pagination: ComponentPagination = {
  22     currentPage: 1,
  23     itemsPerPage: 10,
  24     totalItems: null
  25   }
  26   sort: SortField = '-createdAt'
  27   defaultSort: SortField = '-createdAt'
  28   loadOnInit = true
  29   pageHeight: number
  30   videoWidth: number
  31   videoHeight: number
  32   videoPages: Video[][] = []
  33
  34   protected baseVideoWidth = 215
  35   protected baseVideoHeight = 230
  36
  37   protected abstract notificationsService: NotificationsService
  38   protected abstract authService: AuthService
  39   protected abstract router: Router
  40   protected abstract route: ActivatedRoute
  41   protected abstract currentRoute: string
  42   abstract titlePage: string
  43
  44   protected loadedPages: { [ id: number ]: Video[] } = {}
  45   protected otherRouteParams = {}
  46
  47   private resizeSubscription: Subscription
  48
  49   abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}>
  50
  51   get user () {
  52     return this.authService.getUser()
  53   }
  54
  55   ngOnInit () {
  56     // Subscribe to route changes
  57     const routeParams = this.route.snapshot.queryParams
  58     this.loadRouteParams(routeParams)
  59
  60     this.resizeSubscription = fromEvent(window, 'resize')
  61       .debounceTime(500)
  62       .subscribe(() => this.calcPageSizes())
  63
  64     this.calcPageSizes()
  65     if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage)
  66   }
  67
  68   ngOnDestroy () {
  69     if (this.resizeSubscription) this.resizeSubscription.unsubscribe()
  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 ], { queryParams: routeParams })
 166   }
 167
 168   protected buildVideoPages () {
 169     this.videoPages = Object.values(this.loadedPages)
 170   }
 171
 172   protected buildVideoHeight () {
 173     // Same ratios than base width/height
 174     return this.videosElement.nativeElement.offsetWidth * (this.baseVideoHeight / this.baseVideoWidth)
 175   }
 176
 177   private minPageLoaded () {
 178     return Math.min(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
 179   }
 180
 181   private maxPageLoaded () {
 182     return Math.max(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
 183   }
 184
 185   private calcPageSizes () {
 186     if (isInMobileView() || this.baseVideoWidth === -1) {
 187       this.pagination.itemsPerPage = 5
 188
 189       // Video takes all the width
 190       this.videoWidth = -1
 191       this.videoHeight = this.buildVideoHeight()
 192       this.pageHeight = this.pagination.itemsPerPage * this.videoHeight
 193     } else {
 194       this.videoWidth = this.baseVideoWidth
 195       this.videoHeight = this.baseVideoHeight
 196
 197       const videosWidth = this.videosElement.nativeElement.offsetWidth
 198       this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE
 199       this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE
 200     }
 201
 202     // Rebuild pages because maybe we modified the number of items per page
 203     const videos = [].concat(...this.videoPages)
 204     this.loadedPages = {}
 205
 206     let i = 1
 207     // Don't include the last page if it not complete
 208     while (videos.length >= this.pagination.itemsPerPage && i < 10000) { // 10000 -> Hard limit in case of infinite loop
 209       this.loadedPages[i] = videos.splice(0, this.pagination.itemsPerPage)
 210       i++
 211     }
 212
 213     // Re fetch the last page
 214     if (videos.length !== 0) {
 215       this.loadMoreVideos(i)
 216     } else {
 217       this.buildVideoPages()
 218     }
 219
 220     console.log('Rebuilt pages with %s elements per page.', this.pagination.itemsPerPage)
 221   }
 222 }