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

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