diff options
Diffstat (limited to 'client/src/app/shared/video/abstract-video-list.ts')
-rw-r--r-- | client/src/app/shared/video/abstract-video-list.ts | 49 |
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' | |||
4 | import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' | 4 | import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' |
5 | import { NotificationsService } from 'angular2-notifications' | 5 | import { NotificationsService } from 'angular2-notifications' |
6 | import { Observable } from 'rxjs/Observable' | 6 | import { Observable } from 'rxjs/Observable' |
7 | import { fromEvent } from 'rxjs/observable/fromEvent' | ||
7 | import { AuthService } from '../../core/auth' | 8 | import { AuthService } from '../../core/auth' |
8 | import { ComponentPagination } from '../rest/component-pagination.model' | 9 | import { ComponentPagination } from '../rest/component-pagination.model' |
9 | import { SortField } from './sort-field.type' | 10 | import { 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 | } |