34 files changed, 637 insertions, 37 deletions

diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts
index 8c12d3c4c..08372d8ad 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts
@@ -42,7 +42,7 @@ export class ActorBannerEditComponent implements OnInit {
           this.bannerExtensions = config.banner.file.extensions.join(', ')
 
           // tslint:disable:max-line-length
-          this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
+          this.bannerFormat = $localize`ratio 6/1, recommended size: 1920x317, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
         })
   }
 
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)
+  }
+}
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index 513b543cd..6e70e2f37 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -19,6 +19,7 @@
       <a ngbNavLink i18n>Complete preview</a>
 
       <ng-template ngbNavContent>
+        <div #previewElement></div>
         <div [innerHTML]="previewHTML"></div>
       </ng-template>
     </ng-container>
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index 9b3ab9cf3..a233a4205 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -1,9 +1,10 @@
-import { ViewportScroller } from '@angular/common'
 import truncate from 'lodash-es/truncate'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { ViewportScroller } from '@angular/common'
 import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { SafeHtml } from '@angular/platform-browser'
 import { MarkdownService, ScreenService } from '@app/core'
 
 @Component({
@@ -21,18 +22,27 @@ import { MarkdownService, ScreenService } from '@app/core'
 
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   @Input() content = ''
+
   @Input() classes: string[] | { [klass: string]: any[] | any } = []
+
   @Input() textareaMaxWidth = '100%'
   @Input() textareaHeight = '150px'
+
   @Input() truncate: number
+
   @Input() markdownType: 'text' | 'enhanced' = 'text'
+  @Input() customMarkdownRenderer?: (text: string) => Promise<string | HTMLElement>
+
   @Input() markdownVideo = false
+
   @Input() name = 'description'
 
   @ViewChild('textarea') textareaElement: ElementRef
+  @ViewChild('previewElement') previewElement: ElementRef
+
+  truncatedPreviewHTML: SafeHtml | string = ''
+  previewHTML: SafeHtml | string = ''
 
-  truncatedPreviewHTML = ''
-  previewHTML = ''
   isMaximized = false
 
   maximizeInText = $localize`Maximize editor`
@@ -115,10 +125,31 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   }
 
   private async markdownRender (text: string) {
-    const html = this.markdownType === 'text' ?
-      await this.markdownService.textMarkdownToHTML(text) :
-      await this.markdownService.enhancedMarkdownToHTML(text)
+    let html: string
+
+    if (this.customMarkdownRenderer) {
+      const result = await this.customMarkdownRenderer(text)
+
+      if (result instanceof HTMLElement) {
+        html = ''
+
+        const wrapperElement = this.previewElement.nativeElement as HTMLElement
+        wrapperElement.innerHTML = ''
+        wrapperElement.appendChild(result)
+        return
+      }
+
+      html = result
+    } else if (this.markdownType === 'text') {
+      html = await this.markdownService.textMarkdownToHTML(text)
+    } else {
+      html = await this.markdownService.enhancedMarkdownToHTML(text)
+    }
+
+    if (this.markdownVideo) {
+      html = this.markdownService.processVideoTimestamps(html)
+    }
 
-    return this.markdownVideo ? this.markdownService.processVideoTimestamps(html) : html
+    return html
   }
 }
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 3af517927..a4dd72db6 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -72,6 +72,7 @@ const icons = {
   'repeat': require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default,
   'message-circle': require('!!raw-loader?!../../../assets/images/feather/message-circle.svg').default,
   'codesandbox': require('!!raw-loader?!../../../assets/images/feather/codesandbox.svg').default,
+  'octagon': require('!!raw-loader?!../../../assets/images/feather/octagon.svg').default,
   'award': require('!!raw-loader?!../../../assets/images/feather/award.svg').default
 }
 
diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts
index 6d9f0ee65..7b5611f35 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -4,8 +4,12 @@ import { Actor } from './actor.model'
 export class Account extends Actor implements ServerAccount {
   displayName: string
   description: string
+
+  updatedAt: Date | string
+
   nameWithHost: string
   nameWithHostForced: string
+
   mutedByUser: boolean
   mutedByInstance: boolean
   mutedServerByUser: boolean
@@ -30,6 +34,8 @@ export class Account extends Actor implements ServerAccount {
     this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
     this.nameWithHostForced = Actor.CREATE_BY_STRING(this.name, this.host, true)
 
+    if (hash.updatedAt) this.updatedAt = new Date(hash.updatedAt.toString())
+
     this.mutedByUser = false
     this.mutedByInstance = false
     this.mutedServerByUser = false
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 6ba0bb09e..2fccc472a 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -12,7 +12,6 @@ export abstract class Actor implements ServerActor {
   followersCount: number
 
   createdAt: Date | string
-  updatedAt: Date | string
 
   avatar: ActorImage
 
@@ -55,7 +54,6 @@ export abstract class Actor implements ServerActor {
     this.followersCount = hash.followersCount
 
     if (hash.createdAt) this.createdAt = new Date(hash.createdAt.toString())
-    if (hash.updatedAt) this.updatedAt = new Date(hash.updatedAt.toString())
 
     this.avatar = hash.avatar
     this.isLocal = Actor.IS_LOCAL(this.host)
diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
index 5e7832807..d62c1f88e 100644
--- a/client/src/app/shared/shared-main/angular/from-now.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -3,32 +3,37 @@ import { Pipe, PipeTransform } from '@angular/core'
 // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
 @Pipe({ name: 'myFromNow' })
 export class FromNowPipe implements PipeTransform {
-
   transform (arg: number | Date | string) {
     const argDate = new Date(arg)
     const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
 
-    let interval = Math.round(seconds / 31536000)
+    let interval = Math.floor(seconds / 31536000)
     if (interval > 1) return $localize`${interval} years ago`
-    if (interval === 1) return $localize`${interval} year ago`
+    if (interval === 1) return $localize`1 year ago`
 
-    interval = Math.round(seconds / 2592000)
+    interval = Math.floor(seconds / 2419200)
+    // 12 months = 360 days, but a year ~ 365 days
+    // Display "1 year ago" rather than "12 months ago"
+    if (interval >= 12) return $localize`1 year ago`
     if (interval > 1) return $localize`${interval} months ago`
-    if (interval === 1) return $localize`${interval} month ago`
+    if (interval === 1) return $localize`1 month ago`
 
-    interval = Math.round(seconds / 604800)
+    interval = Math.floor(seconds / 604800)
+    // 4 weeks ~ 28 days, but our month is 30 days
+    // Display "1 month ago" rather than "4 weeks ago"
+    if (interval >= 4) return $localize`1 month ago`
     if (interval > 1) return $localize`${interval} weeks ago`
-    if (interval === 1) return $localize`${interval} week ago`
+    if (interval === 1) return $localize`1 week ago`
 
-    interval = Math.round(seconds / 86400)
+    interval = Math.floor(seconds / 86400)
     if (interval > 1) return $localize`${interval} days ago`
-    if (interval === 1) return $localize`${interval} day ago`
+    if (interval === 1) return $localize`1 day ago`
 
-    interval = Math.round(seconds / 3600)
+    interval = Math.floor(seconds / 3600)
     if (interval > 1) return $localize`${interval} hours ago`
-    if (interval === 1) return $localize`${interval} hour ago`
+    if (interval === 1) return $localize`1 hour ago`
 
-    interval = Math.round(seconds / 60)
+    interval = Math.floor(seconds / 60)
     if (interval >= 1) return $localize`${interval} min ago`
 
     return $localize`just now`
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 09b5f95d7..22b24c853 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -30,7 +30,7 @@ span[class$=-button] {
 
 .action-button {
   @include peertube-button-link;
-  @include button-with-icon(21px, 0, -1px);
+  @include button-with-icon(21px);
 }
 
 .orange-button {
diff --git a/client/src/app/shared/shared-main/custom-page/custom-page.service.ts b/client/src/app/shared/shared-main/custom-page/custom-page.service.ts
new file mode 100644
index 000000000..e5c2b3cd4
--- /dev/null
+++ b/client/src/app/shared/shared-main/custom-page/custom-page.service.ts
@@ -0,0 +1,38 @@
+import { of } from 'rxjs'
+import { catchError, map } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor } from '@app/core'
+import { CustomPage } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+
+@Injectable()
+export class CustomPageService {
+  static BASE_INSTANCE_HOMEPAGE_URL = environment.apiUrl + '/api/v1/custom-pages/homepage/instance'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) { }
+
+  getInstanceHomepage () {
+    return this.authHttp.get<CustomPage>(CustomPageService.BASE_INSTANCE_HOMEPAGE_URL)
+                        .pipe(
+                          catchError(err => {
+                            if (err.status === 404) {
+                              return of({ content: '' })
+                            }
+
+                            this.restExtractor.handleError(err)
+                          })
+                        )
+  }
+
+  updateInstanceHomepage (content: string) {
+    return this.authHttp.put(CustomPageService.BASE_INSTANCE_HOMEPAGE_URL, { content })
+      .pipe(
+        map(this.restExtractor.extractDataBool),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+}
diff --git a/client/src/app/shared/shared-main/custom-page/index.ts b/client/src/app/shared/shared-main/custom-page/index.ts
new file mode 100644
index 000000000..7269ece95
--- /dev/null
+++ b/client/src/app/shared/shared-main/custom-page/index.ts
@@ -0,0 +1 @@
+export * from './custom-page.service'
diff --git a/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
index 93ba9fb9b..4d5381e8d 100644
--- a/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
+++ b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
@@ -3,7 +3,8 @@ import { PluginElementPlaceholder } from '@shared/models'
 
 @Component({
   selector: 'my-plugin-placeholder',
-  template: '<div [id]="getId()"></div>'
+  template: '<div [id]="getId()"></div>',
+  styles: [ 'div { height: 100%; }' ]
 })
 
 export class PluginPlaceholderComponent {
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 05a5d77c7..f06f25ca5 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -29,6 +29,7 @@ import {
 } from './angular'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditButtonComponent } from './buttons'
+import { CustomPageService } from './custom-page'
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
 import { LoaderComponent, SmallLoaderComponent } from './loaders'
@@ -172,7 +173,9 @@ import { VideoChannelService } from './video-channel'
 
     VideoCaptionService,
 
-    VideoChannelService
+    VideoChannelService,
+
+    CustomPageService
   ]
 })
 export class SharedMainModule { }
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index c40dd5311..a9dcf2fa2 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -16,6 +16,8 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
   banner: ActorImage
   bannerUrl: string
 
+  updatedAt: Date | string
+
   ownerAccount?: ServerAccount
   ownerBy?: string
 
@@ -59,6 +61,8 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
 
     this.videosCount = hash.videosCount
 
+    if (hash.updatedAt) this.updatedAt = new Date(hash.updatedAt.toString())
+
     if (hash.viewsPerDay) {
       this.viewsPerDay = hash.viewsPerDay.map(v => ({ ...v, date: new Date(v.date) }))
     }
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
index e65261763..a89f1065a 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
@@ -40,23 +40,24 @@ export class VideoChannelService {
                )
   }
 
-  listAccountVideoChannels (
-    account: Account,
-    componentPagination?: ComponentPaginationLight,
-    withStats = false,
+  listAccountVideoChannels (options: {
+    account: Account
+    componentPagination?: ComponentPaginationLight
+    withStats?: boolean
+    sort?: string
     search?: string
-  ): Observable<ResultList<VideoChannel>> {
+  }): Observable<ResultList<VideoChannel>> {
+    const { account, componentPagination, withStats = false, sort, search } = options
+
     const pagination = componentPagination
       ? this.restService.componentPaginationToRestPagination(componentPagination)
       : { start: 0, count: 20 }
 
     let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination)
+    params = this.restService.addRestGetParams(params, pagination, sort)
     params = params.set('withStats', withStats + '')
 
-    if (search) {
-      params = params.set('search', search)
-    }
+    if (search) params = params.set('search', search)
 
     const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels'
     return this.authHttp.get<ResultList<VideoChannelServer>>(url, { params })
diff --git a/client/src/app/shared/shared-search/advanced-search.model.ts b/client/src/app/shared/shared-search/advanced-search.model.ts
index 0e3924841..2c83f53b6 100644
--- a/client/src/app/shared/shared-search/advanced-search.model.ts
+++ b/client/src/app/shared/shared-search/advanced-search.model.ts
@@ -1,4 +1,4 @@
-import { BooleanBothQuery, SearchTargetType } from '@shared/models'
+import { BooleanBothQuery, BooleanQuery, SearchTargetType, VideosSearchQuery } from '@shared/models'
 
 export class AdvancedSearch {
   startDate: string // ISO 8601
@@ -21,6 +21,8 @@ export class AdvancedSearch {
   durationMin: number // seconds
   durationMax: number // seconds
 
+  isLive: BooleanQuery
+
   sort: string
 
   searchTarget: SearchTargetType
@@ -41,6 +43,8 @@ export class AdvancedSearch {
     tagsOneOf?: any
     tagsAllOf?: any
 
+    isLive?: BooleanQuery
+
     durationMin?: string
     durationMax?: string
     sort?: string
@@ -54,6 +58,8 @@ export class AdvancedSearch {
     this.originallyPublishedEndDate = options.originallyPublishedEndDate || undefined
 
     this.nsfw = options.nsfw || undefined
+    this.isLive = options.isLive || undefined
+
     this.categoryOneOf = options.categoryOneOf || undefined
     this.licenceOneOf = options.licenceOneOf || undefined
     this.languageOneOf = options.languageOneOf || undefined
@@ -94,6 +100,7 @@ export class AdvancedSearch {
     this.tagsAllOf = undefined
     this.durationMin = undefined
     this.durationMax = undefined
+    this.isLive = undefined
 
     this.sort = '-match'
   }
@@ -112,12 +119,16 @@ export class AdvancedSearch {
       tagsAllOf: this.tagsAllOf,
       durationMin: this.durationMin,
       durationMax: this.durationMax,
+      isLive: this.isLive,
       sort: this.sort,
       searchTarget: this.searchTarget
     }
   }
 
-  toAPIObject () {
+  toAPIObject (): VideosSearchQuery {
+    let isLive: boolean
+    if (this.isLive) isLive = this.isLive === 'true'
+
     return {
       startDate: this.startDate,
       endDate: this.endDate,
@@ -131,6 +142,7 @@ export class AdvancedSearch {
       tagsAllOf: this.tagsAllOf,
       durationMin: this.durationMin,
       durationMax: this.durationMax,
+      isLive,
       sort: this.sort,
       searchTarget: this.searchTarget
     }
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index 75cfc918b..d8699ff69 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -40,7 +40,7 @@
   </ng-container>
 
   <div
-    class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right"
+    class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left"
     role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
   >
     <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 5df89d019..0bbdff1e6 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -95,6 +95,7 @@ my-actor-avatar {
   .video-bottom {
     display: flex;
     width: 100%;
+    min-width: 1px;
   }
 
   .video-miniature-name {
@@ -145,6 +146,7 @@ my-actor-avatar {
 
   .video-bottom {
     display: flex;
+    min-width: 1px;
   }
 
   // We don't display avatar in row mode