aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-03-22 17:41:39 +0100
committerChocobozzz <me@florianbigard.com>2022-03-22 17:41:39 +0100
commita2c5cd4a03cfe792a5f7341b33115002c448d3e4 (patch)
tree77ef3de463504659850cf1fd55148710a56cbe21 /client/src/app
parent92e66e04f7f51d37b465cff442ce47f6d6d7cadd (diff)
downloadPeerTube-a2c5cd4a03cfe792a5f7341b33115002c448d3e4.tar.gz
PeerTube-a2c5cd4a03cfe792a5f7341b33115002c448d3e4.tar.zst
PeerTube-a2c5cd4a03cfe792a5f7341b33115002c448d3e4.zip
Add reset button for file inputs in studio page
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+video-studio/edit/video-studio-edit.component.html12
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html2
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts4
-rw-r--r--client/src/app/shared/shared-forms/preview-upload.component.html2
-rw-r--r--client/src/app/shared/shared-forms/preview-upload.component.ts4
-rw-r--r--client/src/app/shared/shared-forms/reactive-file.component.html6
-rw-r--r--client/src/app/shared/shared-forms/reactive-file.component.scss11
-rw-r--r--client/src/app/shared/shared-forms/reactive-file.component.ts12
8 files changed, 43 insertions, 10 deletions
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.html b/client/src/app/+video-studio/edit/video-studio-edit.component.html
index a9f34811f..acfc1a452 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.html
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.html
@@ -28,8 +28,8 @@
28 <div class="form-group"> 28 <div class="form-group">
29 <my-reactive-file 29 <my-reactive-file
30 formControlName="file" inputName="addIntroFile" i18n-inputLabel inputLabel="Select the intro video file" 30 formControlName="file" inputName="addIntroFile" i18n-inputLabel inputLabel="Select the intro video file"
31 [extensions]="videoExtensions" [displayFilename]="true" 31 [extensions]="videoExtensions" [displayFilename]="true" [displayReset]="true"
32 [ngbTooltip]="getIntroOutroTooltip()" 32 [buttonTooltip]="getIntroOutroTooltip()"
33 ></my-reactive-file> 33 ></my-reactive-file>
34 </div> 34 </div>
35 </div> 35 </div>
@@ -42,8 +42,8 @@
42 <div class="form-group"> 42 <div class="form-group">
43 <my-reactive-file 43 <my-reactive-file
44 formControlName="file" inputName="addOutroFile" i18n-inputLabel inputLabel="Select the outro video file" 44 formControlName="file" inputName="addOutroFile" i18n-inputLabel inputLabel="Select the outro video file"
45 [extensions]="videoExtensions" [displayFilename]="true" 45 [extensions]="videoExtensions" [displayFilename]="true" [displayReset]="true"
46 [ngbTooltip]="getIntroOutroTooltip()" 46 [buttonTooltip]="getIntroOutroTooltip()"
47 ></my-reactive-file> 47 ></my-reactive-file>
48 </div> 48 </div>
49 </div> 49 </div>
@@ -56,8 +56,8 @@
56 <div class="form-group"> 56 <div class="form-group">
57 <my-reactive-file 57 <my-reactive-file
58 formControlName="file" inputName="addWatermarkFile" i18n-inputLabel inputLabel="Select watermark image file" 58 formControlName="file" inputName="addWatermarkFile" i18n-inputLabel inputLabel="Select watermark image file"
59 [extensions]="imageExtensions" [displayFilename]="true" 59 [extensions]="imageExtensions" [displayFilename]="true" [displayReset]="true"
60 [ngbTooltip]="getWatermarkTooltip()" 60 [buttonTooltip]="getWatermarkTooltip()"
61 ></my-reactive-file> 61 ></my-reactive-file>
62 </div> 62 </div>
63 </div> 63 </div>
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
index 092952204..a3f0dbdb5 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -23,7 +23,7 @@
23 <my-reactive-file 23 <my-reactive-file
24 formControlName="captionfile" inputName="captionfile" i18n-inputLabel inputLabel="Select the caption file" 24 formControlName="captionfile" inputName="captionfile" i18n-inputLabel inputLabel="Select the caption file"
25 [extensions]="videoCaptionExtensions" [maxFileSize]="videoCaptionMaxSize" [displayFilename]="true" 25 [extensions]="videoCaptionExtensions" [maxFileSize]="videoCaptionMaxSize" [displayFilename]="true"
26 i18n-ngbTooltip [ngbTooltip]="'(extensions: ' + videoCaptionExtensions.join(', ') + ')'" 26 [buttonTooltip]="getReactiveFileButtonTooltip()"
27 ></my-reactive-file> 27 ></my-reactive-file>
28 </div> 28 </div>
29 29
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
index 6deadfcbe..95d83b131 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
@@ -41,6 +41,10 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
41 return this.serverConfig.videoCaption.file.size.max 41 return this.serverConfig.videoCaption.file.size.max
42 } 42 }
43 43
44 getReactiveFileButtonTooltip () {
45 return `(extensions: ${this.videoCaptionExtensions.join(', ')})`
46 }
47
44 ngOnInit () { 48 ngOnInit () {
45 this.serverService.getVideoLanguages() 49 this.serverService.getVideoLanguages()
46 .subscribe(languages => this.videoCaptionLanguages = languages) 50 .subscribe(languages => this.videoCaptionLanguages = languages)
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.html b/client/src/app/shared/shared-forms/preview-upload.component.html
index 7c3a2b588..11e7bdf7f 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.html
+++ b/client/src/app/shared/shared-forms/preview-upload.component.html
@@ -2,7 +2,7 @@
2 <div class="preview-container"> 2 <div class="preview-container">
3 <my-reactive-file 3 <my-reactive-file
4 [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right" 4 [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right"
5 icon="edit" (fileChanged)="onFileChanged($event)" [ngbTooltip]="'(extensions: '+ videoImageExtensions +', '+ maxSizeText +': '+ maxVideoImageSizeInBytes +')'" 5 icon="edit" (fileChanged)="onFileChanged($event)" [buttonTooltip]="getReactiveFileButtonTooltip()"
6 ></my-reactive-file> 6 ></my-reactive-file>
7 7
8 <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" /> 8 <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.ts b/client/src/app/shared/shared-forms/preview-upload.component.ts
index a857b0a4f..46920dd27 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.ts
+++ b/client/src/app/shared/shared-forms/preview-upload.component.ts
@@ -50,6 +50,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
50 return this.bytesPipe.transform(this.maxVideoImageSize) 50 return this.bytesPipe.transform(this.maxVideoImageSize)
51 } 51 }
52 52
53 getReactiveFileButtonTooltip () {
54 return $localize`(extensions: ${this.videoImageExtensions}, ${this.maxSizeText}: ${this.maxVideoImageSizeInBytes})`
55 }
56
53 ngOnInit () { 57 ngOnInit () {
54 this.serverConfig = this.serverService.getHTMLConfig() 58 this.serverConfig = this.serverService.getHTMLConfig()
55 59
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.html b/client/src/app/shared/shared-forms/reactive-file.component.html
index f6bf5f9ae..d18a99d46 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.html
+++ b/client/src/app/shared/shared-forms/reactive-file.component.html
@@ -1,5 +1,5 @@
1<div class="root"> 1<div class="root">
2 <div class="button-file" [ngClass]="{ 'with-icon': !!icon }"> 2 <div class="button-file" [ngClass]="{ 'with-icon': !!icon }" [ngbTooltip]="buttonTooltip">
3 <my-global-icon *ngIf="icon" [iconName]="icon"></my-global-icon> 3 <my-global-icon *ngIf="icon" [iconName]="icon"></my-global-icon>
4 4
5 <span>{{ inputLabel }}</span> 5 <span>{{ inputLabel }}</span>
@@ -12,4 +12,8 @@
12 </div> 12 </div>
13 13
14 <div class="filename" *ngIf="displayFilename === true && filename">{{ filename }}</div> 14 <div class="filename" *ngIf="displayFilename === true && filename">{{ filename }}</div>
15
16 <button *ngIf="displayReset && filename" i18n class="reset-button" (click)="reset()">
17 Reset
18 </button>
15</div> 19</div>
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss
index f8db1aa25..7643f29af 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.scss
+++ b/client/src/app/shared/shared-forms/reactive-file.component.scss
@@ -20,4 +20,15 @@
20 20
21 font-weight: $font-semibold; 21 font-weight: $font-semibold;
22 } 22 }
23
24 .reset-button {
25 @include peertube-button;
26 @include grey-button;
27
28 font-size: 80%;
29 margin-left: 5px;
30 line-height: initial;
31 padding: 2px 5px;
32 height: auto;
33 }
23} 34}
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.ts b/client/src/app/shared/shared-forms/reactive-file.component.ts
index 9d27ad07a..50b7d4c3e 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.ts
+++ b/client/src/app/shared/shared-forms/reactive-file.component.ts
@@ -20,8 +20,12 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
20 @Input() inputName: string 20 @Input() inputName: string
21 @Input() extensions: string[] = [] 21 @Input() extensions: string[] = []
22 @Input() maxFileSize: number 22 @Input() maxFileSize: number
23
23 @Input() displayFilename = false 24 @Input() displayFilename = false
25 @Input() displayReset = false
26
24 @Input() icon: GlobalIconName 27 @Input() icon: GlobalIconName
28 @Input() buttonTooltip: string
25 29
26 @Output() fileChanged = new EventEmitter<Blob>() 30 @Output() fileChanged = new EventEmitter<Blob>()
27 31
@@ -62,8 +66,14 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
62 this.file = file 66 this.file = file
63 67
64 this.propagateChange(this.file) 68 this.propagateChange(this.file)
65 this.fileChanged.emit(this.file)
66 } 69 }
70 this.fileChanged.emit(this.file)
71 }
72
73 reset () {
74 this.writeValue(undefined)
75 this.propagateChange(undefined)
76 this.fileChanged.emit(undefined)
67 } 77 }
68 78
69 propagateChange = (_: any) => { /* empty */ } 79 propagateChange = (_: any) => { /* empty */ }