<img [src]="videoChannel.avatarUrl" alt="Avatar" />
<div>{{ videoChannel.displayName }}</div>
- <div class="followers">{{ videoChannel.followersCount }}
- <ng-container *ngIf="videoChannel.followersCount === 1; then single; else multiple"></ng-container>
- <ng-template i18n #single>subscriber</ng-template>
- <ng-template i18n #multiple>subscribers</ng-template>
- </div>
+ <div class="followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
</a>
<my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
>
</my-user-moderation-dropdown>
</div>
- <div class="actor-followers">
- {{ account.followersCount }}
- <ng-container *ngIf="account.followersCount === 1; then single; else multiple"></ng-container>
- <ng-template i18n #single>subscriber</ng-template>
- <ng-template i18n #multiple>subscribers</ng-template>
- </div>
+ <div class="actor-followers" i18n>{account.followersCount, plural, =1 {1 subscriber} other {{{ account.followersCount }} subscribers}}</div>
</div>
<my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
map(params => params[ 'accountId' ]),
distinctUntilChanged(),
switchMap(accountId => this.accountService.getAccount(accountId)),
- tap(account => this.getUserIfNeeded(account)),
+ tap(account => {
+ this.account = account
+ this.getUserIfNeeded(account)
+ }),
+ switchMap(account => this.videoChannelService.listAccountVideoChannels(account)),
catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))
)
.subscribe(
- account => {
- this.account = account
- this.videoChannelService.listAccountVideoChannels(account)
- .subscribe(videoChannels => this.videoChannels = videoChannels.data)
- },
+ videoChannels => this.videoChannels = videoChannels.data,
err => this.notifier.error(err.message)
)
<div class="btn-group-subscribe btn-group"
- [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed()}">
+ [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed(), 'big': isBigButton() }">
<ng-template #userLoggedOut>
- <span [ngClass]="{ 'extra-text': subscribeStatus(true).length > 0 }">
+ <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed() }">
<ng-container *ngIf="account; then multiple; else single"></ng-container>
<ng-template i18n #single>Subscribe</ng-template>
<ng-template #multiple>
<span i18n>Subscribe to all channels</span>
- <span *ngIf="subscribeStatus(true).length > 0">{{subscribeStatus(true).length}}/{{subscribed.size}}
+ <span *ngIf="isAtLeastOneChannelSubscribed()">{{subscribeStatus(true).length}}/{{subscribed.size}}
<ng-container i18n>channels subscribed</ng-container>
</span>
</ng-template>
<button
*ngIf="isAllChannelsSubscribed()" type="button"
class="btn btn-sm" role="button"
- (click)="unsubscribe()" i18n
- >
- <span>
- <ng-container *ngIf="account; then multiple; else single"></ng-container>
- <ng-template i18n #single>Unsubscribe</ng-template>
- <ng-template i18n #multiple>Unsubscribe from all channels</ng-template>
- </span>
+ (click)="unsubscribe()">
+ <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
</button>
</ng-template>
font-size: 15px;
}
+ &.big {
+ height: 35px;
+
+ button .extra-text {
+ span:first-child {
+ line-height: 80%;
+ }
+
+ span:not(:first-child) {
+ font-size: 75%;
+ }
+ }
+ }
+
// Unlogged
& > .dropdown > .dropdown-toggle span {
padding-right: 3px;
span:not(:first-child) {
font-size: 60%;
+ text-align: left;
}
}
import { VideoService } from '@app/shared/video/video.service'
import { FeedFormat } from '../../../../../shared/models/feeds'
import { Account } from '@app/shared/account/account.model'
-import { forkJoin } from 'rxjs'
+import { forkJoin, merge } from 'rxjs'
@Component({
selector: 'my-subscribe-button',
@Input() displayFollowers = false
@Input() size: 'small' | 'normal' = 'normal'
- subscribed: Map<string, boolean>
+ subscribed = new Map<string, boolean>()
constructor (
private authService: AuthService,
private userSubscriptionService: UserSubscriptionService,
private i18n: I18n,
private videoService: VideoService
- ) {
- this.subscribed = new Map<string, boolean>()
- }
+ ) { }
get handle () {
return this.account
}
ngOnInit () {
- if (this.isUserLoggedIn()) {
-
- forkJoin(this.videoChannels.map(videoChannel => {
- const handle = this.getChannelHandler(videoChannel)
- this.subscribed.set(handle, false)
- this.userSubscriptionService.doesSubscriptionExist(handle)
- .subscribe(
- res => this.subscribed.set(handle, res[handle]),
-
- err => this.notifier.error(err.message)
- )
- }))
- }
+ this.loadSubscribedStatus()
}
subscribe () {
}
localSubscribe () {
- const observableBatch: any = []
-
- this.videoChannels
- .filter(videoChannel => this.subscribeStatus(false).includes(this.getChannelHandler(videoChannel)))
- .forEach(videoChannel => observableBatch.push(
- this.userSubscriptionService.addSubscription(this.getChannelHandler(videoChannel))
- ))
+ const observableBatch = this.videoChannels
+ .map(videoChannel => this.getChannelHandler(videoChannel))
+ .filter(handle => this.subscribeStatus(false).includes(handle))
+ .map(handle => this.userSubscriptionService.addSubscription(handle))
forkJoin(observableBatch)
.subscribe(
() => {
- [...this.subscribed.keys()].forEach((key) => {
- this.subscribed.set(key, true)
- })
-
this.notifier.success(
this.account
? this.i18n(
- 'Subscribed to all current channels of {{nameWithHost}}. ' +
- 'You will be notified of all their new videos.',
+ 'Subscribed to all current channels of {{nameWithHost}}. You will be notified of all their new videos.',
{ nameWithHost: this.account.displayName }
)
: this.i18n(
- 'Subscribed to {{nameWithHost}}. ' +
- 'You will be notified of all their new videos.',
+ 'Subscribed to {{nameWithHost}}. You will be notified of all their new videos.',
{ nameWithHost: this.videoChannels[0].displayName }
)
,
}
localUnsubscribe () {
- const observableBatch: any = []
-
- this.videoChannels
- .filter(videoChannel => this.subscribeStatus(true).includes(this.getChannelHandler(videoChannel)))
- .forEach(videoChannel => observableBatch.push(
- this.userSubscriptionService.deleteSubscription(this.getChannelHandler(videoChannel))
- ))
+ const observableBatch = this.videoChannels
+ .map(videoChannel => this.getChannelHandler(videoChannel))
+ .filter(handle => this.subscribeStatus(true).includes(handle))
+ .map(handle => this.userSubscriptionService.deleteSubscription(handle))
forkJoin(observableBatch)
.subscribe(
() => {
- [...this.subscribed.keys()].forEach((key) => {
- this.subscribed.set(key, false)
- })
-
this.notifier.success(
this.account
? this.i18n('Unsubscribed from all channels of {{nameWithHost}}', { nameWithHost: this.account.nameWithHost })
return !Array.from(this.subscribed.values()).includes(false)
}
+ isAtLeastOneChannelSubscribed () {
+ return this.subscribeStatus(true).length > 0
+ }
+
+ isBigButton () {
+ return this.videoChannels.length > 1 && this.isAtLeastOneChannelSubscribed()
+ }
+
gotoLogin () {
this.router.navigate([ '/login' ])
}
}
private subscribeStatus (subscribed: boolean) {
- const accumulator = []
+ const accumulator: string[] = []
for (const [key, value] of this.subscribed.entries()) {
if (value === subscribed) accumulator.push(key)
}
return accumulator
}
+
+ private loadSubscribedStatus () {
+ if (!this.isUserLoggedIn()) return
+
+ for (const videoChannel of this.videoChannels) {
+ const handle = this.getChannelHandler(videoChannel)
+ this.subscribed.set(handle, false)
+ merge(
+ this.userSubscriptionService.listenToSubscriptionCacheChange(handle),
+ this.userSubscriptionService.doesSubscriptionExist(handle)
+ )
+ .subscribe(
+ res => this.subscribed.set(handle, res),
+
+ err => this.notifier.error(err.message)
+ )
+ }
+ }
}
-import { bufferTime, catchError, filter, first, map, share, switchMap } from 'rxjs/operators'
+import { bufferTime, catchError, filter, map, tap, share, switchMap } from 'rxjs/operators'
+import { Observable, ReplaySubject, Subject, of, merge } from 'rxjs'
import { HttpClient, HttpParams } from '@angular/common/http'
import { Injectable } from '@angular/core'
import { ResultList } from '../../../../../shared'
import { environment } from '../../../environments/environment'
import { RestExtractor, RestService } from '../rest'
-import { Observable, ReplaySubject, Subject } from 'rxjs'
import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
import { VideoChannel as VideoChannelServer } from '../../../../../shared/models/videos'
import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model'
+import { uniq } from 'lodash-es'
+import * as debug from 'debug'
+
+const logger = debug('peertube:subscriptions:UserSubscriptionService')
type SubscriptionExistResult = { [ uri: string ]: boolean }
+type SubscriptionExistResultObservable = { [ uri: string ]: Observable<boolean> }
@Injectable()
export class UserSubscriptionService {
static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/users/me/subscriptions'
// Use a replay subject because we "next" a value before subscribing
- private existsSubject: Subject<string> = new ReplaySubject(1)
+ private existsSubject = new ReplaySubject<string>(1)
private readonly existsObservable: Observable<SubscriptionExistResult>
+ private myAccountSubscriptionCache: SubscriptionExistResult = {}
+ private myAccountSubscriptionCacheObservable: SubscriptionExistResultObservable = {}
+ private myAccountSubscriptionCacheSubject = new Subject<SubscriptionExistResult>()
+
constructor (
private authHttp: HttpClient,
private restExtractor: RestExtractor,
private restService: RestService
) {
- this.existsObservable = this.existsSubject.pipe(
- bufferTime(500),
- filter(uris => uris.length !== 0),
- switchMap(uris => this.doSubscriptionsExist(uris)),
- share()
+ this.existsObservable = merge(
+ this.existsSubject.pipe(
+ bufferTime(500),
+ filter(uris => uris.length !== 0),
+ map(uris => uniq(uris)),
+ switchMap(uris => this.doSubscriptionsExist(uris)),
+ share()
+ ),
+
+ this.myAccountSubscriptionCacheSubject
)
}
+ /**
+ * Subscription part
+ */
+
deleteSubscription (nameWithHost: string) {
const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/' + nameWithHost
return this.authHttp.delete(url)
.pipe(
map(this.restExtractor.extractDataBool),
+ tap(() => {
+ this.myAccountSubscriptionCache[nameWithHost] = false
+
+ this.myAccountSubscriptionCacheSubject.next(this.myAccountSubscriptionCache)
+ }),
catchError(err => this.restExtractor.handleError(err))
)
}
return this.authHttp.post(url, body)
.pipe(
map(this.restExtractor.extractDataBool),
+ tap(() => {
+ this.myAccountSubscriptionCache[nameWithHost] = true
+
+ this.myAccountSubscriptionCacheSubject.next(this.myAccountSubscriptionCache)
+ }),
catchError(err => this.restExtractor.handleError(err))
)
}
)
}
+ /**
+ * SubscriptionExist part
+ */
+
+ listenToMyAccountSubscriptionCacheSubject () {
+ return this.myAccountSubscriptionCacheSubject.asObservable()
+ }
+
+ listenToSubscriptionCacheChange (nameWithHost: string) {
+ if (nameWithHost in this.myAccountSubscriptionCacheObservable) {
+ return this.myAccountSubscriptionCacheObservable[ nameWithHost ]
+ }
+
+ const obs = this.existsObservable
+ .pipe(
+ filter(existsResult => existsResult[ nameWithHost ] !== undefined),
+ map(existsResult => existsResult[ nameWithHost ])
+ )
+
+ this.myAccountSubscriptionCacheObservable[ nameWithHost ] = obs
+ return obs
+ }
+
doesSubscriptionExist (nameWithHost: string) {
+ logger('Running subscription check for %d.', nameWithHost)
+
+ if (nameWithHost in this.myAccountSubscriptionCache) {
+ logger('Found cache for %d.', nameWithHost)
+
+ return of(this.myAccountSubscriptionCache[ nameWithHost ])
+ }
+
this.existsSubject.next(nameWithHost)
- return this.existsObservable.pipe(first())
+ logger('Fetching from network for %d.', nameWithHost)
+ return this.existsObservable.pipe(
+ filter(existsResult => existsResult[ nameWithHost ] !== undefined),
+ map(existsResult => existsResult[ nameWithHost ]),
+ tap(result => this.myAccountSubscriptionCache[ nameWithHost ] = result)
+ )
}
private doSubscriptionsExist (uris: string[]): Observable<SubscriptionExistResult> {
params = this.restService.addObjectParams(params, { uris })
return this.authHttp.get<SubscriptionExistResult>(url, { params })
- .pipe(catchError(err => this.restExtractor.handleError(err)))
+ .pipe(
+ tap(res => {
+ this.myAccountSubscriptionCache = {
+ ...this.myAccountSubscriptionCache,
+ ...res
+ }
+ }),
+ catchError(err => this.restExtractor.handleError(err))
+ )
}
}
<span class="views">
<ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
- <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }}
- <ng-container *ngIf="video.views === 1; then single; else multiple"></ng-container>
- <ng-template i18n #single>view</ng-template>
- <ng-template i18n #multiple>views</ng-template>
- </ng-container>
+ <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
</span>
</span>
projects / oweals / peertube.git / commitdiff