X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Fabstract-video-list.ts;h=06d4ed43d5cd705c782d277037e47171edbfaf70;hb=13adf228d0cc48995cf70c0a782a1d717873f6e0;hp=09965012999bdf5e0a4d485c6e83eea41d922a0d;hpb=693263e936763a851e3c8c020e3739def8bd4eca;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 099650129..06d4ed43d 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -1,16 +1,28 @@ -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 { VideoSortField } from './sort-field.type' import { Video } from './video.model' import { ScreenService } from '@app/shared/misc/screen.service' -import { OwnerDisplayType } from '@app/shared/video/video-miniature.component' +import { MiniatureDisplayOptions, OwnerDisplayType } from '@app/shared/video/video-miniature.component' 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 { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date' +import { ResultList, ServerConfig } from '@shared/models' + +enum GroupDate { + UNKNOWN = 0, + TODAY = 1, + YESTERDAY = 2, + LAST_WEEK = 3, + LAST_MONTH = 4, + OLDER = 5 +} export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook { pagination: ComponentPagination = { @@ -21,31 +33,58 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor sort: VideoSortField = '-publishedAt' categoryOneOf?: number + languageOneOf?: string[] defaultSort: VideoSortField = '-publishedAt' syndicationItems: Syndication[] = [] loadOnInit = true - marginContent = true - videos: Video[] = [] + useUserVideoLanguagePreferences = false ownerDisplayType: OwnerDisplayType = 'account' displayModerationBlock = false titleTooltip: string + displayVideoActions = true + groupByDate = false + videos: Video[] = [] disabled = false + displayOptions: MiniatureDisplayOptions = { + date: true, + views: true, + by: true, + privacyLabel: true, + privacyText: false, + state: false, + blacklistInfo: false + } + + actions: { + routerLink: string + iconName: string + label: string + }[] = [] + + onDataSubject = new Subject() + + protected serverConfig: ServerConfig + protected abstract notifier: Notifier protected abstract authService: AuthService protected abstract route: ActivatedRoute protected abstract serverService: ServerService protected abstract screenService: ScreenService protected abstract router: Router + protected abstract i18n: I18n abstract titlePage: string private resizeSubscription: Subscription private angularState: number - abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number }> + private groupedDateLabels: { [id in GroupDate]: string } + private groupedDates: { [id: number]: GroupDate } = {} + + abstract getVideosObservable (page: number): Observable> abstract generateSyndicationList (): void @@ -54,6 +93,19 @@ 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.LAST_WEEK]: this.i18n('Last week'), + [GroupDate.LAST_MONTH]: this.i18n('Last month'), + [GroupDate.OLDER]: this.i18n('Older') + } + // Subscribe to route changes const routeParams = this.route.snapshot.queryParams this.loadRouteParams(routeParams) @@ -63,7 +115,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 () { @@ -95,31 +152,95 @@ 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, total }) => { + this.pagination.totalItems = total + if (reset) this.videos = [] + this.videos = this.videos.concat(data) - observable.subscribe( - ({ videos, totalVideos }) => { - this.pagination.totalItems = totalVideos - this.videos = this.videos.concat(videos) + 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 () { throw new Error('toggleModerationDisplay is not implemented') } + removeVideoFromArray (video: Video) { + this.videos = this.videos.filter(v => v.id !== video.id) + } + + buildGroupedDateLabels () { + let currentGroupedDate: GroupDate = GroupDate.UNKNOWN + + for (const video of this.videos) { + const publishedDate = video.publishedAt + + 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) continue + + currentGroupedDate = GroupDate.YESTERDAY + this.groupedDates[ video.id ] = currentGroupedDate + continue + } + + 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.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) continue + + currentGroupedDate = GroupDate.OLDER + this.groupedDates[ video.id ] = currentGroupedDate + } + } + } + + getCurrentGroupedDateLabel (video: Video) { + if (this.groupByDate === false) return undefined + + return this.groupedDateLabels[this.groupedDates[video.id]] + } + // On videos hook for children that want to do something protected onMoreVideos () { /* empty */ } @@ -147,8 +268,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) + ) + } }