Improve instance follow display

2 files changed, 21 insertions, 8 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
index f16f8bd71..6516b595d 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -2,21 +2,21 @@
   <h1 class="visually-hidden" i18n>Follows</h1>
 
   <div class="col-xl-6 col-md-12">
-    <h2 i18n class="subtitle">Follower instances ({{ followersPagination.totalItems }})</h2>
+    <h2 i18n class="subtitle">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
 
-    <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">This instance does not have instances followers.</div>
+    <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
 
     <a *ngFor="let follower of followers" [href]="buildLink(follower)" target="_blank" rel="noopener noreferrer">
-      {{ follower}}
+      {{ follower }}
     </a>
 
     <button i18n class="show-more" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
   </div>
 
   <div class="col-xl-6 col-md-12">
-    <h2 i18n class="subtitle">Following instances ({{ followingsPagination.totalItems }})</h2>
+    <h2 i18n class="subtitle">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
 
-    <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">This instance is not following any other.</div>
+    <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
 
     <a *ngFor="let following of followings" [href]="buildLink(following)" target="_blank" rel="noopener noreferrer">
       {{ following }}
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 84b47e967..35d810388 100644
--- a/client/src/app/+about/about-follows/about-follows.component.ts
+++ b/client/src/app/+about/about-follows/about-follows.component.ts
@@ -1,7 +1,8 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
-import { ComponentPagination, hasMoreItems, Notifier, RestService } from '@app/core'
+import { ComponentPagination, hasMoreItems, Notifier, RestService, ServerService } from '@app/core'
 import { InstanceFollowService } from '@app/shared/shared-instance'
+import { Actor } from '@shared/models/actors'
 
 @Component({
   selector: 'my-about-follows',
@@ -10,6 +11,8 @@ import { InstanceFollowService } from '@app/shared/shared-instance'
 })
 
 export class AboutFollowsComponent implements OnInit {
+  instanceName: string
+
   followers: string[] = []
   followings: string[] = []
 
@@ -34,6 +37,7 @@ export class AboutFollowsComponent implements OnInit {
   }
 
   constructor (
+    private server: ServerService,
     private restService: RestService,
     private notifier: Notifier,
     private followService: InstanceFollowService
@@ -43,6 +47,8 @@ export class AboutFollowsComponent implements OnInit {
     this.loadMoreFollowers()
 
     this.loadMoreFollowings()
+
+    this.instanceName = this.server.getHTMLConfig().instance.name
   }
 
   loadAllFollowings () {
@@ -95,7 +101,7 @@ export class AboutFollowsComponent implements OnInit {
           next: resultList => {
             if (reset) this.followers = []
 
-            const newFollowers = resultList.data.map(r => r.follower.host)
+            const newFollowers = resultList.data.map(r => this.formatFollow(r.follower))
             this.followers = this.followers.concat(newFollowers)
 
             this.followersPagination.totalItems = resultList.total
@@ -113,7 +119,7 @@ export class AboutFollowsComponent implements OnInit {
           next: resultList => {
             if (reset) this.followings = []
 
-            const newFollowings = resultList.data.map(r => r.following.host)
+            const newFollowings = resultList.data.map(r => this.formatFollow(r.following))
             this.followings = this.followings.concat(newFollowings)
 
             this.followingsPagination.totalItems = resultList.total
@@ -123,4 +129,11 @@ export class AboutFollowsComponent implements OnInit {
         })
   }
 
+  private formatFollow (actor: Actor) {
+    // Instance follow, only display host
+    if (actor.name === 'peertube') return actor.host
+
+    return actor.name + '@' + actor.host
+  }
+
 }