diff options
author | Kim <1877318+kimsible@users.noreply.github.com> | 2020-07-24 08:53:25 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-07-24 08:53:25 +0200 |
commit | 2e7f262724dd64a209e0bad5930ba29bb4f801c3 (patch) | |
tree | ae722bf8df3331442a5f9eaa34eb5c12db21f6cf /client/src/app/shared/shared-main/users/user-quota.component.ts | |
parent | b40a219338fed042072decea203838ca5e2b265f (diff) | |
download | PeerTube-2e7f262724dd64a209e0bad5930ba29bb4f801c3.tar.gz PeerTube-2e7f262724dd64a209e0bad5930ba29bb4f801c3.tar.zst PeerTube-2e7f262724dd64a209e0bad5930ba29bb4f801c3.zip |
Display user quota progress bars above upload form (#2981)
* Move user-quota to my-user-quota shared component
* Add user-quota to upload form
* Increase progress bar height and make it focusable
* Correct syntax parenthesis
* Add explicit title to user-quota bars + tooltip with quota values
* Hide user-quota in second upload step
* Customize focus styles on user-quota
Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/app/shared/shared-main/users/user-quota.component.ts')
-rw-r--r-- | client/src/app/shared/shared-main/users/user-quota.component.ts | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.ts b/client/src/app/shared/shared-main/users/user-quota.component.ts new file mode 100644 index 000000000..a8f56e4d6 --- /dev/null +++ b/client/src/app/shared/shared-main/users/user-quota.component.ts | |||
@@ -0,0 +1,68 @@ | |||
1 | import { Subject } from 'rxjs' | ||
2 | import { BytesPipe } from 'ngx-pipes' | ||
3 | import { Component, Input, OnInit } from '@angular/core' | ||
4 | import { User, UserService } from '@app/core' | ||
5 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-user-quota', | ||
9 | templateUrl: './user-quota.component.html', | ||
10 | styleUrls: ['./user-quota.component.scss'] | ||
11 | }) | ||
12 | |||
13 | export class UserQuotaComponent implements OnInit { | ||
14 | @Input() user: User = null | ||
15 | @Input() userInformationLoaded: Subject<any> | ||
16 | |||
17 | userVideoQuota = '0' | ||
18 | userVideoQuotaUsed = 0 | ||
19 | userVideoQuotaPercentage = 15 | ||
20 | |||
21 | userVideoQuotaDaily = '0' | ||
22 | userVideoQuotaUsedDaily = 0 | ||
23 | userVideoQuotaDailyPercentage = 15 | ||
24 | |||
25 | constructor ( | ||
26 | private userService: UserService, | ||
27 | private i18n: I18n | ||
28 | ) { } | ||
29 | |||
30 | ngOnInit () { | ||
31 | this.userInformationLoaded.subscribe( | ||
32 | () => { | ||
33 | if (this.user.videoQuota !== -1) { | ||
34 | this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString() | ||
35 | } else { | ||
36 | this.userVideoQuota = this.i18n('Unlimited') | ||
37 | } | ||
38 | |||
39 | if (this.user.videoQuotaDaily !== -1) { | ||
40 | this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString() | ||
41 | } else { | ||
42 | this.userVideoQuotaDaily = this.i18n('Unlimited') | ||
43 | } | ||
44 | } | ||
45 | ) | ||
46 | |||
47 | this.userService.getMyVideoQuotaUsed() | ||
48 | .subscribe(data => { | ||
49 | this.userVideoQuotaUsed = data.videoQuotaUsed | ||
50 | this.userVideoQuotaPercentage = this.userVideoQuotaUsed * 100 / this.user.videoQuota | ||
51 | |||
52 | this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily | ||
53 | this.userVideoQuotaDailyPercentage = this.userVideoQuotaUsedDaily * 100 / this.user.videoQuotaDaily | ||
54 | }) | ||
55 | } | ||
56 | |||
57 | hasDailyQuota () { | ||
58 | return this.user.videoQuotaDaily !== -1 | ||
59 | } | ||
60 | |||
61 | titleVideoQuota () { | ||
62 | return `${new BytesPipe().transform(this.userVideoQuotaUsed, 0).toString()} / ${this.userVideoQuota}` | ||
63 | } | ||
64 | |||
65 | titleVideoQuotaDaily () { | ||
66 | return `${new BytesPipe().transform(this.userVideoQuotaUsedDaily, 0).toString()} / ${this.userVideoQuotaDaily}` | ||
67 | } | ||
68 | } | ||