GetRoomEngine().selectRoomObject(chat.roomId, chat.senderId, RoomObjectCategory.UNIT) }>
{ chat.styleId === 0 && (
diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
index 962a3ce..4efac15 100644
--- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -2,40 +2,35 @@ import { CreateLinkEvent, GetGuestRoomResultEvent, GetRoomEngine, NavigatorSearc
import { AnimatePresence, motion } from 'framer-motion';
import { classNames } from '../../../../layout';
import { FC, useEffect, useState } from 'react';
-import { GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../../../api';
+import { GetConfigurationValue, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api';
import { Text } from '../../../../common';
import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
-
-export const RoomToolsWidgetView: FC<{}> = props =>
-{
- const [ isZoomedIn, setIsZoomedIn ] = useState
(false);
- const [ roomName, setRoomName ] = useState(null);
- const [ roomOwner, setRoomOwner ] = useState(null);
- const [ roomTags, setRoomTags ] = useState(null);
- const [ isOpen, setIsOpen ] = useState(false);
+export const RoomToolsWidgetView: FC<{}> = props => {
+ const [areBubblesMuted, setAreBubblesMuted] = useState(false);
+ const [isZoomedIn, setIsZoomedIn] = useState(false);
+ const [roomName, setRoomName] = useState(null);
+ const [roomOwner, setRoomOwner] = useState(null);
+ const [roomTags, setRoomTags] = useState(null);
+ const [isOpen, setIsOpen] = useState(false);
+ const [isOpenHistory, setIsOpenHistory] = useState(false);
+ const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]);
const { navigatorData = null } = useNavigator();
const { roomSession = null } = useRoom();
- const handleToolClick = (action: string, value?: string) =>
- {
- switch(action)
- {
+ const handleToolClick = (action: string, value?: string) => {
+ switch (action) {
case 'settings':
CreateLinkEvent('navigator/toggle-room-info');
return;
case 'zoom':
- setIsZoomedIn(prevValue =>
- {
- if(GetConfigurationValue('room.zoom.enabled', true))
- {
+ setIsZoomedIn(prevValue => {
+ if (GetConfigurationValue('room.zoom.enabled', true)) {
const scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale === 1 ? 0.5 : 1);
- }
- else
- {
+ } else {
const geometry = GetRoomEngine().getRoomInstanceGeometry(roomSession.roomId, 1);
- if(geometry) geometry.performZoom();
+ if (geometry) geometry.performZoom();
}
return !prevValue;
});
@@ -43,6 +38,10 @@ export const RoomToolsWidgetView: FC<{}> = props =>
case 'chat_history':
CreateLinkEvent('chat-history/toggle');
return;
+ case 'hiddenbubbles':
+ CreateLinkEvent('nitrobubblehidden/toggle');
+ setAreBubblesMuted(prev => !prev);
+ return;
case 'like_room':
SendMessageComposer(new RateFlatMessageComposer(1));
return;
@@ -50,41 +49,80 @@ export const RoomToolsWidgetView: FC<{}> = props =>
CreateLinkEvent('navigator/toggle-room-link');
return;
case 'navigator_search_tag':
- CreateLinkEvent(`navigator/search/${ value }`);
- SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${ value }`));
+ CreateLinkEvent(`navigator/search/${value}`);
+ SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${value}`));
+ return;
+ case 'room_history':
+ if (roomHistory.length > 0) setIsOpenHistory(prev => !prev);
+ return;
+ case 'room_history_back':
+ const prevIndex = roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) - 1;
+ if (prevIndex >= 0) TryVisitRoom(roomHistory[prevIndex].roomId);
+ return;
+ case 'room_history_next':
+ const nextIndex = roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) + 1;
+ if (nextIndex < roomHistory.length) TryVisitRoom(roomHistory[nextIndex].roomId);
return;
}
};
- useMessageEvent(GetGuestRoomResultEvent, event =>
- {
- const parser = event.getParser();
- if(!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return;
+ const onChangeRoomHistory = (roomId: number, roomName: string) => {
+ let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]');
+ if (newStorage.some((room: { roomId: number }) => room.roomId === roomId)) return;
- if(roomName !== parser.data.roomName) setRoomName(parser.data.roomName);
- if(roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
- if(roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
+ if (newStorage.length >= 10) newStorage.shift();
+ newStorage = [...newStorage, { roomId, roomName }];
+
+ setRoomHistory(newStorage);
+ SetLocalStorage('nitro.room.history', newStorage);
+ };
+
+ useMessageEvent(GetGuestRoomResultEvent, event => {
+ const parser = event.getParser();
+ if (!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return;
+
+ if (roomName !== parser.data.roomName) setRoomName(parser.data.roomName);
+ if (roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
+ if (roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
+ onChangeRoomHistory(parser.data.roomId, parser.data.roomName);
});
- useEffect(() =>
- {
+ useEffect(() => {
setIsOpen(true);
const timeout = setTimeout(() => setIsOpen(false), 5000);
return () => clearTimeout(timeout);
- }, [ roomName, roomOwner, roomTags ]);
+ }, [roomName, roomOwner, roomTags]);
+
+ useEffect(() => {
+ setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]'));
+ }, []);
+
+ useEffect(() => {
+ const handleTabClose = () => {
+ window.localStorage.removeItem('nitro.room.history');
+ };
+ window.addEventListener('beforeunload', handleTabClose);
+ return () => window.removeEventListener('beforeunload', handleTabClose);
+ }, []);
return (
-
handleToolClick('settings') } />
-
handleToolClick('zoom') } />
-
handleToolClick('chat_history') } />
- { navigatorData.canRate &&
-
handleToolClick('like_room') } /> }
+
handleToolClick('hiddenbubbles')} />
+
handleToolClick('settings')} />
+
handleToolClick('zoom')} />
+
handleToolClick('chat_history')} />
+
handleToolClick('hiddenbubbles')} />
+
+ {navigatorData.canRate && (
+
handleToolClick('like_room')} />
+ )}
+
handleToolClick('toggle_room_link')} />
+
handleToolClick('room_history')} />
- { isOpen &&
+ {isOpen && (
= props =>
- { roomName }
- { roomOwner }
+ {roomName}
+ {roomOwner}
- { roomTags && roomTags.length > 0 &&
+ {roomTags && roomTags.length > 0 && (
- { roomTags.map((tag, index) => (
- handleToolClick('navigator_search_tag', tag) }
+ {roomTags.map((tag, index) => (
+ handleToolClick('navigator_search_tag', tag)}
>
- #{ tag }
+ #{tag}
- )) }
-
}
+ ))}
+
+ )}
- }
+
+ )}
+ {isOpenHistory && (
+
+
+ {roomHistory.map(history => (
+ TryVisitRoom(history.roomId)}
+ >
+ {history.roomName}
+
+ ))}
+
+
+ )}
diff --git a/src/css/icons/icons.css b/src/css/icons/icons.css
index dc89bc6..e5c0fe2 100644
--- a/src/css/icons/icons.css
+++ b/src/css/icons/icons.css
@@ -379,6 +379,18 @@
height: 22px;
}
+.icon-chat-enablebubble {
+ background: url('@/assets/images/icons/enablebubble.png');
+ width: 17px;
+ height: 21px;
+}
+
+ .icon-chat-disablebubble {
+ background: url('@/assets/images/icons/disablebubble.png');
+ width: 17px;
+ height: 21px;
+}
+
.nitro-icon.icon-arrows {
background: url("@/assets/images/icons/arrows.png");
width: 17px;