<img [src]="videoChannel.avatarUrl" alt="Avatar" />
<div>{{ videoChannel.displayName }}</div>
- <div i18n class="followers">{{ videoChannel.followersCount }} subscribers</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>
</a>
- <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button>
+ <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
</div>
<div *ngIf="getVideosOf(videoChannel)" class="videos">
- <div class="no-results" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel does not have videos.</div>
+ <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
<my-video-miniature
*ngFor="let video of getVideosOf(videoChannel)"
>
</my-user-moderation-dropdown>
</div>
- <div i18n class="actor-followers">{{ account.followersCount }} subscribers</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>
+
+ <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
</div>
<div class="links">
.sub-menu {
@include sub-menu-with-actor;
+
+ .actor {
+ width: 100%;
+ }
+}
+
+my-subscribe-button {
+ height: max-content;
+ margin-left: auto;
+ margin-top: 20px;
}
my-user-moderation-dropdown,
import { AuthService, Notifier, RedirectService } from '@app/core'
import { User, UserRight } from '../../../../shared'
import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
@Component({
templateUrl: './accounts.component.html',
export class AccountsComponent implements OnInit, OnDestroy {
account: Account
user: User
+ videoChannels: VideoChannel[]
private routeSub: Subscription
private route: ActivatedRoute,
private userService: UserService,
private accountService: AccountService,
+ private videoChannelService: VideoChannelService,
private notifier: Notifier,
private restExtractor: RestExtractor,
private redirectService: RedirectService,
catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))
)
.subscribe(
- account => this.account = account,
+ account => {
+ this.account = account
+ this.videoChannelService.listAccountVideoChannels(account)
+ .subscribe(videoChannels => this.videoChannels = videoChannels.data)
+ },
err => this.notifier.error(err.message)
)
</a>
</div>
- <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button>
+ <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
</div>
</div>
</button>
</div>
- <my-subscribe-button #subscribeButton [videoChannel]="videoChannel"></my-subscribe-button>
+ <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
</div>
<div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
<div i18n class="video-channel-followers">{{ result.followersCount }} subscribers</div>
</div>
- <my-subscribe-button [videoChannel]="result"></my-subscribe-button>
+ <my-subscribe-button [videoChannels]="[result]"></my-subscribe-button>
</div>
<div *ngIf="isVideo(result)" class="entry video">
<div class="btn-group-subscribe btn-group"
- [ngClass]="{'subscribe-button': subscribed !== true, 'unsubscribe-button': subscribed === true}">
- <button *ngIf="subscribed === false && isUserLoggedIn()" type="button"
- class="btn btn-sm" role="button"
- (click)="subscribe()">
- <span i18n>
- Subscribe
+ [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed()}">
+
+ <ng-template #userLoggedOut>
+ <span>
+ <ng-container *ngIf="account; then multiple; else single"></ng-container>
+ <ng-template i18n #single>Subscribe</ng-template>
+ <ng-template i18n #multiple>Subscribe to all channels</ng-template>
</span>
<span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
{{ videoChannel.followersCount | myNumberFormatter }}
</span>
- </button>
+ </ng-template>
+
+ <ng-template #userLoggedIn>
+ <button *ngIf="!isAllChannelsSubscribed()" type="button"
+ class="btn btn-sm" role="button"
+ (click)="subscribe()">
+ <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
+ </button>
+
+ <button
+ *ngIf="isAllChannelsSubscribed()" type="button"
+ class="btn btn-sm" role="button"
+ (click)="unsubscribe()" i18n
+ >
+ <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>
+ </button>
+ </ng-template>
- <button
- *ngIf="subscribed === true" type="button"
- class="btn btn-sm" role="button"
- (click)="unsubscribe()" i18n
- >
- Unsubscribe
- </button>
+ <ng-container
+ *ngIf="isUserLoggedIn(); then userLoggedIn">
+ </ng-container>
<div class="btn-group" ngbDropdown autoClose="outside"
placement="bottom-right" role="group"
aria-label="Multiple ways to subscribe to the current channel">
<button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
- <span *ngIf="!isUserLoggedIn()" i18n>
- Subscribe
- </span>
- <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
- {{ videoChannel.followersCount | myNumberFormatter }}
- </span>
+ <ng-container
+ *ngIf="!isUserLoggedIn(); then userLoggedOut">
+ </ng-container>
</button>
<div class="dropdown-menu" ngbDropdownMenu>
import { I18n } from '@ngx-translate/i18n-polyfill'
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'
@Component({
selector: 'my-subscribe-button',
styleUrls: [ './subscribe-button.component.scss' ]
})
export class SubscribeButtonComponent implements OnInit {
- @Input() videoChannel: VideoChannel
+ @Input() account: Account
+ @Input() videoChannels: VideoChannel[]
@Input() displayFollowers = false
@Input() size: 'small' | 'normal' = 'normal'
- subscribed: boolean
+ subscribed: 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
+ ? this.account.nameWithHost
+ : this.videoChannels[0].name + '@' + this.videoChannels[0].host
+ }
get channelHandle () {
- return this.videoChannel.name + '@' + this.videoChannel.host
+ return this.getChannelHandler(this.videoChannels[0])
}
- get channelUri () {
- return this.videoChannel.url
+ get uri () {
+ return this.account
+ ? this.account.url
+ : this.videoChannels[0].url
}
get rssUri () {
- const rssFeed = this.videoService
- .getVideoChannelFeedUrls(this.videoChannel.id)
- .find(i => i.format === FeedFormat.RSS)
+ const rssFeed = this.account
+ ? this.videoService
+ .getAccountFeedUrls(this.account.id)
+ .find(i => i.format === FeedFormat.RSS)
+ : this.videoService
+ .getVideoChannelFeedUrls(this.videoChannels[0].id)
+ .find(i => i.format === FeedFormat.RSS)
return rssFeed.url
}
ngOnInit () {
if (this.isUserLoggedIn()) {
- this.userSubscriptionService.doesSubscriptionExist(this.channelHandle)
- .subscribe(
- res => this.subscribed = res[this.channelHandle],
- err => this.notifier.error(err.message)
- )
+ 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)
+ )
+ }))
}
}
}
localSubscribe () {
- this.userSubscriptionService.addSubscription(this.channelHandle)
+ const observableBatch: any = []
+
+ this.videoChannels
+ .filter(videoChannel => this.subscribeStatus(false).includes(this.getChannelHandler(videoChannel)))
+ .forEach(videoChannel => observableBatch.push(
+ this.userSubscriptionService.addSubscription(this.getChannelHandler(videoChannel))
+ ))
+
+ forkJoin(observableBatch)
.subscribe(
() => {
- this.subscribed = true
+ [...this.subscribed.keys()].forEach((key) => {
+ this.subscribed.set(key, true)
+ })
this.notifier.success(
- this.i18n('Subscribed to {{nameWithHost}}. You will be notified of all their new videos.',
- { nameWithHost: this.videoChannel.displayName }
- ),
+ this.account
+ ? this.i18n(
+ '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.',
+ { nameWithHost: this.videoChannels[0].displayName }
+ )
+ ,
this.i18n('Subscribed')
)
},
}
localUnsubscribe () {
- this.userSubscriptionService.deleteSubscription(this.channelHandle)
+ const observableBatch: any = []
+
+ this.videoChannels
+ .filter(videoChannel => this.subscribeStatus(true).includes(this.getChannelHandler(videoChannel)))
+ .forEach(videoChannel => observableBatch.push(
+ this.userSubscriptionService.deleteSubscription(this.getChannelHandler(videoChannel))
+ ))
+
+ forkJoin(observableBatch)
.subscribe(
() => {
- this.subscribed = false
+ [...this.subscribed.keys()].forEach((key) => {
+ this.subscribed.set(key, false)
+ })
this.notifier.success(
- this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }),
+ this.account
+ ? this.i18n('Unsubscribed from all channels of {{nameWithHost}}', { nameWithHost: this.account.nameWithHost })
+ : this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannels[0].nameWithHost })
+ ,
this.i18n('Unsubscribed')
)
},
return this.authService.isLoggedIn()
}
+ isAllChannelsSubscribed () {
+ return !Array.from(this.subscribed.values()).includes(false)
+ }
+
gotoLogin () {
this.router.navigate([ '/login' ])
}
+
+ private getChannelHandler (videoChannel: VideoChannel) {
+ return videoChannel.name + '@' + videoChannel.host
+ }
+
+ private subscribeStatus (subscribed: boolean) {
+ const accumulator = []
+ for (const [key, value] of this.subscribed.entries()) {
+ if (value === subscribed) accumulator.push(key)
+ }
+ return accumulator
+ }
}
<span class="views">
<ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
- <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} 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>
</span>
</span>
</div>
</div>
- <my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button>
+ <my-subscribe-button #subscribeButton [videoChannels]="[video.channel]" size="small"></my-subscribe-button>
</div>
</div>
projects / oweals / peertube.git / commitdiff