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.html15
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.scss15
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.ts86
-rw-r--r--client/src/app/shared/user-subscription/user-subscription.service.ts92
-rw-r--r--client/src/app/shared/video/video-miniature.component.html6
5 files changed, 144 insertions, 70 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 6ac8af3de..275349b7f 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -1,13 +1,13 @@
1<div class="btn-group-subscribe btn-group" 1<div class="btn-group-subscribe btn-group"
2 [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed()}"> 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': subscribeStatus(true).length > 0 }"> 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="subscribeStatus(true).length > 0">{{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>
@@ -27,13 +27,8 @@
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()" i18n 30 (click)="unsubscribe()">
31 > 31 <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
32 <span>
33 <ng-container *ngIf="account; then multiple; else single"></ng-container>
34 <ng-template i18n #single>Unsubscribe</ng-template>
35 <ng-template i18n #multiple>Unsubscribe from all channels</ng-template>
36 </span>
37 </button> 32 </button>
38 </ng-template> 33 </ng-template>
39 34
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
index 164b917b8..d5b3796a1 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -13,6 +13,20 @@
13 font-size: 15px; 13 font-size: 15px;
14 } 14 }
15 15
16 &.big {
17 height: 35px;
18
19 button .extra-text {
20 span:first-child {
21 line-height: 80%;
22 }
23
24 span:not(:first-child) {
25 font-size: 75%;
26 }
27 }
28 }
29
16 // Unlogged 30 // Unlogged
17 & > .dropdown > .dropdown-toggle span { 31 & > .dropdown > .dropdown-toggle span {
18 padding-right: 3px; 32 padding-right: 3px;
@@ -80,5 +94,6 @@
80 94
81 span:not(:first-child) { 95 span:not(:first-child) {
82 font-size: 60%; 96 font-size: 60%;
97 text-align: left;
83 } 98 }
84} 99}
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 f0bee9d47..14a6bfe66 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -7,7 +7,7 @@ import { 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' 9import { Account } from '@app/shared/account/account.model'
10import { forkJoin } from 'rxjs' 10import { forkJoin, merge } from 'rxjs'
11 11
12@Component({ 12@Component({
13 selector: 'my-subscribe-button', 13 selector: 'my-subscribe-button',
@@ -26,7 +26,7 @@ export class SubscribeButtonComponent implements OnInit {
26 @Input() displayFollowers = false 26 @Input() displayFollowers = false
27 @Input() size: 'small' | 'normal' = 'normal' 27 @Input() size: 'small' | 'normal' = 'normal'
28 28
29 subscribed: Map<string, boolean> 29 subscribed = new Map<string, boolean>()
30 30
31 constructor ( 31 constructor (
32 private authService: AuthService, 32 private authService: AuthService,
@@ -35,9 +35,7 @@ export class SubscribeButtonComponent implements OnInit {
35 private userSubscriptionService: UserSubscriptionService, 35 private userSubscriptionService: UserSubscriptionService,
36 private i18n: I18n, 36 private i18n: I18n,
37 private videoService: VideoService 37 private videoService: VideoService
38 ) { 38 ) { }
39 this.subscribed = new Map<string, boolean>()
40 }
41 39
42 get handle () { 40 get handle () {
43 return this.account 41 return this.account
@@ -68,19 +66,7 @@ export class SubscribeButtonComponent implements OnInit {
68 } 66 }
69 67
70 ngOnInit () { 68 ngOnInit () {
71 if (this.isUserLoggedIn()) { 69 this.loadSubscribedStatus()
72
73 forkJoin(this.videoChannels.map(videoChannel => {
74 const handle = this.getChannelHandler(videoChannel)
75 this.subscribed.set(handle, false)
76 this.userSubscriptionService.doesSubscriptionExist(handle)
77 .subscribe(
78 res => this.subscribed.set(handle, res[handle]),
79
80 err => this.notifier.error(err.message)
81 )
82 }))
83 }
84 } 70 }
85 71
86 subscribe () { 72 subscribe () {
@@ -92,31 +78,22 @@ export class SubscribeButtonComponent implements OnInit {
92 } 78 }
93 79
94 localSubscribe () { 80 localSubscribe () {
95 const observableBatch: any = [] 81 const observableBatch = this.videoChannels
96 82 .map(videoChannel => this.getChannelHandler(videoChannel))
97 this.videoChannels 83 .filter(handle => this.subscribeStatus(false).includes(handle))
98 .filter(videoChannel => this.subscribeStatus(false).includes(this.getChannelHandler(videoChannel))) 84 .map(handle => this.userSubscriptionService.addSubscription(handle))
99 .forEach(videoChannel => observableBatch.push(
100 this.userSubscriptionService.addSubscription(this.getChannelHandler(videoChannel))
101 ))
102 85
103 forkJoin(observableBatch) 86 forkJoin(observableBatch)
104 .subscribe( 87 .subscribe(
105 () => { 88 () => {
106 [...this.subscribed.keys()].forEach((key) => {
107 this.subscribed.set(key, true)
108 })
109
110 this.notifier.success( 89 this.notifier.success(
111 this.account 90 this.account
112 ? this.i18n( 91 ? this.i18n(
113 'Subscribed to all current channels of {{nameWithHost}}. ' + 92 'Subscribed to all current channels of {{nameWithHost}}. You will be notified of all their new videos.',
114 'You will be notified of all their new videos.',
115 { nameWithHost: this.account.displayName } 93 { nameWithHost: this.account.displayName }
116 ) 94 )
117 : this.i18n( 95 : this.i18n(
118 'Subscribed to {{nameWithHost}}. ' + 96 'Subscribed to {{nameWithHost}}. You will be notified of all their new videos.',
119 'You will be notified of all their new videos.',
120 { nameWithHost: this.videoChannels[0].displayName } 97 { nameWithHost: this.videoChannels[0].displayName }
121 ) 98 )
122 , 99 ,
@@ -135,21 +112,14 @@ export class SubscribeButtonComponent implements OnInit {
135 } 112 }
136 113
137 localUnsubscribe () { 114 localUnsubscribe () {
138 const observableBatch: any = [] 115 const observableBatch = this.videoChannels
139 116 .map(videoChannel => this.getChannelHandler(videoChannel))
140 this.videoChannels 117 .filter(handle => this.subscribeStatus(true).includes(handle))
141 .filter(videoChannel => this.subscribeStatus(true).includes(this.getChannelHandler(videoChannel))) 118 .map(handle => this.userSubscriptionService.deleteSubscription(handle))
142 .forEach(videoChannel => observableBatch.push(
143 this.userSubscriptionService.deleteSubscription(this.getChannelHandler(videoChannel))
144 ))
145 119
146 forkJoin(observableBatch) 120 forkJoin(observableBatch)
147 .subscribe( 121 .subscribe(
148 () => { 122 () => {
149 [...this.subscribed.keys()].forEach((key) => {
150 this.subscribed.set(key, false)
151 })
152
153 this.notifier.success( 123 this.notifier.success(
154 this.account 124 this.account
155 ? this.i18n('Unsubscribed from all channels of {{nameWithHost}}', { nameWithHost: this.account.nameWithHost }) 125 ? this.i18n('Unsubscribed from all channels of {{nameWithHost}}', { nameWithHost: this.account.nameWithHost })
@@ -171,6 +141,14 @@ export class SubscribeButtonComponent implements OnInit {
171 return !Array.from(this.subscribed.values()).includes(false) 141 return !Array.from(this.subscribed.values()).includes(false)
172 } 142 }
173 143
144 isAtLeastOneChannelSubscribed () {
145 return this.subscribeStatus(true).length > 0
146 }
147
148 isBigButton () {
149 return this.videoChannels.length > 1 && this.isAtLeastOneChannelSubscribed()
150 }
151
174 gotoLogin () { 152 gotoLogin () {
175 this.router.navigate([ '/login' ]) 153 this.router.navigate([ '/login' ])
176 } 154 }
@@ -180,10 +158,28 @@ export class SubscribeButtonComponent implements OnInit {
180 } 158 }
181 159
182 private subscribeStatus (subscribed: boolean) { 160 private subscribeStatus (subscribed: boolean) {
183 const accumulator = [] 161 const accumulator: string[] = []
184 for (const [key, value] of this.subscribed.entries()) { 162 for (const [key, value] of this.subscribed.entries()) {
185 if (value === subscribed) accumulator.push(key) 163 if (value === subscribed) accumulator.push(key)
186 } 164 }
187 return accumulator 165 return accumulator
188 } 166 }
167
168 private loadSubscribedStatus () {
169 if (!this.isUserLoggedIn()) return
170
171 for (const videoChannel of this.videoChannels) {
172 const handle = this.getChannelHandler(videoChannel)
173 this.subscribed.set(handle, false)
174 merge(
175 this.userSubscriptionService.listenToSubscriptionCacheChange(handle),
176 this.userSubscriptionService.doesSubscriptionExist(handle)
177 )
178 .subscribe(
179 res => this.subscribed.set(handle, res),
180
181 err => this.notifier.error(err.message)
182 )
183 }
184 }
189} 185}
diff --git a/client/src/app/shared/user-subscription/user-subscription.service.ts b/client/src/app/shared/user-subscription/user-subscription.service.ts
index 83df40a43..bfb5848bc 100644
--- a/client/src/app/shared/user-subscription/user-subscription.service.ts
+++ b/client/src/app/shared/user-subscription/user-subscription.service.ts
@@ -1,44 +1,67 @@
1import { bufferTime, catchError, filter, first, map, share, switchMap } from 'rxjs/operators' 1import { bufferTime, catchError, filter, map, tap, share, switchMap } from 'rxjs/operators'
2import { Observable, ReplaySubject, Subject, of, merge } from 'rxjs'
2import { HttpClient, HttpParams } from '@angular/common/http' 3import { HttpClient, HttpParams } from '@angular/common/http'
3import { Injectable } from '@angular/core' 4import { Injectable } from '@angular/core'
4import { ResultList } from '../../../../../shared' 5import { ResultList } from '../../../../../shared'
5import { environment } from '../../../environments/environment' 6import { environment } from '../../../environments/environment'
6import { RestExtractor, RestService } from '../rest' 7import { RestExtractor, RestService } from '../rest'
7import { Observable, ReplaySubject, Subject } from 'rxjs'
8import { VideoChannel } from '@app/shared/video-channel/video-channel.model' 8import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
9import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' 9import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
10import { VideoChannel as VideoChannelServer } from '../../../../../shared/models/videos' 10import { VideoChannel as VideoChannelServer } from '../../../../../shared/models/videos'
11import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model' 11import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model'
12import { uniq } from 'lodash-es'
13import * as debug from 'debug'
14
15const logger = debug('peertube:subscriptions:UserSubscriptionService')
12 16
13type SubscriptionExistResult = { [ uri: string ]: boolean } 17type SubscriptionExistResult = { [ uri: string ]: boolean }
18type SubscriptionExistResultObservable = { [ uri: string ]: Observable<boolean> }
14 19
15@Injectable() 20@Injectable()
16export class UserSubscriptionService { 21export class UserSubscriptionService {
17 static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/users/me/subscriptions' 22 static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/users/me/subscriptions'
18 23
19 // Use a replay subject because we "next" a value before subscribing 24 // Use a replay subject because we "next" a value before subscribing
20 private existsSubject: Subject<string> = new ReplaySubject(1) 25 private existsSubject = new ReplaySubject<string>(1)
21 private readonly existsObservable: Observable<SubscriptionExistResult> 26 private readonly existsObservable: Observable<SubscriptionExistResult>
22 27
28 private myAccountSubscriptionCache: SubscriptionExistResult = {}
29 private myAccountSubscriptionCacheObservable: SubscriptionExistResultObservable = {}
30 private myAccountSubscriptionCacheSubject = new Subject<SubscriptionExistResult>()
31
23 constructor ( 32 constructor (
24 private authHttp: HttpClient, 33 private authHttp: HttpClient,
25 private restExtractor: RestExtractor, 34 private restExtractor: RestExtractor,
26 private restService: RestService 35 private restService: RestService
27 ) { 36 ) {
28 this.existsObservable = this.existsSubject.pipe( 37 this.existsObservable = merge(
29 bufferTime(500), 38 this.existsSubject.pipe(
30 filter(uris => uris.length !== 0), 39 bufferTime(500),
31 switchMap(uris => this.doSubscriptionsExist(uris)), 40 filter(uris => uris.length !== 0),
32 share() 41 map(uris => uniq(uris)),
42 switchMap(uris => this.doSubscriptionsExist(uris)),
43 share()
44 ),
45
46 this.myAccountSubscriptionCacheSubject
33 ) 47 )
34 } 48 }
35 49
50 /**
51 * Subscription part
52 */
53
36 deleteSubscription (nameWithHost: string) { 54 deleteSubscription (nameWithHost: string) {
37 const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/' + nameWithHost 55 const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/' + nameWithHost
38 56
39 return this.authHttp.delete(url) 57 return this.authHttp.delete(url)
40 .pipe( 58 .pipe(
41 map(this.restExtractor.extractDataBool), 59 map(this.restExtractor.extractDataBool),
60 tap(() => {
61 this.myAccountSubscriptionCache[nameWithHost] = false
62
63 this.myAccountSubscriptionCacheSubject.next(this.myAccountSubscriptionCache)
64 }),
42 catchError(err => this.restExtractor.handleError(err)) 65 catchError(err => this.restExtractor.handleError(err))
43 ) 66 )
44 } 67 }
@@ -50,6 +73,11 @@ export class UserSubscriptionService {
50 return this.authHttp.post(url, body) 73 return this.authHttp.post(url, body)
51 .pipe( 74 .pipe(
52 map(this.restExtractor.extractDataBool), 75 map(this.restExtractor.extractDataBool),
76 tap(() => {
77 this.myAccountSubscriptionCache[nameWithHost] = true
78
79 this.myAccountSubscriptionCacheSubject.next(this.myAccountSubscriptionCache)
80 }),
53 catchError(err => this.restExtractor.handleError(err)) 81 catchError(err => this.restExtractor.handleError(err))
54 ) 82 )
55 } 83 }
@@ -69,10 +97,46 @@ export class UserSubscriptionService {
69 ) 97 )
70 } 98 }
71 99
100 /**
101 * SubscriptionExist part
102 */
103
104 listenToMyAccountSubscriptionCacheSubject () {
105 return this.myAccountSubscriptionCacheSubject.asObservable()
106 }
107
108 listenToSubscriptionCacheChange (nameWithHost: string) {
109 if (nameWithHost in this.myAccountSubscriptionCacheObservable) {
110 return this.myAccountSubscriptionCacheObservable[ nameWithHost ]
111 }
112
113 const obs = this.existsObservable
114 .pipe(
115 filter(existsResult => existsResult[ nameWithHost ] !== undefined),
116 map(existsResult => existsResult[ nameWithHost ])
117 )
118
119 this.myAccountSubscriptionCacheObservable[ nameWithHost ] = obs
120 return obs
121 }
122
72 doesSubscriptionExist (nameWithHost: string) { 123 doesSubscriptionExist (nameWithHost: string) {
124 logger('Running subscription check for %d.', nameWithHost)
125
126 if (nameWithHost in this.myAccountSubscriptionCache) {
127 logger('Found cache for %d.', nameWithHost)
128
129 return of(this.myAccountSubscriptionCache[ nameWithHost ])
130 }
131
73 this.existsSubject.next(nameWithHost) 132 this.existsSubject.next(nameWithHost)
74 133
75 return this.existsObservable.pipe(first()) 134 logger('Fetching from network for %d.', nameWithHost)
135 return this.existsObservable.pipe(
136 filter(existsResult => existsResult[ nameWithHost ] !== undefined),
137 map(existsResult => existsResult[ nameWithHost ]),
138 tap(result => this.myAccountSubscriptionCache[ nameWithHost ] = result)
139 )
76 } 140 }
77 141
78 private doSubscriptionsExist (uris: string[]): Observable<SubscriptionExistResult> { 142 private doSubscriptionsExist (uris: string[]): Observable<SubscriptionExistResult> {
@@ -82,6 +146,14 @@ export class UserSubscriptionService {
82 params = this.restService.addObjectParams(params, { uris }) 146 params = this.restService.addObjectParams(params, { uris })
83 147
84 return this.authHttp.get<SubscriptionExistResult>(url, { params }) 148 return this.authHttp.get<SubscriptionExistResult>(url, { params })
85 .pipe(catchError(err => this.restExtractor.handleError(err))) 149 .pipe(
150 tap(res => {
151 this.myAccountSubscriptionCache = {
152 ...this.myAccountSubscriptionCache,
153 ...res
154 }
155 }),
156 catchError(err => this.restExtractor.handleError(err))
157 )
86 } 158 }
87} 159}
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index a31165a41..ce977b3e6 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -24,11 +24,7 @@
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 }} 27 <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
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>
32 </span> 28 </span>
33 </span> 29 </span>
34 30