diff options
Diffstat (limited to 'client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts')
-rw-r--r-- | client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts | 159 |
1 files changed, 0 insertions, 159 deletions
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts deleted file mode 100644 index 9caefe5b1..000000000 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts +++ /dev/null | |||
@@ -1,159 +0,0 @@ | |||
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: Math.max(1, 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 {{videosCount}} videos uploaded in this channel, and you will not be able to create another channel with the same name ({{channelName}})!', | ||
100 | { channelDisplayName: videoChannel.displayName, videosCount: videoChannel.videosCount, 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 | } | ||