5 files changed, 194 insertions, 0 deletions

diff --git a/client/src/app/shared/user-subscription/index.ts b/client/src/app/shared/user-subscription/index.ts
new file mode 100644
index 000000000..024b36a41
--- /dev/null
+++ b/client/src/app/shared/user-subscription/index.ts
@@ -0,0 +1,2 @@
+export * from './user-subscription.service'
+export * from './subscribe-button.component'
\ No newline at end of file
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
new file mode 100644
index 000000000..63b313662
--- /dev/null
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -0,0 +1,15 @@
+<span i18n *ngIf="subscribed === false" class="subscribe-button" role="button" (click)="subscribe()">
+  <span>Subscribe</span>
+  <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
+    {{ videoChannel.followersCount | myNumberFormatter }}
+  </span>
+</span>
+
+<span *ngIf="subscribed === true" class="unsubscribe-button" role="button" (click)="unsubscribe()">
+  <span class="subscribed" i18n>Subscribed</span>
+  <span class="unsubscribe" i18n>Unsubscribe</span>
+
+  <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
+    {{ videoChannel.followersCount | myNumberFormatter }}
+  </span>
+</span>
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
new file mode 100644
index 000000000..9811fdc0c
--- /dev/null
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -0,0 +1,37 @@
+@import '_variables';
+@import '_mixins';
+
+.subscribe-button {
+  @include peertube-button;
+  @include orange-button;
+}
+
+.unsubscribe-button {
+  @include peertube-button;
+  @include grey-button
+}
+
+.subscribe-button,
+.unsubscribe-button {
+  padding: 3px 7px;
+}
+
+.unsubscribe-button {
+  .subscribed {
+    display: inline;
+  }
+
+  .unsubscribe {
+    display: none;
+  }
+
+  &:hover {
+    .subscribed {
+      display: none;
+    }
+
+    .unsubscribe {
+      display: inline;
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
new file mode 100644
index 000000000..46d6dbaf7
--- /dev/null
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -0,0 +1,74 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService } from '@app/core'
+import { RestExtractor } from '@app/shared/rest'
+import { RedirectService } from '@app/core/routing/redirect.service'
+import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+  selector: 'my-subscribe-button',
+  templateUrl: './subscribe-button.component.html',
+  styleUrls: [ './subscribe-button.component.scss' ]
+})
+export class SubscribeButtonComponent implements OnInit {
+  @Input() videoChannel: VideoChannel
+  @Input() displayFollowers = false
+
+  subscribed: boolean
+
+  constructor (
+    private authService: AuthService,
+    private restExtractor: RestExtractor,
+    private redirectService: RedirectService,
+    private notificationsService: NotificationsService,
+    private userSubscriptionService: UserSubscriptionService,
+    private i18n: I18n
+  ) { }
+
+  get uri () {
+    return this.videoChannel.name + '@' + this.videoChannel.host
+  }
+
+  ngOnInit () {
+    this.userSubscriptionService.isSubscriptionExists(this.uri)
+      .subscribe(
+        exists => this.subscribed = exists,
+
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
+      )
+  }
+
+  subscribe () {
+    this.userSubscriptionService.addSubscription(this.uri)
+      .subscribe(
+        () => {
+          this.subscribed = true
+
+          this.notificationsService.success(
+            this.i18n('Subscribed'),
+            this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
+          )
+        },
+
+          err => this.notificationsService.error(this.i18n('Error'), err.message)
+      )
+  }
+
+  unsubscribe () {
+    this.userSubscriptionService.deleteSubscription(this.uri)
+        .subscribe(
+          () => {
+            this.subscribed = false
+
+            this.notificationsService.success(
+              this.i18n('Unsubscribed'),
+              this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
+            )
+          },
+
+          err => this.notificationsService.error(this.i18n('Error'), err.message)
+        )
+  }
+}
diff --git a/client/src/app/shared/user-subscription/user-subscription.service.ts b/client/src/app/shared/user-subscription/user-subscription.service.ts
new file mode 100644
index 000000000..3103706d1
--- /dev/null
+++ b/client/src/app/shared/user-subscription/user-subscription.service.ts
@@ -0,0 +1,66 @@
+import { catchError, map } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { ResultList } from '../../../../../shared'
+import { environment } from '../../../environments/environment'
+import { RestExtractor } from '../rest'
+import { Observable, of } from 'rxjs'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { VideoChannel as VideoChannelServer } from '../../../../../shared/models/videos'
+
+@Injectable()
+export class UserSubscriptionService {
+  static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/users/me/subscriptions'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) {
+  }
+
+  deleteSubscription (nameWithHost: string) {
+    const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/' + nameWithHost
+
+    return this.authHttp.delete(url)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  addSubscription (nameWithHost: string) {
+    const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL
+
+    const body = { uri: nameWithHost }
+    return this.authHttp.post(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  listSubscriptions (): Observable<ResultList<VideoChannel>> {
+    const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL
+
+    return this.authHttp.get<ResultList<VideoChannelServer>>(url)
+               .pipe(
+                 map(res => VideoChannelService.extractVideoChannels(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  isSubscriptionExists (nameWithHost: string): Observable<boolean> {
+    const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/' + nameWithHost
+
+    return this.authHttp.get(url)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => {
+                   if (err.status === 404) return of(false)
+
+                   return this.restExtractor.handleError(err)
+                 })
+               )
+  }
+}