Add list of instance follows in about page

15 files changed, 165 insertions, 13 deletions

diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
new file mode 100644
index 000000000..18689bbf7
--- /dev/null
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -0,0 +1,22 @@
+<div class="row" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
+  <div class="col-xl-6 col-md-12">
+    <div i18n class="subtitle">Followers</div>
+
+    <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">This instance does not have followers.</div>
+
+    <a *ngFor="let follower of followers" [href]="buildLink(follower)" target="_blank" rel="noopener noreferrer">
+      {{ follower }}
+    </a>
+  </div>
+
+  <div class="col-xl-6 col-md-12">
+    <div i18n class="subtitle">Followings</div>
+
+    <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">This instance does not have followings.</div>
+
+    <a *ngFor="let following of followings" [href]="buildLink(following)" target="_blank" rel="noopener noreferrer">
+      {{ following }}
+    </a>
+  </div>
+
+</div>
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 @@
       <a i18n routerLink="instance" routerLinkActive="active" class="title-page">Instance</a>
 
       <a i18n routerLink="peertube" routerLinkActive="active" class="title-page">PeerTube</a>
+
+      <a i18n routerLink="follows" routerLinkActive="active" class="title-page">Follows</a>
     </div>
   </div>
 
   <div class="margin-content">
     <router-outlet></router-outlet>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 9c6b29740..49a7a52f8 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -6,6 +6,7 @@ import { SharedModule } from '../shared'
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
+import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
 
 @NgModule({
   imports: [
@@ -17,6 +18,7 @@ import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-a
     AboutComponent,
     AboutInstanceComponent,
     AboutPeertubeComponent,
+    AboutFollowsComponent,
     ContactAdminModalComponent
   ],
 
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 71a4dfc4a..9ab883f60 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -5,7 +5,7 @@ import { TableModule } from 'primeng/table'
 import { SharedModule } from '../shared'
 import { AdminRoutingModule } from './admin-routing.module'
 import { AdminComponent } from './admin.component'
-import { FollowersListComponent, FollowingAddComponent, FollowsComponent, FollowService } from './follows'
+import { FollowersListComponent, FollowingAddComponent, FollowsComponent } from './follows'
 import { FollowingListComponent } from './follows/following-list/following-list.component'
 import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users'
 import {
@@ -66,7 +66,6 @@ import { DebugComponent, DebugService } from '@app/+admin/system/debug'
   ],
 
   providers: [
-    FollowService,
     RedundancyService,
     JobService,
     LogsService,
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index b78cdf656..e25d9ab66 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -3,7 +3,7 @@ import { ConfirmService, Notifier } from '@app/core'
 import { SortMeta } from 'primeng/primeng'
 import { ActorFollow } from '../../../../../../shared/models/actors/follow.model'
 import { RestPagination, RestTable } from '../../../shared'
-import { FollowService } from '../shared'
+import { FollowService } from '@app/shared/instance/follow.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts
index 2bb249746..308bbb0c5 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.ts
+++ b/client/src/app/+admin/follows/following-add/following-add.component.ts
@@ -3,7 +3,7 @@ import { Router } from '@angular/router'
 import { Notifier } from '@app/core'
 import { ConfirmService } from '../../../core'
 import { validateHost } from '../../../shared'
-import { FollowService } from '../shared'
+import { FollowService } from '@app/shared/instance/follow.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index 4517a721e..ded616624 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -4,7 +4,7 @@ import { SortMeta } from 'primeng/primeng'
 import { ActorFollow } from '../../../../../../shared/models/actors/follow.model'
 import { ConfirmService } from '../../../core/confirm/confirm.service'
 import { RestPagination, RestTable } from '../../../shared'
-import { FollowService } from '../shared'
+import { FollowService } from '@app/shared/instance/follow.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
diff --git a/client/src/app/+admin/follows/index.ts b/client/src/app/+admin/follows/index.ts
index 7849a06e7..e94f33710 100644
--- a/client/src/app/+admin/follows/index.ts
+++ b/client/src/app/+admin/follows/index.ts
@@ -1,6 +1,5 @@
 export * from './following-add'
 export * from './followers-list'
 export * from './following-list'
-export * from './shared'
 export * from './follows.component'
 export * from './follows.routes'
diff --git a/client/src/app/+admin/follows/shared/index.ts b/client/src/app/+admin/follows/shared/index.ts
deleted file mode 100644
index 78d456def..000000000
--- a/client/src/app/+admin/follows/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './follow.service'
diff --git a/client/src/app/+admin/follows/shared/follow.service.ts b/client/src/app/shared/instance/follow.service.ts
index c2b8ef006..5a44c64f1 100644
--- a/client/src/app/+admin/follows/shared/follow.service.ts
+++ b/client/src/app/shared/instance/follow.service.ts
@@ -3,13 +3,13 @@ import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { SortMeta } from 'primeng/primeng'
 import { Observable } from 'rxjs'
-import { ActorFollow, ResultList } from '../../../../../../shared'
-import { environment } from '../../../../environments/environment'
-import { RestExtractor, RestPagination, RestService } from '../../../shared'
+import { ActorFollow, ResultList } from '@shared/index'
+import { environment } from '../../../environments/environment'
+import { RestExtractor, RestPagination, RestService } from '../rest'
 
 @Injectable()
 export class FollowService {
-  private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/server'
+  private static BASE_APPLICATION_URL = 'https://peertube2.cpy.re' + '/api/v1/server'
 
   constructor (
     private authHttp: HttpClient,
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 39f1a69e2..1d49c7bc8 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -85,6 +85,7 @@ import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklis
 import { VideoDownloadComponent } from '@app/shared/video/modals/video-download.component'
 import { VideoReportComponent } from '@app/shared/video/modals/video-report.component'
 import { ClipboardModule } from 'ngx-clipboard'
+import { FollowService } from '@app/shared/instance/follow.service'
 
 @NgModule({
   imports: [
@@ -271,6 +272,8 @@ import { ClipboardModule } from 'ngx-clipboard'
 
     UserNotificationService,
 
+    FollowService,
+
     I18n
   ]
 })
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 11cf1bd92..efd369bca 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -27,7 +27,6 @@
         {{ getCurrentGroupedDateLabel(video) }}
       </div>
 
-
       <my-video-miniature
         [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
         [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"