refactor subscribe button and comment-add for visitor-interact UX (#1100)
[oweals/peertube.git] / client / src / app / shared / user-subscription / subscribe-button.component.ts
1 import { Component, Input, OnInit } from '@angular/core'
2 import { Router } from '@angular/router'
3 import { AuthService } from '@app/core'
4 import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
5 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
6 import { NotificationsService } from 'angular2-notifications'
7 import { I18n } from '@ngx-translate/i18n-polyfill'
8
9 @Component({
10   selector: 'my-subscribe-button',
11   templateUrl: './subscribe-button.component.html',
12   styleUrls: [ './subscribe-button.component.scss' ]
13 })
14 export class SubscribeButtonComponent implements OnInit {
15   @Input() videoChannel: VideoChannel
16   @Input() displayFollowers = false
17   @Input() size: 'small' | 'normal' = 'normal'
18
19   subscribed: boolean
20
21   constructor (
22     private authService: AuthService,
23     private router: Router,
24     private notificationsService: NotificationsService,
25     private userSubscriptionService: UserSubscriptionService,
26     private i18n: I18n
27   ) { }
28
29   get uri () {
30     return this.videoChannel.name + '@' + this.videoChannel.host
31   }
32
33   get uriAccount () {
34     return this.videoChannel.ownerAccount.name + '@' + this.videoChannel.host
35   }
36
37   ngOnInit () {
38     if (this.isUserLoggedIn()) {
39       this.userSubscriptionService.isSubscriptionExists(this.uri)
40         .subscribe(
41           res => this.subscribed = res[this.uri],
42
43           err => this.notificationsService.error(this.i18n('Error'), err.message)
44         )
45     }
46   }
47
48   subscribe () {
49     if (this.isUserLoggedIn()) {
50       this.localSubscribe()
51     } else {
52       this.gotoLogin()
53     }
54   }
55
56   localSubscribe () {
57     this.userSubscriptionService.addSubscription(this.uri)
58       .subscribe(
59         () => {
60           this.subscribed = true
61
62           this.notificationsService.success(
63             this.i18n('Subscribed'),
64             this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
65           )
66         },
67
68           err => this.notificationsService.error(this.i18n('Error'), err.message)
69       )
70   }
71
72   unsubscribe () {
73     if (this.isUserLoggedIn()) {
74       this.localUnsubscribe()
75     }
76   }
77
78   localUnsubscribe () {
79     this.userSubscriptionService.deleteSubscription(this.uri)
80         .subscribe(
81           () => {
82             this.subscribed = false
83
84             this.notificationsService.success(
85               this.i18n('Unsubscribed'),
86               this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
87             )
88           },
89
90           err => this.notificationsService.error(this.i18n('Error'), err.message)
91         )
92   }
93
94   isUserLoggedIn () {
95     return this.authService.isLoggedIn()
96   }
97
98   gotoLogin () {
99     this.router.navigate([ '/login' ])
100   }
101
102   rssOpen () {
103     window.open('')
104   }
105 }