1 import { Component, OnInit } from '@angular/core'
2 import { Notifier } from '@app/core'
3 import { AuthService } from '../../core/auth'
4 import { ConfirmService } from '../../core/confirm'
5 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
6 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
7 import { ScreenService } from '@app/shared/misc/screen.service'
8 import { User } from '@app/shared'
9 import { flatMap } from 'rxjs/operators'
10 import { I18n } from '@ngx-translate/i18n-polyfill'
11 import { min, minBy, max, maxBy } from 'lodash-es'
12 import { ChartData } from 'chart.js'
15 selector: 'my-account-video-channels',
16 templateUrl: './my-account-video-channels.component.html',
17 styleUrls: [ './my-account-video-channels.component.scss' ]
19 export class MyAccountVideoChannelsComponent implements OnInit {
20 videoChannels: VideoChannel[] = []
21 videoChannelsChartData: ChartData[]
22 videoChannelsMinimumDailyViews = 0
23 videoChannelsMaximumDailyViews: number
28 private authService: AuthService,
29 private notifier: Notifier,
30 private confirmService: ConfirmService,
31 private videoChannelService: VideoChannelService,
32 private screenService: ScreenService,
37 this.user = this.authService.getUser()
39 this.loadVideoChannels()
42 get isInSmallView () {
43 return this.screenService.isInSmallView()
58 min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
59 max: this.videoChannelsMaximumDailyViews
79 custom: function (tooltip: any) {
81 // disable displaying the color box
82 tooltip.displayColors = false
85 label: (tooltip: any, data: any) => `${tooltip.value} views`
95 async deleteVideoChannel (videoChannel: VideoChannel) {
96 const res = await this.confirmService.confirmWithInput(
99 'Do you really want to delete {{channelDisplayName}}? It will delete all videos uploaded in this channel, and you will not be able to create another channel with the same name ({{channelName}})!',
100 { channelDisplayName: videoChannel.displayName, channelName: videoChannel.name }
103 'Please type the display name of the video channel ({{displayName}}) to confirm',
104 { displayName: videoChannel.displayName }
106 videoChannel.displayName,
109 if (res === false) return
111 this.videoChannelService.removeVideoChannel(videoChannel)
114 this.loadVideoChannels()
115 this.notifier.success(
116 this.i18n('Video channel {{videoChannelName}} deleted.', { videoChannelName: videoChannel.displayName })
120 error => this.notifier.error(error.message)
124 private loadVideoChannels () {
125 this.authService.userInformationLoaded
126 .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true)))
128 this.videoChannels = res.data
131 this.videoChannelsChartData = this.videoChannels.map(v => ({
132 labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
135 label: this.i18n('Views for the day'),
136 data: v.viewsPerDay.map(day => day.views),
138 borderColor: "#c6c6c6"
143 // chart options that depend on chart data:
144 // we don't want to skew values and have min at 0, so we define what the floor/ceiling is here
145 this.videoChannelsMinimumDailyViews = min(
146 this.videoChannels.map(v => minBy( // compute local minimum daily views for each channel, by their "views" attribute
149 ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
151 this.videoChannelsMaximumDailyViews = max(
152 this.videoChannels.map(v => maxBy( // compute local maximum daily views for each channel, by their "views" attribute
155 ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute