diff options
Diffstat (limited to 'client/src/app/+my-library')
5 files changed, 61 insertions, 54 deletions
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html index 205d23cd5..b704a1cc6 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html | |||
@@ -42,7 +42,7 @@ | |||
42 | </div> | 42 | </div> |
43 | 43 | ||
44 | <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end"> | 44 | <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end"> |
45 | <p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart> | 45 | <p-chart *ngIf="chartOptions && videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart> |
46 | </div> | 46 | </div> |
47 | </div> | 47 | </div> |
48 | </div> | 48 | </div> |
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts index a63e98a51..f6ba50a48 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts | |||
@@ -21,6 +21,8 @@ export class MyVideoChannelsComponent implements OnInit { | |||
21 | channelsSearch: string | 21 | channelsSearch: string |
22 | channelsSearchChanged = new Subject<string>() | 22 | channelsSearchChanged = new Subject<string>() |
23 | 23 | ||
24 | chartOptions: any | ||
25 | |||
24 | private user: User | 26 | private user: User |
25 | 27 | ||
26 | constructor ( | 28 | constructor ( |
@@ -47,55 +49,6 @@ export class MyVideoChannelsComponent implements OnInit { | |||
47 | return this.screenService.isInSmallView() | 49 | return this.screenService.isInSmallView() |
48 | } | 50 | } |
49 | 51 | ||
50 | get chartOptions () { | ||
51 | return { | ||
52 | legend: { | ||
53 | display: false | ||
54 | }, | ||
55 | scales: { | ||
56 | xAxes: [{ | ||
57 | display: false | ||
58 | }], | ||
59 | yAxes: [{ | ||
60 | display: false, | ||
61 | ticks: { | ||
62 | min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)), | ||
63 | max: Math.max(1, this.videoChannelsMaximumDailyViews) | ||
64 | } | ||
65 | }] | ||
66 | }, | ||
67 | layout: { | ||
68 | padding: { | ||
69 | left: 15, | ||
70 | right: 15, | ||
71 | top: 10, | ||
72 | bottom: 0 | ||
73 | } | ||
74 | }, | ||
75 | elements: { | ||
76 | point: { | ||
77 | radius: 0 | ||
78 | } | ||
79 | }, | ||
80 | tooltips: { | ||
81 | mode: 'index', | ||
82 | intersect: false, | ||
83 | custom: function (tooltip: any) { | ||
84 | if (!tooltip) return | ||
85 | // disable displaying the color box | ||
86 | tooltip.displayColors = false | ||
87 | }, | ||
88 | callbacks: { | ||
89 | label: (tooltip: any, data: any) => `${tooltip.value} views` | ||
90 | } | ||
91 | }, | ||
92 | hover: { | ||
93 | mode: 'index', | ||
94 | intersect: false | ||
95 | } | ||
96 | } | ||
97 | } | ||
98 | |||
99 | resetSearch () { | 52 | resetSearch () { |
100 | this.channelsSearch = '' | 53 | this.channelsSearch = '' |
101 | this.onChannelsSearchChanged() | 54 | this.onChannelsSearchChanged() |
@@ -159,6 +112,7 @@ channel with the same name (${videoChannel.name})!`, | |||
159 | day => day.views | 112 | day => day.views |
160 | ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute | 113 | ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute |
161 | ) | 114 | ) |
115 | |||
162 | this.videoChannelsMaximumDailyViews = max( | 116 | this.videoChannelsMaximumDailyViews = max( |
163 | // compute local maximum daily views for each channel, by their "views" attribute | 117 | // compute local maximum daily views for each channel, by their "views" attribute |
164 | this.videoChannels.map(v => maxBy( | 118 | this.videoChannels.map(v => maxBy( |
@@ -166,6 +120,57 @@ channel with the same name (${videoChannel.name})!`, | |||
166 | day => day.views | 120 | day => day.views |
167 | ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute | 121 | ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute |
168 | ) | 122 | ) |
123 | |||
124 | this.buildChartOptions() | ||
169 | }) | 125 | }) |
170 | } | 126 | } |
127 | |||
128 | private buildChartOptions () { | ||
129 | this.chartOptions = { | ||
130 | legend: { | ||
131 | display: false | ||
132 | }, | ||
133 | scales: { | ||
134 | xAxes: [{ | ||
135 | display: false | ||
136 | }], | ||
137 | yAxes: [{ | ||
138 | display: false, | ||
139 | ticks: { | ||
140 | min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)), | ||
141 | max: Math.max(1, this.videoChannelsMaximumDailyViews) | ||
142 | } | ||
143 | }] | ||
144 | }, | ||
145 | layout: { | ||
146 | padding: { | ||
147 | left: 15, | ||
148 | right: 15, | ||
149 | top: 10, | ||
150 | bottom: 0 | ||
151 | } | ||
152 | }, | ||
153 | elements: { | ||
154 | point: { | ||
155 | radius: 0 | ||
156 | } | ||
157 | }, | ||
158 | tooltips: { | ||
159 | mode: 'index', | ||
160 | intersect: false, | ||
161 | custom: function (tooltip: any) { | ||
162 | if (!tooltip) return | ||
163 | // disable displaying the color box | ||
164 | tooltip.displayColors = false | ||
165 | }, | ||
166 | callbacks: { | ||
167 | label: (tooltip: any, data: any) => `${tooltip.value} views` | ||
168 | } | ||
169 | }, | ||
170 | hover: { | ||
171 | mode: 'index', | ||
172 | intersect: false | ||
173 | } | ||
174 | } | ||
175 | } | ||
171 | } | 176 | } |
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html index cff46a41d..05e016e55 100644 --- a/client/src/app/+my-library/my-history/my-history.component.html +++ b/client/src/app/+my-library/my-history/my-history.component.html | |||
@@ -5,7 +5,7 @@ | |||
5 | 5 | ||
6 | <div class="top-buttons"> | 6 | <div class="top-buttons"> |
7 | <div class="history-switch"> | 7 | <div class="history-switch"> |
8 | <p-inputSwitch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></p-inputSwitch> | 8 | <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch> |
9 | <label i18n>Video history</label> | 9 | <label i18n>Video history</label> |
10 | </div> | 10 | </div> |
11 | 11 | ||
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts index e11f05c47..4ba95124d 100644 --- a/client/src/app/+my-library/my-history/my-history.component.ts +++ b/client/src/app/+my-library/my-history/my-history.component.ts | |||
@@ -47,7 +47,11 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD | |||
47 | ngOnInit () { | 47 | ngOnInit () { |
48 | super.ngOnInit() | 48 | super.ngOnInit() |
49 | 49 | ||
50 | this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled | 50 | this.authService.userInformationLoaded |
51 | .subscribe(() => { | ||
52 | this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled | ||
53 | }) | ||
54 | |||
51 | } | 55 | } |
52 | 56 | ||
53 | ngOnDestroy () { | 57 | ngOnDestroy () { |
diff --git a/client/src/app/+my-library/my-library.module.ts b/client/src/app/+my-library/my-library.module.ts index bf791952c..5518cfd98 100644 --- a/client/src/app/+my-library/my-library.module.ts +++ b/client/src/app/+my-library/my-library.module.ts | |||
@@ -1,5 +1,4 @@ | |||
1 | import { AutoCompleteModule } from 'primeng/autocomplete' | 1 | import { AutoCompleteModule } from 'primeng/autocomplete' |
2 | import { InputSwitchModule } from 'primeng/inputswitch' | ||
3 | import { TableModule } from 'primeng/table' | 2 | import { TableModule } from 'primeng/table' |
4 | import { DragDropModule } from '@angular/cdk/drag-drop' | 3 | import { DragDropModule } from '@angular/cdk/drag-drop' |
5 | import { NgModule } from '@angular/core' | 4 | import { NgModule } from '@angular/core' |
@@ -34,7 +33,6 @@ import { MyVideosComponent } from './my-videos/my-videos.component' | |||
34 | 33 | ||
35 | AutoCompleteModule, | 34 | AutoCompleteModule, |
36 | TableModule, | 35 | TableModule, |
37 | InputSwitchModule, | ||
38 | DragDropModule, | 36 | DragDropModule, |
39 | 37 | ||
40 | SharedMainModule, | 38 | SharedMainModule, |