modularize abstract video list header and implement video hotness recommendation...

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-miniature / abstract-video-list.ts

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 2219ced30245614daeb463c67bf3732e62308d18..3e84589cd145ea7ce728ca7a147fe0a4e98b4229 100644 (file)
--- 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,6 +1,16 @@
 import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
 import { debounceTime, switchMap, tap } from 'rxjs/operators'
-import { Directive, 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,
@@ -19,6 +29,7 @@ import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/mo
 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,
@@ -32,7 +43,12 @@ enum GroupDate {
 
 @Directive()
 // tslint:disable-next-line: directive-class-suffix
-export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook {
+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
@@ -70,9 +86,12 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
   }
 
   actions: {
-    routerLink: string
     iconName: GlobalIconName
     label: string
+    justIcon?: boolean
+    routerLink?: string
+    href?: string
+    click?: (e: Event) => void
   }[] = []
 
   onDataSubject = new Subject<any[]>()
@@ -89,6 +108,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
@@ -150,6 +170,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.apply(this, [ this.HeaderComponent, this.headerComponentInjector ])
+    }
+  }
+
   disableForReuse () {
     this.disabled = true
   }
@@ -265,7 +292,27 @@ 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<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