18 files changed, 303 insertions, 251 deletions

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
index a625493de..b3265210f 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
@@ -8,10 +8,12 @@ import {
   VIDEO_CHANNEL_SUPPORT_VALIDATOR
 } from '@app/shared/form-validators/video-channel-validators'
 import { FormValidatorService } from '@app/shared/shared-forms'
-import { VideoChannelService } from '@app/shared/shared-main'
+import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { VideoChannelCreate } from '@shared/models'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { MyVideoChannelEdit } from './my-video-channel-edit'
+import { switchMap } from 'rxjs/operators'
+import { of } from 'rxjs'
 
 @Component({
   templateUrl: './my-video-channel-edit.component.html',
@@ -19,6 +21,10 @@ import { MyVideoChannelEdit } from './my-video-channel-edit'
 })
 export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements OnInit {
   error: string
+  videoChannel = new VideoChannel({})
+
+  private avatar: FormData
+  private banner: FormData
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -50,23 +56,43 @@ export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements
       support: body.support || null
     }
 
-    this.videoChannelService.createVideoChannel(videoChannelCreate).subscribe(
-      () => {
-        this.authService.refreshUserInformation()
+    this.videoChannelService.createVideoChannel(videoChannelCreate)
+      .pipe(
+        switchMap(() => this.uploadAvatar()),
+        switchMap(() => this.uploadBanner())
+      ).subscribe(
+        () => {
+          this.authService.refreshUserInformation()
+
+          this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
+          this.router.navigate(['/my-library', 'video-channels'])
+        },
 
-        this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
-        this.router.navigate([ '/my-library', 'video-channels' ])
-      },
+        err => {
+          if (err.status === HttpStatusCode.CONFLICT_409) {
+            this.error = $localize`This name already exists on this instance.`
+            return
+          }
 
-      err => {
-        if (err.status === HttpStatusCode.CONFLICT_409) {
-          this.error = $localize`This name already exists on this instance.`
-          return
+          this.error = err.message
         }
+      )
+  }
+
+  onAvatarChange (formData: FormData) {
+    this.avatar = formData
+  }
+
+  onAvatarDelete () {
+    this.avatar = null
+  }
+
+  onBannerChange (formData: FormData) {
+    this.banner = formData
+  }
 
-        this.error = err.message
-      }
-    )
+  onBannerDelete () {
+    this.banner = null
   }
 
   isCreation () {
@@ -76,4 +102,20 @@ export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements
   getFormButtonTitle () {
     return $localize`Create`
   }
+
+  getUsername () {
+    return this.form.value.name
+  }
+
+  private uploadAvatar () {
+    if (!this.avatar) return of(undefined)
+
+    return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.avatar, 'avatar')
+  }
+
+  private uploadBanner () {
+    if (!this.banner) return of(undefined)
+
+    return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.banner, 'banner')
+  }
 }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
index 735f9e3ba..2910dffad 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
@@ -10,7 +10,7 @@
     <ng-container *ngIf="!isCreation()">
       <li class="breadcrumb-item active" i18n>Edit</li>
       <li class="breadcrumb-item active" aria-current="page">
-        <a *ngIf="videoChannelToUpdate" [routerLink]="[ '/my-library/video-channels/update', videoChannelToUpdate?.nameWithHost ]">{{ videoChannelToUpdate?.displayName }}</a>
+        <a *ngIf="videoChannel" [routerLink]="[ '/my-library/video-channels/update', videoChannel?.nameWithHost ]">{{ videoChannel?.displayName }}</a>
       </li>
     </ng-container>
   </ol>
@@ -23,10 +23,22 @@
   <div class="form-row"> <!-- channel grid -->
     <div class="form-group col-12 col-lg-4 col-xl-3">
       <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
-      <div *ngIf="!isCreation() && videoChannelToUpdate" class="video-channel-title" i18n>CHANNEL</div>
+      <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
     </div>
 
     <div class="form-group col-12 col-lg-8 col-xl-9">
+      <h6 i18n>Banner image of your channel</h6>
+
+      <my-actor-banner-edit
+        *ngIf="videoChannel" [previewImage]="isCreation()"
+        [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
+      ></my-actor-banner-edit>
+
+      <my-actor-avatar-edit
+        *ngIf="videoChannel" [previewImage]="isCreation()"
+        [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
+        [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
+      ></my-actor-avatar-edit>
 
       <div class="form-group" *ngIf="isCreation()">
         <label i18n for="name">Name</label>
@@ -44,11 +56,6 @@
         </div>
       </div>
 
-      <my-actor-avatar-info
-        *ngIf="!isCreation() && videoChannelToUpdate"
-        [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
-      ></my-actor-avatar-info>
-
       <div class="form-group">
         <label i18n for="display-name">Display name</label>
         <input
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
index 8f8af655c..22de103d1 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
@@ -10,11 +10,16 @@ label {
   @include settings-big-title;
 }
 
-my-actor-avatar-info {
+my-actor-avatar-edit,
+my-actor-banner-edit {
   display: block;
   margin-bottom: 20px;
 }
 
+my-actor-banner-edit {
+  max-width: 500px;
+}
+
 .input-group {
   @include peertube-input-group(fit-content);
 }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
index 3e20a27ee..33bb90f14 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
@@ -2,8 +2,7 @@ import { FormReactive } from '@app/shared/shared-forms'
 import { VideoChannel } from '@app/shared/shared-main'
 
 export abstract class MyVideoChannelEdit extends FormReactive {
-  // We need it even in the create component because it's used in the edit template
-  videoChannelToUpdate: VideoChannel
+  videoChannel: VideoChannel
 
   abstract isCreation (): boolean
   abstract getFormButtonTitle (): string
@@ -12,10 +11,6 @@ export abstract class MyVideoChannelEdit extends FormReactive {
     return window.location.host
   }
 
-  // We need this method so angular does not complain in child template that doesn't need this
-  onAvatarChange (formData: FormData) { /* empty */ }
-  onAvatarDelete () { /* empty */ }
-
   // Should be implemented by the child
   isBulkUpdateVideosDisplayed () {
     return false
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
index 6cd1ff503..a29af176c 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
@@ -1,7 +1,9 @@
 import { Subscription } from 'rxjs'
+import { HttpErrorResponse } from '@angular/common/http'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
+import { uploadErrorHandler } from '@app/helpers'
 import {
   VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
   VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
@@ -11,8 +13,6 @@ import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { ServerConfig, VideoChannelUpdate } from '@shared/models'
 import { MyVideoChannelEdit } from './my-video-channel-edit'
-import { HttpErrorResponse } from '@angular/common/http'
-import { uploadErrorHandler } from '@app/helpers'
 
 @Component({
   selector: 'my-video-channel-update',
@@ -21,7 +21,7 @@ import { uploadErrorHandler } from '@app/helpers'
 })
 export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements OnInit, OnDestroy {
   error: string
-  videoChannelToUpdate: VideoChannel
+  videoChannel: VideoChannel
 
   private paramsSub: Subscription
   private oldSupportField: string
@@ -56,7 +56,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
 
       this.videoChannelService.getVideoChannel(videoChannelId).subscribe(
         videoChannelToUpdate => {
-          this.videoChannelToUpdate = videoChannelToUpdate
+          this.videoChannel = videoChannelToUpdate
 
           this.oldSupportField = videoChannelToUpdate.support
 
@@ -87,7 +87,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
       bulkVideosSupportUpdate: body.bulkVideosSupportUpdate || false
     }
 
-    this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.name, videoChannelUpdate).subscribe(
+    this.videoChannelService.updateVideoChannel(this.videoChannel.name, videoChannelUpdate).subscribe(
       () => {
         this.authService.refreshUserInformation()
 
@@ -101,12 +101,12 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
   }
 
   onAvatarChange (formData: FormData) {
-    this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.name, formData)
+    this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'avatar')
         .subscribe(
           data => {
             this.notifier.success($localize`Avatar changed.`)
 
-            this.videoChannelToUpdate.updateAvatar(data.avatar)
+            this.videoChannel.updateAvatar(data.avatar)
           },
 
           (err: HttpErrorResponse) => uploadErrorHandler({
@@ -118,12 +118,42 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
   }
 
   onAvatarDelete () {
-    this.videoChannelService.deleteVideoChannelAvatar(this.videoChannelToUpdate.name)
+    this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'avatar')
                             .subscribe(
                               data => {
                                 this.notifier.success($localize`Avatar deleted.`)
 
-                                this.videoChannelToUpdate.resetAvatar()
+                                this.videoChannel.resetAvatar()
+                              },
+
+                              err => this.notifier.error(err.message)
+                            )
+  }
+
+  onBannerChange (formData: FormData) {
+    this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'banner')
+        .subscribe(
+          data => {
+            this.notifier.success($localize`Banner changed.`)
+
+            this.videoChannel.updateBanner(data.banner)
+          },
+
+          (err: HttpErrorResponse) => uploadErrorHandler({
+            err,
+            name: $localize`banner`,
+            notifier: this.notifier
+          })
+        )
+  }
+
+  onBannerDelete () {
+    this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'banner')
+                            .subscribe(
+                              data => {
+                                this.notifier.success($localize`Banner deleted.`)
+
+                                this.videoChannel.resetBanner()
                               },
 
                               err => this.notifier.error(err.message)
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index f2f42459f..8804fa95c 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -17,10 +17,11 @@ input[type=text] {
 
 .video-channel {
   @include row-blocks;
+
   padding-bottom: 0;
 
   img {
-    @include avatar(80px);
+    @include channel-avatar(80px);
 
     margin-right: 10px;
   }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
index 92b56db49..53557ca02 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
@@ -1,5 +1,6 @@
 import { ChartModule } from 'primeng/chart'
 import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
@@ -16,7 +17,8 @@ import { MyVideoChannelsComponent } from './my-video-channels.component'
 
     SharedMainModule,
     SharedFormModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedActorImageModule
   ],
 
   declarations: [
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index c180161e7..9dec64645 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -4,7 +4,7 @@
 </h1>
 
 <div class="top-buttons">
-  <div>
+  <div class="search-wrapper">
     <div class="input-group has-feedback has-clear">
       <input
         type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
@@ -15,7 +15,7 @@
     </div>
   </div>
 
-  <div class="history-switch ml-auto mr-3">
+  <div class="history-switch">
     <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
     <label i18n>Track watch history</label>
   </div>
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 928a8a3da..af4a34b4b 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -11,16 +11,24 @@
 
 .top-buttons {
   margin-bottom: 30px;
-  display: flex;
+  display: grid;
+  grid-template-columns: 250px 1fr auto auto;
   align-items: center;
-  flex-wrap: wrap;
 
-  #history-search {
-    @include peertube-input-text(250px);
+  .search-wrapper {
+    grid-column: 1;
+
+    input {
+      @include peertube-input-text(250px);
+    }
   }
 
   .history-switch {
+    grid-column: 3;
+
     display: flex;
+    margin-left: auto;
+    margin-right: 15px;
 
     label {
       margin: 0 0 0 5px;
@@ -31,6 +39,8 @@
   }
 
   .delete-history {
+    grid-column: 4;
+
     @include peertube-button;
     @include grey-button;
     @include button-with-icon;
@@ -40,26 +50,27 @@
 }
 
 .video {
-  @include row-blocks;
-
-  .my-video-miniature {
-    flex-grow: 1;
-  }
+  @include row-blocks($column-responsive: false);
 }
 
-@media screen and (max-width: $mobile-view) {
+@media screen and (max-width: $small-view) {
   .top-buttons {
-    .history-switch label, .delete-history {
-      @include ellipsis;
-    }
+    grid-template-columns: auto 1fr auto;
+    row-gap: 20px;
 
-    .history-switch label {
-      width: 60%;
+    .history-switch {
+      grid-row: 1;
+      grid-column: 1;
+      margin: 0;
     }
 
     .delete-history {
-      margin-left: auto;
-      max-width: 32%;
+      grid-row: 1;
+      grid-column: 3;
+    }
+
+    .search-wrapper {
+      grid-column: 1 / 4;
     }
   }
 }
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index 510b400c0..ff448ad87 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -6,7 +6,7 @@
   </span>
 </h1>
 
-<div class="video-subscriptions-header d-flex justify-content-between">
+<div class="video-subscriptions-header">
   <div class="has-feedback has-clear">
     <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
       (ngModelChange)="onSubscriptionsSearchChanged()" />
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 5ead45dd8..3c1a4d2ad 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -9,40 +9,40 @@ input[type=text] {
   @include row-blocks;
 
   img {
-    @include avatar(80px);
+    @include channel-avatar(80px);
 
     margin-right: 10px;
   }
+}
 
-  .video-channel-info {
-    flex-grow: 1;
-
-    a.video-channel-names {
-      @include disable-default-a-behaviour;
-
-      width: fit-content;
-      display: flex;
-      align-items: baseline;
-      color: pvar(--mainForegroundColor);
-
-      .video-channel-display-name {
-        font-weight: $font-semibold;
-        font-size: 18px;
-      }
-
-      .video-channel-name {
-        font-size: 14px;
-        color: $grey-actor-name;
-        margin-left: 5px;
-      }
+.video-channel-info {
+  flex-grow: 1;
+
+  a.video-channel-names {
+    @include disable-default-a-behaviour;
+
+    width: fit-content;
+    display: flex;
+    align-items: baseline;
+    color: pvar(--mainForegroundColor);
+
+    .video-channel-display-name {
+      font-weight: $font-semibold;
+      font-size: 18px;
+    }
+
+    .video-channel-name {
+      font-size: 14px;
+      color: $grey-actor-name;
+      margin-left: 5px;
     }
   }
+}
 
-  .actor-owner {
-    @include actor-owner;
+.actor-owner {
+  @include actor-owner;
 
-    margin-top: 0;
-  }
+  margin-top: 0;
 }
 
 .video-subscriptions-header {
@@ -50,32 +50,22 @@ input[type=text] {
 }
 
 @media screen and (max-width: $small-view) {
-  .video-channel {
-    .video-channel-info {
-      padding-bottom: 10px;
-      text-align: center;
-
-      .video-channel-names {
-        flex-direction: column;
-        align-items: center !important;
-        margin: auto;
-      }
-    }
-
-    img {
-      margin-right: 0;
-    }
+  .video-subscriptions-header input[type=text] {
+    width: 100% !important;
   }
-}
 
-@media screen and (max-width: $mobile-view) {
-  .video-subscriptions-header {
-    flex-direction: column;
+  .video-channel-info {
+    padding-bottom: 10px;
+    text-align: center;
 
-    input[type=text] {
-      width: 100% !important;
+    .video-channel-names {
+      flex-direction: column;
+      align-items: center !important;
+      margin: auto;
     }
   }
-}
-
 
+  img {
+    margin-right: 0;
+  }
+}
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
index a97b2b4fb..e7e3c17b3 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
@@ -1,6 +1,6 @@
-<div class="row">
+<div class="root">
 
-  <div class="playlist-info col-xs-12 col-md-5 col-xl-3">
+  <div class="playlist-info">
     <my-video-playlist-miniature
       *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
       [displayDescription]="true" [displayPrivacy]="true"
@@ -20,7 +20,7 @@
 
   </div>
 
-  <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
+  <div class="playlist-elements">
     <div class="no-results" *ngIf="pagination.totalItems === 0">
       <div i18n>No videos in this playlist.</div>
 
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index de7e1993f..0c68dedf6 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -2,21 +2,25 @@
 @import '_mixins';
 @import '_miniature';
 
+.root {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
 .playlist-info {
-  background-color: pvar(--submenuColor);
-  margin-left: -$not-expanded-horizontal-margins;
+  grid-column: 1;
+  background-color: pvar(--submenuBackgroundColor);
+  margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
   margin-top: -$sub-menu-margin-bottom;
 
-  padding: 10px;
+  padding: 15px;
 
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
 
   /* fix ellipsis dots background color */
   ::ng-deep .miniature-name::after {
-    background-color: pvar(--submenuColor) !important;
+    background-color: pvar(--submenuBackgroundColor) !important;
   }
 }
 
@@ -59,15 +63,35 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-@media screen and (max-width: $small-view) {
+.playlist-elements {
+  grid-column: 2;
+}
+
+my-video-playlist-miniature {
+  width: $video-thumbnail-width;
+}
+
+@include on-small-main-col {
+  my-video-playlist-miniature {
+    width: $video-thumbnail-medium-width;
+  }
+}
+
+@include on-mobile-main-col {
+  .root {
+    display: block;
+  }
+
   .playlist-info {
-    width: 100vw;
+    width: calc(100% + (2 * var(--horizontalMarginContent)));
     padding-top: 20px;
-    margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
+    margin-bottom: 10px;
   }
 
-  .playlist-elements {
-    padding: 0 !important;
+  my-video-playlist-miniature,
+  .playlist-buttons {
+    margin-left: auto;
+    margin-right: auto;
   }
 
   ::ng-deep my-video-playlist-element-miniature {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index afcf6a084..b88ea3db7 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,8 +1,6 @@
 <h1>
-  <span>
-    <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
-  </span>
+  <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <div class="video-playlists-header d-flex justify-content-between">
@@ -21,10 +19,10 @@
 
 <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
   <div *ngFor="let playlist of videoPlaylists" class="video-playlist">
-    <div class="miniature-wrapper">
-      <my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true"
-      ></my-video-playlist-miniature>
-    </div>
+    <my-video-playlist-miniature
+      [playlist]="playlist" [toManage]="true" [displayChannel]="true"
+      [displayDescription]="true" [displayPrivacy]="true" [displayAsRow]="true"
+    ></my-video-playlist-miniature>
 
     <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
       <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
index 2b7c88246..94187efd4 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
 
+h1 {
+  display: flex;
+}
+
 .create-button {
   @include create-button;
 }
@@ -9,64 +13,45 @@ input[type=text] {
   @include peertube-input-text(300px);
 }
 
-::ng-deep .action-button {
-  &.action-button-delete {
-    margin-right: 10px;
-  }
-}
-
 .video-playlist {
-  @include row-blocks;
-
-  .miniature-wrapper {
-    flex-grow: 1;
-
-    ::ng-deep .miniature {
-      display: flex;
-
-      .miniature-info {
-        margin-left: 10px;
-        width: auto;
-      }
-    }
-  }
+  @include row-blocks($column-responsive: false);
+}
 
-  .video-playlist-buttons {
-    min-width: 190px;
-    height: max-content;
-  }
+.video-playlist-buttons {
+  display: flex;
+  margin-left: 10px;
+  align-self: flex-end;
 }
 
 .video-playlists-header {
   margin-bottom: 30px;
 }
 
-@media screen and (max-width: $small-view) {
+my-video-playlist-miniature {
+  display: block;
+  flex-grow: 1;
+}
+
+my-delete-button {
+  margin-right: 10px;
+}
+
+@include on-small-main-col {
   .video-playlists-header {
     text-align: center;
   }
 
   .video-playlist {
-
-    .video-playlist-buttons {
-      margin-top: 10px;
-    }
+    flex-wrap: wrap;
   }
 
-  my-video-playlist-miniature ::ng-deep .miniature {
-    flex-direction: column;
-
-    .miniature-info {
-      margin-left: 0 !important;
-    }
-
-    .miniature-name {
-      max-width: $video-thumbnail-width;
-    }
+  .video-playlist-buttons {
+    margin-top: 10px;
+    margin-left: auto;
   }
 }
 
-@media screen and (max-width: $mobile-view) {
+@include on-mobile-main-col {
   .video-playlists-header {
     flex-direction: column;
 
@@ -75,4 +60,8 @@ input[type=text] {
       margin-bottom: 12px;
     }
   }
+
+  .action-button {
+    margin-left: 0;
+  }
 }
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 5fa4c02ec..e9f436378 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -25,6 +25,17 @@
     <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
     <span class="sr-only" i18n>Clear filters</span>
   </div>
+
+  <div class="peertube-select-container peertube-select-button">
+    <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
+      <option value="undefined" disabled>Sort by</option>
+      <option value="-publishedAt" i18n>Last published first</option>
+      <option value="-createdAt" i18n>Last created first</option>
+      <option value="-views" i18n>Most viewed first</option>
+      <option value="-likes" i18n>Most liked first</option>
+      <option value="-duration" i18n>Longest first</option>
+    </select>
+  </div>
 </div>
 
 <my-videos-selection
@@ -34,7 +45,6 @@
   [miniatureDisplayOptions]="miniatureDisplayOptions"
   [titlePage]="titlePage"
   [getVideosObservableFunction]="getVideosObservableFunction"
-  [ownerDisplayType]="ownerDisplayType"
   [user]="user"
   #videosSelection
 >
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index 59fc5fe80..aaf21126b 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -5,6 +5,11 @@ input[type=text] {
   @include peertube-input-text(300px);
 }
 
+.peertube-select-container {
+  @include peertube-select-container(auto);
+  margin-left: 0.5rem;
+}
+
 h1 {
   display: flex;
   justify-content: space-between;
@@ -32,36 +37,9 @@ h1 {
   }
 }
 
-::ng-deep {
-  .video {
-    flex-wrap: wrap;
-  }
-
-  .action-button span {
-    white-space: nowrap;
-  }
-
-  .video-miniature {
-    &.display-as-row {
-      // width: min-content !important;
-      width: 100% !important;
-
-      .video-bottom .video-miniature-information {
-        width: max-content !important;
-        min-width: unset !important;
-      }
-    }
-
-    .video-bottom {
-      max-width: 350px;
-    }
-  }
-}
-
 .action-button {
   display: flex;
-  margin-left: 55px;
-  margin-top: 10px;
+  margin-left: 10px;
   align-self: flex-end;
 }
 
@@ -69,7 +47,7 @@ my-edit-button {
   margin-right: 10px;
 }
 
-@media screen and (max-width: $small-view) {
+@include on-small-main-col {
   h1 {
     flex-direction: column;
 
@@ -80,59 +58,25 @@ my-edit-button {
   }
 
   .action-button {
-    flex-direction: column;
-    align-self: center;
-    align-items: center;
-    margin-left: 0px;
-  }
-
-  my-edit-button {
-    margin: 15px 0 5px 0;
-    width: 100%;
-    text-align: center;
-
-    ::ng-deep {
-      .action-button {
-        /* same width than a.video-thumbnail */
-        width: $video-thumbnail-width;
-      }
-    }
-  }
-
-  ::ng-deep {
-    .video-miniature {
-      align-items: center;
-
-      .video-bottom,
-      .video-bottom .video-miniature-information {
-        /* same width than a.video-thumbnail */
-        max-width: $video-thumbnail-width !important;
-      }
-    }
+    margin-top: 10px;
+    margin-left: auto;
   }
 }
 
-// Adapt my-video-miniature on small screens with menu
-@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
-  :host-context(.main-col:not(.expanded)) {
-    ::ng-deep {
-      .video-miniature {
-        flex-direction: column;
-
-        .video-miniature-name {
-          max-width: $video-thumbnail-width;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: $mobile-view) {
+@include on-mobile-main-col {
   .videos-header {
     flex-direction: column;
 
     input[type=text] {
-      width: 100% !important;
+      width: 100%;
+      margin-bottom: 12px;
+    }
+    .peertube-select-container {
+      margin-left: 0;
     }
   }
+
+  .action-button {
+    margin-left: 0;
+  }
 }
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 6a2a62608..356e158d6 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -2,12 +2,12 @@ import { concat, Observable, Subject } from 'rxjs'
 import { debounceTime, tap, toArray } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core'
+import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { immutableAssign } from '@app/helpers'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
-import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
+import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
 import { VideoSortField } from '@shared/models'
 import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
 
@@ -36,7 +36,6 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
     state: true,
     blacklistInfo: true
   }
-  ownerDisplayType: OwnerDisplayType = 'videoChannel'
 
   videoActions: DropdownAction<{ video: Video }>[] = []
 
@@ -44,6 +43,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
   videosSearch: string
   videosSearchChanged = new Subject<string>()
   getVideosObservableFunction = this.getVideosObservable.bind(this)
+  sort: VideoSortField = '-publishedAt'
 
   user: User
 
@@ -81,6 +81,10 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
     this.videosSearchChanged.next()
   }
 
+  onChangeSortColumn () {
+    this.videosSelection.reloadVideos()
+  }
+
   disableForReuse () {
     this.videosSelection.disableForReuse()
   }
@@ -89,10 +93,10 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
     this.videosSelection.enabledForReuse()
   }
 
-  getVideosObservable (page: number, sort: VideoSortField) {
+  getVideosObservable (page: number) {
     const newPagination = immutableAssign(this.pagination, { currentPage: page })
 
-    return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
+    return this.videoService.getMyVideos(newPagination, this.sort, this.videosSearch)
       .pipe(
         tap(res => this.pagination.totalItems = res.total)
       )