Add ability to view my followers

32 files changed, 400 insertions, 193 deletions

diff --git a/client/src/app/+about/about-follows/about-follows.component.ts b/client/src/app/+about/about-follows/about-follows.component.ts
index a35272681..84b47e967 100644
--- a/client/src/app/+about/about-follows/about-follows.component.ts
+++ b/client/src/app/+about/about-follows/about-follows.component.ts
@@ -88,7 +88,7 @@ export class AboutFollowsComponent implements OnInit {
   }
 
   private loadMoreFollowers (reset = false) {
-    const pagination = this.restService.componentPaginationToRestPagination(this.followersPagination)
+    const pagination = this.restService.componentToRestPagination(this.followersPagination)
 
     this.followService.getFollowers({ pagination, sort: this.sort, state: 'accepted' })
         .subscribe({
@@ -106,7 +106,7 @@ export class AboutFollowsComponent implements OnInit {
   }
 
   private loadMoreFollowings (reset = false) {
-    const pagination = this.restService.componentPaginationToRestPagination(this.followingsPagination)
+    const pagination = this.restService.componentToRestPagination(this.followingsPagination)
 
     this.followService.getFollowing({ pagination, sort: this.sort, state: 'accepted' })
         .subscribe({
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index c4e2159d1..cdd00487b 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -1,6 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-@use '_actor' as *;
+@use '_account-channel-page' as *;
 @use '_miniature' as *;
 
 .root {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 1f542e458..537e06d4d 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -416,7 +416,7 @@
                   <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
 
                   <span i18n>
-                    See <a href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferer" target="_blank">the documentation</a> for more information about the expected URL
+                    See <a href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
                   </span>
                 </ng-container>
 
diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
index c4f480cae..b95ee0c9d 100644
--- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -51,7 +51,7 @@ export class PluginApiService {
     componentPagination: ComponentPagination,
     sort: string
   ) {
-    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+    const pagination = this.restService.componentToRestPagination(componentPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
@@ -67,7 +67,7 @@ export class PluginApiService {
     sort: string,
     search?: string
   ) {
-    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+    const pagination = this.restService.componentToRestPagination(componentPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index 4c5b46d5b..bbe583971 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -27,7 +27,12 @@
         <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div>
       </a>
 
-      <div i18n class="video-channel-followers">{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
+      <a
+        i18n class="video-channel-followers"
+        [routerLink]="[ '/my-library', 'followers' ]" [queryParams]="{ search: 'channel:' + videoChannel.name }"
+      >
+        {videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
+      </a>
 
       <div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div>
 
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index 9ef5513b6..998e46cb2 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -54,6 +54,10 @@ my-edit-button {
   color: $grey-actor-name;
 }
 
+.video-channel-followers {
+  color: pvar(--mainForegroundColor);
+}
+
 .video-channel-buttons {
   margin-top: 10px;
   min-width: 190px;
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
new file mode 100644
index 000000000..d2b2dccb6
--- /dev/null
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -0,0 +1,31 @@
+<h1>
+  <span>
+    <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My followers</ng-container>
+    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+  </span>
+</h1>
+
+<div class="followers-header">
+  <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
+</div>
+
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">No follower found.</div>
+
+<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+  <div *ngFor="let follow of follows" class="actor">
+    <my-actor-avatar [account]="follow.follower" [href]="follow.follower.url"></my-actor-avatar>
+
+    <div class="actor-info">
+      <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
+        <div class="actor-display-name">{{ follow.follower.name + '@' + follow.follower.host }}</div>
+        <span class="glyphicon glyphicon-new-window"></span>
+      </a>
+
+      <div class="text-muted">
+        <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container>
+        <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.scss b/client/src/app/+my-library/my-follows/my-followers.component.scss
new file mode 100644
index 000000000..15b51c419
--- /dev/null
+++ b/client/src/app/+my-library/my-follows/my-followers.component.scss
@@ -0,0 +1,26 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_actor' as *;
+
+.followers-header {
+  margin-bottom: 30px;
+  display: flex;
+}
+
+input[type=text] {
+  @include peertube-input-text(300px);
+}
+
+.actor {
+  @include actor-row($avatar-size: 40px, $min-height: auto, $separator: true);
+
+  .actor-display-name {
+    font-size: 16px;
+
+    + .glyphicon {
+      @include margin-left(5px);
+
+      font-size: 12px;
+    }
+  }
+}
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.ts b/client/src/app/+my-library/my-follows/my-followers.component.ts
new file mode 100644
index 000000000..a7bbe6d99
--- /dev/null
+++ b/client/src/app/+my-library/my-follows/my-followers.component.ts
@@ -0,0 +1,76 @@
+import { Subject } from 'rxjs'
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { AuthService, ComponentPagination, Notifier } from '@app/core'
+import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
+import { ActorFollow } from '@shared/models'
+
+@Component({
+  templateUrl: './my-followers.component.html',
+  styleUrls: [ './my-followers.component.scss' ]
+})
+export class MyFollowersComponent implements OnInit {
+  follows: ActorFollow[] = []
+
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalItems: null
+  }
+
+  onDataSubject = new Subject<any[]>()
+  search: string
+
+  constructor (
+    private route: ActivatedRoute,
+    private auth: AuthService,
+    private userSubscriptionService: UserSubscriptionService,
+    private notifier: Notifier
+  ) {}
+
+  ngOnInit () {
+    if (this.route.snapshot.queryParams['search']) {
+      this.search = this.route.snapshot.queryParams['search']
+    }
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+
+    this.pagination.currentPage += 1
+    this.loadFollowers()
+  }
+
+  onSearch (search: string) {
+    this.search = search
+    this.loadFollowers(false)
+  }
+
+  isFollowingAccount (follow: ActorFollow) {
+    return follow.following.name === this.getUsername()
+  }
+
+  private loadFollowers (more = true) {
+    this.userSubscriptionService.listFollowers({
+      pagination: this.pagination,
+      nameWithHost: this.getUsername(),
+      search: this.search
+    }).subscribe({
+      next: res => {
+        this.follows = more
+          ? this.follows.concat(res.data)
+          : res.data
+        this.pagination.totalItems = res.total
+
+        this.onDataSubject.next(res.data)
+      },
+
+      error: err => this.notifier.error(err.message)
+    })
+  }
+
+  private getUsername () {
+    return this.auth.getUser().username
+  }
+}
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
index ca5ad794a..775f0e783 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
@@ -12,17 +12,17 @@
 
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>
 
-<div class="video-channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
-  <div *ngFor="let videoChannel of videoChannels" class="video-channel">
+<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+  <div *ngFor="let videoChannel of videoChannels" class="actor">
     <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]"></my-actor-avatar>
 
-    <div class="video-channel-info">
-      <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
-        <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
-        <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div>
+    <div class="actor-info">
+      <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="actor-names" i18n-title title="Channel page">
+        <div class="actor-display-name">{{ videoChannel.displayName }}</div>
+        <div class="actor-name">{{ videoChannel.nameWithHost }}</div>
       </a>
 
-      <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
+      <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
 
       <a [routerLink]="[ '/a', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
         <span i18n>Created by {{ videoChannel.ownerBy }}</span>
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.scss b/client/src/app/+my-library/my-follows/my-subscriptions.component.scss
new file mode 100644
index 000000000..310e11cb0
--- /dev/null
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.scss
@@ -0,0 +1,16 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_actor' as *;
+
+.video-subscriptions-header {
+  margin-bottom: 30px;
+  display: flex;
+}
+
+input[type=text] {
+  @include peertube-input-text(300px);
+}
+
+.actor {
+  @include actor-row;
+}
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts b/client/src/app/+my-library/my-follows/my-subscriptions.component.ts
index f676aa014..f676aa014 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.ts
diff --git a/client/src/app/+my-library/my-library-routing.module.ts b/client/src/app/+my-library/my-library-routing.module.ts
index 76894bed8..73858fb82 100644
--- a/client/src/app/+my-library/my-library-routing.module.ts
+++ b/client/src/app/+my-library/my-library-routing.module.ts
@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { LoginGuard } from '../core'
+import { MyFollowersComponent } from './my-follows/my-followers.component'
+import { MySubscriptionsComponent } from './my-follows/my-subscriptions.component'
 import { MyHistoryComponent } from './my-history/my-history.component'
 import { MyLibraryComponent } from './my-library.component'
 import { MyOwnershipComponent } from './my-ownership/my-ownership.component'
-import { MySubscriptionsComponent } from './my-subscriptions/my-subscriptions.component'
 import { MyVideoImportsComponent } from './my-video-imports/my-video-imports.component'
 import { MyVideoPlaylistCreateComponent } from './my-video-playlists/my-video-playlist-create.component'
 import { MyVideoPlaylistElementsComponent } from './my-video-playlists/my-video-playlist-elements.component'
@@ -100,6 +101,15 @@ const myLibraryRoutes: Routes = [
         }
       },
       {
+        path: 'followers',
+        component: MyFollowersComponent,
+        data: {
+          meta: {
+            title: $localize`My followers`
+          }
+        }
+      },
+      {
         path: 'ownership',
         component: MyOwnershipComponent,
         data: {
diff --git a/client/src/app/+my-library/my-library.component.ts b/client/src/app/+my-library/my-library.component.ts
index 16a7f63e3..ff901952f 100644
--- a/client/src/app/+my-library/my-library.component.ts
+++ b/client/src/app/+my-library/my-library.component.ts
@@ -61,8 +61,19 @@ export class MyLibraryComponent implements OnInit {
       },
 
       {
-        label: $localize`Subscriptions`,
-        routerLink: '/my-library/subscriptions'
+        label: $localize`Follows`,
+        children: [
+          {
+            label: $localize`Subscriptions`,
+            iconName: 'subscriptions',
+            routerLink: '/my-library/subscriptions'
+          },
+          {
+            label: $localize`Followers`,
+            iconName: 'follower',
+            routerLink: '/my-library/followers'
+          }
+        ]
       },
 
       {
diff --git a/client/src/app/+my-library/my-library.module.ts b/client/src/app/+my-library/my-library.module.ts
index 264ad03f7..360c53589 100644
--- a/client/src/app/+my-library/my-library.module.ts
+++ b/client/src/app/+my-library/my-library.module.ts
@@ -13,12 +13,13 @@ import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscripti
 import { SharedVideoLiveModule } from '@app/shared/shared-video-live'
 import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
 import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist/shared-video-playlist.module'
+import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
+import { MySubscriptionsComponent } from './my-follows/my-subscriptions.component'
 import { MyHistoryComponent } from './my-history/my-history.component'
 import { MyLibraryRoutingModule } from './my-library-routing.module'
 import { MyLibraryComponent } from './my-library.component'
 import { MyAcceptOwnershipComponent } from './my-ownership/my-accept-ownership/my-accept-ownership.component'
 import { MyOwnershipComponent } from './my-ownership/my-ownership.component'
-import { MySubscriptionsComponent } from './my-subscriptions/my-subscriptions.component'
 import { MyVideoImportsComponent } from './my-video-imports/my-video-imports.component'
 import { MyVideoPlaylistCreateComponent } from './my-video-playlists/my-video-playlist-create.component'
 import { MyVideoPlaylistElementsComponent } from './my-video-playlists/my-video-playlist-elements.component'
@@ -26,7 +27,7 @@ import { MyVideoPlaylistUpdateComponent } from './my-video-playlists/my-video-pl
 import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component'
 import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component'
 import { MyVideosComponent } from './my-videos/my-videos.component'
-import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
+import { MyFollowersComponent } from './my-follows/my-followers.component'
 
 @NgModule({
   imports: [
@@ -61,6 +62,7 @@ import { SharedActorImageModule } from '../shared/shared-actor-image/shared-acto
     MyAcceptOwnershipComponent,
     MyVideoImportsComponent,
     MySubscriptionsComponent,
+    MyFollowersComponent,
     MyHistoryComponent,
 
     MyVideoPlaylistCreateComponent,
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
deleted file mode 100644
index edca06a66..000000000
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-input[type=text] {
-  @include peertube-input-text(300px);
-}
-
-.video-channel {
-  @include row-blocks;
-
-  > my-actor-avatar {
-    @include actor-avatar-size(80px);
-
-    @include margin-right(10px);
-  }
-}
-
-.video-channel-info {
-  flex-grow: 1;
-
-  a.video-channel-names {
-    @include disable-default-a-behaviour;
-
-    width: fit-content;
-    display: flex;
-    align-items: baseline;
-    color: pvar(--mainForegroundColor);
-
-    .video-channel-display-name {
-      font-weight: $font-semibold;
-      font-size: 18px;
-    }
-
-    .video-channel-name {
-      @include margin-left(5px);
-
-      font-size: 14px;
-      color: $grey-actor-name;
-    }
-  }
-}
-
-.actor-owner {
-  @include disable-default-a-behaviour;
-
-  font-size: 13px;
-  color: pvar(--mainForegroundColor);
-
-  span:hover {
-    opacity: 0.8;
-  }
-
-  my-actor-avatar {
-    @include margin-left(7px);
-    display: inline-block;
-    vertical-align: top;
-  }
-}
-
-.video-subscriptions-header {
-  margin-bottom: 30px;
-  display: flex;
-}
-
-@media screen and (max-width: $small-view) {
-  .video-subscriptions-header input[type=text] {
-    width: 100% !important;
-  }
-
-  .video-channel-info {
-    padding-bottom: 10px;
-    text-align: center;
-
-    .video-channel-names {
-      flex-direction: column;
-      align-items: center !important;
-      margin: auto;
-    }
-  }
-
-  img {
-    @include margin-right(0);
-  }
-}
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index d174dcd62..72ee2d7bb 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,6 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-@use '_actor' as *;
+@use '_account-channel-page' as *;
 @use '_miniature' as *;
 
 .root {
diff --git a/client/src/app/core/rest/rest.service.ts b/client/src/app/core/rest/rest.service.ts
index 98e45ffc0..93b5f56b2 100644
--- a/client/src/app/core/rest/rest.service.ts
+++ b/client/src/app/core/rest/rest.service.ts
@@ -13,9 +13,8 @@ interface QueryStringFilterPrefixes {
   }
 }
 
-type ParseQueryStringFilterResult = {
-  [key: string]: string | number | boolean | (string | number | boolean)[]
-}
+type ParseQueryStringFilters <K extends keyof any> = Partial<Record<K, string | number | boolean | (string | number | boolean)[]>>
+type ParseQueryStringFiltersResult <K extends keyof any> = ParseQueryStringFilters<K> & { search?: string }
 
 @Injectable()
 export class RestService {
@@ -67,14 +66,17 @@ export class RestService {
     return params
   }
 
-  componentPaginationToRestPagination (componentPagination: ComponentPaginationLight): RestPagination {
+  componentToRestPagination (componentPagination: ComponentPaginationLight): RestPagination {
     const start: number = (componentPagination.currentPage - 1) * componentPagination.itemsPerPage
     const count: number = componentPagination.itemsPerPage
 
     return { start, count }
   }
 
-  parseQueryStringFilter (q: string, prefixes: QueryStringFilterPrefixes): ParseQueryStringFilterResult {
+  /*
+  * Returns an object containing the filters and the remaining search
+  */
+  parseQueryStringFilter <T extends QueryStringFilterPrefixes> (q: string, prefixes: T): ParseQueryStringFiltersResult<keyof T> {
     if (!q) return {}
 
     // Tokenize the strings using spaces that are not in quotes
@@ -90,9 +92,9 @@ export class RestService {
       return prefixeStrings.every(prefixString => t.startsWith(prefixString) === false)
     })
 
-    const additionalFilters: ParseQueryStringFilterResult = {}
+    const additionalFilters: ParseQueryStringFilters<keyof T> = {}
 
-    for (const prefixKey of Object.keys(prefixes)) {
+    for (const prefixKey of Object.keys(prefixes) as (keyof T)[]) {
       const prefixObj = prefixes[prefixKey]
       const prefix = prefixObj.prefix
 
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-help.component.html b/client/src/app/shared/shared-custom-markup/custom-markup-help.component.html
index dd7a56d7d..0ca84ff78 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup-help.component.html
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-help.component.html
@@ -1,3 +1,3 @@
 <ng-container i18n>
-  <a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noreferer noopener">Markdown compatible</a> that also supports <a href="https://docs.joinpeertube.org/api-custom-client-markup" target="_blank" rel="noreferer noopener">custom PeerTube HTML tags</a>
+  <a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noreferrer noopener">Markdown compatible</a> that also supports <a href="https://docs.joinpeertube.org/api-custom-client-markup" target="_blank" rel="noreferrer noopener">custom PeerTube HTML tags</a>
 </ng-container>
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
index 72cd6d460..113219f48 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
@@ -77,6 +77,8 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
 
         logger('On route search change "%s".', search)
 
+        if (this.searchValue === search) return
+
         this.searchValue = search
         this.emitSearch()
       })
diff --git a/client/src/app/shared/shared-main/users/user-history.service.ts b/client/src/app/shared/shared-main/users/user-history.service.ts
index 91268af8c..a4841897d 100644
--- a/client/src/app/shared/shared-main/users/user-history.service.ts
+++ b/client/src/app/shared/shared-main/users/user-history.service.ts
@@ -19,7 +19,7 @@ export class UserHistoryService {
   ) {}
 
   getUserVideosHistory (historyPagination: ComponentPaginationLight, search?: string) {
-    const pagination = this.restService.componentPaginationToRestPagination(historyPagination)
+    const pagination = this.restService.componentToRestPagination(historyPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination)
diff --git a/client/src/app/shared/shared-main/users/user-notification.service.ts b/client/src/app/shared/shared-main/users/user-notification.service.ts
index 09fee87a3..e27dab21a 100644
--- a/client/src/app/shared/shared-main/users/user-notification.service.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.service.ts
@@ -29,7 +29,7 @@ export class UserNotificationService {
     const { pagination, ignoreLoadingBar, unread, sort } = parameters
 
     let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, this.restService.componentPaginationToRestPagination(pagination), sort)
+    params = this.restService.addRestGetParams(params, this.restService.componentToRestPagination(pagination), sort)
 
     if (unread) params = params.append('unread', `${unread}`)
 
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
index ee8df864a..9af6da784 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.html
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -203,7 +203,7 @@
         <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
-            <a (click)="markAsRead(notification)" [href]="notification.peertubeVersionLink" target="_blank" rel="noopener noreferer">A new version of PeerTube</a> is available: {{ notification.peertube.latestVersion }}
+            <a (click)="markAsRead(notification)" [href]="notification.peertubeVersionLink" target="_blank" rel="noopener noreferrer">A new version of PeerTube</a> is available: {{ notification.peertube.latestVersion }}
         </div>
       </ng-container>
 
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
index 7560a35a8..dc00fabdc 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
@@ -50,7 +50,7 @@ export class VideoChannelService {
     const { account, componentPagination, withStats = false, sort, search } = options
 
     const pagination = componentPagination
-      ? this.restService.componentPaginationToRestPagination(componentPagination)
+      ? this.restService.componentToRestPagination(componentPagination)
       : { start: 0, count: 20 }
 
     let params = new HttpParams()
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 3481b116f..2f43f1b9d 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -123,7 +123,7 @@ export class VideoService {
   }
 
   getMyVideos (videoPagination: ComponentPaginationLight, sort: VideoSortField, search?: string): Observable<ResultList<Video>> {
-    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+    const pagination = this.restService.componentToRestPagination(videoPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
@@ -377,7 +377,7 @@ export class VideoService {
   private buildCommonVideosParams (options: CommonVideoParams & { params: HttpParams }) {
     const { params, videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount, nsfwPolicy, isLive, nsfw } = options
 
-    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+    const pagination = this.restService.componentToRestPagination(videoPagination)
     let newParams = this.restService.addRestGetParams(params, pagination, sort)
 
     if (filter) newParams = newParams.set('filter', filter)
diff --git a/client/src/app/shared/shared-search/search.service.ts b/client/src/app/shared/shared-search/search.service.ts
index fdfab0e0e..71350c733 100644
--- a/client/src/app/shared/shared-search/search.service.ts
+++ b/client/src/app/shared/shared-search/search.service.ts
@@ -43,7 +43,7 @@ export class SearchService {
     let pagination: RestPagination
 
     if (componentPagination) {
-      pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+      pagination = this.restService.componentToRestPagination(componentPagination)
     }
 
     let params = new HttpParams()
@@ -77,7 +77,7 @@ export class SearchService {
 
     let pagination: RestPagination
     if (componentPagination) {
-      pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+      pagination = this.restService.componentToRestPagination(componentPagination)
     }
 
     let params = new HttpParams()
@@ -111,7 +111,7 @@ export class SearchService {
 
     let pagination: RestPagination
     if (componentPagination) {
-      pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+      pagination = this.restService.componentToRestPagination(componentPagination)
     }
 
     let params = new HttpParams()
diff --git a/client/src/app/shared/shared-user-subscription/user-subscription.service.ts b/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
index f289fb6cf..ede65ff39 100644
--- a/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
+++ b/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
@@ -6,7 +6,7 @@ import { Injectable } from '@angular/core'
 import { ComponentPaginationLight, RestExtractor, RestService } from '@app/core'
 import { buildBulkObservable } from '@app/helpers'
 import { Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
-import { ResultList, VideoChannel as VideoChannelServer, VideoSortField } from '@shared/models'
+import { ActorFollow, ResultList, VideoChannel as VideoChannelServer, VideoSortField } from '@shared/models'
 import { environment } from '../../../environments/environment'
 
 const logger = debug('peertube:subscriptions:UserSubscriptionService')
@@ -17,6 +17,8 @@ type SubscriptionExistResultObservable = { [ uri: string ]: Observable<boolean>
 @Injectable()
 export class UserSubscriptionService {
   static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/users/me/subscriptions'
+  static BASE_VIDEO_CHANNELS_URL = environment.apiUrl + '/api/v1/video-channels'
+  static BASE_ACCOUNTS_URL = environment.apiUrl + '/api/v1/accounts'
 
   // Use a replay subject because we "next" a value before subscribing
   private existsSubject = new ReplaySubject<string>(1)
@@ -43,13 +45,46 @@ export class UserSubscriptionService {
     )
   }
 
+  listFollowers (parameters: {
+    pagination: ComponentPaginationLight
+    nameWithHost: string
+    search?: string
+  }) {
+    const { pagination, nameWithHost, search } = parameters
+
+    let url = `${UserSubscriptionService.BASE_ACCOUNTS_URL}/${nameWithHost}/followers`
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, this.restService.componentToRestPagination(pagination), '-createdAt')
+
+    if (search) {
+      const filters = this.restService.parseQueryStringFilter(search, {
+        channel: {
+          prefix: 'channel:'
+        }
+      })
+
+      if (filters.channel) {
+        url = `${UserSubscriptionService.BASE_VIDEO_CHANNELS_URL}/${filters.channel}/followers`
+      }
+
+      params = this.restService.addObjectParams(params, { search: filters.search })
+    }
+
+    return this.authHttp
+      .get<ResultList<ActorFollow>>(url, { params })
+      .pipe(
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+
   getUserSubscriptionVideos (parameters: {
     videoPagination: ComponentPaginationLight
     sort: VideoSortField
     skipCount?: boolean
   }): Observable<ResultList<Video>> {
     const { videoPagination, sort, skipCount } = parameters
-    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+    const pagination = this.restService.componentToRestPagination(videoPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
@@ -106,7 +141,7 @@ export class UserSubscriptionService {
     const { pagination, search } = parameters
     const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL
 
-    const restPagination = this.restService.componentPaginationToRestPagination(pagination)
+    const restPagination = this.restService.componentToRestPagination(pagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, restPagination)
diff --git a/client/src/app/shared/shared-video-comment/video-comment.service.ts b/client/src/app/shared/shared-video-comment/video-comment.service.ts
index 5550c96e4..fd1cae7f8 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.service.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.service.ts
@@ -81,7 +81,7 @@ export class VideoCommentService {
   }): Observable<ThreadsResultList<VideoComment>> {
     const { videoId, componentPagination, sort } = parameters
 
-    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+    const pagination = this.restService.componentToRestPagination(componentPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
index fc291329a..3faf81d11 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
@@ -62,7 +62,7 @@ export class VideoPlaylistService {
 
   listChannelPlaylists (videoChannel: VideoChannel, componentPagination: ComponentPaginationLight): Observable<ResultList<VideoPlaylist>> {
     const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/video-playlists'
-    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+    const pagination = this.restService.componentToRestPagination(componentPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination)
@@ -103,7 +103,7 @@ export class VideoPlaylistService {
   ): Observable<ResultList<VideoPlaylist>> {
     const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-playlists'
     const pagination = componentPagination
-      ? this.restService.componentPaginationToRestPagination(componentPagination)
+      ? this.restService.componentToRestPagination(componentPagination)
       : undefined
 
     let params = new HttpParams()
@@ -259,7 +259,7 @@ export class VideoPlaylistService {
     componentPagination: ComponentPaginationLight
   }): Observable<ResultList<VideoPlaylistElement>> {
     const path = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + options.videoPlaylistId + '/videos'
-    const pagination = this.restService.componentPaginationToRestPagination(options.componentPagination)
+    const pagination = this.restService.componentToRestPagination(options.componentPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination)
diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
new file mode 100644
index 000000000..b135bbb6d
--- /dev/null
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -0,0 +1,88 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@mixin section-label-responsive {
+  color: pvar(--mainColor);
+  font-size: 12px;
+  margin-bottom: 15px;
+  font-weight: $font-bold;
+  letter-spacing: 2.5px;
+
+  @media screen and (max-width: $mobile-view) {
+    font-size: 10px;
+    letter-spacing: 2.1px;
+    margin-bottom: 5px;
+  }
+}
+
+@mixin show-more-description {
+  color: pvar(--mainColor);
+  cursor: pointer;
+  margin: 10px auto 45px;
+}
+
+@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
+  display: flex;
+  grid-column: 1;
+  margin-bottom: 30px;
+
+  .main-avatar {
+    @include actor-avatar-size(120px);
+  }
+
+  > div {
+    @include margin-left($img-margin);
+
+    min-width: 1px;
+  }
+
+  .actor-info {
+    display: flex;
+
+    > div:first-child {
+      flex-grow: 1;
+      min-width: 1px;
+    }
+  }
+
+  .actor-display-name {
+    @include peertube-word-wrap;
+
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  h1 {
+    font-size: 28px;
+    font-weight: $font-bold;
+    margin: 0;
+  }
+
+  .actor-handle {
+    @include ellipsis;
+  }
+
+  .actor-handle,
+  .actor-counters {
+    color: pvar(--greyForegroundColor);
+    font-size: $grey-font-size;
+  }
+
+  .actor-counters > *:not(:last-child)::after {
+    content: '•';
+    margin: 0 10px;
+    color: pvar(--mainColor);
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    margin-bottom: 15px;
+
+    h1 {
+      font-size: 22px;
+    }
+
+    .main-avatar {
+      @include actor-avatar-size(80px);
+    }
+  }
+}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index b135bbb6d..f9e44b8ad 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -1,88 +1,68 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-@mixin section-label-responsive {
-  color: pvar(--mainColor);
-  font-size: 12px;
-  margin-bottom: 15px;
-  font-weight: $font-bold;
-  letter-spacing: 2.5px;
-
-  @media screen and (max-width: $mobile-view) {
-    font-size: 10px;
-    letter-spacing: 2.1px;
-    margin-bottom: 5px;
-  }
-}
-
-@mixin show-more-description {
-  color: pvar(--mainColor);
-  cursor: pointer;
-  margin: 10px auto 45px;
-}
-
-@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
-  display: flex;
-  grid-column: 1;
-  margin-bottom: 30px;
+@mixin actor-row ($avatar-size: 80px, $avatar-margin-right: 10px, $min-height: 130px, $separator: true) {
+  @include row-blocks($min-height: $min-height, $separator: $separator);
 
-  .main-avatar {
-    @include actor-avatar-size(120px);
-  }
-
-  > div {
-    @include margin-left($img-margin);
+  > my-actor-avatar {
+    @include actor-avatar-size($avatar-size);
 
-    min-width: 1px;
+    @include margin-right($avatar-margin-right);
   }
 
   .actor-info {
-    display: flex;
-
-    > div:first-child {
-      flex-grow: 1;
-      min-width: 1px;
-    }
+    flex-grow: 1;
   }
 
-  .actor-display-name {
-    @include peertube-word-wrap;
+  .actor-names {
+    @include disable-default-a-behaviour;
 
+    width: fit-content;
     display: flex;
-    flex-wrap: wrap;
+    align-items: baseline;
+    color: pvar(--mainForegroundColor);
   }
 
-  h1 {
-    font-size: 28px;
-    font-weight: $font-bold;
-    margin: 0;
+  .actor-display-name {
+    font-weight: $font-semibold;
+    font-size: 18px;
   }
 
-  .actor-handle {
-    @include ellipsis;
-  }
+  .actor-name {
+    @include margin-left(5px);
 
-  .actor-handle,
-  .actor-counters {
-    color: pvar(--greyForegroundColor);
-    font-size: $grey-font-size;
+    font-size: 14px;
+    color: $grey-actor-name;
   }
 
-  .actor-counters > *:not(:last-child)::after {
-    content: '•';
-    margin: 0 10px;
-    color: pvar(--mainColor);
-  }
+  .actor-owner {
+    @include disable-default-a-behaviour;
 
-  @media screen and (max-width: $mobile-view) {
-    margin-bottom: 15px;
+    font-size: 13px;
+    color: pvar(--mainForegroundColor);
 
-    h1 {
-      font-size: 22px;
+    span:hover {
+      opacity: 0.8;
     }
 
-    .main-avatar {
-      @include actor-avatar-size(80px);
+    my-actor-avatar {
+      @include margin-left(7px);
+
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+
+  @media screen and (max-width: $small-view) {
+    .actor-info {
+      padding-bottom: 10px;
+      text-align: center;
+
+      .actor-names {
+        flex-direction: column;
+        align-items: center !important;
+        margin: auto;
+      }
     }
   }
 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 9e510771e..2f436d787 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -653,12 +653,15 @@
   @include button-with-icon(20px, 5px, -1px);
 }
 
-@mixin row-blocks ($column-responsive: true) {
+@mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
   display: flex;
-  min-height: 130px;
+  min-height: $min-height;
   padding-bottom: 20px;
   margin-bottom: 20px;
-  border-bottom: 1px solid #C6C6C6;
+
+  @if $separator {
+    border-bottom: 1px solid #C6C6C6;
+  }
 
   @media screen and (max-width: $small-view) {
     @if $column-responsive {