From 5bcbcbe338ef5a1ed14f084311d013fbb25dabcf Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 22 Jan 2021 00:12:44 +0100 Subject: modularize abstract video list header and implement video hotness recommendation variant --- .../abstract-video-list.html | 8 +--- .../abstract-video-list.scss | 10 ++--- .../shared-video-miniature/abstract-video-list.ts | 50 ++++++++++++++++++++-- .../src/app/shared/shared-video-miniature/index.ts | 2 +- .../shared-video-miniature.module.ts | 4 +- .../video-list-header.component.ts | 20 +++++++++ .../videos-selection.component.ts | 4 +- 7 files changed, 81 insertions(+), 17 deletions(-) create mode 100644 client/src/app/shared/shared-video-miniature/video-list-header.component.ts (limited to 'client/src/app/shared/shared-video-miniature') 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 @@
-

-
- {{ titlePage }} -
-

+
- + 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 = 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 = 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: ` +
+ {{ data.titlePage }} +
+ ` +}) +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() } -- cgit v1.2.3