client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts

   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'
  13
  14 @Component({
  15   selector: 'my-account-video-channels',
  16   templateUrl: './my-account-video-channels.component.html',
  17   styleUrls: [ './my-account-video-channels.component.scss' ]
  18 })
  19 export class MyAccountVideoChannelsComponent implements OnInit {
  20   videoChannels: VideoChannel[] = []
  21   videoChannelsChartData: ChartData[]
  22   videoChannelsMinimumDailyViews = 0
  23   videoChannelsMaximumDailyViews: number
  24
  25   private user: User
  26
  27   constructor (
  28     private authService: AuthService,
  29     private notifier: Notifier,
  30     private confirmService: ConfirmService,
  31     private videoChannelService: VideoChannelService,
  32     private screenService: ScreenService,
  33     private i18n: I18n
  34   ) {}
  35
  36   ngOnInit () {
  37     this.user = this.authService.getUser()
  38
  39     this.loadVideoChannels()
  40   }
  41
  42   get isInSmallView () {
  43     return this.screenService.isInSmallView()
  44   }
  45
  46   get chartOptions () {
  47     return {
  48       legend: {
  49         display: false
  50       },
  51       scales: {
  52         xAxes: [{
  53           display: false
  54         }],
  55         yAxes: [{
  56           display: false,
  57           ticks: {
  58             min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
  59             max: this.videoChannelsMaximumDailyViews
  60           }
  61         }]
  62       },
  63       layout: {
  64         padding: {
  65           left: 15,
  66           right: 15,
  67           top: 10,
  68           bottom: 0
  69         }
  70       },
  71       elements: {
  72         point: {
  73           radius: 0
  74         }
  75       },
  76       tooltips: {
  77         mode: 'index',
  78         intersect: false,
  79         custom: function (tooltip: any) {
  80           if (!tooltip) return
  81           // disable displaying the color box
  82           tooltip.displayColors = false
  83         },
  84         callbacks: {
  85           label: (tooltip: any, data: any) => `${tooltip.value} views`
  86         }
  87       },
  88       hover: {
  89         mode: 'index',
  90         intersect: false
  91       }
  92     }
  93   }
  94
  95   async deleteVideoChannel (videoChannel: VideoChannel) {
  96     const res = await this.confirmService.confirmWithInput(
  97       this.i18n(
  98         // tslint:disable
  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 }
 101       ),
 102       this.i18n(
 103         'Please type the display name of the video channel ({{displayName}}) to confirm',
 104         { displayName: videoChannel.displayName }
 105       ),
 106       videoChannel.displayName,
 107       this.i18n('Delete')
 108     )
 109     if (res === false) return
 110
 111     this.videoChannelService.removeVideoChannel(videoChannel)
 112       .subscribe(
 113         () => {
 114           this.loadVideoChannels()
 115           this.notifier.success(
 116             this.i18n('Video channel {{videoChannelName}} deleted.', { videoChannelName: videoChannel.displayName })
 117           )
 118         },
 119
 120         error => this.notifier.error(error.message)
 121       )
 122   }
 123
 124   private loadVideoChannels () {
 125     this.authService.userInformationLoaded
 126         .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true)))
 127         .subscribe(res => {
 128           this.videoChannels = res.data
 129
 130           // chart data
 131           this.videoChannelsChartData = this.videoChannels.map(v => ({
 132             labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
 133             datasets: [
 134               {
 135                   label: this.i18n('Views for the day'),
 136                   data: v.viewsPerDay.map(day => day.views),
 137                   fill: false,
 138                   borderColor: "#c6c6c6"
 139               }
 140             ]
 141           } as ChartData))
 142
 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
 147               v.viewsPerDay,
 148               day => day.views
 149             ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
 150           )
 151           this.videoChannelsMaximumDailyViews = max(
 152             this.videoChannels.map(v => maxBy( // compute local maximum daily views for each channel, by their "views" attribute
 153               v.viewsPerDay,
 154               day => day.views
 155             ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
 156           )
 157         })
 158   }
 159 }