aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.html52
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.ts114
-rw-r--r--client/src/app/shared/video/video-miniature.component.html6
3 files changed, 129 insertions, 43 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 25f3be215..a119beff6 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -1,34 +1,46 @@
1<div class="btn-group-subscribe btn-group" 1<div class="btn-group-subscribe btn-group"
2 [ngClass]="{'subscribe-button': subscribed !== true, 'unsubscribe-button': subscribed === true}"> 2 [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed()}">
3 <button *ngIf="subscribed === false && isUserLoggedIn()" type="button" 3
4 class="btn btn-sm" role="button" 4 <ng-template #userLoggedOut>
5 (click)="subscribe()"> 5 <span>
6 <span i18n> 6 <ng-container *ngIf="account; then multiple; else single"></ng-container>
7 Subscribe 7 <ng-template i18n #single>Subscribe</ng-template>
8 <ng-template i18n #multiple>Subscribe to all channels</ng-template>
8 </span> 9 </span>
9 <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count"> 10 <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
10 {{ videoChannel.followersCount | myNumberFormatter }} 11 {{ videoChannel.followersCount | myNumberFormatter }}
11 </span> 12 </span>
12 </button> 13 </ng-template>
14
15 <ng-template #userLoggedIn>
16 <button *ngIf="!isAllChannelsSubscribed()" type="button"
17 class="btn btn-sm" role="button"
18 (click)="subscribe()">
19 <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
20 </button>
21
22 <button
23 *ngIf="isAllChannelsSubscribed()" type="button"
24 class="btn btn-sm" role="button"
25 (click)="unsubscribe()" i18n
26 >
27 <ng-container *ngIf="account; then multiple; else single"></ng-container>
28 <ng-template i18n #single>Unsubscribe</ng-template>
29 <ng-template i18n #multiple>Unsubscribe from all channels</ng-template>
30 </button>
31 </ng-template>
13 32
14 <button 33 <ng-container
15 *ngIf="subscribed === true" type="button" 34 *ngIf="isUserLoggedIn(); then userLoggedIn">
16 class="btn btn-sm" role="button" 35 </ng-container>
17 (click)="unsubscribe()" i18n
18 >
19 Unsubscribe
20 </button>
21 36
22 <div class="btn-group" ngbDropdown autoClose="outside" 37 <div class="btn-group" ngbDropdown autoClose="outside"
23 placement="bottom-right" role="group" 38 placement="bottom-right" role="group"
24 aria-label="Multiple ways to subscribe to the current channel"> 39 aria-label="Multiple ways to subscribe to the current channel">
25 <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle> 40 <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
26 <span *ngIf="!isUserLoggedIn()" i18n> 41 <ng-container
27 Subscribe 42 *ngIf="!isUserLoggedIn(); then userLoggedOut">
28 </span> 43 </ng-container>
29 <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
30 {{ videoChannel.followersCount | myNumberFormatter }}
31 </span>
32 </button> 44 </button>
33 45
34 <div class="dropdown-menu" ngbDropdownMenu> 46 <div class="dropdown-menu" ngbDropdownMenu>
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 0407856cb..0c1f71c6c 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -6,6 +6,8 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
6import { I18n } from '@ngx-translate/i18n-polyfill' 6import { I18n } from '@ngx-translate/i18n-polyfill'
7import { VideoService } from '@app/shared/video/video.service' 7import { 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'
10import { forkJoin } from 'rxjs'
9 11
10@Component({ 12@Component({
11 selector: 'my-subscribe-button', 13 selector: 'my-subscribe-button',
@@ -13,11 +15,12 @@ import { FeedFormat } from '../../../../../shared/models/feeds'
13 styleUrls: [ './subscribe-button.component.scss' ] 15 styleUrls: [ './subscribe-button.component.scss' ]
14}) 16})
15export class SubscribeButtonComponent implements OnInit { 17export class SubscribeButtonComponent implements OnInit {
16 @Input() videoChannel: VideoChannel 18 @Input() account: Account
19 @Input() videoChannels: VideoChannel[]
17 @Input() displayFollowers = false 20 @Input() displayFollowers = false
18 @Input() size: 'small' | 'normal' = 'normal' 21 @Input() size: 'small' | 'normal' = 'normal'
19 22
20 subscribed: boolean 23 subscribed: Map<string, boolean>
21 24
22 constructor ( 25 constructor (
23 private authService: AuthService, 26 private authService: AuthService,
@@ -26,32 +29,51 @@ export class SubscribeButtonComponent implements OnInit {
26 private userSubscriptionService: UserSubscriptionService, 29 private userSubscriptionService: UserSubscriptionService,
27 private i18n: I18n, 30 private i18n: I18n,
28 private videoService: VideoService 31 private videoService: VideoService
29 ) { } 32 ) {
33 this.subscribed = new Map<string, boolean>()
34 }
35
36 get handle () {
37 return this.account
38 ? this.account.nameWithHost
39 : this.videoChannels[0].name + '@' + this.videoChannels[0].host
40 }
30 41
31 get channelHandle () { 42 get channelHandle () {
32 return this.videoChannel.name + '@' + this.videoChannel.host 43 return this.getChannelHandler(this.videoChannels[0])
33 } 44 }
34 45
35 get channelUri () { 46 get uri () {
36 return this.videoChannel.url 47 return this.account
48 ? this.account.url
49 : this.videoChannels[0].url
37 } 50 }
38 51
39 get rssUri () { 52 get rssUri () {
40 const rssFeed = this.videoService 53 const rssFeed = this.account
41 .getVideoChannelFeedUrls(this.videoChannel.id) 54 ? this.videoService
42 .find(i => i.format === FeedFormat.RSS) 55 .getAccountFeedUrls(this.account.id)
56 .find(i => i.format === FeedFormat.RSS)
57 : this.videoService
58 .getVideoChannelFeedUrls(this.videoChannels[0].id)
59 .find(i => i.format === FeedFormat.RSS)
43 60
44 return rssFeed.url 61 return rssFeed.url
45 } 62 }
46 63
47 ngOnInit () { 64 ngOnInit () {
48 if (this.isUserLoggedIn()) { 65 if (this.isUserLoggedIn()) {
49 this.userSubscriptionService.doesSubscriptionExist(this.channelHandle)
50 .subscribe(
51 res => this.subscribed = res[this.channelHandle],
52 66
53 err => this.notifier.error(err.message) 67 forkJoin(this.videoChannels.map(videoChannel => {
54 ) 68 const handle = this.getChannelHandler(videoChannel)
69 this.subscribed.set(handle, false)
70 this.userSubscriptionService.doesSubscriptionExist(handle)
71 .subscribe(
72 res => this.subscribed.set(handle, res[handle]),
73
74 err => this.notifier.error(err.message)
75 )
76 }))
55 } 77 }
56 } 78 }
57 79
@@ -64,15 +86,34 @@ export class SubscribeButtonComponent implements OnInit {
64 } 86 }
65 87
66 localSubscribe () { 88 localSubscribe () {
67 this.userSubscriptionService.addSubscription(this.channelHandle) 89 const observableBatch: any = []
90
91 this.videoChannels
92 .filter(videoChannel => this.subscribeStatus(false).includes(this.getChannelHandler(videoChannel)))
93 .forEach(videoChannel => observableBatch.push(
94 this.userSubscriptionService.addSubscription(this.getChannelHandler(videoChannel))
95 ))
96
97 forkJoin(observableBatch)
68 .subscribe( 98 .subscribe(
69 () => { 99 () => {
70 this.subscribed = true 100 [...this.subscribed.keys()].forEach((key) => {
101 this.subscribed.set(key, true)
102 })
71 103
72 this.notifier.success( 104 this.notifier.success(
73 this.i18n('Subscribed to {{nameWithHost}}. You will be notified of all their new videos.', 105 this.account
74 { nameWithHost: this.videoChannel.displayName } 106 ? this.i18n(
75 ), 107 'Subscribed to all current channels of {{nameWithHost}}. ' +
108 'You will be notified of all their new videos.',
109 { nameWithHost: this.account.displayName }
110 )
111 : this.i18n(
112 'Subscribed to {{nameWithHost}}. ' +
113 'You will be notified of all their new videos.',
114 { nameWithHost: this.videoChannels[0].displayName }
115 )
116 ,
76 this.i18n('Subscribed') 117 this.i18n('Subscribed')
77 ) 118 )
78 }, 119 },
@@ -88,13 +129,26 @@ export class SubscribeButtonComponent implements OnInit {
88 } 129 }
89 130
90 localUnsubscribe () { 131 localUnsubscribe () {
91 this.userSubscriptionService.deleteSubscription(this.channelHandle) 132 const observableBatch: any = []
133
134 this.videoChannels
135 .filter(videoChannel => this.subscribeStatus(true).includes(this.getChannelHandler(videoChannel)))
136 .forEach(videoChannel => observableBatch.push(
137 this.userSubscriptionService.deleteSubscription(this.getChannelHandler(videoChannel))
138 ))
139
140 forkJoin(observableBatch)
92 .subscribe( 141 .subscribe(
93 () => { 142 () => {
94 this.subscribed = false 143 [...this.subscribed.keys()].forEach((key) => {
144 this.subscribed.set(key, false)
145 })
95 146
96 this.notifier.success( 147 this.notifier.success(
97 this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }), 148 this.account
149 ? this.i18n('Unsubscribed from all channels of {{nameWithHost}}', { nameWithHost: this.account.nameWithHost })
150 : this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannels[0].nameWithHost })
151 ,
98 this.i18n('Unsubscribed') 152 this.i18n('Unsubscribed')
99 ) 153 )
100 }, 154 },
@@ -107,7 +161,23 @@ export class SubscribeButtonComponent implements OnInit {
107 return this.authService.isLoggedIn() 161 return this.authService.isLoggedIn()
108 } 162 }
109 163
164 isAllChannelsSubscribed () {
165 return !Array.from(this.subscribed.values()).includes(false)
166 }
167
110 gotoLogin () { 168 gotoLogin () {
111 this.router.navigate([ '/login' ]) 169 this.router.navigate([ '/login' ])
112 } 170 }
171
172 private getChannelHandler (videoChannel: VideoChannel) {
173 return videoChannel.name + '@' + videoChannel.host
174 }
175
176 private subscribeStatus (subscribed: boolean) {
177 const accumulator = []
178 for (const [key, value] of this.subscribed.entries()) {
179 if (value === subscribed) accumulator.push(key)
180 }
181 return accumulator
182 }
113} 183}
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 036825e61..a31165a41 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -24,7 +24,11 @@
24 24
25 <span class="views"> 25 <span class="views">
26 <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container> 26 <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
27 <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container> 27 <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }}
28 <ng-container *ngIf="video.views === 1; then single; else multiple"></ng-container>
29 <ng-template i18n #single>view</ng-template>
30 <ng-template i18n #multiple>views</ng-template>
31 </ng-container>
28 </span> 32 </span>
29 </span> 33 </span>
30 34