diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
new file mode 100644
index 000000000..e0d597a96
--- /dev/null
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -0,0 +1,14 @@
+@import '_variables';
+@import '_mixins';
+
+.subtitle {
+ font-size: 18px;
+ font-weight: $font-semibold;
+ margin-bottom: 20px;
+}
+
+a {
+ display: block;
+ width: fit-content;
+ margin-top: 3px;
+}
diff --git a/client/src/app/+about/about-follows/about-follows.component.ts b/client/src/app/+about/about-follows/about-follows.component.ts
new file mode 100644
index 000000000..f0e1375d6
--- /dev/null
+++ b/client/src/app/+about/about-follows/about-follows.component.ts
@@ -0,0 +1,103 @@
+import { Component, OnInit } from '@angular/core'
+import { FollowService } from '@app/shared/instance/follow.service'
+import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
+import { Notifier } from '@app/core'
+import { RestService } from '@app/shared'
+import { SortMeta } from 'primeng/api'
+
+@Component({
+ selector: 'my-about-follows',
+ templateUrl: './about-follows.component.html',
+ styleUrls: [ './about-follows.component.scss' ]
+})
+
+export class AboutFollowsComponent implements OnInit {
+ followers: string[] = []
+ followings: string[] = []
+
+ followersPagination: ComponentPagination = {
+ currentPage: 1,
+ itemsPerPage: 40,
+ totalItems: null
+ }
+
+ followingsPagination: ComponentPagination = {
+ currentPage: 1,
+ itemsPerPage: 40,
+ totalItems: null
+ }
+
+ sort: SortMeta = {
+ field: 'createdAt',
+ order: -1
+ }
+
+ constructor (
+ private restService: RestService,
+ private notifier: Notifier,
+ private followService: FollowService
+ ) { }
+
+ ngOnInit () {
+ this.loadMoreFollowers()
+
+ this.loadMoreFollowings()
+ }
+
+ onNearOfBottom () {
+ this.onNearOfFollowersBottom()
+
+ this.onNearOfFollowingsBottom()
+ }
+
+ onNearOfFollowersBottom () {
+ if (!hasMoreItems(this.followersPagination)) return
+
+ this.followersPagination.currentPage += 1
+ this.loadMoreFollowers()
+ }
+
+ onNearOfFollowingsBottom () {
+ if (!hasMoreItems(this.followingsPagination)) return
+
+ this.followingsPagination.currentPage += 1
+ this.loadMoreFollowings()
+ }
+
+ buildLink (host: string) {
+ return window.location.protocol + '//' + host
+ }
+
+ private loadMoreFollowers () {
+ const pagination = this.restService.componentPaginationToRestPagination(this.followersPagination)
+
+ this.followService.getFollowers(pagination, this.sort)
+ .subscribe(
+ resultList => {
+ const newFollowers = resultList.data.map(r => r.follower.host)
+ this.followers = this.followers.concat(newFollowers)
+
+ this.followersPagination.totalItems = resultList.total
+ },
+
+ err => this.notifier.error(err.message)
+ )
+ }
+
+ private loadMoreFollowings () {
+ const pagination = this.restService.componentPaginationToRestPagination(this.followingsPagination)
+
+ this.followService.getFollowing(pagination, this.sort)
+ .subscribe(
+ resultList => {
+ const newFollowings = resultList.data.map(r => r.following.host)
+ this.followings = this.followings.concat(newFollowings)
+
+ this.followingsPagination.totalItems = resultList.total
+ },
+
+ err => this.notifier.error(err.message)
+ )
+ }
+
+}
diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts
index c83c62c7f..33e5070cb 100644
--- a/client/src/app/+about/about-routing.module.ts
+++ b/client/src/app/+about/about-routing.module.ts
@@ -4,6 +4,7 @@ import { MetaGuard } from '@ngx-meta/core'
import { AboutComponent } from './about.component'
import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
+import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
const aboutRoutes: Routes = [
{
@@ -33,6 +34,15 @@ const aboutRoutes: Routes = [
title: 'About PeerTube'
}
}
+ },
+ {
+ path: 'follows',
+ component: AboutFollowsComponent,
+ data: {
+ meta: {
+ title: 'About follows'
+ }
+ }
}
]
}
diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 8c50835c1..0c4a5156d 100644
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -5,10 +5,12 @@