From 52d9f792b3fee5acce80f948295b59e3ad2073eb Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 29 Jun 2018 14:34:04 +0200 Subject: Client: Add ability to update video channel avatar --- .../my-account-settings.component.html | 18 +------- .../my-account-settings.component.scss | 49 --------------------- .../my-account-settings.component.ts | 21 +-------- .../my-account-video-channel-edit.component.html | 6 ++- .../my-account-video-channel-edit.component.scss | 5 +++ .../my-account-video-channel-update.component.ts | 30 +++++++++++-- client/src/app/+my-account/my-account.module.ts | 4 +- .../shared/actor-avatar-info.component.html | 19 ++++++++ .../shared/actor-avatar-info.component.scss | 51 ++++++++++++++++++++++ .../shared/actor-avatar-info.component.ts | 48 ++++++++++++++++++++ 10 files changed, 160 insertions(+), 91 deletions(-) create mode 100644 client/src/app/+my-account/shared/actor-avatar-info.component.html create mode 100644 client/src/app/+my-account/shared/actor-avatar-info.component.scss create mode 100644 client/src/app/+my-account/shared/actor-avatar-info.component.ts (limited to 'client/src/app/+my-account') diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html index f5d593f19..ff08cb777 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html @@ -1,20 +1,4 @@ -
- Avatar - - -
- -
- Change your avatar - -
-
(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})
+
Video quota: {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }} diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss index ec0d40b93..16f26dfed 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss @@ -1,55 +1,6 @@ @import '_variables'; @import '_mixins'; -.user { - display: flex; - - img { - @include avatar(50px); - - margin-right: 15px; - } - - .user-info { - .user-info-names { - display: flex; - align-items: center; - - .user-info-display-name { - font-size: 20px; - font-weight: $font-bold; - } - - .user-info-username { - margin-left: 7px; - position: relative; - top: 2px; - font-size: 14px; - color: #777272; - } - } - - .user-info-followers { - font-size: 15px; - } - } -} - -.button-file { - @include peertube-button-file(160px); - - margin-top: 10px; - margin-bottom: 5px; -} - -.file-max-size { - display: inline-block; - font-size: 13px; - - position: relative; - top: -10px; -} - .user-quota { font-size: 15px; margin-top: 20px; diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts index 14293f14c..164a46a48 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts @@ -13,8 +13,6 @@ import { I18n } from '@ngx-translate/i18n-polyfill' styleUrls: [ './my-account-settings.component.scss' ] }) export class MyAccountSettingsComponent implements OnInit { - @ViewChild('avatarfileInput') avatarfileInput - user: User = null userVideoQuota = '0' userVideoQuotaUsed = 0 @@ -48,16 +46,7 @@ export class MyAccountSettingsComponent implements OnInit { .subscribe(data => this.userVideoQuotaUsed = data.videoQuotaUsed) } - changeAvatar () { - const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ] - if (avatarfile.size > this.maxAvatarSize) { - this.notificationsService.error('Error', 'This image is too large.') - return - } - - const formData = new FormData() - formData.append('avatarfile', avatarfile) - + onAvatarChange (formData: FormData) { this.userService.changeAvatar(formData) .subscribe( data => { @@ -69,12 +58,4 @@ export class MyAccountSettingsComponent implements OnInit { err => this.notificationsService.error(this.i18n('Error'), err.message) ) } - - get maxAvatarSize () { - return this.serverService.getConfig().avatar.file.size.max - } - - get avatarExtensions () { - return this.serverService.getConfig().avatar.file.extensions.join(',') - } } diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html index 1c08cfdca..f7ca2ec43 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html @@ -1,5 +1,9 @@ + +
Create a video channel
-
Update {{ videoChannel?.displayName }}
{{ error }}
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss index 6fbb8ae8b..86c2598b7 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss @@ -5,6 +5,11 @@ margin-bottom: 20px; } +my-actor-avatar-info { + display: block; + margin-bottom: 20px; +} + input[type=text] { @include peertube-input-text(340px); diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts index 1510c5015..6db8ea8d6 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { NotificationsService } from 'angular2-notifications' import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit' @@ -6,7 +6,7 @@ import { VideoChannelUpdate } from '../../../../../shared/models/videos' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' import { Subscription } from 'rxjs' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' -import { AuthService } from '@app/core' +import { AuthService, ServerService } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { VideoChannelValidatorsService } from '@app/shared/forms/form-validators/video-channel-validators.service' @@ -17,6 +17,8 @@ import { VideoChannelValidatorsService } from '@app/shared/forms/form-validators styleUrls: [ './my-account-video-channel-edit.component.scss' ] }) export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelEdit implements OnInit, OnDestroy { + @ViewChild('avatarfileInput') avatarfileInput + error: string private videoChannelToUpdate: VideoChannel @@ -30,7 +32,8 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE private router: Router, private route: ActivatedRoute, private videoChannelService: VideoChannelService, - private i18n: I18n + private i18n: I18n, + private serverService: ServerService ) { super() } @@ -89,6 +92,27 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE ) } + onAvatarChange (formData: FormData) { + this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.uuid, formData) + .subscribe( + data => { + this.notificationsService.success(this.i18n('Success'), this.i18n('Avatar changed.')) + + this.videoChannelToUpdate.updateAvatar(data.avatar) + }, + + err => this.notificationsService.error(this.i18n('Error'), err.message) + ) + } + + get maxAvatarSize () { + return this.serverService.getConfig().avatar.file.size.max + } + + get avatarExtensions () { + return this.serverService.getConfig().avatar.file.extensions.join(',') + } + isCreation () { return false } diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index 7e6b8c03e..2088273e6 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts @@ -10,6 +10,7 @@ import { MyAccountProfileComponent } from '@app/+my-account/my-account-settings/ import { MyAccountVideoChannelsComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channels.component' import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component' import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component' +import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component' @NgModule({ imports: [ @@ -26,7 +27,8 @@ import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-accoun MyAccountVideosComponent, MyAccountVideoChannelsComponent, MyAccountVideoChannelCreateComponent, - MyAccountVideoChannelUpdateComponent + MyAccountVideoChannelUpdateComponent, + ActorAvatarInfoComponent ], exports: [ diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html new file mode 100644 index 000000000..8bdff2f5a --- /dev/null +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.html @@ -0,0 +1,19 @@ + +
+ Avatar + +
+
+
{{ actor.displayName }}
+
{{ actor.name }}
+
+
{{ actor.followersCount }} subscribers
+
+
+ +
+ Change the avatar + +
+
(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})
+ \ No newline at end of file diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.scss b/client/src/app/+my-account/shared/actor-avatar-info.component.scss new file mode 100644 index 000000000..36a792f82 --- /dev/null +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.scss @@ -0,0 +1,51 @@ +@import '_variables'; +@import '_mixins'; + +.actor { + display: flex; + + img { + @include avatar(50px); + + margin-right: 15px; + } + + .actor-info { + .actor-info-names { + display: flex; + align-items: center; + + .actor-info-display-name { + font-size: 20px; + font-weight: $font-bold; + } + + .actor-info-username { + margin-left: 7px; + position: relative; + top: 2px; + font-size: 14px; + color: #777272; + } + } + + .actor-info-followers { + font-size: 15px; + } + } +} + +.button-file { + @include peertube-button-file(160px); + + margin-top: 10px; + margin-bottom: 5px; +} + +.file-max-size { + display: inline-block; + font-size: 13px; + + position: relative; + top: -10px; +} \ No newline at end of file diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts new file mode 100644 index 000000000..e0b25ad33 --- /dev/null +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts @@ -0,0 +1,48 @@ +import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core' +import { AuthService } from '../../core' +import { ServerService } from '../../core/server' +import { UserService } from '../../shared/users' +import { NotificationsService } from 'angular2-notifications' +import { VideoChannel } from '@app/shared/video-channel/video-channel.model' +import { Account } from '@app/shared/account/account.model' + +@Component({ + selector: 'my-actor-avatar-info', + templateUrl: './actor-avatar-info.component.html', + styleUrls: [ './actor-avatar-info.component.scss' ] +}) +export class ActorAvatarInfoComponent { + @ViewChild('avatarfileInput') avatarfileInput + + @Input() actor: VideoChannel | Account + + @Output() avatarChange = new EventEmitter() + + constructor ( + private userService: UserService, + private authService: AuthService, + private serverService: ServerService, + private notificationsService: NotificationsService + ) {} + + onAvatarChange () { + const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ] + if (avatarfile.size > this.maxAvatarSize) { + this.notificationsService.error('Error', 'This image is too large.') + return + } + + const formData = new FormData() + formData.append('avatarfile', avatarfile) + + this.avatarChange.emit(formData) + } + + get maxAvatarSize () { + return this.serverService.getConfig().avatar.file.size.max + } + + get avatarExtensions () { + return this.serverService.getConfig().avatar.file.extensions.join(',') + } +} -- cgit v1.2.3