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

Update web worker for chat

Browse Source
This commit is contained in:
Bill 2022-11-13 21:49:52 -05:00
parent 1a8bf75a0d
commit 0905f88d60
8 changed files with 76 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@ -5,8 +5,6 @@ import { Base, TransitionAnimation, TransitionAnimationTypes } from './common';
import { LoadingView } from './components/loading/LoadingView';
import { MainView } from './components/main/MainView';
import { useConfigurationEvent, useLocalizationEvent, useMainEvent, useRoomEngineEvent } from './hooks';
import IntervalWebWorker from './workers/IntervalWebWorker';
import { WorkerBuilder } from './workers/WorkerBuilder';
NitroVersion.UI_VERSION = GetUIVersion();
@ -24,10 +22,6 @@ export const App: FC<{}> = props =>
if(!NitroConfig) throw new Error('NitroConfig is not defined!');
Nitro.bootstrap();
const worker = new WorkerBuilder(IntervalWebWorker);
Nitro.instance.setWorker(worker);
}
const handler = useCallback((event: NitroEvent) =>

7
src/api/nitro/AddWorkerEventTracker.ts
View File

@ -1,7 +0,0 @@
import { IWorkerEventTracker } from '@nitrots/nitro-renderer';
import { GetNitroInstance } from './GetNitroInstance';
export const AddWorkerEventTracker = (tracker: IWorkerEventTracker) =>
{
GetNitroInstance().addWorkerEventTracker(tracker);
}

7
src/api/nitro/RemoveWorkerEventTracker.ts
View File

@ -1,7 +0,0 @@
import { IWorkerEventTracker } from '@nitrots/nitro-renderer';
import { GetNitroInstance } from './GetNitroInstance';
export const RemoveWorkerEventTracker = (tracker: IWorkerEventTracker) =>
{
GetNitroInstance().removeWorkerEventTracker(tracker);
}

6
src/api/nitro/SendWorkerEvent.ts
View File

@ -1,6 +0,0 @@
import { GetNitroInstance } from './GetNitroInstance';
export const SendWorkerEvent = (message: { [index: string]: any }) =>
{
GetNitroInstance().sendWorkerEvent(message);
}

3
src/api/nitro/index.ts
View File

@ -1,5 +1,4 @@
export * from './AddLinkEventTracker';
export * from './AddWorkerEventTracker';
export * from './avatar';
export * from './camera';
export * from './core';
@ -11,8 +10,6 @@ export * from './GetLocalization';
export * from './GetNitroInstance';
export * from './OpenUrl';
export * from './RemoveLinkEventTracker';
export * from './RemoveWorkerEventTracker';
export * from './room';
export * from './SendMessageComposer';
export * from './SendWorkerEvent';
export * from './session';

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

@ -1,7 +1,9 @@
import { IWorkerEventTracker, RoomChatSettings } from '@nitrots/nitro-renderer';
import { RoomChatSettings } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { AddWorkerEventTracker, ChatBubbleMessage, DoChatsOverlap, GetConfiguration, RemoveWorkerEventTracker, SendWorkerEvent } from '../../../../api';
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;
@ -9,7 +11,7 @@ let TIMER_TRACKER: number = 0;
export const ChatWidgetView: FC<{}> = props =>
{
const [ timerId, setTimerId ] = useState(TIMER_TRACKER++);
const { pendingChats = null, chatSettings = null, getScrollSpeed = 6000, moveAllChatsUp = null } = useChatWidget();
const { pendingChats = null, chatSettings = null, getScrollSpeed = 6000 } = useChatWidget();
const [ renderedChats, setRenderedChats ] = useState<ChatBubbleMessage[]>([]);
const elementRef = useRef<HTMLDivElement>();
const isProcessing = useRef<boolean>(false);
@ -98,29 +100,6 @@ export const ChatWidgetView: FC<{}> = props =>
isProcessing.current = false;
}, []);
useEffect(() =>
{
const processNextChat = () =>
{
if(isProcessing.current) return;
const chat = pendingChats?.current?.shift();
if(!chat) return;
isProcessing.current = true;
setRenderedChats(prevValue => [ ...prevValue, chat ]);
}
const interval = setInterval(() => processNextChat(), 50);
return () =>
{
clearInterval(interval);
}
}, [ pendingChats ]);
useEffect(() =>
{
const resize = (event: UIEvent = null) =>
@ -155,37 +134,69 @@ export const ChatWidgetView: FC<{}> = props =>
useEffect(() =>
{
const workerTracker: IWorkerEventTracker = {
workerMessageReceived: (message: { [index: string]: any }) =>
const processNextChat = () =>
{
switch(message.type)
{
case 'MOVE_CHATS':
moveAllChatsUp(15);
return;
}
}
};
if(isProcessing.current) return;
AddWorkerEventTracker(workerTracker);
const chat = pendingChats?.current?.shift();
SendWorkerEvent({
type: 'CREATE_INTERVAL',
time: getScrollSpeed,
timerId: timerId,
response: { type: 'MOVE_CHATS' }
});
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 () =>
{
SendWorkerEvent({
type: 'REMOVE_INTERVAL',
timerId
worker.postMessage({ action: 'STOP' });
}
}, [ pendingChats ]);
useEffect(() =>
{
const moveAllChatsUp = (amount: number) =>
{
setRenderedChats(prevValue =>
{
prevValue.forEach(chat =>
{
if(chat.skipMovement)
{
chat.skipMovement = false;
return;
}
chat.top -= amount;
});
RemoveWorkerEventTracker(workerTracker);
return prevValue;
});
removeHiddenChats();
}
}, [ timerId, getScrollSpeed, moveAllChatsUp ]);
const worker = new WorkerBuilder(IntervalWebWorker);
worker.onmessage = () =>
{
moveAllChatsUp(15);
}
worker.postMessage({ action: 'START', content: getScrollSpeed });
return () =>
{
worker.postMessage({ action: 'STOP' });
}
}, [ getScrollSpeed, removeHiddenChats ]);
return (
<div ref={ elementRef } className="nitro-chat-widget">

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

@ -1,9 +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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { ChatBubbleMessage, ChatEntryType, ChatHistoryCurrentDate, GetAvatarRenderManager, GetConfiguration, GetRoomEngine, GetRoomObjectScreenLocation, IRoomChatSettings, LocalizeText, PlaySound, RoomChatFormatter } from '../../../api';
import { useMessageEvent, useRoomEngineEvent, useRoomSessionManagerEvent } from '../../events';
import { useRoom } from '../useRoom';
import { useChatHistory } from './../../chat-history/useChatHistory';
import { useChatHistory } from './../../chat-history';
const avatarColorCache: Map<string, number> = new Map();
const avatarImageCache: Map<string, string> = new Map();
@ -96,46 +96,6 @@ const useChatWidgetState = () =>
return existing;
}
const removeHiddenChats = useCallback(() =>
{
setChatMessages(prevValue =>
{
if(prevValue)
{
const newMessages = prevValue.filter(chat => ((chat.top > (-(chat.height) * 2))));
if(newMessages.length !== prevValue.length) return newMessages;
}
return prevValue;
})
}, []);
const moveAllChatsUp = (amount: number) =>
{
setChatMessages(prevValue =>
{
if(prevValue)
{
prevValue.forEach(chat =>
{
if(chat.skipMovement)
{
chat.skipMovement = false;
return;
}
chat.top -= amount;
});
}
return prevValue;
});
removeHiddenChats();
}
useRoomSessionManagerEvent<RoomSessionChatEvent>(RoomSessionChatEvent.CHAT_EVENT, event =>
{
const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, event.objectId, RoomObjectCategory.UNIT);
@ -288,7 +248,7 @@ const useChatWidgetState = () =>
}
}, []);
return { chatMessages, setChatMessages, chatSettings, getScrollSpeed, removeHiddenChats, moveAllChatsUp, pendingChats };
return { chatMessages, setChatMessages, chatSettings, getScrollSpeed, pendingChats };
}
export const useChatWidget = useChatWidgetState;

44
src/workers/IntervalWebWorker.ts
View File

@ -1,9 +1,6 @@
export default () =>
{
const intervals: {
id: number,
interval: ReturnType<typeof setInterval>
}[] = [];
let interval: ReturnType<typeof setInterval> = null;
// eslint-disable-next-line no-restricted-globals
self.onmessage = (message: MessageEvent) =>
@ -12,37 +9,18 @@ export default () =>
const data: { [index: string]: any } = message.data;
switch(data.type)
switch(data.action)
{
case 'CREATE_INTERVAL': {
const id = (data.timerId as number);
const time = (data.time as number);
const response = (data.response as string);
const interval = setInterval(() => postMessage(response), time);
intervals.push({ id, interval });
return;
}
case 'REMOVE_INTERVAL': {
const id = (data.timerId as number);
const i = 0;
while(i < intervals.length)
case 'START':
interval = setInterval(() => postMessage(null), data.content);
break;
case 'STOP':
if(interval)
{
const interval = intervals[i];
if(interval.id === id)
{
clearInterval(interval.interval);
intervals.splice(i, 1);
return;
}
}
}
clearInterval(interval);
interval = null;
}
break;
}
}
}