1 import { ChartData, ChartOptions, TooltipItem, TooltipModel } from 'chart.js'
2 import { max, maxBy, min, minBy } from 'lodash-es'
3 import { mergeMap } from 'rxjs/operators'
4 import { Component } from '@angular/core'
5 import { AuthService, ConfirmService, Notifier, ScreenService } from '@app/core'
6 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
9 templateUrl: './my-video-channels.component.html',
10 styleUrls: [ './my-video-channels.component.scss' ]
12 export class MyVideoChannelsComponent {
15 videoChannels: VideoChannel[] = []
17 videoChannelsChartData: ChartData[]
18 videoChannelsMinimumDailyViews = 0
19 videoChannelsMaximumDailyViews: number
21 chartOptions: ChartOptions
26 private authService: AuthService,
27 private notifier: Notifier,
28 private confirmService: ConfirmService,
29 private videoChannelService: VideoChannelService,
30 private screenService: ScreenService
33 get isInSmallView () {
34 return this.screenService.isInSmallView()
37 onSearch (search: string) {
39 this.loadVideoChannels()
42 async deleteVideoChannel (videoChannel: VideoChannel) {
43 const res = await this.confirmService.confirmWithInput(
44 $localize`Do you really want to delete ${videoChannel.displayName}?
45 It will delete ${videoChannel.videosCount} videos uploaded in this channel, and you will not be able to create another
46 channel with the same name (${videoChannel.name})!`,
48 $localize`Please type the name of the video channel (${videoChannel.name}) to confirm`,
54 if (res === false) return
56 this.videoChannelService.removeVideoChannel(videoChannel)
59 this.loadVideoChannels()
60 this.notifier.success($localize`Video channel ${videoChannel.displayName} deleted.`)
63 error: err => this.notifier.error(err.message)
67 private loadVideoChannels () {
68 this.authService.userInformationLoaded
69 .pipe(mergeMap(() => {
70 const user = this.authService.getUser()
72 account: user.account,
78 return this.videoChannelService.listAccountVideoChannels(options)
79 })).subscribe(res => {
80 this.videoChannels = res.data
81 this.totalItems = res.total
84 this.videoChannelsChartData = this.videoChannels.map(v => ({
85 labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
88 label: $localize`Views for the day`,
89 data: v.viewsPerDay.map(day => day.views),
91 borderColor: '#c6c6c6'
96 // chart options that depend on chart data:
97 // we don't want to skew values and have min at 0, so we define what the floor/ceiling is here
98 this.videoChannelsMinimumDailyViews = min(
99 // compute local minimum daily views for each channel, by their "views" attribute
100 this.videoChannels.map(v => minBy(
103 ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
106 this.videoChannelsMaximumDailyViews = max(
107 // compute local maximum daily views for each channel, by their "views" attribute
108 this.videoChannels.map(v => maxBy(
111 ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
114 this.buildChartOptions()
118 private buildChartOptions () {
119 this.chartOptions = {
127 external: function ({ tooltip }: { tooltip: TooltipModel<any> }) {
130 // disable displaying the color box
131 tooltip.options.displayColors = false
134 label: (tooltip: TooltipItem<any>) => `${tooltip.formattedValue} views`
144 min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
145 max: Math.max(1, this.videoChannelsMaximumDailyViews)