1 <h1 class=
"sr-only" i18n
>Settings
</h1>
2 <div class=
"form-row"> <!-- preview -->
3 <div class=
"form-group col-12 col-lg-4 col-xl-3"></div>
5 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
6 <my-actor-avatar-info [actor]=
"user.account" (avatarChange)=
"onAvatarChange($event)"></my-actor-avatar-info>
10 <div class=
"form-row"> <!-- profile settings grid -->
11 <div class=
"form-group col-12 col-lg-4 col-xl-3">
12 <h2 i18n
class=
"account-title">PROFILE SETTINGS
</h2>
15 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
17 <div class=
"user-quota mb-3">
19 <div class=
"progress" i18n-title
title=
"Total video quota">
20 <div class=
"progress-bar" role=
"progressbar" [style]=
"{ width: userVideoQuotaPercentage + '%' }" [attr.aria-valuenow]=
"userVideoQuotaUsed" aria-valuemin=
"0" [attr.aria-valuemax]=
"user.videoQuota">{{ userVideoQuotaUsed | bytes:
0 }}
</div>
21 <span class=
"ml-auto mr-2">{{ userVideoQuota }}
</span>
25 <div *
ngIf=
"hasDailyQuota()" class=
"mt-3">
26 <div class=
"progress" i18n-title
title=
"Daily video quota">
27 <div class=
"progress-bar secondary" role=
"progressbar" [style]=
"{ width: userVideoQuotaDailyPercentage + '%' }" [attr.aria-valuenow]=
"userVideoQuotaUsedDaily" aria-valuemin=
"0" [attr.aria-valuemax]=
"user.videoQuotaDaily">{{ userVideoQuotaUsedDaily | bytes:
0 }}
</div>
28 <span class=
"ml-auto mr-2">{{ userVideoQuotaDaily }}
</span>
33 <my-account-profile [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-account-profile>
37 <div class=
"form-row mt-5"> <!-- video settings grid -->
38 <div class=
"form-group col-12 col-lg-4 col-xl-3">
39 <div class=
"anchor" id=
"video-settings"></div> <!-- video settings anchor -->
40 <h2 i18n
class=
"account-title">VIDEO SETTINGS
</h2>
43 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
44 <my-user-video-settings [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-user-video-settings>
48 <div class=
"form-row mt-5"> <!-- notifications grid -->
49 <div class=
"form-group col-12 col-lg-4 col-xl-3">
50 <div class=
"anchor" id=
"notifications"></div> <!-- notifications anchor -->
51 <h2 i18n
class=
"account-title">NOTIFICATIONS
</h2>
54 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
55 <my-account-notification-preferences [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-account-notification-preferences>
59 <div class=
"form-row mt-5"> <!-- interface grid -->
60 <div class=
"form-group col-12 col-lg-4 col-xl-3">
61 <h2 i18n
class=
"account-title">INTERFACE
</h2>
64 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
65 <my-user-interface-settings [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-user-interface-settings>
69 <div class=
"form-row mt-5" *
ngIf=
"user.pluginAuth === null"> <!-- password grid -->
70 <div class=
"form-group col-12 col-lg-4 col-xl-3">
71 <h2 i18n
class=
"account-title">PASSWORD
</h2>
74 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
75 <my-account-change-password></my-account-change-password>
79 <div class=
"form-row mt-5"> <!-- email grid -->
80 <div class=
"form-group col-12 col-lg-4 col-xl-3">
81 <h2 i18n
class=
"account-title">EMAIL
</h2>
84 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
85 <my-account-change-email></my-account-change-email>
89 <div class=
"form-row mt-5"> <!-- danger zone grid -->
90 <div class=
"form-group col-12 col-lg-4 col-xl-3">
91 <h2 i18n
class=
"account-title">DANGER ZONE
</h2>
94 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
95 <my-account-danger-zone [user]=
"user"></my-account-danger-zone>