Add ability to view my followers

12 files changed, 194 insertions, 97 deletions

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);
-  }
-}