aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-02-22 16:41:02 +0100
committerChocobozzz <me@florianbigard.com>2018-02-22 16:41:02 +0100
commita9ca764e7e23c0c14949c308a9ce54d4fdb9a361 (patch)
treea40adf5c1c73a547e64095ad9f479fb65f791283
parent1f30a1853e38c20a45722dbd6d38aaaec63839e8 (diff)
downloadPeerTube-a9ca764e7e23c0c14949c308a9ce54d4fdb9a361.tar.gz
PeerTube-a9ca764e7e23c0c14949c308a9ce54d4fdb9a361.tar.zst
PeerTube-a9ca764e7e23c0c14949c308a9ce54d4fdb9a361.zip
Throttle infinite scroller
-rw-r--r--client/src/app/shared/misc/utils.ts20
-rw-r--r--client/src/app/shared/video/infinite-scroller.directive.ts5
2 files changed, 14 insertions, 11 deletions
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 64bc69b0d..d520b1a7b 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -59,14 +59,6 @@ function immutableAssign <A, B> (target: A, source: B) {
59 return Object.assign({}, target, source) 59 return Object.assign({}, target, source)
60} 60}
61 61
62function isInSmallView () {
63 return window.innerWidth < 600
64}
65
66function isInMobileView () {
67 return window.innerWidth < 500
68}
69
70// Thanks: https://gist.github.com/ghinda/8442a57f22099bdb2e34 62// Thanks: https://gist.github.com/ghinda/8442a57f22099bdb2e34
71function objectToFormData (obj: any, form?: FormData, namespace?: string) { 63function objectToFormData (obj: any, form?: FormData, namespace?: string) {
72 let fd = form || new FormData() 64 let fd = form || new FormData()
@@ -94,6 +86,18 @@ function lineFeedToHtml (obj: object, keyToNormalize: string) {
94 }) 86 })
95} 87}
96 88
89// Try to cache a little bit window.innerWidth
90let windowInnerWidth = window.innerWidth
91setInterval(() => windowInnerWidth = window.innerWidth, 500)
92
93function isInSmallView () {
94 return windowInnerWidth < 600
95}
96
97function isInMobileView () {
98 return windowInnerWidth < 500
99}
100
97export { 101export {
98 viewportHeight, 102 viewportHeight,
99 getParameterByName, 103 getParameterByName,
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index 1da02f60f..16e901c34 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -5,6 +5,7 @@ import 'rxjs/add/operator/distinctUntilChanged'
5import 'rxjs/add/operator/filter' 5import 'rxjs/add/operator/filter'
6import 'rxjs/add/operator/map' 6import 'rxjs/add/operator/map'
7import 'rxjs/add/operator/startWith' 7import 'rxjs/add/operator/startWith'
8import 'rxjs/add/operator/throttleTime'
8import { fromEvent } from 'rxjs/observable/fromEvent' 9import { fromEvent } from 'rxjs/observable/fromEvent'
9 10
10@Directive({ 11@Directive({
@@ -37,6 +38,7 @@ export class InfiniteScrollerDirective implements OnInit {
37 initialize () { 38 initialize () {
38 const scrollObservable = fromEvent(window, 'scroll') 39 const scrollObservable = fromEvent(window, 'scroll')
39 .startWith(true) 40 .startWith(true)
41 .throttleTime(200)
40 .map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })) 42 .map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight }))
41 43
42 // Scroll Down 44 // Scroll Down
@@ -49,7 +51,6 @@ export class InfiniteScrollerDirective implements OnInit {
49 return res 51 return res
50 }) 52 })
51 .filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) 53 .filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit)
52 .debounceTime(200)
53 .distinct() 54 .distinct()
54 .subscribe(() => this.nearOfBottom.emit()) 55 .subscribe(() => this.nearOfBottom.emit())
55 56
@@ -65,13 +66,11 @@ export class InfiniteScrollerDirective implements OnInit {
65 .filter(({ current, maximumScroll }) => { 66 .filter(({ current, maximumScroll }) => {
66 return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit 67 return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit
67 }) 68 })
68 .debounceTime(200)
69 .distinct() 69 .distinct()
70 .subscribe(() => this.nearOfTop.emit()) 70 .subscribe(() => this.nearOfTop.emit())
71 71
72 // Page change 72 // Page change
73 scrollObservable 73 scrollObservable
74 .debounceTime(500)
75 .distinct() 74 .distinct()
76 .map(({ current }) => Math.max(1, Math.round((current + InfiniteScrollerDirective.PAGE_VIEW_TOP_MARGIN) / this.pageHeight))) 75 .map(({ current }) => Math.max(1, Math.round((current + InfiniteScrollerDirective.PAGE_VIEW_TOP_MARGIN) / this.pageHeight)))
77 .distinctUntilChanged() 76 .distinctUntilChanged()