OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Avatar info component optimizations

pull/3592/head
Chocobozzz 2021-01-13 10:52:17 +01:00
parent d95bc70290
commit 0e4ca570fa
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/shared/shared-main/account/actor-avatar-info.component.html
View File

@ -5,13 +5,13 @@
<div class="actor-img-edit-container">
<div *ngIf="!hasAvatar" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
<div *ngIf="!hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
<my-global-icon iconName="upload"></my-global-icon>
<label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
<input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
</div>
<div *ngIf="hasAvatar" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
<div *ngIf="hasAvatar()" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
<my-global-icon iconName="edit"></my-global-icon>
<label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
</div>

39
client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
View File

@ -1,10 +1,9 @@
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
import { Notifier, ServerService } from '@app/core'
import { getBytes } from '@root-helpers/bytes'
import { ServerConfig } from '@shared/models'
import { VideoChannel } from '../video-channel/video-channel.model'
import { Account } from '../account/account.model'
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
import { getBytes } from '@root-helpers/bytes'
import { Account } from '../account/account.model'
import { VideoChannel } from '../video-channel/video-channel.model'
import { Actor } from './actor.model'
@Component({
@ -21,8 +20,11 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
@Output() avatarChange = new EventEmitter<FormData>()
@Output() avatarDelete = new EventEmitter<void>()
avatarFormat = ''
maxAvatarSize = 0
avatarExtensions = ''
private avatarUrl: string
private serverConfig: ServerConfig
constructor (
private serverService: ServerService,
@ -30,9 +32,14 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
) { }
ngOnInit (): void {
this.serverConfig = this.serverService.getTmpConfig()
this.serverService.getConfig()
.subscribe(config => this.serverConfig = config)
.subscribe(config => {
this.maxAvatarSize = config.avatar.file.size.max
this.avatarExtensions = config.avatar.file.extensions.join(', ')
this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
`${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
})
}
ngOnChanges (changes: SimpleChanges) {
@ -60,23 +67,7 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
this.avatarDelete.emit()
}
get maxAvatarSize () {
return this.serverConfig.avatar.file.size.max
}
get maxAvatarSizeInBytes () {
return getBytes(this.maxAvatarSize)
}
get avatarExtensions () {
return this.serverConfig.avatar.file.extensions.join(', ')
}
get avatarFormat () {
return `${$localize`max size`}: 192*192px, ${this.maxAvatarSizeInBytes} ${$localize`extensions`}: ${this.avatarExtensions}`
}
get hasAvatar () {
hasAvatar () {
return !!this.avatarUrl
}
}