1 <div class=
"form-row"> <!-- profile grid -->
2 <div class=
"form-group col-12 col-lg-4 col-xl-3">
3 <div i18n
class=
"account-title">PROFILE
</div>
6 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
7 <my-actor-avatar-info [actor]=
"user.account" (avatarChange)=
"onAvatarChange($event)"></my-actor-avatar-info>
9 <div class=
"user-quota mb-3">
11 <div class=
"progress" i18n-title
title=
"Total video quota">
12 <div class=
"progress-bar" role=
"progressbar" [style]=
"{ width: userVideoQuotaPercentage + '%' }" [attr.aria-valuenow]=
"userVideoQuotaUsed" aria-valuemin=
"0" [attr.aria-valuemax]=
"userVideoQuota">{{ userVideoQuotaUsed | bytes:
0 }}
</div>
13 <span class=
"ml-auto mr-2">{{ userVideoQuota }}
</span>
17 <div *
ngIf=
"hasDailyQuota()" class=
"mt-3">
18 <div class=
"progress" i18n-title
title=
"Daily video quota">
19 <div class=
"progress-bar secondary" role=
"progressbar" [style]=
"{ width: userVideoQuotaDailyPercentage + '%' }" [attr.aria-valuenow]=
"userVideoQuotaUsedDaily" aria-valuemin=
"0" [attr.aria-valuemax]=
"userVideoQuotaDaily">{{ userVideoQuotaUsedDaily | bytes:
0 }}
</div>
20 <span class=
"ml-auto mr-2">{{ userVideoQuotaDaily }}
</span>
25 <my-account-profile [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-account-profile>
29 <div class=
"form-row mt-5"> <!-- video settings grid -->
30 <div class=
"form-group col-12 col-lg-4 col-xl-3">
31 <div class=
"anchor" id=
"video-settings"></div> <!-- video settings anchor -->
32 <div i18n
class=
"account-title">VIDEO SETTINGS
</div>
35 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
36 <my-account-video-settings [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-account-video-settings>
40 <div class=
"form-row mt-5"> <!-- notifications grid -->
41 <div class=
"form-group col-12 col-lg-4 col-xl-3">
42 <div class=
"anchor" id=
"notifications"></div> <!-- notifications anchor -->
43 <div i18n
class=
"account-title">NOTIFICATIONS
</div>
46 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
47 <my-account-notification-preferences [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-account-notification-preferences>
51 <div class=
"form-row mt-5"> <!-- interface grid -->
52 <div class=
"form-group col-12 col-lg-4 col-xl-3">
53 <div i18n
class=
"account-title">INTERFACE
</div>
56 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
57 <my-account-interface-settings [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-account-interface-settings>
61 <div class=
"form-row mt-5"> <!-- password grid -->
62 <div class=
"form-group col-12 col-lg-4 col-xl-3">
63 <div i18n
class=
"account-title">PASSWORD
</div>
66 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
67 <my-account-change-password></my-account-change-password>
71 <div class=
"form-row mt-5"> <!-- email grid -->
72 <div class=
"form-group col-12 col-lg-4 col-xl-3">
73 <div i18n
class=
"account-title">EMAIL
</div>
76 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
77 <my-account-change-email></my-account-change-email>
81 <div class=
"form-row mt-5"> <!-- danger zone grid -->
82 <div class=
"form-group col-12 col-lg-4 col-xl-3">
83 <div i18n
class=
"account-title">DANGER ZONE
</div>
86 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
87 <my-account-danger-zone [user]=
"user"></my-account-danger-zone>