Add ability to view my followers

6 files changed, 242 insertions, 0 deletions

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-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
new file mode 100644
index 000000000..775f0e783
--- /dev/null
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
@@ -0,0 +1,36 @@
+<h1>
+  <span>
+    <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My subscriptions</ng-container>
+    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+  </span>
+</h1>
+
+<div class="video-subscriptions-header">
+  <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
+</div>
+
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>
+
+<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="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="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>
+
+        <my-actor-avatar [account]="videoChannel.ownerAccount" size="18"></my-actor-avatar>
+      </a>
+    </div>
+
+    <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
+  </div>
+</div>
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-follows/my-subscriptions.component.ts b/client/src/app/+my-library/my-follows/my-subscriptions.component.ts
new file mode 100644
index 000000000..f676aa014
--- /dev/null
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.ts
@@ -0,0 +1,57 @@
+import { Subject } from 'rxjs'
+import { Component } from '@angular/core'
+import { ComponentPagination, Notifier } from '@app/core'
+import { VideoChannel } from '@app/shared/shared-main'
+import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
+
+@Component({
+  templateUrl: './my-subscriptions.component.html',
+  styleUrls: [ './my-subscriptions.component.scss' ]
+})
+export class MySubscriptionsComponent {
+  videoChannels: VideoChannel[] = []
+
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalItems: null
+  }
+
+  onDataSubject = new Subject<any[]>()
+
+  search: string
+
+  constructor (
+    private userSubscriptionService: UserSubscriptionService,
+    private notifier: Notifier
+  ) {}
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+
+    this.pagination.currentPage += 1
+    this.loadSubscriptions()
+  }
+
+  onSearch (search: string) {
+    this.search = search
+    this.loadSubscriptions(false)
+  }
+
+  private loadSubscriptions (more = true) {
+    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search })
+        .subscribe({
+          next: res => {
+            this.videoChannels = more
+              ? this.videoChannels.concat(res.data)
+              : res.data
+            this.pagination.totalItems = res.total
+
+            this.onDataSubject.next(res.data)
+          },
+
+          error: err => this.notifier.error(err.message)
+        })
+  }
+}