import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
import { debounceTime, switchMap, tap } from 'rxjs/operators'
-import { OnDestroy, OnInit } from '@angular/core'
+import {
+ AfterContentInit,
+ ComponentFactoryResolver,
+ Directive,
+ Injector,
+ OnDestroy,
+ OnInit,
+ Type,
+ ViewChild,
+ ViewContainerRef
+} from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import {
AuthService,
} from '@app/core'
import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
import { GlobalIconName } from '@app/shared/shared-icons'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date'
-import { ServerConfig, VideoSortField } from '@shared/models'
+import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils/miscs/date'
+import { ServerConfig, 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'
enum GroupDate {
UNKNOWN = 0,
TODAY = 1,
YESTERDAY = 2,
- LAST_WEEK = 3,
- LAST_MONTH = 4,
- OLDER = 5
+ THIS_WEEK = 3,
+ THIS_MONTH = 4,
+ LAST_MONTH = 5,
+ OLDER = 6
}
-export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook {
+@Directive()
+// tslint:disable-next-line: 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
}
actions: {
- routerLink: string
iconName: GlobalIconName
label: string
+ justIcon?: boolean
+ routerLink?: string
+ href?: string
+ click?: (e: Event) => void
}[] = []
onDataSubject = new Subject<any[]>()
protected abstract screenService: ScreenService
protected abstract storageService: LocalStorageService
protected abstract router: Router
- protected abstract i18n: I18n
+ protected abstract cfr: ComponentFactoryResolver
abstract titlePage: string
private resizeSubscription: Subscription
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')
+ [GroupDate.TODAY]: $localize`Today`,
+ [GroupDate.YESTERDAY]: $localize`Yesterday`,
+ [GroupDate.THIS_WEEK]: $localize`This week`,
+ [GroupDate.THIS_MONTH]: $localize`This month`,
+ [GroupDate.LAST_MONTH]: $localize`Last month`,
+ [GroupDate.OLDER]: $localize`Older`
}
// Subscribe to route changes
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.apply(this, [ this.HeaderComponent, this.headerComponentInjector ])
+ }
+ }
+
disableForReuse () {
this.disabled = true
}
},
error => {
- const message = this.i18n('Cannot load more videos. Try again later.')
+ const message = $localize`Cannot load more videos. Try again later.`
console.error(message, { error })
this.notifier.error(message)
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
+ const periods = [
+ {
+ value: GroupDate.TODAY,
+ validator: (d: Date) => isToday(d)
+ },
+ {
+ value: GroupDate.YESTERDAY,
+ validator: (d: Date) => isYesterday(d)
+ },
+ {
+ value: GroupDate.THIS_WEEK,
+ validator: (d: Date) => isLastWeek(d)
+ },
+ {
+ value: GroupDate.THIS_MONTH,
+ validator: (d: Date) => isThisMonth(d)
+ },
+ {
+ value: GroupDate.LAST_MONTH,
+ validator: (d: Date) => isLastMonth(d)
+ },
+ {
+ value: GroupDate.OLDER,
+ validator: () => true
}
+ ]
- if (currentGroupedDate <= GroupDate.LAST_WEEK && isLastWeek(publishedDate)) {
- if (currentGroupedDate === GroupDate.LAST_WEEK) continue
-
- currentGroupedDate = GroupDate.LAST_WEEK
- this.groupedDates[ video.id ] = currentGroupedDate
- continue
- }
+ for (const video of this.videos) {
+ const publishedDate = video.publishedAt
- if (currentGroupedDate <= GroupDate.LAST_MONTH && isLastMonth(publishedDate)) {
- if (currentGroupedDate === GroupDate.LAST_MONTH) continue
+ for (let i = 0; i < periods.length; i++) {
+ const period = periods[i]
- currentGroupedDate = GroupDate.LAST_MONTH
- this.groupedDates[ video.id ] = currentGroupedDate
- continue
- }
+ if (currentGroupedDate <= period.value && period.validator(publishedDate)) {
- if (currentGroupedDate <= GroupDate.OLDER) {
- if (currentGroupedDate === GroupDate.OLDER) continue
+ if (currentGroupedDate !== period.value) {
+ currentGroupedDate = period.value
+ this.groupedDates[ video.id ] = currentGroupedDate
+ }
- currentGroupedDate = GroupDate.OLDER
- this.groupedDates[ video.id ] = currentGroupedDate
+ break
+ }
}
}
}
return this.groupedDateLabels[this.groupedDates[video.id]]
}
+ toggleModerationDisplay () {
+ 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)
+ }
+
// On videos hook for children that want to do something
protected onMoreVideos () { /* empty */ }
this.angularState = routeParams[ 'a-state' ]
}
+ protected buildLocalFilter (existing: VideoFilter, base: VideoFilter) {
+ if (base === 'local') {
+ return existing === 'local'
+ ? 'all-local' as 'all-local'
+ : 'local' as 'local'
+ }
+
+ return existing === 'all'
+ ? null
+ : 'all'
+ }
+
+ protected enableAllFilterIfPossible () {
+ if (!this.authService.isLoggedIn()) return
+
+ this.authService.userInformationLoaded
+ .subscribe(() => {
+ const user = this.authService.getUser()
+ this.displayModerationBlock = user.hasRight(UserRight.SEE_ALL_VIDEOS)
+ })
+ }
+
private calcPageSizes () {
if (this.screenService.isInMobileView()) {
this.pagination.itemsPerPage = 5