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