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 | 29 |
1 files changed, 26 insertions, 3 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index b8fd7f8eb..9df4cfc22 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts | |||
@@ -38,7 +38,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
38 | ownerDisplayType: OwnerDisplayType = 'account' | 38 | ownerDisplayType: OwnerDisplayType = 'account' |
39 | 39 | ||
40 | protected baseVideoWidth = 215 | 40 | protected baseVideoWidth = 215 |
41 | protected baseVideoHeight = 230 | 41 | protected baseVideoHeight = 205 |
42 | 42 | ||
43 | protected abstract notificationsService: NotificationsService | 43 | protected abstract notificationsService: NotificationsService |
44 | protected abstract authService: AuthService | 44 | protected abstract authService: AuthService |
@@ -55,6 +55,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
55 | protected otherRouteParams = {} | 55 | protected otherRouteParams = {} |
56 | 56 | ||
57 | private resizeSubscription: Subscription | 57 | private resizeSubscription: Subscription |
58 | private firstLoadedPage: number | ||
58 | 59 | ||
59 | abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}> | 60 | abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}> |
60 | abstract generateSyndicationList () | 61 | abstract generateSyndicationList () |
@@ -100,7 +101,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
100 | this.loadMoreVideos(this.pagination.currentPage) | 101 | this.loadMoreVideos(this.pagination.currentPage) |
101 | } | 102 | } |
102 | 103 | ||
103 | loadMoreVideos (page: number) { | 104 | loadMoreVideos (page: number, loadOnTop = false) { |
105 | this.adjustVideoPageHeight() | ||
106 | |||
107 | const currentY = window.scrollY | ||
108 | |||
104 | if (this.loadedPages[page] !== undefined) return | 109 | if (this.loadedPages[page] !== undefined) return |
105 | if (this.loadingPage[page] === true) return | 110 | if (this.loadingPage[page] === true) return |
106 | 111 | ||
@@ -111,6 +116,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
111 | ({ videos, totalVideos }) => { | 116 | ({ videos, totalVideos }) => { |
112 | this.loadingPage[page] = false | 117 | this.loadingPage[page] = false |
113 | 118 | ||
119 | if (this.firstLoadedPage === undefined || this.firstLoadedPage > page) this.firstLoadedPage = page | ||
120 | |||
114 | // Paging is too high, return to the first one | 121 | // Paging is too high, return to the first one |
115 | if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) { | 122 | if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) { |
116 | this.pagination.currentPage = 1 | 123 | this.pagination.currentPage = 1 |
@@ -125,8 +132,17 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
125 | // Initialize infinite scroller now we loaded the first page | 132 | // Initialize infinite scroller now we loaded the first page |
126 | if (Object.keys(this.loadedPages).length === 1) { | 133 | if (Object.keys(this.loadedPages).length === 1) { |
127 | // Wait elements creation | 134 | // Wait elements creation |
128 | setTimeout(() => this.infiniteScroller.initialize(), 500) | 135 | setTimeout(() => { |
136 | this.infiniteScroller.initialize() | ||
137 | |||
138 | // At our first load, we did not load the first page | ||
139 | // Load the previous page so the user can move on the top (and browser previous pages) | ||
140 | if (this.pagination.currentPage > 1) this.loadMoreVideos(this.pagination.currentPage - 1, true) | ||
141 | }, 500) | ||
129 | } | 142 | } |
143 | |||
144 | // Insert elements on the top but keep the scroll in the previous position | ||
145 | if (loadOnTop) setTimeout(() => { window.scrollTo(0, currentY + this.pageHeight) }, 0) | ||
130 | }, | 146 | }, |
131 | error => { | 147 | error => { |
132 | this.loadingPage[page] = false | 148 | this.loadingPage[page] = false |
@@ -189,6 +205,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
189 | this.videoPages = Object.values(this.loadedPages) | 205 | this.videoPages = Object.values(this.loadedPages) |
190 | } | 206 | } |
191 | 207 | ||
208 | protected adjustVideoPageHeight () { | ||
209 | const numberOfPagesLoaded = Object.keys(this.loadedPages).length | ||
210 | if (!numberOfPagesLoaded) return | ||
211 | |||
212 | this.pageHeight = this.videosElement.nativeElement.offsetHeight / numberOfPagesLoaded | ||
213 | } | ||
214 | |||
192 | protected buildVideoHeight () { | 215 | protected buildVideoHeight () { |
193 | // Same ratios than base width/height | 216 | // Same ratios than base width/height |
194 | return this.videosElement.nativeElement.offsetWidth * (this.baseVideoHeight / this.baseVideoWidth) | 217 | return this.videosElement.nativeElement.offsetWidth * (this.baseVideoHeight / this.baseVideoWidth) |