From 1f5f09cb0a4aa18c4885bf61b7c1ca70637f1418 Mon Sep 17 00:00:00 2001 From: Bill Date: Sat, 17 Jul 2021 13:11:12 -0400 Subject: [PATCH] Chat updates --- .../handlers/RoomWidgetChatInputHandler.ts | 6 +++ .../room/widgets/chat/ChatWidgetView.tsx | 14 ++++- .../chat/message/ChatWidgetMessageView.scss | 5 ++ .../chat/message/ChatWidgetMessageView.tsx | 52 ++++--------------- .../message/ChatWidgetMessageView.types.ts | 1 + .../widgets/chat/utils/ChatBubbleMessage.ts | 3 ++ 6 files changed, 36 insertions(+), 45 deletions(-) diff --git a/src/views/room/handlers/RoomWidgetChatInputHandler.ts b/src/views/room/handlers/RoomWidgetChatInputHandler.ts index be32fea5..31b4e797 100644 --- a/src/views/room/handlers/RoomWidgetChatInputHandler.ts +++ b/src/views/room/handlers/RoomWidgetChatInputHandler.ts @@ -176,6 +176,12 @@ export class RoomWidgetChatInputHandler extends RoomWidgetHandler break; } + case RoomWidgetChatSelectAvatarMessage.MESSAGE_SELECT_AVATAR: { + const selectedEvent = (message as RoomWidgetChatSelectAvatarMessage); + + GetRoomEngine().setSelectedAvatar(selectedEvent.roomId, selectedEvent.objectId); + break; + } } return null; diff --git a/src/views/room/widgets/chat/ChatWidgetView.tsx b/src/views/room/widgets/chat/ChatWidgetView.tsx index 18c5a781..d0408b4f 100644 --- a/src/views/room/widgets/chat/ChatWidgetView.tsx +++ b/src/views/room/widgets/chat/ChatWidgetView.tsx @@ -3,13 +3,14 @@ import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../hooks/events'; import { useRoomContext } from '../../context/RoomContext'; import { RoomWidgetUpdateChatEvent } from '../../events'; +import { RoomWidgetChatSelectAvatarMessage, RoomWidgetRoomObjectMessage } from '../../messages'; import { ChatWidgetMessageView } from './message/ChatWidgetMessageView'; import { ChatBubbleMessage } from './utils/ChatBubbleMessage'; export const ChatWidgetView: FC<{}> = props => { const [ chatMessages, setChatMessages ] = useState([]); - const { roomSession = null, eventDispatcher = null } = useRoomContext(); + const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext(); const elementRef = useRef(); const removeHiddenChats = useCallback(() => @@ -63,6 +64,9 @@ export const ChatWidgetView: FC<{}> = props => const onRoomWidgetUpdateChatEvent = useCallback((event: RoomWidgetUpdateChatEvent) => { const chatMessage = new ChatBubbleMessage( + event.userId, + event.userCategory, + event.roomId, event.text, event.userName, new NitroPoint(event.userX, event.userY), @@ -92,6 +96,12 @@ export const ChatWidgetView: FC<{}> = props => useRoomEngineEvent(RoomDragEvent.ROOM_DRAG, onRoomDragEvent); + const onChatClicked = useCallback((chat: ChatBubbleMessage) => + { + widgetHandler.processWidgetMessage(new RoomWidgetRoomObjectMessage(RoomWidgetRoomObjectMessage.GET_OBJECT_INFO, chat.senderId, chat.senderCategory)); + widgetHandler.processWidgetMessage(new RoomWidgetChatSelectAvatarMessage(RoomWidgetChatSelectAvatarMessage.MESSAGE_SELECT_AVATAR, chat.senderId, chat.username, chat.roomId)); + }, [ widgetHandler ]); + useEffect(() => { const interval = setInterval(() => moveAllChatsUp(15), 4500); @@ -106,7 +116,7 @@ export const ChatWidgetView: FC<{}> = props =>
{ chatMessages.map(chat => { - return + return })}
); diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss index d5880584..e2bbbbbf 100644 --- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss +++ b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss @@ -41,6 +41,11 @@ // -webkit-animation-name: bounceIn; // animation-name: bounceIn; + &:hover, + &:active { + pointer-events: none; + } + .user-container-bg { position: absolute; top: -1px; diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx b/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx index 2649b842..c1b3a158 100644 --- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx +++ b/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx @@ -1,49 +1,20 @@ import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react'; +import { useRoomContext } from '../../../context/RoomContext'; import { ChatWidgetMessageViewProps } from './ChatWidgetMessageView.types'; export const ChatWidgetMessageView: FC = props => { - const { chat = null, makeRoom = null } = props; + const { chat = null, makeRoom = null, onChatClicked = null } = props; const [ isVisible, setIsVisible ] = useState(false); - const [ messageParts, setMessageParts ] = useState<{text: string, className?: string, style?: any, onClick?: () => void}[]>(null); + const { widgetHandler = null } = useRoomContext(); const elementRef = useRef(); - const onClick = useCallback((event: MouseEvent) => + const onMouseDown = useCallback((event: MouseEvent) => { + if(event.shiftKey) return; - }, []); - - // useEffect(() => - // { - // if(messageParts) return; - - // const userNameMention = '@' + GetSessionDataManager().userName; - - // const matches = [...chat.text.matchAll(new RegExp(userNameMention + '\\b', 'gi'))]; - - // if(matches.length > 0) - // { - // const prevText = chat.text.substr(0, matches[0].index); - // const postText = chat.text.substring(matches[0].index + userNameMention.length, chat.text.length); - - // setMessageParts( - // [ - // { text: prevText }, - // { text: userNameMention, className: 'chat-mention', onClick: () => {alert('I clicked in the mention')}}, - // { text: postText } - // ] - // ); - // } - // else - // { - // setMessageParts( - // [ - // { text: chat.text } - // ] - // ); - // } - - // }, [ chat ]); + onChatClicked(chat); + }, [ chat, onChatClicked ]); useEffect(() => { @@ -89,20 +60,15 @@ export const ChatWidgetMessageView: FC = props => }, [ chat.visible ]); return ( -
+
{ (chat.styleId === 0) &&
} -
+
{ (chat.imageUrl && (chat.imageUrl !== '')) &&
}
{ chat.text } - {/* { - messageParts && messageParts.map((part, index) => - { - return { part.text } - }) */}
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts b/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts index faff1ef9..330b2886 100644 --- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts +++ b/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts @@ -4,4 +4,5 @@ export interface ChatWidgetMessageViewProps { chat: ChatBubbleMessage; makeRoom: (chat: ChatBubbleMessage) => void; + onChatClicked: (chat: ChatBubbleMessage) => void; } diff --git a/src/views/room/widgets/chat/utils/ChatBubbleMessage.ts b/src/views/room/widgets/chat/utils/ChatBubbleMessage.ts index 153422d8..e05307f9 100644 --- a/src/views/room/widgets/chat/utils/ChatBubbleMessage.ts +++ b/src/views/room/widgets/chat/utils/ChatBubbleMessage.ts @@ -14,6 +14,9 @@ export class ChatBubbleMessage private _left: number = 0; constructor( + public senderId: number = -1, + public senderCategory: number = -1, + public roomId: number = -1, public text: string = '', public username: string = '', public location: INitroPoint = null,