From ad453580b20056fd80b3245d4db554f5ca1a5e29 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 2 Aug 2019 14:49:25 +0200 Subject: Fix infinite scroll on big screens --- .../shared/users/user-notifications.component.html | 2 +- .../shared/users/user-notifications.component.ts | 5 ++ .../video-add-to-playlist.component.ts | 2 +- .../video-playlist/video-playlist.service.ts | 15 +++-- .../src/app/shared/video/abstract-video-list.html | 2 +- client/src/app/shared/video/abstract-video-list.ts | 6 +- .../shared/video/infinite-scroller.directive.ts | 65 +++++++++++++++------- .../shared/video/videos-selection.component.html | 2 +- 8 files changed, 70 insertions(+), 29 deletions(-) (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html index d0d9d9f35..292813426 100644 --- a/client/src/app/shared/users/user-notifications.component.html +++ b/client/src/app/shared/users/user-notifications.component.html @@ -1,6 +1,6 @@
You don't have notifications.
-
+
diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts index ce43b604a..3c9eb369d 100644 --- a/client/src/app/shared/users/user-notifications.component.ts +++ b/client/src/app/shared/users/user-notifications.component.ts @@ -4,6 +4,7 @@ import { UserNotificationType } from '../../../../../shared' import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model' import { Notifier } from '@app/core' import { UserNotification } from '@app/shared/users/user-notification.model' +import { Subject } from 'rxjs' @Component({ selector: 'my-user-notifications', @@ -24,6 +25,8 @@ export class UserNotificationsComponent implements OnInit { componentPagination: ComponentPagination + onDataSubject = new Subject() + constructor ( private userNotificationService: UserNotificationService, private notifier: Notifier @@ -47,6 +50,8 @@ export class UserNotificationsComponent implements OnInit { this.componentPagination.totalItems = result.total this.notificationsLoaded.emit() + + this.onDataSubject.next(result.data) }, err => this.notifier.error(err.message) diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts index 08ceb21bc..72de84703 100644 --- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts @@ -83,7 +83,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, load () { forkJoin([ - this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'), + this.videoPlaylistService.listAccountPlaylists(this.user.account, undefined,'-updatedAt'), this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id) ]) .subscribe( diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts index b93a19356..376387082 100644 --- a/client/src/app/shared/video-playlist/video-playlist.service.ts +++ b/client/src/app/shared/video-playlist/video-playlist.service.ts @@ -45,21 +45,28 @@ export class VideoPlaylistService { ) } - listChannelPlaylists (videoChannel: VideoChannel): Observable> { + listChannelPlaylists (videoChannel: VideoChannel, componentPagination: ComponentPagination): Observable> { const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/video-playlists' + const pagination = this.restService.componentPaginationToRestPagination(componentPagination) - return this.authHttp.get>(url) + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination) + + return this.authHttp.get>(url, { params }) .pipe( switchMap(res => this.extractPlaylists(res)), catchError(err => this.restExtractor.handleError(err)) ) } - listAccountPlaylists (account: Account, sort: string): Observable> { + listAccountPlaylists (account: Account, componentPagination: ComponentPagination, sort: string): Observable> { const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-playlists' + const pagination = componentPagination + ? this.restService.componentPaginationToRestPagination(componentPagination) + : undefined let params = new HttpParams() - params = this.restService.addRestGetParams(params, undefined, sort) + params = this.restService.addRestGetParams(params, pagination, sort) return this.authHttp.get>(url, { params }) .pipe( diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html index efd369bca..13aedcc74 100644 --- a/client/src/app/shared/video/abstract-video-list.html +++ b/client/src/app/shared/video/abstract-video-list.html @@ -19,7 +19,7 @@
No results.
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index 8a247a9af..2926b179b 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -1,7 +1,7 @@ import { debounceTime, first, tap } from 'rxjs/operators' import { OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { fromEvent, Observable, of, Subscription } from 'rxjs' +import { fromEvent, Observable, of, Subject, Subscription } from 'rxjs' import { AuthService } from '../../core/auth' import { ComponentPagination } from '../rest/component-pagination.model' import { VideoSortField } from './sort-field.type' @@ -59,6 +59,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor blacklistInfo: false } + onDataSubject = new Subject() + protected abstract notifier: Notifier protected abstract authService: AuthService protected abstract route: ActivatedRoute @@ -147,6 +149,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor if (this.groupByDate) this.buildGroupedDateLabels() this.onMoreVideos() + + this.onDataSubject.next(data) }, error => this.notifier.error(error.message) diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts index b1e88882c..9f613c5fa 100644 --- a/client/src/app/shared/video/infinite-scroller.directive.ts +++ b/client/src/app/shared/video/infinite-scroller.directive.ts @@ -1,14 +1,15 @@ -import { distinct, distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators' -import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' -import { fromEvent, Subscription } from 'rxjs' +import { distinctUntilChanged, filter, map, share, startWith, tap, throttleTime } from 'rxjs/operators' +import { AfterContentChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' +import { fromEvent, Observable, Subscription } from 'rxjs' @Directive({ selector: '[myInfiniteScroller]' }) -export class InfiniteScrollerDirective implements OnInit, OnDestroy { +export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterContentChecked { @Input() percentLimit = 70 @Input() autoInit = false @Input() onItself = false + @Input() dataObservable: Observable @Output() nearOfBottom = new EventEmitter() @@ -17,10 +18,22 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy { private scrollDownSub: Subscription private container: HTMLElement + private checkScroll = false + constructor (private el: ElementRef) { this.decimalLimit = this.percentLimit / 100 } + ngAfterContentChecked () { + if (this.checkScroll) { + this.checkScroll = false + + console.log('Checking if the initial state has a scroll.') + + if (this.hasScroll() === false) this.nearOfBottom.emit() + } + } + ngOnInit () { if (this.autoInit === true) return this.initialize() } @@ -30,14 +43,15 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy { } initialize () { - if (this.onItself) { - this.container = this.el.nativeElement - } + this.container = this.onItself + ? this.el.nativeElement + : document.documentElement // Emit the last value const throttleOptions = { leading: true, trailing: true } - const scrollObservable = fromEvent(this.container || window, 'scroll') + const scrollableElement = this.onItself ? this.container : window + const scrollObservable = fromEvent(scrollableElement, 'scroll') .pipe( startWith(null as string), // FIXME: typings throttleTime(200, undefined, throttleOptions), @@ -49,23 +63,34 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy { // Scroll Down this.scrollDownSub = scrollObservable .pipe( - // Check we scroll down - filter(({ current }) => { - const res = this.lastCurrentBottom < current - - this.lastCurrentBottom = current - return res - }), - filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) + filter(({ current }) => this.isScrollingDown(current)), + filter(({ current, maximumScroll }) => (current / maximumScroll) > this.decimalLimit) ) .subscribe(() => this.nearOfBottom.emit()) + + if (this.dataObservable) { + this.dataObservable + .pipe(filter(d => d.length !== 0)) + .subscribe(() => this.checkScroll = true) + } } private getScrollInfo () { - if (this.container) { - return { current: this.container.scrollTop, maximumScroll: this.container.scrollHeight } - } + return { current: this.container.scrollTop, maximumScroll: this.getMaximumScroll() } + } + + private getMaximumScroll () { + return this.container.scrollHeight - window.innerHeight + } + + private hasScroll () { + return this.getMaximumScroll() > 0 + } + + private isScrollingDown (current: number) { + const result = this.lastCurrentBottom < current - return { current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight } + this.lastCurrentBottom = current + return result } } diff --git a/client/src/app/shared/video/videos-selection.component.html b/client/src/app/shared/video/videos-selection.component.html index 120c168cd..2b4b353cf 100644 --- a/client/src/app/shared/video/videos-selection.component.html +++ b/client/src/app/shared/video/videos-selection.component.html @@ -1,6 +1,6 @@
No results.
-
+
-- cgit v1.2.3