nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-19 05:46:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

More chat changes

Browse Source
This commit is contained in:
Bill 2022-03-27 19:23:40 -04:00
parent 368cc4031b
commit 59baf373db
3 changed files with 41 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/room/widgets/chat/ChatWidgetView.tsx
View File

@ -16,19 +16,43 @@ export const ChatWidgetView: FC<{}> = props =>
const removeHiddenChats = useCallback(() => const removeHiddenChats = useCallback(() =>
{ {
if(!chatMessages.length) return; setChatMessages(prevValue =>
{
if(prevValue)
{
const newMessages = prevValue.filter(chat => ((chat.top > (-(chat.height) * 2))));
const newMessages = chatMessages.filter(chat => ((chat.top > (-(chat.height) * 2)))); if(newMessages.length !== prevValue.length) return newMessages;
}
if(newMessages.length !== chatMessages.length) setChatMessages(newMessages); return prevValue;
}, [ chatMessages ]); })
}, []);
const moveAllChatsUp = useCallback((amount: number) => const moveAllChatsUp = useCallback((amount: number) =>
{ {
chatMessages.forEach(chat => (chat.top -= amount)); setChatMessages(prevValue =>
{
if(prevValue)
{
prevValue.forEach(chat =>
{
if(chat.skipMovement)
{
chat.skipMovement = false;
return;
}
chat.top -= amount;
});
}
return prevValue;
});
removeHiddenChats(); removeHiddenChats();
}, [ chatMessages, removeHiddenChats ]); }, [ removeHiddenChats ]);
const checkOverlappingChats = useCallback((chat: ChatBubbleMessage, moved: number, tempChats: ChatBubbleMessage[]) => const checkOverlappingChats = useCallback((chat: ChatBubbleMessage, moved: number, tempChats: ChatBubbleMessage[]) =>
{ {
@ -42,7 +66,7 @@ export const ChatWidgetView: FC<{}> = props =>
if(!collides || (chat === collides) || (tempChats.indexOf(collides) >= 0) || ((collides.top - moved) >= (chat.top + chat.height))) continue; if(!collides || (chat === collides) || (tempChats.indexOf(collides) >= 0) || ((collides.top - moved) >= (chat.top + chat.height))) continue;
if(DoChatsOverlap(chat, collides, -moved)) if(DoChatsOverlap(chat, collides, -moved, 4))
{ {
const amount = Math.abs((collides.top + collides.height) - chat.top); const amount = Math.abs((collides.top + collides.height) - chat.top);
@ -50,6 +74,8 @@ export const ChatWidgetView: FC<{}> = props =>
collides.top -= amount; collides.top -= amount;
collides.skipMovement = true;
checkOverlappingChats(collides, amount, tempChats); checkOverlappingChats(collides, amount, tempChats);
} }
} }
@ -59,6 +85,8 @@ export const ChatWidgetView: FC<{}> = props =>
{ {
if(chatSettings.mode === RoomChatSettings.CHAT_MODE_FREE_FLOW) if(chatSettings.mode === RoomChatSettings.CHAT_MODE_FREE_FLOW)
{ {
chat.skipMovement = true;
checkOverlappingChats(chat, 0, [ chat ]); checkOverlappingChats(chat, 0, [ chat ]);
removeHiddenChats(); removeHiddenChats();
@ -162,7 +190,7 @@ export const ChatWidgetView: FC<{}> = props =>
{ {
if(interval) clearInterval(interval); if(interval) clearInterval(interval);
} }
}, [ chatMessages, moveAllChatsUp, getScrollSpeed ]); }, [ moveAllChatsUp, getScrollSpeed ]);
useEffect(() => useEffect(() =>
{ {

1
src/components/room/widgets/chat/common/ChatBubbleMessage.ts
View File

@ -9,6 +9,7 @@ export class ChatBubbleMessage
public height: number = 0; public height: number = 0;
public elementRef: HTMLDivElement = null; public elementRef: HTMLDivElement = null;
public visible: boolean = false; public visible: boolean = false;
public skipMovement: boolean = false;
private _top: number = 0; private _top: number = 0;
private _left: number = 0; private _left: number = 0;

4
src/components/room/widgets/chat/common/DoChatsOverlap.ts
View File

@ -1,7 +1,7 @@
import { ChatBubbleMessage } from './ChatBubbleMessage'; import { ChatBubbleMessage } from './ChatBubbleMessage';
export const DoChatsOverlap = (a: ChatBubbleMessage, b: ChatBubbleMessage, additionalBTop: number) => export const DoChatsOverlap = (a: ChatBubbleMessage, b: ChatBubbleMessage, additionalBTop: number, padding: number = 0) =>
{ {
return !(((a.left + a.width) < b.left) || (a.left > (b.left + b.width)) || ((a.top + a.height) < (b.top + additionalBTop)) || (a.top > ((b.top + additionalBTop) + b.height))); return !((((a.left + padding) + a.width) < (b.left + padding)) || ((a.left + padding) > ((b.left + padding) + b.width)) || ((a.top + a.height) < (b.top + additionalBTop)) || (a.top > ((b.top + additionalBTop) + b.height)));
} }