diff options
Diffstat (limited to 'client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts')
-rw-r--r-- | client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts new file mode 100644 index 000000000..8c12d3c4c --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts | |||
@@ -0,0 +1,76 @@ | |||
1 | import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' | ||
2 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' | ||
3 | import { Notifier, ServerService } from '@app/core' | ||
4 | import { VideoChannel } from '@app/shared/shared-main' | ||
5 | import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' | ||
6 | import { getBytes } from '@root-helpers/bytes' | ||
7 | |||
8 | @Component({ | ||
9 | selector: 'my-actor-banner-edit', | ||
10 | templateUrl: './actor-banner-edit.component.html', | ||
11 | styleUrls: [ | ||
12 | './actor-image-edit.scss', | ||
13 | './actor-banner-edit.component.scss' | ||
14 | ] | ||
15 | }) | ||
16 | export class ActorBannerEditComponent implements OnInit { | ||
17 | @ViewChild('bannerfileInput') bannerfileInput: ElementRef<HTMLInputElement> | ||
18 | @ViewChild('bannerPopover') bannerPopover: NgbPopover | ||
19 | |||
20 | @Input() actor: VideoChannel | ||
21 | @Input() previewImage = false | ||
22 | |||
23 | @Output() bannerChange = new EventEmitter<FormData>() | ||
24 | @Output() bannerDelete = new EventEmitter<void>() | ||
25 | |||
26 | bannerFormat = '' | ||
27 | maxBannerSize = 0 | ||
28 | bannerExtensions = '' | ||
29 | |||
30 | preview: SafeResourceUrl | ||
31 | |||
32 | constructor ( | ||
33 | private sanitizer: DomSanitizer, | ||
34 | private serverService: ServerService, | ||
35 | private notifier: Notifier | ||
36 | ) { } | ||
37 | |||
38 | ngOnInit (): void { | ||
39 | this.serverService.getConfig() | ||
40 | .subscribe(config => { | ||
41 | this.maxBannerSize = config.banner.file.size.max | ||
42 | this.bannerExtensions = config.banner.file.extensions.join(', ') | ||
43 | |||
44 | // tslint:disable:max-line-length | ||
45 | this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}` | ||
46 | }) | ||
47 | } | ||
48 | |||
49 | onBannerChange (input: HTMLInputElement) { | ||
50 | this.bannerfileInput = new ElementRef(input) | ||
51 | |||
52 | const bannerfile = this.bannerfileInput.nativeElement.files[ 0 ] | ||
53 | if (bannerfile.size > this.maxBannerSize) { | ||
54 | this.notifier.error('Error', $localize`This image is too large.`) | ||
55 | return | ||
56 | } | ||
57 | |||
58 | const formData = new FormData() | ||
59 | formData.append('bannerfile', bannerfile) | ||
60 | this.bannerPopover?.close() | ||
61 | this.bannerChange.emit(formData) | ||
62 | |||
63 | if (this.previewImage) { | ||
64 | this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile)) | ||
65 | } | ||
66 | } | ||
67 | |||
68 | deleteBanner () { | ||
69 | this.preview = undefined | ||
70 | this.bannerDelete.emit() | ||
71 | } | ||
72 | |||
73 | hasBanner () { | ||
74 | return !!this.preview || !!this.actor.bannerUrl | ||
75 | } | ||
76 | } | ||