aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/videos/+video-edit/shared/video-image.component.html16
-rw-r--r--client/src/app/videos/+video-edit/shared/video-image.component.scss26
-rw-r--r--client/src/app/videos/+video-edit/shared/video-image.component.ts74
3 files changed, 116 insertions, 0 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-image.component.html b/client/src/app/videos/+video-edit/shared/video-image.component.html
new file mode 100644
index 000000000..5d0624f8c
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-image.component.html
@@ -0,0 +1,16 @@
1<div class="root">
2 <div>
3 <div class="button-file">
4 <span>{{ inputLabel }}</span>
5 <input
6 type="file"
7 [name]="inputName" [id]="inputName" [accept]="videoImageExtensions"
8 (change)="fileChange($event)"
9 />
10 </div>
11 <div class="image-constraints">(extensions: {{ videoImageExtensions }}, max size: {{ maxVideoImageSize | bytes }})</div>
12 </div>
13
14 <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
15 <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div>
16</div>
diff --git a/client/src/app/videos/+video-edit/shared/video-image.component.scss b/client/src/app/videos/+video-edit/shared/video-image.component.scss
new file mode 100644
index 000000000..c44d00b3c
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-image.component.scss
@@ -0,0 +1,26 @@
1@import '_variables';
2@import '_mixins';
3
4.root {
5 height: 150px;
6 display: flex;
7 align-items: center;
8
9 .button-file {
10 @include peertube-button-file(190px);
11 }
12
13 .image-constraints {
14 font-size: 13px;
15 }
16
17 .preview {
18 border: 2px solid grey;
19 border-radius: 4px;
20 margin-left: 50px;
21
22 &.no-image {
23 background-color: #ececec;
24 }
25 }
26}
diff --git a/client/src/app/videos/+video-edit/shared/video-image.component.ts b/client/src/app/videos/+video-edit/shared/video-image.component.ts
new file mode 100644
index 000000000..3f5705a92
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-image.component.ts
@@ -0,0 +1,74 @@
1import { Component, forwardRef, Input } from '@angular/core'
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
4import { ServerService } from '@app/core'
5import 'rxjs/add/observable/forkJoin'
6
7@Component({
8 selector: 'my-video-image',
9 styleUrls: [ './video-image.component.scss' ],
10 templateUrl: './video-image.component.html',
11 providers: [
12 {
13 provide: NG_VALUE_ACCESSOR,
14 useExisting: forwardRef(() => VideoImageComponent),
15 multi: true
16 }
17 ]
18})
19
20export class VideoImageComponent implements ControlValueAccessor {
21 @Input() inputLabel: string
22 @Input() inputName: string
23 @Input() previewWidth: string
24 @Input() previewHeight: string
25
26 imageSrc: SafeResourceUrl
27
28 private file: Blob
29
30 constructor (
31 private sanitizer: DomSanitizer,
32 private serverService: ServerService
33 ) {}
34
35 get videoImageExtensions () {
36 return this.serverService.getConfig().video.image.extensions.join(',')
37 }
38
39 get maxVideoImageSize () {
40 return this.serverService.getConfig().video.image.size.max
41 }
42
43 fileChange (event: any) {
44 if (event.target.files && event.target.files.length) {
45 const [ file ] = event.target.files
46
47 this.file = file
48 this.propagateChange(this.file)
49 this.updatePreview()
50 }
51 }
52
53 propagateChange = (_: any) => { /* empty */ }
54
55 writeValue (file: any) {
56 this.file = file
57 this.updatePreview()
58 }
59
60 registerOnChange (fn: (_: any) => void) {
61 this.propagateChange = fn
62 }
63
64 registerOnTouched () {
65 // Unused
66 }
67
68 private updatePreview () {
69 if (this.file) {
70 const url = URL.createObjectURL(this.file)
71 this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)
72 }
73 }
74}