X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Fabstract-video-list.ts;h=2f5f82aa379e410d7e22bc6beae53fba79163701;hb=be27ef3b4682c5639039474c39ee0d234d16f482;hp=eba05c07d90278b3a32a18e1ed737fa18277376b;hpb=a41b9da1a9ce49df82ea10c82de4c2fbc6d1b189;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 eba05c07d..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 } from 'rxjs/operators' +import { debounceTime, first, tap } from 'rxjs/operators' import { OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { fromEvent, Observable, 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' @@ -12,38 +12,42 @@ import { Syndication } from '@app/shared/video/syndication.model' import { Notifier, ServerService } from '@app/core' import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' import { I18n } from '@ngx-translate/i18n-polyfill' -import { isThisMonth, isThisWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date' +import { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date' +import { ServerConfig } from '@shared/models' +import { GlobalIconName } from '@app/shared/images/global-icon.component' enum GroupDate { UNKNOWN = 0, TODAY = 1, YESTERDAY = 2, - THIS_WEEK = 3, - THIS_MONTH = 4, + LAST_WEEK = 3, + LAST_MONTH = 4, OLDER = 5 } export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook { - pagination: ComponentPagination = { + pagination: ComponentPaginationLight = { currentPage: 1, - itemsPerPage: 25, - totalItems: null + itemsPerPage: 25 } sort: VideoSortField = '-publishedAt' categoryOneOf?: number + languageOneOf?: string[] defaultSort: VideoSortField = '-publishedAt' syndicationItems: Syndication[] = [] loadOnInit = true - videos: Video[] = [] + useUserVideoLanguagePreferences = false ownerDisplayType: OwnerDisplayType = 'account' displayModerationBlock = false titleTooltip: string displayVideoActions = true groupByDate = false + videos: Video[] = [] + hasDoneFirstQuery = false disabled = false displayOptions: MiniatureDisplayOptions = { @@ -56,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 @@ -71,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<{ videos: Video[], totalVideos: number }> + private lastQueryLength: number + + abstract getVideosObservable (page: number): Observable<{ data: Video[] }> abstract generateSyndicationList (): void @@ -80,12 +96,16 @@ 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'), [GroupDate.YESTERDAY]: this.i18n('Yesterday'), - [GroupDate.THIS_WEEK]: this.i18n('This week'), - [GroupDate.THIS_MONTH]: this.i18n('This month'), + [GroupDate.LAST_WEEK]: this.i18n('Last week'), + [GroupDate.LAST_MONTH]: this.i18n('Last month'), [GroupDate.OLDER]: this.i18n('Older') } @@ -98,7 +118,12 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor .subscribe(() => this.calcPageSizes()) this.calcPageSizes() - if (this.loadOnInit === true) this.loadMoreVideos() + + const loadUserObservable = this.loadUserVideoLanguagesIfNeeded() + + if (this.loadOnInit === true) { + loadUserObservable.subscribe(() => this.loadMoreVideos()) + } } ngOnDestroy () { @@ -120,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 @@ -130,27 +155,34 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor this.loadMoreVideos() } - loadMoreVideos () { - const observable = this.getVideosObservable(this.pagination.currentPage) + loadMoreVideos (reset = false) { + this.getVideosObservable(this.pagination.currentPage).subscribe( + ({ data }) => { + this.hasDoneFirstQuery = true + this.lastQueryLength = data.length - observable.subscribe( - ({ videos, totalVideos }) => { - this.pagination.totalItems = totalVideos - this.videos = this.videos.concat(videos) + 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 () { @@ -167,31 +199,41 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor for (const video of this.videos) { const publishedDate = video.publishedAt - if (currentGroupedDate < GroupDate.TODAY && isToday(publishedDate)) { + if (currentGroupedDate <= GroupDate.TODAY && isToday(publishedDate)) { + if (currentGroupedDate === GroupDate.TODAY) continue + currentGroupedDate = GroupDate.TODAY this.groupedDates[ video.id ] = currentGroupedDate continue } - if (currentGroupedDate < GroupDate.YESTERDAY && isYesterday(publishedDate)) { + if (currentGroupedDate <= GroupDate.YESTERDAY && isYesterday(publishedDate)) { + if (currentGroupedDate === GroupDate.YESTERDAY) continue + currentGroupedDate = GroupDate.YESTERDAY this.groupedDates[ video.id ] = currentGroupedDate continue } - if (currentGroupedDate < GroupDate.THIS_WEEK && isThisWeek(publishedDate)) { - currentGroupedDate = GroupDate.THIS_WEEK + if (currentGroupedDate <= GroupDate.LAST_WEEK && isLastWeek(publishedDate)) { + if (currentGroupedDate === GroupDate.LAST_WEEK) continue + + currentGroupedDate = GroupDate.LAST_WEEK this.groupedDates[ video.id ] = currentGroupedDate continue } - if (currentGroupedDate < GroupDate.THIS_MONTH && isThisMonth(publishedDate)) { - currentGroupedDate = GroupDate.THIS_MONTH + if (currentGroupedDate <= GroupDate.LAST_MONTH && isLastMonth(publishedDate)) { + if (currentGroupedDate === GroupDate.LAST_MONTH) continue + + currentGroupedDate = GroupDate.LAST_MONTH this.groupedDates[ video.id ] = currentGroupedDate continue } - if (currentGroupedDate < GroupDate.OLDER) { + if (currentGroupedDate <= GroupDate.OLDER) { + if (currentGroupedDate === GroupDate.OLDER) continue + currentGroupedDate = GroupDate.OLDER this.groupedDates[ video.id ] = currentGroupedDate } @@ -231,8 +273,20 @@ 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' }) } + + private loadUserVideoLanguagesIfNeeded () { + if (!this.authService.isLoggedIn() || !this.useUserVideoLanguagePreferences) { + return of(true) + } + + return this.authService.userInformationLoaded + .pipe( + first(), + tap(() => this.languageOneOf = this.user.videoLanguages) + ) + } }