Import {{ videoName }}
Upload {{ videoName }}
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index b9fef9fce87..f9977bda00b 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -7,7 +7,7 @@ $border-color: #EAEAEA;
$nav-link-height: 40px;
.margin-content {
- padding-top: 50px;
+ padding-top: 20px;
}
.alert {
@@ -16,7 +16,7 @@ $nav-link-height: 40px;
::ng-deep .video-add-nav {
border-bottom: $border-width $border-type $border-color;
- margin: 50px 0 0 0 !important;
+ margin: 20px 0 0 0 !important;
&.hide-nav {
display: none !important;
@@ -64,7 +64,7 @@ $nav-link-height: 40px;
padding-bottom: 20px;
display: flex;
justify-content: center;
- align-items: center;
+ padding-top: 20px;
&.dragover {
border: 3px dashed pvar(--mainColor);
diff --git a/client/src/app/+videos/+video-edit/video-add.component.ts b/client/src/app/+videos/+video-edit/video-add.component.ts
index 5bd76880920..016791d59dc 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add.component.ts
@@ -1,5 +1,5 @@
import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
-import { AuthService, CanComponentDeactivate, ServerService } from '@app/core'
+import { AuthService, CanComponentDeactivate, ServerService, User } from '@app/core'
import { ServerConfig } from '@shared/models'
import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
import { VideoImportUrlComponent } from './video-add-components/video-import-url.component'
@@ -15,6 +15,8 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
@ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
@ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
+ user: User = null
+
secondStepType: 'upload' | 'import-url' | 'import-torrent'
videoName: string
serverConfig: ServerConfig
@@ -24,7 +26,13 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
private serverService: ServerService
) {}
+ get userInformationLoaded () {
+ return this.auth.userInformationLoaded
+ }
+
ngOnInit () {
+ this.user = this.auth.getUser()
+
this.serverConfig = this.serverService.getTmpConfig()
this.serverService.getConfig()
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 732914e3498..22a207e5100 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -26,7 +26,7 @@ import { DateToggleComponent } from './date'
import { FeedComponent } from './feeds'
import { LoaderComponent, SmallLoaderComponent } from './loaders'
import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent } from './misc'
-import { UserHistoryService, UserNotificationsComponent, UserNotificationService } from './users'
+import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
import { VideoCaptionService } from './video-caption'
import { VideoChannelService } from './video-channel'
@@ -83,6 +83,7 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
ListOverflowComponent,
TopMenuDropdownComponent,
+ UserQuotaComponent,
UserNotificationsComponent
],
@@ -132,6 +133,7 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
ListOverflowComponent,
TopMenuDropdownComponent,
+ UserQuotaComponent,
UserNotificationsComponent
],
diff --git a/client/src/app/shared/shared-main/users/index.ts b/client/src/app/shared/shared-main/users/index.ts
index 83401ab5287..130082af696 100644
--- a/client/src/app/shared/shared-main/users/index.ts
+++ b/client/src/app/shared/shared-main/users/index.ts
@@ -2,3 +2,4 @@ export * from './user-history.service'
export * from './user-notification.model'
export * from './user-notification.service'
export * from './user-notifications.component'
+export * from './user-quota.component'
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html
new file mode 100644
index 00000000000..f9fb32133b2
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-quota.component.html
@@ -0,0 +1,21 @@
+
+
+
Total video quota
+
+
+ {{ userVideoQuotaUsed | bytes: 0 }}
+
{{ userVideoQuota }}
+
+
+
+
+
Daily video quota
+
+
+ {{ userVideoQuotaUsedDaily | bytes: 0 }}
+
{{ userVideoQuotaDaily }}
+
+
+
\ No newline at end of file
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
new file mode 100644
index 00000000000..904add0f451
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -0,0 +1,31 @@
+@import '_variables';
+@import '_mixins';
+
+.user-quota {
+ font-size: 15px;
+ margin-top: 20px;
+
+ label {
+ margin-right: 5px;
+ }
+
+ &, .progress {
+ width: 100% !important;
+ }
+
+ .user-quota-title, .progress {
+ @include disable-outline;
+ @include button-focus(pvar(--mainColorLightest));
+ }
+
+ .progress {
+ @include progressbar;
+
+ height: 2rem;
+
+ span {
+ align-self: center;
+ }
+ }
+}
+
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 00000000000..a8f56e4d6ea
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-quota.component.ts
@@ -0,0 +1,68 @@
+import { Subject } from 'rxjs'
+import { BytesPipe } from 'ngx-pipes'
+import { Component, Input, OnInit } from '@angular/core'
+import { User, UserService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+ selector: 'my-user-quota',
+ templateUrl: './user-quota.component.html',
+ styleUrls: ['./user-quota.component.scss']
+})
+
+export class UserQuotaComponent implements OnInit {
+ @Input() user: User = null
+ @Input() userInformationLoaded: Subject
+
+ userVideoQuota = '0'
+ userVideoQuotaUsed = 0
+ userVideoQuotaPercentage = 15
+
+ userVideoQuotaDaily = '0'
+ userVideoQuotaUsedDaily = 0
+ userVideoQuotaDailyPercentage = 15
+
+ constructor (
+ private userService: UserService,
+ private i18n: I18n
+ ) { }
+
+ ngOnInit () {
+ this.userInformationLoaded.subscribe(
+ () => {
+ if (this.user.videoQuota !== -1) {
+ this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()
+ } else {
+ this.userVideoQuota = this.i18n('Unlimited')
+ }
+
+ if (this.user.videoQuotaDaily !== -1) {
+ this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString()
+ } else {
+ this.userVideoQuotaDaily = this.i18n('Unlimited')
+ }
+ }
+ )
+
+ this.userService.getMyVideoQuotaUsed()
+ .subscribe(data => {
+ this.userVideoQuotaUsed = data.videoQuotaUsed
+ this.userVideoQuotaPercentage = this.userVideoQuotaUsed * 100 / this.user.videoQuota
+
+ this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
+ this.userVideoQuotaDailyPercentage = this.userVideoQuotaUsedDaily * 100 / this.user.videoQuotaDaily
+ })
+ }
+
+ hasDailyQuota () {
+ return this.user.videoQuotaDaily !== -1
+ }
+
+ titleVideoQuota () {
+ return `${new BytesPipe().transform(this.userVideoQuotaUsed, 0).toString()} / ${this.userVideoQuota}`
+ }
+
+ titleVideoQuotaDaily () {
+ return `${new BytesPipe().transform(this.userVideoQuotaUsedDaily, 0).toString()} / ${this.userVideoQuotaDaily}`
+ }
+}