duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Left Toolbar and added welcome first time

Browse Source
This commit is contained in:
duckietm 2024-04-24 10:27:08 +02:00
parent 5dd8fc366d
commit c43db78ea3
2 changed files with 222 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/room/widgets/RoomWidgets.scss
View File

@ -1,15 +1,16 @@
.nitro-room-tools-container {
position: absolute;
bottom: $toolbar-height + 95px;
bottom: $toolbar-height + 25px;
left: 0;
.nitro-room-tools {
background: #212131;
box-shadow: inset 0 5px rgba(38,38,57,.6), inset 0 -4px rgba(25,25,37,.6);
border-radius: 0.5rem;
box-shadow: inset 0px 5px lighten(rgba($dark, .6), 2.5), inset 0 -4px darken(rgba($dark, .6), 4);
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
transition: all .2s ease;
z-index: 2;
margin-left: 11px;
z-index: 71;
margin-left: -20px;
.list-group-item {
background: transparent;
@ -45,14 +46,28 @@
}
}
.nitro-room-history {
background: #212131;
box-shadow: inset 0px 5px lighten(rgba($dark, .6), 2.5), inset 0 -4px darken(rgba($dark, .6), 4);
transition: all .2s ease;
width: 150px;
overflow: hidden;
z-index: 3;
}
.nitro-room-tools-info {
background: #212131;
box-shadow: inset 0 5px rgba(38,38,57,.6), inset 0 -4px rgba(25,25,37,.6);
box-shadow: inset 0px 5px lighten(rgba($dark, .6), 2.5), inset 0 -4px darken(rgba($dark, .6), 4);
transition: all .2s ease;
max-width: 250px;
bottom: -62px;
position: absolute;
left: 16px; }
}
}
.nitro-room-tools-history {
position: absolute;
left: calc(100% - 2px);
margin-left: 2px;
height: 5%;
}
.wordquiz-question {
@ -100,81 +115,52 @@
width: $nitro-doorbell-width;
height: $nitro-doorbell-height;
}
.leftroomhideshow {
z-index: 2;
position: absolute;
left: 1px;
padding-top: 43px;
padding-left: 2px;
height: 100px;
top: 49px;
margin-left: 1px;
border-radius: 5px;
border: 1px solid #222222;
background: #212131;
box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6);
.toggle-roomtool {
min-height: 95px;
width: 20px;
margin-left: -5px;
padding-left: 10px;
z-index: 72;
}
.room-tool-item {
height: 20px;
cursor: pointer;
}
.leftroomhide {
margin-left: 2px;
border-radius: 0 5px 5px 0;
border: 1px solid #212131;
background: #212131;
box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6);
cursor: pointer;
z-index: 9;
width: 18px;
height: 55%;
margin-top: 27px;
position: absolute;
left: 145px;
top: 39%;
transform: translate(-50%, -50%);
.margin-icons {
margin-top: -14px;
}
.iconcenterleftiright{
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
margin-left: 8px;
.margin-button-history {
margin-left: 4px;
margin-right: 4px;
}
.texticonright {
text-decoration: underline;
color: #5c5c5c;
font-size: 12px;
line-height: 22px;
margin-left: 16px;
text-align: justify;
margin-right: 5px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.text-no-promote {
font-size: 15px;
}
.texticonright:hover {
text-decoration: underline;
color: #464646;
.icon-style {
margin-top: 1px;
margin-left: 4px;
}
.iconleftgen {
display: unset;
.arrow-right-style {
margin-right: 4px;
}
.gridinforooms{
display: flex;
width: -webkit-fill-available;
margin-left: 7px;
margin-bottom: -3px;
}
.nitro-room-tools-history {
background: #212131;
box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6);
border-radius: 5px;
transition: all 0.2s ease;
margin-left: 3px;
max-height: 104px;
overflow-y: auto;
z-index: 5;
padding-left: 6px;
.tags {
background-color: #1B2834;
color: #1A75A6;
font-size: 10px;
&:hover {
color: #419AD2;
}
}
@import './avatar-info/AvatarInfoWidgetView';
@import './chat/ChatWidgetView';
@import './chat-input/ChatInputView';
@ -183,4 +169,4 @@
@import './friend-request/FriendRequestDialogView';
@import './furniture/FurnitureWidgets';
@import './mysterybox/MysteryBoxExtensionView';
@import './pet-package/PetPackageWidgetView';
@import './pet-package/PetPackageWidgetView';

339
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -1,237 +1,216 @@
import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer, RoomControllerLevel, RoomDataParser } from '@nitrots/nitro-renderer';
import { FC, useEffect, useRef, useState } from 'react';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer, RoomDataParser } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api';
import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common';
import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
export const RoomToolsWidgetView: FC<{}> = props =>
{
const [isZoomedIn, setIsZoomedIn] = useState<boolean>(false);
const [roomName, setRoomName] = useState<string>(null);
const [roomOwner, setRoomOwner] = useState<string>(null);
const [roomTags, setRoomTags] = useState<string[]>(null);
const [isOpen, setIsOpen] = useState<boolean>(false);
const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]);
const [isOpenHistory, setIsOpenHistory] = useState<boolean>(false);
const [ areBubblesMuted, setAreBubblesMuted ] = useState(false);
const [ isZoomedIn, setIsZoomedIn ] = useState<boolean>(false);
const [ roomName, setRoomName ] = useState<string>(null);
const [ roomOwner, setRoomOwner ] = useState<string>(null);
const [ roomTags, setRoomTags ] = useState<string[]>(null);
const [ isOpen, setIsOpen ] = useState<boolean>(false);
const [ isOpenHistory, setIsOpenHistory ] = useState<boolean>(false);
const [ show, setShow ] = useState(true);
const [ roomHistory, setRoomHistory ] = useState<{ roomId: number, roomName: string }[]>([]);
const { navigatorData = null } = useNavigator();
const { roomSession = null } = useRoom();
const roomHistoryRef = useRef(null);
const [areBubblesMuted, setAreBubblesMuted] = useState(false);
const roomsetthidebot = () => {
setIsOpenHistory(false);
const roomHistoryTool = document.getElementById("roomhistorytool");
const roomsettnew = document.getElementById("roomsettnew");
useEffect(() => { if (!roomName) { setRoomName(LocalizeText('landing.view.generic.welcome.first_login')); } }, [roomName]);
if (roomHistoryTool && roomsettnew) {
roomHistoryTool.style.display = "none";
roomsettnew.style.marginLeft = "19px";
}
const roomsettshow = document.getElementById("roomsettshow");
const roomsetthide = document.getElementById("roomsetthide");
if (roomsettshow && roomsetthide) {
roomsettshow.style.display = "none";
roomsetthide.style.display = "block";
}
};
const toolroomhidebot = () => {
setIsOpenHistory(false);
const roomHistoryTool = document.getElementById("roomhistorytool");
const roomsettnew = document.getElementById("roomsettnew");
if (roomHistoryTool && roomsettnew) {
roomHistoryTool.style.display = "none";
roomsettnew.style.marginLeft = "-152px";
}
const roomsettshow = document.getElementById("roomsettshow");
const roomsetthide = document.getElementById("roomsetthide");
if (roomsettshow && roomsetthide) {
roomsettshow.style.display = "block";
roomsetthide.style.display = "none";
}
};
const handleToolClick = (action: string, value?: string) => {
const actions = {
'settings': () => CreateLinkEvent('navigator/toggle-room-info'),
'zoom': () => {
setIsZoomedIn(prevValue => {
const handleToolClick = (action: string, value?: string) =>
{
switch(action)
{
case 'settings':
CreateLinkEvent('navigator/toggle-room-info');
return;
case 'zoom':
setIsZoomedIn(prevValue =>
{
let scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
if (!prevValue) scale /= 2;
if(!prevValue) scale /= 2;
else scale *= 2;
GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale);
return !prevValue;
});
},
'chat_history': () => CreateLinkEvent('chat-history/toggle'),
'hiddenbubbles': () => {
return;
case 'chat_history':
CreateLinkEvent('chat-history/toggle');
return;
case 'hiddenbubbles':
CreateLinkEvent('nitrobubblehidden/toggle');
const bubbleElement = document.getElementById('bubble');
if (bubbleElement) {
bubbleElement.classList.toggle('icon-chat-disablebubble');
}
const newText = areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text');
document.getElementById('hiddenbubblesText').innerText = newText;
const hiddenbubblesTextElement = document.getElementById('hiddenbubblesText');
if (hiddenbubblesTextElement) {
const newText = areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text');
hiddenbubblesTextElement.innerText = newText;
}
setAreBubblesMuted(!areBubblesMuted);
const bubbleIcon = document.getElementById('bubbleIcon');
if (bubbleIcon) {
bubbleIcon.classList.toggle('icon-chat-disablebubble');
}
},
'like_room': () => SendMessageComposer(new RateFlatMessageComposer(1)),
'toggle_room_link': () => CreateLinkEvent('navigator/toggle-room-link'),
'navigator_search_tag': (tag: string) => {
CreateLinkEvent(`navigator/search/${value}`);
SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${value}`));
},
'room_history': () => {
if (roomHistory.length > 0) {
const roomHistoryTool = document.getElementById("roomhistorytool");
if (!isOpenHistory) {
roomHistoryTool.style.display = "block";
setIsOpenHistory(true);
} else {
setIsOpenHistory(false);
roomHistoryTool.style.display = "none";
}
}
},
'room_history_back': () => TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) - 1].roomId),
'room_history_next': () => TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) + 1].roomId)
};
if (actions[action]) {
actions[action](value);
return;
case 'like_room':
SendMessageComposer(new RateFlatMessageComposer(1));
return;
case 'toggle_room_link':
CreateLinkEvent('navigator/toggle-room-link');
return;
case 'navigator_search_tag':
CreateLinkEvent(`navigator/search/${ value }`);
SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${ value }`));
return;
case 'room_history':
if (roomHistory.length > 0) setIsOpenHistory(prevValue => !prevValue);
return;
case 'room_history_back':
TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) - 1].roomId);
return;
case 'room_history_next':
TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) + 1].roomId);
return;
}
};
}
const onChangeRoomHistory = (roomId: number, roomName: string) => {
const newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history')) || [];
const onChangeRoomHistory = (roomId: number, roomName: string) =>
{
let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history'));
if (newStorage.some(room => room.roomId === roomId)) return;
if (newStorage && newStorage.filter( (room: RoomDataParser) => room.roomId === roomId ).length > 0) return;
if (newStorage.length >= 10) newStorage.shift();
if (newStorage && newStorage.length >= 10) newStorage.shift();
const newData = [...newStorage, { roomId, roomName }];
const newData = !newStorage ? [ { roomId: roomId, roomName: roomName } ] : [ ...newStorage, { roomId: roomId, roomName: roomName } ];
setRoomHistory(newData);
SetLocalStorage('nitro.room.history', newData);
};
return SetLocalStorage('nitro.room.history', newData );
}
useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event => {
CreateLinkEvent('nitrobubblehidden/hide');
useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event =>
{
const parser = event.getParser();
if (!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return;
if(!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return;
const { roomName, ownerName, tags } = parser.data;
if (roomName !== roomSession.roomName) {
setRoomName(roomName);
}
if (ownerName !== roomSession.ownerName) {
setRoomOwner(ownerName);
}
if (JSON.stringify(tags) !== JSON.stringify(roomSession.tags)) {
setRoomTags(tags);
}
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(() =>
{
const handleTabClose = () =>
{
if (JSON.parse(window.localStorage.getItem('nitro.room.history'))) window.localStorage.removeItem('nitro.room.history');
};
window.addEventListener('beforeunload', handleTabClose);
return () =>
{
window.removeEventListener('beforeunload', handleTabClose);
};
}, []);
useEffect(() =>
{
setIsOpen(true);
const timeout = setTimeout(() => setIsOpen(false), 5000);
return () => clearTimeout(timeout);
}, [roomName, roomOwner, roomTags]);
}, [ roomName, roomOwner, roomTags, show ]);
useEffect(() => {
setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history')) || []);
}, []);
useEffect(() =>
{
setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history')) ?? []);
}, [ ]);
return (
<Flex className="nitro-room-tools-container" >
<div className="leftroomhide" id="roomsetthide" onClick={() => toolroomhidebot()} style={{display: "none"}}>
<FaChevronLeft className="fa-icon iconcenterleftiright" />
<Flex className="nitro-room-tools-container" gap={ 2 }>
<div className="btn-toggle toggle-roomtool d-flex align-items-center" onClick={ () => setShow(!show) }>
<div className={ 'toggle-icon ' + (!show ? 'right' : 'left') } />
</div>
<Column center className="nitro-room-tools p-2 d-block" id="roomsettnew" style={{ marginLeft: -152 }}>
<div className="gridinforooms">
<Base pointer title={LocalizeText('room.settings.button.text')} className="iconleftgen icon icon-cog" onClick={() => handleToolClick('settings')} />
<div className="texticonright" onClick={() => handleToolClick('settings')} title={LocalizeText('room.settings.button.text')}>{LocalizeText('room.settings.button.text')}</div>
</div>
<div className="gridinforooms">
<Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ classNames('iconleftgen icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } />
<div className="texticonright" style={{marginLeft: 22}} onClick={ () => handleToolClick('zoom') } title={ LocalizeText('room.zoom.button.text') }>{LocalizeText('room.zoom.button.text')}</div>
</div>
<div className="gridinforooms">
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="iconleftgen icon icon-chat-history" />
<div className="texticonright" onClick={ () => handleToolClick('chat_history') } title={ LocalizeText('room.chathistory.button.text') }>{LocalizeText('room.chathistory.button.text')}</div>
</div>
<div className="gridinforooms">
<Base id="bubble" pointer title={areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')} onClick={() => handleToolClick('hiddenbubbles')} className={areBubblesMuted ? "iconleftgen icon icon-chat-disablebubble" : "iconleftgen icon icon-chat-enablebubble"} />
<div id="hiddenbubblesText" className="texticonright" onClick={() => handleToolClick('hiddenbubbles')} title={areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')}>
{areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')}
</div>
</div>
{ navigatorData.canRate &&
<div className="gridinforooms">
<Base pointer title={LocalizeText('room.like.button.text')} onClick={() => handleToolClick('like_room')} className="iconleftgen icon icon-like-room" />
<div className="texticonright" onClick={() => handleToolClick('like_room')} title={ LocalizeText('room.like.button.text') }>{LocalizeText('room.like.button.text')}</div>
</div>
}
<Flex justifyContent="center">
<Base pointer={ roomHistory.length > 1 && roomHistory[0]?.roomId !== navigatorData.currentRoomId } title={ LocalizeText('room.history.button.back.tooltip') } className={ `icon ${ (roomHistory?.length === 0 || roomHistory[0]?.roomId === navigatorData.currentRoomId) ? 'icon-room-history-back-disabled' : 'icon-room-history-back-enabled' }` } onClick={ () => (roomHistory?.length === 0 || roomHistory[0]?.roomId === navigatorData.currentRoomId) ? null : handleToolClick('room_history_back') } />
<Base pointer={ roomHistory?.length > 0 } title={ LocalizeText('room.history.button.tooltip') } className={ `icon ${ roomHistory?.length === 0 ? 'icon-room-history-disabled' : 'icon-room-history-enabled' } margin-button-history` } onClick={ () => roomHistory?.length === 0 ? null : handleToolClick('room_history') } />
<Base pointer={ roomHistory.length > 1 && roomHistory[roomHistory.length - 1]?.roomId !== navigatorData.currentRoomId } title={ LocalizeText('room.history.button.forward.tooltip') } className={ `icon ${ (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? 'icon-room-history-next-disabled' : 'icon-room-history-next-enabled' }` } onClick={ () => (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? null : handleToolClick('room_history_next') } />
</Flex>
</Column>
<div className="leftroomhideshow" id="roomsettshow" onClick={() => roomsetthidebot()}>
<FaChevronRight className="fa-icon" />
</div>
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpen } timeout={ 200 }>
<Column className="nitro-room-tools-info rounded py-2 px-3">
<Column gap={ 1 }>
<Text wrap variant="white" fontSize={ 5 }>{ roomName }</Text>
<Text variant="muted" fontSize={ 6 }>{ roomOwner }</Text>
</Column>
{ roomTags && roomTags.length > 0 && <Flex gap={ 2 }>
{ roomTags.map((tag, index) => <Text key={ index } small pointer variant="white" className="rounded bg-primary p-1" onClick={ () => handleToolClick('navigator_search_tag', tag) }>#{ tag }</Text>) }
</Flex>
}
</Column>
</TransitionAnimation>
<div className="nitro-room-tools-history" id="roomhistorytool" style={ { display: "none",bottom: !navigatorData.canRate ? '180px' : '210px' } }>
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpenHistory }>
<Column center>
<Column className="nitro-room-history rounded py-2 px-3">
<Column gap={ 1 }> {
(roomHistory.length > 0) && roomHistory.map(history =>
{
return <Text key={ history.roomId } bold={ history.roomId === navigatorData.currentRoomId } variant={ history.roomId === navigatorData.currentRoomId ? 'white' : 'muted' } pointer onClick={ () => TryVisitRoom(history.roomId) }>{ history.roomName }</Text>;
})
}
{ show && (
<>
<Column gap={ 0 } center className="nitro-room-tools p-3 px-3">
<Flex>
<Column center className="margin-icons p-2 gap-2">
<Base pointer title={ LocalizeText('room.settings.button.text') } className="icon icon-cog" onClick={ () => handleToolClick('settings') } />
<Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ classNames('icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } />
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
{ navigatorData.canRate &&
<Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
<Base pointer onClick={ () => handleToolClick('toggle_room_link') } className="icon icon-room-link" />
<Base pointer onClick={ () => handleToolClick('hiddenbubbles') } className={`icon ${areBubblesMuted ? 'icon-chat-disablebubble' : 'icon-chat-enablebubble'}`} />
</Column>
</Column>
<Column className="d-flex flex-column">
<Flex className="w-100 room-tool-item">
<Text variant="muted" underline small onClick={ () => handleToolClick('settings') }>{ LocalizeText('room.settings.button.text') }</Text>
</Flex>
<Flex className="w-100 room-tool-item">
<Text variant="muted" underline small onClick={ () => handleToolClick('zoom') }>{ LocalizeText('room.zoom.button.text') }</Text>
</Flex>
<Flex className="w-100 room-tool-item">
<Text variant="muted" underline small onClick={ () => handleToolClick('chat_history') }>{ LocalizeText('room.chathistory.button.text') }</Text></Flex>
{ navigatorData.canRate &&
<Flex className="w-100 room-tool-item">
<Text variant="muted" underline small onClick={ () => handleToolClick('like_room') }>{ LocalizeText('room.like.button.text') }</Text>
</Flex> }
<Flex className="w-100 room-tool-item">
<Text variant="muted" underline small onClick={ () => handleToolClick('toggle_room_link') }>{ LocalizeText('navigator.embed.caption') }</Text>
</Flex>
<Flex className="w-100 room-tool-item">
<Text variant="muted" underline small onClick={() => handleToolClick('hiddenbubbles')}> {areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')}</Text>
</Flex>
</Column>
</Flex>
<Flex justifyContent="center">
<Base pointer={ roomHistory.length > 1 && roomHistory[0]?.roomId !== navigatorData.currentRoomId } title={ LocalizeText('room.history.button.back.tooltip') } className={ `icon ${ (roomHistory?.length === 0 || roomHistory[0]?.roomId === navigatorData.currentRoomId) ? 'icon-room-history-back-disabled' : 'icon-room-history-back-enabled' }` } onClick={ () => (roomHistory?.length === 0 || roomHistory[0]?.roomId === navigatorData.currentRoomId) ? null : handleToolClick('room_history_back') } />
<Base pointer={ roomHistory?.length > 0 } title={ LocalizeText('room.history.button.tooltip') } className={ `icon ${ roomHistory?.length === 0 ? 'icon-room-history-disabled' : 'icon-room-history-enabled' } margin-button-history` } onClick={ () => roomHistory?.length === 0 ? null : handleToolClick('room_history') } />
<Base pointer={ roomHistory.length > 1 && roomHistory[roomHistory.length - 1]?.roomId !== navigatorData.currentRoomId } title={ LocalizeText('room.history.button.forward.tooltip') } className={ `icon ${ (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? 'icon-room-history-next-disabled' : 'icon-room-history-next-enabled' }` } onClick={ () => (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? null : handleToolClick('room_history_next') } />
</Flex>
</Column>
</TransitionAnimation>
</div>
<Flex className="nitro-room-tools-history" style={ { bottom: !navigatorData.canRate ? '180px' : '210px' } }>
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpenHistory }>
<Column center>
<Column className="px-3 py-2 rounded nitro-room-history">
<Column gap={ 1 }>
{ (roomHistory.length > 0) && roomHistory.map(history =>
{
return <Text key={ history.roomId } bold={ history.roomId === navigatorData.currentRoomId } variant={ history.roomId === navigatorData.currentRoomId ? 'white' : 'muted' } pointer onClick={ () => TryVisitRoom(history.roomId) }>{ history.roomName }</Text>;
}) }
</Column>
</Column>
</Column>
</TransitionAnimation>
</Flex>
<Column justifyContent="center">
<TransitionAnimation type={TransitionAnimationTypes.SLIDE_LEFT} inProp={isOpen} timeout={300}>
<Column center>
<Column className="px-3 py-2 rounded nitro-room-tools-info" overflow="hidden">
<Column gap={1}> <Text wrap variant="white" fontSize={4} truncate>{roomName}</Text> <Text variant="muted" fontSize={5} truncate>{roomOwner}</Text> </Column>
{roomTags && roomTags.length > 0 ? (
<Flex gap={2}> {roomTags.map((tag, index) => ( <Text key={index} small pointer truncate variant="white" className="rounded bg-primary p-1" onClick={() => handleToolClick('navigator_search_tag', tag)} > #{tag} </Text> ))}
</Flex> ) : ( <Text variant="muted"> { LocalizeText('navigator.notagsfound') } </Text> )}
</Column>
</Column>
</TransitionAnimation>
</Column>
</>
) }
</Flex>
);
}