mirror of
https://github.com/duckietm/Nitro-Cool-UI.git
synced 2025-06-21 22:36:58 +00:00
Fix: Left Toolbar and added welcome first time
This commit is contained in:
duckietm
parent
5dd8fc366d
commit
c43db78ea3
@ -1,15 +1,16 @@
|
|||||||
.nitro-room-tools-container {
|
.nitro-room-tools-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: $toolbar-height + 95px;
|
bottom: $toolbar-height + 25px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
.nitro-room-tools {
|
.nitro-room-tools {
|
||||||
background: #212131;
|
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);
|
||||||
border-radius: 0.5rem;
|
border-top-right-radius: $border-radius;
|
||||||
|
border-bottom-right-radius: $border-radius;
|
||||||
transition: all .2s ease;
|
transition: all .2s ease;
|
||||||
z-index: 2;
|
z-index: 71;
|
||||||
margin-left: 11px;
|
margin-left: -20px;
|
||||||
|
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
background: transparent;
|
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 {
|
.nitro-room-tools-info {
|
||||||
background: #212131;
|
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;
|
transition: all .2s ease;
|
||||||
max-width: 250px;
|
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 {
|
.wordquiz-question {
|
||||||
@ -100,81 +115,52 @@
|
|||||||
width: $nitro-doorbell-width;
|
width: $nitro-doorbell-width;
|
||||||
height: $nitro-doorbell-height;
|
height: $nitro-doorbell-height;
|
||||||
}
|
}
|
||||||
.leftroomhideshow {
|
|
||||||
z-index: 2;
|
.toggle-roomtool {
|
||||||
position: absolute;
|
min-height: 95px;
|
||||||
left: 1px;
|
width: 20px;
|
||||||
padding-top: 43px;
|
margin-left: -5px;
|
||||||
padding-left: 2px;
|
padding-left: 10px;
|
||||||
height: 100px;
|
z-index: 72;
|
||||||
top: 49px;
|
}
|
||||||
margin-left: 1px;
|
|
||||||
border-radius: 5px;
|
.room-tool-item {
|
||||||
border: 1px solid #222222;
|
height: 20px;
|
||||||
background: #212131;
|
|
||||||
box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.leftroomhide {
|
|
||||||
margin-left: 2px;
|
.margin-icons {
|
||||||
border-radius: 0 5px 5px 0;
|
margin-top: -14px;
|
||||||
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%);
|
|
||||||
}
|
}
|
||||||
.iconcenterleftiright{
|
|
||||||
position: absolute;
|
.margin-button-history {
|
||||||
top: 50%;
|
margin-left: 4px;
|
||||||
transform: translate(-50%, -50%);
|
margin-right: 4px;
|
||||||
text-align: center;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
}
|
||||||
.texticonright {
|
|
||||||
text-decoration: underline;
|
.text-no-promote {
|
||||||
color: #5c5c5c;
|
font-size: 15px;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
.texticonright:hover {
|
|
||||||
text-decoration: underline;
|
.icon-style {
|
||||||
color: #464646;
|
margin-top: 1px;
|
||||||
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
.iconleftgen {
|
|
||||||
display: unset;
|
.arrow-right-style {
|
||||||
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
.gridinforooms{
|
|
||||||
display: flex;
|
.tags {
|
||||||
width: -webkit-fill-available;
|
background-color: #1B2834;
|
||||||
margin-left: 7px;
|
color: #1A75A6;
|
||||||
margin-bottom: -3px;
|
font-size: 10px;
|
||||||
}
|
|
||||||
.nitro-room-tools-history {
|
&:hover {
|
||||||
background: #212131;
|
color: #419AD2;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@import './avatar-info/AvatarInfoWidgetView';
|
@import './avatar-info/AvatarInfoWidgetView';
|
||||||
@import './chat/ChatWidgetView';
|
@import './chat/ChatWidgetView';
|
||||||
@import './chat-input/ChatInputView';
|
@import './chat-input/ChatInputView';
|
||||||
|
|||||||
@ -1,237 +1,216 @@
|
|||||||
import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer, RoomControllerLevel, RoomDataParser } from '@nitrots/nitro-renderer';
|
import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer, RoomDataParser } from '@nitrots/nitro-renderer';
|
||||||
import { FC, useEffect, useRef, useState } from 'react';
|
import { FC, useEffect, useState } from 'react';
|
||||||
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
|
|
||||||
import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api';
|
import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api';
|
||||||
import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common';
|
import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common';
|
||||||
import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
|
import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
|
||||||
|
|
||||||
export const RoomToolsWidgetView: FC<{}> = props =>
|
export const RoomToolsWidgetView: FC<{}> = props =>
|
||||||
{
|
{
|
||||||
const [isZoomedIn, setIsZoomedIn] = useState<boolean>(false);
|
const [ areBubblesMuted, setAreBubblesMuted ] = useState(false);
|
||||||
const [roomName, setRoomName] = useState<string>(null);
|
const [ isZoomedIn, setIsZoomedIn ] = useState<boolean>(false);
|
||||||
const [roomOwner, setRoomOwner] = useState<string>(null);
|
const [ roomName, setRoomName ] = useState<string>(null);
|
||||||
const [roomTags, setRoomTags] = useState<string[]>(null);
|
const [ roomOwner, setRoomOwner ] = useState<string>(null);
|
||||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
const [ roomTags, setRoomTags ] = useState<string[]>(null);
|
||||||
const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]);
|
const [ isOpen, setIsOpen ] = useState<boolean>(false);
|
||||||
const [isOpenHistory, setIsOpenHistory] = 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 { navigatorData = null } = useNavigator();
|
||||||
const { roomSession = null } = useRoom();
|
const { roomSession = null } = useRoom();
|
||||||
const roomHistoryRef = useRef(null);
|
|
||||||
const [areBubblesMuted, setAreBubblesMuted] = useState(false);
|
|
||||||
|
|
||||||
const roomsetthidebot = () => {
|
useEffect(() => { if (!roomName) { setRoomName(LocalizeText('landing.view.generic.welcome.first_login')); } }, [roomName]);
|
||||||
setIsOpenHistory(false);
|
|
||||||
const roomHistoryTool = document.getElementById("roomhistorytool");
|
|
||||||
const roomsettnew = document.getElementById("roomsettnew");
|
|
||||||
|
|
||||||
if (roomHistoryTool && roomsettnew) {
|
const handleToolClick = (action: string, value?: string) =>
|
||||||
roomHistoryTool.style.display = "none";
|
{
|
||||||
roomsettnew.style.marginLeft = "19px";
|
switch(action)
|
||||||
}
|
{
|
||||||
|
case 'settings':
|
||||||
const roomsettshow = document.getElementById("roomsettshow");
|
CreateLinkEvent('navigator/toggle-room-info');
|
||||||
const roomsetthide = document.getElementById("roomsetthide");
|
return;
|
||||||
|
case 'zoom':
|
||||||
if (roomsettshow && roomsetthide) {
|
setIsZoomedIn(prevValue =>
|
||||||
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 => {
|
|
||||||
let scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
|
let scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
|
||||||
|
|
||||||
if (!prevValue) scale /= 2;
|
if(!prevValue) scale /= 2;
|
||||||
else scale *= 2;
|
else scale *= 2;
|
||||||
|
|
||||||
GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale);
|
GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale);
|
||||||
|
|
||||||
return !prevValue;
|
return !prevValue;
|
||||||
});
|
});
|
||||||
},
|
return;
|
||||||
'chat_history': () => CreateLinkEvent('chat-history/toggle'),
|
case 'chat_history':
|
||||||
'hiddenbubbles': () => {
|
CreateLinkEvent('chat-history/toggle');
|
||||||
|
return;
|
||||||
|
case 'hiddenbubbles':
|
||||||
CreateLinkEvent('nitrobubblehidden/toggle');
|
CreateLinkEvent('nitrobubblehidden/toggle');
|
||||||
const bubbleElement = document.getElementById('bubble');
|
const bubbleElement = document.getElementById('bubble');
|
||||||
if (bubbleElement) {
|
if (bubbleElement) {
|
||||||
bubbleElement.classList.toggle('icon-chat-disablebubble');
|
bubbleElement.classList.toggle('icon-chat-disablebubble');
|
||||||
}
|
}
|
||||||
const newText = areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text');
|
const hiddenbubblesTextElement = document.getElementById('hiddenbubblesText');
|
||||||
document.getElementById('hiddenbubblesText').innerText = newText;
|
if (hiddenbubblesTextElement) {
|
||||||
|
const newText = areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text');
|
||||||
|
hiddenbubblesTextElement.innerText = newText;
|
||||||
|
}
|
||||||
setAreBubblesMuted(!areBubblesMuted);
|
setAreBubblesMuted(!areBubblesMuted);
|
||||||
const bubbleIcon = document.getElementById('bubbleIcon');
|
const bubbleIcon = document.getElementById('bubbleIcon');
|
||||||
if (bubbleIcon) {
|
if (bubbleIcon) {
|
||||||
bubbleIcon.classList.toggle('icon-chat-disablebubble');
|
bubbleIcon.classList.toggle('icon-chat-disablebubble');
|
||||||
}
|
}
|
||||||
},
|
return;
|
||||||
'like_room': () => SendMessageComposer(new RateFlatMessageComposer(1)),
|
case 'like_room':
|
||||||
'toggle_room_link': () => CreateLinkEvent('navigator/toggle-room-link'),
|
SendMessageComposer(new RateFlatMessageComposer(1));
|
||||||
'navigator_search_tag': (tag: string) => {
|
return;
|
||||||
CreateLinkEvent(`navigator/search/${value}`);
|
case 'toggle_room_link':
|
||||||
SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${value}`));
|
CreateLinkEvent('navigator/toggle-room-link');
|
||||||
},
|
return;
|
||||||
'room_history': () => {
|
case 'navigator_search_tag':
|
||||||
if (roomHistory.length > 0) {
|
CreateLinkEvent(`navigator/search/${ value }`);
|
||||||
const roomHistoryTool = document.getElementById("roomhistorytool");
|
SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${ value }`));
|
||||||
if (!isOpenHistory) {
|
return;
|
||||||
roomHistoryTool.style.display = "block";
|
case 'room_history':
|
||||||
setIsOpenHistory(true);
|
if (roomHistory.length > 0) setIsOpenHistory(prevValue => !prevValue);
|
||||||
} else {
|
return;
|
||||||
setIsOpenHistory(false);
|
case 'room_history_back':
|
||||||
roomHistoryTool.style.display = "none";
|
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);
|
||||||
'room_history_back': () => TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) - 1].roomId),
|
return;
|
||||||
'room_history_next': () => TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) + 1].roomId)
|
|
||||||
};
|
|
||||||
if (actions[action]) {
|
|
||||||
actions[action](value);
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const onChangeRoomHistory = (roomId: number, roomName: string) => {
|
const onChangeRoomHistory = (roomId: number, roomName: string) =>
|
||||||
const newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history')) || [];
|
{
|
||||||
|
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);
|
setRoomHistory(newData);
|
||||||
SetLocalStorage('nitro.room.history', newData);
|
return SetLocalStorage('nitro.room.history', newData );
|
||||||
};
|
}
|
||||||
|
|
||||||
useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event => {
|
useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event =>
|
||||||
CreateLinkEvent('nitrobubblehidden/hide');
|
{
|
||||||
const parser = event.getParser();
|
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 !== parser.data.roomName) setRoomName(parser.data.roomName);
|
||||||
|
if(roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
|
||||||
if (roomName !== roomSession.roomName) {
|
if(roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
|
||||||
setRoomName(roomName);
|
|
||||||
}
|
|
||||||
if (ownerName !== roomSession.ownerName) {
|
|
||||||
setRoomOwner(ownerName);
|
|
||||||
}
|
|
||||||
if (JSON.stringify(tags) !== JSON.stringify(roomSession.tags)) {
|
|
||||||
setRoomTags(tags);
|
|
||||||
}
|
|
||||||
|
|
||||||
onChangeRoomHistory(parser.data.roomId, parser.data.roomName);
|
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);
|
setIsOpen(true);
|
||||||
|
|
||||||
const timeout = setTimeout(() => setIsOpen(false), 5000);
|
const timeout = setTimeout(() => setIsOpen(false), 5000);
|
||||||
|
|
||||||
return () => clearTimeout(timeout);
|
return () => clearTimeout(timeout);
|
||||||
}, [roomName, roomOwner, roomTags]);
|
}, [ roomName, roomOwner, roomTags, show ]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() =>
|
||||||
setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history')) || []);
|
{
|
||||||
}, []);
|
setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history')) ?? []);
|
||||||
|
}, [ ]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex className="nitro-room-tools-container" >
|
<Flex className="nitro-room-tools-container" gap={ 2 }>
|
||||||
<div className="leftroomhide" id="roomsetthide" onClick={() => toolroomhidebot()} style={{display: "none"}}>
|
<div className="btn-toggle toggle-roomtool d-flex align-items-center" onClick={ () => setShow(!show) }>
|
||||||
<FaChevronLeft className="fa-icon iconcenterleftiright" />
|
<div className={ 'toggle-icon ' + (!show ? 'right' : 'left') } />
|
||||||
</div>
|
</div>
|
||||||
<Column center className="nitro-room-tools p-2 d-block" id="roomsettnew" style={{ marginLeft: -152 }}>
|
{ show && (
|
||||||
|
<>
|
||||||
<div className="gridinforooms">
|
<Column gap={ 0 } center className="nitro-room-tools p-3 px-3">
|
||||||
<Base pointer title={LocalizeText('room.settings.button.text')} className="iconleftgen icon icon-cog" onClick={() => handleToolClick('settings')} />
|
<Flex>
|
||||||
<div className="texticonright" onClick={() => handleToolClick('settings')} title={LocalizeText('room.settings.button.text')}>{LocalizeText('room.settings.button.text')}</div>
|
<Column center className="margin-icons p-2 gap-2">
|
||||||
</div>
|
<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')) } />
|
||||||
<div className="gridinforooms">
|
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
|
||||||
<Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ classNames('iconleftgen icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } />
|
{ navigatorData.canRate &&
|
||||||
<div className="texticonright" style={{marginLeft: 22}} onClick={ () => handleToolClick('zoom') } title={ LocalizeText('room.zoom.button.text') }>{LocalizeText('room.zoom.button.text')}</div>
|
<Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
|
||||||
</div>
|
<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'}`} />
|
||||||
<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>;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</Column>
|
</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>
|
</Column>
|
||||||
</TransitionAnimation>
|
<Flex className="nitro-room-tools-history" style={ { bottom: !navigatorData.canRate ? '180px' : '210px' } }>
|
||||||
</div>
|
<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>
|
</Flex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user