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

Chat History update

Browse Source
This commit is contained in:
MyNameIsBatman 2022-09-17 00:11:46 -03:00
parent e9d9fd4253
commit 0d0f1bf62c
4 changed files with 103 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/chat-history/IChatEntry.ts
View File

@ -6,6 +6,10 @@ export interface IChatEntry
look?: string;
message?: string;
entityType?: number;
style?: number;
chatType?: number;
imageUrl?: string;
color?: string;
roomId: number;
timestamp: string;
type: number;

112
src/components/chat-history/ChatHistoryView.tsx
View File

@ -1,33 +1,90 @@
import { ILinkEventTracker } from '@nitrots/nitro-renderer';
import { AvatarFigurePartType, AvatarScaleType, AvatarSetType, ILinkEventTracker } from '@nitrots/nitro-renderer';
import { FC, useEffect, useMemo, useRef, useState } from 'react';
import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
import { AddEventLinkTracker, ChatEntryType, LocalizeText, RemoveLinkEventTracker } from '../../api';
import { AddEventLinkTracker, ChatEntryType, GetAvatarRenderManager, LocalizeText, RemoveLinkEventTracker } from '../../api';
import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
import { useChatHistory } from '../../hooks';
const avatarColorCache: Map<string, number> = new Map();
const avatarImageCache: Map<string, string> = new Map();
export const ChatHistoryView: FC<{}> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const { chatHistory = [] } = useChatHistory();
const elementRef = useRef<List>(null);
const [ searchText, setSearchText ] = useState<string>('z');
const setFigureImage = (figure: string) =>
{
const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, null, {
resetFigure: figure =>
{
setFigureImage(figure);
},
dispose: () =>
{},
disposed: false
});
if(!avatarImage) return;
const image = avatarImage.getCroppedImage(AvatarSetType.HEAD);
const color = avatarImage.getPartColor(AvatarFigurePartType.CHEST);
avatarColorCache.set(figure, ((color && color.rgb) || 16777215));
avatarImage.dispose();
avatarImageCache.set(figure, image.src);
return image.src;
}
const getUserImage = (figure: string) =>
{
let existing = avatarImageCache.get(figure);
if(!existing) existing = setFigureImage(figure);
return existing;
}
const cache = useMemo(() => new CellMeasurerCache({ defaultHeight: 25, fixedWidth: true }), []);
const filteredChatHistory = useMemo(() =>
{
if (searchText.length === 0) return chatHistory;
return chatHistory.filter((i) => i.message && i.message.includes(searchText));
}, [ chatHistory, searchText ]);
const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
{
const item = chatHistory[props.index];
const item = filteredChatHistory[props.index];
const isDark = (props.index % 2 === 0);
if (!item) return null;
return (
<CellMeasurer cache={ cache } columnIndex={ 0 } key={ props.key } parent={ props.parent } rowIndex={ props.index }>
<Flex key={ props.key } style={ props.style } className="p-1" gap={ 1 }>
<Flex key={ props.key } style={ props.style } className="p-1" gap={ 2 }>
<Text variant="muted">{ item.timestamp }</Text>
{ (item.type === ChatEntryType.TYPE_CHAT) &&
<>
<Text pointer noWrap dangerouslySetInnerHTML={ { __html: (item.name + ':') } } />
<Text textBreak wrap grow>{ item.message }</Text>
</> }
<div className="bubble-container" style={ { position: 'relative' } }>
{ (item.style === 0) &&
<div className="user-container-bg" style={ { backgroundColor: item.color } } /> }
<div className={ `chat-bubble bubble-${ item.style } type-${ item.chatType }` } style={ { maxWidth: '100%' } }>
<div className="user-container">
{ item.imageUrl && (item.imageUrl.length > 0) &&
<div className="user-image" style={ { backgroundImage: `url(${ item.imageUrl })` } } /> }
</div>
<div className="chat-content">
<b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ item.name }: ` } } />
<span className="message" dangerouslySetInnerHTML={ { __html: `${ item.message }` } } />
</div>
</div>
</div> }
{ (item.type === ChatEntryType.TYPE_ROOM_INFO) &&
<>
<i className="icon icon-small-room" />
@ -81,22 +138,27 @@ export const ChatHistoryView: FC<{}> = props =>
<NitroCardView uniqueKey="chat-history" className="nitro-chat-history" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('room.chathistory.button.text') } onCloseClick={ event => setIsVisible(false) }/>
<NitroCardContentView>
<AutoSizer defaultWidth={ 300 } defaultHeight={ 200 } onResize={ onResize }>
{ ({ height, width }) =>
{
return (
<List
ref={ elementRef }
width={ width }
height={ height }
rowCount={ chatHistory.length }
rowHeight={ cache.rowHeight }
className={ 'chat-history-list' }
rowRenderer={ RowRenderer }
deferredMeasurementCache={ cache } />
)
} }
</AutoSizer>
<Flex column fullHeight gap={ 2 }>
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchText } onChange={ event => setSearchText(event.target.value) } />
<div className="h-100">
<AutoSizer defaultWidth={ 300 } defaultHeight={ 170 } onResize={ onResize }>
{ ({ height, width }) =>
{
return (
<List
ref={ elementRef }
width={ width }
height={ height }
rowCount={ chatHistory.length }
rowHeight={ cache.rowHeight }
className={ 'chat-history-list' }
rowRenderer={ RowRenderer }
deferredMeasurementCache={ cache } />
)
} }
</AutoSizer>
</div>
</Flex>
</NitroCardContentView>
</NitroCardView>
);

19
src/hooks/chat-history/useChatHistory.ts
View File

@ -1,7 +1,7 @@
import { GetGuestRoomResultEvent, NewConsoleMessageEvent, RoomInviteEvent, RoomSessionChatEvent, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { GetGuestRoomResultEvent, NewConsoleMessageEvent, RoomInviteEvent, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { useState } from 'react';
import { useBetween } from 'use-between';
import { ChatEntryType, ChatHistoryCurrentDate, GetRoomSession, IChatEntry, IRoomHistoryEntry, MessengerHistoryCurrentDate } from '../../api';
import { ChatEntryType, ChatHistoryCurrentDate, IChatEntry, IRoomHistoryEntry, MessengerHistoryCurrentDate } from '../../api';
import { useMessageEvent, useRoomSessionManagerEvent } from '../events';
const CHAT_HISTORY_MAX = 1000;
@ -64,19 +64,6 @@ const useChatHistoryState = () =>
});
}
useRoomSessionManagerEvent<RoomSessionChatEvent>(RoomSessionChatEvent.CHAT_EVENT, event =>
{
const roomSession = GetRoomSession();
if(!roomSession) return;
const userData = roomSession.userDataManager.getUserDataByIndex(event.objectId);
if(!userData) return;
addChatEntry({ id: -1, entityId: userData.webID, name: userData.name, look: userData.figure, entityType: userData.type, message: event.message, timestamp: ChatHistoryCurrentDate(), type: ChatEntryType.TYPE_CHAT, roomId: roomSession.roomId });
});
useRoomSessionManagerEvent<RoomSessionEvent>(RoomSessionEvent.STARTED, event => setNeedsRoomInsert(true));
useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event =>
@ -111,7 +98,7 @@ const useChatHistoryState = () =>
addMessengerEntry({ id: -1, entityId: parser.senderId, name: '', message: parser.messageText, roomId: -1, timestamp: MessengerHistoryCurrentDate(), type: ChatEntryType.TYPE_IM });
});
return { chatHistory, roomHistory, messengerHistory };
return { addChatEntry, chatHistory, roomHistory, messengerHistory };
}
export const useChatHistory = () => useBetween(useChatHistoryState);

12
src/hooks/rooms/widgets/useChatWidget.ts
View File

@ -1,8 +1,9 @@
import { AvatarFigurePartType, AvatarScaleType, AvatarSetType, GetGuestRoomResultEvent, NitroPoint, PetFigureData, RoomChatSettings, RoomChatSettingsEvent, RoomDragEvent, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomSessionChatEvent, RoomUserData, SystemChatStyleEnum, TextureUtils, Vector3d } from '@nitrots/nitro-renderer';
import { useEffect, useMemo, useRef, useState } from 'react';
import { ChatBubbleMessage, GetAvatarRenderManager, GetConfigurationManager, GetRoomEngine, GetRoomObjectScreenLocation, IRoomChatSettings, LocalizeText, PlaySound, RoomChatFormatter } from '../../../api';
import { ChatBubbleMessage, ChatEntryType, ChatHistoryCurrentDate, GetAvatarRenderManager, GetConfigurationManager, GetRoomEngine, GetRoomObjectScreenLocation, IRoomChatSettings, LocalizeText, PlaySound, RoomChatFormatter } from '../../../api';
import { useMessageEvent, useRoomEngineEvent, useRoomSessionManagerEvent } from '../../events';
import { useRoom } from '../useRoom';
import { useChatHistory } from './../../chat-history/useChatHistory';
const avatarColorCache: Map<string, number> = new Map();
const avatarImageCache: Map<string, string> = new Map();
@ -19,6 +20,7 @@ const useChatWidgetState = () =>
protection: RoomChatSettings.FLOOD_FILTER_NORMAL
});
const { roomSession = null } = useRoom();
const { addChatEntry } = useChatHistory();
const isDisposed = useRef(false);
const getScrollSpeed = useMemo(() =>
@ -229,20 +231,24 @@ const useChatWidgetState = () =>
}
}
const formattedText = RoomChatFormatter(text);
const color = (avatarColor && (('#' + (avatarColor.toString(16).padStart(6, '0'))) || null));
const chatMessage = new ChatBubbleMessage(
userData.roomIndex,
RoomObjectCategory.UNIT,
roomSession.roomId,
text,
RoomChatFormatter(text),
formattedText,
username,
new NitroPoint(bubbleLocation.x, bubbleLocation.y),
chatType,
styleId,
imageUrl,
(avatarColor && (('#' + (avatarColor.toString(16).padStart(6, '0'))) || null)));
color);
setChatMessages(prevValue => [ ...prevValue, chatMessage ]);
addChatEntry({ id: -1, entityId: userData.roomIndex, name: username, imageUrl, style: styleId, chatType: chatType, entityType: userData.type, message: formattedText, timestamp: ChatHistoryCurrentDate(), type: ChatEntryType.TYPE_CHAT, roomId: roomSession.roomId, color });
});
useRoomEngineEvent<RoomDragEvent>(RoomDragEvent.ROOM_DRAG, event =>