X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-video-miniature%2Fabstract-video-list.ts;h=f12ae2ee58363710c6860c6ee74a6bea20260612;hb=2e80d256cc75b4b02c8efc3d3e4cdf57ddf401a8;hp=c55e85afefc8e97c4f7f7b99cc74691dfa0d7e2b;hpb=afff310e50f2fa8419bb4242470cbde46ab54463;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 c55e85afe..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,7 +1,17 @@ -import { fromEvent, Observable, Subject, Subscription } from 'rxjs' +import { fromEvent, Observable, ReplaySubject, Subject, Subscription } from 'rxjs' import { debounceTime, switchMap, tap } from 'rxjs/operators' -import { Directive, OnDestroy, OnInit } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' +import { + AfterContentInit, + ComponentFactoryResolver, + Directive, + Injector, + OnDestroy, + OnInit, + Type, + ViewChild, + ViewContainerRef +} from '@angular/core' +import { ActivatedRoute, Params, Router } from '@angular/router' import { AuthService, ComponentPaginationLight, @@ -14,11 +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, @@ -31,8 +42,13 @@ enum GroupDate { } @Directive() -// tslint:disable-next-line: directive-class-suffix -export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook { +// 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 + + HeaderComponent: Type = VideoListHeaderComponent + headerComponentInjector: Injector + pagination: ComponentPaginationLight = { currentPage: 1, itemsPerPage: 25 @@ -47,8 +63,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor syndicationItems: Syndication[] = [] loadOnInit = true - useUserVideoPreferences = false - ownerDisplayType: OwnerDisplayType = 'account' + loadUserVideoPreferences = false + displayModerationBlock = false titleTooltip: string displayVideoActions = true @@ -74,15 +90,17 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor label: string justIcon?: boolean routerLink?: string - click?: Function - clipboard?: string + href?: string + click?: (e: Event) => void }[] = [] onDataSubject = new Subject() userMiniature: User - protected serverConfig: ServerConfig + protected onUserLoadedSubject = new ReplaySubject(1) + + protected serverConfig: HTMLServerConfig protected abstract notifier: Notifier protected abstract authService: AuthService @@ -92,6 +110,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor protected abstract screenService: ScreenService protected abstract storageService: LocalStorageService protected abstract router: Router + protected abstract cfr: ComponentFactoryResolver abstract titlePage: string private resizeSubscription: Subscription @@ -107,9 +126,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor 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, @@ -132,10 +149,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor 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())) @@ -153,6 +171,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor if (this.resizeSubscription) this.resizeSubscription.unsubscribe() } + ngAfterContentInit () { + if (this.videoListHeader) { + // some components don't use the header: they use their own template, like my-history.component.html + this.setHeader(this.HeaderComponent, this.headerComponentInjector) + } + } + disableForReuse () { this.disabled = true } @@ -179,28 +204,29 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor } 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 () { @@ -252,7 +278,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor if (currentGroupedDate !== period.value) { currentGroupedDate = period.value - this.groupedDates[ video.id ] = currentGroupedDate + this.groupedDates[video.id] = currentGroupedDate } break @@ -268,16 +294,48 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor } toggleModerationDisplay () { - throw new Error('toggleModerationDisplay is not implemented') + throw new Error('toggleModerationDisplay ' + $localize`function is not implemented`) + } + + setHeader ( + t: Type = this.HeaderComponent, + i: Injector = this.headerComponentInjector + ) { + const injector = i || Injector.create({ + providers: [ { + provide: 'data', + useValue: { + titlePage: this.titlePage, + titleTooltip: this.titleTooltip + } + } ] + }) + const viewContainerRef = this.videoListHeader + viewContainerRef.clear() + + const componentFactory = this.cfr.resolveComponentFactory(t) + 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) { @@ -319,7 +377,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor 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' }) @@ -330,10 +388,17 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor .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() + } }