harmonize search for libraries

26 files changed, 225 insertions, 87 deletions

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 571c780d6..e8a084259 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
@@ -112,8 +112,10 @@
         </a>
       </td>
 
-      <td *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus" [title]="user.email">
-        <a class="table-email" [href]="'mailto:' + user.email">{{ user.email }}</a>
+      <td *ngIf="getColumn('email')" [title]="user.email">
+        <ng-container *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus">
+          <a class="table-email" [href]="'mailto:' + user.email">{{ user.email }}</a>
+        </ng-container>
       </td>
 
       <ng-template #emailWithVerificationStatus>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index b2978212e..699b2a6da 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -7,6 +7,13 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig, User, UserRole } from '@shared/models'
 import { Params, Router, ActivatedRoute } from '@angular/router'
 
+type UserForList = User & {
+  rawVideoQuota: number
+  rawVideoQuotaUsed: number
+  rawVideoQuotaDaily: number
+  rawVideoQuotaUsedDaily: number
+}
+
 @Component({
   selector: 'my-user-list',
   templateUrl: './user-list.component.html',
@@ -24,8 +31,8 @@ export class UserListComponent extends RestTable implements OnInit {
   selectedUsers: User[] = []
   bulkUserActions: DropdownAction<User[]>[][] = []
   columns: { key: string, label: string }[]
-  _selectedColumns: { key: string, label: string }[]
 
+  private _selectedColumns: { key: string, label: string }[]
   private serverConfig: ServerConfig
 
   constructor (
@@ -111,7 +118,7 @@ export class UserListComponent extends RestTable implements OnInit {
       { key: 'role', label: 'Role' },
       { key: 'createdAt', label: 'Created' }
     ]
-    this.selectedColumns = [...this.columns]
+    this.selectedColumns = [ ...this.columns ] // make a full copy of the array
     this.columns.push({ key: 'quotaDaily', label: 'Daily quota' })
     this.columns.push({ key: 'pluginAuth', label: 'Auth plugin' })
     this.columns.push({ key: 'lastLoginDate', label: 'Last login' })
@@ -133,14 +140,14 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   getColumn (key: string) {
-    return this.selectedColumns.find((col: any) => col.key === key)
+    return this.selectedColumns.find((col: { key: string }) => col.key === key)
   }
 
-  getUserVideoQuotaPercentage (user: User & { rawVideoQuota: number, rawVideoQuotaUsed: number}) {
+  getUserVideoQuotaPercentage (user: UserForList) {
     return user.rawVideoQuotaUsed * 100 / user.rawVideoQuota
   }
 
-  getUserVideoQuotaDailyPercentage (user: User & { rawVideoQuotaDaily: number, rawVideoQuotaUsedDaily: number}) {
+  getUserVideoQuotaDailyPercentage (user: UserForList) {
     return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily
   }
 
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 e8d44a45e..c20215cf9 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,14 +1,21 @@
-<h1>
-  <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My channels</ng-container>
-</h1>
+<h1 class="d-flex justify-content-between">
+  <span>
+    <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My channels</ng-container>
+    <span class="badge badge-secondary">{{ totalItems }}</span>
+  </span>
+
+  <div class="has-feedback has-clear">
+    <input type="text" placeholder="Search your channels" i18n-placeholder [(ngModel)]="channelsSearch" (ngModelChange)="onChannelsSearchChanged()" />
+    <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="video-channels-header">
   <a class="create-button" routerLink="create">
     <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
     <ng-container i18n>Create video channel</ng-container>
   </a>
-</div>
+</h1>
 
 <div class="video-channels">
   <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
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 76fb2cde0..4ecb4f408 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
@@ -5,6 +5,10 @@
   @include create-button;
 }
 
+input[type=text] {
+  @include peertube-input-text(300px);
+}
+
 ::ng-deep .action-button {
   &.action-button-edit {
     margin-right: 10px;
@@ -55,11 +59,6 @@
   }
 }
 
-.video-channels-header {
-  text-align: right;
-  margin: 20px 0 50px;
-}
-
 ::ng-deep .chartjs-render-monitor {
   position: relative;
   top: 1px;
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 70510d7c9..da8c7298f 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
@@ -1,10 +1,11 @@
 import { ChartData } from 'chart.js'
 import { max, maxBy, min, minBy } from 'lodash-es'
-import { flatMap } from 'rxjs/operators'
+import { flatMap, debounceTime } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Subject } from 'rxjs'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -12,11 +13,16 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
   styleUrls: [ './my-account-video-channels.component.scss' ]
 })
 export class MyAccountVideoChannelsComponent implements OnInit {
+  totalItems: number
+
   videoChannels: VideoChannel[] = []
   videoChannelsChartData: ChartData[]
   videoChannelsMinimumDailyViews = 0
   videoChannelsMaximumDailyViews: number
 
+  channelsSearch: string
+  channelsSearchChanged = new Subject<string>()
+
   private user: User
 
   constructor (
@@ -32,6 +38,12 @@ export class MyAccountVideoChannelsComponent implements OnInit {
     this.user = this.authService.getUser()
 
     this.loadVideoChannels()
+
+    this.channelsSearchChanged
+      .pipe(debounceTime(500))
+      .subscribe(() => {
+        this.loadVideoChannels()
+      })
   }
 
   get isInSmallView () {
@@ -87,6 +99,15 @@ export class MyAccountVideoChannelsComponent implements OnInit {
     }
   }
 
+  resetSearch() {
+    this.channelsSearch = ''
+    this.onChannelsSearchChanged()
+  }
+
+  onChannelsSearchChanged () {
+    this.channelsSearchChanged.next()
+  }
+
   async deleteVideoChannel (videoChannel: VideoChannel) {
     const res = await this.confirmService.confirmWithInput(
       this.i18n(
@@ -118,9 +139,10 @@ export class MyAccountVideoChannelsComponent implements OnInit {
 
   private loadVideoChannels () {
     this.authService.userInformationLoaded
-        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true)))
+        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch)))
         .subscribe(res => {
           this.videoChannels = res.data
+          this.totalItems = res.total
 
           // chart data
           this.videoChannelsChartData = this.videoChannels.map(v => ({
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 9b5f2dd2f..8de152b5e 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
@@ -6,10 +6,10 @@
   </a>
 
   <div class="peertube-select-container peertube-select-button ml-2">
-    <select [(ngModel)]="notificationSortType" class="form-control">
+    <select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control">
       <option value="undefined" disabled>Sort by</option>
-      <option value="created" i18n>Newest first</option>
-      <option value="unread-created" i18n>Unread first</option>
+      <option value="createdAt" i18n>Newest first</option>
+      <option value="read" [disabled]="!hasUnreadNotifications()" i18n>Unread first</option>
     </select>
   </div>
 
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
index 8a51319fe..0ec67d401 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
@@ -1,6 +1,8 @@
 import { Component, ViewChild } from '@angular/core'
 import { UserNotificationsComponent } from '@app/shared/shared-main'
 
+type NotificationSortType = 'createdAt' | 'read'
+
 @Component({
   templateUrl: './my-account-notifications.component.html',
   styleUrls: [ './my-account-notifications.component.scss' ]
@@ -8,7 +10,17 @@ import { UserNotificationsComponent } from '@app/shared/shared-main'
 export class MyAccountNotificationsComponent {
   @ViewChild('userNotification', { static: true }) userNotification: UserNotificationsComponent
 
-  notificationSortType = 'created'
+  _notificationSortType: NotificationSortType = 'createdAt'
+
+  get notificationSortType () {
+    return !this.hasUnreadNotifications()
+      ? 'createdAt'
+      : this._notificationSortType
+  }
+
+  set notificationSortType (type: NotificationSortType) {
+    this._notificationSortType = type
+  }
 
   markAllAsRead () {
     this.userNotification.markAllAsRead()
@@ -17,4 +29,8 @@ export class MyAccountNotificationsComponent {
   hasUnreadNotifications () {
     return this.userNotification.notifications.filter(n => n.read === false).length !== 0
   }
+
+  onChangeSortColumn () {
+    this.userNotification.changeSortColumn(this.notificationSortType)
+  }
 }
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 be5d41f3b..4475178c7 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
@@ -62,7 +62,11 @@
       </td>
 
       <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
-      <td i18n>{{ videoChangeOwnership.status }}</td>
+
+      <td>
+        <span class="badge" [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
+      </td>
+
       <td class="action-cell">
         <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
           <my-button i18n-label label="Accept" icon="tick" (click)="openAcceptModal(videoChangeOwnership)"></my-button>
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss
index c04e26374..7cac9c9f3 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss
@@ -5,6 +5,10 @@
   @include chip;
 }
 
+.badge {
+  @include table-badge;
+}
+
 .video-table-video {
   display: inline-flex;
 
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
index 98360dfb3..7473470aa 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@@ -2,7 +2,7 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier, RestPagination, RestTable } from '@app/core'
 import { VideoOwnershipService, Actor, Video, Account } from '@app/shared/shared-main'
-import { VideoChangeOwnership } from '@shared/models'
+import { VideoChangeOwnership, VideoChangeOwnershipStatus } from '@shared/models'
 import { MyAccountAcceptOwnershipComponent } from './my-account-accept-ownership/my-account-accept-ownership.component'
 import { getAbsoluteAPIUrl } from '@app/helpers'
 
@@ -34,6 +34,17 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit {
     return 'MyAccountOwnershipComponent'
   }
 
+  getStatusClass (status: VideoChangeOwnershipStatus) {
+    switch (status) {
+      case VideoChangeOwnershipStatus.ACCEPTED:
+        return 'badge-green'
+      case VideoChangeOwnershipStatus.REFUSED:
+        return 'badge-red'
+      default:
+        return 'badge-yellow'
+    }
+  }
+
   switchToDefaultAvatar ($event: Event) {
     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
   }
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
index 3b4c3022e..6cec7c0d5 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
@@ -1,6 +1,15 @@
-<h1>
-  <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My subscriptions</ng-container>
+<h1 class="d-flex justify-content-between">
+  <span>
+    <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My subscriptions</ng-container>
+    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+  </span>
+
+  <div class="has-feedback has-clear">
+    <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch" (ngModelChange)="onSubscriptionsSearchChanged()" />
+    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+    <span class="sr-only" i18n>Clear filters</span>
+  </div>
 </h1>
 
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div>
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
index dd990c42b..884959070 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
 
+input[type=text] {
+  @include peertube-input-text(300px);
+}
+
 .video-channel {
   @include row-blocks;
 
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
index 390293a28..994fe5142 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit } from '@angular/core'
 import { ComponentPagination, Notifier } from '@app/core'
 import { VideoChannel } from '@app/shared/shared-main'
 import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
+import { debounceTime } from 'rxjs/operators'
 
 @Component({
   selector: 'my-account-subscriptions',
@@ -20,6 +21,9 @@ export class MyAccountSubscriptionsComponent implements OnInit {
 
   onDataSubject = new Subject<any[]>()
 
+  subscriptionsSearch: string
+  subscriptionsSearchChanged = new Subject<string>()
+
   constructor (
     private userSubscriptionService: UserSubscriptionService,
     private notifier: Notifier
@@ -27,20 +31,22 @@ export class MyAccountSubscriptionsComponent implements OnInit {
 
   ngOnInit () {
     this.loadSubscriptions()
-  }
 
-  loadSubscriptions () {
-    this.userSubscriptionService.listSubscriptions(this.pagination)
-        .subscribe(
-          res => {
-            this.videoChannels = this.videoChannels.concat(res.data)
-            this.pagination.totalItems = res.total
+    this.subscriptionsSearchChanged
+      .pipe(debounceTime(500))
+      .subscribe(() => {
+        this.pagination.currentPage = 1
+        this.loadSubscriptions(false)
+      })
+  }
 
-            this.onDataSubject.next(res.data)
-          },
+  resetSearch () {
+    this.subscriptionsSearch = ''
+    this.onSubscriptionsSearchChanged()
+  }
 
-          error => this.notifier.error(error.message)
-        )
+  onSubscriptionsSearchChanged () {
+    this.subscriptionsSearchChanged.next()
   }
 
   onNearOfBottom () {
@@ -51,4 +57,19 @@ export class MyAccountSubscriptionsComponent implements OnInit {
     this.loadSubscriptions()
   }
 
+  private loadSubscriptions (more = true) {
+    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch })
+        .subscribe(
+          res => {
+            this.videoChannels = more
+              ? this.videoChannels.concat(res.data)
+              : res.data
+            this.pagination.totalItems = res.total
+
+            this.onDataSubject.next(res.data)
+          },
+
+          error => this.notifier.error(error.message)
+        )
+  }
 }
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
index 98a2039cc..854126443 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
@@ -45,7 +45,12 @@
         <ng-container *ngIf="isVideoImportFailed(videoImport)"></ng-container>
       </td>
 
-      <td>{{ videoImport.state.label }}</td>
+      <td>
+        <span class="badge" [ngClass]="getVideoImportStateClass(videoImport.state)">
+          {{ videoImport.state.label }}
+        </span>
+      </td>
+
       <td>{{ videoImport.createdAt | date: 'short' }}</td>
 
       <td class="action-cell">
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.scss b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.scss
index bdd2f8270..a93c28028 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.scss
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.scss
@@ -7,4 +7,8 @@ pre {
 
 .video-import-error {
   color: red;
-}
\ No newline at end of file
+}
+
+.badge {
+  @include table-badge;
+}
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
index 42ddb0ee2..9dd5ef142 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
@@ -30,6 +30,19 @@ export class MyAccountVideoImportsComponent extends RestTable implements OnInit
     return 'MyAccountVideoImportsComponent'
   }
 
+  getVideoImportStateClass (state: VideoImportState) {
+    switch (state) {
+      case VideoImportState.FAILED:
+        return 'badge-red'
+      case VideoImportState.REJECTED:
+        return 'badge-banned'
+      case VideoImportState.PENDING:
+        return 'badge-yellow'
+      default:
+        return 'badge-green'
+    }
+  }
+
   isVideoImportSuccess (videoImport: VideoImport) {
     return videoImport.state.id === VideoImportState.SUCCESS
   }
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
index 8d69c3a5a..d8e3fb2fa 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
@@ -1,17 +1,20 @@
-<h1>
-  <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>
-
+<h1 class="d-flex justify-content-between">
+  <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>
 
-<div class="video-playlists-header">
-  <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
+  <div class="has-feedback has-clear">
+    <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
+    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+    <span class="sr-only" i18n>Clear filters</span>
+  </div>
 
   <a class="create-button" routerLink="create">
     <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
     <ng-container i18n>Create playlist</ng-container>
   </a>
-</div>
+</h1>
 
 <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
   <div *ngFor="let playlist of videoPlaylists" class="video-playlist">
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
index 4381d74b0..ade28c70b 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
@@ -5,6 +5,10 @@
   @include create-button;
 }
 
+input[type=text] {
+  @include peertube-input-text(300px);
+}
+
 ::ng-deep .action-button {
   &.action-button-delete {
     margin-right: 10px;
@@ -33,16 +37,6 @@
   }
 }
 
-.video-playlists-header {
-  display: flex;
-  justify-content: space-between;
-  margin: 20px 0 50px;
-
-  input[type=text] {
-    @include peertube-input-text(300px);
-  }
-}
-
 @media screen and (max-width: $small-view) {
   .video-playlists-header {
     text-align: center;
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
index ea3bcde4f..668a23d8f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
@@ -84,6 +84,11 @@ export class MyAccountVideoPlaylistsComponent implements OnInit {
     this.loadVideoPlaylists()
   }
 
+  resetSearch () {
+    this.videoPlaylistsSearch = ''
+    this.onVideoPlaylistSearchChanged()
+  }
+
   onVideoPlaylistSearchChanged () {
     this.videoPlaylistSearchChanged.next()
   }
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 6d098b507..faeb3b56c 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
@@ -1,11 +1,16 @@
-<h1>
-  <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My videos</ng-container><span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
-</h1>
+<h1 class="d-flex justify-content-between">
+  <span>
+    <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My videos</ng-container>
+    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+  </span>
 
-<div class="videos-header">
-  <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
-</div>
+  <div class="has-feedback has-clear">
+    <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
+    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+    <span class="sr-only" i18n>Clear filters</span>
+  </div>
+</h1>
 
 <my-videos-selection
   [pagination]="pagination"
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 9225fc5fd..0930b1959 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
@@ -1,14 +1,8 @@
 @import '_variables';
 @import '_mixins';
 
-.videos-header {
-  display: flex;
-  justify-content: space-between;
-  margin: 20px 0 50px;
-
-  input[type=text] {
-    @include peertube-input-text(300px);
-  }
+input[type=text] {
+  @include peertube-input-text(300px);
 }
 
 .action-button-delete-selection {
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 3cfe8fb38..2274c6a7b 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -59,13 +59,17 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
 
   ngOnInit () {
     this.videosSearchChanged
-      .pipe(
-        debounceTime(500))
+      .pipe(debounceTime(500))
       .subscribe(() => {
         this.videosSelection.reloadVideos()
       })
   }
 
+  resetSearch () {
+    this.videosSearch = ''
+    this.onVideosSearchChanged()
+  }
+
   onVideosSearchChanged () {
     this.videosSearchChanged.next()
   }
diff --git a/client/src/app/core/users/user.service.ts b/client/src/app/core/users/user.service.ts
index 5f9300bec..c98b3844c 100644
--- a/client/src/app/core/users/user.service.ts
+++ b/client/src/app/core/users/user.service.ts
@@ -381,14 +381,14 @@ export class UserService {
 
     const videoQuotaUsed = this.bytesPipe.transform(user.videoQuotaUsed, 0)
 
-    let videoQuotaDaily
-    let videoQuotaUsedDaily
+    let videoQuotaDaily: string
+    let videoQuotaUsedDaily: string
     if (user.videoQuotaDaily === -1) {
       videoQuotaDaily = '∞'
-      videoQuotaUsedDaily = this.bytesPipe.transform(0, 0)
+      videoQuotaUsedDaily = this.bytesPipe.transform(0, 0) + ''
     } else {
-      videoQuotaDaily = this.bytesPipe.transform(user.videoQuotaDaily, 0)
-      videoQuotaUsedDaily = this.bytesPipe.transform(user.videoQuotaUsedDaily || 0, 0)
+      videoQuotaDaily = this.bytesPipe.transform(user.videoQuotaDaily, 0) + ''
+      videoQuotaUsedDaily = this.bytesPipe.transform(user.videoQuotaUsedDaily || 0, 0) + ''
     }
 
     const roleLabels: { [ id in UserRole ]: string } = {
diff --git a/client/src/app/shared/shared-user-subscription/user-subscription.service.ts b/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
index 732ed6bcb..eb1fdf91c 100644
--- a/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
+++ b/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
@@ -105,13 +105,18 @@ export class UserSubscriptionService {
                )
   }
 
-  listSubscriptions (componentPagination: ComponentPaginationLight): Observable<ResultList<VideoChannel>> {
+  listSubscriptions (parameters: {
+    pagination: ComponentPaginationLight
+    search: string
+  }): Observable<ResultList<VideoChannel>> {
+    const { pagination, search } = parameters
     const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL
 
-    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+    const restPagination = this.restService.componentPaginationToRestPagination(pagination)
 
     let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination)
+    params = this.restService.addRestGetParams(params, restPagination)
+    if (search) params = params.append('search', search)
 
     return this.authHttp.get<ResultList<VideoChannelServer>>(url, { params })
                .pipe(
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 897182e53..8b7eab366 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -310,6 +310,7 @@ ngb-tooltip-window {
     position: absolute;
     right: .5rem;
     height: 95%;
+    font-size: 14px;
 
     &:hover {
       color: rgba(0, 0, 0, 0.7);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 75fe2ab11..0fb54f121 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -690,12 +690,11 @@
   overflow: hidden;
   font-size: 0.75rem;
   border-radius: 0.25rem;
-  isolation: isolate;
   position: relative;
 
   span {
     position: absolute;
-    color: rgb(92, 92, 92);
+    color: $grey-foreground-color;
     top: -1px;
 
     &:nth-of-type(1) {