Instance homepage support (#4007)

* Prepare homepage parsers

* Add ability to update instance hompage

* Add ability to set homepage as landing page

* Add homepage preview in admin

* Dynamically update left menu for homepage

* Inject home content in homepage

* Add videos list and channel miniature custom markup

* Remove unused elements in markup service

17 files changed, 496 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html
new file mode 100644
index 000000000..da81006b9
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="channel" class="channel">
+  <my-actor-avatar [channel]="channel" size="34"></my-actor-avatar>
+
+  <div class="display-name">{{ channel.displayName }}</div>
+  <div class="username">{{ channel.name }}</div>
+
+  <div class="description">{{ channel.description }}</div>
+</div>
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss
new file mode 100644
index 000000000..85018afe2
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss
@@ -0,0 +1,9 @@
+@import '_variables';
+@import '_mixins';
+
+.channel {
+  border-radius: 15px;
+  padding: 10px;
+  width: min-content;
+  border: 1px solid pvar(--mainColor);
+}
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts
new file mode 100644
index 000000000..97bb5567e
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { VideoChannel, VideoChannelService } from '../shared-main'
+
+/*
+ * Markup component that creates a channel miniature only
+*/
+
+@Component({
+  selector: 'my-channel-miniature-markup',
+  templateUrl: 'channel-miniature-markup.component.html',
+  styleUrls: [ 'channel-miniature-markup.component.scss' ]
+})
+export class ChannelMiniatureMarkupComponent implements OnInit {
+  @Input() name: string
+
+  channel: VideoChannel
+
+  constructor (
+    private channelService: VideoChannelService
+  ) { }
+
+  ngOnInit () {
+    this.channelService.getVideoChannel(this.name)
+      .subscribe(channel => this.channel = channel)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
new file mode 100644
index 000000000..ffaf15710
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -0,0 +1,136 @@
+import { ComponentRef, Injectable } from '@angular/core'
+import { MarkdownService } from '@app/core'
+import {
+  ChannelMiniatureMarkupData,
+  EmbedMarkupData,
+  PlaylistMiniatureMarkupData,
+  VideoMiniatureMarkupData,
+  VideosListMarkupData
+} from '@shared/models'
+import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
+import { DynamicElementService } from './dynamic-element.service'
+import { EmbedMarkupComponent } from './embed-markup.component'
+import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
+import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
+import { VideosListMarkupComponent } from './videos-list-markup.component'
+
+type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
+
+@Injectable()
+export class CustomMarkupService {
+  private builders: { [ selector: string ]: BuilderFunction } = {
+    'peertube-video-embed': el => this.embedBuilder(el, 'video'),
+    'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'),
+    'peertube-video-miniature': el => this.videoMiniatureBuilder(el),
+    'peertube-playlist-miniature': el => this.playlistMiniatureBuilder(el),
+    'peertube-channel-miniature': el => this.channelMiniatureBuilder(el),
+    'peertube-videos-list': el => this.videosListBuilder(el)
+  }
+
+  constructor (
+    private dynamicElementService: DynamicElementService,
+    private markdown: MarkdownService
+  ) { }
+
+  async buildElement (text: string) {
+    const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
+
+    const rootElement = document.createElement('div')
+    rootElement.innerHTML = html
+
+    for (const selector of this.getSupportedTags()) {
+      rootElement.querySelectorAll(selector)
+        .forEach((e: HTMLElement) => {
+          try {
+            const component = this.execBuilder(selector, e)
+
+            this.dynamicElementService.injectElement(e, component)
+          } catch (err) {
+            console.error('Cannot inject component %s.', selector, err)
+          }
+        })
+    }
+
+    return rootElement
+  }
+
+  private getSupportedTags () {
+    return Object.keys(this.builders)
+  }
+
+  private execBuilder (selector: string, el: HTMLElement) {
+    return this.builders[selector](el)
+  }
+
+  private embedBuilder (el: HTMLElement, type: 'video' | 'playlist') {
+    const data = el.dataset as EmbedMarkupData
+    const component = this.dynamicElementService.createElement(EmbedMarkupComponent)
+
+    this.dynamicElementService.setModel(component, { uuid: data.uuid, type })
+
+    return component
+  }
+
+  private videoMiniatureBuilder (el: HTMLElement) {
+    const data = el.dataset as VideoMiniatureMarkupData
+    const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent)
+
+    this.dynamicElementService.setModel(component, { uuid: data.uuid })
+
+    return component
+  }
+
+  private playlistMiniatureBuilder (el: HTMLElement) {
+    const data = el.dataset as PlaylistMiniatureMarkupData
+    const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent)
+
+    this.dynamicElementService.setModel(component, { uuid: data.uuid })
+
+    return component
+  }
+
+  private channelMiniatureBuilder (el: HTMLElement) {
+    const data = el.dataset as ChannelMiniatureMarkupData
+    const component = this.dynamicElementService.createElement(ChannelMiniatureMarkupComponent)
+
+    this.dynamicElementService.setModel(component, { name: data.name })
+
+    return component
+  }
+
+  private videosListBuilder (el: HTMLElement) {
+    const data = el.dataset as VideosListMarkupData
+    const component = this.dynamicElementService.createElement(VideosListMarkupComponent)
+
+    const model = {
+      title: data.title,
+      description: data.description,
+      sort: data.sort,
+      categoryOneOf: this.buildArrayNumber(data.categoryOneOf),
+      languageOneOf: this.buildArrayString(data.languageOneOf),
+      count: this.buildNumber(data.count) || 10
+    }
+
+    this.dynamicElementService.setModel(component, model)
+
+    return component
+  }
+
+  private buildNumber (value: string) {
+    if (!value) return undefined
+
+    return parseInt(value, 10)
+  }
+
+  private buildArrayNumber (value: string) {
+    if (!value) return undefined
+
+    return value.split(',').map(v => parseInt(v, 10))
+  }
+
+  private buildArrayString (value: string) {
+    if (!value) return undefined
+
+    return value.split(',')
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/dynamic-element.service.ts b/client/src/app/shared/shared-custom-markup/dynamic-element.service.ts
new file mode 100644
index 000000000..e967e30ac
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/dynamic-element.service.ts
@@ -0,0 +1,57 @@
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  EmbeddedViewRef,
+  Injectable,
+  Injector,
+  OnChanges,
+  SimpleChange,
+  SimpleChanges,
+  Type
+} from '@angular/core'
+
+@Injectable()
+export class DynamicElementService {
+
+  constructor (
+    private injector: Injector,
+    private applicationRef: ApplicationRef,
+    private componentFactoryResolver: ComponentFactoryResolver
+  ) { }
+
+  createElement <T> (ofComponent: Type<T>) {
+    const div = document.createElement('div')
+
+    const component = this.componentFactoryResolver.resolveComponentFactory(ofComponent)
+      .create(this.injector, [], div)
+
+    return component
+  }
+
+  injectElement <T> (wrapper: HTMLElement, componentRef: ComponentRef<T>) {
+    const hostView = componentRef.hostView as EmbeddedViewRef<any>
+
+    this.applicationRef.attachView(hostView)
+    wrapper.appendChild(hostView.rootNodes[0])
+  }
+
+  setModel <T> (componentRef: ComponentRef<T>, attributes: Partial<T>) {
+    const changes: SimpleChanges = {}
+
+    for (const key of Object.keys(attributes)) {
+      const previousValue = componentRef.instance[key]
+      const newValue = attributes[key]
+
+      componentRef.instance[key] = newValue
+      changes[key] = new SimpleChange(previousValue, newValue, previousValue === undefined)
+    }
+
+    const component = componentRef.instance
+    if (typeof (component as unknown as OnChanges).ngOnChanges === 'function') {
+      (component as unknown as OnChanges).ngOnChanges(changes)
+    }
+
+    componentRef.changeDetectorRef.detectChanges()
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/embed-markup.component.ts b/client/src/app/shared/shared-custom-markup/embed-markup.component.ts
new file mode 100644
index 000000000..a854d89f6
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/embed-markup.component.ts
@@ -0,0 +1,22 @@
+import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
+import { environment } from 'src/environments/environment'
+import { Component, ElementRef, Input, OnInit } from '@angular/core'
+
+@Component({
+  selector: 'my-embed-markup',
+  template: ''
+})
+export class EmbedMarkupComponent implements OnInit {
+  @Input() uuid: string
+  @Input() type: 'video' | 'playlist' = 'video'
+
+  constructor (private el: ElementRef) { }
+
+  ngOnInit () {
+    const link = this.type === 'video'
+      ? buildVideoLink({ baseUrl: `${environment.originServerUrl}/videos/embed/${this.uuid}` })
+      : buildPlaylistLink({ baseUrl: `${environment.originServerUrl}/video-playlists/embed/${this.uuid}` })
+
+    this.el.nativeElement.innerHTML = buildVideoOrPlaylistEmbed(link, this.uuid)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/index.ts b/client/src/app/shared/shared-custom-markup/index.ts
new file mode 100644
index 000000000..14bde3ea9
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/index.ts
@@ -0,0 +1,3 @@
+export * from './custom-markup.service'
+export * from './dynamic-element.service'
+export * from './shared-custom-markup.module'
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html
new file mode 100644
index 000000000..4e1d1a13f
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html
@@ -0,0 +1,2 @@
+<my-video-playlist-miniature *ngIf="playlist" [playlist]="playlist">
+</my-video-playlist-miniature>
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss
new file mode 100644
index 000000000..281cef726
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss
@@ -0,0 +1,7 @@
+@import '_variables';
+@import '_mixins';
+
+my-video-playlist-miniature {
+  display: inline-block;
+  width: $video-thumbnail-width;
+}
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts
new file mode 100644
index 000000000..7aee450f1
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts
@@ -0,0 +1,38 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { MiniatureDisplayOptions } from '../shared-video-miniature'
+import { VideoPlaylist, VideoPlaylistService } from '../shared-video-playlist'
+
+/*
+ * Markup component that creates a playlist miniature only
+*/
+
+@Component({
+  selector: 'my-playlist-miniature-markup',
+  templateUrl: 'playlist-miniature-markup.component.html',
+  styleUrls: [ 'playlist-miniature-markup.component.scss' ]
+})
+export class PlaylistMiniatureMarkupComponent implements OnInit {
+  @Input() uuid: string
+
+  playlist: VideoPlaylist
+
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+
+  constructor (
+    private playlistService: VideoPlaylistService
+  ) { }
+
+  ngOnInit () {
+    this.playlistService.getVideoPlaylist(this.uuid)
+      .subscribe(playlist => this.playlist = playlist)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
new file mode 100644
index 000000000..4bbb71588
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
@@ -0,0 +1,49 @@
+
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main'
+import { SharedVideoMiniatureModule } from '../shared-video-miniature'
+import { SharedVideoPlaylistModule } from '../shared-video-playlist'
+import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
+import { CustomMarkupService } from './custom-markup.service'
+import { DynamicElementService } from './dynamic-element.service'
+import { EmbedMarkupComponent } from './embed-markup.component'
+import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
+import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
+import { VideosListMarkupComponent } from './videos-list-markup.component'
+
+@NgModule({
+  imports: [
+    CommonModule,
+
+    SharedMainModule,
+    SharedGlobalIconModule,
+    SharedVideoMiniatureModule,
+    SharedVideoPlaylistModule,
+    SharedActorImageModule
+  ],
+
+  declarations: [
+    VideoMiniatureMarkupComponent,
+    PlaylistMiniatureMarkupComponent,
+    ChannelMiniatureMarkupComponent,
+    EmbedMarkupComponent,
+    VideosListMarkupComponent
+  ],
+
+  exports: [
+    VideoMiniatureMarkupComponent,
+    PlaylistMiniatureMarkupComponent,
+    ChannelMiniatureMarkupComponent,
+    VideosListMarkupComponent,
+    EmbedMarkupComponent
+  ],
+
+  providers: [
+    CustomMarkupService,
+    DynamicElementService
+  ]
+})
+export class SharedCustomMarkupModule { }
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html
new file mode 100644
index 000000000..9b4930b6d
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html
@@ -0,0 +1,6 @@
+<my-video-miniature
+  *ngIf="video"
+  [video]="video" [user]="getUser()" [displayAsRow]="false"
+  [displayVideoActions]="false" [displayOptions]="displayOptions"
+>
+</my-video-miniature>
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss
new file mode 100644
index 000000000..81e265f29
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss
@@ -0,0 +1,7 @@
+@import '_variables';
+@import '_mixins';
+
+my-video-miniature {
+  display: inline-block;
+  width: $video-thumbnail-width;
+}
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts
new file mode 100644
index 000000000..79add0c3b
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts
@@ -0,0 +1,44 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService } from '@app/core'
+import { Video, VideoService } from '../shared-main'
+import { MiniatureDisplayOptions } from '../shared-video-miniature'
+
+/*
+ * Markup component that creates a video miniature only
+*/
+
+@Component({
+  selector: 'my-video-miniature-markup',
+  templateUrl: 'video-miniature-markup.component.html',
+  styleUrls: [ 'video-miniature-markup.component.scss' ]
+})
+export class VideoMiniatureMarkupComponent implements OnInit {
+  @Input() uuid: string
+
+  video: Video
+
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+
+  constructor (
+    private auth: AuthService,
+    private videoService: VideoService
+  ) { }
+
+  getUser () {
+    return this.auth.getUser()
+  }
+
+  ngOnInit () {
+    this.videoService.getVideo({ videoId: this.uuid })
+      .subscribe(video => this.video = video)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html
new file mode 100644
index 000000000..501f35e04
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html
@@ -0,0 +1,13 @@
+<div class="root">
+  <h4 *ngIf="title">{{ title }}</h4>
+  <div *ngIf="description" class="description">{{ description }}</div>
+
+  <div class="videos">
+    <my-video-miniature
+      *ngFor="let video of videos"
+      [video]="video" [user]="getUser()" [displayAsRow]="false"
+      [displayVideoActions]="false" [displayOptions]="displayOptions"
+    >
+    </my-video-miniature>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss
new file mode 100644
index 000000000..dcd931090
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss
@@ -0,0 +1,9 @@
+@import '_variables';
+@import '_mixins';
+
+my-video-miniature {
+  margin-right: 15px;
+  display: inline-block;
+  min-width: $video-thumbnail-width;
+  max-width: $video-thumbnail-width;
+}
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts
new file mode 100644
index 000000000..cc25d0a51
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts
@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService } from '@app/core'
+import { VideoSortField } from '@shared/models'
+import { Video, VideoService } from '../shared-main'
+import { MiniatureDisplayOptions } from '../shared-video-miniature'
+
+/*
+ * Markup component list videos depending on criterias
+*/
+
+@Component({
+  selector: 'my-videos-list-markup',
+  templateUrl: 'videos-list-markup.component.html',
+  styleUrls: [ 'videos-list-markup.component.scss' ]
+})
+export class VideosListMarkupComponent implements OnInit {
+  @Input() title: string
+  @Input() description: string
+  @Input() sort = '-publishedAt'
+  @Input() categoryOneOf: number[]
+  @Input() languageOneOf: string[]
+  @Input() count = 10
+
+  videos: Video[]
+
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+
+  constructor (
+    private auth: AuthService,
+    private videoService: VideoService
+  ) { }
+
+  getUser () {
+    return this.auth.getUser()
+  }
+
+  ngOnInit () {
+    const options = {
+      videoPagination: {
+        currentPage: 1,
+        itemsPerPage: this.count
+      },
+      categoryOneOf: this.categoryOneOf,
+      languageOneOf: this.languageOneOf,
+      sort: this.sort as VideoSortField
+    }
+
+    this.videoService.getVideos(options)
+      .subscribe(({ data }) => this.videos = data)
+  }
+}