X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Fabstract-video-list.ts;h=2926b179b566a2ee2d909705bb20a6e4975960a3;hb=22a73cb879a5cc775d4bec3d72fa9c9cf52e5175;hp=fa9d38735831cca4cd5ea7d795ef1143cc103be8;hpb=97567dd81f508dd6295ac4d73d849aa2ce0a6549;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 fa9d38735..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 } 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' @@ -11,6 +11,18 @@ import { MiniatureDisplayOptions, OwnerDisplayType } from '@app/shared/video/vid 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 } 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,17 +33,20 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor 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[] = [] disabled = false displayOptions: MiniatureDisplayOptions = { @@ -44,18 +59,24 @@ 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 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 @@ -64,6 +85,15 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor } ngOnInit () { + 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) @@ -73,7 +103,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 () { @@ -106,14 +141,16 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor } loadMoreVideos () { - const observable = this.getVideosObservable(this.pagination.currentPage) + this.getVideosObservable(this.pagination.currentPage).subscribe( + ({ data, total }) => { + this.pagination.totalItems = total + 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) @@ -134,6 +171,59 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor 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 */ } @@ -165,4 +255,16 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor 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) + ) + } }