24 files changed, 305 insertions, 184 deletions
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
index 8780ca567..8e035b6bb 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
@@ -1,8 +1,8 @@
 import { forkJoin } from 'rxjs'
-import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { AfterViewChecked, AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
+import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
@@ -19,7 +19,7 @@ import { VideoSend } from './video-send'
    './video-send.scss'
  ]
 })
-export class VideoGoLiveComponent extends VideoSend implements OnInit, CanComponentDeactivate {
+export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterViewInit, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
@@ -41,7 +41,8 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, CanCompon
    protected videoService: VideoService,
    protected videoCaptionService: VideoCaptionService,
    private liveVideoService: LiveVideoService,
-    private router: Router
+    private router: Router,
+    private hooks: HooksService
    ) {
    super()
  }
@@ -50,6 +51,10 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, CanCompon
    super.ngOnInit()
  }
+  ngAfterViewInit () {
+    this.hooks.runAction('action:go-live.init', 'video-edit')
+  }
  canDeactivate () {
    return { canDeactivate: true }
  }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 1fef74994..dd87641fc 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -3,8 +3,8 @@
 .first-step-block {
  .torrent-or-magnet {
-    @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor));
+    @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuBackgroundColor));
-    
    &[data-content] {
      margin: 1.5rem 0;
    }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
index 01087e525..3aae24732 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -1,6 +1,6 @@
-import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
+import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
@@ -18,7 +18,7 @@ import { VideoSend } from './video-send'
    './video-send.scss'
  ]
 })
-export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
+export class VideoImportTorrentComponent extends VideoSend implements OnInit, AfterViewInit, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
  @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement>
@@ -43,7 +43,8 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
    protected videoService: VideoService,
    protected videoCaptionService: VideoCaptionService,
    private router: Router,
-    private videoImportService: VideoImportService
+    private videoImportService: VideoImportService,
+    private hooks: HooksService
    ) {
    super()
  }
@@ -52,6 +53,10 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
    super.ngOnInit()
  }
+  ngAfterViewInit () {
+    this.hooks.runAction('action:video-torrent-import.init', 'video-edit')
+  }
  canDeactivate () {
    return { canDeactivate: true }
  }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
index c447c179d..7a9fe369f 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -1,7 +1,7 @@
 import { map, switchMap } from 'rxjs/operators'
-import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
+import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { getAbsoluteAPIUrl, scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
@@ -18,7 +18,7 @@ import { VideoSend } from './video-send'
    './video-send.scss'
  ]
 })
-export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate {
+export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterViewInit, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
@@ -42,8 +42,9 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
    protected videoService: VideoService,
    protected videoCaptionService: VideoCaptionService,
    private router: Router,
-    private videoImportService: VideoImportService
+    private videoImportService: VideoImportService,
-    ) {
+    private hooks: HooksService
+  ) {
    super()
  }
@@ -51,6 +52,10 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
    super.ngOnInit()
  }
+  ngAfterViewInit () {
+    this.hooks.runAction('action:video-url-import.init', 'video-edit')
+  }
  canDeactivate () {
    return { canDeactivate: true }
  }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index ca21b61cd..effb37077 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -1,15 +1,15 @@
 import { Subscription } from 'rxjs'
 import { HttpErrorResponse, HttpEventType, HttpResponse } from '@angular/common/http'
-import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService, UserService } from '@app/core'
+import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core'
 import { scrollToTop, uploadErrorHandler } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { VideoPrivacy } from '@shared/models'
 import { VideoSend } from './video-send'
-import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 @Component({
  selector: 'my-video-upload',
@@ -20,7 +20,7 @@ import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
    './video-send.scss'
  ]
 })
-export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
+export class VideoUploadComponent extends VideoSend implements OnInit, AfterViewInit, OnDestroy, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
  @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
@@ -60,7 +60,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
    protected videoService: VideoService,
    protected videoCaptionService: VideoCaptionService,
    private userService: UserService,
-    private router: Router
+    private router: Router,
+    private hooks: HooksService
    ) {
    super()
  }
@@ -79,6 +80,10 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
        })
  }
+  ngAfterViewInit () {
+    this.hooks.runAction('action:video-upload.init', 'video-edit')
+  }
  ngOnDestroy () {
    if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe()
  }
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 5db9e823d..1ebee946b 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -67,7 +67,7 @@ $nav-link-height: 40px;
    &.active {
      border-color: $border-color;
      border-bottom-color: transparent;
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
      span {
        border-bottom-color: pvar(--mainColor);
@@ -84,7 +84,7 @@ $nav-link-height: 40px;
  border: $border-width $border-type $border-color;
  border-top: transparent;
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  width: 100%;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/comment/video-comments.component.html
index 4a6426d30..9e6fde2e0 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.html
@@ -1,12 +1,7 @@
 <div>
  <div class="title-block">
    <h2 class="title-page title-page-single">
-      <ng-container *ngIf="totalNotDeletedComments > 0; then hasComments; else noComments"></ng-container>
+      {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
-      <ng-template #hasComments>
-        <ng-container i18n *ngIf="totalNotDeletedComments === 1; else manyComments">1 Comment</ng-container>
-        <ng-template i18n #manyComments>{{ totalNotDeletedComments }} Comments</ng-template>
-      </ng-template>
-      <ng-template i18n #noComments>Comments</ng-template>
    </h2>
    <my-feed [syndicationItems]="syndicationItems"></my-feed>
@@ -79,15 +74,17 @@
            <span class="glyphicon glyphicon-menu-down"></span>
            <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
            <ng-template #hasAuthorComments>
              <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n>
-                View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} and others
+                View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}} from {{ video?.account?.displayName || 'the author' }} and others
              </ng-container>
              <ng-template i18n #onlyAuthorComments>
-                View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }}
+                View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}} from {{ video?.account?.displayName || 'the author' }}
              </ng-template>
            </ng-template>
-            <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template>
+            <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
            <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
          </div>
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
index d36dd9e34..210236b61 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
@@ -5,7 +5,6 @@ import { AuthService, ComponentPagination, ConfirmService, hasMoreItems, Notifie
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { Syndication, VideoDetails } from '@app/shared/shared-main'
 import { VideoComment, VideoCommentService, VideoCommentThreadTree } from '@app/shared/shared-video-comment'
-import { ThisReceiver } from '@angular/compiler'
 @Component({
  selector: 'my-video-comments',
diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.html b/client/src/app/+videos/+video-watch/modal/video-support.component.html
deleted file mode 100644
index 935656d23..000000000
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<ng-template #modal let-hide="close">
-  <div class="modal-header">
-    <h4 i18n class="modal-title">Support {{ video.account.displayName }}</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
-  </div>
-  <div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
-  <div class="modal-footer inputs">
-    <input
-      type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
-      (click)="hide()" (key.enter)="hide()"
-    >
-  </div>
-</ng-template>
diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.scss b/client/src/app/+videos/+video-watch/modal/video-support.component.scss
deleted file mode 100644
index 184e09027..000000000
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.action-button-cancel {
-  margin-right: 0 !important;
-}
diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.ts b/client/src/app/+videos/+video-watch/modal/video-support.component.ts
deleted file mode 100644
index bd5290a72..000000000
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core'
-import { MarkdownService } from '@app/core'
-import { VideoDetails } from '@app/shared/shared-main'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-@Component({
-  selector: 'my-video-support',
-  templateUrl: './video-support.component.html',
-  styleUrls: [ './video-support.component.scss' ]
-})
-export class VideoSupportComponent {
-  @Input() video: VideoDetails = null
-  @ViewChild('modal', { static: true }) modal: NgbModal
-  videoHTMLSupport = ''
-  constructor (
-    private markdownService: MarkdownService,
-    private modalService: NgbModal
-  ) { }
-  show () {
-    const modalRef = this.modalService.open(this.modal, { centered: true })
-    this.markdownService.enhancedMarkdownToHTML(this.video.support)
-      .then(r => this.videoHTMLSupport = r)
-    return modalRef
-  }
-}
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
index 3c7c679b8..e0e9f92e7 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
@@ -1,4 +1,4 @@
-<div class="other-videos">
+<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
  <ng-container *ngIf="hasVideos$ | async">
    <div class="title-page-container">
      <h2 i18n class="title-page title-page-single">
@@ -14,7 +14,7 @@
    <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
      <my-video-miniature
-        [displayOptions]="displayOptions" [video]="video" [user]="userMiniature"
+        [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
        (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()">
      </my-video-miniature>
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
index b278c9654..c9fae6f27 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
 .title-page-container {
  display: flex;
  justify-content: space-between;
@@ -11,6 +14,10 @@
  }
 }
+.title-page {
+  margin-top: 0;
+}
 .title-page-autoplay {
  display: flex;
  width: max-content;
@@ -29,3 +36,29 @@
 hr {
  margin-top: 0;
 }
+my-video-miniature {
+  display: block;
+}
+.other-videos:not(.display-as-row) my-video-miniature {
+  min-width: $video-thumbnail-medium-width;
+  max-width: $video-thumbnail-medium-width;
+}
+.display-as-row {
+  my-video-miniature {
+    margin-bottom: 20px;
+  }
+  hr {
+    display: none;
+  }
+  @media screen and (max-width: $mobile-view) {
+    my-video-miniature {
+      margin-bottom: 10px;
+    }
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
index a1c8e0661..89b9c01b6 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
@@ -16,6 +16,8 @@ import { RecommendedVideosStore } from './recommended-videos.store'
 export class RecommendedVideosComponent implements OnInit, OnChanges {
  @Input() inputRecommendation: RecommendationInfo
  @Input() playlist: VideoPlaylist
+  @Input() displayAsRow: boolean
  @Output() gotRecommendations = new EventEmitter<Video[]>()
  autoPlayNextVideo: boolean
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
new file mode 100644
index 000000000..5058f05dd
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
@@ -0,0 +1,27 @@
+<div class="wrapper" [ngClass]="'avatar-' + size">
+  <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
+    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
+    </a>
+    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
+    </a>
+  </ng-container>
+  <ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
+    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
+    </a>
+    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
+    </a>
+  </ng-container>
+  <ng-container *ngIf="isChannelAvatarNull()">
+    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
+    </a>
+  </ng-container>
+</div>
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
new file mode 100644
index 000000000..4998e85fa
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
@@ -0,0 +1,44 @@
+@import '_mixins';
+.wrapper {
+  $avatar-size: 35px;
+  width: $avatar-size;
+  height: $avatar-size;
+  position: relative;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  &.avatar-sm {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 3px;
+  }
+  a {
+    @include disable-outline;
+  }
+  a img {
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+    border-radius: 5px;
+    &:not(.channel-avatar) {
+      border-radius: 50%;
+    }
+  }
+  a:nth-of-type(2) img {
+    height: 60%;
+    width: 60%;
+    border: 2px solid pvar(--mainBackgroundColor);
+    transform: translateX(15%);
+    position: relative;
+    background-color: pvar(--mainBackgroundColor);
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts b/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts
new file mode 100644
index 000000000..0b6e796df
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts
@@ -0,0 +1,27 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { Video } from '@app/shared/shared-main/video'
+@Component({
+  selector: 'my-video-avatar-channel',
+  templateUrl: './video-avatar-channel.component.html',
+  styleUrls: [ './video-avatar-channel.component.scss' ]
+})
+export class VideoAvatarChannelComponent implements OnInit {
+  @Input() video: Video
+  @Input() byAccount: string
+  @Input() size: 'md' | 'sm' = 'md'
+  @Input() genericChannel: boolean
+  channelLinkTitle = ''
+  accountLinkTitle = ''
+  ngOnInit () {
+    this.channelLinkTitle = $localize`${this.video.account.name} (channel page)`
+    this.accountLinkTitle = $localize`${this.video.byAccount} (account page)`
+  }
+  isChannelAvatarNull () {
+    return this.video.channel.avatar === null
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index b17f898ce..99103c2c3 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -142,7 +142,7 @@
                  <ng-container *ngIf="isUserLoggedIn()">
                    <my-video-actions-dropdown
                      placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" [videoCaptions]="videoCaptions"
-                      [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
+                      [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()"
                    ></my-video-actions-dropdown>
                  </ng-container>
                </div>
@@ -289,6 +289,7 @@
    </div>
    <my-recommended-videos
+      [displayAsRow]="displayOtherVideosAsRow()"
      [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }"
      [playlist]="playlist"
      (gotRecommendations)="onRecommendations($event)"
@@ -313,6 +314,6 @@
 </div>
 <ng-container *ngIf="video !== null">
-  <my-video-support #videoSupportModal [video]="video"></my-video-support>
+  <my-support-modal #supportModal [video]="video"></my-support-modal>
  <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
 </ng-container>
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 555126cbc..2e566e3fb 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -3,7 +3,7 @@
 @import '_bootstrap-variables';
 @import '_miniature';
-$player-factor: 1.7; // 16/9
+$player-factor: #{16/9};
 $video-info-margin-left: 44px;
 @function getPlayerHeight($width){
@@ -179,12 +179,6 @@ $video-info-margin-left: 44px;
          &:hover {
            opacity: 0.8;
          }
-          img {
-            @include avatar(18px);
-            margin: -2px 5px 0 0;
-          }
        }
        .video-info-channel-left {
@@ -413,37 +407,12 @@ $video-info-margin-left: 44px;
      }
    }
  }
+}
-  ::ng-deep .other-videos {
+my-recommended-videos {
-    padding-left: 15px;
+  display: block;
-    min-width: $video-miniature-width;
+  padding-left: 15px;
+  min-width: 250px;
-    @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
-      width: min-content;
-    }
-    .title-page {
-      margin: 0 !important;
-    }
-    .video-miniature {
-      display: flex;
-      width: max-content;
-      height: 100%;
-      padding-bottom: 20px;
-      flex-wrap: wrap;
-    }
-    .video-bottom {
-      @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
-        margin-left: 1rem;
-      }
-      @media screen and (max-width: 500px) {
-        margin-left: 0;
-        margin-top: .5rem;
-      }
-    }
-  }
 }
 my-video-comments {
@@ -537,6 +506,7 @@ my-video-comments {
  }
 }
+// Use the same breakpoint than in the typescript component to display the other video miniatures as row
 @media screen and (max-width: 1100px) {
  #video-wrapper {
    flex-direction: column;
@@ -549,15 +519,10 @@ my-video-comments {
  .video-bottom {
    flex-direction: column;
+  }
-    ::ng-deep .other-videos {
+  my-recommended-videos {
-      padding-left: 0 !important;
+    padding-left: 0;
-      ::ng-deep .video-miniature  {
-        flex-direction: row;
-        width: auto;
-      }
-    }
  }
 }
@@ -579,10 +544,6 @@ my-video-comments {
    }
  }
-  ::ng-deep .other-videos .video-miniature  {
-    flex-direction: column;
-  }
  .privacy-concerns {
    width: 100%;
  }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 7a98cab3b..de5fb4ed0 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -21,6 +21,7 @@ import { RedirectService } from '@app/core/routing/redirect.service'
 import { isXPercentInViewport, scrollToTop } from '@app/helpers'
 import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
 import { VideoShareComponent } from '@app/shared/shared-share-modal'
+import { SupportModalComponent } from '@app/shared/shared-support-modal'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
@@ -28,7 +29,12 @@ import { MetaService } from '@ngx-meta/core'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
-import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage'
+import {
+  cleanupVideoWatch,
+  getStoredP2PEnabled,
+  getStoredTheater,
+  getStoredVideoWatchHistory
+} from '../../../assets/player/peertube-player-local-storage'
 import {
  CustomizationOptions,
  P2PMediaLoaderOptions,
@@ -39,7 +45,6 @@ import {
 } from '../../../assets/player/peertube-player-manager'
 import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
 import { environment } from '../../../environments/environment'
-import { VideoSupportComponent } from './modal/video-support.component'
 import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
 type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
@@ -54,7 +59,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
+  @ViewChild('supportModal') supportModal: SupportModalComponent
  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
@@ -195,6 +200,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.theaterEnabled = getStoredTheater()
    this.hooks.runAction('action:video-watch.init', 'video-watch')
+    setTimeout(cleanupVideoWatch, 1500) // Run in timeout to ensure we're not blocking the UI
  }
  ngOnDestroy () {
@@ -277,23 +284,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  }
  showSupportModal () {
-    // Check video was playing before opening support modal
+    this.supportModal.show()
-    const isVideoPlaying = this.isPlaying()
-    this.pausePlayer()
-    const modalRef = this.videoSupportModal.show()
-    modalRef.result.then(() => {
-      if (isVideoPlaying) {
-        this.resumePlayer()
-      }
-    })
  }
  showShareModal () {
-    this.pausePlayer()
    this.videoShareModal.show(this.currentTime, this.videoWatchPlaylist.currentPlaylistPosition)
  }
@@ -316,10 +310,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    }
  }
-  onModalOpened () {
-    this.pausePlayer()
-  }
  onVideoRemoved () {
    this.redirectService.redirectToHomepage()
  }
@@ -396,6 +386,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.loadVideo(videoId)
  }
+  displayOtherVideosAsRow () {
+    // Use the same value as in the SASS file
+    return this.screenService.getWindowInnerWidth() <= 1100
+  }
  private loadVideo (videoId: string) {
    // Video did not change
    if (this.video && this.video.uuid === videoId) return
@@ -768,9 +763,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    const getStartTime = () => {
      const byUrl = urlOptions.startTime !== undefined
      const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined)
+      const byLocalStorage = getStoredVideoWatchHistory(video.uuid)
      if (byUrl) return timeToInt(urlOptions.startTime)
      if (byHistory) return video.userHistory.currentTime
+      if (byLocalStorage) return byLocalStorage.duration
      return 0
    }
@@ -815,6 +812,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
          ? this.videoService.getVideoViewUrl(video.uuid)
          : null,
        embedUrl: video.embedUrl,
+        embedTitle: video.name,
        isLive: video.isLive,
@@ -827,7 +825,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
        serverUrl: environment.apiUrl,
-        videoCaptions: playerCaptions
+        videoCaptions: playerCaptions,
+        videoUUID: video.uuid
      },
      webtorrent: {
@@ -867,24 +867,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    return { playerMode: mode, playerOptions: options }
  }
-  private pausePlayer () {
-    if (!this.player) return
-    this.player.pause()
-  }
-  private resumePlayer () {
-    if (!this.player) return
-    this.player.play()
-  }
-  private isPlaying () {
-    if (!this.player) return
-    return !this.player.paused()
-  }
  private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) {
    if (!this.liveVideosSub) {
      this.liveVideosSub = this.buildLiveEventsSubscription()
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index fbda9b9c4..3e9f3822e 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -4,6 +4,7 @@ import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedShareModal } from '@app/shared/shared-share-modal'
+import { SharedSupportModal } from '@app/shared/shared-support-modal'
 import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
 import { SharedVideoModule } from '@app/shared/shared-video'
 import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
@@ -13,9 +14,9 @@ import { VideoCommentService } from '../../shared/shared-video-comment/video-com
 import { VideoCommentAddComponent } from './comment/video-comment-add.component'
 import { VideoCommentComponent } from './comment/video-comment.component'
 import { VideoCommentsComponent } from './comment/video-comments.component'
-import { VideoSupportComponent } from './modal/video-support.component'
 import { RecommendationsModule } from './recommendations/recommendations.module'
 import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
+import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
 import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 import { VideoWatchComponent } from './video-watch.component'
@@ -34,18 +35,20 @@ import { VideoWatchComponent } from './video-watch.component'
    SharedGlobalIconModule,
    SharedVideoCommentModule,
    SharedShareModal,
-    SharedVideoModule
+    SharedVideoModule,
+    SharedSupportModal
  ],
  declarations: [
    VideoWatchComponent,
    VideoWatchPlaylistComponent,
-    VideoSupportComponent,
    VideoCommentsComponent,
    VideoCommentAddComponent,
    VideoCommentComponent,
+    VideoAvatarChannelComponent,
    TimestampRouteTransformerDirective,
    TimestampRouteTransformerDirective
  ],
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index ca986c634..639a96c43 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -14,7 +14,7 @@
        </h1>
        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
          </my-video-miniature>
        </div>
      </div>
@@ -25,7 +25,7 @@
        </h2>
        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
          </my-video-miniature>
        </div>
      </div>
@@ -40,7 +40,7 @@
        </div>
        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
          </my-video-miniature>
        </div>
      </div>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index c1d10188a..ec73c628c 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -8,9 +8,84 @@
 }
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-layout;
 }
 .section {
-  @include miniature-rows;
+  &:first-child {
+    padding-top: 30px;
+    .section-title {
+      border-top: none !important;
+    }
+  }
+  .section-title {
+    font-size: 24px;
+    font-weight: $font-semibold;
+    padding-top: 15px;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    &:not(h2) {
+      border-top: 1px solid $separator-border-color;
+    }
+    a {
+      &:hover, &:focus:not(.focus-visible), &:active {
+        text-decoration: none;
+        outline: none;
+      }
+      color: pvar(--mainForegroundColor);
+    }
+  }
+  &.channel {
+    .section-title {
+      a {
+        display: flex;
+        width: fit-content;
+        align-items: center;
+        img {
+          @include channel-avatar(28px);
+          margin-right: 8px;
+        }
+      }
+      .followers {
+        color: pvar(--greyForegroundColor);
+        font-weight: normal;
+        font-size: 14px;
+        margin-left: 10px;
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+  .show-more {
+    position: relative;
+    top: -5px;
+    display: inline-block;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: pvar(--greyForegroundColor);
+    margin-bottom: 10px;
+    font-weight: $font-semibold;
+    text-decoration: none;
+  }
+  @media screen and (max-width: $mobile-view) {
+    max-height: initial;
+    overflow: initial;
+    .section-title {
+      font-size: 17px;
+      margin-left: 10px;
+    }
+  }
 }
diff --git a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
index e352a2b2c..6aabb93a5 100644
--- a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
+++ b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
@@ -7,7 +7,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 import { immutableAssign } from '@app/helpers'
 import { VideoService } from '@app/shared/shared-main'
 import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
-import { AbstractVideoList, OwnerDisplayType } from '@app/shared/shared-video-miniature'
+import { AbstractVideoList } from '@app/shared/shared-video-miniature'
 import { FeedFormat, VideoSortField } from '@shared/models'
 import { environment } from '../../../environments/environment'
 import { copyToClipboard } from '../../../root-helpers/utils'
@@ -20,7 +20,6 @@ import { copyToClipboard } from '../../../root-helpers/utils'
 export class VideoUserSubscriptionsComponent extends AbstractVideoList implements OnInit, OnDestroy {
  titlePage: string
  sort = '-publishedAt' as VideoSortField
-  ownerDisplayType: OwnerDisplayType = 'auto'
  groupByDate = true
  constructor (