mirror of
https://github.com/duckietm/Nitro-Cool-UI.git
synced 2025-06-21 22:36:58 +00:00
⚠️ Rebuild chatbaloons
This commit is contained in:
duckietm
parent
22f3aa4596
commit
cb3b7711d5
@ -1,7 +1,6 @@
|
||||
import { INitroPoint } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class ChatBubbleMessage
|
||||
{
|
||||
export class ChatBubbleMessage {
|
||||
public static BUBBLE_COUNTER: number = 0;
|
||||
|
||||
public id: number = -1;
|
||||
@ -12,7 +11,7 @@ export class ChatBubbleMessage
|
||||
|
||||
private _top: number = 0;
|
||||
private _left: number = 0;
|
||||
|
||||
|
||||
constructor(
|
||||
public senderId: number = -1,
|
||||
public senderCategory: number = -1,
|
||||
@ -25,35 +24,32 @@ export class ChatBubbleMessage
|
||||
public styleId: number = 0,
|
||||
public imageUrl: string = null,
|
||||
public color: string = null,
|
||||
public chatColours: string = ""
|
||||
)
|
||||
{
|
||||
public chatColours: string = ""
|
||||
) {
|
||||
this.id = ++ChatBubbleMessage.BUBBLE_COUNTER;
|
||||
this.color = color;
|
||||
this.chatColours = chatColours;
|
||||
this.color = color;
|
||||
this.chatColours = chatColours;
|
||||
}
|
||||
|
||||
public get top(): number
|
||||
{
|
||||
public get top(): number {
|
||||
return this._top;
|
||||
}
|
||||
|
||||
public set top(value: number)
|
||||
{
|
||||
public set top(value: number) {
|
||||
this._top = value;
|
||||
|
||||
if(this.elementRef) this.elementRef.style.top = (this._top + 'px');
|
||||
if (this.elementRef) {
|
||||
this.elementRef.style.top = `${this._top}px`; // Always update DOM
|
||||
}
|
||||
}
|
||||
|
||||
public get left(): number
|
||||
{
|
||||
public get left(): number {
|
||||
return this._left;
|
||||
}
|
||||
|
||||
public set left(value: number)
|
||||
{
|
||||
public set left(value: number) {
|
||||
this._left = value;
|
||||
|
||||
if(this.elementRef) this.elementRef.style.left = (this._left + 'px');
|
||||
if (this.elementRef) {
|
||||
this.elementRef.style.left = `${this._left}px`; // Always update DOM
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,25 +3,39 @@ import { FC, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ChatBubbleMessage, GetRoomEngine } from '../../../../api';
|
||||
import { useOnClickChat } from '../../../../hooks';
|
||||
|
||||
interface ChatWidgetMessageViewProps
|
||||
{
|
||||
interface ChatWidgetMessageViewProps {
|
||||
chat: ChatBubbleMessage;
|
||||
makeRoom: (chat: ChatBubbleMessage) => void;
|
||||
bubbleWidth?: number;
|
||||
selectedEmoji?: string;
|
||||
selectedEmoji?: string;
|
||||
}
|
||||
|
||||
export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props => {
|
||||
const { chat = null, makeRoom = null, bubbleWidth = RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL, selectedEmoji } = props;
|
||||
const [ isVisible, setIsVisible ] = useState(false);
|
||||
const [ isReady, setIsReady ] = useState<boolean>(false);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [isReady, setIsReady] = useState<boolean>(false);
|
||||
const { onClickChat = null } = useOnClickChat();
|
||||
const elementRef = useRef<HTMLDivElement>();
|
||||
|
||||
const getBubbleWidth = useMemo(() =>
|
||||
{
|
||||
switch(bubbleWidth)
|
||||
{
|
||||
// Memoize chat properties to prevent unnecessary re-renders
|
||||
const chatMemo = useMemo(() => ({
|
||||
id: chat?.id,
|
||||
locationX: chat?.location?.x,
|
||||
top: chat?.top,
|
||||
left: chat?.left,
|
||||
styleId: chat?.styleId,
|
||||
color: chat?.color,
|
||||
chatColours: chat?.chatColours,
|
||||
username: chat?.username,
|
||||
formattedText: chat?.formattedText,
|
||||
imageUrl: chat?.imageUrl,
|
||||
type: chat?.type,
|
||||
roomId: chat?.roomId,
|
||||
senderId: chat?.senderId
|
||||
}), [chat?.id, chat?.location?.x, chat?.top, chat?.left, chat?.styleId, chat?.color, chat?.chatColours, chat?.username, chat?.formattedText, chat?.imageUrl, chat?.type, chat?.roomId, chat?.senderId]);
|
||||
|
||||
const getBubbleWidth = useMemo(() => {
|
||||
switch (bubbleWidth) {
|
||||
case RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL:
|
||||
return 350;
|
||||
case RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN:
|
||||
@ -29,15 +43,12 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props => {
|
||||
case RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE:
|
||||
return 2000;
|
||||
}
|
||||
}, [ bubbleWidth ]);
|
||||
}, [bubbleWidth]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
useEffect(() => {
|
||||
setIsVisible(false);
|
||||
|
||||
const element = elementRef.current;
|
||||
|
||||
if(!element) return;
|
||||
if (!element) return;
|
||||
|
||||
const width = element.offsetWidth;
|
||||
const height = element.offsetHeight;
|
||||
@ -45,54 +56,67 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props => {
|
||||
chat.width = width;
|
||||
chat.height = height;
|
||||
chat.elementRef = element;
|
||||
|
||||
|
||||
let left = chat.left;
|
||||
let top = chat.top;
|
||||
|
||||
if(!left && !top)
|
||||
{
|
||||
left = (chat.location.x - (width / 2));
|
||||
top = (element.parentElement.offsetHeight - height);
|
||||
|
||||
// Calculate content offset based on styleId to account for margin-left in .chat-content
|
||||
const contentOffset = chatMemo.styleId === 33 || chatMemo.styleId === 34 ? 35 : 27;
|
||||
|
||||
// Position the bubble above the user (chat.location.x), adjusting for content offset
|
||||
if (!left && !top) {
|
||||
left = chatMemo.locationX ? (chatMemo.locationX - (width / 2) + contentOffset) : contentOffset;
|
||||
top = element.parentElement ? (element.parentElement.offsetHeight - height) : 0;
|
||||
chat.left = left;
|
||||
chat.top = top;
|
||||
}
|
||||
|
||||
// Apply position immediately
|
||||
element.style.position = 'absolute';
|
||||
element.style.left = `${left}px`;
|
||||
element.style.top = `${top}px`;
|
||||
|
||||
setIsReady(true);
|
||||
|
||||
return () =>
|
||||
{
|
||||
return () => {
|
||||
chat.elementRef = null;
|
||||
|
||||
setIsReady(false);
|
||||
}
|
||||
}, [ chat ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!isReady || !chat || isVisible) return;
|
||||
|
||||
if(makeRoom) makeRoom(chat);
|
||||
};
|
||||
}, [chat, chatMemo]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isReady || !chat || isVisible) return;
|
||||
if (makeRoom) makeRoom(chat);
|
||||
setIsVisible(true);
|
||||
}, [ chat, isReady, isVisible, makeRoom ]);
|
||||
}, [chat, isReady, isVisible, makeRoom]);
|
||||
|
||||
return (
|
||||
<div ref={elementRef} className={`bubble-container newbubblehe ${isVisible ? 'visible' : 'invisible'}`} onClick={event => GetRoomEngine().selectRoomObject(chat.roomId, chat.senderId, RoomObjectCategory.UNIT)}>
|
||||
<div
|
||||
ref={elementRef}
|
||||
className={`bubble-container newbubblehe ${isVisible ? 'visible' : 'invisible'}`}
|
||||
onClick={event => GetRoomEngine().selectRoomObject(chatMemo.roomId, chatMemo.senderId, RoomObjectCategory.UNIT)}
|
||||
>
|
||||
{selectedEmoji && <span>{DOMPurify.sanitize(selectedEmoji)}</span>}
|
||||
{ (chat.styleId === 0) &&
|
||||
<div className="user-container-bg" style={ { backgroundColor: chat.color } } /> }
|
||||
<div className={ `chat-bubble bubble-${ chat.styleId } type-${ chat.type }` } style={ { maxWidth: getBubbleWidth } }>
|
||||
{chatMemo.styleId === 0 && (
|
||||
<div className="user-container-bg" style={{ backgroundColor: chatMemo.color }} />
|
||||
)}
|
||||
<div className={`chat-bubble bubble-${chatMemo.styleId} type-${chatMemo.type}`} style={{ maxWidth: getBubbleWidth }}>
|
||||
<div className="user-container">
|
||||
{ chat.imageUrl && (chat.imageUrl.length > 0) &&
|
||||
<div className="user-image" style={ { backgroundImage: `url(${ chat.imageUrl })` } } /> }
|
||||
{chatMemo.imageUrl && chatMemo.imageUrl.length > 0 && (
|
||||
<div className="user-image" style={{ backgroundImage: `url(${chatMemo.imageUrl})` }} />
|
||||
)}
|
||||
</div>
|
||||
<div className="chat-content">
|
||||
<b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
|
||||
<span className="message" style={{ color: chat.chatColours }} dangerouslySetInnerHTML={{ __html: `${chat.formattedText}` }} onClick={e => onClickChat(e)} />
|
||||
<b className="username mr-1" dangerouslySetInnerHTML={{ __html: `${chatMemo.username}: ` }} />
|
||||
<span
|
||||
className="message"
|
||||
style={{ color: chatMemo.chatColours }}
|
||||
dangerouslySetInnerHTML={{ __html: `${chatMemo.formattedText}` }}
|
||||
onClick={e => onClickChat(e)}
|
||||
/>
|
||||
</div>
|
||||
<div className="pointer" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -1,8 +1,5 @@
|
||||
.nitro-chat-widget {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
min-height: 1px;
|
||||
@ -11,6 +8,7 @@
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.chat-mention {
|
||||
@ -28,17 +26,9 @@
|
||||
.bubble-container {
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
transition: top 0.2s ease 0s;
|
||||
user-select: none;
|
||||
pointer-events: all;
|
||||
|
||||
// -webkit-animation-duration: 0.2s;
|
||||
// animation-duration: 0.2s;
|
||||
// -webkit-animation-fill-mode: both;
|
||||
// animation-fill-mode: both;
|
||||
// -webkit-animation-name: bounceIn;
|
||||
// animation-name: bounceIn;
|
||||
|
||||
.user-container-bg {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
@ -74,14 +64,12 @@
|
||||
}
|
||||
|
||||
&.type-0 {
|
||||
// normal
|
||||
.message {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&.type-1 {
|
||||
// whisper
|
||||
.message {
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
@ -90,7 +78,6 @@
|
||||
}
|
||||
|
||||
&.type-2 {
|
||||
// shout
|
||||
.message {
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -686,7 +673,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-39 {
|
||||
&.bubble-39 {
|
||||
border-image-source: url("@/assets/images/chat/chatbubbles/bubble_39.png");
|
||||
|
||||
border-image-slice: 16 6 7 32 fill;
|
||||
@ -864,7 +851,7 @@
|
||||
.pointer {
|
||||
background: url("@/assets/images/chat/chatbubbles/bubble_53_pointer.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-container {
|
||||
z-index: 3;
|
||||
@ -958,7 +945,7 @@
|
||||
}
|
||||
|
||||
&.bubble-13 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_13.png');
|
||||
background-image: url('@/assets/images/chat/chatbubles/bubble_13.png');
|
||||
}
|
||||
|
||||
&.bubble-14 {
|
||||
@ -1096,8 +1083,8 @@
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_38_extra.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-39 {
|
||||
|
||||
&.bubble-39 {
|
||||
background-image: url("@/assets/images/chat/chatbubbles/bubble_39.png");
|
||||
}
|
||||
|
||||
@ -1148,12 +1135,12 @@
|
||||
&.bubble-51 {
|
||||
background-image: url("@/assets/images/chat/chatbubbles/bubble_51.png");
|
||||
}
|
||||
|
||||
|
||||
&.bubble-52 {
|
||||
background-image: url("@/assets/images/chat/chatbubbles/bubble_52.png");
|
||||
}
|
||||
|
||||
|
||||
&.bubble-53 {
|
||||
background-image: url("@/assets/images/chat/chatbubbles/bubble_53.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6,156 +6,161 @@ import IntervalWebWorker from '../../../../workers/IntervalWebWorker';
|
||||
import { WorkerBuilder } from '../../../../workers/WorkerBuilder';
|
||||
import { ChatWidgetMessageView } from './ChatWidgetMessageView';
|
||||
|
||||
export const ChatWidgetView: FC<{}> = props =>
|
||||
{
|
||||
export const ChatWidgetView: FC<{}> = props => {
|
||||
const { chatMessages = [], setChatMessages = null, chatSettings = null, getScrollSpeed = 6000 } = useChatWidget();
|
||||
const elementRef = useRef<HTMLDivElement>();
|
||||
const lastTickTimeRef = useRef<number>(Date.now());
|
||||
const scrollAmountPerTick = 15; // Pixels moved per tick
|
||||
const workerRef = useRef<Worker | null>(null); // Preserve worker across re-renders
|
||||
|
||||
const removeHiddenChats = useCallback(() =>
|
||||
{
|
||||
setChatMessages(prevValue =>
|
||||
{
|
||||
if(prevValue)
|
||||
{
|
||||
const removeHiddenChats = useCallback(() => {
|
||||
setChatMessages(prevValue => {
|
||||
if (prevValue) {
|
||||
const newMessages = prevValue.filter(chat => ((chat.top > (-(chat.height) * 2))));
|
||||
|
||||
if(newMessages.length !== prevValue.length) return newMessages;
|
||||
if (newMessages.length !== prevValue.length) return newMessages;
|
||||
}
|
||||
|
||||
return prevValue;
|
||||
})
|
||||
}, [ setChatMessages ]);
|
||||
});
|
||||
}, [setChatMessages]);
|
||||
|
||||
const checkOverlappingChats = useCallback((chat: ChatBubbleMessage, moved: number, tempChats: ChatBubbleMessage[]) =>
|
||||
{
|
||||
for(let i = (chatMessages.indexOf(chat) - 1); i >= 0; i--)
|
||||
{
|
||||
const checkOverlappingChats = useCallback((chat: ChatBubbleMessage, moved: number, tempChats: ChatBubbleMessage[]) => {
|
||||
for (let i = (chatMessages.indexOf(chat) - 1); i >= 0; i--) {
|
||||
const collides = chatMessages[i];
|
||||
if (!collides || (chat === collides) || (tempChats.indexOf(collides) >= 0) || (((collides.top + collides.height) - moved) > (chat.top + chat.height))) continue;
|
||||
|
||||
if(!collides || (chat === collides) || (tempChats.indexOf(collides) >= 0) || (((collides.top + collides.height) - moved) > (chat.top + chat.height))) continue;
|
||||
|
||||
if(DoChatsOverlap(chat, collides, -moved, 0))
|
||||
{
|
||||
if (DoChatsOverlap(chat, collides, -moved, 0)) {
|
||||
const amount = Math.abs((collides.top + collides.height) - chat.top);
|
||||
|
||||
tempChats.push(collides);
|
||||
|
||||
collides.top -= amount;
|
||||
collides.skipMovement = true;
|
||||
|
||||
checkOverlappingChats(collides, amount, tempChats);
|
||||
}
|
||||
}
|
||||
}, [ chatMessages ]);
|
||||
|
||||
const makeRoom = useCallback((chat: ChatBubbleMessage) =>
|
||||
{
|
||||
if(chatSettings.mode === RoomChatSettings.CHAT_MODE_FREE_FLOW)
|
||||
{
|
||||
chat.skipMovement = true;
|
||||
|
||||
checkOverlappingChats(chat, 0, [ chat ]);
|
||||
}, [chatMessages]);
|
||||
|
||||
const makeRoom = useCallback((chat: ChatBubbleMessage) => {
|
||||
if (chatSettings.mode === RoomChatSettings.CHAT_MODE_FREE_FLOW) {
|
||||
checkOverlappingChats(chat, 0, [chat]);
|
||||
removeHiddenChats();
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
const lowestPoint = (chat.top + chat.height);
|
||||
const requiredSpace = chat.height;
|
||||
const spaceAvailable = (elementRef.current.offsetHeight - lowestPoint);
|
||||
const amount = (requiredSpace - spaceAvailable);
|
||||
|
||||
if(spaceAvailable < requiredSpace)
|
||||
{
|
||||
setChatMessages(prevValue =>
|
||||
{
|
||||
prevValue.forEach(prevChat =>
|
||||
{
|
||||
if(prevChat === chat) return;
|
||||
|
||||
if (spaceAvailable < requiredSpace) {
|
||||
setChatMessages(prevValue => {
|
||||
prevValue.forEach(prevChat => {
|
||||
prevChat.top -= amount;
|
||||
if (prevChat.elementRef) {
|
||||
prevChat.elementRef.style.top = `${prevChat.top}px`;
|
||||
}
|
||||
});
|
||||
|
||||
return prevValue;
|
||||
});
|
||||
|
||||
removeHiddenChats();
|
||||
}
|
||||
}
|
||||
}, [ chatSettings, checkOverlappingChats, removeHiddenChats, setChatMessages ]);
|
||||
}, [chatSettings, checkOverlappingChats, removeHiddenChats, setChatMessages]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const resize = (event: UIEvent = null) =>
|
||||
{
|
||||
if(!elementRef || !elementRef.current) return;
|
||||
const moveAllChatsUp = useCallback((amount: number) => {
|
||||
setChatMessages(prevValue => {
|
||||
prevValue.forEach(chat => {
|
||||
chat.top -= amount;
|
||||
if (chat.elementRef) {
|
||||
chat.elementRef.style.top = `${chat.top}px`;
|
||||
}
|
||||
});
|
||||
return prevValue;
|
||||
});
|
||||
removeHiddenChats();
|
||||
lastTickTimeRef.current = Date.now();
|
||||
}, [setChatMessages, removeHiddenChats]);
|
||||
|
||||
useEffect(() => {
|
||||
const resize = (event: UIEvent = null) => {
|
||||
if (!elementRef || !elementRef.current) return;
|
||||
|
||||
const currentHeight = elementRef.current.offsetHeight;
|
||||
const newHeight = Math.round(document.body.offsetHeight * GetConfiguration<number>('chat.viewer.height.percentage'));
|
||||
|
||||
elementRef.current.style.height = `${ newHeight }px`;
|
||||
elementRef.current.style.height = `${newHeight}px`;
|
||||
|
||||
setChatMessages(prevValue =>
|
||||
{
|
||||
if(prevValue)
|
||||
{
|
||||
prevValue.forEach(chat => (chat.top -= (currentHeight - newHeight)));
|
||||
setChatMessages(prevValue => {
|
||||
if (prevValue) {
|
||||
prevValue.forEach(chat => {
|
||||
chat.top -= (currentHeight - newHeight);
|
||||
if (chat.elementRef) {
|
||||
chat.elementRef.style.top = `${chat.top}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return prevValue;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
|
||||
resize();
|
||||
|
||||
return () =>
|
||||
{
|
||||
return () => {
|
||||
window.removeEventListener('resize', resize);
|
||||
}
|
||||
}, [ setChatMessages ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const moveAllChatsUp = (amount: number) =>
|
||||
{
|
||||
setChatMessages(prevValue =>
|
||||
{
|
||||
prevValue.forEach(chat =>
|
||||
{
|
||||
if(chat.skipMovement)
|
||||
{
|
||||
chat.skipMovement = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
chat.top -= amount;
|
||||
});
|
||||
|
||||
return prevValue;
|
||||
});
|
||||
|
||||
removeHiddenChats();
|
||||
}
|
||||
};
|
||||
}, [setChatMessages]);
|
||||
|
||||
useEffect(() => {
|
||||
const worker = new WorkerBuilder(IntervalWebWorker);
|
||||
|
||||
worker.onmessage = () => moveAllChatsUp(15);
|
||||
|
||||
workerRef.current = worker;
|
||||
worker.onmessage = () => moveAllChatsUp(scrollAmountPerTick);
|
||||
worker.postMessage({ action: 'START', content: getScrollSpeed });
|
||||
|
||||
return () =>
|
||||
{
|
||||
worker.postMessage({ action: 'STOP' });
|
||||
worker.terminate();
|
||||
return () => {
|
||||
if (workerRef.current) {
|
||||
workerRef.current.postMessage({ action: 'STOP' });
|
||||
workerRef.current.terminate();
|
||||
workerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [moveAllChatsUp]); // Remove getScrollSpeed from deps to prevent re-creation
|
||||
|
||||
// Update worker interval if getScrollSpeed changes
|
||||
useEffect(() => {
|
||||
if (workerRef.current) {
|
||||
workerRef.current.postMessage({ action: 'UPDATE', content: getScrollSpeed });
|
||||
}
|
||||
}, [ getScrollSpeed, removeHiddenChats, setChatMessages ]);
|
||||
}, [getScrollSpeed]);
|
||||
|
||||
// Handle new chats and ensure immediate scrolling
|
||||
useEffect(() => {
|
||||
if (!chatMessages.length) return;
|
||||
|
||||
const lastChat = chatMessages[chatMessages.length - 1];
|
||||
const timeSinceLastTick = Date.now() - lastTickTimeRef.current;
|
||||
const ticksMissed = Math.floor(timeSinceLastTick / getScrollSpeed);
|
||||
const offset = ticksMissed * scrollAmountPerTick;
|
||||
|
||||
setChatMessages(prevValue => {
|
||||
const newChat = prevValue[prevValue.length - 1];
|
||||
if (newChat === lastChat) {
|
||||
newChat.top -= offset;
|
||||
if (newChat.elementRef) {
|
||||
newChat.elementRef.style.top = `${newChat.top}px`;
|
||||
}
|
||||
}
|
||||
return prevValue;
|
||||
});
|
||||
|
||||
moveAllChatsUp(scrollAmountPerTick);
|
||||
}, [chatMessages, getScrollSpeed, moveAllChatsUp]);
|
||||
|
||||
return (
|
||||
<div ref={ elementRef } className="nitro-chat-widget">
|
||||
{ chatMessages.map(chat => <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } bubbleWidth={ chatSettings.weight } />) }
|
||||
<div ref={elementRef} className="nitro-chat-widget">
|
||||
{chatMessages.map(chat => (
|
||||
<ChatWidgetMessageView
|
||||
key={chat.id}
|
||||
chat={chat}
|
||||
makeRoom={makeRoom}
|
||||
bubbleWidth={chatSettings.weight}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -40,8 +40,6 @@ const useChatWidgetState = () =>
|
||||
|
||||
const setFigureImage = (figure: string, username: string): Promise<string | null> => {
|
||||
return new Promise((resolve) => {
|
||||
console.log('setFigureImage called with figure:', figure, 'username:', username);
|
||||
|
||||
const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, null, {
|
||||
resetFigure: figure => {
|
||||
if (isDisposed.current) return;
|
||||
@ -51,37 +49,27 @@ const useChatWidgetState = () =>
|
||||
disposed: false
|
||||
});
|
||||
|
||||
console.log('avatarImage result:', avatarImage);
|
||||
|
||||
if (!avatarImage) {
|
||||
console.log('Failed to create avatarImage for figure:', figure);
|
||||
resolve('https://via.placeholder.com/40');
|
||||
return;
|
||||
}
|
||||
|
||||
avatarImage.getCroppedImage(AvatarSetType.HEAD).then(image => {
|
||||
console.log('Cropped image:', image, 'Image src:', image?.src);
|
||||
|
||||
if (!image || !image.src) {
|
||||
console.log('Failed to get cropped image or src for figure:', figure);
|
||||
avatarImage.dispose();
|
||||
resolve('https://via.placeholder.com/40');
|
||||
return;
|
||||
}
|
||||
|
||||
const color = avatarImage.getPartColor(AvatarFigurePartType.CHEST);
|
||||
console.log('Avatar color:', color, 'RGB:', color?.rgb);
|
||||
|
||||
avatarColorCache.set(figure, ((color && color.rgb) || 16777215));
|
||||
avatarImageCache.set(figure, image.src);
|
||||
console.log('Cached image src:', image.src);
|
||||
|
||||
// Update existing chat messages for this username
|
||||
setChatMessages(prevValue => {
|
||||
const updatedMessages = prevValue.map(chat => {
|
||||
if (chat.username === username && chat.imageUrl !== image.src) {
|
||||
chat.imageUrl = image.src; // Update in-place
|
||||
return { ...chat }; // Shallow copy to trigger re-render
|
||||
chat.imageUrl = image.src;
|
||||
return { ...chat };
|
||||
}
|
||||
return chat;
|
||||
});
|
||||
@ -91,9 +79,7 @@ const useChatWidgetState = () =>
|
||||
avatarImage.dispose();
|
||||
resolve(image.src);
|
||||
}).catch(error => {
|
||||
console.error('Error in setFigureImage:', error);
|
||||
avatarImage.dispose();
|
||||
resolve('https://via.placeholder.com/40');
|
||||
});
|
||||
});
|
||||
};
|
||||
@ -105,7 +91,7 @@ const useChatWidgetState = () =>
|
||||
setFigureImage(figure, username).then(src => {
|
||||
avatarImageCache.set(figure, src);
|
||||
});
|
||||
return 'https://via.placeholder.com/40';
|
||||
return;
|
||||
}
|
||||
|
||||
return existing;
|
||||
@ -152,14 +138,6 @@ const useChatWidgetState = () =>
|
||||
|
||||
const figure = userData.figure;
|
||||
|
||||
console.log('Chat Event Debug:', {
|
||||
userId: event.objectId,
|
||||
username: userData.name,
|
||||
userType,
|
||||
figure,
|
||||
roomObjectExists: !!roomObject
|
||||
});
|
||||
|
||||
switch(userType)
|
||||
{
|
||||
case RoomObjectType.PET:
|
||||
@ -169,7 +147,6 @@ const useChatWidgetState = () =>
|
||||
break;
|
||||
case RoomObjectType.USER:
|
||||
imageUrl = getUserImage(figure, userData.name);
|
||||
console.log('getUserImage result:', { figure, imageUrl });
|
||||
break;
|
||||
case RoomObjectType.RENTABLE_BOT:
|
||||
case RoomObjectType.BOT:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user