diff --git a/src/assets/images/icons/room-history-back-disabled.png b/src/assets/images/icons/room-history-back-disabled.png new file mode 100644 index 00000000..78a44750 Binary files /dev/null and b/src/assets/images/icons/room-history-back-disabled.png differ diff --git a/src/assets/images/icons/room-history-back-enabled.png b/src/assets/images/icons/room-history-back-enabled.png new file mode 100644 index 00000000..bed6a425 Binary files /dev/null and b/src/assets/images/icons/room-history-back-enabled.png differ diff --git a/src/assets/images/icons/room-history-disabled.png b/src/assets/images/icons/room-history-disabled.png new file mode 100644 index 00000000..fcd81197 Binary files /dev/null and b/src/assets/images/icons/room-history-disabled.png differ diff --git a/src/assets/images/icons/room-history-enabled.png b/src/assets/images/icons/room-history-enabled.png new file mode 100644 index 00000000..287227bf Binary files /dev/null and b/src/assets/images/icons/room-history-enabled.png differ diff --git a/src/assets/images/icons/room-history-next-disabled.png b/src/assets/images/icons/room-history-next-disabled.png new file mode 100644 index 00000000..3f82d0ee Binary files /dev/null and b/src/assets/images/icons/room-history-next-disabled.png differ diff --git a/src/assets/images/icons/room-history-next-enabled.png b/src/assets/images/icons/room-history-next-enabled.png new file mode 100644 index 00000000..3de01c07 Binary files /dev/null and b/src/assets/images/icons/room-history-next-enabled.png differ diff --git a/src/assets/images/icons/toggle_bg.png b/src/assets/images/icons/toggle_bg.png new file mode 100644 index 00000000..ffb1ca4b Binary files /dev/null and b/src/assets/images/icons/toggle_bg.png differ diff --git a/src/assets/images/icons/toggle_left.png b/src/assets/images/icons/toggle_left.png new file mode 100644 index 00000000..52c4e587 Binary files /dev/null and b/src/assets/images/icons/toggle_left.png differ diff --git a/src/assets/images/icons/toggle_right.png b/src/assets/images/icons/toggle_right.png new file mode 100644 index 00000000..0b28e701 Binary files /dev/null and b/src/assets/images/icons/toggle_right.png differ diff --git a/src/assets/styles/bootstrap/_buttons.scss b/src/assets/styles/bootstrap/_buttons.scss index 3c2cba9c..eeefc12e 100644 --- a/src/assets/styles/bootstrap/_buttons.scss +++ b/src/assets/styles/bootstrap/_buttons.scss @@ -107,6 +107,27 @@ // Button Sizes // +.btn-toggle { + border-image-source: url("@/assets/images/icons/toggle_bg.png"); + border-image-slice: 6 6 6 6 fill; + border-image-width: 6px 6px 6px 6px; + cursor: pointer; + + .toggle-icon { + background-repeat: no-repeat; + width: 6px; + height: 8px; + + &.left { + background-image: url("@/assets/images/icons/toggle_left.png"); + } + + &.right { + background-image: url("@/assets/images/icons/toggle_right.png"); + } + } +} + .btn-lg { @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); } diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index 509952b3..55d45e66 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -613,6 +613,42 @@ height: 19px; } + &.icon-room-history-back-enabled { + background-image: url('@/assets/images/icons/room-history-back-enabled.png'); + width: 34px; + height: 36px; + } + + &.icon-room-history-back-disabled { + background-image: url('@/assets/images/icons/room-history-back-disabled.png'); + width: 34px; + height: 36px; + } + + &.icon-room-history-enabled { + background-image: url('@/assets/images/icons/room-history-enabled.png'); + width: 33px; + height: 35px; + } + + &.icon-room-history-disabled { + background-image: url('@/assets/images/icons/room-history-disabled.png'); + width: 33px; + height: 35px; + } + + &.icon-room-history-next-enabled { + background-image: url('@/assets/images/icons/room-history-next-enabled.png'); + width: 34px; + height: 38px; + } + + &.icon-room-history-next-disabled { + background-image: url('@/assets/images/icons/room-history-next-disabled.png'); + width: 34px; + height: 38px; + } + &.spin { animation: rotating 1s linear infinite; } diff --git a/src/components/room/widgets/RoomWidgets.scss b/src/components/room/widgets/RoomWidgets.scss index 6198731b..94a1ae8d 100644 --- a/src/components/room/widgets/RoomWidgets.scss +++ b/src/components/room/widgets/RoomWidgets.scss @@ -10,6 +10,7 @@ border-bottom-right-radius: $border-radius; transition: all .2s ease; z-index: 2; + margin-left: -20px; .list-group-item { background: transparent; @@ -45,6 +46,15 @@ } } + .nitro-room-history { + background: rgba($dark, .95); + 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: rgba($dark, .95); box-shadow: inset 0px 5px lighten(rgba($dark, .6), 2.5), inset 0 -4px darken(rgba($dark, .6), 4); @@ -53,6 +63,12 @@ } } +.nitro-room-tools-history { + position: absolute; + left: 0; + margin-left: 2px; +} + .wordquiz-question { position: absolute; top: 10px; @@ -99,6 +115,28 @@ height: $nitro-doorbell-height; } +.toggle-roomtool { + min-height: 95px; + width: 20px; + margin-left: -5px; + padding-left: 10px; + z-index: 3; +} + +.room-tool-item { + height: 20px; + cursor: pointer; +} + +.margin-icons { + margin-top: -14px; +} + +.margin-button-history { + margin-left: 4px; + margin-right: 4px; +} + @import './avatar-info/AvatarInfoWidgetView'; @import './chat/ChatWidgetView'; @import './chat-input/ChatInputView'; diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx index 0bd2656b..6907c721 100644 --- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -1,7 +1,7 @@ -import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer'; +import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer, RoomDataParser } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; -import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api'; -import { Base, classNames, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common'; +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 => @@ -11,6 +11,9 @@ export const RoomToolsWidgetView: FC<{}> = props => 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(); @@ -47,9 +50,32 @@ export const RoomToolsWidgetView: FC<{}> = props => 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) => + { + let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history')); + + if (newStorage && newStorage.filter( (room: RoomDataParser) => room.roomId === roomId ).length > 0) return; + + if (newStorage && newStorage.length >= 10) newStorage.shift(); + + const newData = !newStorage ? [ { roomId: roomId, roomName: roomName } ] : [ ...newStorage, { roomId: roomId, roomName: roomName } ]; + + setRoomHistory(newData); + return SetLocalStorage('nitro.room.history', newData ); + } + useMessageEvent(GetGuestRoomResultEvent, event => { const parser = event.getParser(); @@ -59,8 +85,25 @@ export const RoomToolsWidgetView: FC<{}> = props => 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(() => + { + 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); @@ -68,33 +111,86 @@ export const RoomToolsWidgetView: FC<{}> = props => 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')) ?? []); + }, [ ]); return ( - - 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" /> } - - - - - - - { roomName } - { roomOwner } +
setShow(!show) }> +
+
+ { 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" /> - { roomTags && roomTags.length > 0 && - - { roomTags.map((tag, index) => handleToolClick('navigator_search_tag', tag) }>#{ tag }) } - } - + + + 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') } + + + + + 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 }) } + } + + + + + + ) } ); }