client/src/app/shared/shared-user-subscription/subscribe-button.component.ts

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