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 | 40 |
1 files changed, 36 insertions, 4 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..6a758ebe0 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts | |||
@@ -36,9 +36,10 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
36 | videoHeight: number | 36 | videoHeight: number |
37 | videoPages: Video[][] = [] | 37 | videoPages: Video[][] = [] |
38 | ownerDisplayType: OwnerDisplayType = 'account' | 38 | ownerDisplayType: OwnerDisplayType = 'account' |
39 | firstLoadedPage: number | ||
39 | 40 | ||
40 | protected baseVideoWidth = 215 | 41 | protected baseVideoWidth = 215 |
41 | protected baseVideoHeight = 230 | 42 | protected baseVideoHeight = 205 |
42 | 43 | ||
43 | protected abstract notificationsService: NotificationsService | 44 | protected abstract notificationsService: NotificationsService |
44 | protected abstract authService: AuthService | 45 | protected abstract authService: AuthService |
@@ -80,6 +81,15 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
80 | if (this.resizeSubscription) this.resizeSubscription.unsubscribe() | 81 | if (this.resizeSubscription) this.resizeSubscription.unsubscribe() |
81 | } | 82 | } |
82 | 83 | ||
84 | pageByVideoId (index: number, page: Video[]) { | ||
85 | // Video are unique in all pages | ||
86 | return page[0].id | ||
87 | } | ||
88 | |||
89 | videoById (index: number, video: Video) { | ||
90 | return video.id | ||
91 | } | ||
92 | |||
83 | onNearOfTop () { | 93 | onNearOfTop () { |
84 | this.previousPage() | 94 | this.previousPage() |
85 | } | 95 | } |
@@ -100,7 +110,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
100 | this.loadMoreVideos(this.pagination.currentPage) | 110 | this.loadMoreVideos(this.pagination.currentPage) |
101 | } | 111 | } |
102 | 112 | ||
103 | loadMoreVideos (page: number) { | 113 | loadMoreVideos (page: number, loadOnTop = false) { |
114 | this.adjustVideoPageHeight() | ||
115 | |||
116 | const currentY = window.scrollY | ||
117 | |||
104 | if (this.loadedPages[page] !== undefined) return | 118 | if (this.loadedPages[page] !== undefined) return |
105 | if (this.loadingPage[page] === true) return | 119 | if (this.loadingPage[page] === true) return |
106 | 120 | ||
@@ -111,6 +125,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
111 | ({ videos, totalVideos }) => { | 125 | ({ videos, totalVideos }) => { |
112 | this.loadingPage[page] = false | 126 | this.loadingPage[page] = false |
113 | 127 | ||
128 | if (this.firstLoadedPage === undefined || this.firstLoadedPage > page) this.firstLoadedPage = page | ||
129 | |||
114 | // Paging is too high, return to the first one | 130 | // Paging is too high, return to the first one |
115 | if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) { | 131 | if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) { |
116 | this.pagination.currentPage = 1 | 132 | this.pagination.currentPage = 1 |
@@ -125,8 +141,17 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
125 | // Initialize infinite scroller now we loaded the first page | 141 | // Initialize infinite scroller now we loaded the first page |
126 | if (Object.keys(this.loadedPages).length === 1) { | 142 | if (Object.keys(this.loadedPages).length === 1) { |
127 | // Wait elements creation | 143 | // Wait elements creation |
128 | setTimeout(() => this.infiniteScroller.initialize(), 500) | 144 | setTimeout(() => { |
145 | this.infiniteScroller.initialize() | ||
146 | |||
147 | // At our first load, we did not load the first page | ||
148 | // Load the previous page so the user can move on the top (and browser previous pages) | ||
149 | if (this.pagination.currentPage > 1) this.loadMoreVideos(this.pagination.currentPage - 1, true) | ||
150 | }, 500) | ||
129 | } | 151 | } |
152 | |||
153 | // Insert elements on the top but keep the scroll in the previous position | ||
154 | if (loadOnTop) setTimeout(() => { window.scrollTo(0, currentY + this.pageHeight) }, 0) | ||
130 | }, | 155 | }, |
131 | error => { | 156 | error => { |
132 | this.loadingPage[page] = false | 157 | this.loadingPage[page] = false |
@@ -150,7 +175,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
150 | const min = this.minPageLoaded() | 175 | const min = this.minPageLoaded() |
151 | 176 | ||
152 | if (min > 1) { | 177 | if (min > 1) { |
153 | this.loadMoreVideos(min - 1) | 178 | this.loadMoreVideos(min - 1, true) |
154 | } | 179 | } |
155 | } | 180 | } |
156 | 181 | ||
@@ -189,6 +214,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
189 | this.videoPages = Object.values(this.loadedPages) | 214 | this.videoPages = Object.values(this.loadedPages) |
190 | } | 215 | } |
191 | 216 | ||
217 | protected adjustVideoPageHeight () { | ||
218 | const numberOfPagesLoaded = Object.keys(this.loadedPages).length | ||
219 | if (!numberOfPagesLoaded) return | ||
220 | |||
221 | this.pageHeight = this.videosElement.nativeElement.offsetHeight / numberOfPagesLoaded | ||
222 | } | ||
223 | |||
192 | protected buildVideoHeight () { | 224 | protected buildVideoHeight () { |
193 | // Same ratios than base width/height | 225 | // Same ratios than base width/height |
194 | return this.videosElement.nativeElement.offsetWidth * (this.baseVideoHeight / this.baseVideoWidth) | 226 | return this.videosElement.nativeElement.offsetWidth * (this.baseVideoHeight / this.baseVideoWidth) |