diff --git a/webroot/js/app-standalone-chat.js b/webroot/js/app-standalone-chat.js index b57b32255..86e4873d1 100644 --- a/webroot/js/app-standalone-chat.js +++ b/webroot/js/app-standalone-chat.js @@ -4,8 +4,8 @@ const html = htm.bind(h); import Chat from './components/chat/chat.js'; import Websocket from './utils/websocket.js'; -import { getLocalStorage, generateAvatar, generateUsername } from './utils/helpers.js'; -import { KEY_USERNAME, KEY_AVATAR } from './utils/constants.js'; +import { getLocalStorage, generateUsername } from './utils/helpers.js'; +import { KEY_USERNAME } from './utils/constants.js'; export default class StandaloneChat extends Component { constructor(props, context) { @@ -15,28 +15,25 @@ export default class StandaloneChat extends Component { websocket: new Websocket(), chatEnabled: true, // always true for standalone chat username: getLocalStorage(KEY_USERNAME) || generateUsername(), - userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`), }; this.websocket = null; this.handleUsernameChange = this.handleUsernameChange.bind(this); } - handleUsernameChange(newName, newAvatar) { + handleUsernameChange(newName) { this.setState({ username: newName, - userAvatarImage: newAvatar, }); } render(props, state) { - const { username, userAvatarImage, websocket } = state; + const { username, websocket } = state; return ( html` <${Chat} websocket=${websocket} username=${username} - userAvatarImage=${userAvatarImage} messagesOnly /> ` diff --git a/webroot/js/app.js b/webroot/js/app.js index 71beb289f..672e2b1af 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -14,7 +14,6 @@ import { classNames, clearLocalStorage, debounce, - generateAvatar, generateUsername, getLocalStorage, pluralize, @@ -22,7 +21,6 @@ import { } from './utils/helpers.js'; import { HEIGHT_SHORT_WIDE, - KEY_AVATAR, KEY_CHAT_DISPLAYED, KEY_USERNAME, MESSAGE_OFFLINE, @@ -50,9 +48,6 @@ export default class App extends Component { displayChat: chatStorage === null ? true : chatStorage, chatInputEnabled: false, // chat input box state username: getLocalStorage(KEY_USERNAME) || generateUsername(), - userAvatarImage: - getLocalStorage(KEY_AVATAR) || - generateAvatar(`${this.username}${Date.now()}`), configData: {}, extraUserContent: '', @@ -282,10 +277,9 @@ export default class App extends Component { } - handleUsernameChange(newName, newAvatar) { + handleUsernameChange(newName) { this.setState({ username: newName, - userAvatarImage: newAvatar, }); } @@ -330,7 +324,6 @@ export default class App extends Component { playerActive, streamOnline, streamStatusMessage, - userAvatarImage, username, viewerCount, websocket, @@ -415,7 +408,6 @@ export default class App extends Component { > <${UsernameForm} username=${username} - userAvatarImage=${userAvatarImage} handleUsernameChange=${this.handleUsernameChange} /> diff --git a/webroot/js/components/chat/chat.js b/webroot/js/components/chat/chat.js index 928151bfb..2e2f79192 100644 --- a/webroot/js/components/chat/chat.js +++ b/webroot/js/components/chat/chat.js @@ -43,14 +43,14 @@ export default class Chat extends Component { componentDidUpdate(prevProps, prevState) { const { username: prevName } = prevProps; - const { username, userAvatarImage } = this.props; + const { username } = this.props; const { messages: prevMessages } = prevState; const { messages } = this.state; // if username updated, send a message if (prevName !== username) { - this.sendUsernameChange(prevName, username, userAvatarImage); + this.sendUsernameChange(prevName, username); } // scroll to bottom of messages list when new ones come in if (messages.length > prevMessages.length) { @@ -94,12 +94,11 @@ export default class Chat extends Component { }); } - sendUsernameChange(oldName, newName, image) { + sendUsernameChange(oldName, newName) { const nameChange = { type: SOCKET_MESSAGE_TYPES.NAME_CHANGE, oldName, newName, - image, }; this.websocket.send(nameChange); } @@ -145,11 +144,10 @@ export default class Chat extends Component { if (!content) { return; } - const { username, userAvatarImage } = this.props; + const { username } = this.props; const message = { body: content, author: username, - image: userAvatarImage, type: SOCKET_MESSAGE_TYPES.CHAT, }; this.websocket.send(message); diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js index 42b2a95e1..7ca63e1b3 100644 --- a/webroot/js/components/chat/message.js +++ b/webroot/js/components/chat/message.js @@ -3,7 +3,6 @@ import htm from '/js/web_modules/htm.js'; const html = htm.bind(h); import { messageBubbleColorForString } from '../../utils/user-colors.js'; -import { generateAvatar } from '../../utils/helpers.js'; import { convertToText } from '../../utils/chat.js'; import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js'; @@ -12,23 +11,15 @@ export default class Message extends Component { const { message, username } = props; const { type } = message; if (type === SOCKET_MESSAGE_TYPES.CHAT) { - const { image, author, body, timestamp } = message; + const { author, body, timestamp } = message; const formattedMessage = formatMessageText(body, username); - const avatar = image || generateAvatar(author); const formattedTimestamp = formatTimestamp(timestamp); const authorColor = messageBubbleColorForString(author); - const avatarBgColor = { backgroundColor: authorColor }; const authorTextColor = { color: authorColor }; return ( html`