aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2023-03-02 10:16:21 +0100
committerChocobozzz <me@florianbigard.com>2023-03-02 10:16:21 +0100
commite2d8587bd36239f0ba0be59a9185682072a392fc (patch)
tree989a41aee770f9d561b1ca9a6b2281b1a4022c23 /client/src/app/shared
parent2c8380a46f34631e705b1564938343cacfa4b0bc (diff)
downloadPeerTube-e2d8587bd36239f0ba0be59a9185682072a392fc.tar.gz
PeerTube-e2d8587bd36239f0ba0be59a9185682072a392fc.tar.zst
PeerTube-e2d8587bd36239f0ba0be59a9185682072a392fc.zip
Fix displaying remote actor avatars
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar.component.ts67
-rw-r--r--client/src/app/shared/shared-main/account/actor.model.ts2
2 files changed, 47 insertions, 22 deletions
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 5598b25f6..6036123f9 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -1,4 +1,4 @@
1import { Component, Input, OnChanges } from '@angular/core' 1import { Component, Input, OnChanges, OnInit } from '@angular/core'
2import { VideoChannel } from '../shared-main' 2import { VideoChannel } from '../shared-main'
3import { Account } from '../shared-main/account/account.model' 3import { Account } from '../shared-main/account/account.model'
4 4
@@ -15,7 +15,7 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '
15 styleUrls: [ './actor-avatar.component.scss' ], 15 styleUrls: [ './actor-avatar.component.scss' ],
16 templateUrl: './actor-avatar.component.html' 16 templateUrl: './actor-avatar.component.html'
17}) 17})
18export class ActorAvatarComponent implements OnChanges { 18export class ActorAvatarComponent implements OnInit, OnChanges {
19 private _title: string 19 private _title: string
20 20
21 @Input() actor: ActorInput 21 @Input() actor: ActorInput
@@ -43,31 +43,25 @@ export class ActorAvatarComponent implements OnChanges {
43 } 43 }
44 44
45 classes: string[] = [] 45 classes: string[] = []
46 alt: string
47 defaultAvatarUrl: string
48 avatarUrl: string
46 49
47 get alt () { 50 ngOnInit () {
48 if (this.isAccount()) return $localize`Account avatar` 51 this.buildDefaultAvatarUrl()
49 if (this.isChannel()) return $localize`Channel avatar`
50 52
51 return '' 53 this.buildClasses()
52 } 54 this.buildAlt()
53 55 this.buildAvatarUrl()
54 get defaultAvatarUrl () {
55 if (this.isChannel()) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
56
57 // account or unlogged
58 return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
59 } 56 }
60 57
61 get avatarUrl () { 58 ngOnChanges () {
62 if (!this.actor) return '' 59 this.buildClasses()
63 60 this.buildAlt()
64 if (this.isAccount()) return Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber()) 61 this.buildAvatarUrl()
65 if (this.isChannel()) return VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
66
67 return ''
68 } 62 }
69 63
70 ngOnChanges () { 64 private buildClasses () {
71 this.classes = [ 'avatar' ] 65 this.classes = [ 'avatar' ]
72 66
73 if (this.size) { 67 if (this.size) {
@@ -87,6 +81,37 @@ export class ActorAvatarComponent implements OnChanges {
87 } 81 }
88 } 82 }
89 83
84 private buildAlt () {
85 if (this.isAccount()) this.alt = $localize`Account avatar`
86 else if (this.isChannel()) this.alt = $localize`Channel avatar`
87 else this.alt = ''
88 }
89
90 private buildDefaultAvatarUrl () {
91 this.defaultAvatarUrl = this.isChannel()
92 ? VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
93 : Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
94 }
95
96 private buildAvatarUrl () {
97 if (!this.actor) {
98 this.avatarUrl = ''
99 return
100 }
101
102 if (this.isAccount()) {
103 this.avatarUrl = Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
104 return
105 }
106
107 if (this.isChannel()) {
108 this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
109 return
110 }
111
112 this.avatarUrl = ''
113 }
114
90 displayImage () { 115 displayImage () {
91 if (this.actorType === 'unlogged') return true 116 if (this.actorType === 'unlogged') return true
92 117
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 6e45ba588..77bf9171b 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -23,7 +23,7 @@ export abstract class Actor implements ServerActor {
23 static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) { 23 static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) {
24 const avatarsAscWidth = actor.avatars.sort((a, b) => a.width - b.width) 24 const avatarsAscWidth = actor.avatars.sort((a, b) => a.width - b.width)
25 25
26 const avatar = size 26 const avatar = size && avatarsAscWidth.length > 1
27 ? avatarsAscWidth.find(a => a.width >= size) 27 ? avatarsAscWidth.find(a => a.width >= size)
28 : avatarsAscWidth[avatarsAscWidth.length - 1] // Bigger one 28 : avatarsAscWidth[avatarsAscWidth.length - 1] // Bigger one
29 29