1 import { ChartData } from 'chart.js'
2 import { max, maxBy, min, minBy } from 'lodash-es'
3 import { flatMap } from 'rxjs/operators'
4 import { Component, OnInit } from '@angular/core'
5 import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core'
6 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
7 import { I18n } from '@ngx-translate/i18n-polyfill'
10 selector: 'my-account-video-channels',
11 templateUrl: './my-account-video-channels.component.html',
12 styleUrls: [ './my-account-video-channels.component.scss' ]
14 export class MyAccountVideoChannelsComponent implements OnInit {
15 videoChannels: VideoChannel[] = []
16 videoChannelsChartData: ChartData[]
17 videoChannelsMinimumDailyViews = 0
18 videoChannelsMaximumDailyViews: number
23 private authService: AuthService,
24 private notifier: Notifier,
25 private confirmService: ConfirmService,
26 private videoChannelService: VideoChannelService,
27 private screenService: ScreenService,
32 this.user = this.authService.getUser()
34 this.loadVideoChannels()
37 get isInSmallView () {
38 return this.screenService.isInSmallView()
53 min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
54 max: Math.max(1, this.videoChannelsMaximumDailyViews)
74 custom: function (tooltip: any) {
76 // disable displaying the color box
77 tooltip.displayColors = false
80 label: (tooltip: any, data: any) => `${tooltip.value} views`
90 async deleteVideoChannel (videoChannel: VideoChannel) {
91 const res = await this.confirmService.confirmWithInput(
94 'Do you really want to delete {{channelDisplayName}}? It will delete {{videosCount}} videos uploaded in this channel, and you will not be able to create another channel with the same name ({{channelName}})!',
95 { channelDisplayName: videoChannel.displayName, videosCount: videoChannel.videosCount, channelName: videoChannel.name }
98 'Please type the display name of the video channel ({{displayName}}) to confirm',
99 { displayName: videoChannel.displayName }
101 videoChannel.displayName,
104 if (res === false) return
106 this.videoChannelService.removeVideoChannel(videoChannel)
109 this.loadVideoChannels()
110 this.notifier.success(
111 this.i18n('Video channel {{videoChannelName}} deleted.', { videoChannelName: videoChannel.displayName })
115 error => this.notifier.error(error.message)
119 private loadVideoChannels () {
120 this.authService.userInformationLoaded
121 .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true)))
123 this.videoChannels = res.data
126 this.videoChannelsChartData = this.videoChannels.map(v => ({
127 labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
130 label: this.i18n('Views for the day'),
131 data: v.viewsPerDay.map(day => day.views),
133 borderColor: "#c6c6c6"
138 // chart options that depend on chart data:
139 // we don't want to skew values and have min at 0, so we define what the floor/ceiling is here
140 this.videoChannelsMinimumDailyViews = min(
141 this.videoChannels.map(v => minBy( // compute local minimum daily views for each channel, by their "views" attribute
144 ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
146 this.videoChannelsMaximumDailyViews = max(
147 this.videoChannels.map(v => maxBy( // compute local maximum daily views for each channel, by their "views" attribute
150 ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute