diff options
Diffstat (limited to 'client/src/app/videos/+video-edit/shared')
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 @@ | |||
1 | import { Component, forwardRef, Input } from '@angular/core' | ||
2 | import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' | ||
3 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' | ||
4 | import { ServerService } from '@app/core' | ||
5 | import '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 | |||
20 | export 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 | } | ||