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: function (tooltip: any, data: any) {
  85             return `${tooltip.value} views`;
  86           }
  87         }
  88       },
  89       hover: {
  90         mode: 'index',
  91         intersect: false
  92       }
  93     }
  94   }
  95
  96   async deleteVideoChannel (videoChannel: VideoChannel) {
  97     const res = await this.confirmService.confirmWithInput(
  98       this.i18n(
  99         // tslint:disable
 100         '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}})!',
 101         { channelDisplayName: videoChannel.displayName, channelName: videoChannel.name }
 102       ),
 103       this.i18n(
 104         'Please type the display name of the video channel ({{displayName}}) to confirm',
 105         { displayName: videoChannel.displayName }
 106       ),
 107       videoChannel.displayName,
 108       this.i18n('Delete')
 109     )
 110     if (res === false) return
 111
 112     this.videoChannelService.removeVideoChannel(videoChannel)
 113       .subscribe(
 114         () => {
 115           this.loadVideoChannels()
 116           this.notifier.success(
 117             this.i18n('Video channel {{videoChannelName}} deleted.', { videoChannelName: videoChannel.displayName })
 118           )
 119         },
 120
 121         error => this.notifier.error(error.message)
 122       )
 123   }
 124
 125   private loadVideoChannels () {
 126     this.authService.userInformationLoaded
 127         .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account)))
 128         .subscribe(res => {
 129           this.videoChannels = res.data
 130           this.videoChannelsData = this.videoChannels.map(v => ({
 131             labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
 132             datasets: [
 133               {
 134                   label: this.i18n('Views for the day'),
 135                   data: v.viewsPerDay.map(day => day.views),
 136                   fill: false,
 137                   borderColor: "#c6c6c6"
 138               }
 139             ]
 140           }))
 141           this.videoChannelsMinimumDailyViews = minBy(this.videoChannels.map(v => minBy(v.viewsPerDay, day => day.views)), day => day.views).views
 142           this.videoChannelsMaximumDailyViews = maxBy(this.videoChannels.map(v => maxBy(v.viewsPerDay, day => day.views)), day => day.views).views
 143         })
 144   }
 145 }