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 import { Account } from '@app/shared/account/account.model'
  10 import { concat, forkJoin, merge } from 'rxjs'
  11 import { toArray } from 'rxjs/operators'
  12
  13 @Component({
  14   selector: 'my-subscribe-button',
  15   templateUrl: './subscribe-button.component.html',
  16   styleUrls: [ './subscribe-button.component.scss' ]
  17 })
  18 export class SubscribeButtonComponent implements OnInit {
  19   /**
  20    * SubscribeButtonComponent can be used with a single VideoChannel passed as [VideoChannel],
  21    * or with an account and a full list of that account's videoChannels. The latter is intended
  22    * to allow mass un/subscription from an account's page, while keeping the channel-centric
  23    * subscription model.
  24    */
  25   @Input() account: Account
  26   @Input() videoChannels: VideoChannel[]
  27   @Input() displayFollowers = false
  28   @Input() size: 'small' | 'normal' = 'normal'
  29
  30   subscribed = new Map<string, boolean>()
  31
  32   constructor (
  33     private authService: AuthService,
  34     private router: Router,
  35     private notifier: Notifier,
  36     private userSubscriptionService: UserSubscriptionService,
  37     private i18n: I18n,
  38     private videoService: VideoService
  39   ) { }
  40
  41   get handle () {
  42     return this.account
  43       ? this.account.nameWithHost
  44       : this.videoChannel.name + '@' + this.videoChannel.host
  45   }
  46
  47   get channelHandle () {
  48     return this.getChannelHandler(this.videoChannel)
  49   }
  50
  51   get uri () {
  52     return this.account
  53       ? this.account.url
  54       : this.videoChannels[0].url
  55   }
  56
  57   get rssUri () {
  58     const rssFeed = this.account
  59       ? this.videoService
  60           .getAccountFeedUrls(this.account.id)
  61           .find(i => i.format === FeedFormat.RSS)
  62       : this.videoService
  63           .getVideoChannelFeedUrls(this.videoChannels[0].id)
  64           .find(i => i.format === FeedFormat.RSS)
  65
  66     return rssFeed.url
  67   }
  68
  69   get videoChannel () {
  70     return this.videoChannels[0]
  71   }
  72
  73   ngOnInit () {
  74     this.loadSubscribedStatus()
  75   }
  76
  77   subscribe () {
  78     if (this.isUserLoggedIn()) {
  79       return this.localSubscribe()
  80     }
  81
  82     return this.gotoLogin()
  83   }
  84
  85   localSubscribe () {
  86     const subscribedStatus = this.subscribeStatus(false)
  87
  88     const observableBatch = this.videoChannels
  89       .map(videoChannel => this.getChannelHandler(videoChannel))
  90       .filter(handle => subscribedStatus.includes(handle))
  91       .map(handle => this.userSubscriptionService.addSubscription(handle))
  92
  93     forkJoin(observableBatch)
  94       .subscribe(
  95         () => {
  96           this.notifier.success(
  97             this.account
  98               ? this.i18n(
  99                   'Subscribed to all current channels of {{nameWithHost}}. You will be notified of all their new videos.',
 100                   { nameWithHost: this.account.displayName }
 101                 )
 102               : this.i18n(
 103                   'Subscribed to {{nameWithHost}}. You will be notified of all their new videos.',
 104                   { nameWithHost: this.videoChannels[0].displayName }
 105                 )
 106             ,
 107             this.i18n('Subscribed')
 108           )
 109         },
 110
 111           err => this.notifier.error(err.message)
 112       )
 113   }
 114
 115   unsubscribe () {
 116     if (this.isUserLoggedIn()) {
 117       this.localUnsubscribe()
 118     }
 119   }
 120
 121   localUnsubscribe () {
 122     const subscribeStatus = this.subscribeStatus(true)
 123
 124     const observableBatch = this.videoChannels
 125                                 .map(videoChannel => this.getChannelHandler(videoChannel))
 126                                 .filter(handle => subscribeStatus.includes(handle))
 127                                 .map(handle => this.userSubscriptionService.deleteSubscription(handle))
 128
 129     concat(...observableBatch)
 130       .subscribe({
 131         complete: () => {
 132           this.notifier.success(
 133             this.account
 134               ? this.i18n('Unsubscribed from all channels of {{nameWithHost}}', { nameWithHost: this.account.nameWithHost })
 135               : this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannels[ 0 ].nameWithHost })
 136             ,
 137             this.i18n('Unsubscribed')
 138           )
 139         },
 140
 141         error: err => this.notifier.error(err.message)
 142       })
 143   }
 144
 145   isUserLoggedIn () {
 146     return this.authService.isLoggedIn()
 147   }
 148
 149   isAllChannelsSubscribed () {
 150     return !Array.from(this.subscribed.values()).includes(false)
 151   }
 152
 153   isAtLeastOneChannelSubscribed () {
 154     return this.subscribeStatus(true).length > 0
 155   }
 156
 157   isBigButton () {
 158     return this.isUserLoggedIn() && this.videoChannels.length > 1 && this.isAtLeastOneChannelSubscribed()
 159   }
 160
 161   gotoLogin () {
 162     this.router.navigate([ '/login' ])
 163   }
 164
 165   subscribeStatus (subscribed: boolean) {
 166     const accumulator: string[] = []
 167     for (const [key, value] of this.subscribed.entries()) {
 168       if (value === subscribed) accumulator.push(key)
 169     }
 170
 171     return accumulator
 172   }
 173
 174   private getChannelHandler (videoChannel: VideoChannel) {
 175     return videoChannel.name + '@' + videoChannel.host
 176   }
 177
 178   private loadSubscribedStatus () {
 179     if (!this.isUserLoggedIn()) return
 180
 181     for (const videoChannel of this.videoChannels) {
 182       const handle = this.getChannelHandler(videoChannel)
 183       this.subscribed.set(handle, false)
 184
 185       merge(
 186         this.userSubscriptionService.listenToSubscriptionCacheChange(handle),
 187         this.userSubscriptionService.doesSubscriptionExist(handle)
 188       ).subscribe(
 189         res => this.subscribed.set(handle, res),
 190
 191         err => this.notifier.error(err.message)
 192       )
 193     }
 194   }
 195 }