diff --git a/webroot/js/components/chat/chat-message-view.js b/webroot/js/components/chat/chat-message-view.js index b9941b8ff..9705d4fdd 100644 --- a/webroot/js/components/chat/chat-message-view.js +++ b/webroot/js/components/chat/chat-message-view.js @@ -42,11 +42,15 @@ export default class ChatMessageView extends Component { render() { const { message, isModerator, accessToken } = this.props; const { user, timestamp } = message; - const { displayName, displayColor, createdAt, + const { + displayName, + displayColor, + createdAt, isModerator: isAuthorModerator, - } = user; + } = user; - const isMessageModeratable = isModerator && message.type === SOCKET_MESSAGE_TYPES.CHAT; + const isMessageModeratable = + isModerator && message.type === SOCKET_MESSAGE_TYPES.CHAT; const { formattedMessage } = this.state; if (!formattedMessage) { @@ -67,7 +71,9 @@ export default class ChatMessageView extends Component { : { backgroundColor: messageBubbleColorForHue(displayColor) }; const messageClassString = isSystemMessage ? 'message flex flex-row items-start p-4 m-2 rounded-lg shadow-l border-solid border-indigo-700 border-2 border-opacity-60 text-l' - : `message relative flex flex-row items-start p-3 m-3 rounded-lg shadow-s text-sm ${isMessageModeratable ? 'moderatable' : ''}`; + : `message relative flex flex-row items-start p-3 m-3 rounded-lg shadow-s text-sm ${ + isMessageModeratable ? 'moderatable' : '' + }`; return html`
${displayName}
- ${isMessageModeratable && html`<${ModeratorActions} message=${message} accessToken=${accessToken} />`} + ${isMessageModeratable && + html`<${ModeratorActions} + message=${message} + accessToken=${accessToken} + />`}
-
-
+
+
+
${contents}
@@ -36,22 +42,25 @@ export default function Message(props) { ${displayName}. `; - return html`<${SystemMessage} contents=${contents}/>`; + return html`<${SystemMessage} contents=${contents} />`; } else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) { const { displayName } = user; - const contents = html`${displayName} joined the chat.`; - return html`<${SystemMessage} contents=${contents}/>`; + const contents = html`${displayName} joined + the chat.`; + return html`<${SystemMessage} contents=${contents} />`; } else if (type === SOCKET_MESSAGE_TYPES.CHAT_ACTION) { const contents = html``; - return html`<${SystemMessage} contents=${contents}/>`; + return html`<${SystemMessage} contents=${contents} />`; } else if (type === SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO) { // moderator message const isModerator = checkIsModerator(message); if (isModerator) { - const contents = html`You are now a moderator.`; - return html`<${SystemMessage} contents=${contents}/>`; + const contents = html`You are now a moderator.`; + return html`<${SystemMessage} contents=${contents} />`; } } else { console.log('Unknown message type:', type); diff --git a/webroot/js/components/chat/moderator-actions.js b/webroot/js/components/chat/moderator-actions.js index e12762807..21ee039ee 100644 --- a/webroot/js/components/chat/moderator-actions.js +++ b/webroot/js/components/chat/moderator-actions.js @@ -106,7 +106,7 @@ class ModeratorMenu extends Component { } async handleHideMessage() { - if (!confirm("Are you sure you want to remove this message from chat?")) { + if (!confirm('Are you sure you want to remove this message from chat?')) { this.props.onDismiss(); return; } @@ -126,7 +126,7 @@ class ModeratorMenu extends Component { try { await fetch(hideMessageUrl, options); - } catch(e) { + } catch (e) { console.error(e); } @@ -134,7 +134,7 @@ class ModeratorMenu extends Component { } async handleBanUser() { - if (!confirm("Are you sure you want to remove this user from chat?")) { + if (!confirm('Are you sure you want to remove this user from chat?')) { this.props.onDismiss(); return; } @@ -154,7 +154,7 @@ class ModeratorMenu extends Component { try { await fetch(hideMessageUrl, options); - } catch(e) { + } catch (e) { console.error(e); } @@ -196,7 +196,11 @@ class ModeratorMenu extends Component { /> ${displayMoreInfo && - html`<${ModeratorMoreInfoContainer} message=${message} handleBanUser=${this.handleBanUser} handleHideMessage=${this.handleHideMessage} />`} + html`<${ModeratorMoreInfoContainer} + message=${message} + handleBanUser=${this.handleBanUser} + handleHideMessage=${this.handleHideMessage} + />`} `; } @@ -226,14 +230,13 @@ function ModeratorMenuItem({ icon, hoverIcon, label, onClick }) { } // more details panel that display message, prev usernames, actions -function ModeratorMoreInfoContainer({ message, handleHideMessage, handleBanUser }) { +function ModeratorMoreInfoContainer({ + message, + handleHideMessage, + handleBanUser, +}) { const { user, timestamp, body } = message; - const { - displayName, - createdAt, - previousNames, - displayColor, - } = user; + const { displayName, createdAt, previousNames, displayColor } = user; const isAuthorModerator = user.scopes && user.scopes.contains('MODERATOR'); const authorTextColor = { color: textColorForHue(displayColor) }; diff --git a/webroot/js/components/chat/username.js b/webroot/js/components/chat/username.js index ea4350cd4..f942d80d8 100644 --- a/webroot/js/components/chat/username.js +++ b/webroot/js/components/chat/username.js @@ -3,7 +3,10 @@ import htm from '/js/web_modules/htm.js'; const html = htm.bind(h); import { setLocalStorage } from '../../utils/helpers.js'; -import { KEY_USERNAME, KEY_CUSTOM_USERNAME_SET } from '../../utils/constants.js'; +import { + KEY_USERNAME, + KEY_CUSTOM_USERNAME_SET, +} from '../../utils/constants.js'; export default class UsernameForm extends Component { constructor(props, context) { @@ -38,11 +41,13 @@ export default class UsernameForm extends Component { } handleKeydown(event) { - if (event.keyCode === 13) { // enter - this.handleUpdateUsername(); - } else if (event.keyCode === 27) { // esc - this.handleHideForm(); - } + if (event.keyCode === 13) { + // enter + this.handleUpdateUsername(); + } else if (event.keyCode === 27) { + // esc + this.handleHideForm(); + } } handleUpdateUsername() { @@ -72,7 +77,7 @@ export default class UsernameForm extends Component { if (onBlur) { onBlur(); } - } + } render(props, state) { const { username, isModerator } = props; @@ -87,32 +92,60 @@ export default class UsernameForm extends Component { }, }; - - - return ( - html` -
-
- ${username} -
- -
- - - - -
+ return html` +
+
+ ${username}
- `); + +
+ + + + +
+
+ `; } } diff --git a/webroot/js/utils/chat.js b/webroot/js/utils/chat.js index 9cafe9b31..0cfd821b1 100644 --- a/webroot/js/utils/chat.js +++ b/webroot/js/utils/chat.js @@ -183,7 +183,6 @@ export function emojify(HTML, emojiList) { return HTML; } - // MODERATOR UTILS export function checkIsModerator(message) { const { user } = message;