X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideo-channels%2Fvideo-channels.component.ts;h=afbf960325fa6a5a83556c3dd694b9f05c4af49d;hb=52798aa5f277492d4dd2482bca9396d2e982fa19;hp=09541b370e52febb413ae2853058a40dbb6f22e0;hpb=a51bad1accfade25916db0dadaeb879a182cf19b;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index 09541b370..afbf96032 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts @@ -1,28 +1,154 @@ -import { Component, OnInit } from '@angular/core' +import { Hotkey, HotkeysService } from 'angular2-hotkeys' +import { Subscription } from 'rxjs' +import { catchError, distinctUntilChanged, map, switchMap } from 'rxjs/operators' +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute } from '@angular/router' -import { VideoChannel } from '@app/shared/video-channel/video-channel.model' -import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' -import { RestExtractor } from '@app/shared' -import { catchError } from 'rxjs/operators' +import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService } from '@app/core' +import { Account, ListOverflowItem, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main' +import { BlocklistService } from '@app/shared/shared-moderation' +import { SupportModalComponent } from '@app/shared/shared-support-modal' +import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' +import { HttpStatusCode, UserRight } from '@shared/models' @Component({ templateUrl: './video-channels.component.html', styleUrls: [ './video-channels.component.scss' ] }) -export class VideoChannelsComponent implements OnInit { +export class VideoChannelsComponent implements OnInit, OnDestroy { + @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent + @ViewChild('supportModal') supportModal: SupportModalComponent + videoChannel: VideoChannel + ownerAccount: Account + hotkeys: Hotkey[] + links: ListOverflowItem[] = [] + isChannelManageable = false + + channelVideosCount: number + ownerDescriptionHTML = '' + channelDescriptionHTML = '' + channelDescriptionExpanded = false + + private routeSub: Subscription constructor ( private route: ActivatedRoute, + private notifier: Notifier, + private authService: AuthService, private videoChannelService: VideoChannelService, - private restExtractor: RestExtractor - ) {} + private videoService: VideoService, + private restExtractor: RestExtractor, + private hotkeysService: HotkeysService, + private screenService: ScreenService, + private markdown: MarkdownService, + private blocklist: BlocklistService + ) { } ngOnInit () { - const videoChannelId = this.route.snapshot.params['videoChannelId'] + this.routeSub = this.route.params + .pipe( + map(params => params['videoChannelName']), + distinctUntilChanged(), + switchMap(videoChannelName => this.videoChannelService.getVideoChannel(videoChannelName)), + catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [ + HttpStatusCode.BAD_REQUEST_400, + HttpStatusCode.NOT_FOUND_404 + ])) + ) + .subscribe(async videoChannel => { + this.channelDescriptionHTML = await this.markdown.textMarkdownToHTML({ + markdown: videoChannel.description, + withEmoji: true, + withHtml: true + }) + + this.ownerDescriptionHTML = await this.markdown.textMarkdownToHTML({ + markdown: videoChannel.ownerAccount.description, + withEmoji: true, + withHtml: true + }) + + // After the markdown renderer to avoid layout changes + this.videoChannel = videoChannel + this.ownerAccount = new Account(this.videoChannel.ownerAccount) + + this.loadChannelVideosCount() + this.loadOwnerBlockStatus() + }) + + this.hotkeys = [ + new Hotkey('S', (event: KeyboardEvent): boolean => { + if (this.subscribeButton.subscribed) this.subscribeButton.unsubscribe() + else this.subscribeButton.subscribe() + + return false + }, undefined, $localize`Subscribe to the account`) + ] + if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys) + + this.links = [ + { label: $localize`VIDEOS`, routerLink: 'videos' }, + { label: $localize`PLAYLISTS`, routerLink: 'video-playlists' } + ] + } + + ngOnDestroy () { + if (this.routeSub) this.routeSub.unsubscribe() + + // Unbind hotkeys + if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys) + } + + isInSmallView () { + return this.screenService.isInSmallView() + } + + isUserLoggedIn () { + return this.authService.isLoggedIn() + } + + isOwner () { + if (!this.isUserLoggedIn()) return false + + return this.videoChannel?.ownerAccount.userId === this.authService.getUser().id + } + + isManageable () { + if (!this.videoChannel.isLocal) return false + if (!this.isUserLoggedIn()) return false + + return this.isOwner() || this.authService.getUser().hasRight(UserRight.MANAGE_ANY_VIDEO_CHANNEL) + } + + activateCopiedMessage () { + this.notifier.success($localize`Username copied`) + } + + hasShowMoreDescription () { + return !this.channelDescriptionExpanded && this.channelDescriptionHTML.length > 100 + } + + showSupportModal () { + this.supportModal.show() + } + + getAccountUrl () { + return [ '/a', this.videoChannel.ownerBy ] + } + + private loadChannelVideosCount () { + this.videoService.getVideoChannelVideos({ + videoChannel: this.videoChannel, + videoPagination: { + currentPage: 1, + itemsPerPage: 0 + }, + sort: '-publishedAt' + }).subscribe(res => this.channelVideosCount = res.total) + } - this.videoChannelService.getVideoChannel(videoChannelId) - .pipe(catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))) - .subscribe(videoChannel => this.videoChannel = videoChannel) + private loadOwnerBlockStatus () { + this.blocklist.getStatus({ accounts: [ this.ownerAccount.nameWithHostForced ], hosts: [ this.ownerAccount.host ] }) + .subscribe(status => this.ownerAccount.updateBlockStatus(status)) } }