aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-01-07 23:51:14 +0100
committerChocobozzz <chocobozzz@cpy.re>2020-01-10 10:12:09 +0100
commit41eb700fceee1085dd0e1a9ce78ecbd0e111eb6e (patch)
tree41d39a5e8604cd769e9487d5046876629c638316 /client
parentfc2df421a99e87ad20ca1f758491b6af476efd56 (diff)
downloadPeerTube-41eb700fceee1085dd0e1a9ce78ecbd0e111eb6e.tar.gz
PeerTube-41eb700fceee1085dd0e1a9ce78ecbd0e111eb6e.tar.zst
PeerTube-41eb700fceee1085dd0e1a9ce78ecbd0e111eb6e.zip
Refactor my-subscribe-button to support full account subscription
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.html10
-rw-r--r--client/src/app/+accounts/accounts.component.html9
-rw-r--r--client/src/app/+accounts/accounts.component.scss10
-rw-r--r--client/src/app/+accounts/accounts.component.ts10
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html2
-rw-r--r--client/src/app/+video-channels/video-channels.component.html2
-rw-r--r--client/src/app/search/search.component.html2
-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
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html2
11 files changed, 167 insertions, 52 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 4ebad514c..93f43a350 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -9,14 +9,18 @@
9 <img [src]="videoChannel.avatarUrl" alt="Avatar" /> 9 <img [src]="videoChannel.avatarUrl" alt="Avatar" />
10 10
11 <div>{{ videoChannel.displayName }}</div> 11 <div>{{ videoChannel.displayName }}</div>
12 <div i18n class="followers">{{ videoChannel.followersCount }} subscribers</div> 12 <div class="followers">{{ videoChannel.followersCount }}
13 <ng-container *ngIf="videoChannel.followersCount === 1; then single; else multiple"></ng-container>
14 <ng-template i18n #single>subscriber</ng-template>
15 <ng-template i18n #multiple>subscribers</ng-template>
16 </div>
13 </a> 17 </a>
14 18
15 <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button> 19 <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
16 </div> 20 </div>
17 21
18 <div *ngIf="getVideosOf(videoChannel)" class="videos"> 22 <div *ngIf="getVideosOf(videoChannel)" class="videos">
19 <div class="no-results" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel does not have videos.</div> 23 <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
20 24
21 <my-video-miniature 25 <my-video-miniature
22 *ngFor="let video of getVideosOf(videoChannel)" 26 *ngFor="let video of getVideosOf(videoChannel)"
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 70257162d..1b6eb480e 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -28,8 +28,15 @@
28 > 28 >
29 </my-user-moderation-dropdown> 29 </my-user-moderation-dropdown>
30 </div> 30 </div>
31 <div i18n class="actor-followers">{{ account.followersCount }} subscribers</div> 31 <div class="actor-followers">
32 {{ account.followersCount }}
33 <ng-container *ngIf="account.followersCount === 1; then single; else multiple"></ng-container>
34 <ng-template i18n #single>subscriber</ng-template>
35 <ng-template i18n #multiple>subscribers</ng-template>
36 </div>
32 </div> 37 </div>
38
39 <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
33 </div> 40 </div>
34 41
35 <div class="links"> 42 <div class="links">
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 273e5c43a..ab3aece54 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -3,6 +3,16 @@
3 3
4.sub-menu { 4.sub-menu {
5 @include sub-menu-with-actor; 5 @include sub-menu-with-actor;
6
7 .actor {
8 width: 100%;
9 }
10}
11
12my-subscribe-button {
13 height: max-content;
14 margin-left: auto;
15 margin-top: 20px;
6} 16}
7 17
8my-user-moderation-dropdown, 18my-user-moderation-dropdown,
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index 3118d7562..e3a503f4c 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -8,6 +8,8 @@ import { Subscription } from 'rxjs'
8import { AuthService, Notifier, RedirectService } from '@app/core' 8import { AuthService, Notifier, RedirectService } from '@app/core'
9import { User, UserRight } from '../../../../shared' 9import { User, UserRight } from '../../../../shared'
10import { I18n } from '@ngx-translate/i18n-polyfill' 10import { I18n } from '@ngx-translate/i18n-polyfill'
11import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
12import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
11 13
12@Component({ 14@Component({
13 templateUrl: './accounts.component.html', 15 templateUrl: './accounts.component.html',
@@ -16,6 +18,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
16export class AccountsComponent implements OnInit, OnDestroy { 18export class AccountsComponent implements OnInit, OnDestroy {
17 account: Account 19 account: Account
18 user: User 20 user: User
21 videoChannels: VideoChannel[]
19 22
20 private routeSub: Subscription 23 private routeSub: Subscription
21 24
@@ -23,6 +26,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
23 private route: ActivatedRoute, 26 private route: ActivatedRoute,
24 private userService: UserService, 27 private userService: UserService,
25 private accountService: AccountService, 28 private accountService: AccountService,
29 private videoChannelService: VideoChannelService,
26 private notifier: Notifier, 30 private notifier: Notifier,
27 private restExtractor: RestExtractor, 31 private restExtractor: RestExtractor,
28 private redirectService: RedirectService, 32 private redirectService: RedirectService,
@@ -40,7 +44,11 @@ export class AccountsComponent implements OnInit, OnDestroy {
40 catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ])) 44 catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))
41 ) 45 )
42 .subscribe( 46 .subscribe(
43 account => this.account = account, 47 account => {
48 this.account = account
49 this.videoChannelService.listAccountVideoChannels(account)
50 .subscribe(videoChannels => this.videoChannels = videoChannels.data)
51 },
44 52
45 err => this.notifier.error(err.message) 53 err => this.notifier.error(err.message)
46 ) 54 )
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
index ce43ed6dd..b87a4c00c 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
@@ -20,6 +20,6 @@
20 </a> 20 </a>
21 </div> 21 </div>
22 22
23 <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button> 23 <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
24 </div> 24 </div>
25</div> 25</div>
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index f8b7fa583..f4b944c59 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -15,7 +15,7 @@
15 </button> 15 </button>
16 </div> 16 </div>
17 17
18 <my-subscribe-button #subscribeButton [videoChannel]="videoChannel"></my-subscribe-button> 18 <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
19 </div> 19 </div>
20 <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div> 20 <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
21 21
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index 055f64cc8..496ee970a 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -44,7 +44,7 @@
44 <div i18n class="video-channel-followers">{{ result.followersCount }} subscribers</div> 44 <div i18n class="video-channel-followers">{{ result.followersCount }} subscribers</div>
45 </div> 45 </div>
46 46
47 <my-subscribe-button [videoChannel]="result"></my-subscribe-button> 47 <my-subscribe-button [videoChannels]="[result]"></my-subscribe-button>
48 </div> 48 </div>
49 49
50 <div *ngIf="isVideo(result)" class="entry video"> 50 <div *ngIf="isVideo(result)" class="entry video">
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
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 908611ddf..9f1b51b2d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -155,7 +155,7 @@
155 </div> 155 </div>
156 </div> 156 </div>
157 157
158 <my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button> 158 <my-subscribe-button #subscribeButton [videoChannels]="[video.channel]" size="small"></my-subscribe-button>
159 </div> 159 </div>
160 </div> 160 </div>
161 161