Add video filters to common video pages

15 files changed, 1172 insertions, 527 deletions

diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
deleted file mode 100644
index f12ae2ee5..000000000
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
+++ /dev/null
@@ -1,404 +0,0 @@
-import { fromEvent, Observable, ReplaySubject, Subject, Subscription } from 'rxjs'
-import { debounceTime, switchMap, tap } from 'rxjs/operators'
-import {
-  AfterContentInit,
-  ComponentFactoryResolver,
-  Directive,
-  Injector,
-  OnDestroy,
-  OnInit,
-  Type,
-  ViewChild,
-  ViewContainerRef
-} from '@angular/core'
-import { ActivatedRoute, Params, Router } from '@angular/router'
-import {
-  AuthService,
-  ComponentPaginationLight,
-  LocalStorageService,
-  Notifier,
-  ScreenService,
-  ServerService,
-  User,
-  UserService
-} from '@app/core'
-import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
-import { GlobalIconName } from '@app/shared/shared-icons'
-import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils'
-import { HTMLServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models'
-import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
-import { Syndication, Video } from '../shared-main'
-import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component'
-import { MiniatureDisplayOptions } from './video-miniature.component'
-
-enum GroupDate {
-  UNKNOWN = 0,
-  TODAY = 1,
-  YESTERDAY = 2,
-  THIS_WEEK = 3,
-  THIS_MONTH = 4,
-  LAST_MONTH = 5,
-  OLDER = 6
-}
-
-@Directive()
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterContentInit, DisableForReuseHook {
-  @ViewChild('videoListHeader', { static: true, read: ViewContainerRef }) videoListHeader: ViewContainerRef
-
-  HeaderComponent: Type<GenericHeaderComponent> = VideoListHeaderComponent
-  headerComponentInjector: Injector
-
-  pagination: ComponentPaginationLight = {
-    currentPage: 1,
-    itemsPerPage: 25
-  }
-  sort: VideoSortField = '-publishedAt'
-
-  categoryOneOf?: number[]
-  languageOneOf?: string[]
-  nsfwPolicy?: NSFWPolicyType
-  defaultSort: VideoSortField = '-publishedAt'
-
-  syndicationItems: Syndication[] = []
-
-  loadOnInit = true
-  loadUserVideoPreferences = false
-
-  displayModerationBlock = false
-  titleTooltip: string
-  displayVideoActions = true
-  groupByDate = false
-
-  videos: Video[] = []
-  hasDoneFirstQuery = false
-  disabled = false
-
-  displayOptions: MiniatureDisplayOptions = {
-    date: true,
-    views: true,
-    by: true,
-    avatar: false,
-    privacyLabel: true,
-    privacyText: false,
-    state: false,
-    blacklistInfo: false
-  }
-
-  actions: {
-    iconName: GlobalIconName
-    label: string
-    justIcon?: boolean
-    routerLink?: string
-    href?: string
-    click?: (e: Event) => void
-  }[] = []
-
-  onDataSubject = new Subject<any[]>()
-
-  userMiniature: User
-
-  protected onUserLoadedSubject = new ReplaySubject<void>(1)
-
-  protected serverConfig: HTMLServerConfig
-
-  protected abstract notifier: Notifier
-  protected abstract authService: AuthService
-  protected abstract userService: UserService
-  protected abstract route: ActivatedRoute
-  protected abstract serverService: ServerService
-  protected abstract screenService: ScreenService
-  protected abstract storageService: LocalStorageService
-  protected abstract router: Router
-  protected abstract cfr: ComponentFactoryResolver
-  abstract titlePage: string
-
-  private resizeSubscription: Subscription
-  private angularState: number
-
-  private groupedDateLabels: { [id in GroupDate]: string }
-  private groupedDates: { [id: number]: GroupDate } = {}
-
-  private lastQueryLength: number
-
-  abstract getVideosObservable (page: number): Observable<{ data: Video[] }>
-
-  abstract generateSyndicationList (): void
-
-  ngOnInit () {
-    this.serverConfig = this.serverService.getHTMLConfig()
-
-    this.groupedDateLabels = {
-      [GroupDate.UNKNOWN]: null,
-      [GroupDate.TODAY]: $localize`Today`,
-      [GroupDate.YESTERDAY]: $localize`Yesterday`,
-      [GroupDate.THIS_WEEK]: $localize`This week`,
-      [GroupDate.THIS_MONTH]: $localize`This month`,
-      [GroupDate.LAST_MONTH]: $localize`Last month`,
-      [GroupDate.OLDER]: $localize`Older`
-    }
-
-    // Subscribe to route changes
-    const routeParams = this.route.snapshot.queryParams
-    this.loadRouteParams(routeParams)
-
-    this.resizeSubscription = fromEvent(window, 'resize')
-      .pipe(debounceTime(500))
-      .subscribe(() => this.calcPageSizes())
-
-    this.calcPageSizes()
-
-    const loadUserObservable = this.loadUserAndSettings()
-    loadUserObservable.subscribe(() => {
-      this.onUserLoadedSubject.next()
-
-      if (this.loadOnInit === true) this.loadMoreVideos()
-    })
-
-    this.userService.listenAnonymousUpdate()
-      .pipe(switchMap(() => this.loadUserAndSettings()))
-      .subscribe(() => {
-        if (this.hasDoneFirstQuery) this.reloadVideos()
-      })
-
-    // Display avatar in mobile view
-    if (this.screenService.isInMobileView()) {
-      this.displayOptions.avatar = true
-    }
-  }
-
-  ngOnDestroy () {
-    if (this.resizeSubscription) this.resizeSubscription.unsubscribe()
-  }
-
-  ngAfterContentInit () {
-    if (this.videoListHeader) {
-      // some components don't use the header: they use their own template, like my-history.component.html
-      this.setHeader(this.HeaderComponent, this.headerComponentInjector)
-    }
-  }
-
-  disableForReuse () {
-    this.disabled = true
-  }
-
-  enabledForReuse () {
-    this.disabled = false
-  }
-
-  videoById (index: number, video: Video) {
-    return video.id
-  }
-
-  onNearOfBottom () {
-    if (this.disabled) return
-
-    // No more results
-    if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
-
-    this.pagination.currentPage += 1
-
-    this.setScrollRouteParams()
-
-    this.loadMoreVideos()
-  }
-
-  loadMoreVideos (reset = false) {
-    this.getVideosObservable(this.pagination.currentPage)
-      .subscribe({
-        next: ({ data }) => {
-          this.hasDoneFirstQuery = true
-          this.lastQueryLength = data.length
-
-          if (reset) this.videos = []
-          this.videos = this.videos.concat(data)
-
-          if (this.groupByDate) this.buildGroupedDateLabels()
-
-          this.onMoreVideos()
-
-          this.onDataSubject.next(data)
-        },
-
-        error: err => {
-          const message = $localize`Cannot load more videos. Try again later.`
-
-          console.error(message, { err })
-          this.notifier.error(message)
-        }
-      })
-  }
-
-  reloadVideos () {
-    this.pagination.currentPage = 1
-    this.loadMoreVideos(true)
-  }
-
-  removeVideoFromArray (video: Video) {
-    this.videos = this.videos.filter(v => v.id !== video.id)
-  }
-
-  buildGroupedDateLabels () {
-    let currentGroupedDate: GroupDate = GroupDate.UNKNOWN
-
-    const periods = [
-      {
-        value: GroupDate.TODAY,
-        validator: (d: Date) => isToday(d)
-      },
-      {
-        value: GroupDate.YESTERDAY,
-        validator: (d: Date) => isYesterday(d)
-      },
-      {
-        value: GroupDate.THIS_WEEK,
-        validator: (d: Date) => isLastWeek(d)
-      },
-      {
-        value: GroupDate.THIS_MONTH,
-        validator: (d: Date) => isThisMonth(d)
-      },
-      {
-        value: GroupDate.LAST_MONTH,
-        validator: (d: Date) => isLastMonth(d)
-      },
-      {
-        value: GroupDate.OLDER,
-        validator: () => true
-      }
-    ]
-
-    for (const video of this.videos) {
-      const publishedDate = video.publishedAt
-
-      for (let i = 0; i < periods.length; i++) {
-        const period = periods[i]
-
-        if (currentGroupedDate <= period.value && period.validator(publishedDate)) {
-
-          if (currentGroupedDate !== period.value) {
-            currentGroupedDate = period.value
-            this.groupedDates[video.id] = currentGroupedDate
-          }
-
-          break
-        }
-      }
-    }
-  }
-
-  getCurrentGroupedDateLabel (video: Video) {
-    if (this.groupByDate === false) return undefined
-
-    return this.groupedDateLabels[this.groupedDates[video.id]]
-  }
-
-  toggleModerationDisplay () {
-    throw new Error('toggleModerationDisplay ' + $localize`function is not implemented`)
-  }
-
-  setHeader (
-    t: Type<any> = this.HeaderComponent,
-    i: Injector = this.headerComponentInjector
-  ) {
-    const injector = i || Injector.create({
-      providers: [ {
-        provide: 'data',
-        useValue: {
-          titlePage: this.titlePage,
-          titleTooltip: this.titleTooltip
-        }
-      } ]
-    })
-    const viewContainerRef = this.videoListHeader
-    viewContainerRef.clear()
-
-    const componentFactory = this.cfr.resolveComponentFactory(t)
-    viewContainerRef.createComponent(componentFactory, 0, injector)
-  }
-
-  // Can be redefined by child
-  displayAsRow () {
-    return false
-  }
-
-  // On videos hook for children that want to do something
-  protected onMoreVideos () { /* empty */ }
-
-  protected load () { /* empty */ }
-
-  // Hook if the page has custom route params
-  protected loadPageRouteParams (_queryParams: Params) { /* empty */ }
-
-  protected loadRouteParams (queryParams: Params) {
-    this.sort = queryParams['sort'] as VideoSortField || this.defaultSort
-    this.categoryOneOf = queryParams['categoryOneOf']
-    this.angularState = queryParams['a-state']
-
-    this.loadPageRouteParams(queryParams)
-  }
-
-  protected buildLocalFilter (existing: VideoFilter, base: VideoFilter) {
-    if (base === 'local') {
-      return existing === 'local'
-        ? 'all-local' as 'all-local'
-        : 'local' as 'local'
-    }
-
-    return existing === 'all'
-      ? null
-      : 'all'
-  }
-
-  protected enableAllFilterIfPossible () {
-    if (!this.authService.isLoggedIn()) return
-
-    this.authService.userInformationLoaded
-      .subscribe(() => {
-        const user = this.authService.getUser()
-        this.displayModerationBlock = user.hasRight(UserRight.SEE_ALL_VIDEOS)
-      })
-  }
-
-  private calcPageSizes () {
-    if (this.screenService.isInMobileView()) {
-      this.pagination.itemsPerPage = 5
-    }
-  }
-
-  private setScrollRouteParams () {
-    // Already set
-    if (this.angularState) return
-
-    this.angularState = 42
-
-    const queryParams = {
-      'a-state': this.angularState,
-      categoryOneOf: this.categoryOneOf
-    }
-
-    let path = this.getUrlWithoutParams()
-    if (!path || path === '/') path = this.serverConfig.instance.defaultClientRoute
-
-    this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' })
-  }
-
-  private loadUserAndSettings () {
-    return this.userService.getAnonymousOrLoggedUser()
-      .pipe(tap(user => {
-        this.userMiniature = user
-
-        if (!this.loadUserVideoPreferences) return
-
-        this.languageOneOf = user.videoLanguages
-        this.nsfwPolicy = user.nsfwPolicy
-      }))
-  }
-
-  private getUrlWithoutParams () {
-    const urlTree = this.router.parseUrl(this.router.url)
-    urlTree.queryParams = {}
-
-    return urlTree.toString()
-  }
-}
diff --git a/client/src/app/shared/shared-video-miniature/index.ts b/client/src/app/shared/shared-video-miniature/index.ts
index a8fd82bb9..0086d8e6a 100644
--- a/client/src/app/shared/shared-video-miniature/index.ts
+++ b/client/src/app/shared/shared-video-miniature/index.ts
@@ -1,7 +1,8 @@
-export * from './abstract-video-list'
 export * from './video-actions-dropdown.component'
 export * from './video-download.component'
+export * from './video-filters-header.component'
+export * from './video-filters.model'
 export * from './video-miniature.component'
+export * from './videos-list.component'
 export * from './videos-selection.component'
-export * from './video-list-header.component'
 export * from './shared-video-miniature.module'
diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
index 03be6d2ff..632213922 100644
--- a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
+++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
@@ -1,19 +1,20 @@
 
 import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
 import { SharedFormModule } from '../shared-forms'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { SharedModerationModule } from '../shared-moderation'
-import { SharedVideoModule } from '../shared-video'
 import { SharedThumbnailModule } from '../shared-thumbnail'
+import { SharedVideoModule } from '../shared-video'
 import { SharedVideoLiveModule } from '../shared-video-live'
 import { SharedVideoPlaylistModule } from '../shared-video-playlist/shared-video-playlist.module'
 import { VideoActionsDropdownComponent } from './video-actions-dropdown.component'
 import { VideoDownloadComponent } from './video-download.component'
+import { VideoFiltersHeaderComponent } from './video-filters-header.component'
 import { VideoMiniatureComponent } from './video-miniature.component'
+import { VideosListComponent } from './videos-list.component'
 import { VideosSelectionComponent } from './videos-selection.component'
-import { VideoListHeaderComponent } from './video-list-header.component'
-import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
 
 @NgModule({
   imports: [
@@ -33,14 +34,17 @@ import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image
     VideoDownloadComponent,
     VideoMiniatureComponent,
     VideosSelectionComponent,
-    VideoListHeaderComponent
+    VideoFiltersHeaderComponent,
+    VideosListComponent
   ],
 
   exports: [
     VideoActionsDropdownComponent,
     VideoDownloadComponent,
     VideoMiniatureComponent,
-    VideosSelectionComponent
+    VideosSelectionComponent,
+    VideoFiltersHeaderComponent,
+    VideosListComponent
   ],
 
   providers: [ ]
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index c986228d9..bd42f4813 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -39,7 +39,6 @@
   margin-top: 20px;
 
   .peertube-radio-container {
-    @include peertube-radio-container;
     @include margin-right(30px);
 
     display: inline-block;
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
new file mode 100644
index 000000000..44c21c089
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -0,0 +1,131 @@
+<ng-template #updateSettings let-fragment>
+  <div class="label-description text-muted" i18n>
+    Update
+    <a routerLink="/my-account/settings" [fragment]="fragment">
+      <span (click)="onAccountSettingsClick($event)">your settings</span>
+    </a
+  ></div>
+</ng-template>
+
+
+<div class="root" [formGroup]="form">
+
+  <div class="first-row">
+    <div class="active-filters">
+      <div
+        class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed" role="button"
+        [attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic"
+        [ngClass]="{ active: !areFiltersCollapsed }"
+      >
+        <ng-container i18n *ngIf="areFiltersCollapsed">More filters</ng-container>
+        <ng-container i18n *ngIf="!areFiltersCollapsed">Less filters</ng-container>
+
+        <my-global-icon iconName="chevrons-up"></my-global-icon>
+      </div>
+
+      <div
+        *ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
+        class="active-filter pastille" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
+      >
+        <span>
+          {{ activeFilter.label }}
+
+          <ng-container *ngIf="activeFilter.value">: {{ activeFilter.value }}</ng-container>
+        </span>
+
+        <my-global-icon *ngIf="activeFilter.canRemove" iconName="cross"></my-global-icon>
+      </div>
+    </div>
+
+    <ng-select
+      class="sort"
+      formControlName="sort"
+      [clearable]="false"
+      [searchable]="false"
+    >
+      <ng-option i18n value="-publishedAt">Sort by <strong>"Recently Added"</strong></ng-option>
+
+      <ng-option i18n *ngIf="isTrendingSortEnabled('most-viewed')" value="-trending">Sort by <strong>"Views"</strong></ng-option>
+      <ng-option i18n *ngIf="isTrendingSortEnabled('hot')" value="-hot">Sort by <strong>"Hot"</strong></ng-option>
+      <ng-option i18n *ngIf="isTrendingSortEnabled('best')" value="-best">Sort by <strong>"Best"</strong></ng-option>
+      <ng-option i18n *ngIf="isTrendingSortEnabled('most-liked')" value="-likes">Sort by <strong>"Likes"</strong></ng-option>
+    </ng-select>
+
+  </div>
+
+  <div class="collapse-transition" [ngbCollapse]="areFiltersCollapsed">
+    <div class="filters">
+      <div class="form-group">
+        <label class="with-description" for="languageOneOf" i18n>Languages:</label>
+        <ng-template *ngTemplateOutlet="updateSettings; context: { $implicit: 'video-languages-subtitles' }"></ng-template>
+
+        <my-select-languages [maxLanguages]="20" formControlName="languageOneOf"></my-select-languages>
+      </div>
+
+      <div class="form-group">
+        <label class="with-description" for="nsfw" i18n>Sensitive content:</label>
+        <ng-template *ngTemplateOutlet="updateSettings; context: { $implicit: 'video-sensitive-content-policy' }"></ng-template>
+
+        <div class="peertube-radio-container">
+          <input formControlName="nsfw" type="radio" name="nsfw" id="nsfwBoth" i18n-value value="both" />
+          <label for="nsfwBoth">{{ filters.getNSFWDisplayLabel() }}</label>
+        </div>
+
+        <div class="peertube-radio-container">
+          <input formControlName="nsfw" type="radio" name="nsfw" id="nsfwFalse" i18n-value value="false" />
+          <label for="nsfwFalse" i18n>Hide</label>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="scope" i18n>Scope:</label>
+
+        <div class="peertube-radio-container">
+          <input formControlName="scope" type="radio" name="scope" id="scopeLocal" i18n-value value="local" />
+          <label for="scopeLocal" i18n>Local videos (this instance)</label>
+        </div>
+
+        <div class="peertube-radio-container">
+          <input formControlName="scope" type="radio" name="scope" id="scopeFederated" i18n-value value="federated" />
+          <label for="scopeFederated" i18n>Federated videos (this instance + followed instances)</label>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="type" i18n>Type:</label>
+
+        <div class="peertube-radio-container">
+          <input formControlName="live" type="radio" name="live" id="liveBoth" i18n-value value="both" />
+          <label for="liveBoth" i18n>VOD & Live videos</label>
+        </div>
+
+        <div class="peertube-radio-container">
+          <input formControlName="live" type="radio" name="live" id="liveTrue" i18n-value value="true" />
+          <label for="liveTrue" i18n>Live videos</label>
+        </div>
+
+        <div class="peertube-radio-container">
+          <input formControlName="live" type="radio" name="live" id="liveFalse" i18n-value value="false" />
+          <label for="liveFalse" i18n>VOD videos</label>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="categoryOneOf" i18n>Categories:</label>
+
+        <my-select-categories formControlName="categoryOneOf"></my-select-categories>
+      </div>
+
+      <div class="form-group" *ngIf="canSeeAllVideos()">
+        <label for="allVideos" i18n>Moderation:</label>
+
+        <my-peertube-checkbox
+          formControlName="allVideos"
+          inputName="allVideos"
+          i18n-labelText labelText="Display all videos (private, unlisted or not yet published)"
+        ></my-peertube-checkbox>
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
new file mode 100644
index 000000000..8cb1ff5b8
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
@@ -0,0 +1,139 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.root {
+  margin-bottom: 45px;
+  font-size: 15px;
+}
+
+.first-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.active-filters {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 25px;
+
+  border-bottom: 1px solid $separator-border-color;
+
+  input[type=radio] + label {
+    font-weight: $font-regular;
+  }
+
+  .form-group > label:first-child {
+    display: block;
+
+    &.with-description {
+      margin-bottom: 0;
+    }
+
+    &:not(.with-description) {
+      margin-bottom: 10px;
+    }
+  }
+
+  .form-group {
+    @include margin-right(30px);
+  }
+}
+
+.pastille {
+  @include margin-right(15px);
+
+  border-radius: 24px;
+  padding: 4px 15px;
+  font-size: 16px;
+  margin-bottom: 15px;
+  cursor: pointer;
+}
+
+.filters-toggle {
+  border: 2px solid pvar(--mainForegroundColor);
+
+  my-global-icon {
+    @include margin-left(5px);
+  }
+
+  &.active my-global-icon {
+    position: relative;
+    top: -1px;
+  }
+
+  &:not(.active) {
+    my-global-icon ::ng-deep svg {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+// Than have an icon
+.filters-toggle,
+.active-filter.can-remove {
+  padding: 4px 11px 4px 15px;
+}
+
+.active-filter {
+  background-color: pvar(--channelBackgroundColor);
+  display: flex;
+  align-items: center;
+
+  &:not(.can-remove) {
+    cursor: default;
+  }
+
+  &.can-remove:hover {
+    opacity: 0.9;
+  }
+
+  my-global-icon {
+    @include margin-left(10px);
+
+    width: 16px;
+    color: pvar(--greyForegroundColor);
+  }
+}
+
+.sort {
+  min-width: 200px;
+  max-width: 300px;
+  height: min-content;
+
+  ::ng-deep {
+    .ng-select-container {
+      height: 33px !important;
+    }
+
+    .ng-value strong {
+      @include margin-left(5px);
+    }
+  }
+}
+
+my-select-languages,
+my-select-categories {
+  width: 300px;
+  display: inline-block;
+}
+
+.label-description {
+  font-size: 12px;
+  font-style: italic;
+  margin-bottom: 10px;
+
+  a {
+    color: pvar(--mainColor);
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .first-row {
+    flex-direction: column;
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
new file mode 100644
index 000000000..99f133e54
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
@@ -0,0 +1,119 @@
+import * as debug from 'debug'
+import { Subscription } from 'rxjs'
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { AuthService } from '@app/core'
+import { ServerService } from '@app/core/server/server.service'
+import { UserRight } from '@shared/models'
+import { NSFWPolicyType } from '@shared/models/videos'
+import { PeertubeModalService } from '../shared-main'
+import { VideoFilters } from './video-filters.model'
+
+const logger = debug('peertube:videos:VideoFiltersHeaderComponent')
+
+@Component({
+  selector: 'my-video-filters-header',
+  styleUrls: [ './video-filters-header.component.scss' ],
+  templateUrl: './video-filters-header.component.html'
+})
+export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
+  @Input() filters: VideoFilters
+
+  @Input() displayModerationBlock = false
+
+  @Input() defaultSort = '-publishedAt'
+  @Input() nsfwPolicy: NSFWPolicyType
+
+  @Output() filtersChanged = new EventEmitter()
+
+  areFiltersCollapsed = true
+
+  form: FormGroup
+
+  private routeSub: Subscription
+
+  constructor (
+    private auth: AuthService,
+    private serverService: ServerService,
+    private fb: FormBuilder,
+    private modalService: PeertubeModalService
+  ) {
+  }
+
+  ngOnInit () {
+    this.form = this.fb.group({
+      sort: [ '' ],
+      nsfw: [ '' ],
+      languageOneOf: [ '' ],
+      categoryOneOf: [ '' ],
+      scope: [ '' ],
+      allVideos: [ '' ],
+      live: [ '' ]
+    })
+
+    this.patchForm(false)
+
+    this.filters.onChange(() => {
+      this.patchForm(false)
+    })
+
+    this.form.valueChanges.subscribe(values => {
+      logger('Loading values from form: %O', values)
+
+      this.filters.load(values)
+      this.filtersChanged.emit()
+    })
+  }
+
+  ngOnDestroy () {
+    if (this.routeSub) this.routeSub.unsubscribe()
+  }
+
+  canSeeAllVideos () {
+    if (!this.auth.isLoggedIn()) return false
+    if (!this.displayModerationBlock) return false
+
+    return this.auth.getUser().hasRight(UserRight.SEE_ALL_VIDEOS)
+  }
+
+  isTrendingSortEnabled (sort: 'most-viewed' | 'hot' | 'best' | 'most-liked') {
+    const serverConfig = this.serverService.getHTMLConfig()
+
+    const enabled = serverConfig.trending.videos.algorithms.enabled.includes(sort)
+
+    // Best is adapted from the user
+    if (sort === 'best') return enabled && this.auth.isLoggedIn()
+
+    return enabled
+  }
+
+  resetFilter (key: string, canRemove: boolean) {
+    if (!canRemove) return
+
+    this.filters.reset(key)
+    this.patchForm(false)
+    this.filtersChanged.emit()
+  }
+
+  getFilterTitle (canRemove: boolean) {
+    if (canRemove) return $localize`Remove this filter`
+
+    return ''
+  }
+
+  onAccountSettingsClick (event: Event) {
+    if (this.auth.isLoggedIn()) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    this.modalService.openQuickSettingsSubject.next()
+  }
+
+  private patchForm (emitEvent: boolean) {
+    const defaultValues = this.filters.toFormObject()
+    this.form.patchValue(defaultValues, { emitEvent })
+
+    logger('Patched form: %O', defaultValues)
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/video-filters.model.ts b/client/src/app/shared/shared-video-miniature/video-filters.model.ts
new file mode 100644
index 000000000..a3b8129f0
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-filters.model.ts
@@ -0,0 +1,240 @@
+import { intoArray, toBoolean } from '@app/helpers'
+import { AttributesOnly } from '@shared/core-utils'
+import { BooleanBothQuery, NSFWPolicyType, VideoFilter, VideoSortField } from '@shared/models'
+
+type VideoFiltersKeys = {
+  [ id in keyof AttributesOnly<VideoFilters> ]: any
+}
+
+export type VideoFilterScope = 'local' | 'federated'
+
+export class VideoFilters {
+  sort: VideoSortField
+  nsfw: BooleanBothQuery
+
+  languageOneOf: string[]
+  categoryOneOf: number[]
+
+  scope: VideoFilterScope
+  allVideos: boolean
+
+  live: BooleanBothQuery
+
+  search: string
+
+  private defaultValues = new Map<keyof VideoFilters, any>([
+    [ 'sort', '-publishedAt' ],
+    [ 'nsfw', 'false' ],
+    [ 'languageOneOf', undefined ],
+    [ 'categoryOneOf', undefined ],
+    [ 'scope', 'federated' ],
+    [ 'allVideos', false ],
+    [ 'live', 'both' ]
+  ])
+
+  private activeFilters: { key: string, canRemove: boolean, label: string, value?: string }[] = []
+  private defaultNSFWPolicy: NSFWPolicyType
+
+  private onChangeCallbacks: Array<() => void> = []
+  private oldFormObjectString: string
+
+  constructor (defaultSort: string, defaultScope: VideoFilterScope) {
+    this.setDefaultSort(defaultSort)
+    this.setDefaultScope(defaultScope)
+
+    this.reset()
+  }
+
+  onChange (cb: () => void) {
+    this.onChangeCallbacks.push(cb)
+  }
+
+  triggerChange () {
+    // Don't run on change if the values did not change
+    const currentFormObjectString = JSON.stringify(this.toFormObject())
+    if (this.oldFormObjectString && currentFormObjectString === this.oldFormObjectString) return
+
+    this.oldFormObjectString = currentFormObjectString
+
+    for (const cb of this.onChangeCallbacks) {
+      cb()
+    }
+  }
+
+  setDefaultScope (scope: VideoFilterScope) {
+    this.defaultValues.set('scope', scope)
+  }
+
+  setDefaultSort (sort: string) {
+    this.defaultValues.set('sort', sort)
+  }
+
+  setNSFWPolicy (nsfwPolicy: NSFWPolicyType) {
+    this.updateDefaultNSFW(nsfwPolicy)
+  }
+
+  reset (specificKey?: string) {
+    for (const [ key, value ] of this.defaultValues) {
+      if (specificKey && specificKey !== key) continue
+
+      // FIXME: typings
+      this[key as any] = value
+    }
+
+    this.buildActiveFilters()
+  }
+
+  load (obj: Partial<AttributesOnly<VideoFilters>>) {
+    if (obj.sort !== undefined) this.sort = obj.sort
+
+    if (obj.nsfw !== undefined) this.nsfw = obj.nsfw
+
+    if (obj.languageOneOf !== undefined) this.languageOneOf = intoArray(obj.languageOneOf)
+    if (obj.categoryOneOf !== undefined) this.categoryOneOf = intoArray(obj.categoryOneOf)
+
+    if (obj.scope !== undefined) this.scope = obj.scope
+    if (obj.allVideos !== undefined) this.allVideos = toBoolean(obj.allVideos)
+
+    if (obj.live !== undefined) this.live = obj.live
+
+    if (obj.search !== undefined) this.search = obj.search
+
+    this.buildActiveFilters()
+  }
+
+  buildActiveFilters () {
+    this.activeFilters = []
+
+    this.activeFilters.push({
+      key: 'nsfw',
+      canRemove: false,
+      label: $localize`Sensitive content`,
+      value: this.getNSFWValue()
+    })
+
+    this.activeFilters.push({
+      key: 'scope',
+      canRemove: false,
+      label: $localize`Scope`,
+      value: this.scope === 'federated'
+        ? $localize`Federated`
+        : $localize`Local`
+    })
+
+    if (this.languageOneOf && this.languageOneOf.length !== 0) {
+      this.activeFilters.push({
+        key: 'languageOneOf',
+        canRemove: true,
+        label: $localize`Languages`,
+        value: this.languageOneOf.map(l => l.toUpperCase()).join(', ')
+      })
+    }
+
+    if (this.categoryOneOf && this.categoryOneOf.length !== 0) {
+      this.activeFilters.push({
+        key: 'categoryOneOf',
+        canRemove: true,
+        label: $localize`Categories`,
+        value: this.categoryOneOf.join(', ')
+      })
+    }
+
+    if (this.allVideos) {
+      this.activeFilters.push({
+        key: 'allVideos',
+        canRemove: true,
+        label: $localize`All videos`
+      })
+    }
+
+    if (this.live === 'true') {
+      this.activeFilters.push({
+        key: 'live',
+        canRemove: true,
+        label: $localize`Live videos`
+      })
+    } else if (this.live === 'false') {
+      this.activeFilters.push({
+        key: 'live',
+        canRemove: true,
+        label: $localize`VOD videos`
+      })
+    }
+  }
+
+  getActiveFilters () {
+    return this.activeFilters
+  }
+
+  toFormObject (): VideoFiltersKeys {
+    const result: Partial<VideoFiltersKeys> = {}
+
+    for (const [ key ] of this.defaultValues) {
+      result[key] = this[key]
+    }
+
+    return result as VideoFiltersKeys
+  }
+
+  toUrlObject () {
+    const result: { [ id: string ]: any } = {}
+
+    for (const [ key, defaultValue ] of this.defaultValues) {
+      if (this[key] !== defaultValue) {
+        result[key] = this[key]
+      }
+    }
+
+    return result
+  }
+
+  toVideosAPIObject () {
+    let filter: VideoFilter
+
+    if (this.scope === 'local' && this.allVideos) {
+      filter = 'all-local'
+    } else if (this.scope === 'federated' && this.allVideos) {
+      filter = 'all'
+    } else if (this.scope === 'local') {
+      filter = 'local'
+    }
+
+    let isLive: boolean
+    if (this.live === 'true') isLive = true
+    else if (this.live === 'false') isLive = false
+
+    return {
+      sort: this.sort,
+      nsfw: this.nsfw,
+      languageOneOf: this.languageOneOf,
+      categoryOneOf: this.categoryOneOf,
+      search: this.search,
+      filter,
+      isLive
+    }
+  }
+
+  getNSFWDisplayLabel () {
+    if (this.defaultNSFWPolicy === 'blur') return $localize`Blurred`
+
+    return $localize`Displayed`
+  }
+
+  private getNSFWValue () {
+    if (this.nsfw === 'false') return $localize`hidden`
+    if (this.defaultNSFWPolicy === 'blur') return $localize`blurred`
+
+    return $localize`displayed`
+  }
+
+  private updateDefaultNSFW (nsfwPolicy: NSFWPolicyType) {
+    const nsfw = nsfwPolicy === 'do_not_list'
+      ? 'false'
+      : 'both'
+
+    this.defaultValues.set('nsfw', nsfw)
+    this.defaultNSFWPolicy = nsfwPolicy
+
+    this.reset('nsfw')
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/video-list-header.component.html b/client/src/app/shared/shared-video-miniature/video-list-header.component.html
deleted file mode 100644
index 58db437b8..000000000
--- a/client/src/app/shared/shared-video-miniature/video-list-header.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<h1 class="title-page title-page-single">
-  <div placement="bottom" [ngbTooltip]="data.titleTooltip" container="body">
-    {{ data.titlePage }}
-  </div>
-</h1>
\ No newline at end of file
diff --git a/client/src/app/shared/shared-video-miniature/video-list-header.component.ts b/client/src/app/shared/shared-video-miniature/video-list-header.component.ts
deleted file mode 100644
index fed696672..000000000
--- a/client/src/app/shared/shared-video-miniature/video-list-header.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, Inject, ViewEncapsulation } from '@angular/core'
-
-export interface GenericHeaderData {
-  titlePage: string
-  titleTooltip?: string
-}
-
-export abstract class GenericHeaderComponent {
-  constructor (@Inject('data') public data: GenericHeaderData) {}
-}
-
-@Component({
-  selector: 'my-video-list-header',
-  // eslint-disable-next-line @angular-eslint/use-component-view-encapsulation
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './video-list-header.component.html'
-})
-export class VideoListHeaderComponent extends GenericHeaderComponent {
-  constructor (@Inject('data') public data: GenericHeaderData) {
-    super(data)
-  }
-}
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html
index 9ffeac5e8..4ccb4092c 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.html
@@ -1,11 +1,17 @@
 <div class="margin-content">
   <div class="videos-header">
-    <ng-template #videoListHeader></ng-template>
+    <h1 *ngIf="displayTitle" class="title" placement="bottom" [ngbTooltip]="titleTooltip" container="body">
+      {{ title }}
+    </h1>
 
-    <div class="action-block">
-      <my-feed *ngIf="syndicationItems" [syndicationItems]="syndicationItems"></my-feed>
+    <div *ngIf="syndicationItems" [ngClass]="{ 'no-title': !displayTitle }" class="title-subscription">
+      <ng-container i18n>Subscribe to RSS feed "{{ title }}"</ng-container>
+
+      <my-feed [syndicationItems]="syndicationItems"></my-feed>
+    </div>
 
-      <ng-container *ngFor="let action of actions">
+    <div class="action-block">
+      <ng-container *ngFor="let action of headerActions">
         <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
@@ -24,27 +30,18 @@
         </ng-template>
       </ng-container>
     </div>
-
-    <div class="moderation-block" *ngIf="displayModerationBlock">
-      <div class="c-hand" ngbDropdown placement="bottom-right auto">
-        <my-global-icon iconName="cog" ngbDropdownToggle></my-global-icon>
-
-        <div role="menu" class="dropdown-menu" ngbDropdownMenu>
-          <div class="dropdown-item">
-            <my-peertube-checkbox
-              (change)="toggleModerationDisplay()"
-              inputName="display-unlisted-private" i18n-labelText labelText="Display all videos (private, unlisted or not yet published)"
-            ></my-peertube-checkbox>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 
+  <my-video-filters-header
+    *ngIf="displayFilters" [displayModerationBlock]="displayModerationBlock"
+    [defaultSort]="defaultSort" [filters]="filters"
+    (filtersChanged)="onFiltersChanged(true)"
+  ></my-video-filters-header>
+
   <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
   <div
-    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
-    class="videos" [ngClass]="{ 'display-as-row': displayAsRow() }"
+    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()" [setAngularState]="true"
+    class="videos" [ngClass]="{ 'display-as-row': displayAsRow }"
   >
     <ng-container *ngFor="let video of videos; trackBy: videoById;">
       <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
@@ -53,7 +50,7 @@
 
       <div class="video-wrapper">
         <my-video-miniature
-          [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow()"
+          [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
           [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
           (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
         >
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
index 79e3c1bdf..e82ef05ba 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
@@ -3,44 +3,57 @@
 @use '_mixins' as *;
 @use '_miniature' as *;
 
-$icon-size: 16px;
-
-::ng-deep my-video-list-header {
-  display: flex;
-  flex-grow: 1;
-}
-
 .videos-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  margin-bottom: 30px;
 
-  my-feed {
-    display: inline-block;
-    width: calc(#{$icon-size} - 2px);
+  .title,
+  .title-subscription {
+    grid-column: 1;
   }
 
-  .moderation-block {
-    @include margin-left(.4rem);
+  .title {
+    font-size: 18px;
+    color: pvar(--mainForegroundColor);
+    display: inline-block;
+    font-weight: $font-semibold;
 
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
+    margin-top: 30px;
+    margin-bottom: 0;
+  }
+
+  .title-subscription {
+    grid-row: 2;
+    font-size: 14px;
+    color: pvar(--greyForegroundColor);
 
-    my-global-icon {
-      position: relative;
-      width: $icon-size;
+    &.no-title {
+      margin-top: 10px;
     }
   }
+
+  .action-block {
+    grid-column: 3;
+  }
+
+  my-feed {
+    @include margin-left(5px);
+
+    display: inline-block;
+    width: 16px;
+    color: pvar(--mainColor);
+    position: relative;
+    top: -2px;
+  }
 }
 
 .date-title {
   font-size: 16px;
   font-weight: $font-semibold;
   margin-bottom: 20px;
-  margin-top: -10px;
 
-  // make the element span a full grid row within .videos grid
+  // Make the element span a full grid row within .videos grid
   grid-column: 1 / -1;
 
   &:not(:first-child) {
@@ -64,6 +77,18 @@ $icon-size: 16px;
 }
 
 @media screen and (max-width: $mobile-view) {
+  .videos-header,
+  my-video-filters-header {
+    @include margin-left(15px);
+    @include margin-right(15px);
+
+    display: inline-block;
+  }
+
+  .date-title {
+    text-align: center;
+  }
+
   .videos-header {
     flex-direction: column;
     align-items: center;
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.ts b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
new file mode 100644
index 000000000..10de97298
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
@@ -0,0 +1,396 @@
+import * as debug from 'debug'
+import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
+import { debounceTime, switchMap } from 'rxjs/operators'
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { AuthService, ComponentPaginationLight, Notifier, PeerTubeRouterService, ScreenService, User, UserService } from '@app/core'
+import { GlobalIconName } from '@app/shared/shared-icons'
+import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils'
+import { ResultList, UserRight, VideoSortField } from '@shared/models'
+import { Syndication, Video } from '../shared-main'
+import { VideoFilters, VideoFilterScope } from './video-filters.model'
+import { MiniatureDisplayOptions } from './video-miniature.component'
+
+const logger = debug('peertube:videos:VideosListComponent')
+
+export type HeaderAction = {
+  iconName: GlobalIconName
+  label: string
+  justIcon?: boolean
+  routerLink?: string
+  href?: string
+  click?: (e: Event) => void
+}
+
+enum GroupDate {
+  UNKNOWN = 0,
+  TODAY = 1,
+  YESTERDAY = 2,
+  THIS_WEEK = 3,
+  THIS_MONTH = 4,
+  LAST_MONTH = 5,
+  OLDER = 6
+}
+
+@Component({
+  selector: 'my-videos-list',
+  templateUrl: './videos-list.component.html',
+  styleUrls: [ './videos-list.component.scss' ]
+})
+export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() getVideosObservableFunction: (pagination: ComponentPaginationLight, filters: VideoFilters) => Observable<ResultList<Video>>
+  @Input() getSyndicationItemsFunction: (filters: VideoFilters) => Promise<Syndication[]> | Syndication[]
+  @Input() baseRouteBuilderFunction: (filters: VideoFilters) => string[]
+
+  @Input() title: string
+  @Input() titleTooltip: string
+  @Input() displayTitle = true
+
+  @Input() defaultSort: VideoSortField
+  @Input() defaultScope: VideoFilterScope = 'federated'
+  @Input() displayFilters = false
+  @Input() displayModerationBlock = false
+
+  @Input() loadUserVideoPreferences = false
+
+  @Input() displayAsRow = false
+  @Input() displayVideoActions = true
+  @Input() groupByDate = false
+
+  @Input() headerActions: HeaderAction[] = []
+
+  @Input() displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: true,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+
+  @Input() disabled = false
+
+  @Output() filtersChanged = new EventEmitter<VideoFilters>()
+
+  videos: Video[] = []
+  filters: VideoFilters
+  syndicationItems: Syndication[]
+
+  onDataSubject = new Subject<any[]>()
+  hasDoneFirstQuery = false
+
+  userMiniature: User
+
+  private routeSub: Subscription
+  private userSub: Subscription
+  private resizeSub: Subscription
+
+  private pagination: ComponentPaginationLight = {
+    currentPage: 1,
+    itemsPerPage: 25
+  }
+
+  private groupedDateLabels: { [id in GroupDate]: string }
+  private groupedDates: { [id: number]: GroupDate } = {}
+
+  private lastQueryLength: number
+
+  constructor (
+    private notifier: Notifier,
+    private authService: AuthService,
+    private userService: UserService,
+    private route: ActivatedRoute,
+    private screenService: ScreenService,
+    private peertubeRouter: PeerTubeRouterService
+  ) {
+
+  }
+
+  ngOnInit () {
+    this.filters = new VideoFilters(this.defaultSort, this.defaultScope)
+    this.filters.load({ ...this.route.snapshot.queryParams, scope: this.defaultScope })
+
+    this.groupedDateLabels = {
+      [GroupDate.UNKNOWN]: null,
+      [GroupDate.TODAY]: $localize`Today`,
+      [GroupDate.YESTERDAY]: $localize`Yesterday`,
+      [GroupDate.THIS_WEEK]: $localize`This week`,
+      [GroupDate.THIS_MONTH]: $localize`This month`,
+      [GroupDate.LAST_MONTH]: $localize`Last month`,
+      [GroupDate.OLDER]: $localize`Older`
+    }
+
+    this.resizeSub = fromEvent(window, 'resize')
+      .pipe(debounceTime(500))
+      .subscribe(() => this.calcPageSizes())
+
+    this.calcPageSizes()
+
+    this.userService.getAnonymousOrLoggedUser()
+      .subscribe(user => {
+        this.userMiniature = user
+
+        if (this.loadUserVideoPreferences) {
+          this.loadUserSettings(user)
+        }
+
+        this.scheduleOnFiltersChanged(false)
+
+        this.subscribeToAnonymousUpdate()
+        this.subscribeToSearchChange()
+      })
+
+    // Display avatar in mobile view
+    if (this.screenService.isInMobileView()) {
+      this.displayOptions.avatar = true
+    }
+  }
+
+  ngOnDestroy () {
+    if (this.resizeSub) this.resizeSub.unsubscribe()
+    if (this.routeSub) this.routeSub.unsubscribe()
+    if (this.userSub) this.userSub.unsubscribe()
+  }
+
+  ngOnChanges (changes: SimpleChanges) {
+    if (!this.filters) return
+
+    let updated = false
+
+    if (changes['defaultScope']) {
+      updated = true
+      this.filters.setDefaultScope(this.defaultScope)
+    }
+
+    if (changes['defaultSort']) {
+      updated = true
+      this.filters.setDefaultSort(this.defaultSort)
+    }
+
+    if (!updated) return
+
+    const customizedByUser = this.hasBeenCustomizedByUser()
+
+    if (!customizedByUser) {
+      if (this.loadUserVideoPreferences) {
+        this.loadUserSettings(this.userMiniature)
+      }
+
+      this.filters.reset('scope')
+      this.filters.reset('sort')
+    }
+
+    this.scheduleOnFiltersChanged(customizedByUser)
+  }
+
+  videoById (_index: number, video: Video) {
+    return video.id
+  }
+
+  onNearOfBottom () {
+    if (this.disabled) return
+
+    // No more results
+    if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
+
+    this.pagination.currentPage += 1
+
+    this.loadMoreVideos()
+  }
+
+  loadMoreVideos (reset = false) {
+    this.getVideosObservableFunction(this.pagination, this.filters)
+      .subscribe({
+        next: ({ data }) => {
+          this.hasDoneFirstQuery = true
+          this.lastQueryLength = data.length
+
+          if (reset) this.videos = []
+          this.videos = this.videos.concat(data)
+
+          if (this.groupByDate) this.buildGroupedDateLabels()
+
+          this.onDataSubject.next(data)
+        },
+
+        error: err => {
+          const message = $localize`Cannot load more videos. Try again later.`
+
+          console.error(message, { err })
+          this.notifier.error(message)
+        }
+      })
+  }
+
+  reloadVideos () {
+    this.pagination.currentPage = 1
+    this.loadMoreVideos(true)
+  }
+
+  removeVideoFromArray (video: Video) {
+    this.videos = this.videos.filter(v => v.id !== video.id)
+  }
+
+  buildGroupedDateLabels () {
+    let currentGroupedDate: GroupDate = GroupDate.UNKNOWN
+
+    const periods = [
+      {
+        value: GroupDate.TODAY,
+        validator: (d: Date) => isToday(d)
+      },
+      {
+        value: GroupDate.YESTERDAY,
+        validator: (d: Date) => isYesterday(d)
+      },
+      {
+        value: GroupDate.THIS_WEEK,
+        validator: (d: Date) => isLastWeek(d)
+      },
+      {
+        value: GroupDate.THIS_MONTH,
+        validator: (d: Date) => isThisMonth(d)
+      },
+      {
+        value: GroupDate.LAST_MONTH,
+        validator: (d: Date) => isLastMonth(d)
+      },
+      {
+        value: GroupDate.OLDER,
+        validator: () => true
+      }
+    ]
+
+    for (const video of this.videos) {
+      const publishedDate = video.publishedAt
+
+      for (let i = 0; i < periods.length; i++) {
+        const period = periods[i]
+
+        if (currentGroupedDate <= period.value && period.validator(publishedDate)) {
+
+          if (currentGroupedDate !== period.value) {
+            currentGroupedDate = period.value
+            this.groupedDates[video.id] = currentGroupedDate
+          }
+
+          break
+        }
+      }
+    }
+  }
+
+  getCurrentGroupedDateLabel (video: Video) {
+    if (this.groupByDate === false) return undefined
+
+    return this.groupedDateLabels[this.groupedDates[video.id]]
+  }
+
+  scheduleOnFiltersChanged (customizedByUser: boolean) {
+    // We'll reload videos, but avoid weird UI effect
+    this.videos = []
+
+    setTimeout(() => this.onFiltersChanged(customizedByUser))
+  }
+
+  onFiltersChanged (customizedByUser: boolean) {
+    logger('Running on filters changed')
+
+    this.updateUrl(customizedByUser)
+
+    this.filters.triggerChange()
+
+    this.reloadSyndicationItems()
+    this.reloadVideos()
+  }
+
+  protected enableAllFilterIfPossible () {
+    if (!this.authService.isLoggedIn()) return
+
+    this.authService.userInformationLoaded
+      .subscribe(() => {
+        const user = this.authService.getUser()
+        this.displayModerationBlock = user.hasRight(UserRight.SEE_ALL_VIDEOS)
+      })
+  }
+
+  private calcPageSizes () {
+    if (this.screenService.isInMobileView()) {
+      this.pagination.itemsPerPage = 5
+    }
+  }
+
+  private loadUserSettings (user: User) {
+    this.filters.setNSFWPolicy(user.nsfwPolicy)
+
+    // Don't reset language filter if we don't want to refresh the component
+    if (!this.hasBeenCustomizedByUser()) {
+      this.filters.load({ languageOneOf: user.videoLanguages })
+    }
+  }
+
+  private reloadSyndicationItems () {
+    Promise.resolve(this.getSyndicationItemsFunction(this.filters))
+      .then(items => {
+        if (!items || items.length === 0) this.syndicationItems = undefined
+        else this.syndicationItems = items
+      })
+      .catch(err => console.error('Cannot get syndication items.', err))
+  }
+
+  private updateUrl (customizedByUser: boolean) {
+    const baseQuery = this.filters.toUrlObject()
+
+    // Set or reset customized by user query param
+    const queryParams = customizedByUser || this.hasBeenCustomizedByUser()
+      ? { ...baseQuery, c: customizedByUser }
+      : baseQuery
+
+    logger('Will inject %O in URL query', queryParams)
+
+    const baseRoute = this.baseRouteBuilderFunction
+      ? this.baseRouteBuilderFunction(this.filters)
+      : []
+
+    const pathname = window.location.pathname
+
+    const baseRouteChanged = baseRoute.length !== 0 &&
+                             pathname !== '/' && // Exclude special '/' case, we'll be redirected without component change
+                             baseRoute.length !== 0 && pathname !== baseRoute.join('/')
+
+    if (baseRouteChanged || Object.keys(baseQuery).length !== 0 || customizedByUser) {
+      this.peertubeRouter.silentNavigate(baseRoute, queryParams)
+    }
+
+    this.filtersChanged.emit(this.filters)
+  }
+
+  private hasBeenCustomizedByUser () {
+    return this.route.snapshot.queryParams['c'] === 'true'
+  }
+
+  private subscribeToAnonymousUpdate () {
+    this.userSub = this.userService.listenAnonymousUpdate()
+      .pipe(switchMap(() => this.userService.getAnonymousOrLoggedUser()))
+      .subscribe(user => {
+        if (this.loadUserVideoPreferences) {
+          this.loadUserSettings(user)
+        }
+
+        if (this.hasDoneFirstQuery) {
+          this.reloadVideos()
+        }
+      })
+  }
+
+  private subscribeToSearchChange () {
+    this.routeSub = this.route.queryParams.subscribe(param => {
+      if (!param['search']) return
+
+      this.filters.load({ search: param['search'] })
+      this.onFiltersChanged(true)
+    })
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
index 4ee90ce7f..f2af874dd 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
@@ -1,6 +1,9 @@
 <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="videos"
+  myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()" [setAngularState]="true"
+>
   <div class="video" *ngFor="let video of videos; let i = index; trackBy: videoById">
 
     <div class="checkbox-container" *ngIf="enableSelection">
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
index 456b36926..cafaf6e85 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -1,22 +1,8 @@
-import { Observable } from 'rxjs'
-import {
-  AfterContentInit,
-  Component,
-  ComponentFactoryResolver,
-  ContentChildren,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  QueryList,
-  TemplateRef
-} from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, ComponentPagination, LocalStorageService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core'
+import { Observable, Subject } from 'rxjs'
+import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef } from '@angular/core'
+import { ComponentPagination, Notifier, User } from '@app/core'
 import { ResultList, VideoSortField } from '@shared/models'
 import { PeerTubeTemplateDirective, Video } from '../shared-main'
-import { AbstractVideoList } from './abstract-video-list'
 import { MiniatureDisplayOptions } from './video-miniature.component'
 
 export type SelectionType = { [ id: number ]: boolean }
@@ -26,14 +12,18 @@ export type SelectionType = { [ id: number ]: boolean }
   templateUrl: './videos-selection.component.html',
   styleUrls: [ './videos-selection.component.scss' ]
 })
-export class VideosSelectionComponent extends AbstractVideoList implements OnInit, OnDestroy, AfterContentInit {
+export class VideosSelectionComponent implements AfterContentInit {
   @Input() user: User
   @Input() pagination: ComponentPagination
+
   @Input() titlePage: string
+
   @Input() miniatureDisplayOptions: MiniatureDisplayOptions
+
   @Input() noResultMessage = $localize`No results.`
   @Input() enableSelection = true
-  @Input() loadOnInit = true
+
+  @Input() disabled = false
 
   @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>
 
@@ -47,19 +37,18 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
   rowButtonsTemplate: TemplateRef<any>
   globalButtonsTemplate: TemplateRef<any>
 
+  videos: Video[] = []
+  sort: VideoSortField = '-publishedAt'
+
+  onDataSubject = new Subject<any[]>()
+
+  hasDoneFirstQuery = false
+
+  private lastQueryLength: number
+
   constructor (
-    protected router: Router,
-    protected route: ActivatedRoute,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected userService: UserService,
-    protected screenService: ScreenService,
-    protected storageService: LocalStorageService,
-    protected serverService: ServerService,
-    protected cfr: ComponentFactoryResolver
-  ) {
-    super()
-  }
+    private notifier: Notifier
+  ) { }
 
   @Input() get selection () {
     return this._selection
@@ -79,10 +68,6 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
     this.videosModelChange.emit(this.videos)
   }
 
-  ngOnInit () {
-    super.ngOnInit()
-  }
-
   ngAfterContentInit () {
     {
       const t = this.templates.find(t => t.name === 'rowButtons')
@@ -93,10 +78,8 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
       const t = this.templates.find(t => t.name === 'globalButtons')
       if (t) this.globalButtonsTemplate = t.template
     }
-  }
 
-  ngOnDestroy () {
-    super.ngOnDestroy()
+    this.loadMoreVideos()
   }
 
   getVideosObservable (page: number) {
@@ -111,11 +94,50 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
     return Object.keys(this._selection).some(k => this._selection[k] === true)
   }
 
-  generateSyndicationList () {
-    throw new Error('Method not implemented.')
+  videoById (index: number, video: Video) {
+    return video.id
+  }
+
+  onNearOfBottom () {
+    if (this.disabled) return
+
+    // No more results
+    if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
+
+    this.pagination.currentPage += 1
+
+    this.loadMoreVideos()
+  }
+
+  loadMoreVideos (reset = false) {
+    this.getVideosObservable(this.pagination.currentPage)
+      .subscribe({
+        next: ({ data }) => {
+          this.hasDoneFirstQuery = true
+          this.lastQueryLength = data.length
+
+          if (reset) this.videos = []
+          this.videos = this.videos.concat(data)
+          this.videosModel = this.videos
+
+          this.onDataSubject.next(data)
+        },
+
+        error: err => {
+          const message = $localize`Cannot load more videos. Try again later.`
+
+          console.error(message, { err })
+          this.notifier.error(message)
+        }
+      })
+  }
+
+  reloadVideos () {
+    this.pagination.currentPage = 1
+    this.loadMoreVideos(true)
   }
 
-  protected onMoreVideos () {
-    this.videosModel = this.videos
+  removeVideoFromArray (video: Video) {
+    this.videos = this.videos.filter(v => v.id !== video.id)
   }
 }