diff options
author | Chocobozzz <me@florianbigard.com> | 2020-06-23 14:10:17 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-06-23 16:00:49 +0200 |
commit | 67ed6552b831df66713bac9e672738796128d33f (patch) | |
tree | 59c97d41e0b49d75a90aa3de987968ab9b1ff447 /client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts | |
parent | 0c4bacbff53bc732f5a2677d62a6ead7752e2405 (diff) | |
download | PeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.gz PeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.zst PeerTube-67ed6552b831df66713bac9e672738796128d33f.zip |
Reorganize client shared modules
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 | 154 |
1 files changed, 154 insertions, 0 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 new file mode 100644 index 000000000..70510d7c9 --- /dev/null +++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts | |||
@@ -0,0 +1,154 @@ | |||
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 | } | ||