Client: Add ability to update video channel avatar
[oweals/peertube.git] / client / src / app / +my-account / shared / actor-avatar-info.component.ts
1 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
2 import { AuthService } from '../../core'
3 import { ServerService } from '../../core/server'
4 import { UserService } from '../../shared/users'
5 import { NotificationsService } from 'angular2-notifications'
6 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
7 import { Account } from '@app/shared/account/account.model'
8
9 @Component({
10   selector: 'my-actor-avatar-info',
11   templateUrl: './actor-avatar-info.component.html',
12   styleUrls: [ './actor-avatar-info.component.scss' ]
13 })
14 export class ActorAvatarInfoComponent {
15   @ViewChild('avatarfileInput') avatarfileInput
16
17   @Input() actor: VideoChannel | Account
18
19   @Output() avatarChange = new EventEmitter<FormData>()
20
21   constructor (
22     private userService: UserService,
23     private authService: AuthService,
24     private serverService: ServerService,
25     private notificationsService: NotificationsService
26   ) {}
27
28   onAvatarChange () {
29     const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
30     if (avatarfile.size > this.maxAvatarSize) {
31       this.notificationsService.error('Error', 'This image is too large.')
32       return
33     }
34
35     const formData = new FormData()
36     formData.append('avatarfile', avatarfile)
37
38     this.avatarChange.emit(formData)
39   }
40
41   get maxAvatarSize () {
42     return this.serverService.getConfig().avatar.file.size.max
43   }
44
45   get avatarExtensions () {
46     return this.serverService.getConfig().avatar.file.extensions.join(',')
47   }
48 }