Merge branch 'develop' into pr/1285

130 files changed, 970 insertions, 599 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index d3ee8a1e4..a1b30fa8c 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
-import { MarkdownService } from '@app/videos/shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { InstanceService } from '@app/shared/instance/instance.service'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-about-instance',
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index 2b3fb32f3..b2cbd0873 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Contact {{ instanceName }} administrator</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts
index 6f3e6caa0..13890a0ee 100644
--- a/client/src/app/+accounts/account-about/account-about.component.ts
+++ b/client/src/app/+accounts/account-about/account-about.component.ts
@@ -1,9 +1,9 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { Account } from '@app/shared/account/account.model'
 import { AccountService } from '@app/shared/account/account.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Subscription } from 'rxjs'
-import { MarkdownService } from '@app/videos/shared'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-account-about',
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index 036264602..e8339b78b 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -26,8 +26,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
     private notifier: Notifier,
     private restExtractor: RestExtractor,
     private redirectService: RedirectService,
-    private authService: AuthService,
-    private i18n: I18n
+    private authService: AuthService
   ) {}
 
   ngOnInit () {
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index c06ae1d60..f7f347105 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -10,7 +10,7 @@ import { FollowingListComponent } from './follows/following-list/following-list.
 import { JobsComponent } from './jobs/job.component'
 import { JobsListComponent } from './jobs/jobs-list/jobs-list.component'
 import { JobService } from './jobs/shared/job.service'
-import { UserCreateComponent, UserListComponent, UsersComponent, UserUpdateComponent } from './users'
+import { UserCreateComponent, UserListComponent, UsersComponent, UserUpdateComponent, UserPasswordComponent } from './users'
 import { ModerationCommentModalComponent, VideoAbuseListComponent, VideoBlacklistListComponent } from './moderation'
 import { ModerationComponent } from '@app/+admin/moderation/moderation.component'
 import { RedundancyCheckboxComponent } from '@app/+admin/follows/shared/redundancy-checkbox.component'
@@ -36,6 +36,7 @@ import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } f
     UsersComponent,
     UserCreateComponent,
     UserUpdateComponent,
+    UserPasswordComponent,
     UserListComponent,
 
     ModerationComponent,
diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index 02ccfc8ca..13b019c5b 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -10,6 +10,7 @@
   font-weight: $font-semibold;
   min-width: 200px;
   display: inline-block;
+  vertical-align: top;
 }
 
 .moderation-expanded-text {
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
index 3a8424f68..303a788d2 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Moderation comment</h4>
-    <span class="close" aria-hidden="true" (click)="hideModerationCommentModal()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
@@ -14,12 +15,12 @@
         </div>
       </div>
 
-      <div i18n>
+      <div class="form-group" i18n>
         This comment can only be seen by you or the other moderators.
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hideModerationCommentModal()">Cancel</span>
+        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
 
         <input
           type="submit" i18n-value value="Update this comment" class="action-button-submit"
@@ -29,4 +30,4 @@
     </form>
   </div>
 
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
index bebcb4207..f915978ee 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
@@ -45,7 +45,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
     })
   }
 
-  hideModerationCommentModal () {
+  hide () {
     this.abuseToComment = undefined
     this.openedModal.close()
     this.form.reset()
@@ -60,7 +60,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
             this.notifier.success(this.i18n('Comment updated.'))
 
             this.commentUpdated.emit(moderationComment)
-            this.hideModerationCommentModal()
+            this.hide()
           },
 
           err => this.notifier.error(err.message)
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index e862d5162..05b549de6 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -51,11 +51,11 @@
         <td class="moderation-expanded" colspan="6">
           <div>
             <span i18n class="moderation-expanded-label">Reason:</span>
-            <span class="moderation-expanded-text">{{ videoAbuse.reason }}</span>
+            <span class="moderation-expanded-text" [innerHTML]="toHtml(videoAbuse.reason)"></span>
           </div>
           <div *ngIf="videoAbuse.moderationComment">
             <span i18n class="moderation-expanded-label">Moderation comment:</span>
-            <span class="moderation-expanded-text">{{ videoAbuse.moderationComment }}</span>
+            <span class="moderation-expanded-text" [innerHTML]="toHtml(videoAbuse.moderationComment)"></span>
           </div>
         </td>
       </tr>
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
index f64234b74..00c871659 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
@@ -9,6 +9,7 @@ import { DropdownAction } from '../../../shared/buttons/action-dropdown.componen
 import { ConfirmService } from '../../../core/index'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
 import { Video } from '../../../shared/video/video.model'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-video-abuse-list',
@@ -30,7 +31,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
     private notifier: Notifier,
     private videoAbuseService: VideoAbuseService,
     private confirmService: ConfirmService,
-    private i18n: I18n
+    private i18n: I18n,
+    private markdownRenderer: MarkdownService
   ) {
     super()
 
@@ -108,6 +110,10 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
 
   }
 
+  toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML(text)
+  }
+
   protected loadData () {
     return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort)
                .subscribe(
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index 7cef787d2..247f441c1 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -7,6 +7,7 @@
       <th style="width: 40px"></th>
       <th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th>
       <th i18n>Sensitive</th>
+      <th i18n>Unfederated</th>
       <th i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th style="width: 120px;"></th>
     </tr>
@@ -26,7 +27,8 @@
         </a>
       </td>
 
-      <td>{{ videoBlacklist.video.nsfw }}</td>
+      <td>{{ booleanToText(videoBlacklist.video.nsfw) }}</td>
+      <td>{{ booleanToText(videoBlacklist.unfederated) }}</td>
       <td>{{ videoBlacklist.createdAt }}</td>
 
       <td class="action-cell">
@@ -37,9 +39,9 @@
 
   <ng-template pTemplate="rowexpansion" let-videoBlacklist>
     <tr>
-      <td class="moderation-expanded" colspan="5">
+      <td class="moderation-expanded" colspan="6">
         <span i18n class="moderation-expanded-label">Blacklist reason:</span>
-        <span class="moderation-expanded-text">{{ videoBlacklist.reason }}</span>
+        <span class="moderation-expanded-text" [innerHTML]="toHtml(videoBlacklist.reason)"></span>
       </td>
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
index a02e84f67..b27bbbfef 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
@@ -7,6 +7,7 @@ import { VideoBlacklist } from '../../../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction } from '../../../shared/buttons/action-dropdown.component'
 import { Video } from '../../../shared/video/video.model'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-video-blacklist-list',
@@ -26,6 +27,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private videoBlacklistService: VideoBlacklistService,
+    private markdownRenderer: MarkdownService,
     private i18n: I18n
   ) {
     super()
@@ -46,6 +48,16 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
     return Video.buildClientUrl(videoBlacklist.video.uuid)
   }
 
+  booleanToText (value: boolean) {
+    if (value === true) return this.i18n('yes')
+
+    return this.i18n('no')
+  }
+
+  toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML(text)
+  }
+
   async removeVideoFromBlacklist (entry: VideoBlacklist) {
     const confirmMessage = this.i18n(
       'Do you really want to remove this video from the blacklist? It will be available again in the videos list.'
diff --git a/client/src/app/+admin/users/user-edit/index.ts b/client/src/app/+admin/users/user-edit/index.ts
index fd80a02e0..ec734ef92 100644
--- a/client/src/app/+admin/users/user-edit/index.ts
+++ b/client/src/app/+admin/users/user-edit/index.ts
@@ -1,2 +1,3 @@
 export * from './user-create.component'
 export * from './user-update.component'
+export * from './user-password.component'
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 56cf7d17d..c6566da24 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -81,3 +81,17 @@
 
   <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
 </form>
+
+<div *ngIf="!isCreation()" class="danger-zone">
+  <div class="account-title" i18n>Danger Zone</div>
+
+  <div class="form-group reset-password-email">
+    <label i18n>Send a link to reset the password by email to the user</label>
+    <button (click)="resetPassword()" i18n>Ask for new password</button>
+  </div>
+
+  <div class="form-group">
+    <label i18n>Manually set the user password</label>
+    <my-user-password [userId]="userId"></my-user-password>
+  </div>
+</div>
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index 6675f65cc..c1cc4ca45 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -14,7 +14,7 @@ input:not([type=submit]) {
   @include peertube-select-container(340px);
 }
 
-input[type=submit] {
+input[type=submit], button {
   @include peertube-button;
   @include orange-button;
 
@@ -25,3 +25,23 @@ input[type=submit] {
   margin-top: 5px;
   font-size: 11px;
 }
+
+.account-title {
+  @include in-content-small-title;
+
+  margin-top: 55px;
+  margin-bottom: 30px;
+}
+
+.danger-zone {
+  .reset-password-email {
+    margin-bottom: 30px;
+    padding-bottom: 30px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+    button {
+      display: block;
+      margin-top: 0;
+    }
+  }
+}
diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index 0b3511e8e..649b35b0c 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -8,6 +8,7 @@ export abstract class UserEdit extends FormReactive {
   videoQuotaDailyOptions: { value: string, label: string }[] = []
   roles = Object.keys(USER_ROLE_LABELS).map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] }))
   username: string
+  userId: number
 
   protected abstract serverService: ServerService
   protected abstract configService: ConfigService
@@ -22,7 +23,9 @@ export abstract class UserEdit extends FormReactive {
   }
 
   computeQuotaWithTranscoding () {
-    const resolutions = this.serverService.getConfig().transcoding.enabledResolutions
+    const transcodingConfig = this.serverService.getConfig().transcoding
+
+    const resolutions = transcodingConfig.enabledResolutions
     const higherResolution = VideoResolution.H_1080P
     let multiplier = 0
 
@@ -30,9 +33,15 @@ export abstract class UserEdit extends FormReactive {
       multiplier += resolution / higherResolution
     }
 
+    if (transcodingConfig.hls.enabled) multiplier *= 2
+
     return multiplier * parseInt(this.form.value['videoQuota'], 10)
   }
 
+  resetPassword () {
+    return
+  }
+
   protected buildQuotaOptions () {
     // These are used by a HTML select, so convert key into strings
     this.videoQuotaOptions = this.configService
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.html b/client/src/app/+admin/users/user-edit/user-password.component.html
new file mode 100644
index 000000000..a1e1f6216
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-password.component.html
@@ -0,0 +1,21 @@
+<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+  <div class="form-group">
+
+    <div class="input-group">
+      <input id="password" [attr.type]="showPassword ? 'text' : 'password'"
+        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+      >
+      <div class="input-group-append">
+        <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
+          <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
+          <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
+        </button>
+      </div>
+    </div>
+    <div *ngIf="formErrors.password" class="form-error">
+      {{ formErrors.password }}
+    </div>
+  </div>
+
+  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss
new file mode 100644
index 000000000..217d585af
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-password.component.scss
@@ -0,0 +1,22 @@
+@import '_variables';
+@import '_mixins';
+
+input:not([type=submit]):not([type=checkbox]) {
+  @include peertube-input-text(340px);
+
+  display: block;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+
+  margin-top: 10px;
+}
+
+.input-group-append {
+  height: 30px;
+}
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts
new file mode 100644
index 000000000..5b3040440
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-password.component.ts
@@ -0,0 +1,64 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { UserService } from '@app/shared/users/user.service'
+import { Notifier } from '../../../core'
+import { User, UserUpdate } from '../../../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
+import { FormReactive } from '../../../shared'
+
+@Component({
+  selector: 'my-user-password',
+  templateUrl: './user-password.component.html',
+  styleUrls: [ './user-password.component.scss' ]
+})
+export class UserPasswordComponent extends FormReactive implements OnInit {
+  error: string
+  username: string
+  showPassword = false
+
+  @Input() userId: number
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private userValidatorsService: UserValidatorsService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private notifier: Notifier,
+    private userService: UserService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      password: this.userValidatorsService.USER_PASSWORD
+    })
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const userUpdate: UserUpdate = this.form.value
+
+    this.userService.updateUser(this.userId, userUpdate).subscribe(
+      () => {
+        this.notifier.success(
+          this.i18n('Password changed for user {{username}}.', { username: this.username })
+        )
+      },
+
+      err => this.error = err.message
+    )
+  }
+
+  togglePasswordVisibility () {
+    this.showPassword = !this.showPassword
+  }
+
+  getFormButtonTitle () {
+    return this.i18n('Update user password')
+  }
+}
diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts
index 61e641823..94ef87b08 100644
--- a/client/src/app/+admin/users/user-edit/user-update.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -19,6 +19,7 @@ import { UserService } from '@app/shared'
 export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
   error: string
   userId: number
+  userEmail: string
   username: string
 
   private paramsSub: Subscription
@@ -89,9 +90,22 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     return this.i18n('Update user')
   }
 
+  resetPassword () {
+    this.userService.askResetPassword(this.userEmail).subscribe(
+      () => {
+        this.notifier.success(
+          this.i18n('An email asking for password reset has been sent to {{username}}.', { username: this.username })
+        )
+      },
+
+      err => this.error = err.message
+    )
+  }
+
   private onUserFetched (userJson: User) {
     this.userId = userJson.id
     this.username = userJson.username
+    this.userEmail = userJson.email
 
     this.form.patchValue({
       email: userJson.email,
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 556ab3c5d..69a4616a3 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -2,7 +2,7 @@
   <div i18n class="form-sub-title">Users list</div>
 
   <a class="add-button" routerLink="/admin/users/create">
-    <span class="icon icon-add"></span>
+    <my-global-icon iconName="add"></my-global-icon>
     <ng-container i18n>Create user</ng-container>
   </a>
 </div>
@@ -65,7 +65,9 @@
           <span i18n *ngIf="user.blocked" class="banned-info">(banned)</span>
         </a>
       </td>
+
       <td *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus">{{ user.email }}</td>
+
       <ng-template #emailWithVerificationStatus>
         <td *ngIf="user.emailVerified === false; else emailVerifiedNotFalse" i18n-title title="User's email must be verified to login">
           <em>? {{ user.email }}</em>
@@ -76,6 +78,7 @@
           </td>
         </ng-template>
       </ng-template>
+
       <td>{{ user.videoQuotaUsed }} / {{ user.videoQuota }}</td>
       <td>{{ user.roleLabel }}</td>
       <td>{{ user.createdAt }}</td>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index f235769f0..5274be01c 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -2,7 +2,7 @@
 @import '_mixins';
 
 .add-button {
-  @include create-button('../../../../assets/images/global/add.svg');
+  @include create-button;
 }
 
 tr.banned {
@@ -23,4 +23,4 @@ tr.banned {
   input {
     @include peertube-input-text(250px);
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
index 82150cbe3..e7c6863f1 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
@@ -65,10 +65,10 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 14px;
-      color: #585858;
+      color: $grey-foreground-color;
 
       &:hover {
-        color: #303030;
+        color: $grey-foreground-hover-color;
       }
     }
   }
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index b98a1087e..d518b22ec 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,7 +1,13 @@
 <div class="header">
-  <a routerLink="/my-account/settings" fragment="notifications" i18n>Notification preferences</a>
+  <a routerLink="/my-account/settings" fragment="notifications" i18n>
+    <my-global-icon iconName="cog"></my-global-icon>
+    Notification preferences
+  </a>
 
-  <button (click)="markAllAsRead()" i18n>Mark all as read</button>
+  <button (click)="markAllAsRead()" i18n>
+    <my-global-icon iconName="circle-tick"></my-global-icon>
+    Mark all as read
+  </button>
 </div>
 
 <my-user-notifications #userNotification></my-user-notifications>
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index 86ac094c5..43d1f82ab 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -5,16 +5,18 @@
   display: flex;
   justify-content: space-between;
   font-size: 15px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 
   a {
     @include peertube-button-link;
     @include grey-button;
+    @include button-with-icon(18px, 3px, -1px);
   }
 
   button {
     @include peertube-button;
     @include grey-button;
+    @include button-with-icon(20px, 3px, -1px);
   }
 }
 
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
index fd7d7d23b..674a4e8a2 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal let-close="close" let-dismiss="dismiss">
   <div class="modal-header">
     <h4 i18n class="modal-title">Accept ownership</h4>
-    <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
   </div>
 
   <div class="modal-body" [formGroup]="form">
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
index 379fd8bb1..5709e9f54 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -40,10 +40,10 @@
       <td class="action-cell">
         <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
           <my-button i18n label="Accept"
-                     icon="icon-tick"
+                     icon="tick"
                      (click)="openAcceptModal(videoChangeOwnership)"></my-button>
           <my-button i18n label="Refuse"
-                     icon="icon-cross"
+                     icon="cross"
                      (click)="refuse(videoChangeOwnership)">Refuse</my-button>
         </ng-container>
       </td>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
index df74b19b6..51db2e75d 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
@@ -1,6 +1,6 @@
 <div class="video-channels-header">
   <a class="create-button" routerLink="create">
-    <span class="icon icon-add"></span>
+    <my-global-icon iconName="add"></my-global-icon>
     <ng-container i18n>Create another video channel</ng-container>
   </a>
 </div>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index 472cbb723..77fce138b 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -2,7 +2,7 @@
 @import '_mixins';
 
 .create-button {
-  @include create-button('../../../assets/images/global/add.svg');
+  @include create-button;
 }
 
 /deep/ .action-button {
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
index 0ab3e2067..da2c5bcd3 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
@@ -35,10 +35,14 @@ export class MyAccountVideoChannelsComponent implements OnInit {
   async deleteVideoChannel (videoChannel: VideoChannel) {
     const res = await this.confirmService.confirmWithInput(
       this.i18n(
-        'Do you really want to delete {{videoChannelName}}? It will delete all videos uploaded in this channel too.',
-        { videoChannelName: videoChannel.displayName }
+        'Do you really want to delete {{channelDisplayName}}? It will delete all videos uploaded in this channel, ' +
+        'and you will not be able to create another channel with the same name ({{channelName}})!',
+        { channelDisplayName: videoChannel.displayName, channelName: videoChannel.name }
+      ),
+      this.i18n(
+        'Please type the display name of the video channel ({{displayName}}) to confirm',
+        { displayName: videoChannel.displayName }
       ),
-      this.i18n('Please type the name of the video channel to confirm'),
       videoChannel.displayName,
       this.i18n('Delete')
     )
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index a6911e4bf..69748ef37 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -32,7 +32,7 @@
           </span>
 
           <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
-            <span class="icon icon-delete-white"></span>
+            <my-global-icon iconName="delete"></my-global-icon>
             <ng-container i18n>Delete</ng-container>
           </span>
         </div>
@@ -45,7 +45,7 @@
 
         <my-button i18n-label label="Change ownership"
                    className="action-button-change-ownership"
-                   icon="icon-im-with-her"
+                   icon="im-with-her"
                    (click)="changeOwnership($event, video)"
         ></my-button>
       </div>
@@ -53,4 +53,4 @@
   </div>
 </div>
 
-<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
\ No newline at end of file
+<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index a735562f8..39d0cf2f7 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -23,14 +23,11 @@
     .action-button-delete-selection {
       @include peertube-button;
       @include orange-button;
-    }
-
-    .icon.icon-delete-white {
-      @include icon(21px);
+      @include button-with-icon(21px);
 
-      position: relative;
-      top: -2px;
-      background-image: url('../../../assets/images/global/delete-white.svg');
+      my-global-icon {
+        @include apply-svg-color(#fff);
+      }
     }
   }
 }
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
index 7c0df850d..22f127904 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal let-close="close" let-dismiss="dismiss">
   <div class="modal-header">
     <h4 i18n class="modal-title">Change ownership</h4>
-    <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
   </div>
 
   <div class="modal-body" [formGroup]="form">
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
index ea7b0e118..895b19064 100644
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
@@ -3,7 +3,7 @@ import { VideoChannelService } from '@app/shared/video-channel/video-channel.ser
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Subscription } from 'rxjs'
-import { MarkdownService } from '@app/videos/shared'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-video-channel-about',
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 3a60139e1..d398d4f35 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -30,14 +30,16 @@
 
       <footer class="row">
         <a href="https://joinpeertube.org" title="PeerTube website" target="_blank" rel="noopener noreferrer">PeerTube v{{ serverVersion }}{{ serverCommit }}</a>&nbsp;-&nbsp;
-        <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" title="PeerTube license" target="_blank" rel="noopener noreferrer">CopyLeft 2015-2018</a>
+        <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" title="PeerTube license" target="_blank" rel="noopener noreferrer">CopyLeft 2015-2019</a>
       </footer>
     </div>
   </div>
 </div>
 
 <ngx-loading-bar [includeSpinner]="false"></ngx-loading-bar>
+
 <my-confirm></my-confirm>
+
 <p-toast position="bottom-right">
   <ng-template let-message pTemplate="message">
     <div class="notification-block">
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 79ea32ced..eaa822e0f 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -3,12 +3,12 @@ import { catchError, map, mergeMap, share, tap } from 'rxjs/operators'
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
-import { Notifier } from '@app/core/notification'
+import { Notifier } from '@app/core/notification/notifier.service'
 import { OAuthClientLocal, User as UserServerModel, UserRefreshToken } from '../../../../../shared'
 import { User } from '../../../../../shared/models/users'
 import { UserLogin } from '../../../../../shared/models/users/user-login.model'
 import { environment } from '../../../environments/environment'
-import { RestExtractor } from '../../shared/rest'
+import { RestExtractor } from '../../shared/rest/rest-extractor.service'
 import { AuthStatus } from './auth-status.model'
 import { AuthUser } from './auth-user.model'
 import { objectToUrlEncoded } from '@app/shared/misc/utils'
diff --git a/client/src/app/core/confirm/index.ts b/client/src/app/core/confirm/index.ts
index 44aabfc13..aca591e1a 100644
--- a/client/src/app/core/confirm/index.ts
+++ b/client/src/app/core/confirm/index.ts
@@ -1,2 +1 @@
-export * from './confirm.component'
 export * from './confirm.service'
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 7c0d4ac8f..4ef3b1e73 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -8,7 +8,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { LoadingBarRouterModule } from '@ngx-loading-bar/router'
 
 import { AuthService } from './auth'
-import { ConfirmComponent, ConfirmService } from './confirm'
+import { ConfirmService } from './confirm'
 import { throwIfAlreadyLoaded } from './module-import-guard'
 import { LoginGuard, RedirectService, UserRightGuard } from './routing'
 import { ServerService } from './server'
@@ -18,6 +18,7 @@ import { CheatSheetComponent } from './hotkeys'
 import { ToastModule } from 'primeng/toast'
 import { Notifier } from './notification'
 import { MessageService } from 'primeng/api'
+import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
 
 @NgModule({
   imports: [
@@ -37,7 +38,6 @@ import { MessageService } from 'primeng/api'
   ],
 
   declarations: [
-    ConfirmComponent,
     CheatSheetComponent
   ],
 
@@ -47,7 +47,6 @@ import { MessageService } from 'primeng/api'
 
     ToastModule,
 
-    ConfirmComponent,
     CheatSheetComponent
   ],
 
@@ -60,7 +59,8 @@ import { MessageService } from 'primeng/api'
     UserRightGuard,
     RedirectService,
     Notifier,
-    MessageService
+    MessageService,
+    UserNotificationSocket
   ]
 })
 export class CoreModule {
diff --git a/client/src/app/core/notification/index.ts b/client/src/app/core/notification/index.ts
index 8b0cfde5f..3e8d9ea65 100644
--- a/client/src/app/core/notification/index.ts
+++ b/client/src/app/core/notification/index.ts
@@ -1 +1,2 @@
 export * from './notifier.service'
+export * from './user-notification-socket.service'
diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts
new file mode 100644
index 000000000..f367d9ae4
--- /dev/null
+++ b/client/src/app/core/notification/user-notification-socket.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core'
+import { environment } from '../../../environments/environment'
+import { UserNotification as UserNotificationServer } from '../../../../../shared'
+import { Subject } from 'rxjs'
+import * as io from 'socket.io-client'
+import { AuthService } from '../auth'
+
+export type NotificationEvent = 'new' | 'read' | 'read-all'
+
+@Injectable()
+export class UserNotificationSocket {
+  private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>()
+
+  private socket: SocketIOClient.Socket
+
+  constructor (
+    private auth: AuthService
+  ) {}
+
+  dispatch (type: NotificationEvent, notification?: UserNotificationServer) {
+    this.notificationSubject.next({ type, notification })
+  }
+
+  getMyNotificationsSocket () {
+    const socket = this.getSocket()
+
+    socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
+
+    return this.notificationSubject.asObservable()
+  }
+
+  private getSocket () {
+    if (this.socket) return this.socket
+
+    this.socket = io(environment.apiUrl + '/user-notifications', {
+      query: { accessToken: this.auth.getAccessToken() }
+    })
+
+    return this.socket
+  }
+}
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index f33e6f20c..c868ccdcc 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -51,7 +51,10 @@ export class ServerService {
       requiresEmailVerification: false
     },
     transcoding: {
-      enabledResolutions: []
+      enabledResolutions: [],
+      hls: {
+        enabled: false
+      }
     },
     avatar: {
       file: {
@@ -87,6 +90,11 @@ export class ServerService {
           enabled: false
         }
       }
+    },
+    trending: {
+      videos: {
+        intervalDays: 0
+      }
     }
   }
   private videoCategories: Array<VideoConstant<number>> = []
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index c23e0c55d..46a87c79c 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -5,6 +5,6 @@
 <span (click)="doSearch()" class="icon icon-search"></span>
 
 <a class="upload-button" routerLink="/videos/upload">
-  <span class="icon icon-upload"></span>
+  <my-global-icon iconName="upload"></my-global-icon>
   <span i18n class="upload-button-label">Upload</span>
 </a>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 2f9820665..cea415d9b 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -6,6 +6,7 @@
   padding-left: 10px;
   margin-right: 15px;
   padding-right: 40px; // For the search icon
+  font-size: 14px;
 
   &::placeholder {
     color: var(--inputPlaceholderColor);
@@ -40,6 +41,7 @@
 .upload-button {
   @include peertube-button-link;
   @include orange-button;
+  @include button-with-icon(22px, 3px, -1px);
 
   margin-right: 25px;
 
@@ -47,15 +49,6 @@
     margin-right: 0;
   }
 
-  .icon.icon-upload {
-    @include icon(22px);
-
-    background-image: url('../../assets/images/header/upload-white.svg');
-    height: 24px;
-    vertical-align: middle;
-    margin-right: 6px;
-  }
-
   @media screen and (max-width: 600px) {
     margin-right: 10px;
     padding: 0 10px;
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 9b8146624..4efe3fb22 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -55,7 +55,8 @@
 <ng-template #forgotPasswordModal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Forgot your password</h4>
-    <span class="close" aria-hidden="true" (click)="hideForgotPasswordModal()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html
index 2f0b7c669..4ef3f0e89 100644
--- a/client/src/app/menu/avatar-notification.component.html
+++ b/client/src/app/menu/avatar-notification.component.html
@@ -17,7 +17,7 @@
     ></a>
   </div>
 
-  <my-user-notifications [ignoreLoadingBar]="true" [infiniteScroll]="false"></my-user-notifications>
+  <my-user-notifications [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"></my-user-notifications>
 
   <a class="all-notifications" routerLink="/my-account/notifications" i18n>See all your notifications</a>
 </ng-template>
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index c86667469..e785db788 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -3,7 +3,7 @@
 
 /deep/ {
   .popover-notifications.popover {
-    max-width: 400px;
+    max-width: none;
 
     .popover-body {
       padding: 0;
@@ -11,6 +11,7 @@
       font-family: $main-fonts;
       overflow-y: auto;
       max-height: 500px;
+      width: 400px;
       box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
 
       .notifications-header {
@@ -40,7 +41,7 @@
         justify-content: center;
         font-weight: $font-semibold;
         color: var(--mainForegroundColor);
-        height: 30px;
+        padding: 7px 0;
       }
     }
   }
@@ -71,7 +72,7 @@
     justify-content: center;
 
     background-color: var(--mainColor);
-    color: var(--mainBackgroundColor);
+    color: var(#fff);
     font-size: 10px;
     font-weight: $font-semibold;
 
@@ -80,3 +81,11 @@
     height: 15px;
   }
 }
+
+@media screen and (max-width: $mobile-view) {
+  /deep/ {
+    .popover-notifications.popover .popover-body {
+      width: 400px;
+    }
+  }
+}
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index 60e090726..f1af08096 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { User } from '../shared/users/user.model'
 import { UserNotificationService } from '@app/shared/users/user-notification.service'
 import { Subscription } from 'rxjs'
-import { Notifier } from '@app/core'
+import { Notifier, UserNotificationSocket } from '@app/core'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { NavigationEnd, Router } from '@angular/router'
 import { filter } from 'rxjs/operators'
@@ -23,6 +23,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
 
   constructor (
     private userNotificationService: UserNotificationService,
+    private userNotificationSocket: UserNotificationSocket,
     private notifier: Notifier,
     private router: Router
   ) {}
@@ -53,7 +54,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
   }
 
   private subscribeToNotifications () {
-    this.notificationSub = this.userNotificationService.getMyNotificationsSocket()
+    this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket()
                                .subscribe(data => {
                                  if (data.type === 'new') return this.unreadNotifications++
                                  if (data.type === 'read') return this.unreadNotifications--
diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html
index c79609898..a62b33dda 100644
--- a/client/src/app/menu/language-chooser.component.html
+++ b/client/src/app/menu/language-chooser.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Change the language</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
 
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index a4aaadc7f..f30b89413 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -16,7 +16,7 @@ menu {
   height: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
-  overflow: hidden;
+  overflow: auto;
   color: var(--menuForegroundColor);
   display: flex;
   flex-direction: column;
@@ -243,7 +243,7 @@ menu {
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: $mobile-view) {
   .menu-wrapper {
     width: 100% !important;
   }
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index 3a87ea1de..82a5f0f26 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -48,7 +48,7 @@
     </div>
 
     <div *ngIf="isVideo(result)" class="entry video">
-      <my-video-thumbnail [video]="result"></my-video-thumbnail>
+      <my-video-thumbnail [video]="result" [nsfw]="isVideoBlur(result)"></my-video-thumbnail>
 
       <div class="video-info">
         <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', result.uuid]" [attr.title]="result.name">{{ result.name }}</a>
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 3e074621b..6de13d276 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -87,10 +87,10 @@
           text-overflow: ellipsis;
           white-space: nowrap;
           font-size: 14px;
-          color: #585858;
+          color: $grey-foreground-color;
 
           &:hover {
-            color: #303030;
+            color: $grey-foreground-hover-color;
           }
         }
       }
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index 474b72824..c4a4b1fde 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, Notifier } from '@app/core'
+import { AuthService, Notifier, ServerService } from '@app/core'
 import { forkJoin, Subscription } from 'rxjs'
 import { SearchService } from '@app/search/search.service'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
@@ -41,7 +41,8 @@ export class SearchComponent implements OnInit, OnDestroy {
     private metaService: MetaService,
     private notifier: Notifier,
     private searchService: SearchService,
-    private authService: AuthService
+    private authService: AuthService,
+    private serverService: ServerService
   ) { }
 
   ngOnInit () {
@@ -75,6 +76,10 @@ export class SearchComponent implements OnInit, OnDestroy {
     if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
   }
 
+  isVideoBlur (video: Video) {
+    return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
+  }
+
   isVideoChannel (d: VideoChannel | Video): d is VideoChannel {
     return d instanceof VideoChannel
   }
diff --git a/client/src/app/shared/actor/actor.model.ts b/client/src/app/shared/actor/actor.model.ts
index 811afb449..adecec1fc 100644
--- a/client/src/app/shared/actor/actor.model.ts
+++ b/client/src/app/shared/actor/actor.model.ts
@@ -16,7 +16,7 @@ export abstract class Actor implements ActorServer {
 
   avatarUrl: string
 
-  static GET_ACTOR_AVATAR_URL (actor: { avatar: Avatar }) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { path: string } }) {
     const absoluteAPIUrl = getAbsoluteAPIUrl()
 
     if (actor && actor.avatar) return absoluteAPIUrl + actor.avatar.path
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 90651f217..114b1d71f 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -3,7 +3,7 @@
     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
     ngbDropdownToggle role="button"
   >
-    <span *ngIf="!label" class="icon icon-action"></span>
+    <my-global-icon *ngIf="!label" class="more-icon" iconName="more"></my-global-icon>
     <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
   </div>
 
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index a4fcceeee..985b2ca88 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -24,14 +24,11 @@
   }
 
   &:hover, &:active, &:focus {
-    background-color: $grey-color;
+    background-color: $grey-background-color;
   }
 
-  .icon-action {
-    @include icon(21px);
-
-    background-image: url('../../../assets/images/video/more.svg');
-    top: -1px;
+  .more-icon {
+    width: 21px;
   }
 
   &.small {
diff --git a/client/src/app/shared/buttons/button.component.html b/client/src/app/shared/buttons/button.component.html
index 87a8daccf..b6df67102 100644
--- a/client/src/app/shared/buttons/button.component.html
+++ b/client/src/app/shared/buttons/button.component.html
@@ -1,4 +1,4 @@
 <span class="action-button" [ngClass]="className" [title]="getTitle()">
-  <span class="icon" [ngClass]="icon"></span>
+  <my-global-icon [iconName]="icon"></my-global-icon>
   <span class="button-label">{{ label }}</span>
 </span>
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 168102f09..04199a2a9 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -3,41 +3,18 @@
 
 .action-button {
   @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
 
-  font-size: 15px;
   font-weight: $font-semibold;
-  color: #585858;
-  background-color: #E5E5E5;
+  color: $grey-foreground-color;
+  background-color: $grey-background-color;
 
   &:hover {
-    background-color: #EFEFEF;
+    background-color: $grey-background-hover-color;
   }
 
-  .icon {
-    @include icon(21px);
-
-    position: relative;
-    top: -2px;
-
-    &.icon-edit {
-      background-image: url('../../../assets/images/global/edit-grey.svg');
-    }
-
-    &.icon-delete-grey {
-      background-image: url('../../../assets/images/global/delete-grey.svg');
-    }
-
-    &.icon-im-with-her {
-      background-image: url('../../../assets/images/global/im-with-her.svg');
-    }
-
-    &.icon-tick {
-      background-image: url('../../../assets/images/global/tick.svg');
-    }
-
-    &.icon-cross {
-      background-image: url('../../../assets/images/global/cross.svg');
-    }
+  my-global-icon {
+    @include apply-svg-color($grey-foreground-color);
   }
 }
 
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index 1a1162f09..a91e9c7eb 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/icons/global-icon.component'
 
 @Component({
   selector: 'my-button',
@@ -9,7 +10,7 @@ import { Component, Input } from '@angular/core'
 export class ButtonComponent {
   @Input() label = ''
   @Input() className: string = undefined
-  @Input() icon: string = undefined
+  @Input() icon: GlobalIconName = undefined
   @Input() title: string = undefined
 
   getTitle () {
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
index 6c55d8104..4d12a84c0 100644
--- a/client/src/app/shared/buttons/delete-button.component.html
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -1,5 +1,5 @@
 <span class="action-button action-button-delete" [title]="getTitle()" role="button">
-  <span class="icon icon-delete-grey"></span>
+  <my-global-icon iconName="delete"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
   <span class="button-label" i18n *ngIf="!label">Delete</span>
diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html
index cecb780f3..da3addbae 100644
--- a/client/src/app/shared/buttons/edit-button.component.html
+++ b/client/src/app/shared/buttons/edit-button.component.html
@@ -1,5 +1,5 @@
 <a class="action-button action-button-edit" [routerLink]="routerLink" i18n-title title="Edit">
-  <span class="icon icon-edit"></span>
+  <my-global-icon iconName="edit"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
   <span i18n class="button-label" *ngIf="!label">Edit</span>
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html
index 43f0c6190..65df1cd4d 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/shared/confirm/confirm.component.html
@@ -2,7 +2,8 @@
 
   <div class="modal-header">
     <h4 class="modal-title">{{ title }}</h4>
-    <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
   </div>
 
   <div class="modal-body" >
diff --git a/client/src/app/core/confirm/confirm.component.scss b/client/src/app/shared/confirm/confirm.component.scss
index 93dd7926b..93dd7926b 100644
--- a/client/src/app/core/confirm/confirm.component.scss
+++ b/client/src/app/shared/confirm/confirm.component.scss
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
index 5138b7848..63c163da6 100644
--- a/client/src/app/core/confirm/confirm.component.ts
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'
-import { ConfirmService } from './confirm.service'
+import { ConfirmService } from '@app/core/confirm/confirm.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
diff --git a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
index 6e9806611..fcc966b84 100644
--- a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
@@ -10,20 +10,20 @@ export class VideoAbuseValidatorsService {
 
   constructor (private i18n: I18n) {
     this.VIDEO_ABUSE_REASON = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
+      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
         'required': this.i18n('Report reason is required.'),
         'minlength': this.i18n('Report reason must be at least 2 characters long.'),
-        'maxlength': this.i18n('Report reason cannot be more than 300 characters long.')
+        'maxlength': this.i18n('Report reason cannot be more than 3000 characters long.')
       }
     }
 
     this.VIDEO_ABUSE_MODERATION_COMMENT = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
+      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
         'required': this.i18n('Moderation comment is required.'),
         'minlength': this.i18n('Moderation comment must be at least 2 characters long.'),
-        'maxlength': this.i18n('Moderation comment cannot be more than 300 characters long.')
+        'maxlength': this.i18n('Moderation comment cannot be more than 3000 characters long.')
       }
     }
   }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index b99169ed2..e87aca0d4 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -1,10 +1,10 @@
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { MarkdownService } from '@app/videos/shared'
 import { Subject } from 'rxjs'
 import truncate from 'lodash-es/truncate'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-markdown-textarea',
diff --git a/client/src/app/shared/forms/reactive-file.component.ts b/client/src/app/shared/forms/reactive-file.component.ts
index c3986838f..f60c38e8d 100644
--- a/client/src/app/shared/forms/reactive-file.component.ts
+++ b/client/src/app/shared/forms/reactive-file.component.ts
@@ -53,6 +53,17 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
         return
       }
 
+      const extension = '.' + file.name.split('.').pop()
+      if (this.extensions.includes(extension) === false) {
+        const message = this.i18n(
+          'PeerTube cannot handle this kind of file. Accepted extensions are {{extensions}}.',
+          { extensions: this.allowedExtensionsMessage }
+        )
+        this.notifier.error(message)
+
+        return
+      }
+
       this.file = file
 
       this.propagateChange(this.file)
diff --git a/client/src/app/shared/icons/global-icon.component.html b/client/src/app/shared/icons/global-icon.component.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.html
diff --git a/client/src/app/shared/icons/global-icon.component.scss b/client/src/app/shared/icons/global-icon.component.scss
new file mode 100644
index 000000000..6805fb6f7
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.scss
@@ -0,0 +1,4 @@
+/deep/ svg {
+  width: inherit;
+  height: inherit;
+}
diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/icons/global-icon.component.ts
new file mode 100644
index 000000000..e8ada0324
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.ts
@@ -0,0 +1,48 @@
+import { Component, ElementRef, Input, OnInit } from '@angular/core'
+
+const icons = {
+  'add': require('../../../assets/images/global/add.html'),
+  'syndication': require('../../../assets/images/global/syndication.html'),
+  'help': require('../../../assets/images/global/help.html'),
+  'sparkle': require('../../../assets/images/global/sparkle.html'),
+  'alert': require('../../../assets/images/global/alert.html'),
+  'cloud-error': require('../../../assets/images/global/cloud-error.html'),
+  'user-add': require('../../../assets/images/global/user-add.html'),
+  'no': require('../../../assets/images/global/no.html'),
+  'cloud-download': require('../../../assets/images/global/cloud-download.html'),
+  'undo': require('../../../assets/images/global/undo.html'),
+  'circle-tick': require('../../../assets/images/global/circle-tick.html'),
+  'cog': require('../../../assets/images/global/cog.html'),
+  'download': require('../../../assets/images/global/download.html'),
+  'edit': require('../../../assets/images/global/edit.html'),
+  'im-with-her': require('../../../assets/images/global/im-with-her.html'),
+  'delete': require('../../../assets/images/global/delete.html'),
+  'cross': require('../../../assets/images/global/cross.html'),
+  'validate': require('../../../assets/images/global/validate.html'),
+  'tick': require('../../../assets/images/global/tick.html'),
+  'dislike': require('../../../assets/images/video/dislike.html'),
+  'heart': require('../../../assets/images/video/heart.html'),
+  'like': require('../../../assets/images/video/like.html'),
+  'more': require('../../../assets/images/video/more.html'),
+  'share': require('../../../assets/images/video/share.html'),
+  'upload': require('../../../assets/images/video/upload.html')
+}
+
+export type GlobalIconName = keyof typeof icons
+
+@Component({
+  selector: 'my-global-icon',
+  template: '',
+  styleUrls: [ './global-icon.component.scss' ]
+})
+export class GlobalIconComponent implements OnInit {
+  @Input() iconName: GlobalIconName
+
+  constructor (private el: ElementRef) {}
+
+  ngOnInit () {
+    const nativeElement = this.el.nativeElement
+
+    nativeElement.innerHTML = icons[this.iconName]
+  }
+}
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index 08a2fc367..444425c9f 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -25,4 +25,6 @@
   [autoClose]="true"
   (onHidden)="onPopoverHidden()"
   (onShown)="onPopoverShown()"
-></span>
+>
+  <my-global-icon iconName="help"></my-global-icon>
+</span>
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 047e53fab..3898f3cda 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -2,13 +2,17 @@
 @import '_mixins';
 
 .help-tooltip-button {
-  @include icon(17px);
-
-  position: relative;
-  top: -2px;
-  background-image: url('../../../assets/images/global/help.svg');
+  cursor: pointer;
   border: none;
-  margin: 5px;
+
+  my-global-icon {
+    width: 17px;
+    position: relative;
+    top: -2px;
+    margin: 5px;
+
+    @include apply-svg-color(var(--mainForegroundColor))
+  }
 }
 
 /deep/ {
@@ -16,16 +20,21 @@
     max-width: 300px;
 
     .popover-body {
+      font-family: $main-fonts;
       text-align: left;
       padding: 10px;
       font-size: 13px;
-      font-family: $main-fonts;
-      background-color: #fff;
-      color: #000;
+      background-color: var(--mainBackgroundColor);
+      color: var(--mainForegroundColor);
       box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
 
+      p {
+        margin-bottom: 0;
+      }
+
       ul {
         padding-left: 20px;
+        margin-bottom: 0;
       }
     }
   }
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
index ba0452e77..f3426f70f 100644
--- a/client/src/app/shared/misc/help.component.ts
+++ b/client/src/app/shared/misc/help.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core'
-import { MarkdownService } from '@app/videos/shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-help',
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 78e8e9682..7cc6055c2 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -102,12 +102,18 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
   return fd
 }
 
-function lineFeedToHtml (obj: any, keyToNormalize: string) {
+function objectLineFeedToHtml (obj: any, keyToNormalize: string) {
   return immutableAssign(obj, {
-    [keyToNormalize]: obj[keyToNormalize].replace(/\r?\n|\r/g, '<br />')
+    [keyToNormalize]: lineFeedToHtml(obj[keyToNormalize])
   })
 }
 
+function lineFeedToHtml (text: string) {
+  if (!text) return text
+
+  return text.replace(/\r?\n|\r/g, '<br />')
+}
+
 function removeElementFromArray <T> (arr: T[], elem: T) {
   const index = arr.indexOf(elem)
   if (index !== -1) arr.splice(index, 1)
@@ -131,6 +137,7 @@ function scrollToTop () {
 export {
   sortBy,
   durationToString,
+  lineFeedToHtml,
   objectToUrlEncoded,
   getParameterByName,
   populateAsyncUserVideoChannels,
@@ -138,7 +145,7 @@ export {
   dateToHuman,
   immutableAssign,
   objectToFormData,
-  lineFeedToHtml,
+  objectLineFeedToHtml,
   removeElementFromArray,
   scrollToTop
 }
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index fa5cb7404..f38ea543d 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Ban</h4>
-    <span class="close" aria-hidden="true" (click)="hideBanUserModal()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
@@ -19,7 +20,7 @@
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hideBanUserModal()">Cancel</span>
+        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
 
         <input
           type="submit" i18n-value value="Ban this user" class="action-button-submit"
@@ -29,4 +30,4 @@
     </form>
   </div>
 
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts
index f755ba0e8..942765301 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -42,7 +42,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
     this.openedModal = this.modalService.open(this.modal)
   }
 
-  hideBanUserModal () {
+  hide () {
     this.usersToBan = undefined
     this.openedModal.close()
   }
@@ -60,7 +60,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
           this.notifier.success(message)
 
           this.userBanned.emit(this.usersToBan)
-          this.hideBanUserModal()
+          this.hide()
         },
 
           err => this.notifier.error(err.message)
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
new file mode 100644
index 000000000..d49df9b6d
--- /dev/null
+++ b/client/src/app/shared/renderer/html-renderer.service.ts
@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core'
+import { LinkifierService } from '@app/shared/renderer/linkifier.service'
+import * as sanitizeHtml from 'sanitize-html'
+
+@Injectable()
+export class HtmlRendererService {
+
+  constructor (private linkifier: LinkifierService) {
+
+  }
+
+  toSafeHtml (text: string) {
+    // Convert possible markdown to html
+    const html = this.linkifier.linkify(text)
+
+    return sanitizeHtml(html, {
+      allowedTags: [ 'a', 'p', 'span', 'br' ],
+      allowedSchemes: [ 'http', 'https' ],
+      allowedAttributes: {
+        'a': [ 'href', 'class', 'target' ]
+      },
+      transformTags: {
+        a: (tagName, attribs) => {
+          return {
+            tagName,
+            attribs: Object.assign(attribs, {
+              target: '_blank',
+              rel: 'noopener noreferrer'
+            })
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/client/src/app/shared/renderer/index.ts b/client/src/app/shared/renderer/index.ts
new file mode 100644
index 000000000..39202b385
--- /dev/null
+++ b/client/src/app/shared/renderer/index.ts
@@ -0,0 +1,3 @@
+export * from './html-renderer.service'
+export * from './linkifier.service'
+export * from './markdown.service'
diff --git a/client/src/app/videos/+video-watch/comment/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts
index 2529c9eaf..2529c9eaf 100644
--- a/client/src/app/videos/+video-watch/comment/linkifier.service.ts
+++ b/client/src/app/shared/renderer/linkifier.service.ts
diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 07017eca5..07017eca5 100644
--- a/client/src/app/videos/shared/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index d1320aeec..6f8625c7e 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router'
 import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
 import { HelpComponent } from '@app/shared/misc/help.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
-import { MarkdownService } from '@app/videos/shared'
 
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
@@ -34,10 +33,10 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import {
   CustomConfigValidatorsService,
+  InstanceValidatorsService,
   LoginValidatorsService,
   ReactiveFileComponent,
   ResetPasswordValidatorsService,
-  InstanceValidatorsService,
   TextareaAutoResizeDirective,
   UserValidatorsService,
   VideoAbuseValidatorsService,
@@ -67,6 +66,9 @@ import { UserHistoryService } from '@app/shared/users/user-history.service'
 import { UserNotificationService } from '@app/shared/users/user-notification.service'
 import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component'
 import { InstanceService } from '@app/shared/instance/instance.service'
+import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
+import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
+import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
 
 @NgModule({
   imports: [
@@ -110,7 +112,9 @@ import { InstanceService } from '@app/shared/instance/instance.service'
     UserBanModalComponent,
     UserModerationDropdownComponent,
     TopMenuDropdownComponent,
-    UserNotificationsComponent
+    UserNotificationsComponent,
+    ConfirmComponent,
+    GlobalIconComponent
   ],
 
   exports: [
@@ -151,6 +155,8 @@ import { InstanceService } from '@app/shared/instance/instance.service'
     UserModerationDropdownComponent,
     TopMenuDropdownComponent,
     UserNotificationsComponent,
+    ConfirmComponent,
+    GlobalIconComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,
@@ -167,7 +173,6 @@ import { InstanceService } from '@app/shared/instance/instance.service'
     UserService,
     VideoService,
     AccountService,
-    MarkdownService,
     VideoChannelService,
     VideoCaptionService,
     VideoImportService,
@@ -192,6 +197,10 @@ import { InstanceService } from '@app/shared/instance/instance.service'
     UserHistoryService,
     InstanceService,
 
+    MarkdownService,
+    LinkifierService,
+    HtmlRendererService,
+
     I18nPrimengCalendarService,
     ScreenService,
 
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
index 5ff816fb8..125d2120c 100644
--- a/client/src/app/shared/users/user-notification.model.ts
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -1,4 +1,5 @@
-import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '../../../../../shared'
+import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared'
+import { Actor } from '@app/shared/actor/actor.model'
 
 export class UserNotification implements UserNotificationServer {
   id: number
@@ -6,10 +7,7 @@ export class UserNotification implements UserNotificationServer {
   read: boolean
 
   video?: VideoInfo & {
-    channel: {
-      id: number
-      displayName: string
-    }
+    channel: ActorInfo & { avatarUrl?: string }
   }
 
   videoImport?: {
@@ -23,10 +21,7 @@ export class UserNotification implements UserNotificationServer {
   comment?: {
     id: number
     threadId: number
-    account: {
-      id: number
-      displayName: string
-    }
+    account: ActorInfo & { avatarUrl?: string }
     video: VideoInfo
   }
 
@@ -40,18 +35,11 @@ export class UserNotification implements UserNotificationServer {
     video: VideoInfo
   }
 
-  account?: {
-    id: number
-    displayName: string
-    name: string
-  }
+  account?: ActorInfo & { avatarUrl?: string }
 
   actorFollow?: {
     id: number
-    follower: {
-      name: string
-      displayName: string
-    }
+    follower: ActorInfo & { avatarUrl?: string }
     following: {
       type: 'account' | 'channel'
       name: string
@@ -76,12 +64,22 @@ export class UserNotification implements UserNotificationServer {
     this.read = hash.read
 
     this.video = hash.video
+    if (this.video) this.setAvatarUrl(this.video.channel)
+
     this.videoImport = hash.videoImport
+
     this.comment = hash.comment
+    if (this.comment) this.setAvatarUrl(this.comment.account)
+
     this.videoAbuse = hash.videoAbuse
+
     this.videoBlacklist = hash.videoBlacklist
+
     this.account = hash.account
+    if (this.account) this.setAvatarUrl(this.account)
+
     this.actorFollow = hash.actorFollow
+    if (this.actorFollow) this.setAvatarUrl(this.actorFollow.follower)
 
     this.createdAt = hash.createdAt
     this.updatedAt = hash.updatedAt
@@ -97,6 +95,7 @@ export class UserNotification implements UserNotificationServer {
 
       case UserNotificationType.NEW_COMMENT_ON_MY_VIDEO:
       case UserNotificationType.COMMENT_MENTION:
+        this.accountUrl = this.buildAccountUrl(this.comment.account)
         this.commentUrl = [ this.buildVideoUrl(this.comment.video), { threadId: this.comment.threadId } ]
         break
 
@@ -138,8 +137,8 @@ export class UserNotification implements UserNotificationServer {
     return '/videos/watch/' + video.uuid
   }
 
-  private buildAccountUrl (account: { name: string }) {
-    return '/accounts/' + account.name
+  private buildAccountUrl (account: { name: string, host: string }) {
+    return '/accounts/' + Actor.CREATE_BY_STRING(account.name, account.host)
   }
 
   private buildVideoImportUrl () {
@@ -150,4 +149,7 @@ export class UserNotification implements UserNotificationServer {
     return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName
   }
 
+  private setAvatarUrl (actor: { avatarUrl?: string, avatar?: { path: string } }) {
+    actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor)
+  }
 }
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
index 2dfee8060..f8a30955d 100644
--- a/client/src/app/shared/users/user-notification.service.ts
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -1,30 +1,26 @@
 import { Injectable } from '@angular/core'
 import { HttpClient, HttpParams } from '@angular/common/http'
-import { RestExtractor, RestService } from '@app/shared/rest'
+import { RestExtractor, RestService } from '../rest'
 import { catchError, map, tap } from 'rxjs/operators'
 import { environment } from '../../../environments/environment'
 import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '../../../../../shared'
-import { UserNotification } from '@app/shared/users/user-notification.model'
-import { Subject } from 'rxjs'
-import * as io from 'socket.io-client'
-import { AuthService } from '@app/core'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { User } from '@app/shared'
+import { UserNotification } from './user-notification.model'
+import { AuthService } from '../../core'
+import { ComponentPagination } from '../rest/component-pagination.model'
+import { User } from '..'
+import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
 
 @Injectable()
 export class UserNotificationService {
   static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications'
   static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings'
 
-  private notificationSubject = new Subject<{ type: 'new' | 'read' | 'read-all', notification?: UserNotification }>()
-
-  private socket: SocketIOClient.Socket
-
   constructor (
     private auth: AuthService,
     private authHttp: HttpClient,
     private restExtractor: RestExtractor,
-    private restService: RestService
+    private restService: RestService,
+    private userNotificationSocket: UserNotificationSocket
   ) {}
 
   listMyNotifications (pagination: ComponentPagination, unread?: boolean, ignoreLoadingBar = false) {
@@ -48,16 +44,6 @@ export class UserNotificationService {
       .pipe(map(n => n.total))
   }
 
-  getMyNotificationsSocket () {
-    const socket = this.getSocket()
-
-    socket.on('new-notification', (n: UserNotificationServer) => {
-      this.notificationSubject.next({ type: 'new', notification: new UserNotification(n) })
-    })
-
-    return this.notificationSubject.asObservable()
-  }
-
   markAsRead (notification: UserNotification) {
     const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read'
 
@@ -67,7 +53,7 @@ export class UserNotificationService {
     return this.authHttp.post(url, body, { headers })
                .pipe(
                  map(this.restExtractor.extractDataBool),
-                 tap(() => this.notificationSubject.next({ type: 'read' })),
+                 tap(() => this.userNotificationSocket.dispatch('read')),
                  catchError(res => this.restExtractor.handleError(res))
                )
   }
@@ -79,7 +65,7 @@ export class UserNotificationService {
     return this.authHttp.post(url, {}, { headers })
                .pipe(
                  map(this.restExtractor.extractDataBool),
-                 tap(() => this.notificationSubject.next({ type: 'read-all' })),
+                 tap(() => this.userNotificationSocket.dispatch('read-all')),
                  catchError(res => this.restExtractor.handleError(res))
                )
   }
@@ -94,16 +80,6 @@ export class UserNotificationService {
                )
   }
 
-  private getSocket () {
-    if (this.socket) return this.socket
-
-    this.socket = io(environment.apiUrl + '/user-notifications', {
-      query: { accessToken: this.auth.getAccessToken() }
-    })
-
-    return this.socket
-  }
-
   private formatNotification (notification: UserNotificationServer) {
     return new UserNotification(notification)
   }
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index 86379d941..0d69e0feb 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -1,61 +1,101 @@
 <div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
 
 <div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
-  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }">
+  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
 
-    <div [ngSwitch]="notification.type">
+    <ng-container [ngSwitch]="notification.type">
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
-        {{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
+
+        <div class="message">
+          {{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
-        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
+        <my-global-icon iconName="undo"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
-        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
+        <my-global-icon iconName="no"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+        <my-global-icon iconName="alert"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
-        {{ notification.comment.account.displayName }} commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
-        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+        <my-global-icon iconName="sparkle"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+        <my-global-icon iconName="cloud-download"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+        <my-global-icon iconName="cloud-error"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
-        User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+        <my-global-icon iconName="user-add"></my-global-icon>
+
+        <div class="message">
+          User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
 
-        <ng-container *ngIf="notification.actorFollow.following.type === 'channel'">
-          your channel {{ notification.actorFollow.following.displayName }}
-        </ng-container>
-        <ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
+
+          <ng-container *ngIf="notification.actorFollow.following.type === 'channel'">your channel {{ notification.actorFollow.following.displayName }}</ng-container>
+          <ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
-        {{ notification.comment.account.displayName }} mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
+        </div>
       </ng-container>
-    </div>
+    </ng-container>
 
-    <div i18n title="Mark as read" class="mark-as-read">
-      <div class="glyphicon glyphicon-ok" (click)="markAsRead(notification)"></div>
-    </div>
+    <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
   </div>
 </div>
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 0493b10d9..315d504c9 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -1,30 +1,51 @@
+@import '_variables';
+@import '_mixins';
+
+.no-notification {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+}
+
 .notification {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   font-size: inherit;
-  padding: 15px 10px;
+  padding: 15px 5px 15px 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.10);
 
-  .mark-as-read {
-    min-width: 35px;
+  &.unread {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  my-global-icon {
+    width: 24px;
+    margin-right: 11px;
+    margin-left: 3px;
 
-    .glyphicon {
-      display: none;
-      cursor: pointer;
-      color: rgba(20, 20, 20, 0.5)
-    }
+    @include apply-svg-color(#333);
   }
 
-  &.unread {
-    background-color: rgba(0, 0, 0, 0.05);
+  .avatar {
+    @include avatar(30px);
 
-    &:hover .mark-as-read .glyphicon {
-      display: block;
+    margin-right: 10px;
+  }
+
+  .message {
+    flex-grow: 1;
 
-      &:hover {
-        color: rgba(20, 20, 20, 0.8);
-      }
+    a {
+      font-weight: $font-semibold;
     }
   }
+
+  .from-date {
+    font-size: 0.85em;
+    color: $grey-foreground-color;
+    padding-left: 5px;
+    min-width: 70px;
+    text-align: right;
+  }
 }
diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts
index 682116226..b5f9fd399 100644
--- a/client/src/app/shared/users/user-notifications.component.ts
+++ b/client/src/app/shared/users/user-notifications.component.ts
@@ -13,17 +13,14 @@ import { UserNotification } from '@app/shared/users/user-notification.model'
 export class UserNotificationsComponent implements OnInit {
   @Input() ignoreLoadingBar = false
   @Input() infiniteScroll = true
+  @Input() itemsPerPage = 20
 
   notifications: UserNotification[] = []
 
   // So we can access it in the template
   UserNotificationType = UserNotificationType
 
-  componentPagination: ComponentPagination = {
-    currentPage: 1,
-    itemsPerPage: 10,
-    totalItems: null
-  }
+  componentPagination: ComponentPagination
 
   constructor (
     private userNotificationService: UserNotificationService,
@@ -31,6 +28,12 @@ export class UserNotificationsComponent implements OnInit {
   ) { }
 
   ngOnInit () {
+    this.componentPagination = {
+      currentPage: 1,
+      itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable
+      totalItems: null
+    }
+
     this.loadMoreNotifications()
   }
 
@@ -57,6 +60,8 @@ export class UserNotificationsComponent implements OnInit {
   }
 
   markAsRead (notification: UserNotification) {
+    if (notification.read) return
+
     this.userNotificationService.markAsRead(notification)
         .subscribe(
           () => {
diff --git a/client/src/app/shared/video-abuse/video-abuse.service.ts b/client/src/app/shared/video-abuse/video-abuse.service.ts
index 61b7e1b98..b0b59ea0c 100644
--- a/client/src/app/shared/video-abuse/video-abuse.service.ts
+++ b/client/src/app/shared/video-abuse/video-abuse.service.ts
@@ -32,9 +32,7 @@ export class VideoAbuseService {
 
   reportVideo (id: number, reason: string) {
     const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + id + '/abuse'
-    const body = {
-      reason
-    }
+    const body = { reason }
 
     return this.authHttp.post(url, body)
                .pipe(
diff --git a/client/src/app/shared/video-blacklist/video-blacklist.service.ts b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
index 7d39fd4f2..94e46d7c2 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -36,8 +36,11 @@ export class VideoBlacklistService {
                )
   }
 
-  blacklistVideo (videoId: number, reason?: string) {
-    const body = reason ? { reason } : {}
+  blacklistVideo (videoId: number, reason: string, unfederate: boolean) {
+    const body = {
+      unfederate,
+      reason
+    }
 
     return this.authHttp.post(VideoBlacklistService.BASE_VIDEOS_URL + videoId + '/blacklist', body)
                .pipe(
diff --git a/client/src/app/shared/video-import/video-import.service.ts b/client/src/app/shared/video-import/video-import.service.ts
index 11a7694c8..7ae13154d 100644
--- a/client/src/app/shared/video-import/video-import.service.ts
+++ b/client/src/app/shared/video-import/video-import.service.ts
@@ -82,6 +82,7 @@ export class VideoImportService {
       nsfw: video.nsfw,
       waitTranscoding: video.waitTranscoding,
       commentsEnabled: video.commentsEnabled,
+      downloadEnabled: video.downloadEnabled,
       thumbnailfile: video.thumbnailfile,
       previewfile: video.previewfile,
       scheduleUpdate,
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 29492351b..1f97bc389 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -1,8 +1,11 @@
 <div [ngClass]="{ 'margin-content': marginContent }">
   <div class="videos-header">
     <div *ngIf="titlePage" class="title-page title-page-single">
-      {{ titlePage }}
+      <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
+        {{ titlePage }}
+      </div>
     </div>
+
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
 
     <div class="moderation-block" *ngIf="displayModerationBlock">
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 9fb3fd4d6..292ede698 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -19,8 +19,8 @@
 
   my-feed {
     display: inline-block;
-    position: relative;
     top: 1px;
+    min-width: 60px;
   }
 
   .moderation-block {
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index d234c8bfa..b0633be4a 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -39,6 +39,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   ownerDisplayType: OwnerDisplayType = 'account'
   firstLoadedPage: number
   displayModerationBlock = false
+  titleTooltip: string
 
   protected baseVideoWidth = 215
   protected baseVideoHeight = 205
diff --git a/client/src/app/shared/video/feed.component.html b/client/src/app/shared/video/feed.component.html
index 16116ba88..f7624ec01 100644
--- a/client/src/app/shared/video/feed.component.html
+++ b/client/src/app/shared/video/feed.component.html
@@ -1,10 +1,11 @@
 <div class="video-feed">
-  <span
+  <my-global-icon
     *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
-    class="icon icon-syndication" role="button"
-  ></span>
+    class="icon-syndication" role="button" iconName="syndication"
+  >
+  </my-global-icon>
 
   <ng-template #feedsList>
     <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
   </ng-template>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
index 385764be0..ed1dc17d3 100644
--- a/client/src/app/shared/video/feed.component.scss
+++ b/client/src/app/shared/video/feed.component.scss
@@ -1,3 +1,4 @@
+@import '_variables';
 @import '_mixins';
 
 .video-feed {
@@ -6,14 +7,12 @@
     display: block;
   }
 
-  .icon {
-    @include icon(12px);
+  my-global-icon {
+    cursor: pointer;
+    width: 12px;
+    position: relative;
+    top: -2px;
 
-    &.icon-syndication {
-      position: relative;
-      top: -2px;
-      background-color: var(--mainForegroundColor);
-      mask-image: url('../../../assets/images/global/syndication.svg');
-    }
+    @include apply-svg-color(var(--mainForegroundColor))
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index fa4ca7f93..388357343 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -3,6 +3,8 @@ import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoStreamingPlaylist } from '../../../../../shared/models/videos/video-streaming-playlist.model'
+import { VideoStreamingPlaylistType } from '../../../../../shared/models/videos/video-streaming-playlist.type'
 
 export class VideoDetails extends Video implements VideoDetailsServerModel {
   descriptionPath: string
@@ -12,6 +14,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   files: VideoFile[]
   account: Account
   commentsEnabled: boolean
+  downloadEnabled: boolean
 
   waitTranscoding: boolean
   state: VideoConstant<VideoState>
@@ -19,6 +22,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   likesPercent: number
   dislikesPercent: number
 
+  trackerUrls: string[]
+
+  streamingPlaylists: VideoStreamingPlaylist[]
+
   constructor (hash: VideoDetailsServerModel, translations = {}) {
     super(hash, translations)
 
@@ -29,6 +36,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.tags = hash.tags
     this.support = hash.support
     this.commentsEnabled = hash.commentsEnabled
+    this.downloadEnabled = hash.downloadEnabled
+
+    this.trackerUrls = hash.trackerUrls
+    this.streamingPlaylists = hash.streamingPlaylists
 
     this.buildLikeAndDislikePercents()
   }
@@ -53,4 +64,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
     this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
   }
+
+  getHlsPlaylist () {
+    return this.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+  }
 }
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index 9078bb5d2..c5d5bb406 100644
--- a/client/src/app/shared/video/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -14,6 +14,7 @@ export class VideoEdit implements VideoUpdate {
   tags: string[]
   nsfw: boolean
   commentsEnabled: boolean
+  downloadEnabled: boolean
   waitTranscoding: boolean
   channelId: number
   privacy: VideoPrivacy
@@ -27,7 +28,15 @@ export class VideoEdit implements VideoUpdate {
   scheduleUpdate?: VideoScheduleUpdate
   originallyPublishedAt?: Date | string
 
-  constructor (video?: Video & { tags: string[], commentsEnabled: boolean, support: string, thumbnailUrl: string, previewUrl: string }) {
+  constructor (
+    video?: Video & {
+      tags: string[],
+      commentsEnabled: boolean,
+      downloadEnabled: boolean,
+      support: string,
+      thumbnailUrl: string,
+      previewUrl: string
+    }) {
     if (video) {
       this.id = video.id
       this.uuid = video.uuid
@@ -39,6 +48,7 @@ export class VideoEdit implements VideoUpdate {
       this.tags = video.tags
       this.nsfw = video.nsfw
       this.commentsEnabled = video.commentsEnabled
+      this.downloadEnabled = video.downloadEnabled
       this.waitTranscoding = video.waitTranscoding
       this.channelId = video.channel.id
       this.privacy = video.privacy.id
@@ -88,6 +98,7 @@ export class VideoEdit implements VideoUpdate {
       tags: this.tags,
       nsfw: this.nsfw,
       commentsEnabled: this.commentsEnabled,
+      downloadEnabled: this.downloadEnabled,
       waitTranscoding: this.waitTranscoding,
       channelId: this.channelId,
       privacy: this.privacy,
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 895879adc..f44bdf9a9 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -50,10 +50,10 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 13px;
-      color: #585858;
+      color: $grey-foreground-color;
 
       &:hover {
-        color: #303030;
+        color: $grey-foreground-hover-color;
       }
     }
   }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index c9b052951..460c09258 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -54,7 +54,7 @@ export class Video implements VideoServerModel {
     displayName: string
     url: string
     host: string
-    avatar: Avatar
+    avatar?: Avatar
   }
 
   channel: {
@@ -64,7 +64,7 @@ export class Video implements VideoServerModel {
     displayName: string
     url: string
     host: string
-    avatar: Avatar
+    avatar?: Avatar
   }
 
   userHistory?: {
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 5d258891f..960846e21 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -96,6 +96,7 @@ export class VideoService implements VideosProvider {
       nsfw: video.nsfw,
       waitTranscoding: video.waitTranscoding,
       commentsEnabled: video.commentsEnabled,
+      downloadEnabled: video.downloadEnabled,
       thumbnailfile: video.thumbnailfile,
       previewfile: video.previewfile,
       scheduleUpdate,
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
index 30aefdbfc..19043eee6 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -3,7 +3,7 @@
 
     <div class="modal-header">
       <h4 i18n class="modal-title">Add caption</h4>
-      <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+      <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
     </div>
 
     <div class="modal-body">
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 23a71a068..2fb540170 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -135,11 +135,6 @@
             ></my-peertube-checkbox>
 
             <my-peertube-checkbox
-              inputName="commentsEnabled" formControlName="commentsEnabled"
-              i18n-labelText labelText="Enable video comments"
-            ></my-peertube-checkbox>
-
-            <my-peertube-checkbox
               *ngIf="waitTranscodingEnabled"
               inputName="waitTranscoding" formControlName="waitTranscoding"
               i18n-labelText labelText="Wait transcoding before publishing the video"
@@ -157,7 +152,7 @@
 
           <div class="captions-header">
             <a (click)="openAddCaptionModal()" class="create-caption">
-              <span class="icon icon-add"></span>
+              <my-global-icon iconName="add"></my-global-icon>
               <ng-container i18n>Add another caption</ng-container>
             </a>
           </div>
@@ -230,6 +225,16 @@
               {{ formErrors.support }}
             </div>
           </div>
+
+          <my-peertube-checkbox
+            inputName="commentsEnabled" formControlName="commentsEnabled"
+            i18n-labelText labelText="Enable video comments"
+          ></my-peertube-checkbox>
+
+          <my-peertube-checkbox
+            inputName="downloadEnabled" formControlName="downloadEnabled"
+            i18n-labelText labelText="Enable download"
+          ></my-peertube-checkbox>
         </div>
       </ng-template>
     </ngb-tab>
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 25db8e8ed..bb775cb0a 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -23,10 +23,6 @@ my-peertube-checkbox {
     display: block;
   }
 
-  input, select {
-    font-size: 15px
-  }
-
   .label-tags + span {
     font-size: 15px;
   }
@@ -42,7 +38,7 @@ my-peertube-checkbox {
     text-align: right;
 
     .create-caption {
-      @include create-button('../../../../assets/images/global/add.svg');
+      @include create-button;
     }
   }
 
@@ -100,13 +96,14 @@ my-peertube-checkbox {
     display: inline-block;
     margin-right: 25px;
 
-    color: #585858;
+    color: $grey-foreground-color;
     font-size: 15px;
   }
 
   .submit-button {
     @include peertube-button;
     @include orange-button;
+    @include button-with-icon(20px, 1px);
 
     display: inline-block;
 
@@ -119,16 +116,6 @@ my-peertube-checkbox {
       color: inherit;
       font-weight: $font-semibold;
     }
-
-    .icon.icon-validate {
-      @include icon(20px);
-
-      cursor: inherit;
-      position: relative;
-      top: -1px;
-      margin-right: 4px;
-      background-image: url('../../../../assets/images/global/validate.svg');
-    }
   }
 }
 
@@ -176,10 +163,10 @@ p-calendar {
   }
 
   tag {
-    background-color: var(--inputColor) !important;
+    background-color: $grey-background-color !important;
+    color: #000 !important;
     border-radius: 3px !important;
     font-size: 15px !important;
-    color: var(--mainForegroundColor) !important;
     height: 30px !important;
     line-height: 30px !important;
     margin: 0 5px 0 0 !important;
@@ -202,7 +189,10 @@ p-calendar {
       top: -1px;
       height: auto !important;
       vertical-align: middle !important;
-      fill: #585858 !important;
+
+      path  {
+        fill: $grey-foreground-color !important;
+      }
     }
 
     &:hover {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
index d02f18ee9..836452948 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
@@ -82,6 +82,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     const defaultValues: any = {
       nsfw: 'false',
       commentsEnabled: 'true',
+      downloadEnabled: 'true',
       waitTranscoding: 'true',
       tags: []
     }
@@ -91,6 +92,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
       channelId: this.videoValidatorsService.VIDEO_CHANNEL,
       nsfw: null,
       commentsEnabled: null,
+      downloadEnabled: null,
       waitTranscoding: null,
       category: this.videoValidatorsService.VIDEO_CATEGORY,
       licence: this.videoValidatorsService.VIDEO_LICENCE,
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
index 11a81ad66..28eb143c9 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="!hasImportedVideo" class="upload-video-container">
-  <div class="import-video-torrent">
-    <div class="icon icon-upload"></div>
+  <div class="first-step-block">
+    <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
 
     <div class="button-file">
       <span i18n>Select the torrent to import</span>
@@ -66,7 +66,7 @@
        (click)="updateSecondStep()"
        [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
     >
-      <span class="icon icon-validate"></span>
+      <my-global-icon iconName="validate"></my-global-icon>
       <input type="button" i18n-value value="Update" />
     </div>
   </div>
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 00626cd7b..6d59ed834 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
@@ -1,45 +1,7 @@
 @import 'variables';
 @import 'mixins';
 
-$width-size: 190px;
-
-.peertube-select-container {
-  @include peertube-select-container($width-size);
-}
-
-.alert.alert-danger {
-  text-align: center;
-
-  & > div {
-    font-weight: $font-semibold;
-  }
-}
-
-.import-video-torrent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .icon.icon-upload {
-    @include icon(90px);
-    margin-bottom: 25px;
-    cursor: default;
-
-    background-image: url('../../../../assets/images/video/upload.svg');
-  }
-
-  .button-file {
-    @include peertube-button-file(auto);
-
-    min-width: 190px;
-  }
-
-  .button-file-extension {
-    display: block;
-    font-size: 12px;
-    margin-top: 5px;
-  }
-
+.first-step-block {
   .torrent-or-magnet {
     margin: 10px 0;
   }
@@ -47,19 +9,6 @@ $width-size: 190px;
   .form-group-magnet-uri {
     margin-bottom: 40px;
   }
-
-  input[type=text] {
-    @include peertube-input-text($width-size);
-    display: block;
-  }
-
-  input[type=button] {
-    @include peertube-button;
-    @include orange-button;
-
-    width: $width-size;
-    margin-top: 30px;
-  }
 }
 
 
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 63db06919..c12a1d653 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
@@ -18,7 +18,8 @@ import { scrollToTop } from '@app/shared/misc/utils'
   templateUrl: './video-import-torrent.component.html',
   styleUrls: [
     '../shared/video-edit.component.scss',
-    './video-import-torrent.component.scss'
+    './video-import-torrent.component.scss',
+    './video-send.scss'
   ]
 })
 export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
@@ -78,6 +79,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
       privacy: this.firstStepPrivacyId,
       waitTranscoding: false,
       commentsEnabled: true,
+      downloadEnabled: true,
       channelId: this.firstStepChannelId
     }
 
@@ -92,6 +94,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
 
         this.video = new VideoEdit(Object.assign(res.video, {
           commentsEnabled: videoUpdate.commentsEnabled,
+          downloadEnabled: videoUpdate.downloadEnabled,
           support: null,
           thumbnailUrl: null,
           previewUrl: null
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
index 533446672..3550c3585 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="!hasImportedVideo" class="upload-video-container">
-  <div class="import-video-url">
-    <div class="icon icon-upload"></div>
+  <div class="first-step-block">
+    <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
 
     <div class="form-group">
       <label i18n for="targetUrl">URL</label>
@@ -59,7 +59,7 @@
        (click)="updateSecondStep()"
        [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
     >
-      <span class="icon icon-validate"></span>
+      <my-global-icon iconName="validate"></my-global-icon>
       <input type="button" i18n-value value="Update" />
     </div>
   </div>
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 a1810b7a0..d11685916 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
@@ -18,7 +18,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
   templateUrl: './video-import-url.component.html',
   styleUrls: [
     '../shared/video-edit.component.scss',
-    './video-import-url.component.scss'
+    './video-send.scss'
   ]
 })
 export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate {
@@ -70,6 +70,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
       privacy: this.firstStepPrivacyId,
       waitTranscoding: false,
       commentsEnabled: true,
+      downloadEnabled: true,
       channelId: this.firstStepChannelId
     }
 
@@ -84,6 +85,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
 
         this.video = new VideoEdit(Object.assign(res.video, {
           commentsEnabled: videoUpdate.commentsEnabled,
+          downloadEnabled: videoUpdate.downloadEnabled,
           support: null,
           thumbnailUrl: null,
           previewUrl: null
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-send.scss
index e907edc70..8769dd302 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-send.scss
@@ -3,10 +3,6 @@
 
 $width-size: 190px;
 
-.peertube-select-container {
-  @include peertube-select-container($width-size);
-}
-
 .alert.alert-danger {
   text-align: center;
 
@@ -15,17 +11,20 @@ $width-size: 190px;
   }
 }
 
-.import-video-url {
+.first-step-block {
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  .icon.icon-upload {
-    @include icon(90px);
+  .upload-icon {
+    width: 90px;
     margin-bottom: 25px;
-    cursor: default;
 
-    background-image: url('../../../../assets/images/video/upload.svg');
+    @include apply-svg-color(#C6C6C6);
+  }
+
+  .peertube-select-container {
+    @include peertube-select-container($width-size);
   }
 
   input[type=text] {
@@ -40,6 +39,16 @@ $width-size: 190px;
     width: $width-size;
     margin-top: 30px;
   }
-}
 
+  .button-file {
+    @include peertube-button-file(auto);
 
+    min-width: 190px;
+  }
+
+  .button-file-extension {
+    display: block;
+    font-size: 12px;
+    margin-top: 5px;
+  }
+}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
index 289a28c66..b252cd60a 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="!isUploadingVideo" class="upload-video-container">
-  <div class="upload-video">
-    <div class="icon icon-upload"></div>
+  <div class="first-step-block">
+    <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
 
     <div class="button-file">
       <span i18n>Select the file to upload</span>
@@ -42,6 +42,10 @@
   {{ error }}
 </div>
 
+<div *ngIf="videoUploaded && !error" class="alert alert-info" i18n>
+  Congratulations! Your video is now available in your private library.
+</div>
+
 <!-- Hidden because we want to load the component -->
 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
   <my-video-edit
@@ -57,7 +61,7 @@
        (click)="updateSecondStep()"
        [ngClass]="{ disabled: isPublishingButtonDisabled() }"
     >
-      <span class="icon icon-validate"></span>
+      <my-global-icon iconName="validate"></my-global-icon>
       <input [disabled]="isPublishingButtonDisabled()" type="button" i18n-value value="Publish" />
     </div>
   </div>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
index 4b2c86ae9..8adf8f169 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
@@ -1,47 +1,9 @@
 @import 'variables';
 @import 'mixins';
 
-.peertube-select-container {
-  @include peertube-select-container(190px);
-}
-
-.alert.alert-danger {
-  text-align: center;
-
-  & > div {
-    font-weight: $font-semibold;
-  }
-}
-
-.upload-video {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .form-group-channel {
-    margin-bottom: 20px;
-    margin-top: 35px;
-  }
-
-  .icon.icon-upload {
-    @include icon(90px);
-    margin-bottom: 25px;
-    cursor: default;
-
-    background-image: url('../../../../assets/images/video/upload.svg');
-  }
-
-  .button-file {
-    @include peertube-button-file(auto);
-
-    min-width: 190px;
-  }
-
-  .button-file-extension {
-    display: block;
-    font-size: 12px;
-    margin-top: 5px;
-  }
+.first-step-block .form-group-channel {
+  margin-bottom: 20px;
+  margin-top: 35px;
 }
 
 .upload-progress-cancel {
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 aa40f8781..9cadf52cb 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
@@ -20,7 +20,8 @@ import { scrollToTop } from '@app/shared/misc/utils'
   templateUrl: './video-upload.component.html',
   styleUrls: [
     '../shared/video-edit.component.scss',
-    './video-upload.component.scss'
+    './video-upload.component.scss',
+    './video-send.scss'
   ]
 })
 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
@@ -165,6 +166,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     const nsfw = false
     const waitTranscoding = true
     const commentsEnabled = true
+    const downloadEnabled = true
     const channelId = this.firstStepChannelId.toString()
 
     const formData = new FormData()
@@ -173,6 +175,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     formData.append('privacy', VideoPrivacy.PRIVATE.toString())
     formData.append('nsfw', '' + nsfw)
     formData.append('commentsEnabled', '' + commentsEnabled)
+    formData.append('downloadEnabled', '' + downloadEnabled)
     formData.append('waitTranscoding', '' + waitTranscoding)
     formData.append('channelId', '' + channelId)
     formData.append('videofile', videofile)
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 57a9d0ca7..01fdfcb66 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core'
+import { Component, HostListener, ViewChild } from '@angular/core'
 import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
 import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-add-components/video-import-url.component'
 import { VideoUploadComponent } from '@app/videos/+video-edit/video-add-components/video-upload.component'
@@ -32,7 +32,17 @@ export class VideoAddComponent implements CanComponentDeactivate {
     this.secondStepType = undefined
   }
 
-  canDeactivate () {
+  @HostListener('window:beforeunload', [ '$event' ])
+  onUnload (event: any) {
+    const { text, canDeactivate } = this.canDeactivate()
+
+    if (canDeactivate) return
+
+    event.returnValue = text
+    return text
+  }
+
+  canDeactivate (): { canDeactivate: boolean, text?: string} {
     if (this.secondStepType === 'upload') return this.videoUpload.canDeactivate()
     if (this.secondStepType === 'import-url') return this.videoImportUrl.canDeactivate()
     if (this.secondStepType === 'import-torrent') return this.videoImportTorrent.canDeactivate()
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index 0457778c0..4992bb369 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -13,7 +13,7 @@
 
     <div class="submit-container">
       <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }">
-        <span class="icon icon-validate"></span>
+        <my-global-icon iconName="validate"></my-global-icon>
         <input type="button" i18n-value value="Update" />
       </div>
     </div>
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index d22ee540a..9e849014e 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -1,5 +1,5 @@
 import { map, switchMap } from 'rxjs/operators'
-import { Component, OnInit } from '@angular/core'
+import { Component, HostListener, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { Notifier } from '@app/core'
@@ -83,14 +83,26 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
       )
   }
 
-  canDeactivate () {
+  @HostListener('window:beforeunload', [ '$event' ])
+  onUnload (event: any) {
+    const { text, canDeactivate } = this.canDeactivate()
+
+    if (canDeactivate) return
+
+    event.returnValue = text
+    return text
+  }
+
+  canDeactivate (): { canDeactivate: boolean, text?: string } {
     if (this.updateDone === true) return { canDeactivate: true }
 
+    const text = this.i18n('You have unsaved changes! If you leave, your changes will be lost.')
+
     for (const caption of this.videoCaptions) {
-      if (caption.action) return { canDeactivate: false }
+      if (caption.action) return { canDeactivate: false, text }
     }
 
-    return { canDeactivate: this.formChanged === false }
+    return { canDeactivate: this.formChanged === false, text }
   }
 
   checkForm () {
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index 84da5727e..731ecbf8f 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -41,7 +41,7 @@
       }
 
       .comment-date {
-        color: #585858;
+        color: $grey-foreground-color;
         margin-left: 10px;
       }
     }
@@ -69,7 +69,7 @@
 
       .comment-action-reply,
       .comment-action-delete {
-        color: #585858;
+        color: $grey-foreground-color;
         cursor: pointer;
         margin-right: 10px;
 
@@ -108,4 +108,4 @@
   .root-comment {
     font-size: 14px;
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
index 00f0460a1..aba7f9d1c 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
@@ -1,11 +1,10 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
-import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service'
-import * as sanitizeHtml from 'sanitize-html'
 import { UserRight } from '../../../../../../shared/models/users'
 import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '../../../core/auth'
 import { Video } from '../../../shared/video/video.model'
 import { VideoComment } from './video-comment.model'
+import { HtmlRendererService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-video-comment',
@@ -29,7 +28,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
   newParentComments: VideoComment[] = []
 
   constructor (
-    private linkifierService: LinkifierService,
+    private htmlRenderer: HtmlRendererService,
     private authService: AuthService
   ) {}
 
@@ -87,27 +86,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
   }
 
   private init () {
-    // Convert possible markdown to html
-    const html = this.linkifierService.linkify(this.comment.text)
-
-    this.sanitizedCommentHTML = sanitizeHtml(html, {
-      allowedTags: [ 'a', 'p', 'span', 'br' ],
-      allowedSchemes: [ 'http', 'https' ],
-      allowedAttributes: {
-        'a': [ 'href', 'class', 'target' ]
-      },
-      transformTags: {
-        a: (tagName, attribs) => {
-          return {
-            tagName,
-            attribs: Object.assign(attribs, {
-              target: '_blank',
-              rel: 'noopener noreferrer'
-            })
-          }
-        }
-      }
-    })
+    this.sanitizedCommentHTML = this.htmlRenderer.toSafeHtml(this.comment.text)
 
     this.newParentComments = this.parentComments.concat([ this.comment ])
   }
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
index 921447d5b..b8e5878c5 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
@@ -1,7 +1,7 @@
 import { catchError, map } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { lineFeedToHtml } from '@app/shared/misc/utils'
+import { objectLineFeedToHtml } from '@app/shared/misc/utils'
 import { Observable } from 'rxjs'
 import { ResultList, FeedFormat } from '../../../../../../shared/models'
 import {
@@ -28,7 +28,7 @@ export class VideoCommentService {
 
   addCommentThread (videoId: number | string, comment: VideoCommentCreate) {
     const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
-    const normalizedComment = lineFeedToHtml(comment, 'text')
+    const normalizedComment = objectLineFeedToHtml(comment, 'text')
 
     return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment)
                .pipe(
@@ -39,7 +39,7 @@ export class VideoCommentService {
 
   addCommentReply (videoId: number | string, inReplyToCommentId: number, comment: VideoCommentCreate) {
     const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId
-    const normalizedComment = lineFeedToHtml(comment, 'text')
+    const normalizedComment = objectLineFeedToHtml(comment, 'text')
 
     return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment)
                .pipe(
diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html
index c436501b4..1a87bdcd4 100644
--- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Blacklist video</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
@@ -15,6 +15,13 @@
         </div>
       </div>
 
+      <div class="form-group" *ngIf="video.isLocal">
+        <my-peertube-checkbox
+          inputName="unfederate" formControlName="unfederate"
+          i18n-labelText labelText="Unfederate the video (ask for its deletion from the remote instances)"
+        ></my-peertube-checkbox>
+      </div>
+
       <div class="form-group inputs">
         <span i18n class="action-button action-button-cancel" (click)="hide()">
           Cancel
diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts b/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts
index 357ce39ce..50a7cadd1 100644
--- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts
@@ -34,9 +34,12 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit {
   }
 
   ngOnInit () {
+    const defaultValues = { unfederate: 'true' }
+
     this.buildForm({
-      reason: this.videoBlacklistValidatorsService.VIDEO_BLACKLIST_REASON
-    })
+      reason: this.videoBlacklistValidatorsService.VIDEO_BLACKLIST_REASON,
+      unfederate: null
+    }, defaultValues)
   }
 
   show () {
@@ -50,8 +53,9 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit {
 
   blacklist () {
     const reason = this.form.value[ 'reason' ] || undefined
+    const unfederate = this.video.isLocal ? this.form.value[ 'unfederate' ] : undefined
 
-    this.videoBlacklistService.blacklistVideo(this.video.id, reason)
+    this.videoBlacklistService.blacklistVideo(this.video.id, reason, unfederate)
         .subscribe(
           () => {
             this.notifier.success(this.i18n('Video blacklisted.'))
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html
index f46f92a17..2bb5d6d37 100644
--- a/client/src/app/videos/+video-watch/modal/video-download.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Download video</h4>
-    <span class="close" aria-hidden="true" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html
index 733c01be0..b9434da26 100644
--- a/client/src/app/videos/+video-watch/modal/video-report.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Report video</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 301f67f2d..9f3c37fe8 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Share</h4>
-    <span class="close" aria-hidden="true" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
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
index 00c304709..2a05224a8 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Support</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
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
index 154002120..deb8fbc67 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts
@@ -1,8 +1,7 @@
 import { Component, Input, ViewChild } from '@angular/core'
-import { MarkdownService } from '@app/videos/shared'
-
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-video-support',
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 2cdbc7aa6..6e18ab6a6 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -52,55 +52,57 @@
                   <div
                     *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
                     class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
+                    i18n-title title="Like this video"
                   >
-                    <span class="icon icon-like" i18n-title title="Like this video" ></span>
+                    <my-global-icon iconName="like"></my-global-icon>
                   </div>
 
                   <div
                     *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
                     class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
+                    i18n-title title="Dislike this video"
                   >
-                    <span class="icon icon-dislike" i18n-title title="Dislike this video"></span>
+                    <my-global-icon iconName="dislike"></my-global-icon>
                   </div>
 
                   <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
-                    <span class="icon icon-support"></span>
+                    <my-global-icon iconName="heart"></my-global-icon>
                     <span class="icon-text" i18n>Support</span>
                   </div>
 
                   <div (click)="showShareModal()" class="action-button action-button-share" role="button">
-                    <span class="icon icon-share"></span>
+                    <my-global-icon iconName="share"></my-global-icon>
                     <span class="icon-text" i18n>Share</span>
                   </div>
 
                   <div class="action-more" ngbDropdown placement="top" role="button">
                     <div class="action-button" ngbDropdownToggle role="button">
-                      <span class="icon icon-more"></span>
+                      <my-global-icon class="more-icon" iconName="more"></my-global-icon>
                     </div>
 
                     <div ngbDropdownMenu>
-                      <a class="dropdown-item" i18n-title title="Download the video" href="#" (click)="showDownloadModal($event)">
-                        <span class="icon icon-download"></span> <ng-container i18n>Download</ng-container>
+                      <a *ngIf="isVideoDownloadable()" class="dropdown-item" i18n-title title="Download the video" href="#" (click)="showDownloadModal($event)">
+                        <my-global-icon iconName="download"></my-global-icon> <ng-container i18n>Download</ng-container>
                       </a>
 
                       <a *ngIf="isUserLoggedIn()" class="dropdown-item" i18n-title title="Report this video" href="#" (click)="showReportModal($event)">
-                        <span class="icon icon-alert"></span> <ng-container i18n>Report</ng-container>
+                        <my-global-icon iconName="alert"></my-global-icon> <ng-container i18n>Report</ng-container>
                       </a>
 
                       <a *ngIf="isVideoUpdatable()" class="dropdown-item" i18n-title title="Update this video" href="#" [routerLink]="[ '/videos/update', video.uuid ]">
-                        <span class="icon icon-edit"></span> <ng-container i18n>Update</ng-container>
+                        <my-global-icon iconName="edit"></my-global-icon> <ng-container i18n>Update</ng-container>
                       </a>
 
                       <a *ngIf="isVideoBlacklistable()" class="dropdown-item" i18n-title title="Blacklist this video" href="#" (click)="showBlacklistModal($event)">
-                        <span class="icon icon-blacklist"></span> <ng-container i18n>Blacklist</ng-container>
+                        <my-global-icon iconName="no"></my-global-icon> <ng-container i18n>Blacklist</ng-container>
                       </a>
 
                       <a *ngIf="isVideoUnblacklistable()" class="dropdown-item" i18n-title title="Unblacklist this video" href="#" (click)="unblacklistVideo($event)">
-                        <span class="icon icon-unblacklist"></span> <ng-container i18n>Unblacklist</ng-container>
+                        <my-global-icon iconName="undo"></my-global-icon> <ng-container i18n>Unblacklist</ng-container>
                       </a>
 
                       <a *ngIf="isVideoRemovable()" class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)">
-                        <span class="icon icon-delete"></span> <ng-container i18n>Delete</ng-container>
+                        <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete</ng-container>
                       </a>
                     </div>
                   </div>
@@ -159,12 +161,9 @@
             <span class="video-attribute-value">{{ video.privacy.label }}</span>
           </div>
 
-          <div class="video-attribute">
-            <span i18n class="video-attribute-label">Originally published on</span>
-            <span *ngIf="!video.originallyPublishedAt" class="video-attribute-value">Unknown</span>
-            <span *ngIf="video.originallyPublishedAt" class="video-attribute-value">
-                    {{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}
-            </span>
+          <div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
+            <span i18n class="video-attribute-label">Originally published</span>
+            <span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span>
           </div>
 
           <div class="video-attribute">
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 f96ce8b8f..cfe3533b6 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -183,6 +183,8 @@ $other-videos-width: 260px;
           .action-button {
             @include peertube-button;
             @include grey-button;
+            @include button-with-icon(21px, 0, -1px);
+            @include apply-svg-color($grey-foreground-color);
 
             font-size: 15px;
             font-weight: $font-semibold;
@@ -194,53 +196,25 @@ $other-videos-width: 260px;
               display: none;
             }
 
-            .icon {
-              @include icon(21px);
-
-              position: relative;
-              top: -2px;
-
-              &.icon-like {
-                background-image: url('../../../assets/images/video/like-grey.svg');
-              }
-
-              &.icon-dislike {
-                background-image: url('../../../assets/images/video/dislike-grey.svg');
-              }
-
-              &.icon-support {
-                background-image: url('../../../assets/images/video/heart.svg');
-              }
-
-              &.icon-share {
-                background-image: url('../../../assets/images/video/share.svg');
-              }
-
-              &.icon-more {
-                background-image: url('../../../assets/images/video/more.svg');
-                top: -1px;
-              }
-            }
-
-            .icon-text {
-              margin-left: 3px;
-            }
-
             &.action-button-like.activated {
               background-color: $green;
 
-              .icon-like {
-                background-image: url('../../../assets/images/video/like-white.svg');
+              my-global-icon {
+                @include apply-svg-color(#fff);
               }
             }
 
             &.action-button-dislike.activated {
               background-color: $red;
 
-              .icon-dislike {
-                background-image: url('../../../assets/images/video/dislike-white.svg');
+              my-global-icon {
+                @include apply-svg-color(#fff);
               }
             }
+
+            .icon-text {
+              margin-left: 3px;
+            }
           }
 
           .action-more {
@@ -249,36 +223,12 @@ $other-videos-width: 260px;
             .dropdown-menu .dropdown-item {
               padding: 6px 24px;
 
-              .icon {
-                @include icon(24px);
+              my-global-icon {
+                width: 24px;
 
                 margin-right: 10px;
                 position: relative;
-                top: -1px;
-
-                &.icon-download {
-                  background-image: url('../../../assets/images/video/download-black.svg');
-                }
-
-                &.icon-edit {
-                  background-image: url('../../../assets/images/global/edit-black.svg');
-                }
-
-                &.icon-alert {
-                  background-image: url('../../../assets/images/video/alert.svg');
-                }
-
-                &.icon-blacklist {
-                  background-image: url('../../../assets/images/video/blacklist.svg');
-                }
-
-                &.icon-unblacklist {
-                  background-image: url('../../../assets/images/global/undo.svg');
-                }
-
-                &.icon-delete {
-                  background-image: url('../../../assets/images/global/delete-black.svg');
-                }
+                top: -2px;
               }
             }
           }
@@ -320,7 +270,7 @@ $other-videos-width: 260px;
       .video-info-description-more {
         cursor: pointer;
         font-weight: $font-semibold;
-        color: #585858;
+        color: $grey-foreground-color;
         font-size: 14px;
 
         .glyphicon {
@@ -339,7 +289,7 @@ $other-videos-width: 260px;
         min-width: 142px;
         padding-right: 5px;
         display: inline-block;
-        color: #585858;
+        color: $grey-foreground-color;
         font-weight: $font-bold;
       }
 
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 67c5254b3..4dbfa41e5 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -7,29 +7,27 @@ import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-supp
 import { MetaService } from '@ngx-meta/core'
 import { Notifier, ServerService } from '@app/core'
 import { forkJoin, Subscription } from 'rxjs'
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import videojs from 'video.js'
-import 'videojs-hotkeys'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import * as WebTorrent from 'webtorrent'
 import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
-import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
 import { RestExtractor, VideoBlacklistService } from '../../shared'
 import { VideoDetails } from '../../shared/video/video-details.model'
 import { VideoService } from '../../shared/video/video.service'
-import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './modal/video-download.component'
 import { VideoReportComponent } from './modal/video-report.component'
 import { VideoShareComponent } from './modal/video-share.component'
 import { VideoBlacklistComponent } from './modal/video-blacklist.component'
 import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
-import { addContextMenu, getVideojsOptions, loadLocaleInVideoJS } from '../../../assets/player/peertube-player'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { environment } from '../../../environments/environment'
-import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { VideoCaptionService } from '@app/shared/video-caption'
+import { MarkdownService } from '@app/shared/renderer'
+import {
+  P2PMediaLoaderOptions,
+  PeertubePlayerManager,
+  PeertubePlayerManagerOptions,
+  PlayerMode
+} from '../../../assets/player/peertube-player-manager'
 
 @Component({
   selector: 'my-video-watch',
@@ -46,7 +44,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
   @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
 
-  player: videojs.Player
+  player: any
   playerElement: HTMLVideoElement
   userRating: UserVideoRateType = null
   video: VideoDetails = null
@@ -61,7 +59,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   remoteServerDown = false
   hotkeys: Hotkey[]
 
-  private videojsLocaleLoaded = false
   private paramsSub: Subscription
 
   constructor (
@@ -92,7 +89,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   ngOnInit () {
     if (
-      WebTorrent.WEBRTC_SUPPORT === false ||
+      !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false ||
       peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
     ) {
       this.hasAlreadyAcceptedPrivacyConcern = true
@@ -118,8 +115,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         .subscribe(([ video, captionsResult ]) => {
           const startTime = this.route.snapshot.queryParams.start
           const subtitle = this.route.snapshot.queryParams.subtitle
+          const playerMode = this.route.snapshot.queryParams.mode
 
-          this.onVideoFetched(video, captionsResult.data, { startTime, subtitle })
+          this.onVideoFetched(video, captionsResult.data, { startTime, subtitle, playerMode })
               .catch(err => this.handleError(err))
         })
     })
@@ -310,6 +308,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video && this.video.state.id === VideoState.TO_TRANSCODE
   }
 
+  isVideoDownloadable () {
+    return this.video && this.video.downloadEnabled
+  }
+
   isVideoToImport () {
     return this.video && this.video.state.id === VideoState.TO_IMPORT
   }
@@ -366,7 +368,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         )
   }
 
-  private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], urlOptions: { startTime: number, subtitle: string }) {
+  private async onVideoFetched (
+    video: VideoDetails,
+    videoCaptions: VideoCaption[],
+    urlOptions: { startTime?: number, subtitle?: string, playerMode?: string }
+  ) {
     this.video = video
 
     // Re init attributes
@@ -402,41 +408,64 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       src: environment.apiUrl + c.captionPath
     }))
 
-    const videojsOptions = getVideojsOptions({
-      autoplay: this.isAutoplay(),
-      inactivityTimeout: 2500,
-      videoFiles: this.video.files,
-      videoCaptions: playerCaptions,
-      playerElement: this.playerElement,
-      videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
-      videoDuration: this.video.duration,
-      enableHotkeys: true,
-      peertubeLink: false,
-      poster: this.video.previewUrl,
-      startTime,
-      subtitle: urlOptions.subtitle,
-      theaterMode: true,
-      language: this.localeId,
-
-      userWatching: this.user && this.user.videosHistoryEnabled === true ? {
-        url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
-        authorizationHeader: this.authService.getRequestHeaderValue()
-      } : undefined
-    })
+    const options: PeertubePlayerManagerOptions = {
+      common: {
+        autoplay: this.isAutoplay(),
+
+        playerElement: this.playerElement,
+        onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
+
+        videoDuration: this.video.duration,
+        enableHotkeys: true,
+        inactivityTimeout: 2500,
+        poster: this.video.previewUrl,
+        startTime,
+
+        theaterMode: true,
+        captions: videoCaptions.length !== 0,
+        peertubeLink: false,
+
+        videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
+        embedUrl: this.video.embedUrl,
+
+        language: this.localeId,
+
+        subtitle: urlOptions.subtitle,
+
+        userWatching: this.user && this.user.videosHistoryEnabled === true ? {
+          url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
+          authorizationHeader: this.authService.getRequestHeaderValue()
+        } : undefined,
 
-    if (this.videojsLocaleLoaded === false) {
-      await loadLocaleInVideoJS(environment.apiUrl, videojs, isOnDevLocale() ? getDevLocale() : this.localeId)
-      this.videojsLocaleLoaded = true
+        serverUrl: environment.apiUrl,
+
+        videoCaptions: playerCaptions
+      },
+
+      webtorrent: {
+        videoFiles: this.video.files
+      }
     }
 
-    const self = this
-    this.zone.runOutsideAngular(async () => {
-      videojs(this.playerElement, videojsOptions, function (this: videojs.Player) {
-        self.player = this
-        this.on('customError', ({ err }: { err: any }) => self.handleError(err))
+    const mode: PlayerMode = urlOptions.playerMode === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent'
+
+    if (mode === 'p2p-media-loader') {
+      const hlsPlaylist = this.video.getHlsPlaylist()
 
-        addContextMenu(self.player, self.video.embedUrl)
-      })
+      const p2pMediaLoader = {
+        playlistUrl: hlsPlaylist.playlistUrl,
+        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+        trackerAnnounce: this.video.trackerUrls,
+        videoFiles: this.video.files
+      } as P2PMediaLoaderOptions
+
+      Object.assign(options, { p2pMediaLoader })
+    }
+
+    this.zone.runOutsideAngular(async () => {
+      this.player = await PeertubePlayerManager.initialize(mode, options)
+      this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
     })
 
     this.setVideoDescriptionHTML()
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 54a12c126..2f448db78 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core'
-import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service'
 import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
 import { ClipboardModule } from 'ngx-clipboard'
 import { SharedModule } from '../../shared'
-import { MarkdownService } from '../shared'
 import { VideoCommentAddComponent } from './comment/video-comment-add.component'
 import { VideoCommentComponent } from './comment/video-comment.component'
 import { VideoCommentService } from './comment/video-comment.service'
@@ -46,8 +44,6 @@ import { RecommendationsModule } from '@app/videos/recommendations/recommendatio
   ],
 
   providers: [
-    MarkdownService,
-    LinkifierService,
     VideoCommentService
   ]
 })
diff --git a/client/src/app/videos/shared/index.ts b/client/src/app/videos/shared/index.ts
deleted file mode 100644
index 7a66944b9..000000000
--- a/client/src/app/videos/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './markdown.service'
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index accc5bfe5..6fd74e67a 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -8,7 +8,7 @@ import { VideoSortField } from '../../shared/video/sort-field.type'
 import { VideoService } from '../../shared/video/video.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-videos-trending',
@@ -27,18 +27,33 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
     protected authService: AuthService,
     protected location: Location,
     protected screenService: ScreenService,
+    private serverService: ServerService,
     protected i18n: I18n,
     private videoService: VideoService
   ) {
     super()
-
-    this.titlePage = i18n('Trending')
   }
 
   ngOnInit () {
     super.ngOnInit()
 
     this.generateSyndicationList()
+
+    this.serverService.configLoaded.subscribe(
+      () => {
+        const trendingDays = this.serverService.getConfig().trending.videos.intervalDays
+
+        if (trendingDays === 1) {
+          this.titlePage = this.i18n('Trending for the last 24 hours')
+          this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours.')
+        } else {
+          this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays })
+          this.titleTooltip = this.i18n(
+            'Trending videos are those totalizing the greatest number of views during the last {{days}} days.',
+            { days: trendingDays }
+          )
+        }
+      })
   }
 
   ngOnDestroy () {