X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-video-miniature%2Fabstract-video-list.ts;h=f12ae2ee58363710c6860c6ee74a6bea20260612;hb=2e80d256cc75b4b02c8efc3d3e4cdf57ddf401a8;hp=3e84589cd145ea7ce728ca7a147fe0a4e98b4229;hpb=5bcbcbe338ef5a1ed14f084311d013fbb25dabcf;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts index 3e84589cd..f12ae2ee5 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts @@ -1,4 +1,4 @@ -import { fromEvent, Observable, Subject, Subscription } from 'rxjs' +import { fromEvent, Observable, ReplaySubject, Subject, Subscription } from 'rxjs' import { debounceTime, switchMap, tap } from 'rxjs/operators' import { AfterContentInit, @@ -11,7 +11,7 @@ import { ViewChild, ViewContainerRef } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' +import { ActivatedRoute, Params, Router } from '@angular/router' import { AuthService, ComponentPaginationLight, @@ -24,12 +24,12 @@ import { } from '@app/core' import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' import { GlobalIconName } from '@app/shared/shared-icons' -import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils/miscs/date' -import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models' +import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils' +import { HTMLServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models' import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' import { Syndication, Video } from '../shared-main' -import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component' import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component' +import { MiniatureDisplayOptions } from './video-miniature.component' enum GroupDate { UNKNOWN = 0, @@ -42,7 +42,7 @@ enum GroupDate { } @Directive() -// tslint:disable-next-line: directive-class-suffix +// eslint-disable-next-line @angular-eslint/directive-class-suffix export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterContentInit, DisableForReuseHook { @ViewChild('videoListHeader', { static: true, read: ViewContainerRef }) videoListHeader: ViewContainerRef @@ -63,8 +63,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte syndicationItems: Syndication[] = [] loadOnInit = true - useUserVideoPreferences = false - ownerDisplayType: OwnerDisplayType = 'account' + loadUserVideoPreferences = false + displayModerationBlock = false titleTooltip: string displayVideoActions = true @@ -98,7 +98,9 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte userMiniature: User - protected serverConfig: ServerConfig + protected onUserLoadedSubject = new ReplaySubject(1) + + protected serverConfig: HTMLServerConfig protected abstract notifier: Notifier protected abstract authService: AuthService @@ -124,9 +126,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte abstract generateSyndicationList (): void ngOnInit () { - this.serverConfig = this.serverService.getTmpConfig() - this.serverService.getConfig() - .subscribe(config => this.serverConfig = config) + this.serverConfig = this.serverService.getHTMLConfig() this.groupedDateLabels = { [GroupDate.UNKNOWN]: null, @@ -149,10 +149,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte this.calcPageSizes() const loadUserObservable = this.loadUserAndSettings() + loadUserObservable.subscribe(() => { + this.onUserLoadedSubject.next() - if (this.loadOnInit === true) { - loadUserObservable.subscribe(() => this.loadMoreVideos()) - } + if (this.loadOnInit === true) this.loadMoreVideos() + }) this.userService.listenAnonymousUpdate() .pipe(switchMap(() => this.loadUserAndSettings())) @@ -173,7 +174,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte ngAfterContentInit () { if (this.videoListHeader) { // some components don't use the header: they use their own template, like my-history.component.html - this.setHeader.apply(this, [ this.HeaderComponent, this.headerComponentInjector ]) + this.setHeader(this.HeaderComponent, this.headerComponentInjector) } } @@ -203,28 +204,29 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte } loadMoreVideos (reset = false) { - this.getVideosObservable(this.pagination.currentPage).subscribe( - ({ data }) => { - this.hasDoneFirstQuery = true - this.lastQueryLength = data.length + this.getVideosObservable(this.pagination.currentPage) + .subscribe({ + next: ({ data }) => { + this.hasDoneFirstQuery = true + this.lastQueryLength = data.length - if (reset) this.videos = [] - this.videos = this.videos.concat(data) + if (reset) this.videos = [] + this.videos = this.videos.concat(data) - if (this.groupByDate) this.buildGroupedDateLabels() + if (this.groupByDate) this.buildGroupedDateLabels() - this.onMoreVideos() + this.onMoreVideos() - this.onDataSubject.next(data) - }, + this.onDataSubject.next(data) + }, - error => { - const message = $localize`Cannot load more videos. Try again later.` + error: err => { + const message = $localize`Cannot load more videos. Try again later.` - console.error(message, { error }) - this.notifier.error(message) - } - ) + console.error(message, { err }) + this.notifier.error(message) + } + }) } reloadVideos () { @@ -276,7 +278,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte if (currentGroupedDate !== period.value) { currentGroupedDate = period.value - this.groupedDates[ video.id ] = currentGroupedDate + this.groupedDates[video.id] = currentGroupedDate } break @@ -300,13 +302,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte i: Injector = this.headerComponentInjector ) { const injector = i || Injector.create({ - providers: [{ + providers: [ { provide: 'data', useValue: { titlePage: this.titlePage, titleTooltip: this.titleTooltip } - }] + } ] }) const viewContainerRef = this.videoListHeader viewContainerRef.clear() @@ -315,13 +317,25 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte viewContainerRef.createComponent(componentFactory, 0, injector) } + // Can be redefined by child + displayAsRow () { + return false + } + // On videos hook for children that want to do something protected onMoreVideos () { /* empty */ } - protected loadRouteParams (routeParams: { [ key: string ]: any }) { - this.sort = routeParams[ 'sort' ] as VideoSortField || this.defaultSort - this.categoryOneOf = routeParams[ 'categoryOneOf' ] - this.angularState = routeParams[ 'a-state' ] + protected load () { /* empty */ } + + // Hook if the page has custom route params + protected loadPageRouteParams (_queryParams: Params) { /* empty */ } + + protected loadRouteParams (queryParams: Params) { + this.sort = queryParams['sort'] as VideoSortField || this.defaultSort + this.categoryOneOf = queryParams['categoryOneOf'] + this.angularState = queryParams['a-state'] + + this.loadPageRouteParams(queryParams) } protected buildLocalFilter (existing: VideoFilter, base: VideoFilter) { @@ -363,7 +377,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte categoryOneOf: this.categoryOneOf } - let path = this.router.url + let path = this.getUrlWithoutParams() if (!path || path === '/') path = this.serverConfig.instance.defaultClientRoute this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' }) @@ -374,10 +388,17 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte .pipe(tap(user => { this.userMiniature = user - if (!this.useUserVideoPreferences) return + if (!this.loadUserVideoPreferences) return this.languageOneOf = user.videoLanguages this.nsfwPolicy = user.nsfwPolicy })) } + + private getUrlWithoutParams () { + const urlTree = this.router.parseUrl(this.router.url) + urlTree.queryParams = {} + + return urlTree.toString() + } }