diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html index d07418831..e36e78ea4 100644 --- a/client/src/app/+admin/overview/users/user-list/user-list.component.html +++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html @@ -118,27 +118,19 @@ -
-
-
- {{ user.videoQuotaUsed }} - {{ user.videoQuota }} -
+ + -
-
-
- {{ user.videoQuotaUsedDaily }} - {{ user.videoQuotaDaily }} -
+ + diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss index 121274cf8..a56d774e1 100644 --- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss @@ -24,18 +24,7 @@ my-global-icon { width: 18px; } -.progress { - width: auto; - max-width: 100%; - - @include progressbar($small: true); -} - @media screen and (max-width: $primeng-breakpoint) { - .progress { - width: 100%; - } - .empty-cell { padding: 0; } diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.ts b/client/src/app/+admin/overview/users/user-list/user-list.component.ts index 66cdb1b30..026fcfd47 100644 --- a/client/src/app/+admin/overview/users/user-list/user-list.component.ts +++ b/client/src/app/+admin/overview/users/user-list/user-list.component.ts @@ -28,6 +28,7 @@ import { } from '../../../../shared/shared-moderation/user-moderation-dropdown.component' import { TableExpanderIconComponent } from '../../../../shared/shared-tables/table-expander-icon.component' import { UserEmailInfoComponent } from '../../../shared/user-email-info.component' +import { ProgressBarComponent } from '@app/shared/shared-main/misc/progress-bar.component' type UserForList = User & { rawVideoQuota: number @@ -65,7 +66,8 @@ type UserForList = User & { AutoColspanDirective, UserBanModalComponent, DatePipe, - BytesPipe + BytesPipe, + ProgressBarComponent ] }) export class UserListComponent extends RestTable implements OnInit { diff --git a/client/src/app/shared/shared-main/misc/progress-bar.component.html b/client/src/app/shared/shared-main/misc/progress-bar.component.html new file mode 100644 index 000000000..5f7209380 --- /dev/null +++ b/client/src/app/shared/shared-main/misc/progress-bar.component.html @@ -0,0 +1,11 @@ +
+
+ + {{ valueFormatted }} + {{ maxFormatted }} +
diff --git a/client/src/app/shared/shared-main/misc/progress-bar.component.scss b/client/src/app/shared/shared-main/misc/progress-bar.component.scss new file mode 100644 index 000000000..fbee4d56b --- /dev/null +++ b/client/src/app/shared/shared-main/misc/progress-bar.component.scss @@ -0,0 +1,69 @@ +@use '_variables' as *; +@use '_mixins' as *; + +.progress-container { + background-color: pvar(--greyBackgroundColor); + display: flex; + overflow: hidden; + height: 2rem; + font-size: 0.85rem; + font-weight: $font-semibold; + border-radius: 0.25rem; + position: relative; + + span { + position: absolute; + color: pvar(--greyForegroundColor); + line-height: 2rem; + margin: 0 12px; + } + + .value { + left: 0; + } + + .max { + right: 0; + } + + .progress-bar { + font-weight: $font-semibold; + color: pvar(--mainBackgroundColor); + background-color: pvar(--mainColor); + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + white-space: nowrap; + transition: width 0.6s ease; + } + + &.red, + &.green { + span { + color: $white; + } + } + + &.red .progress-bar { + background-color: $red; + } + + &.green .progress-bar { + background-color: $green; + } + + &.small { + height: 1rem; + font-weight: normal; + font-size: 0.75rem; + + span { + margin: 0 5px; + line-height: normal; + } + } + + @include disable-outline; + @include button-focus(pvar(--mainColorLightest)); +} diff --git a/client/src/app/shared/shared-main/misc/progress-bar.component.ts b/client/src/app/shared/shared-main/misc/progress-bar.component.ts new file mode 100644 index 000000000..652dcd9a9 --- /dev/null +++ b/client/src/app/shared/shared-main/misc/progress-bar.component.ts @@ -0,0 +1,34 @@ +import { CommonModule } from '@angular/common' +import { Component, Input, numberAttribute } from '@angular/core' +import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap' + +@Component({ + selector: 'my-progress-bar', + styleUrls: [ './progress-bar.component.scss' ], + templateUrl: './progress-bar.component.html', + standalone: true, + imports: [ + CommonModule, + NgbTooltip + ] +}) + +export class ProgressBarComponent { + @Input({ required: true, transform: numberAttribute }) value: number + @Input({ required: true }) label: string + + @Input({ required: true }) valueFormatted: string | number + + @Input() maxFormatted: string + + @Input() size: 'normal' | 'small' = 'normal' + + @Input({ transform: numberAttribute }) max = 100 + @Input({ transform: numberAttribute }) min = 0 + + @Input() theme: 'green' | 'red' | 'main' = 'main' + + percentage () { + return this.value * 100 / this.max + } +} 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 index bac2d2a14..275a65925 100644 --- a/client/src/app/shared/shared-main/users/user-quota.component.html +++ b/client/src/app/shared/shared-main/users/user-quota.component.html @@ -2,22 +2,21 @@
Total video quota
-
-
- {{ userVideoQuotaUsed | bytes: 1 }} - {{ userVideoQuota }} -
+ +
Daily video quota
-
-
- {{ userVideoQuotaUsedDaily | bytes: 1 }} - {{ userVideoQuotaDaily }} -
-
+ + 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 deleted file mode 100644 index 477e43b43..000000000 --- a/client/src/app/shared/shared-main/users/user-quota.component.scss +++ /dev/null @@ -1,24 +0,0 @@ -@use '_variables' as *; -@use '_mixins' as *; - -.user-quota { - label { - @include margin-right(5px); - } - - &, - .progress { - width: 100% !important; - } - - .progress { - @include disable-outline; - @include button-focus(pvar(--mainColorLightest)); - @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 index fbe413880..3e3ceabcf 100644 --- a/client/src/app/shared/shared-main/users/user-quota.component.ts +++ b/client/src/app/shared/shared-main/users/user-quota.component.ts @@ -1,16 +1,15 @@ import { NgIf } from '@angular/common' import { Component, OnInit } from '@angular/core' import { AuthService, UserService } from '@app/core' -import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap' import { first } from 'rxjs' import { BytesPipe } from '../angular/bytes.pipe' +import { ProgressBarComponent } from '../misc/progress-bar.component' @Component({ selector: 'my-user-quota', templateUrl: './user-quota.component.html', - styleUrls: [ './user-quota.component.scss' ], standalone: true, - imports: [ NgbTooltip, NgIf, BytesPipe ] + imports: [ NgIf, BytesPipe, ProgressBarComponent ] }) export class UserQuotaComponent implements OnInit { @@ -62,11 +61,11 @@ export class UserQuotaComponent implements OnInit { return this.user.videoQuotaDaily !== -1 } - titleVideoQuota () { - return `${new BytesPipe().transform(this.userVideoQuotaUsed, 0).toString()} / ${this.userVideoQuota}` + labelQuota () { + return `Total video quota: ${new BytesPipe().transform(this.userVideoQuotaUsed, 0).toString()} / ${this.userVideoQuota}` } - titleVideoQuotaDaily () { - return `${new BytesPipe().transform(this.userVideoQuotaUsedDaily, 0).toString()} / ${this.userVideoQuotaDaily}` + labelQuotaDaily () { + return `Total daily video quota: ${new BytesPipe().transform(this.userVideoQuotaUsedDaily, 0).toString()} / ${this.userVideoQuotaDaily}` } } diff --git a/client/src/app/shared/standalone-upload/upload-progress.component.html b/client/src/app/shared/standalone-upload/upload-progress.component.html index 06960a8a8..836c4c437 100644 --- a/client/src/app/shared/standalone-upload/upload-progress.component.html +++ b/client/src/app/shared/standalone-upload/upload-progress.component.html @@ -1,14 +1,10 @@
-
-
- Processing… - {{ uploadPercents }}% -
-
+ +
-
-
- {{ error }} -
-
+ + diff --git a/client/src/app/shared/standalone-upload/upload-progress.component.scss b/client/src/app/shared/standalone-upload/upload-progress.component.scss index 2e420b282..3a495e27b 100644 --- a/client/src/app/shared/standalone-upload/upload-progress.component.scss +++ b/client/src/app/shared/standalone-upload/upload-progress.component.scss @@ -5,23 +5,8 @@ .upload-progress-cancel { display: flex; margin-bottom: 40px; - - .progress { - flex-grow: 1; - - @include progressbar($height: 30px, $font-size: 14px, $background-color: rgba(11, 204, 41, 0.16)); - - .progress-bar { - background-color: pvar(--green); - line-height: 30px; - text-align: start; - font-weight: $font-semibold; - - span { - color: pvar(--mainBackgroundColor); - - @include margin-left(13px); - } - } - } +} + +my-progress-bar { + width: 100%; } diff --git a/client/src/app/shared/standalone-upload/upload-progress.component.ts b/client/src/app/shared/standalone-upload/upload-progress.component.ts index 4240d3137..76997c037 100644 --- a/client/src/app/shared/standalone-upload/upload-progress.component.ts +++ b/client/src/app/shared/standalone-upload/upload-progress.component.ts @@ -1,11 +1,12 @@ import { CommonModule } from '@angular/common' import { Component, EventEmitter, Input, Output } from '@angular/core' +import { ProgressBarComponent } from '../shared-main/misc/progress-bar.component' @Component({ selector: 'my-upload-progress', templateUrl: './upload-progress.component.html', styleUrls: [ './upload-progress.component.scss' ], - imports: [ CommonModule ], + imports: [ CommonModule, ProgressBarComponent ], standalone: true }) export class UploadProgressComponent { @@ -17,4 +18,12 @@ export class UploadProgressComponent { @Output() cancel = new EventEmitter() @Output() retry = new EventEmitter() + + getUploadingLabel () { + if (this.uploadPercents === 100 && this.uploaded === false) { + return $localize`Processing…` + } + + return $localize`${this.uploadPercents}%` + } } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 9a99fca89..007710f7f 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -24,6 +24,7 @@ body { // for css custom properties #{$var} --red: #{$red}; --green: #{$green}; + --white: #{$white}; --mainColor: #{$main-color}; --mainColorLighter: #{$main-color-lighter}; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index e0a7a9f8e..ded1b7a40 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -628,47 +628,6 @@ } } -@mixin progressbar($small: false, $height: 1rem, $font-size: 0.75rem, $background-color: pvar(--greyBackgroundColor)) { - background-color: $background-color; - display: flex; - height: $height; - overflow: hidden; - font-size: $font-size; - border-radius: 0.25rem; - position: relative; - - span { - position: absolute; - color: pvar(--greyForegroundColor); - - @if $small { - top: -1px; - } - - &:nth-of-type(1) { - left: .2rem; - } - &:nth-of-type(2) { - right: .2rem; - } - } - - .progress-bar { - color: pvar(--mainBackgroundColor); - background-color: pvar(--mainColor); - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - white-space: nowrap; - transition: width 0.6s ease; - - &.red { - background-color: color.adjust($color: #c54130, $lightness: 10%); - } - } -} - @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) { width: 95%; border-top: .05rem solid $color; diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index d7ac9594f..4843edde2 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -32,7 +32,8 @@ $bg-color: #fff; $fg-color: #212529; $red: #EE0700; -$green: #338809; +$green: #278904; +$white: #fff; $expanded-horizontal-margins: 150px; $not-expanded-horizontal-margins: 30px; @@ -108,6 +109,7 @@ $primeng-breakpoint: 960px; $variables: ( --red: var(--red), --green: var(--green), + --white: var(--white), --mainColor: var(--mainColor), --mainColorLighter: var(--mainColorLighter), diff --git a/server/core/middlewares/validators/videos/videos.ts b/server/core/middlewares/validators/videos/videos.ts index 915c77843..12e4bfd34 100644 --- a/server/core/middlewares/validators/videos/videos.ts +++ b/server/core/middlewares/validators/videos/videos.ts @@ -100,7 +100,12 @@ export const videosAddResumableValidator = [ async (req: express.Request, res: express.Response, next: express.NextFunction) => { const user = res.locals.oauth.token.User const file = buildUploadXFile(req.body as express.CustomUploadXFile) - const cleanup = () => safeUploadXCleanup(file) + const cleanup = () => { + safeUploadXCleanup(file) + + Redis.Instance.deleteUploadSession(req.query.upload_id) + .catch(err => logger.error('Cannot delete upload session', { err })) + } const uploadId = req.query.upload_id const sessionExists = await Redis.Instance.doesUploadSessionExist(uploadId)