diff --git a/src/components/room/widgets/RoomWidgets.scss b/src/components/room/widgets/RoomWidgets.scss index 80dbfab..abd70d6 100644 --- a/src/components/room/widgets/RoomWidgets.scss +++ b/src/components/room/widgets/RoomWidgets.scss @@ -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'; \ No newline at end of file diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx index a837aaf..690875f 100644 --- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -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(false); - const [roomName, setRoomName] = useState(null); - const [roomOwner, setRoomOwner] = useState(null); - const [roomTags, setRoomTags] = useState(null); - const [isOpen, setIsOpen] = useState(false); - const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]); - const [isOpenHistory, setIsOpenHistory] = useState(false); + 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 [ 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, event => { - CreateLinkEvent('nitrobubblehidden/hide'); + useMessageEvent(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 ( - -
toolroomhidebot()} style={{display: "none"}}> - + +
setShow(!show) }> +
- - -
- handleToolClick('settings')} /> -
handleToolClick('settings')} title={LocalizeText('room.settings.button.text')}>{LocalizeText('room.settings.button.text')}
-
- -
- handleToolClick('zoom') } className={ classNames('iconleftgen icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } /> -
handleToolClick('zoom') } title={ LocalizeText('room.zoom.button.text') }>{LocalizeText('room.zoom.button.text')}
-
- -
- handleToolClick('chat_history') } className="iconleftgen icon icon-chat-history" /> -
handleToolClick('chat_history') } title={ LocalizeText('room.chathistory.button.text') }>{LocalizeText('room.chathistory.button.text')}
-
- -
- handleToolClick('hiddenbubbles')} className={areBubblesMuted ? "iconleftgen icon icon-chat-disablebubble" : "iconleftgen icon icon-chat-enablebubble"} /> -
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')} -
-
- - { navigatorData.canRate && -
- handleToolClick('like_room')} className="iconleftgen icon icon-like-room" /> -
handleToolClick('like_room')} title={ LocalizeText('room.like.button.text') }>{LocalizeText('room.like.button.text')}
-
- } - - - 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') } /> - 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') } /> - 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') } /> - - - -
roomsetthidebot()}> - -
- - - - { roomName } - { roomOwner } - - { roomTags && roomTags.length > 0 && - { roomTags.map((tag, index) => handleToolClick('navigator_search_tag', tag) }>#{ tag }) } - - } - - -
- - - - { - (roomHistory.length > 0) && roomHistory.map(history => - { - return TryVisitRoom(history.roomId) }>{ history.roomName }; - }) - } + { show && ( + <> + + + + handleToolClick('settings') } /> + handleToolClick('zoom') } className={ classNames('icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } /> + handleToolClick('chat_history') } className="icon icon-chat-history" /> + { navigatorData.canRate && + handleToolClick('like_room') } className="icon icon-like-room" /> } + handleToolClick('toggle_room_link') } className="icon icon-room-link" /> + handleToolClick('hiddenbubbles') } className={`icon ${areBubblesMuted ? 'icon-chat-disablebubble' : 'icon-chat-enablebubble'}`} /> - + + + handleToolClick('settings') }>{ LocalizeText('room.settings.button.text') } + + + handleToolClick('zoom') }>{ LocalizeText('room.zoom.button.text') } + + + handleToolClick('chat_history') }>{ LocalizeText('room.chathistory.button.text') } + { navigatorData.canRate && + + handleToolClick('like_room') }>{ LocalizeText('room.like.button.text') } + } + + handleToolClick('toggle_room_link') }>{ LocalizeText('navigator.embed.caption') } + + + handleToolClick('hiddenbubbles')}> {areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')} + + + + + 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') } /> + 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') } /> + 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') } /> + - -
+ + + + + + { (roomHistory.length > 0) && roomHistory.map(history => + { + return TryVisitRoom(history.roomId) }>{ history.roomName }; + }) } + + + + + + + + + + {roomName} {roomOwner} + {roomTags && roomTags.length > 0 ? ( + {roomTags.map((tag, index) => ( handleToolClick('navigator_search_tag', tag)} > #{tag} ))} + ) : ( { LocalizeText('navigator.notagsfound') } )} + + + + + + ) } ); } \ No newline at end of file