Changeset View
Standalone View
lib/shared/avatar-utils.js
| // @flow | |||||
| import stringHash from 'string-hash'; | |||||
| import { selectedThreadColors } from './thread-utils.js'; | |||||
| import type { EmojiAvatar } from '../types/avatar-types.js'; | |||||
| const defaultEmojiAvatars: $ReadOnlyArray<EmojiAvatar> = [ | |||||
| { color: selectedThreadColors[7], emoji: '😀' }, | |||||
| { color: selectedThreadColors[0], emoji: '😆' }, | |||||
| { color: selectedThreadColors[1], emoji: '🤩' }, | |||||
| { color: selectedThreadColors[7], emoji: '🏈' }, | |||||
| { color: selectedThreadColors[2], emoji: '👻' }, | |||||
| { color: selectedThreadColors[3], emoji: '🧑🚀' }, | |||||
| { color: selectedThreadColors[4], emoji: '🎩' }, | |||||
| { color: selectedThreadColors[5], emoji: '🍦' }, | |||||
| { color: selectedThreadColors[6], emoji: '🚀' }, | |||||
| { color: selectedThreadColors[8], emoji: '🥰' }, | |||||
| { color: selectedThreadColors[3], emoji: '🐬' }, | |||||
| { color: selectedThreadColors[4], emoji: '🍀' }, | |||||
| { color: selectedThreadColors[9], emoji: '🍕' }, | |||||
| { color: selectedThreadColors[0], emoji: '🙄' }, | |||||
| { color: selectedThreadColors[1], emoji: '🥳' }, | |||||
| { color: selectedThreadColors[7], emoji: '🥸' }, | |||||
| { color: selectedThreadColors[2], emoji: '🦋' }, | |||||
| { color: selectedThreadColors[9], emoji: '🏆' }, | |||||
| { color: selectedThreadColors[5], emoji: '🎲' }, | |||||
| { color: selectedThreadColors[8], emoji: '🏀' }, | |||||
| ]; | |||||
| function getAvatarForUser( | |||||
| user: ?{ +avatar?: ?EmojiAvatar, +username?: ?string, ... }, | |||||
| ): EmojiAvatar { | |||||
ginsu: We will update this type in a subsequent diff when the logic for avatars with images are… | |||||
| if (user?.avatar) { | |||||
| return user.avatar; | |||||
| } | |||||
| if (!user?.username) { | |||||
| return defaultEmojiAvatars[0]; | |||||
ashoatUnsubmitted Is there a better emoji we can use for unknown users? Should we consider just omitting the avatar, and allowing the component that renders the avatar to handle displaying a default? ashoat: Is there a better emoji we can use for unknown users? Should we consider just omitting the… | |||||
ginsuAuthorUnsubmitted Yea definitely open to changing the emoji. I went with 😀 because I felt it was the safest option. Please lmk if you had another emoji or something else in mind
I'll further explore this idea. Initially, I considered implementing it while building but decided against it. I anticipated reusing the avatar component when introducing avatars for threads and thought it would be better to first create the avatar info logic outside the component and then pass in the avatar info into the avatar component (as seen in D7057) instead of passing in either user or thread info into the avatar component and then creating the avatar info inside of the comopnent. Lmk if this approach is okay, if we feel better about allowing the avatar component to determine the default avatar. I can make the changes. ginsu: Yea definitely open to changing the emoji. I went with 😀 because I felt it was the safest… | |||||
ashoatUnsubmitted
Can you try Googling for "anonymous emoji" to try to find some alternatives? Yea definitely open to changing the emoji. I went with 😀 because I felt it was the safest option. Please lmk if you had another emoji or something else in mind
When I asked that question earlier, I wasn't clear on where this function was supposed to be used. Now that I realize it's called from the render component, it's clear that you're basically already doing what I suggested: "allowing the component that renders the avatar to handle displaying a default". ashoat: > Yea definitely open to changing the emoji. I went with 😀 because I felt it was the safest… | |||||
ginsuAuthorUnsubmitted
Getting a ton of results that have the anonymous hacker group mask on an emoji lol. Other things I found are the classic no profile picture human outline:   In the figma I did find this design we could use as the "anonymous emoji" (We would get rid the upload photo floating button)  To be honest, not a huge fan of any of these options. I will think more about this later tonight and ask Ted if he has any ideas to improve this ginsu: > Can you try Googling for "anonymous emoji" to try to find some alternatives?
Getting a ton… | |||||
ashoatUnsubmitted Those are images, I meant emojis ashoat: Those are images, I meant emojis | |||||
varunUnsubmitted https://emojipedia.org/bust-in-silhouette/ maybe this one? varun: https://emojipedia.org/bust-in-silhouette/ maybe this one? | |||||
ashoatUnsubmitted That looks perfect! ashoat: That looks perfect! | |||||
| } | |||||
| const avatarIndex = stringHash(user.username) % defaultEmojiAvatars.length; | |||||
ashoatUnsubmitted What's the benefit of making selection "stable" as opposed to selecting an emoji at random? We'll need a random selector anyways to allow the user to "reroll" a proposed emoji avatar, so I figured we might as well implement that from the start? ashoat: What's the benefit of making selection "stable" as opposed to selecting an emoji at random? | |||||
ashoatUnsubmitted Ah okay, this is used on the client side for determining an emoji for a given user that doesn't have one set, which is why it needs to be "stable" (This wasn't clear until I read D7057) ashoat: Ah okay, this is used on the client side for determining an emoji for a given user that doesn't… | |||||
ginsuAuthorUnsubmitted
I can introduce this in a follow up diff when we introduce the "reroll" logic ginsu: > We'll need a random selector anyways to allow the user to "reroll" a proposed emoji avatar… | |||||
| return defaultEmojiAvatars[avatarIndex]; | |||||
| } | |||||
| export { getAvatarForUser }; | |||||
We will update this type in a subsequent diff when the logic for avatars with images are introduced