X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Fabstract-video-list.ts;h=2f5f82aa379e410d7e22bc6beae53fba79163701;hb=7024e9120b381b5b3201212f5a18f5cdc14e15ff;hp=2926b179b566a2ee2d909705bb20a6e4975960a3;hpb=ad453580b20056fd80b3245d4db554f5ca1a5e29;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 2926b179b..2f5f82aa3 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -3,7 +3,7 @@ import { OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' 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,8 +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 @@ -76,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 @@ -85,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'), @@ -130,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 @@ -140,10 +155,13 @@ 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() @@ -153,14 +171,18 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor 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 () { @@ -251,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' }) }