aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/user-subscription
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared/user-subscription')
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.html12
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.ts33
2 files changed, 24 insertions, 21 deletions
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
index 7d33b0621..2a4df29f7 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -1,31 +1,31 @@
1<div class="btn-group-subscribe btn-group" 1<div class="btn-group-subscribe btn-group"
2 [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed(), 'big': isBigButton() }"> 2 [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }">
3 3
4 <ng-template #userLoggedOut> 4 <ng-template #userLoggedOut>
5 <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed() }"> 5 <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
6 <ng-container *ngIf="account; then multiple; else single"></ng-container> 6 <ng-container *ngIf="account; then multiple; else single"></ng-container>
7 <ng-template i18n #single>Subscribe</ng-template> 7 <ng-template i18n #single>Subscribe</ng-template>
8 <ng-template #multiple> 8 <ng-template #multiple>
9 <span i18n>Subscribe to all channels</span> 9 <span i18n>Subscribe to all channels</span>
10 <span *ngIf="isAtLeastOneChannelSubscribed()">{{ subscribeStatus(true).length }}/{{ subscribed.size }} 10 <span *ngIf="isAtLeastOneChannelSubscribed">{{ subscribeStatus(true).length }}/{{ subscribed.size }}
11 <ng-container i18n>channels subscribed</ng-container> 11 <ng-container i18n>channels subscribed</ng-container>
12 </span> 12 </span>
13 </ng-template> 13 </ng-template>
14 </span> 14 </span>
15 <span *ngIf="!isBigButton() && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count"> 15 <span *ngIf="!isBigButton && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count">
16 {{ videoChannels[0].followersCount | myNumberFormatter }} 16 {{ videoChannels[0].followersCount | myNumberFormatter }}
17 </span> 17 </span>
18 </ng-template> 18 </ng-template>
19 19
20 <ng-template #userLoggedIn> 20 <ng-template #userLoggedIn>
21 <button *ngIf="!isAllChannelsSubscribed()" type="button" 21 <button *ngIf="!isAllChannelsSubscribed" type="button"
22 class="btn btn-sm" role="button" 22 class="btn btn-sm" role="button"
23 (click)="subscribe()"> 23 (click)="subscribe()">
24 <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template> 24 <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
25 </button> 25 </button>
26 26
27 <button 27 <button
28 *ngIf="isAllChannelsSubscribed()" type="button" 28 *ngIf="isAllChannelsSubscribed" type="button"
29 class="btn btn-sm" role="button" 29 class="btn btn-sm" role="button"
30 (click)="unsubscribe()"> 30 (click)="unsubscribe()">
31 <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container> 31 <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
index 81a0df512..947f34c85 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -1,4 +1,4 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit, OnChanges } from '@angular/core'
2import { Router } from '@angular/router' 2import { Router } from '@angular/router'
3import { AuthService, Notifier } from '@app/core' 3import { AuthService, Notifier } from '@app/core'
4import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service' 4import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
@@ -8,14 +8,13 @@ import { VideoService } from '@app/shared/video/video.service'
8import { FeedFormat } from '../../../../../shared/models/feeds' 8import { FeedFormat } from '../../../../../shared/models/feeds'
9import { Account } from '@app/shared/account/account.model' 9import { Account } from '@app/shared/account/account.model'
10import { concat, forkJoin, merge } from 'rxjs' 10import { concat, forkJoin, merge } from 'rxjs'
11import { toArray } from 'rxjs/operators'
12 11
13@Component({ 12@Component({
14 selector: 'my-subscribe-button', 13 selector: 'my-subscribe-button',
15 templateUrl: './subscribe-button.component.html', 14 templateUrl: './subscribe-button.component.html',
16 styleUrls: [ './subscribe-button.component.scss' ] 15 styleUrls: [ './subscribe-button.component.scss' ]
17}) 16})
18export class SubscribeButtonComponent implements OnInit { 17export class SubscribeButtonComponent implements OnInit, OnChanges {
19 /** 18 /**
20 * SubscribeButtonComponent can be used with a single VideoChannel passed as [VideoChannel], 19 * 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 20 * or with an account and a full list of that account's videoChannels. The latter is intended
@@ -70,10 +69,26 @@ export class SubscribeButtonComponent implements OnInit {
70 return this.videoChannels[0] 69 return this.videoChannels[0]
71 } 70 }
72 71
72 get isAllChannelsSubscribed () {
73 return this.subscribeStatus(true).length === this.videoChannels.length
74 }
75
76 get isAtLeastOneChannelSubscribed () {
77 return this.subscribeStatus(true).length > 0
78 }
79
80 get isBigButton () {
81 return this.isUserLoggedIn() && this.videoChannels.length > 1 && this.isAtLeastOneChannelSubscribed
82 }
83
73 ngOnInit () { 84 ngOnInit () {
74 this.loadSubscribedStatus() 85 this.loadSubscribedStatus()
75 } 86 }
76 87
88 ngOnChanges () {
89 this.ngOnInit()
90 }
91
77 subscribe () { 92 subscribe () {
78 if (this.isUserLoggedIn()) { 93 if (this.isUserLoggedIn()) {
79 return this.localSubscribe() 94 return this.localSubscribe()
@@ -146,18 +161,6 @@ export class SubscribeButtonComponent implements OnInit {
146 return this.authService.isLoggedIn() 161 return this.authService.isLoggedIn()
147 } 162 }
148 163
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 () { 164 gotoLogin () {
162 this.router.navigate([ '/login' ]) 165 this.router.navigate([ '/login' ])
163 } 166 }