Refactor search filters

client/src/app/+admin/follows/followers-list/followers-list.component.html

@@ -4,20 +4,16 @@
 </h1>
 
 <p-table
-  [value]="followers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="followers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onPage)="onPage($event)"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} followers"
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <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>
   </ng-template>

client/src/app/+admin/follows/followers-list/followers-list.component.scss

@@ -1,14 +1,6 @@
 @import '_variables';
 @import '_mixins';
 
-.caption {
-  justify-content: flex-end;
-
-  input {
-    @include peertube-input-text(250px);
-  }
-}
-
 a {
   @include disable-default-a-behaviour;
   display: inline-block;

client/src/app/+admin/follows/followers-list/followers-list.component.ts

@@ -59,7 +59,7 @@ export class FollowersListComponent extends RestTable implements OnInit {
             const handle = follow.follower.name + '@' + follow.follower.host
             this.notifier.success($localize`${handle} rejected from instance followers`)
 
-            this.loadData()
+            this.reloadData()
           },
 
           err => {
@@ -80,14 +80,14 @@ export class FollowersListComponent extends RestTable implements OnInit {
             const handle = follow.follower.name + '@' + follow.follower.host
             this.notifier.success($localize`${handle} removed from instance followers`)
 
-            this.loadData()
+            this.reloadData()
           },
 
           err => this.notifier.error(err.message)
         )
   }
 
-  protected loadData () {
+  protected reloadData () {
     this.followService.getFollowers({ pagination: this.pagination, sort: this.sort, search: this.search })
                       .subscribe(
                         resultList => {

client/src/app/+admin/follows/following-list/following-list.component.html

@@ -4,8 +4,9 @@
 </h1>
 
 <p-table
-  [value]="following" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} hosts"
 >
@@ -18,13 +19,8 @@
         </a>
       </div>
 
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <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>
   </ng-template>

client/src/app/+admin/follows/following-list/following-list.component.scss

@@ -16,14 +16,6 @@ a {
   }
 }
 
-.caption {
-  justify-content: flex-end;
-
-  input {
-    @include peertube-input-text(250px);
-  }
-}
-
 .follow-button {
   @include create-button;
 }

client/src/app/+admin/follows/following-list/following-list.component.ts

@@ -45,7 +45,7 @@ export class FollowingListComponent extends RestTable implements OnInit {
     this.followService.follow(hosts).subscribe(
       () => {
         this.notifier.success($localize`Follow request(s) sent!`)
-        this.loadData()
+        this.reloadData()
       },
 
       err => this.notifier.error(err.message)
@@ -62,14 +62,14 @@ export class FollowingListComponent extends RestTable implements OnInit {
     this.followService.unfollow(follow).subscribe(
       () => {
         this.notifier.success($localize`You are not following ${follow.following.host} anymore.`)
-        this.loadData()
+        this.reloadData()
       },
 
       err => this.notifier.error(err.message)
     )
   }
 
-  protected loadData () {
+  protected reloadData () {
     this.followService.getFollowing({ pagination: this.pagination, sort: this.sort, search: this.search })
                       .subscribe(
                         resultList => {

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts

@@ -78,7 +78,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
     this.pagination.start = 0
     this.saveSelectLocalStorage()
 
-    this.loadData()
+    this.reloadData()
   }
 
   getRedundancyStrategy (redundancy: VideoRedundancy) {
@@ -145,7 +145,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
       .subscribe(
         () => {
           this.notifier.success($localize`Video redundancies removed!`)
-          this.loadData()
+          this.reloadData()
         },
 
         err => this.notifier.error(err.message)
@@ -153,7 +153,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
 
   }
 
-  protected loadData () {
+  protected reloadData () {
     const options = {
       pagination: this.pagination,
       sort: this.sort,

client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html

@@ -1,18 +1,14 @@
 <p-table
-  [value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="blockedAccounts" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onPage)="onPage($event)"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted accounts"
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <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>
   </ng-template>

client/src/app/+admin/moderation/video-block-list/video-block-list.component.html

@@ -4,8 +4,9 @@
 </h1>
 
 <p-table
-  [value]="blocklist" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="blocklist" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} blocked videos"
   (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@@ -13,7 +14,7 @@
   <ng-template pTemplate="caption">
     <div class="caption">
       <div class="ml-auto">
-        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
   </ng-template>

client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss

@@ -5,23 +5,6 @@ my-global-icon {
   height: 24px;
 }
 
-.input-group {
-  @include peertube-input-group(300px);
-
-  .dropdown-toggle::after {
-    margin-left: 0;
-  }
-}
-
-.caption {
-  justify-content: flex-end;
-
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
-
 .badge {
   @include table-badge;
 }

client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts

@@ -2,9 +2,9 @@ import { SortMeta } from 'primeng/api'
 import { switchMap } from 'rxjs/operators'
 import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
 import { environment } from 'src/environments/environment'
-import { AfterViewInit, Component, OnInit } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
-import { ActivatedRoute, Params, Router } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
@@ -16,7 +16,7 @@ import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
   templateUrl: './video-block-list.component.html',
   styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ]
 })
-export class VideoBlockListComponent extends RestTable implements OnInit, AfterViewInit {
+export class VideoBlockListComponent extends RestTable implements OnInit {
   blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = []
   totalRecords = 0
   sort: SortMeta = { field: 'createdAt', order: -1 }
@@ -64,7 +64,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
             ).subscribe(
               () => {
                 this.notifier.success($localize`Video ${videoBlock.video.name} switched to manual block.`)
-                this.loadData()
+                this.reloadData()
               },
 
               err => this.notifier.error(err.message)
@@ -116,11 +116,6 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
         })
 
     this.initialize()
-    this.listenToSearchChange()
-  }
-
-  ngAfterViewInit () {
-    if (this.search) this.setTableFilter(this.search, false)
   }
 
   getIdentifier () {
@@ -144,7 +139,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
     this.videoBlocklistService.unblockVideo(entry.video.id).subscribe(
       () => {
         this.notifier.success($localize`Video ${entry.video.name} unblocked.`)
-        this.loadData()
+        this.reloadData()
       },
 
       err => this.notifier.error(err.message)
@@ -162,7 +157,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
     )
   }
 
-  protected loadData () {
+  protected reloadData () {
     this.videoBlocklistService.listBlocks({
       pagination: this.pagination,
       sort: this.sort,

client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html

@@ -8,8 +8,9 @@
 <em i18n>This view also shows comments from muted accounts.</em>
 
 <p-table
-  [value]="comments" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="comments" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} comments"
   (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@@ -26,7 +27,7 @@
       </div>
 
       <div class="ml-auto">
-        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
   </ng-template>

client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss

@@ -11,23 +11,6 @@ my-global-icon {
   height: 24px;
 }
 
-.input-group {
-  @include peertube-input-group(300px);
-
-  .dropdown-toggle::after {
-    margin-left: 0;
-  }
-}
-
-.caption {
-  justify-content: flex-end;
-
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
-
 .video {
   display: flex;
   flex-direction: column;

client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts

@@ -13,9 +13,7 @@ import { FeedFormat, UserRight } from '@shared/models'
   templateUrl: './video-comment-list.component.html',
   styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-comment-list.component.scss' ]
 })
-export class VideoCommentListComponent extends RestTable implements OnInit, AfterViewInit {
+export class VideoCommentListComponent extends RestTable implements OnInit {
-  baseRoute = '/admin/moderation/video-comments/list'
-
   comments: VideoCommentAdmin[]
   totalRecords = 0
   sort: SortMeta = { field: 'createdAt', order: -1 }
@@ -91,7 +89,6 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
 
   ngOnInit () {
     this.initialize()
-    this.listenToSearchChange()
 
     this.bulkCommentActions = [
       {
@@ -103,10 +100,6 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
     ]
   }
 
-  ngAfterViewInit () {
-    if (this.search) this.setTableFilter(this.search, false)
-  }
-
   getIdentifier () {
     return 'VideoCommentListComponent'
   }
@@ -119,7 +112,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
     return this.selectedComments.length !== 0
   }
 
-  protected loadData () {
+  protected reloadData () {
     this.videoCommentService.getAdminVideoComments({
       pagination: this.pagination,
       sort: this.sort,
@@ -147,7 +140,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
     this.videoCommentService.deleteVideoComments(commentArgs).subscribe(
       () => {
         this.notifier.success($localize`${commentArgs.length} comments deleted.`)
-        this.loadData()
+        this.reloadData()
       },
 
       err => this.notifier.error(err.message),
@@ -159,7 +152,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
   private deleteComment (comment: VideoCommentAdmin) {
     this.videoCommentService.deleteVideoComment(comment.video.id, comment.id)
       .subscribe(
-        () => this.loadData(),
+        () => this.reloadData(),
 
         err => this.notifier.error(err.message)
       )

client/src/app/+admin/system/jobs/jobs.component.ts

@@ -86,7 +86,7 @@ export class JobsComponent extends RestTable implements OnInit {
   onJobStateOrTypeChanged () {
     this.pagination.start = 0
 
-    this.loadData()
+    this.reloadData()
     this.saveJobStateAndType()
   }
 
@@ -104,10 +104,10 @@ export class JobsComponent extends RestTable implements OnInit {
     this.jobs = []
     this.totalRecords = 0
 
-    this.loadData()
+    this.reloadData()
   }
 
-  protected loadData () {
+  protected reloadData () {
     let jobState = this.jobState as JobState
     if (this.jobState === 'all') jobState = null
 

client/src/app/+admin/users/user-list/user-list.component.html

@@ -1,7 +1,7 @@
 <p-table
-  [value]="users" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
+  [sortField]="sort.field" [sortOrder]="sort.order"  dataKey="id" [resizableColumns]="true" [(selection)]="selectedUsers"
-  [(selection)]="selectedUsers"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} users"
   (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@@ -22,7 +22,7 @@
       </div>
 
       <div class="ml-auto">
-        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
 
     </div>

client/src/app/+admin/users/user-list/user-list.component.ts

@@ -1,5 +1,5 @@
 import { SortMeta } from 'primeng/api'
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
@@ -19,7 +19,7 @@ type UserForList = User & {
   templateUrl: './user-list.component.html',
   styleUrls: [ './user-list.component.scss' ]
 })
-export class UserListComponent extends RestTable implements OnInit, AfterViewInit {
+export class UserListComponent extends RestTable implements OnInit {
   @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
 
   users: User[] = []
@@ -78,7 +78,6 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
         .subscribe(config => this.serverConfig = config)
 
     this.initialize()
-    this.listenToSearchChange()
 
     this.bulkUserActions = [
       [
@@ -127,10 +126,6 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
     this.columns.push({ id: 'lastLoginDate', label: 'Last login' })
   }
 
-  ngAfterViewInit () {
-    if (this.search) this.setTableFilter(this.search, false)
-  }
-
   getIdentifier () {
     return 'UserListComponent'
   }
@@ -174,7 +169,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
   }
 
   onUserChanged () {
-    this.loadData()
+    this.reloadData()
   }
 
   async unbanUsers (users: User[]) {
@@ -185,7 +180,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
         .subscribe(
           () => {
             this.notifier.success($localize`${users.length} users unbanned.`)
-            this.loadData()
+            this.reloadData()
           },
 
           err => this.notifier.error(err.message)
@@ -207,7 +202,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
     this.userService.removeUser(users).subscribe(
       () => {
         this.notifier.success($localize`${users.length} users deleted.`)
-        this.loadData()
+        this.reloadData()
       },
 
       err => this.notifier.error(err.message)
@@ -218,7 +213,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
     this.userService.updateUsers(users, { emailVerified: true }).subscribe(
       () => {
         this.notifier.success($localize`${users.length} users email set as verified.`)
-        this.loadData()
+        this.reloadData()
       },
 
       err => this.notifier.error(err.message)
@@ -229,7 +224,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
     return this.selectedUsers.length !== 0
   }
 
-  protected loadData () {
+  protected reloadData () {
     this.selectedUsers = []
 
     this.userService.getUsers({

client/src/app/+my-library/+my-video-channels/my-video-channels.component.html

@@ -5,12 +5,7 @@
 </h1>
 
 <div class="video-channels-header d-flex justify-content-between">
-  <div class="has-feedback has-clear">
+  <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-    <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>
 
   <a class="create-button" routerLink="create">
     <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>

client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts

@@ -1,29 +1,26 @@
 import { ChartData } from 'chart.js'
 import { max, maxBy, min, minBy } from 'lodash-es'
-import { Subject } from 'rxjs'
+import { mergeMap } from 'rxjs/operators'
-import { debounceTime, mergeMap } from 'rxjs/operators'
+import { Component } from '@angular/core'
-import { Component, OnInit } from '@angular/core'
+import { AuthService, ConfirmService, Notifier, ScreenService } from '@app/core'
-import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 
 @Component({
   templateUrl: './my-video-channels.component.html',
   styleUrls: [ './my-video-channels.component.scss' ]
 })
-export class MyVideoChannelsComponent implements OnInit {
+export class MyVideoChannelsComponent {
   totalItems: number
 
   videoChannels: VideoChannel[] = []
+
   videoChannelsChartData: ChartData[]
   videoChannelsMinimumDailyViews = 0
   videoChannelsMaximumDailyViews: number
 
-  channelsSearch: string
-  channelsSearchChanged = new Subject<string>()
-
   chartOptions: any
 
-  private user: User
+  search: string
 
   constructor (
     private authService: AuthService,
@@ -31,31 +28,15 @@ export class MyVideoChannelsComponent implements OnInit {
     private confirmService: ConfirmService,
     private videoChannelService: VideoChannelService,
     private screenService: ScreenService
-    ) {}
+  ) {}
-
-  ngOnInit () {
-    this.user = this.authService.getUser()
-
-    this.loadVideoChannels()
-
-    this.channelsSearchChanged
-      .pipe(debounceTime(500))
-      .subscribe(() => {
-        this.loadVideoChannels()
-      })
-  }
 
   get isInSmallView () {
     return this.screenService.isInSmallView()
   }
 
-  resetSearch () {
+  onSearch (search: string) {
-    this.channelsSearch = ''
+    this.search = search
-    this.onChannelsSearchChanged()
+    this.loadVideoChannels()
-  }
-
-  onChannelsSearchChanged () {
-    this.channelsSearchChanged.next()
   }
 
   async deleteVideoChannel (videoChannel: VideoChannel) {
@@ -85,8 +66,11 @@ channel with the same name (${videoChannel.name})!`,
 
   private loadVideoChannels () {
     this.authService.userInformationLoaded
-        .pipe(mergeMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch)))
+        .pipe(mergeMap(() => {
-        .subscribe(res => {
+          const user = this.authService.getUser()
+
+          return this.videoChannelService.listAccountVideoChannels(user.account, null, true, this.search)
+        })).subscribe(res => {
           this.videoChannels = res.data
           this.totalItems = res.total
 

client/src/app/+my-library/my-history/my-history.component.html

@@ -5,14 +5,7 @@
 
 <div class="top-buttons">
   <div class="search-wrapper">
-    <div class="input-group has-feedback has-clear">
+    <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-      <input
-        type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
-        (keyup)="onSearch($event)"
-      >
-      <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>
 
   <div class="history-switch">
@@ -26,14 +19,15 @@
   </button>
 </div>
 
-
+<my-videos-selection
-<div class="no-history" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">You don't have any video in your watch history yet.</div>
+  [pagination]="pagination"
-
+  [(videosModel)]="videos"
-<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos">
+  [miniatureDisplayOptions]="miniatureDisplayOptions"
-  <div class="video" *ngFor="let video of videos">
+  [titlePage]="titlePage"
-    <my-video-miniature
+  [getVideosObservableFunction]="getVideosObservableFunction"
-      [video]="video" [displayAsRow]="true"
+  [user]="user"
-      (videoRemoved)="removeVideoFromArray(video)" (videoBlocked)="removeVideoFromArray(video)"
+  [loadOnInit]="false"
-    ></my-video-miniature>
+  i18n-noResultMessage noResultMessage="You don't have any video in your watch history yet."
-  </div>
+  [enableSelection]="false"
-</div>
+  #videosSelection
+></my-videos-selection>

client/src/app/+my-library/my-history/my-history.component.ts

@@ -1,36 +1,55 @@
-import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
+import { Subject } from 'rxjs'
+import { tap } from 'rxjs/operators'
+import { Component, ComponentFactoryResolver, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
   AuthService,
   ComponentPagination,
   ConfirmService,
+  DisableForReuseHook,
   LocalStorageService,
   Notifier,
   ScreenService,
   ServerService,
+  User,
   UserService
 } from '@app/core'
 import { immutableAssign } from '@app/helpers'
-import { UserHistoryService } from '@app/shared/shared-main'
+import { UserHistoryService, Video } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { MiniatureDisplayOptions, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
-import { Subject } from 'rxjs'
-import { debounceTime, tap, distinctUntilChanged } from 'rxjs/operators'
 
 @Component({
   templateUrl: './my-history.component.html',
   styleUrls: [ './my-history.component.scss' ]
 })
-export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy {
+export class MyHistoryComponent implements OnInit, DisableForReuseHook {
+  @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
+
   titlePage: string
   pagination: ComponentPagination = {
     currentPage: 1,
     itemsPerPage: 5,
     totalItems: null
   }
-  videosHistoryEnabled: boolean
-  search: string
 
-  protected searchStream: Subject<string>
+  videosHistoryEnabled: boolean
+
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    privacyLabel: false,
+    privacyText: true,
+    state: true,
+    blacklistInfo: true
+  }
+
+  getVideosObservableFunction = this.getVideosObservable.bind(this)
+
+  user: User
+
+  videos: Video[] = []
+  search: string
 
   constructor (
     protected router: Router,
@@ -45,45 +64,31 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
     private userHistoryService: UserHistoryService,
     protected cfr: ComponentFactoryResolver
   ) {
-    super()
-
     this.titlePage = $localize`My watch history`
   }
 
   ngOnInit () {
-    super.ngOnInit()
+    this.user = this.authService.getUser()
 
     this.authService.userInformationLoaded
-      .subscribe(() => {
+      .subscribe(() => this.videosHistoryEnabled = this.user.videosHistoryEnabled)
-        this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled
-      })
-
-    this.searchStream = new Subject()
-
-    this.searchStream
-      .pipe(
-        debounceTime(400),
-        distinctUntilChanged()
-      )
-      .subscribe(search => {
-        this.search = search
-        this.reloadVideos()
-      })
   }
 
-  onSearch (event: Event) {
+  disableForReuse () {
-    const target = event.target as HTMLInputElement
+    this.videosSelection.disableForReuse()
-    this.searchStream.next(target.value)
   }
 
-  resetSearch () {
+  enabledForReuse () {
-    const searchInput = document.getElementById('history-search') as HTMLInputElement
+    this.videosSelection.enabledForReuse()
-    searchInput.value = ''
-    this.searchStream.next('')
   }
 
-  ngOnDestroy () {
+  reloadData () {
-    super.ngOnDestroy()
+    this.videosSelection.reloadVideos()
+  }
+
+  onSearch (search: string) {
+    this.search = search
+    this.reloadData()
   }
 
   getVideosObservable (page: number) {
@@ -129,7 +134,7 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
           () => {
             this.notifier.success($localize`Videos history deleted`)
 
-            this.reloadVideos()
+            this.reloadData()
           },
 
           err => this.notifier.error(err.message)

client/src/app/+my-library/my-ownership/my-ownership.component.ts

@@ -48,18 +48,18 @@ export class MyOwnershipComponent extends RestTable implements OnInit {
   }
 
   accepted () {
-    this.loadData()
+    this.reloadData()
   }
 
   refuse (videoChangeOwnership: VideoChangeOwnership) {
     this.videoOwnershipService.refuseOwnership(videoChangeOwnership.id)
       .subscribe(
-        () => this.loadData(),
+        () => this.reloadData(),
         err => this.notifier.error(err.message)
       )
   }
 
-  protected loadData () {
+  protected reloadData () {
     return this.videoOwnershipService.getOwnershipChanges(this.pagination, this.sort)
       .subscribe(
         resultList => {

client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html

@@ -7,12 +7,7 @@
 </h1>
 
 <div class="video-subscriptions-header">
-  <div class="has-feedback has-clear">
+  <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-    <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>
 </div>
 
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>

client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss

@@ -58,6 +58,7 @@ input[type=text] {
 
 .video-subscriptions-header {
   margin-bottom: 30px;
+  display: flex;
 }
 
 @media screen and (max-width: $small-view) {

client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts

@@ -1,6 +1,5 @@
 import { Subject } from 'rxjs'
-import { debounceTime } from 'rxjs/operators'
+import { Component } from '@angular/core'
-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'
@@ -9,7 +8,7 @@ import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
   templateUrl: './my-subscriptions.component.html',
   styleUrls: [ './my-subscriptions.component.scss' ]
 })
-export class MySubscriptionsComponent implements OnInit {
+export class MySubscriptionsComponent {
   videoChannels: VideoChannel[] = []
 
   pagination: ComponentPagination = {
@@ -20,34 +19,13 @@ export class MySubscriptionsComponent implements OnInit {
 
   onDataSubject = new Subject<any[]>()
 
-  subscriptionsSearch: string
+  search: string
-  subscriptionsSearchChanged = new Subject<string>()
 
   constructor (
     private userSubscriptionService: UserSubscriptionService,
     private notifier: Notifier
   ) {}
 
-  ngOnInit () {
-    this.loadSubscriptions()
-
-    this.subscriptionsSearchChanged
-      .pipe(debounceTime(500))
-      .subscribe(() => {
-        this.pagination.currentPage = 1
-        this.loadSubscriptions(false)
-      })
-  }
-
-  resetSearch () {
-    this.subscriptionsSearch = ''
-    this.onSubscriptionsSearchChanged()
-  }
-
-  onSubscriptionsSearchChanged () {
-    this.subscriptionsSearchChanged.next()
-  }
-
   onNearOfBottom () {
     // Last page
     if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
@@ -56,8 +34,13 @@ export class MySubscriptionsComponent implements OnInit {
     this.loadSubscriptions()
   }
 
+  onSearch (search: string) {
+    this.search = search
+    this.loadSubscriptions(false)
+  }
+
   private loadSubscriptions (more = true) {
-    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch })
+    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search })
         .subscribe(
           res => {
             this.videoChannels = more

client/src/app/+my-library/my-video-imports/my-video-imports.component.ts

@@ -62,7 +62,7 @@ export class MyVideoImportsComponent extends RestTable implements OnInit {
     return '/videos/update/' + video.uuid
   }
 
-  protected loadData () {
+  protected reloadData () {
     this.videoImportService.getMyVideoImports(this.pagination, this.sort)
         .subscribe(
           resultList => {

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html

@@ -4,12 +4,7 @@
 </h1>
 
 <div class="video-playlists-header d-flex justify-content-between">
-  <div class="has-feedback has-clear">
+  <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-    <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>

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts

@@ -1,7 +1,7 @@
 import { Subject } from 'rxjs'
-import { debounceTime, mergeMap } from 'rxjs/operators'
+import { mergeMap } from 'rxjs/operators'
-import { Component, OnInit } from '@angular/core'
+import { Component } from '@angular/core'
-import { AuthService, ComponentPagination, ConfirmService, Notifier, User } from '@app/core'
+import { AuthService, ComponentPagination, ConfirmService, Notifier } from '@app/core'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { VideoPlaylistType } from '@shared/models'
 
@@ -9,10 +9,8 @@ import { VideoPlaylistType } from '@shared/models'
   templateUrl: './my-video-playlists.component.html',
   styleUrls: [ './my-video-playlists.component.scss' ]
 })
-export class MyVideoPlaylistsComponent implements OnInit {
+export class MyVideoPlaylistsComponent {
-  videoPlaylistsSearch: string
   videoPlaylists: VideoPlaylist[] = []
-  videoPlaylistSearchChanged = new Subject<string>()
 
   pagination: ComponentPagination = {
     currentPage: 1,
@@ -22,27 +20,14 @@ export class MyVideoPlaylistsComponent implements OnInit {
 
   onDataSubject = new Subject<any[]>()
 
-  private user: User
+  search: string
 
   constructor (
     private authService: AuthService,
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private videoPlaylistService: VideoPlaylistService
-    ) {}
+  ) {}
-
-  ngOnInit () {
-    this.user = this.authService.getUser()
-
-    this.loadVideoPlaylists()
-
-    this.videoPlaylistSearchChanged
-      .pipe(
-        debounceTime(500))
-      .subscribe(() => {
-        this.loadVideoPlaylists(true)
-      })
-  }
 
   async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) {
     const res = await this.confirmService.confirm(
@@ -76,22 +61,20 @@ export class MyVideoPlaylistsComponent implements OnInit {
     this.loadVideoPlaylists()
   }
 
-  resetSearch () {
+  onSearch (search: string) {
-    this.videoPlaylistsSearch = ''
+    this.search = search
-    this.onVideoPlaylistSearchChanged()
+    this.loadVideoPlaylists(true)
-  }
-
-  onVideoPlaylistSearchChanged () {
-    this.videoPlaylistSearchChanged.next()
   }
 
   private loadVideoPlaylists (reset = false) {
     this.authService.userInformationLoaded
         .pipe(mergeMap(() => {
-          return this.videoPlaylistService.listAccountPlaylists(this.user.account, this.pagination, '-updatedAt', this.videoPlaylistsSearch)
+          const user = this.authService.getUser()
-        }))
+
-        .subscribe(res => {
+          return this.videoPlaylistService.listAccountPlaylists(user.account, this.pagination, '-updatedAt', this.search)
+        })).subscribe(res => {
           if (reset) this.videoPlaylists = []
+
           this.videoPlaylists = this.videoPlaylists.concat(res.data)
           this.pagination.totalItems = res.total
 

client/src/app/+my-library/my-videos/my-videos.component.html

@@ -19,7 +19,7 @@
 </h1>
 
 <div class="videos-header d-flex justify-content-between">
-  <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
+  <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
 
   <div class="peertube-select-container peertube-select-button">
     <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
@@ -41,6 +41,7 @@
   [titlePage]="titlePage"
   [getVideosObservableFunction]="getVideosObservableFunction"
   [user]="user"
+  [loadOnInit]="false"
   #videosSelection
 >
   <ng-template ptTemplate="globalButtons">
@@ -59,6 +60,5 @@
   </ng-template>
 </my-videos-selection>
 
-
 <my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
 <my-live-stream-information #liveStreamInformationModal></my-live-stream-information>

client/src/app/+my-library/my-videos/my-videos.component.ts

@@ -1,8 +1,8 @@
 import { concat, Observable } from 'rxjs'
 import { tap, toArray } from 'rxjs/operators'
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, ComponentPagination, ConfirmService, Notifier, RouteFilter, ScreenService, ServerService, User } 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 { AdvancedInputFilter } from '@app/shared/shared-forms'
@@ -16,7 +16,7 @@ import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.c
   templateUrl: './my-videos.component.html',
   styleUrls: [ './my-videos.component.scss' ]
 })
-export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewInit, DisableForReuseHook {
+export class MyVideosComponent implements OnInit, DisableForReuseHook {
   @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
   @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
   @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent
@@ -42,6 +42,7 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
 
   videos: Video[] = []
   getVideosObservableFunction = this.getVideosObservable.bind(this)
+
   sort: VideoSortField = '-publishedAt'
 
   user: User
@@ -53,6 +54,8 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
     }
   ]
 
+  private search: string
+
   constructor (
     protected router: Router,
     protected serverService: ServerService,
@@ -63,8 +66,6 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
     private confirmService: ConfirmService,
     private videoService: VideoService
   ) {
-    super()
-
     this.titlePage = $localize`My videos`
   }
 
@@ -72,16 +73,14 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
     this.buildActions()
 
     this.user = this.authService.getUser()
-
-    this.initSearch()
-    this.listenToSearchChange()
   }
 
-  ngAfterViewInit () {
+  onSearch (search: string) {
-    if (this.search) this.setTableFilter(this.search, false)
+    this.search = search
+    this.reloadData()
   }
 
-  loadData () {
+  reloadData () {
     this.videosSelection.reloadVideos()
   }
 

client/src/app/core/rest/rest-table.ts

@@ -1,25 +1,22 @@
 import * as debug from 'debug'
 import { LazyLoadEvent, SortMeta } from 'primeng/api'
-import { Subject } from 'rxjs'
 import { ActivatedRoute, Router } from '@angular/router'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
-import { RouteFilter } from '../routing'
 import { RestPagination } from './rest-pagination'
 
 const logger = debug('peertube:tables:RestTable')
 
-export abstract class RestTable extends RouteFilter {
+export abstract class RestTable {
 
   abstract totalRecords: number
   abstract sort: SortMeta
   abstract pagination: RestPagination
 
-  search: string
   rowsPerPageOptions = [ 10, 20, 50, 100 ]
   rowsPerPage = this.rowsPerPageOptions[0]
   expandedRows = {}
 
-  protected searchStream: Subject<string>
+  search: string
 
   protected route: ActivatedRoute
   protected router: Router
@@ -28,7 +25,6 @@ export abstract class RestTable extends RouteFilter {
 
   initialize () {
     this.loadSort()
-    this.initSearch()
   }
 
   loadSort () {
@@ -56,7 +52,7 @@ export abstract class RestTable extends RouteFilter {
       count: this.rowsPerPage
     }
 
-    this.loadData()
+    this.reloadData()
     this.saveSort()
   }
 
@@ -74,13 +70,18 @@ export abstract class RestTable extends RouteFilter {
         count: this.rowsPerPage
       }
 
-      this.loadData()
+      this.reloadData()
     }
 
     this.expandedRows = {}
   }
 
-  protected abstract loadData (): void
+  onSearch (search: string) {
+    this.search = search
+    this.reloadData()
+  }
+
+  protected abstract reloadData (): void
 
   private getSortLocalStorageKey () {
     return 'rest-table-sort-' + this.getIdentifier()

client/src/app/core/routing/index.ts

@@ -5,7 +5,6 @@ export * from './login-guard.service'
 export * from './menu-guard.service'
 export * from './preload-selected-modules-list'
 export * from './redirect.service'
-export * from './route-filter'
 export * from './server-config-resolver.service'
 export * from './unlogged-guard.service'
 export * from './user-right-guard.service'

client/src/app/core/routing/route-filter.ts

@@ -1,79 +0,0 @@
-import * as debug from 'debug'
-import { Subject } from 'rxjs'
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
-import { ActivatedRoute, Params, Router } from '@angular/router'
-
-const logger = debug('peertube:tables:RouteFilter')
-
-export abstract class RouteFilter {
-  search: string
-
-  protected searchStream: Subject<string>
-
-  protected route: ActivatedRoute
-  protected router: Router
-
-  initSearch () {
-    this.searchStream = new Subject()
-
-    this.searchStream
-      .pipe(
-        debounceTime(200),
-        distinctUntilChanged()
-      )
-      .subscribe(search => {
-        this.search = search
-
-        logger('On search %s.', this.search)
-
-        this.loadData()
-      })
-  }
-
-  onSearch (event: Event) {
-    const target = event.target as HTMLInputElement
-    this.searchStream.next(target.value)
-
-    this.setQueryParams(target.value)
-  }
-
-  resetTableFilter () {
-    this.setTableFilter('')
-    this.setQueryParams('')
-    this.resetSearch()
-  }
-
-  resetSearch () {
-    this.searchStream.next('')
-    this.setTableFilter('')
-  }
-
-  listenToSearchChange () {
-    this.route.queryParams
-      .subscribe(params => {
-        this.search = params.search || ''
-
-        // Primeng table will run an event to load data
-        this.setTableFilter(this.search)
-      })
-  }
-
-  setTableFilter (filter: string, triggerEvent = true) {
-    // FIXME: cannot use ViewChild, so create a component for the filter input
-    const filterInput = document.getElementById('table-filter') as HTMLInputElement
-    if (!filterInput) return
-
-    filterInput.value = filter
-
-    if (triggerEvent) filterInput.dispatchEvent(new Event('keyup'))
-  }
-
-  protected abstract loadData (): void
-
-  private setQueryParams (search: string) {
-    const queryParams: Params = {}
-
-    if (search) Object.assign(queryParams, { search })
-    this.router.navigate([ ], { queryParams })
-  }
-}

client/src/app/shared/shared-abuse-list/abuse-list-table.component.html

@@ -1,6 +1,7 @@
 <p-table
-  [value]="abuses" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="abuses" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
+  [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id" [resizableColumns]="true"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
   (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@@ -8,7 +9,7 @@
   <ng-template pTemplate="caption">
     <div class="caption">
       <div class="ml-auto">
-        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
   </ng-template>

client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts

@@ -3,7 +3,7 @@ import truncate from 'lodash-es/truncate'
 import { SortMeta } from 'primeng/api'
 import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
 import { environment } from 'src/environments/environment'
-import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
@@ -11,10 +11,10 @@ import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared
 import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
 import { VideoCommentService } from '@app/shared/shared-video-comment'
 import { AbuseState, AdminAbuse } from '@shared/models'
+import { AdvancedInputFilter } from '../shared-forms'
 import { AbuseMessageModalComponent } from './abuse-message-modal.component'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
 import { ProcessedAbuse } from './processed-abuse.model'
-import { AdvancedInputFilter } from '../shared-forms'
 
 const logger = debug('peertube:moderation:AbuseListTableComponent')
 
@@ -23,7 +23,7 @@ const logger = debug('peertube:moderation:AbuseListTableComponent')
   templateUrl: './abuse-list-table.component.html',
   styleUrls: [ '../shared-moderation/moderation.scss', './abuse-list-table.component.scss' ]
 })
-export class AbuseListTableComponent extends RestTable implements OnInit, AfterViewInit {
+export class AbuseListTableComponent extends RestTable implements OnInit {
   @Input() viewType: 'admin' | 'user'
 
   @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent
@@ -89,11 +89,6 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
     ]
 
     this.initialize()
-    this.listenToSearchChange()
-  }
-
-  ngAfterViewInit () {
-    if (this.search) this.setTableFilter(this.search, false)
   }
 
   isAdminView () {
@@ -109,7 +104,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
   }
 
   onModerationCommentUpdated () {
-    this.loadData()
+    this.reloadData()
   }
 
   isAbuseAccepted (abuse: AdminAbuse) {
@@ -152,7 +147,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
     this.abuseService.removeAbuse(abuse).subscribe(
       () => {
         this.notifier.success($localize`Abuse deleted.`)
-        this.loadData()
+        this.reloadData()
       },
 
       err => this.notifier.error(err.message)
@@ -162,7 +157,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
   updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
     this.abuseService.updateAbuse(abuse, { state })
       .subscribe(
-        () => this.loadData(),
+        () => this.reloadData(),
 
         err => this.notifier.error(err.message)
       )
@@ -189,7 +184,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
     return Actor.IS_LOCAL(abuse.reporterAccount.host)
   }
 
-  protected loadData () {
+  protected reloadData () {
     logger('Loading data.')
 
     const options = {

client/src/app/shared/shared-forms/advanced-input-filter.component.html

@@ -1,5 +1,5 @@
 <div class="input-group has-feedback has-clear">
-  <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+  <div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
     <div class="input-group-text" ngbDropdownToggle>
       <span class="caret" aria-haspopup="menu" role="button"></span>
     </div>
@@ -10,13 +10,15 @@
       <a *ngFor="let filter of filters" [routerLink]="[ '.' ]" [queryParams]="filter.queryParams" class="dropdown-item">
         {{ filter.label }}
       </a>
-
     </div>
   </div>
+
   <input
     type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-    (keyup)="onSearch($event)"
+    [(ngModel)]="searchValue"
+    (keyup)="onInputSearch($event)"
   >
+
   <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
   <span class="sr-only" i18n>Clear filters</span>
 </div>

client/src/app/shared/shared-forms/advanced-input-filter.component.ts

@@ -1,27 +1,88 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import * as debug from 'debug'
-import { Params } from '@angular/router'
+import { Subject } from 'rxjs'
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
 
 export type AdvancedInputFilter = {
   label: string
   queryParams: Params
 }
 
+const logger = debug('peertube:AdvancedInputFilterComponent')
+
 @Component({
   selector: 'my-advanced-input-filter',
   templateUrl: './advanced-input-filter.component.html',
   styleUrls: [ './advanced-input-filter.component.scss' ]
 })
-export class AdvancedInputFilterComponent {
+export class AdvancedInputFilterComponent implements OnInit {
   @Input() filters: AdvancedInputFilter[] = []
 
-  @Output() resetTableFilter = new EventEmitter<void>()
+  @Output() search = new EventEmitter<string>()
-  @Output() search = new EventEmitter<Event>()
 
-  onSearch (event: Event) {
+  searchValue: string
-    this.search.emit(event)
+
+  private searchStream: Subject<string>
+
+  constructor (
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+
+  ngOnInit () {
+    this.initSearchStream()
+    this.listenToRouteSearchChange()
+  }
+
+  onInputSearch (event: Event) {
+    this.updateSearch((event.target as HTMLInputElement).value)
   }
 
   onResetTableFilter () {
-    this.resetTableFilter.emit()
+    this.updateSearch('')
+  }
+
+  hasFilters () {
+    return this.filters.length !== 0
+  }
+
+  private updateSearch (value: string) {
+    this.searchValue = value
+    this.searchStream.next(this.searchValue)
+  }
+
+  private listenToRouteSearchChange () {
+    this.route.queryParams
+      .subscribe(params => {
+        const search = params.search || ''
+
+        logger('On route search change "%s".', search)
+
+        this.updateSearch(search)
+      })
+  }
+
+  private initSearchStream () {
+    this.searchStream = new Subject()
+
+    this.searchStream
+      .pipe(
+        debounceTime(200),
+        distinctUntilChanged()
+      )
+      .subscribe(() => {
+        logger('On search "%s".', this.searchValue)
+
+        this.setQueryParams(this.searchValue)
+        this.search.emit(this.searchValue)
+      })
+  }
+
+  private setQueryParams (search: string) {
+    const queryParams: Params = {}
+
+    if (search) Object.assign(queryParams, { search })
+    this.router.navigate([ ], { queryParams })
   }
 }

client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss

@@ -11,12 +11,12 @@
   }
 }
 
-::ng-deep .dropdown-toggle::after {
+.sub-menu ::ng-deep .dropdown-toggle::after {
   position: relative;
   top: 2px;
 }
 
-::ng-deep .dropdown-menu {
+.sub-menu ::ng-deep .dropdown-menu {
   margin-top: 0 !important;
 }
 

client/src/app/shared/shared-moderation/account-blocklist.component.html

@@ -11,13 +11,8 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <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>
   </ng-template>

client/src/app/shared/shared-moderation/account-blocklist.component.scss

@@ -1,16 +1,6 @@
 @import '_variables';
 @import '_mixins';
 
-.caption {
-  justify-content: flex-end;
-
-  input {
-    @include peertube-input-text(250px);
-
-    flex-grow: 1;
-  }
-}
-
 .chip {
   @include chip;
 }

client/src/app/shared/shared-moderation/account-blocklist.component.ts

@@ -44,12 +44,12 @@ export class GenericAccountBlocklistComponent extends RestTable implements OnIni
             : $localize`Account ${blockedAccount.nameWithHost} unmuted by your instance.`
         )
 
-        this.loadData()
+        this.reloadData()
       }
     )
   }
 
-  protected loadData () {
+  protected reloadData () {
     const operation = this.mode === BlocklistComponentType.Account
       ? this.blocklistService.getUserAccountBlocklist({
         pagination: this.pagination,

client/src/app/shared/shared-moderation/moderation.scss

@@ -39,27 +39,10 @@
   }
 }
 
-.input-group {
-  @include peertube-input-group(300px);
-
-  .dropdown-toggle::after {
-    margin-left: 0;
-  }
-}
-
 .chip {
   @include chip;
 }
 
-.caption {
-  justify-content: flex-end;
-
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
-
 my-action-dropdown.show {
   ::ng-deep .dropdown-root {
     display: block !important;

client/src/app/shared/shared-moderation/server-blocklist.component.html

@@ -4,8 +4,9 @@
 </h1>
 
 <p-table
-  [value]="blockedServers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="blockedServers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onPage)="onPage($event)"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted instances"
 >
@@ -18,13 +19,8 @@
         </a>
       </div>
 
-      <div class="ml-auto has-feedback has-clear">
+      <div class="ml-auto">
-        <input
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
-        <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>
   </ng-template>

client/src/app/shared/shared-moderation/server-blocklist.component.scss

@@ -16,15 +16,6 @@ a {
   }
 }
 
-.caption {
-  justify-content: flex-end;
-
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
-
 .unblock-button {
   @include peertube-button;
   @include grey-button;
@@ -34,15 +25,6 @@ a {
   @include create-button;
 }
 
-.caption {
-  justify-content: flex-end;
-
-  input {
-    @include peertube-input-text(250px);
-    flex-grow: 1;
-  }
-}
-
 .chip {
   @include chip;
 }

client/src/app/shared/shared-moderation/server-blocklist.component.ts

@@ -46,7 +46,7 @@ export class GenericServerBlocklistComponent extends RestTable implements OnInit
             : $localize`Instance ${host} unmuted by your instance.`
         )
 
-        this.loadData()
+        this.reloadData()
       }
     )
   }
@@ -69,13 +69,13 @@ export class GenericServerBlocklistComponent extends RestTable implements OnInit
               : $localize`Instance ${domain} muted by your instance.`
           )
 
-          this.loadData()
+          this.reloadData()
         }
       )
     })
   }
 
-  protected loadData () {
+  protected reloadData () {
     const operation = this.mode === BlocklistComponentType.Account
       ? this.blocklistService.getUserServerBlocklist({
         pagination: this.pagination,

client/src/app/shared/shared-video-miniature/videos-selection.component.html

@@ -1,9 +1,9 @@
-<div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
+<div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">{{ noResultMessage }}</div>
 
 <div myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()" class="videos">
   <div class="video" *ngFor="let video of videos; let i = index; trackBy: videoById">
 
-    <div class="checkbox-container">
+    <div class="checkbox-container" *ngIf="enableSelection">
       <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="_selection[video.id]"></my-peertube-checkbox>
     </div>
 

client/src/app/shared/shared-video-miniature/videos-selection.component.ts

@@ -31,6 +31,9 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
   @Input() pagination: ComponentPagination
   @Input() titlePage: string
   @Input() miniatureDisplayOptions: MiniatureDisplayOptions
+  @Input() noResultMessage = $localize`No results.`
+  @Input() enableSelection = true
+  @Input() loadOnInit = true
 
   @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>