ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2026-04-06 01:25:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix optimistic avatar

Browse Source
This commit is contained in:
Ulf Gebhardt 2026-04-04 01:37:24 +02:00
parent 0d38f38692
commit ec9c8a689c
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
webapp/components/Chat/Chat.spec.js
View File

@ -185,18 +185,18 @@ describe('Chat.vue', () => {
expect(prepared.date).toBeDefined() expect(prepared.date).toBeDefined()
}) })
it('keeps avatar object as-is', () => { it('extracts w320 from avatar object', () => {
const avatarObj = { w320: 'http://img.jpg' } const msg = mockMessage({ avatar: { w320: 'http://img.jpg' } })
const msg = mockMessage({ avatar: avatarObj })
const prepared = wrapper.vm.prepareMessage(msg) const prepared = wrapper.vm.prepareMessage(msg)
expect(prepared.avatar).toEqual(avatarObj) expect(prepared.avatar).toBe('http://img.jpg')
expect(prepared._originalAvatar).toEqual(avatarObj) expect(prepared._originalAvatar).toBe('http://img.jpg')
}) })
it('sets placeholder avatar when avatar is null', () => { it('generates initials avatar when avatar is null', () => {
const msg = mockMessage({ avatar: null }) const msg = mockMessage({ avatar: null, username: 'Otto Normal' })
const prepared = wrapper.vm.prepareMessage(msg) const prepared = wrapper.vm.prepareMessage(msg)
expect(prepared.avatar).toBe('initials') expect(prepared.avatar).toContain('data:image/svg+xml')
expect(prepared.avatar).toContain('ON')
}) })
}) })

12
webapp/components/Chat/Chat.vue
View File

@ -432,14 +432,18 @@ export default {
return user ? { id: user.id, name: user.username || user.name } : { name: senderId } return user ? { id: user.id, name: user.username || user.name } : { name: senderId }
}, },
initialsAvatarUrl(name) {
const initials = (name || '?').match(/\b\w/g)?.join('').substring(0, 2).toUpperCase() || '?'
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56"><circle cx="28" cy="28" r="28" fill="rgb(25,122,49)"/><text x="50%25" y="50%25" dominant-baseline="central" text-anchor="middle" fill="white" font-family="sans-serif" font-size="22" font-weight="500">${initials}</text></svg>`
return `data:image/svg+xml,${svg}`
},
prepareMessage(msg) { prepareMessage(msg) {
const m = { ...msg } const m = { ...msg }
m.content = m.content || '' m.content = m.content || ''
if (!m._rawDate) m._rawDate = m.date if (!m._rawDate) m._rawDate = m.date
this.formatMessageDate(m) this.formatMessageDate(m)
// Always set a truthy avatar so the library renders our message-avatar slot. m.avatar = m.avatar?.w320 || m.avatar || this.initialsAvatarUrl(m.username)
// ProfileAvatar handles the actual display (image or initials).
m.avatar = m.avatar || 'initials'
if (!m._originalAvatar) m._originalAvatar = m.avatar if (!m._originalAvatar) m._originalAvatar = m.avatar
return m return m
}, },
@ -805,7 +809,7 @@ export default {
saved: true, saved: true,
_rawDate: new Date().toISOString(), _rawDate: new Date().toISOString(),
_originalAvatar: _originalAvatar:
this.selectedRoom?.users?.find((u) => u.id === this.currentUser.id)?.avatar || 'initials', this.selectedRoom?.users?.find((u) => u.id === this.currentUser.id)?.avatar || this.initialsAvatarUrl(this.currentUser.name),
senderId: this.currentUser.id, senderId: this.currentUser.id,
files: files:
messageDetails.files?.map((file) => ({ messageDetails.files?.map((file) => ({