X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Fabstract-video-list.ts;h=2f5f82aa379e410d7e22bc6beae53fba79163701;hb=4c1def5fd8e9f483238eb38e221f555e2e6bbf07;hp=8a247a9af726c87fac3c3970216c355ba2ff4063;hpb=93cae47925e4dd68b7d34a41927b2740b4fab1b4;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index 8a247a9af..2f5f82aa3 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -1,9 +1,9 @@ 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 { ComponentPaginationLight } from '../rest/component-pagination.model' import { VideoSortField } from './sort-field.type' import { Video } from './video.model' import { ScreenService } from '@app/shared/misc/screen.service' @@ -13,7 +13,8 @@ import { Notifier, ServerService } from '@app/core' import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' import { I18n } from '@ngx-translate/i18n-polyfill' import { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date' -import { ResultList } from '@shared/models' +import { ServerConfig } from '@shared/models' +import { GlobalIconName } from '@app/shared/images/global-icon.component' enum GroupDate { UNKNOWN = 0, @@ -25,10 +26,9 @@ enum GroupDate { } export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook { - pagination: ComponentPagination = { + pagination: ComponentPaginationLight = { currentPage: 1, - itemsPerPage: 25, - totalItems: null + itemsPerPage: 25 } sort: VideoSortField = '-publishedAt' @@ -47,6 +47,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor groupByDate = false videos: Video[] = [] + hasDoneFirstQuery = false disabled = false displayOptions: MiniatureDisplayOptions = { @@ -59,6 +60,16 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor blacklistInfo: false } + actions: { + routerLink: string + iconName: GlobalIconName + label: string + }[] = [] + + onDataSubject = new Subject() + + protected serverConfig: ServerConfig + protected abstract notifier: Notifier protected abstract authService: AuthService protected abstract route: ActivatedRoute @@ -74,7 +85,9 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor private groupedDateLabels: { [id in GroupDate]: string } private groupedDates: { [id: number]: GroupDate } = {} - abstract getVideosObservable (page: number): Observable> + private lastQueryLength: number + + abstract getVideosObservable (page: number): Observable<{ data: Video[] }> abstract generateSyndicationList (): void @@ -83,6 +96,10 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor } ngOnInit () { + this.serverConfig = this.serverService.getTmpConfig() + this.serverService.getConfig() + .subscribe(config => this.serverConfig = config) + this.groupedDateLabels = { [GroupDate.UNKNOWN]: null, [GroupDate.TODAY]: this.i18n('Today'), @@ -128,8 +145,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor onNearOfBottom () { if (this.disabled) return - // Last page - if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return + // No more results + if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return this.pagination.currentPage += 1 @@ -138,25 +155,34 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor this.loadMoreVideos() } - loadMoreVideos () { + loadMoreVideos (reset = false) { this.getVideosObservable(this.pagination.currentPage).subscribe( - ({ data, total }) => { - this.pagination.totalItems = total + ({ data }) => { + this.hasDoneFirstQuery = true + this.lastQueryLength = data.length + + if (reset) this.videos = [] this.videos = this.videos.concat(data) if (this.groupByDate) this.buildGroupedDateLabels() this.onMoreVideos() + + this.onDataSubject.next(data) }, - error => this.notifier.error(error.message) + error => { + const message = this.i18n('Cannot load more videos. Try again later.') + + console.error(message, { error }) + this.notifier.error(message) + } ) } reloadVideos () { this.pagination.currentPage = 1 - this.videos = [] - this.loadMoreVideos() + this.loadMoreVideos(true) } toggleModerationDisplay () { @@ -247,7 +273,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor } let path = this.router.url - if (!path || path === '/') path = this.serverService.getConfig().instance.defaultClientRoute + if (!path || path === '/') path = this.serverConfig.instance.defaultClientRoute this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' }) }