aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts49
1 files changed, 33 insertions, 16 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index abc9feb06..7235b3425 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -4,6 +4,7 @@ import { isInMobileView } from '@app/shared/misc/utils'
4import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' 4import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
5import { NotificationsService } from 'angular2-notifications' 5import { NotificationsService } from 'angular2-notifications'
6import { Observable } from 'rxjs/Observable' 6import { Observable } from 'rxjs/Observable'
7import { fromEvent } from 'rxjs/observable/fromEvent'
7import { AuthService } from '../../core/auth' 8import { AuthService } from '../../core/auth'
8import { ComponentPagination } from '../rest/component-pagination.model' 9import { ComponentPagination } from '../rest/component-pagination.model'
9import { SortField } from './sort-field.type' 10import { SortField } from './sort-field.type'
@@ -49,23 +50,11 @@ export abstract class AbstractVideoList implements OnInit {
49 const routeParams = this.route.snapshot.params 50 const routeParams = this.route.snapshot.params
50 this.loadRouteParams(routeParams) 51 this.loadRouteParams(routeParams)
51 52
52 if (isInMobileView()) { 53 fromEvent(window, 'resize')
53 this.pagination.itemsPerPage = 5 54 .debounceTime(500)
54 this.videoWidth = -1 55 .subscribe(() => this.calcPageSizes())
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 56
57 this.calcPageSizes()
69 if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage) 58 if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage)
70 } 59 }
71 60
@@ -176,4 +165,32 @@ export abstract class AbstractVideoList implements OnInit {
176 private maxPageLoaded () { 165 private maxPageLoaded () {
177 return Math.max(...Object.keys(this.loadedPages).map(e => parseInt(e, 10))) 166 return Math.max(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
178 } 167 }
168
169 private calcPageSizes () {
170 if (isInMobileView()) {
171 this.pagination.itemsPerPage = 5
172
173 // Video takes all the width
174 this.videoWidth = -1
175 this.pageHeight = this.pagination.itemsPerPage * this.videoHeight
176 } else {
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
180 }
181
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 = {}
187
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)
190 }
191
192 this.buildVideoPages()
193
194 console.log('Re calculated pages after a resize!')
195 }
179} 196}