Add ability to filter my videos by live

26 files changed, 280 insertions, 237 deletions

diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
index 9a6c124e1..a9e0931f8 100644
--- a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
@@ -3,4 +3,4 @@
   <ng-container i18n>Reports</ng-container>
 </h1>
 
-<my-abuse-list-table viewType="admin" baseRoute="/admin/moderation/abuses/list"></my-abuse-list-table>
+<my-abuse-list-table viewType="admin"></my-abuse-list-table>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index c7275de1b..cf2466bdb 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -13,25 +13,7 @@
   <ng-template pTemplate="caption">
     <div class="caption">
       <div class="ml-auto">
-        <div class="input-group has-feedback has-clear">
-          <div 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>
-
-            <div role="menu" ngbDropdownMenu>
-              <h6 class="dropdown-header" i18n>Advanced block filters</h6>
-              <a [routerLink]="[ '/admin/moderation/video-blocks/list' ]" [queryParams]="{ 'search': 'type:auto' }" class="dropdown-item" i18n>Automatic blocks</a>
-              <a [routerLink]="[ '/admin/moderation/video-blocks/list' ]" [queryParams]="{ 'search': 'type:manual' }" class="dropdown-item" i18n>Manual blocks</a>
-            </div>
-          </div>
-          <input
-            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)="resetTableFilter()"></a>
-          <span class="sr-only" i18n>Clear filters</span>
-        </div>
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
       </div>
     </div>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index d6aca10e7..dfd8dc745 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -6,6 +6,7 @@ import { AfterViewInit, Component, OnInit } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
 import { ActivatedRoute, Params, 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'
 import { VideoBlockService } from '@app/shared/shared-moderation'
 import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
@@ -24,6 +25,17 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
 
   videoBlocklistActions: DropdownAction<VideoBlacklist>[][] = []
 
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'type:auto' },
+      label: $localize`Automatic blocks`
+    },
+    {
+      queryParams: { 'search': 'type:manual' },
+      label: $localize`Manual blocks`
+    }
+  ]
+
   constructor (
     protected route: ActivatedRoute,
     protected router: Router,
@@ -111,25 +123,6 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
     if (this.search) this.setTableFilter(this.search, false)
   }
 
-  /* Table filter functions */
-  onBlockSearch (event: Event) {
-    this.onSearch(event)
-    this.setQueryParams((event.target as HTMLInputElement).value)
-  }
-
-  setQueryParams (search: string) {
-    const queryParams: Params = {}
-    if (search) Object.assign(queryParams, { search })
-    this.router.navigate([ '/admin/moderation/video-blocks/list' ], { queryParams })
-  }
-
-  resetTableFilter () {
-    this.setTableFilter('')
-    this.setQueryParams('')
-    this.resetSearch()
-  }
-  /* END Table filter functions */
-
   getIdentifier () {
     return 'VideoBlockListComponent'
   }
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
index b6cec9c51..5cc0ff137 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
@@ -26,25 +26,7 @@
       </div>
 
       <div class="ml-auto">
-        <div class="input-group has-feedback has-clear">
-          <div 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>
-
-            <div role="menu" ngbDropdownMenu>
-              <h6 class="dropdown-header" i18n>Advanced comments filters</h6>
-              <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:true' }" class="dropdown-item" i18n>Local comments</a>
-              <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:false' }" class="dropdown-item" i18n>Remote comments</a>
-            </div>
-          </div>
-          <input
-            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)="resetTableFilter()"></a>
-          <span class="sr-only" i18n>Clear filters</span>
-        </div>
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
       </div>
     </div>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
index 63493d00d..ebbbddb43 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
@@ -2,6 +2,7 @@ import { SortMeta } from 'primeng/api'
 import { AfterViewInit, Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction } from '@app/shared/shared-main'
 import { BulkService } from '@app/shared/shared-moderation'
 import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment'
@@ -43,6 +44,17 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
   selectedComments: VideoCommentAdmin[] = []
   bulkCommentActions: DropdownAction<VideoCommentAdmin[]>[] = []
 
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'local:true' },
+      label: $localize`Local comments`
+    },
+    {
+      queryParams: { 'search': 'local:false' },
+      label: $localize`Remote comments`
+    }
+  ]
+
   get authUser () {
     return this.auth.getUser()
   }
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 f84d3fd0c..7170d7019 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
@@ -22,24 +22,7 @@
       </div>
 
       <div class="ml-auto">
-        <div class="input-group has-feedback has-clear">
-          <div 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>
-
-            <div role="menu" ngbDropdownMenu>
-              <h6 class="dropdown-header" i18n>Advanced user filters</h6>
-              <a [routerLink]="[ '/admin/users/list' ]" [queryParams]="{ 'search': 'banned:true' }" class="dropdown-item" i18n>Banned users</a>
-            </div>
-          </div>
-          <input
-            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)="resetTableFilter()"></a>
-          <span class="sr-only" i18n>Clear filters</span>
-        </div>
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
       </div>
 
     </div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index f18747ec3..db4979a51 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -11,6 +11,7 @@ tr.banned > td {
 
 .table-email {
   @include disable-default-a-behaviour;
+
   color: pvar(--mainForegroundColor);
 }
 
@@ -28,14 +29,6 @@ tr.banned > td {
   margin-left: 0.1rem;
 }
 
-.caption {
-  justify-content: space-between;
-
-  input {
-    @include peertube-input-text(250px);
-  }
-}
-
 p-tableCheckbox {
   position: relative;
   top: -2.5px;
@@ -55,18 +48,7 @@ my-global-icon {
 
 .progress {
   @include progressbar($small: true);
+
   width: auto;
   max-width: 100%;
 }
-
-.input-group {
-  @include peertube-input-group(300px);
-
-  input {
-    flex: 1;
-  }
-
-  .dropdown-toggle::after {
-    margin-left: 0;
-  }
-}
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 339e18206..435bc17d7 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
@@ -1,8 +1,9 @@
 import { SortMeta } from 'primeng/api'
-import { Component, OnInit, ViewChild } from '@angular/core'
-import { ActivatedRoute, Params, Router } from '@angular/router'
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core'
-import { Account, DropdownAction } from '@app/shared/shared-main'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
+import { DropdownAction } from '@app/shared/shared-main'
 import { UserBanModalComponent } from '@app/shared/shared-moderation'
 import { ServerConfig, User, UserRole } from '@shared/models'
 
@@ -18,19 +19,28 @@ type UserForList = User & {
   templateUrl: './user-list.component.html',
   styleUrls: [ './user-list.component.scss' ]
 })
-export class UserListComponent extends RestTable implements OnInit {
+export class UserListComponent extends RestTable implements OnInit, AfterViewInit {
   @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
 
   users: User[] = []
+
   totalRecords = 0
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
   highlightBannedUsers = false
 
   selectedUsers: User[] = []
   bulkUserActions: DropdownAction<User[]>[][] = []
   columns: { id: string, label: string }[]
 
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'banned:true' },
+      label: $localize`Banned users`
+    }
+  ]
+
   private _selectedColumns: string[]
   private serverConfig: ServerConfig
 
@@ -117,6 +127,10 @@ export class UserListComponent extends RestTable implements OnInit {
     this.columns.push({ id: 'lastLoginDate', label: 'Last login' })
   }
 
+  ngAfterViewInit () {
+    if (this.search) this.setTableFilter(this.search, false)
+  }
+
   getIdentifier () {
     return 'UserListComponent'
   }
diff --git a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
index 59ca61be6..e83b59019 100644
--- a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
+++ b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
@@ -3,4 +3,4 @@
   <ng-container i18n>Reports</ng-container>
 </h1>
 
-<my-abuse-list-table viewType="user" baseRoute="/my-account/abuses"></my-abuse-list-table>
+<my-abuse-list-table viewType="user"></my-abuse-list-table>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index e9f436378..7c1cdb511 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -19,12 +19,7 @@
 </h1>
 
 <div class="videos-header d-flex justify-content-between">
-  <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>
+  <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
 
   <div class="peertube-select-container peertube-select-button">
     <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 356e158d6..f9c1b32b0 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -1,10 +1,11 @@
-import { concat, Observable, Subject } from 'rxjs'
-import { debounceTime, tap, toArray } from 'rxjs/operators'
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { concat, Observable } from 'rxjs'
+import { tap, toArray } from 'rxjs/operators'
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
+import { AuthService, ComponentPagination, ConfirmService, Notifier, RouteFilter, 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'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
 import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
@@ -15,7 +16,7 @@ import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.c
   templateUrl: './my-videos.component.html',
   styleUrls: [ './my-videos.component.scss' ]
 })
-export class MyVideosComponent implements OnInit, DisableForReuseHook {
+export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewInit, DisableForReuseHook {
   @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
   @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
   @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent
@@ -40,13 +41,18 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
   videoActions: DropdownAction<{ video: Video }>[] = []
 
   videos: Video[] = []
-  videosSearch: string
-  videosSearchChanged = new Subject<string>()
   getVideosObservableFunction = this.getVideosObservable.bind(this)
   sort: VideoSortField = '-publishedAt'
 
   user: User
 
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'isLive:true' },
+      label: $localize`Only live videos`
+    }
+  ]
+
   constructor (
     protected router: Router,
     protected serverService: ServerService,
@@ -57,6 +63,8 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
     private confirmService: ConfirmService,
     private videoService: VideoService
   ) {
+    super()
+
     this.titlePage = $localize`My videos`
   }
 
@@ -65,20 +73,16 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
 
     this.user = this.authService.getUser()
 
-    this.videosSearchChanged
-      .pipe(debounceTime(500))
-      .subscribe(() => {
-        this.videosSelection.reloadVideos()
-      })
+    this.initSearch()
+    this.listenToSearchChange()
   }
 
-  resetSearch () {
-    this.videosSearch = ''
-    this.onVideosSearchChanged()
+  ngAfterViewInit () {
+    if (this.search) this.setTableFilter(this.search, false)
   }
 
-  onVideosSearchChanged () {
-    this.videosSearchChanged.next()
+  loadData () {
+    this.videosSelection.reloadVideos()
   }
 
   onChangeSortColumn () {
@@ -96,7 +100,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
   getVideosObservable (page: number) {
     const newPagination = immutableAssign(this.pagination, { currentPage: page })
 
-    return this.videoService.getMyVideos(newPagination, this.sort, this.videosSearch)
+    return this.videoService.getMyVideos(newPagination, this.sort, this.search)
       .pipe(
         tap(res => this.pagination.totalItems = res.total)
       )
diff --git a/client/src/app/core/rest/rest-table.ts b/client/src/app/core/rest/rest-table.ts
index 32c1db446..9baab8a39 100644
--- a/client/src/app/core/rest/rest-table.ts
+++ b/client/src/app/core/rest/rest-table.ts
@@ -1,14 +1,14 @@
 import * as debug from 'debug'
 import { LazyLoadEvent, SortMeta } from 'primeng/api'
 import { Subject } from 'rxjs'
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
-import { ActivatedRoute, Params, Router } from '@angular/router'
+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 {
+export abstract class RestTable extends RouteFilter {
 
   abstract totalRecords: number
   abstract sort: SortMeta
@@ -19,8 +19,6 @@ export abstract class RestTable {
   rowsPerPage = this.rowsPerPageOptions[0]
   expandedRows = {}
 
-  baseRoute: string
-
   protected searchStream: Subject<string>
 
   protected route: ActivatedRoute
@@ -66,55 +64,6 @@ export abstract class RestTable {
     peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort))
   }
 
-  initSearch () {
-    this.searchStream = new Subject()
-
-    this.searchStream
-      .pipe(
-        debounceTime(400),
-        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((event.target as HTMLInputElement).value)
-  }
-
-  setQueryParams (search: string) {
-    if (!this.baseRoute) return
-
-    const queryParams: Params = {}
-
-    if (search) Object.assign(queryParams, { search })
-    this.router.navigate([ this.baseRoute ], { queryParams })
-  }
-
-  resetTableFilter () {
-    this.setTableFilter('')
-    this.setQueryParams('')
-    this.resetSearch()
-  }
-
-  listenToSearchChange () {
-    this.route.queryParams
-      .subscribe(params => {
-        this.search = params.search || ''
-
-        // Primeng table will run an event to load data
-        this.setTableFilter(this.search)
-      })
-  }
-
   onPage (event: { first: number, rows: number }) {
     logger('On page %o.', event)
 
@@ -131,21 +80,6 @@ export abstract class RestTable {
     this.expandedRows = {}
   }
 
-  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'))
-  }
-
-  resetSearch () {
-    this.searchStream.next('')
-    this.setTableFilter('')
-  }
-
   protected abstract loadData (): void
 
   private getSortLocalStorageKey () {
diff --git a/client/src/app/core/routing/index.ts b/client/src/app/core/routing/index.ts
index 239c27caf..d53a4ae2c 100644
--- a/client/src/app/core/routing/index.ts
+++ b/client/src/app/core/routing/index.ts
@@ -5,6 +5,7 @@ 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'
diff --git a/client/src/app/core/routing/route-filter.ts b/client/src/app/core/routing/route-filter.ts
new file mode 100644
index 000000000..f783a0c40
--- /dev/null
+++ b/client/src/app/core/routing/route-filter.ts
@@ -0,0 +1,79 @@
+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(400),
+        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 })
+  }
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index f2eaeb32f..110f574fa 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -7,7 +7,7 @@
       <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
 
       <span class="col-9 moderation-expanded-text">
-        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
           class="chip"
         >
           <my-actor-avatar [account]="abuse.reporterAccount"></my-actor-avatar>
@@ -16,7 +16,7 @@
           </div>
         </a>
 
-        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
           class="ml-auto text-muted abuse-details-links" i18n
         >
           {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
@@ -27,7 +27,7 @@
     <div class="d-flex" *ngIf="abuse.flaggedAccount">
       <span class="col-3 moderation-expanded-label" i18n>Reportee</span>
       <span class="col-9 moderation-expanded-text">
-        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
           class="chip"
         >
           <my-actor-avatar [account]="abuse.flaggedAccount"></my-actor-avatar>
@@ -36,7 +36,7 @@
           </div>
         </a>
 
-        <a *ngIf="isAdminView" [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
+        <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
           class="ml-auto text-muted abuse-details-links" i18n
         >
           {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
@@ -53,7 +53,7 @@
     <div class="mt-3 d-flex">
       <span class="col-3 moderation-expanded-label">
         <ng-container i18n>Report</ng-container>
-        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 text-muted">#{{ abuse.id }}</a>
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 text-muted">#{{ abuse.id }}</a>
       </span>
       <span class="col-9 moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
     </div>
@@ -61,7 +61,7 @@
     <div *ngIf="getPredefinedReasons()" class="mt-2 d-flex">
       <span class="col-3"></span>
       <span class="col-9">
-        <a *ngFor="let reason of getPredefinedReasons()"  [routerLink]="[ baseRoute ]"
+        <a *ngFor="let reason of getPredefinedReasons()"  [routerLink]="[ '.' ]"
           [queryParams]="{ 'search': 'tag:' + reason.id  }" class="chip rectangular bg-secondary text-light"
         >
           <div>{{ reason.label }}</div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
index e8ce7e678..14674c5f0 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core'
 import { durationToString } from '@app/helpers'
-import { Account } from '@app/shared/shared-main'
 import { AbusePredefinedReasonsString } from '@shared/models'
 import { ProcessedAbuse } from './processed-abuse.model'
 
@@ -12,7 +11,6 @@ import { ProcessedAbuse } from './processed-abuse.model'
 export class AbuseDetailsComponent {
   @Input() abuse: ProcessedAbuse
   @Input() isAdminView: boolean
-  @Input() baseRoute: string
 
   private predefinedReasonsTranslations: { [key in AbusePredefinedReasonsString]: string }
 
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index b41bc75d4..22f84a96e 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -8,28 +8,7 @@
   <ng-template pTemplate="caption">
     <div class="caption">
       <div class="ml-auto">
-        <div class="input-group has-feedback has-clear">
-          <div 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>
-
-            <div role="menu" ngbDropdownMenu>
-              <h6 class="dropdown-header" i18n>Advanced report filters</h6>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'state:pending' }" class="dropdown-item" i18n>Unsolved reports</a>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'state:accepted' }" class="dropdown-item" i18n>Accepted reports</a>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'state:rejected' }" class="dropdown-item" i18n>Refused reports</a>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'videoIs:blacklisted' }" class="dropdown-item" i18n>Reports with blocked videos</a>
-              <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'videoIs:deleted' }" class="dropdown-item" i18n>Reports with deleted videos</a>
-            </div>
-          </div>
-          <input
-            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)="resetTableFilter()"></a>
-          <span class="sr-only" i18n>Clear filters</span>
-        </div>
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
       </div>
     </div>
   </ng-template>
@@ -171,7 +150,7 @@
   <ng-template pTemplate="rowexpansion" let-abuse>
       <tr>
         <td class="expand-cell" colspan="8">
-          <my-abuse-details [abuse]="abuse" [baseRoute]="baseRoute" [isAdminView]="isAdminView()"></my-abuse-details>
+          <my-abuse-details [abuse]="abuse" [isAdminView]="isAdminView()"></my-abuse-details>
         </td>
       </tr>
   </ng-template>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index 8b5771237..f393c0d1e 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -14,6 +14,7 @@ import { AbuseState, AdminAbuse } from '@shared/models'
 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')
 
@@ -24,7 +25,6 @@ const logger = debug('peertube:moderation:AbuseListTableComponent')
 })
 export class AbuseListTableComponent extends RestTable implements OnInit, AfterViewInit {
   @Input() viewType: 'admin' | 'user'
-  @Input() baseRoute: string
 
   @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent
   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
@@ -36,6 +36,29 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
 
   abuseActions: DropdownAction<ProcessedAbuse>[][] = []
 
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      queryParams: { 'search': 'state:pending' },
+      label: $localize`Unsolved reports`
+    },
+    {
+      queryParams: { 'search': 'state:accepted' },
+      label: $localize`Accepted reports`
+    },
+    {
+      queryParams: { 'search': 'state:rejected' },
+      label: $localize`Refused reports`
+    },
+    {
+      queryParams: { 'search': 'videoIs:blacklisted' },
+      label: $localize`Reports with blocked videos`
+    },
+    {
+      queryParams: { 'search': 'videoIs:deleted' },
+      label: $localize`Reports with deleted videos`
+    }
+  ]
+
   constructor (
     protected route: ActivatedRoute,
     protected router: Router,
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index e4efbe475..835e15110 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -98,7 +98,7 @@ export class ActorAvatarComponent {
       jkl: 'gray',
       mno: 'yellow',
       pqr: 'orange',
-      stv: 'red',
+      stvu: 'red',
       wxyz: 'dark-blue'
     }
 
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
new file mode 100644
index 000000000..03c4f127b
--- /dev/null
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -0,0 +1,22 @@
+<div class="input-group has-feedback has-clear">
+  <div 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>
+
+    <div role="menu" ngbDropdownMenu>
+      <h6 class="dropdown-header" i18n>Advanced filters</h6>
+
+      <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)"
+  >
+  <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
+  <span class="sr-only" i18n>Clear filters</span>
+</div>
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
new file mode 100644
index 000000000..7c2198927
--- /dev/null
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -0,0 +1,10 @@
+@import '_variables';
+@import '_mixins';
+
+input {
+  @include peertube-input-text(250px);
+}
+
+.input-group-text {
+  background-color: transparent;
+}
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
new file mode 100644
index 000000000..394090751
--- /dev/null
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Params } from '@angular/router'
+
+export type AdvancedInputFilter = {
+  label: string
+  queryParams: Params
+}
+
+@Component({
+  selector: 'my-advanced-input-filter',
+  templateUrl: './advanced-input-filter.component.html',
+  styleUrls: [ './advanced-input-filter.component.scss' ]
+})
+export class AdvancedInputFilterComponent {
+  @Input() filters: AdvancedInputFilter[] = []
+
+  @Output() resetTableFilter = new EventEmitter<void>()
+  @Output() search = new EventEmitter<Event>()
+
+  onSearch (event: Event) {
+    this.search.emit(event)
+  }
+
+  onResetTableFilter () {
+    this.resetTableFilter.emit()
+  }
+}
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index 1d859b991..727416a40 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -1,12 +1,14 @@
-export * from './form-validator.service'
+export * from './advanced-input-filter.component'
 export * from './form-reactive'
-export * from './select'
-export * from './input-toggle-hidden.component'
+export * from './form-validator.service'
+export * from './form-validator.service'
 export * from './input-switch.component'
+export * from './input-toggle-hidden.component'
 export * from './markdown-textarea.component'
 export * from './peertube-checkbox.component'
 export * from './preview-upload.component'
 export * from './reactive-file.component'
+export * from './select'
+export * from './shared-form.module'
 export * from './textarea-autoresize.directive'
 export * from './timestamp-input.component'
-export * from './shared-form.module'
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index 9bdd138a1..5417f7342 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -5,6 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
+import { AdvancedInputFilterComponent } from './advanced-input-filter.component'
 import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 import { FormValidatorService } from './form-validator.service'
 import { InputSwitchComponent } from './input-switch.component'
@@ -52,7 +53,9 @@ import { TimestampInputComponent } from './timestamp-input.component'
     SelectCheckboxComponent,
     SelectCustomValueComponent,
 
-    DynamicFormFieldComponent
+    DynamicFormFieldComponent,
+
+    AdvancedInputFilterComponent
   ],
 
   exports: [
@@ -78,7 +81,9 @@ import { TimestampInputComponent } from './timestamp-input.component'
     SelectCheckboxComponent,
     SelectCustomValueComponent,
 
-    DynamicFormFieldComponent
+    DynamicFormFieldComponent,
+
+    AdvancedInputFilterComponent
   ],
 
   providers: [
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 0b708b692..668e51f73 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -124,7 +124,23 @@ export class VideoService implements VideosProvider {
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
-    params = this.restService.addObjectParams(params, { search })
+
+    if (search) {
+      const filters = this.restService.parseQueryStringFilter(search, {
+        isLive: {
+          prefix: 'isLive:',
+          isBoolean: true,
+          handler: v => {
+            if (v === 'true') return v
+            if (v === 'false') return v
+
+            return undefined
+          }
+        }
+      })
+
+      params = this.restService.addObjectParams(params, filters)
+    }
 
     return this.authHttp
                .get<ResultList<Video>>(UserService.BASE_USERS_URL + 'me/videos', { params })
diff --git a/client/src/app/shared/shared-search/advanced-search.model.ts b/client/src/app/shared/shared-search/advanced-search.model.ts
index 30badc8fa..0e3924841 100644
--- a/client/src/app/shared/shared-search/advanced-search.model.ts
+++ b/client/src/app/shared/shared-search/advanced-search.model.ts
@@ -1,4 +1,4 @@
-import { NSFWQuery, SearchTargetType } from '@shared/models'
+import { BooleanBothQuery, SearchTargetType } from '@shared/models'
 
 export class AdvancedSearch {
   startDate: string // ISO 8601
@@ -7,7 +7,7 @@ export class AdvancedSearch {
   originallyPublishedStartDate: string // ISO 8601
   originallyPublishedEndDate: string // ISO 8601
 
-  nsfw: NSFWQuery
+  nsfw: BooleanBothQuery
 
   categoryOneOf: string
 
@@ -33,7 +33,7 @@ export class AdvancedSearch {
     endDate?: string
     originallyPublishedStartDate?: string
     originallyPublishedEndDate?: string
-    nsfw?: NSFWQuery
+    nsfw?: BooleanBothQuery
     categoryOneOf?: string
     licenceOneOf?: string
     languageOneOf?: string