modularize abstract video list header and implement video hotness recommendation variant

9 files changed, 86 insertions, 18 deletions

diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index 0924b8119..def488df0 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -16,6 +16,7 @@ const icons = {
   'playlist-add': require('!!raw-loader?!../../../assets/images/misc/playlist-add.svg').default, // material ui
   'follower': require('!!raw-loader?!../../../assets/images/misc/account-arrow-left.svg').default, // material ui
   'following': require('!!raw-loader?!../../../assets/images/misc/account-arrow-right.svg').default, // material ui
+  'flame': require('!!raw-loader?!../../../assets/images/misc/flame.svg').default,
 
   // feather icons
   'flag': require('!!raw-loader?!../../../assets/images/feather/flag.svg').default,
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index c69a4c8b2..9d550996d 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -11,7 +11,8 @@ import {
   NgbModalModule,
   NgbNavModule,
   NgbPopoverModule,
-  NgbTooltipModule
+  NgbTooltipModule,
+  NgbButtonsModule
 } from '@ng-bootstrap/ng-bootstrap'
 import { LoadingBarModule } from '@ngx-loading-bar/core'
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
@@ -53,6 +54,7 @@ import { VideoChannelService } from './video-channel'
     NgbNavModule,
     NgbTooltipModule,
     NgbCollapseModule,
+    NgbButtonsModule,
 
     ClipboardModule,
 
@@ -110,6 +112,7 @@ import { VideoChannelService } from './video-channel'
     NgbNavModule,
     NgbTooltipModule,
     NgbCollapseModule,
+    NgbButtonsModule,
 
     ClipboardModule,
 
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 368a7d70e..07f79cd6d 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -1,13 +1,9 @@
 <div class="margin-content">
   <div class="videos-header">
-    <h1 *ngIf="titlePage" class="title-page title-page-single">
-      <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
-        {{ titlePage }}
-      </div>
-    </h1>
+    <ng-template #videoListHeader></ng-template>
 
     <div class="action-block">
-      <my-feed *ngIf="titlePage" [syndicationItems]="syndicationItems"></my-feed>
+      <my-feed *ngIf="syndicationItems" [syndicationItems]="syndicationItems"></my-feed>
       <ng-container *ngFor="let action of actions">
         <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 1c27c58c3..2eaf0dc70 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -5,16 +5,16 @@
 
 $iconSize: 16px;
 
+::ng-deep .title-page.title-page-single {
+  display: flex;
+  flex-grow: 1;
+}
+
 .videos-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 
-  .title-page.title-page-single {
-    display: flex;
-    flex-grow: 1;
-  }
-
   .action-block {
     ::ng-deep my-feed {
       my-global-icon {
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 a5f22585d..3e84589cd 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,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
@@ -92,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
@@ -153,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
   }
@@ -268,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
diff --git a/client/src/app/shared/shared-video-miniature/index.ts b/client/src/app/shared/shared-video-miniature/index.ts
index 47ca6f51b..a8fd82bb9 100644
--- a/client/src/app/shared/shared-video-miniature/index.ts
+++ b/client/src/app/shared/shared-video-miniature/index.ts
@@ -3,5 +3,5 @@ export * from './video-actions-dropdown.component'
 export * from './video-download.component'
 export * from './video-miniature.component'
 export * from './videos-selection.component'
-
+export * from './video-list-header.component'
 export * from './shared-video-miniature.module'
diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
index 3035bcfb3..7a7868853 100644
--- a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
+++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
@@ -12,6 +12,7 @@ import { VideoActionsDropdownComponent } from './video-actions-dropdown.componen
 import { VideoDownloadComponent } from './video-download.component'
 import { VideoMiniatureComponent } from './video-miniature.component'
 import { VideosSelectionComponent } from './videos-selection.component'
+import { VideoListHeaderComponent } from './video-list-header.component'
 
 @NgModule({
   imports: [
@@ -29,7 +30,8 @@ import { VideosSelectionComponent } from './videos-selection.component'
     VideoActionsDropdownComponent,
     VideoDownloadComponent,
     VideoMiniatureComponent,
-    VideosSelectionComponent
+    VideosSelectionComponent,
+    VideoListHeaderComponent
   ],
 
   exports: [
diff --git a/client/src/app/shared/shared-video-miniature/video-list-header.component.ts b/client/src/app/shared/shared-video-miniature/video-list-header.component.ts
new file mode 100644
index 000000000..a07248b96
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-list-header.component.ts
@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core'
+
+export abstract class GenericHeaderComponent {
+  constructor (@Inject('data') public data: any) {}
+}
+
+@Component({
+  selector: 'h1',
+  host: { 'class': 'title-page title-page-single' },
+  template: `
+<div placement="bottom" [ngbTooltip]="data.titleTooltip" container="body">
+  {{ data.titlePage }}
+</div>
+  `
+})
+export class VideoListHeaderComponent extends GenericHeaderComponent {
+  constructor (@Inject('data') public data: any) {
+    super(data)
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
index 2b060b130..ef59975d4 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -2,6 +2,7 @@ import { Observable } from 'rxjs'
 import {
   AfterContentInit,
   Component,
+  ComponentFactoryResolver,
   ContentChildren,
   EventEmitter,
   Input,
@@ -51,7 +52,8 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
     protected userService: UserService,
     protected screenService: ScreenService,
     protected storageService: LocalStorageService,
-    protected serverService: ServerService
+    protected serverService: ServerService,
+    protected cfr: ComponentFactoryResolver
   ) {
     super()
   }