2020-06-23 12:10:17 +00:00
|
|
|
import { Hotkey, HotkeysService } from 'angular2-hotkeys'
|
|
|
|
import { Subscription } from 'rxjs'
|
|
|
|
import { catchError, distinctUntilChanged, map, switchMap } from 'rxjs/operators'
|
2018-09-02 18:54:23 +00:00
|
|
|
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
|
2018-04-25 14:56:13 +00:00
|
|
|
import { ActivatedRoute } from '@angular/router'
|
2021-03-25 12:42:55 +00:00
|
|
|
import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService } from '@app/core'
|
|
|
|
import { ListOverflowItem, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
|
2021-03-29 13:56:01 +00:00
|
|
|
import { SupportModalComponent } from '@app/shared/shared-support-modal'
|
2020-06-23 12:10:17 +00:00
|
|
|
import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
|
2020-12-08 20:16:10 +00:00
|
|
|
import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
|
2018-04-25 14:56:13 +00:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
templateUrl: './video-channels.component.html',
|
|
|
|
styleUrls: [ './video-channels.component.scss' ]
|
|
|
|
})
|
2018-06-07 09:19:26 +00:00
|
|
|
export class VideoChannelsComponent implements OnInit, OnDestroy {
|
2020-02-07 09:00:34 +00:00
|
|
|
@ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
|
2021-03-29 13:56:01 +00:00
|
|
|
@ViewChild('supportModal') supportModal: SupportModalComponent
|
2018-09-02 18:54:23 +00:00
|
|
|
|
2018-04-25 14:56:13 +00:00
|
|
|
videoChannel: VideoChannel
|
2018-09-02 18:54:23 +00:00
|
|
|
hotkeys: Hotkey[]
|
2020-02-05 19:54:37 +00:00
|
|
|
links: ListOverflowItem[] = []
|
2020-01-22 14:01:38 +00:00
|
|
|
isChannelManageable = false
|
2018-04-25 14:56:13 +00:00
|
|
|
|
2021-03-25 12:42:55 +00:00
|
|
|
channelVideosCount: number
|
|
|
|
ownerDescriptionHTML = ''
|
|
|
|
channelDescriptionHTML = ''
|
|
|
|
channelDescriptionExpanded = false
|
|
|
|
|
2018-06-07 09:19:26 +00:00
|
|
|
private routeSub: Subscription
|
|
|
|
|
2018-04-25 14:56:13 +00:00
|
|
|
constructor (
|
|
|
|
private route: ActivatedRoute,
|
2019-12-16 21:13:07 +00:00
|
|
|
private notifier: Notifier,
|
2018-08-30 12:58:00 +00:00
|
|
|
private authService: AuthService,
|
2018-05-31 09:35:01 +00:00
|
|
|
private videoChannelService: VideoChannelService,
|
2021-03-25 12:42:55 +00:00
|
|
|
private videoService: VideoService,
|
2018-09-02 18:54:23 +00:00
|
|
|
private restExtractor: RestExtractor,
|
2020-03-09 09:22:11 +00:00
|
|
|
private hotkeysService: HotkeysService,
|
2021-03-25 12:42:55 +00:00
|
|
|
private screenService: ScreenService,
|
|
|
|
private markdown: MarkdownService
|
2018-06-07 09:19:26 +00:00
|
|
|
) { }
|
2018-04-25 14:56:13 +00:00
|
|
|
|
|
|
|
ngOnInit () {
|
2018-06-07 09:19:26 +00:00
|
|
|
this.routeSub = this.route.params
|
|
|
|
.pipe(
|
2019-01-08 10:26:41 +00:00
|
|
|
map(params => params[ 'videoChannelName' ]),
|
2018-06-07 09:19:26 +00:00
|
|
|
distinctUntilChanged(),
|
2019-01-08 10:26:41 +00:00
|
|
|
switchMap(videoChannelName => this.videoChannelService.getVideoChannel(videoChannelName)),
|
2021-01-24 02:02:04 +00:00
|
|
|
catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
|
2020-12-08 20:16:10 +00:00
|
|
|
HttpStatusCode.BAD_REQUEST_400,
|
|
|
|
HttpStatusCode.NOT_FOUND_404
|
|
|
|
]))
|
2018-06-07 09:19:26 +00:00
|
|
|
)
|
2021-03-25 12:42:55 +00:00
|
|
|
.subscribe(async videoChannel => {
|
|
|
|
this.channelDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.description)
|
|
|
|
this.ownerDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.ownerAccount.description)
|
|
|
|
|
|
|
|
// After the markdown renderer to avoid layout changes
|
2020-01-22 14:01:38 +00:00
|
|
|
this.videoChannel = videoChannel
|
|
|
|
|
2021-03-25 12:42:55 +00:00
|
|
|
this.loadChannelVideosCount()
|
2020-01-22 14:01:38 +00:00
|
|
|
})
|
2018-06-07 09:19:26 +00:00
|
|
|
|
2018-09-02 18:54:23 +00:00
|
|
|
this.hotkeys = [
|
|
|
|
new Hotkey('S', (event: KeyboardEvent): boolean => {
|
|
|
|
this.subscribeButton.subscribed ?
|
|
|
|
this.subscribeButton.unsubscribe() :
|
|
|
|
this.subscribeButton.subscribe()
|
|
|
|
return false
|
2020-08-12 08:40:04 +00:00
|
|
|
}, undefined, $localize`Subscribe to the account`)
|
2018-09-02 18:54:23 +00:00
|
|
|
]
|
|
|
|
if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
|
2020-02-05 19:54:37 +00:00
|
|
|
|
|
|
|
this.links = [
|
2020-08-12 08:40:04 +00:00
|
|
|
{ label: $localize`VIDEOS`, routerLink: 'videos' },
|
2021-03-25 12:42:55 +00:00
|
|
|
{ label: $localize`VIDEO PLAYLISTS`, routerLink: 'video-playlists' }
|
2020-02-05 19:54:37 +00:00
|
|
|
]
|
2018-06-07 09:19:26 +00:00
|
|
|
}
|
2018-04-25 14:56:13 +00:00
|
|
|
|
2018-06-07 09:19:26 +00:00
|
|
|
ngOnDestroy () {
|
|
|
|
if (this.routeSub) this.routeSub.unsubscribe()
|
2018-09-02 18:54:23 +00:00
|
|
|
|
|
|
|
// Unbind hotkeys
|
|
|
|
if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
|
2018-04-25 14:56:13 +00:00
|
|
|
}
|
2018-08-30 12:58:00 +00:00
|
|
|
|
2021-03-25 12:42:55 +00:00
|
|
|
isInSmallView () {
|
2020-03-09 09:22:11 +00:00
|
|
|
return this.screenService.isInSmallView()
|
|
|
|
}
|
|
|
|
|
2018-08-30 12:58:00 +00:00
|
|
|
isUserLoggedIn () {
|
|
|
|
return this.authService.isLoggedIn()
|
|
|
|
}
|
2019-12-16 21:13:07 +00:00
|
|
|
|
2021-03-25 12:42:55 +00:00
|
|
|
isManageable () {
|
2020-01-21 08:35:23 +00:00
|
|
|
if (!this.isUserLoggedIn()) return false
|
2021-03-25 12:42:55 +00:00
|
|
|
|
2021-03-26 12:20:37 +00:00
|
|
|
return this.videoChannel?.ownerAccount.userId === this.authService.getUser().id
|
2020-01-21 08:35:23 +00:00
|
|
|
}
|
|
|
|
|
2019-12-16 21:13:07 +00:00
|
|
|
activateCopiedMessage () {
|
2020-08-12 08:40:04 +00:00
|
|
|
this.notifier.success($localize`Username copied`)
|
2019-12-16 21:13:07 +00:00
|
|
|
}
|
2021-03-25 12:42:55 +00:00
|
|
|
|
2021-03-31 06:59:52 +00:00
|
|
|
hasShowMoreDescription () {
|
|
|
|
return !this.channelDescriptionExpanded && this.channelDescriptionHTML.length > 100
|
|
|
|
}
|
|
|
|
|
2021-03-29 13:56:01 +00:00
|
|
|
showSupportModal () {
|
|
|
|
this.supportModal.show()
|
|
|
|
}
|
|
|
|
|
2021-03-31 06:59:52 +00:00
|
|
|
getAccountUrl () {
|
|
|
|
return [ '/accounts', this.videoChannel.ownerBy ]
|
|
|
|
}
|
|
|
|
|
2021-03-25 12:42:55 +00:00
|
|
|
private loadChannelVideosCount () {
|
|
|
|
this.videoService.getVideoChannelVideos({
|
|
|
|
videoChannel: this.videoChannel,
|
|
|
|
videoPagination: {
|
|
|
|
currentPage: 1,
|
|
|
|
itemsPerPage: 0
|
|
|
|
},
|
|
|
|
sort: '-publishedAt'
|
|
|
|
}).subscribe(res => this.channelVideosCount = res.total)
|
|
|
|
}
|
2018-04-25 14:56:13 +00:00
|
|
|
}
|