Improve instance follow display
This commit is contained in:
parent
f30ef8cf98
commit
1a6304ceb9
|
@ -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 }}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue