forks/peertube
1
0
Fork 0
Code Releases Activity

Add reset button for file inputs in studio page

Browse source
This commit is contained in:
Chocobozzz 2022-03-22 17:41:39 +01:00
parent 92e66e04f7
commit a2c5cd4a03
No known key found for this signature in database
GPG key ID: 583A612D890159BE
8 changed files with 43 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/src/app/+video-studio/edit/video-studio-edit.component.html
View file

@ -28,8 +28,8 @@
<div class="form-group">
<my-reactive-file
formControlName="file" inputName="addIntroFile" i18n-inputLabel inputLabel="Select the intro video file"
[extensions]="videoExtensions" [displayFilename]="true"
[ngbTooltip]="getIntroOutroTooltip()"
[extensions]="videoExtensions" [displayFilename]="true" [displayReset]="true"
[buttonTooltip]="getIntroOutroTooltip()"
></my-reactive-file>
</div>
</div>
@ -42,8 +42,8 @@
<div class="form-group">
<my-reactive-file
formControlName="file" inputName="addOutroFile" i18n-inputLabel inputLabel="Select the outro video file"
[extensions]="videoExtensions" [displayFilename]="true"
[ngbTooltip]="getIntroOutroTooltip()"
[extensions]="videoExtensions" [displayFilename]="true" [displayReset]="true"
[buttonTooltip]="getIntroOutroTooltip()"
></my-reactive-file>
</div>
</div>
@ -56,8 +56,8 @@
<div class="form-group">
<my-reactive-file
formControlName="file" inputName="addWatermarkFile" i18n-inputLabel inputLabel="Select watermark image file"
[extensions]="imageExtensions" [displayFilename]="true"
[ngbTooltip]="getWatermarkTooltip()"
[extensions]="imageExtensions" [displayFilename]="true" [displayReset]="true"
[buttonTooltip]="getWatermarkTooltip()"
></my-reactive-file>
</div>
</div>

2
client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
View file

@ -23,7 +23,7 @@
<my-reactive-file
formControlName="captionfile" inputName="captionfile" i18n-inputLabel inputLabel="Select the caption file"
[extensions]="videoCaptionExtensions" [maxFileSize]="videoCaptionMaxSize" [displayFilename]="true"
i18n-ngbTooltip [ngbTooltip]="'(extensions: ' + videoCaptionExtensions.join(', ') + ')'"
[buttonTooltip]="getReactiveFileButtonTooltip()"
></my-reactive-file>
</div>

4
client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
View file

@ -41,6 +41,10 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
return this.serverConfig.videoCaption.file.size.max
}
getReactiveFileButtonTooltip () {
return `(extensions: ${this.videoCaptionExtensions.join(', ')})`
}
ngOnInit () {
this.serverService.getVideoLanguages()
.subscribe(languages => this.videoCaptionLanguages = languages)

2
client/src/app/shared/shared-forms/preview-upload.component.html
View file

@ -2,7 +2,7 @@
<div class="preview-container">
<my-reactive-file
[inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right"
icon="edit" (fileChanged)="onFileChanged($event)" [ngbTooltip]="'(extensions: '+ videoImageExtensions +', '+ maxSizeText +': '+ maxVideoImageSizeInBytes +')'"
icon="edit" (fileChanged)="onFileChanged($event)" [buttonTooltip]="getReactiveFileButtonTooltip()"
></my-reactive-file>
<img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />

4
client/src/app/shared/shared-forms/preview-upload.component.ts
View file

@ -50,6 +50,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
return this.bytesPipe.transform(this.maxVideoImageSize)
}
getReactiveFileButtonTooltip () {
return $localize`(extensions: ${this.videoImageExtensions}, ${this.maxSizeText}: ${this.maxVideoImageSizeInBytes})`
}
ngOnInit () {
this.serverConfig = this.serverService.getHTMLConfig()

6
client/src/app/shared/shared-forms/reactive-file.component.html
View file

@ -1,5 +1,5 @@
<div class="root">
<div class="button-file" [ngClass]="{ 'with-icon': !!icon }">
<div class="button-file" [ngClass]="{ 'with-icon': !!icon }" [ngbTooltip]="buttonTooltip">
<my-global-icon *ngIf="icon" [iconName]="icon"></my-global-icon>
<span>{{ inputLabel }}</span>
@ -12,4 +12,8 @@
</div>
<div class="filename" *ngIf="displayFilename === true && filename">{{ filename }}</div>
<button *ngIf="displayReset && filename" i18n class="reset-button" (click)="reset()">
Reset
</button>
</div>

11
client/src/app/shared/shared-forms/reactive-file.component.scss
View file

@ -20,4 +20,15 @@
font-weight: $font-semibold;
}
.reset-button {
@include peertube-button;
@include grey-button;
font-size: 80%;
margin-left: 5px;
line-height: initial;
padding: 2px 5px;
height: auto;
}
}

10
client/src/app/shared/shared-forms/reactive-file.component.ts
View file

@ -20,8 +20,12 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
@Input() inputName: string
@Input() extensions: string[] = []
@Input() maxFileSize: number
@Input() displayFilename = false
@Input() displayReset = false
@Input() icon: GlobalIconName
@Input() buttonTooltip: string
@Output() fileChanged = new EventEmitter<Blob>()
@ -62,8 +66,14 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
this.file = file
this.propagateChange(this.file)
}
this.fileChanged.emit(this.file)
}
reset () {
this.writeValue(undefined)
this.propagateChange(undefined)
this.fileChanged.emit(undefined)
}
propagateChange = (_: any) => { /* empty */ }