diff --git a/src/api/chat-history/IChatEntry.ts b/src/api/chat-history/IChatEntry.ts index bbef07e5..1bf7a520 100644 --- a/src/api/chat-history/IChatEntry.ts +++ b/src/api/chat-history/IChatEntry.ts @@ -1,6 +1,7 @@ export interface IChatEntry { id: number; + webId: number; entityId: number; name: string; look?: string; diff --git a/src/components/help/views/ReportSummaryView.tsx b/src/components/help/views/ReportSummaryView.tsx index 0eed2666..1aa04031 100644 --- a/src/components/help/views/ReportSummaryView.tsx +++ b/src/components/help/views/ReportSummaryView.tsx @@ -19,13 +19,13 @@ export const ReportSummaryView: FC<{}> = props => case ReportType.ROOM: { const reportedRoomId = ((activeReport.roomId <= 0) ? activeReport.reportedChats[0].roomId : activeReport.roomId); - activeReport.reportedChats.forEach(entry => chats.push(entry.entityId, entry.message)); + activeReport.reportedChats.forEach(entry => chats.push(entry.webId, entry.message)); SendMessageComposer(new CallForHelpMessageComposer(activeReport.message, activeReport.cfhTopic, activeReport.reportedUserId, reportedRoomId, chats)); break; } case ReportType.IM: - activeReport.reportedChats.forEach(entry => chats.push(entry.entityId, entry.message)); + activeReport.reportedChats.forEach(entry => chats.push(entry.webId, entry.message)); SendMessageComposer(new CallForHelpFromIMMessageComposer(activeReport.message, activeReport.cfhTopic, activeReport.reportedUserId, chats)); break; diff --git a/src/components/help/views/SelectReportedChatsView.tsx b/src/components/help/views/SelectReportedChatsView.tsx index 0dfba492..8873f167 100644 --- a/src/components/help/views/SelectReportedChatsView.tsx +++ b/src/components/help/views/SelectReportedChatsView.tsx @@ -16,9 +16,9 @@ export const SelectReportedChatsView: FC<{}> = props => { case ReportType.BULLY: case ReportType.EMERGENCY: - return chatHistory.filter(chat => (chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityId === activeReport.reportedUserId) && (chat.entityType === RoomObjectType.USER)); + return chatHistory.filter(chat => (chat.type === ChatEntryType.TYPE_CHAT) && (chat.webId === activeReport.reportedUserId) && (chat.entityType === RoomObjectType.USER)); case ReportType.IM: - return messengerHistory.filter(chat => (chat.entityId === activeReport.reportedUserId) && (chat.type === ChatEntryType.TYPE_IM)); + return messengerHistory.filter(chat => (chat.webId === activeReport.reportedUserId) && (chat.type === ChatEntryType.TYPE_IM)); } return []; diff --git a/src/components/help/views/SelectReportedUserView.tsx b/src/components/help/views/SelectReportedUserView.tsx index 599a1caf..834af4d4 100644 --- a/src/components/help/views/SelectReportedUserView.tsx +++ b/src/components/help/views/SelectReportedUserView.tsx @@ -16,7 +16,7 @@ export const SelectReportedUserView: FC<{}> = props => chatHistory.forEach(chat => { - if((chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityType === RoomObjectType.USER) && (chat.entityId !== GetSessionDataManager().userId) && !users.has(chat.entityId)) users.set(chat.entityId, { id: chat.entityId, username: chat.name }); + if((chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityType === RoomObjectType.USER) && (chat.webId !== GetSessionDataManager().userId) && !users.has(chat.webId)) users.set(chat.webId, { id: chat.webId, username: chat.name }); }); return Array.from(users.values()); diff --git a/src/components/room/widgets/chat/ChatWidgetMessageView.tsx b/src/components/room/widgets/chat/ChatWidgetMessageView.tsx index cc63422b..19eb6a56 100644 --- a/src/components/room/widgets/chat/ChatWidgetMessageView.tsx +++ b/src/components/room/widgets/chat/ChatWidgetMessageView.tsx @@ -6,13 +6,12 @@ interface ChatWidgetMessageViewProps { chat: ChatBubbleMessage; makeRoom: (chat: ChatBubbleMessage) => void; - onBubbleReady?: () => void; bubbleWidth?: number; } export const ChatWidgetMessageView: FC = props => { - const { chat = null, makeRoom = null, onBubbleReady = null, bubbleWidth = RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL } = props; + const { chat = null, makeRoom = null, bubbleWidth = RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL } = props; const [ isVisible, setIsVisible ] = useState(false); const [ isReady, setIsReady ] = useState(false); const elementRef = useRef(); @@ -73,10 +72,8 @@ export const ChatWidgetMessageView: FC = props => if(makeRoom) makeRoom(chat); - if(onBubbleReady) onBubbleReady(); - setIsVisible(true); - }, [ chat, isReady, isVisible, makeRoom, onBubbleReady ]); + }, [ chat, isReady, isVisible, makeRoom ]); return (
GetRoomEngine().selectRoomObject(chat.roomId, chat.senderId, RoomObjectCategory.UNIT) }> diff --git a/src/components/room/widgets/chat/ChatWidgetView.tsx b/src/components/room/widgets/chat/ChatWidgetView.tsx index 15d9835f..576094fc 100644 --- a/src/components/room/widgets/chat/ChatWidgetView.tsx +++ b/src/components/room/widgets/chat/ChatWidgetView.tsx @@ -1,24 +1,19 @@ import { RoomChatSettings } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useRef, useState } from 'react'; +import { FC, useCallback, useEffect, useRef } from 'react'; import { ChatBubbleMessage, DoChatsOverlap, GetConfiguration } from '../../../../api'; import { useChatWidget } from '../../../../hooks'; import IntervalWebWorker from '../../../../workers/IntervalWebWorker'; import { WorkerBuilder } from '../../../../workers/WorkerBuilder'; import { ChatWidgetMessageView } from './ChatWidgetMessageView'; -let TIMER_TRACKER: number = 0; - export const ChatWidgetView: FC<{}> = props => { - const [ timerId, setTimerId ] = useState(TIMER_TRACKER++); - const { pendingChats = null, chatSettings = null, getScrollSpeed = 6000 } = useChatWidget(); - const [ renderedChats, setRenderedChats ] = useState([]); + const { chatMessages = [], setChatMessages = null, chatSettings = null, getScrollSpeed = 6000 } = useChatWidget(); const elementRef = useRef(); - const isProcessing = useRef(false); const removeHiddenChats = useCallback(() => { - setRenderedChats(prevValue => + setChatMessages(prevValue => { if(prevValue) { @@ -29,22 +24,16 @@ export const ChatWidgetView: FC<{}> = props => return prevValue; }) - }, []); + }, [ setChatMessages ]); const checkOverlappingChats = useCallback((chat: ChatBubbleMessage, moved: number, tempChats: ChatBubbleMessage[]) => { - const totalChats = renderedChats.length; - - if(!totalChats) return; - - for(let i = (totalChats - 1); i >= 0; i--) + for(let i = (chatMessages.indexOf(chat) - 1); i >= 0; i--) { - const collides = renderedChats[i]; + const collides = chatMessages[i]; if(!collides || (chat === collides) || (tempChats.indexOf(collides) >= 0) || (((collides.top + collides.height) - moved) > (chat.top + chat.height))) continue; - chat.skipMovement = true; - if(DoChatsOverlap(chat, collides, -moved, 0)) { const amount = Math.abs((collides.top + collides.height) - chat.top); @@ -57,7 +46,7 @@ export const ChatWidgetView: FC<{}> = props => checkOverlappingChats(collides, amount, tempChats); } } - }, [ renderedChats ]); + }, [ chatMessages ]); const makeRoom = useCallback((chat: ChatBubbleMessage) => { @@ -78,7 +67,7 @@ export const ChatWidgetView: FC<{}> = props => if(spaceAvailable < requiredSpace) { - setRenderedChats(prevValue => + setChatMessages(prevValue => { prevValue.forEach(prevChat => { @@ -93,12 +82,7 @@ export const ChatWidgetView: FC<{}> = props => removeHiddenChats(); } } - }, [ chatSettings, checkOverlappingChats, removeHiddenChats ]); - - const onBubbleReady = useCallback(() => - { - isProcessing.current = false; - }, []); + }, [ chatSettings, checkOverlappingChats, removeHiddenChats, setChatMessages ]); useEffect(() => { @@ -111,7 +95,7 @@ export const ChatWidgetView: FC<{}> = props => elementRef.current.style.height = `${ newHeight }px`; - setRenderedChats(prevValue => + setChatMessages(prevValue => { if(prevValue) { @@ -130,40 +114,13 @@ export const ChatWidgetView: FC<{}> = props => { window.removeEventListener('resize', resize); } - }, []); - - useEffect(() => - { - const processNextChat = () => - { - if(isProcessing.current) return; - - const chat = pendingChats?.current?.shift(); - - if(!chat) return; - - isProcessing.current = true; - - setRenderedChats(prevValue => [ ...prevValue, chat ]); - } - - const worker = new WorkerBuilder(IntervalWebWorker); - - worker.onmessage = () => processNextChat(); - - worker.postMessage({ action: 'START', content: 50 }); - - return () => - { - worker.postMessage({ action: 'STOP' }); - } - }, [ pendingChats ]); + }, [ setChatMessages ]); useEffect(() => { const moveAllChatsUp = (amount: number) => { - setRenderedChats(prevValue => + setChatMessages(prevValue => { prevValue.forEach(chat => { @@ -185,10 +142,7 @@ export const ChatWidgetView: FC<{}> = props => const worker = new WorkerBuilder(IntervalWebWorker); - worker.onmessage = () => - { - moveAllChatsUp(15); - } + worker.onmessage = () => moveAllChatsUp(15); worker.postMessage({ action: 'START', content: getScrollSpeed }); @@ -196,11 +150,11 @@ export const ChatWidgetView: FC<{}> = props => { worker.postMessage({ action: 'STOP' }); } - }, [ getScrollSpeed, removeHiddenChats ]); + }, [ getScrollSpeed, removeHiddenChats, setChatMessages ]); return (
- { renderedChats.map(chat => ) } + { chatMessages.map(chat => ) }
); } diff --git a/src/hooks/chat-history/useChatHistory.ts b/src/hooks/chat-history/useChatHistory.ts index fe619dcc..a2f3c346 100644 --- a/src/hooks/chat-history/useChatHistory.ts +++ b/src/hooks/chat-history/useChatHistory.ts @@ -77,7 +77,7 @@ const useChatHistoryState = () => if(roomHistory[(roomHistory.length - 1)].id === parser.data.roomId) return; } - addChatEntry({ id: -1, entityId: parser.data.roomId, name: parser.data.roomName, timestamp: ChatHistoryCurrentDate(), type: ChatEntryType.TYPE_ROOM_INFO, roomId: parser.data.roomId }); + addChatEntry({ id: -1, webId: -1, entityId: -1, name: parser.data.roomName, timestamp: ChatHistoryCurrentDate(), type: ChatEntryType.TYPE_ROOM_INFO, roomId: parser.data.roomId }); addRoomHistoryEntry({ id: parser.data.roomId, name: parser.data.roomName }); @@ -88,14 +88,14 @@ const useChatHistoryState = () => { const parser = event.getParser(); - addMessengerEntry({ id: -1, entityId: parser.senderId, name: '', message: parser.messageText, roomId: -1, timestamp: MessengerHistoryCurrentDate(parser.secondsSinceSent), type: ChatEntryType.TYPE_IM }); + addMessengerEntry({ id: -1, webId: parser.senderId, entityId: -1, name: '', message: parser.messageText, roomId: -1, timestamp: MessengerHistoryCurrentDate(parser.secondsSinceSent), type: ChatEntryType.TYPE_IM }); }); useMessageEvent(RoomInviteEvent, event => { const parser = event.getParser(); - addMessengerEntry({ id: -1, entityId: parser.senderId, name: '', message: parser.messageText, roomId: -1, timestamp: MessengerHistoryCurrentDate(), type: ChatEntryType.TYPE_IM }); + addMessengerEntry({ id: -1, webId: parser.senderId, entityId: -1, name: '', message: parser.messageText, roomId: -1, timestamp: MessengerHistoryCurrentDate(), type: ChatEntryType.TYPE_IM }); }); return { addChatEntry, chatHistory, roomHistory, messengerHistory }; diff --git a/src/hooks/rooms/widgets/useChatWidget.ts b/src/hooks/rooms/widgets/useChatWidget.ts index 8c9cb6e2..0edfb5f0 100644 --- a/src/hooks/rooms/widgets/useChatWidget.ts +++ b/src/hooks/rooms/widgets/useChatWidget.ts @@ -22,7 +22,6 @@ const useChatWidgetState = () => const { roomSession = null } = useRoom(); const { addChatEntry } = useChatHistory(); const isDisposed = useRef(false); - const pendingChats = useRef([]); const getScrollSpeed = useMemo(() => { @@ -209,8 +208,7 @@ const useChatWidgetState = () => color); setChatMessages(prevValue => [ ...prevValue, chatMessage ]); - pendingChats?.current?.push(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 }); + addChatEntry({ id: -1, webId: userData.webID, 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.ROOM_DRAG, event => @@ -248,7 +246,7 @@ const useChatWidgetState = () => } }, []); - return { chatMessages, setChatMessages, chatSettings, getScrollSpeed, pendingChats }; + return { chatMessages, setChatMessages, chatSettings, getScrollSpeed }; } export const useChatWidget = useChatWidgetState;