OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Refactor my-subscribe-button to support full account subscription

pull/2400/head
Rigel Kent 2020-01-07 23:51:14 +01:00 committed by Chocobozzz
parent fc2df421a9
commit 41eb700fce
11 changed files with 169 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/app/+accounts/account-video-channels/account-video-channels.component.html
View File

@ -9,14 +9,18 @@
<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)"

9
client/src/app/+accounts/accounts.component.html
View File

@ -28,8 +28,15 @@
>
</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">

10
client/src/app/+accounts/accounts.component.scss
View File

@ -3,6 +3,16 @@
.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,

10
client/src/app/+accounts/accounts.component.ts
View File

@ -8,6 +8,8 @@ import { Subscription } from 'rxjs'
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',
@ -16,6 +18,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
export class AccountsComponent implements OnInit, OnDestroy {
account: Account
user: User
videoChannels: VideoChannel[]
private routeSub: Subscription
@ -23,6 +26,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
private route: ActivatedRoute,
private userService: UserService,
private accountService: AccountService,
private videoChannelService: VideoChannelService,
private notifier: Notifier,
private restExtractor: RestExtractor,
private redirectService: RedirectService,
@ -40,7 +44,11 @@ export class AccountsComponent implements OnInit, OnDestroy {
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)
)

2
client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
View File

@ -20,6 +20,6 @@
</a>
</div>
<my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button>
<my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
</div>
</div>

2
client/src/app/+video-channels/video-channels.component.html
View File

@ -15,7 +15,7 @@
</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>

2
client/src/app/search/search.component.html
View File

@ -44,7 +44,7 @@
<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">

52
client/src/app/shared/user-subscription/subscribe-button.component.html
View File

@ -1,34 +1,46 @@
<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>
<button
*ngIf="subscribed === true" type="button"
class="btn btn-sm" role="button"
(click)="unsubscribe()" i18n
>
Unsubscribe
</button>
<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>
<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>

118
client/src/app/shared/user-subscription/subscribe-button.component.ts
View File

@ -6,6 +6,8 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
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',
@ -13,11 +15,12 @@ import { FeedFormat } from '../../../../../shared/models/feeds'
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,
@ -26,32 +29,51 @@ export class SubscribeButtonComponent implements OnInit {
private userSubscriptionService: UserSubscriptionService,
private i18n: I18n,
private videoService: VideoService
) { }
get channelHandle () {
return this.videoChannel.name + '@' + this.videoChannel.host
) {
this.subscribed = new Map<string, boolean>()
}
get channelUri () {
return this.videoChannel.url
get handle () {
return this.account
? this.account.nameWithHost
: this.videoChannels[0].name + '@' + this.videoChannels[0].host
}
get channelHandle () {
return this.getChannelHandler(this.videoChannels[0])
}
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)
)
}))
}
}
@ -64,15 +86,34 @@ export class SubscribeButtonComponent implements OnInit {
}
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')
)
},
@ -88,13 +129,26 @@ export class SubscribeButtonComponent implements OnInit {
}
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')
)
},
@ -107,7 +161,23 @@ export class SubscribeButtonComponent implements OnInit {
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
}
}

6
client/src/app/shared/video/video-miniature.component.html
View File

@ -24,7 +24,11 @@
<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>

2
client/src/app/videos/+video-watch/video-watch.component.html
View File

@ -155,7 +155,7 @@
</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>