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

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

@ -9,26 +9,50 @@ import { DoChatsOverlap } from './common/DoChatsOverlap';
export const ChatWidgetView: FC<{}> = props => export const ChatWidgetView: FC<{}> = props =>
{ {
const [chatSettings, setChatSettings] = useState<RoomChatSettings>(null); const [ chatSettings, setChatSettings ] = useState<RoomChatSettings>(null);
const [ chatMessages, setChatMessages ] = useState<ChatBubbleMessage[]>([]); const [ chatMessages, setChatMessages ] = useState<ChatBubbleMessage[]>([]);
const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext(); const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
const elementRef = useRef<HTMLDivElement>(); const elementRef = useRef<HTMLDivElement>();
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(() =>
{ {

3
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;
@ -26,7 +27,7 @@ export class ChatBubbleMessage
public imageUrl: string = null, public imageUrl: string = null,
public color: string = null public color: string = null
) )
{ {
this.id = ++ChatBubbleMessage.BUBBLE_COUNTER; this.id = ++ChatBubbleMessage.BUBBLE_COUNTER;
} }

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)));
} }