-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,
} 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,
}
@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<GenericHeaderComponent> = VideoListHeaderComponent
+ headerComponentInjector: Injector
+
pagination: ComponentPaginationLight = {
currentPage: 1,
itemsPerPage: 25
syndicationItems: Syndication[] = []
loadOnInit = true
- useUserVideoPreferences = false
- ownerDisplayType: OwnerDisplayType = 'account'
+ loadUserVideoPreferences = false
+
displayModerationBlock = false
titleTooltip: string
displayVideoActions = true
label: string
justIcon?: boolean
routerLink?: string
- click?: Function
- clipboard?: string
+ href?: string
+ click?: (e: Event) => void
}[] = []
onDataSubject = new Subject<any[]>()
userMiniature: User
- protected serverConfig: ServerConfig
+ protected onUserLoadedSubject = new ReplaySubject<void>(1)
+
+ protected serverConfig: HTMLServerConfig
protected abstract notifier: Notifier
protected abstract authService: AuthService
protected abstract screenService: ScreenService
protected abstract storageService: LocalStorageService
protected abstract router: Router
+ protected abstract cfr: ComponentFactoryResolver
abstract titlePage: string
private resizeSubscription: Subscription
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,
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()))
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
}
}
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 () {
if (currentGroupedDate !== period.value) {
currentGroupedDate = period.value
- this.groupedDates[ video.id ] = currentGroupedDate
+ this.groupedDates[video.id] = currentGroupedDate
}
break
}
toggleModerationDisplay () {
- throw new Error('toggleModerationDisplay is not implemented')
+ throw new Error('toggleModerationDisplay ' + $localize`function is not implemented`)
+ }
+
+ setHeader (
+ t: Type<any> = 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) {
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' })
.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()
+ }
}
projects / github / Chocobozzz / PeerTube.git / blobdiff