Add autoplay tooltip, use of flex-wrap in video-info and other-videos
[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, Notifier } 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 { I18n } from '@ngx-translate/i18n-polyfill'
7 import { VideoService } from '@app/shared/video/video.service'
8 import { FeedFormat } from '../../../../../shared/models/feeds'
9
10 @Component({
11   selector: 'my-subscribe-button',
12   templateUrl: './subscribe-button.component.html',
13   styleUrls: [ './subscribe-button.component.scss' ]
14 })
15 export class SubscribeButtonComponent implements OnInit {
16   @Input() videoChannel: VideoChannel
17   @Input() displayFollowers = false
18   @Input() size: 'small' | 'normal' = 'normal'
19
20   subscribed: boolean
21
22   constructor (
23     private authService: AuthService,
24     private router: Router,
25     private notifier: Notifier,
26     private userSubscriptionService: UserSubscriptionService,
27     private i18n: I18n,
28     private videoService: VideoService
29   ) { }
30
31   get channelHandle () {
32     return this.videoChannel.name + '@' + this.videoChannel.host
33   }
34
35   get channelUri () {
36     return this.videoChannel.url
37   }
38
39   get rssUri () {
40     const rssFeed = this.videoService
41                       .getVideoChannelFeedUrls(this.videoChannel.id)
42                       .find(i => i.format === FeedFormat.RSS)
43
44     return rssFeed.url
45   }
46
47   ngOnInit () {
48     if (this.isUserLoggedIn()) {
49       this.userSubscriptionService.doesSubscriptionExist(this.channelHandle)
50         .subscribe(
51           res => this.subscribed = res[this.channelHandle],
52
53           err => this.notifier.error(err.message)
54         )
55     }
56   }
57
58   subscribe () {
59     if (this.isUserLoggedIn()) {
60       return this.localSubscribe()
61     }
62
63     return this.gotoLogin()
64   }
65
66   localSubscribe () {
67     this.userSubscriptionService.addSubscription(this.channelHandle)
68       .subscribe(
69         () => {
70           this.subscribed = true
71
72           this.notifier.success(
73             this.i18n(
74               'Subscribed to {{nameWithHost}}. ' +
75               'You will be notified of all their new videos.',
76               { nameWithHost: this.videoChannel.displayName }
77             ),
78             this.i18n('Subscribed')
79           )
80         },
81
82           err => this.notifier.error(err.message)
83       )
84   }
85
86   unsubscribe () {
87     if (this.isUserLoggedIn()) {
88       this.localUnsubscribe()
89     }
90   }
91
92   localUnsubscribe () {
93     this.userSubscriptionService.deleteSubscription(this.channelHandle)
94         .subscribe(
95           () => {
96             this.subscribed = false
97
98             this.notifier.success(
99               this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }),
100               this.i18n('Unsubscribed')
101             )
102           },
103
104           err => this.notifier.error(err.message)
105         )
106   }
107
108   isUserLoggedIn () {
109     return this.authService.isLoggedIn()
110   }
111
112   gotoLogin () {
113     this.router.navigate([ '/login' ])
114   }
115 }