nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Chat updates

Browse Source
This commit is contained in:
Bill 2021-07-17 13:11:12 -04:00
parent 3b18493a41
commit 1f5f09cb0a
6 changed files with 36 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/room/handlers/RoomWidgetChatInputHandler.ts
View File

@ -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;

14
src/views/room/widgets/chat/ChatWidgetView.tsx
View File

@ -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<ChatBubbleMessage[]>([]);
const { roomSession = null, eventDispatcher = null } = useRoomContext();
const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
const elementRef = useRef<HTMLDivElement>();
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 =>
<div ref={ elementRef } className="nitro-chat-widget">
{ chatMessages.map(chat =>
{
return <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } />
return <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } onChatClicked={ onChatClicked } />
})}
</div>
);

5
src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
View File

@ -41,6 +41,11 @@
// -webkit-animation-name: bounceIn;
// animation-name: bounceIn;
&:hover,
&:active {
pointer-events: none;
}
.user-container-bg {
position: absolute;
top: -1px;

52
src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx
View File

@ -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<ChatWidgetMessageViewProps> = 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<HTMLDivElement>();
const onClick = useCallback((event: MouseEvent) =>
const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
{
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<ChatWidgetMessageViewProps> = props =>
}, [ chat.visible ]);
return (
<div ref={ elementRef } className="bubble-container" style={ { visibility: (isVisible ? 'visible' : 'hidden') } }>
<div ref={ elementRef } className="bubble-container" style={ { visibility: (isVisible ? 'visible' : 'hidden') } } onMouseDown={ onMouseDown }>
{ (chat.styleId === 0) && <div className="user-container-bg" style={ { backgroundColor: chat.color } } /> }
<div className={ 'chat-bubble bubble-' + chat.styleId + ' type-' + chat.type } onClick={ onClick }>
<div className={ 'chat-bubble bubble-' + chat.styleId + ' type-' + chat.type }>
<div className="user-container">
{ (chat.imageUrl && (chat.imageUrl !== '')) && <div className="user-image" style={ { backgroundImage: 'url(' + chat.imageUrl + ')' } } /> }
</div>
<div className="chat-content">
<b className="username mr-1" dangerouslySetInnerHTML={ {__html: `${ chat.username }: ` } } />
<span className="message">{ chat.text }</span>
{/* {
messageParts && messageParts.map((part, index) =>
{
return <span key={ index } className={ part.className } style={ part.style } onClick={ part.onClick }>{ part.text }</span>
}) */}
</div>
<div className="pointer"></div>
</div>

1
src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts
View File

@ -4,4 +4,5 @@ export interface ChatWidgetMessageViewProps
{
chat: ChatBubbleMessage;
makeRoom: (chat: ChatBubbleMessage) => void;
onChatClicked: (chat: ChatBubbleMessage) => void;
}

3
src/views/room/widgets/chat/utils/ChatBubbleMessage.ts
View File

@ -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,