From 8cc1577f91b81d88fecbcb5c0d7f654526423503 Mon Sep 17 00:00:00 2001 From: oobjectt Date: Thu, 13 Apr 2023 23:15:49 +0200 Subject: [PATCH] Feature - Rooms history --- .../icons/room-history-back-disabled.png | Bin 0 -> 267 bytes .../icons/room-history-back-enabled.png | Bin 0 -> 280 bytes .../images/icons/room-history-disabled.png | Bin 0 -> 393 bytes .../images/icons/room-history-enabled.png | Bin 0 -> 402 bytes .../icons/room-history-next-disabled.png | Bin 0 -> 260 bytes .../icons/room-history-next-enabled.png | Bin 0 -> 267 bytes src/assets/images/icons/toggle_bg.png | Bin 0 -> 1678 bytes src/assets/images/icons/toggle_left.png | Bin 0 -> 1648 bytes src/assets/images/icons/toggle_right.png | Bin 0 -> 1661 bytes src/assets/styles/bootstrap/_buttons.scss | 21 +++ src/assets/styles/icons.scss | 36 +++++ src/components/room/widgets/RoomWidgets.scss | 38 +++++ .../room-tools/RoomToolsWidgetView.tsx | 146 +++++++++++++++--- 13 files changed, 216 insertions(+), 25 deletions(-) create mode 100644 src/assets/images/icons/room-history-back-disabled.png create mode 100644 src/assets/images/icons/room-history-back-enabled.png create mode 100644 src/assets/images/icons/room-history-disabled.png create mode 100644 src/assets/images/icons/room-history-enabled.png create mode 100644 src/assets/images/icons/room-history-next-disabled.png create mode 100644 src/assets/images/icons/room-history-next-enabled.png create mode 100644 src/assets/images/icons/toggle_bg.png create mode 100644 src/assets/images/icons/toggle_left.png create mode 100644 src/assets/images/icons/toggle_right.png 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 0000000000000000000000000000000000000000..78a447502ed4d6a2ef67b5fbb41459609d601abb GIT binary patch literal 267 zcmeAS@N?(olHy`uVBq!ia0vp^NNn{1`g#vs+Tt!6%C1k~A)D@(ZWX!G2fx^{3v4?>aTS<^#@P80s*t~zqexL|v zfk$L90|Vb75M~tB@M-`G7I?ZihFJKYz2eB#V8G*YamB}f;bxNVjvnf);=jzzKCEzE zvCVy%_l6ZsED@oeJ7h%jPuXruR0xV`3BGy!$WIs5kJBo=olI0()dbd;&$Q&`316X< zxWhqp=8s+H>pZ4-HdPNn{1`MFV_7Tv=IJWSz~ex{7sDLoQr6ui#}1lsVJb;t8bKOM?7@|APU8lsB^* zP>8d@BeIx*f$tCqGm2_>H2?)GJzX3_Ec}mNG30A7;Bmg_#Qojgs55)QgqZZ^{U#IV zH7wm?oVAZ-wzfyZ-Ki~)S5*YtE!Jn=_(<(eiv8q+!k$K6MqWaT6f|ubKRj7+(qzuW zA9qY-CMslFD7qdhaG3O^S^d(JtJjarRN3Kv$CbbEto2#f=|}!cM(t*>ZR9d9I{GmR P=m-W+S3j3^P6Nn{1`wE}!XT*bvjWYrYpwN<4QWTa#z#Uw-x^)!?eq_or()s^K`l_ZVz6ikh^ zfXbKgeP;(!d?i7C!T*r~gX@7iCx9}X1s;*bKm~_EnDKc2iWH#WIZqeI5DWjMmjn4) z6nI!JC@DpK{CEBCwk_IO2Yt)x6wYxAC>3}(xT|k%{Gg<;hl7dHO7P$UX$3=;O%*dr z-nE-Gok;n#Xwjq>PqbUEOpY(+QZukmatb$`792XdK;0|zn#NPj7ssx6 z)bBSGOWRWJYI>`jMf&aTMJIhLHo6_Fs}tH3Z7$ro;{0*{Ddy%}`*VJsXSeL*f4)O- VE$6>)JwTr^c)I$ztaD0e0ss_0j>rH2 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..287227bf40c3b6725cde5bacb0e9600efe9e7f43 GIT binary patch literal 402 zcmeAS@N?(olHy`uVBq!ia0vp^ia@N)!3-pIKTQq;QjEnx?oJHr&dIz4a#+$GeH|GX zHuiJ>Nn{173GfMVWo2d2Ne!{;DwcINm(*30G0<4s*AQr;(ik6@>tmPfEVHZM_vpGF z5oKARjyLNX`+yXGNswRge-yxQ<<5+SKq<}wkH}&M2EM}}%y>M1MG8>xvZsqs z%h7x-3OuYAl$yF8{F`o_n_0`lsy_2~bA|r_fyQQLBdL|VJH#2^xhfP~;N)hy%h09x z;OJeI^JN9fA6(S5m9##(`5jzR_tSW~0#mWD=q9cfsX3>EEm-B3?_uvST(y&Ba^$bn z$SZeP1m9jS4K5b~}l(od%)$~$1i{wk`L|19K-#Nn{1`g#vs+Tt!6%Wz-dNn{1`MFV_7Tv=IJth$PIQbR6WIIrMkE9-0ylv!21;4_e7FA4Gs{tpHWQr^sN zKq1ZokH}&M2EM}}%y>M1MG8-9F!NW`|t-Zp6 z=K@yxnJikoYB6tM$`hYz$1^z{v*IUbpHp`cWA-$e!7^DO-{_H#+q<0^oP|n?aS1{! zDuD`{I9#snQ~Lcm?4aAJWAdVg<%dEaFF)<#A~k6}yW^CCTuGq444$rjF6*2UngCgX BSzZ7D literal 0 HcmV?d00001 diff --git a/src/assets/images/icons/toggle_bg.png b/src/assets/images/icons/toggle_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..ffb1ca4b4583994aac62e0453078d5619f5621bc GIT binary patch literal 1678 zcmcIl-HY5*6wk6$YO$bHMD)R!QBZc1+f^g<`)Y&Wc zg4aC4V+B**Wy&~C0WAm@*T*R)2doggtQRG|^yjzVOJYQQ=?yDDLAuHMQEQU1%aiR6 znH&(8O6xC)7snnD#H_&LI36UqH}<6|uLtY$wJM2INO9mx8>K^WFW3<`dB#Lr(PV-U z5^Y!MqR{Cw7p;mq(lu4nRn3xh&C@MUv&8CK!O zXFXMOT~|fAs_QZ!8FpZQF zl?_-7upESGwX3wx3!eA+1LCN+>u6GMGh?{mS%>q%yi_}L7Ew18U3?+HBuYx&7fVf* z32Wkl`4ZGkmyszWt)p38ebJ(2i^(=y~2M_LLEmcuqv}qU`wo7H#HmPhHx+`~W zV@-CkVe4U+=+p%sO1zL~F@{cwV%%eDn)D>`Up1S2z_Wl;$hlGWGq6Jxttf}$9aUe* zW%hQp8bso>?L17%ZuccpmYGqhdL7*-dyDCu(T@5INKYyL43_h-7~za<^dQp}!^cW0KRVu?#%Rw_MjQZc2P515@N^>|&x^h_$S$L?&G)sUw zgCTtLaOnmNaN2Hebes>#-IJ5`W$%k)^T)^O{=PH0yW05X$;OvUUz>M~_pWz-{{6~l ztzSP#&R%%-+PlKdPp&<7>$tJ}{#)pZu)KWX__y}z)MWVG%O9=mPd>eUruEBDKU}@> fG`{-rACCxM-C8-gbVr?(e~k9lcJuRB_TTvj^0X52 literal 0 HcmV?d00001 diff --git a/src/assets/images/icons/toggle_left.png b/src/assets/images/icons/toggle_left.png new file mode 100644 index 0000000000000000000000000000000000000000..52c4e587ebac8b108e9c39383ac307ad8591f0a8 GIT binary patch literal 1648 zcmcIlJ&fE$6gG;2j+3q+0t%|ZIV2Dn+hebHZ4;9myBBVy_&D8dltW6vc>KI;-P&Vp z-|gNhMFa(+iIfsiAZi2!1qBpzR1_4@q)U;S6M`ZXi0AzyLdj_xEZH7=zW2TF{rLHl zo$YtlR$pFK6lJZu)!D`Svv{to)Ytnz-gWTyT)y>QsVFbKTA$B!ch^r9<^0b{Z@=0P zu6shJ8joZM+BnS-ttgkTjB_pypdumklgw9t`~C-&B$2P)v;!l^+b~GBP72sN+3tyx z1K~#MmAA;{v4;dHRGf^{VODx$U!CxJxUOI8Dw#m417F>!9g_WEhqPq@q@^(`48tHT zR|}2U3Bffk5z{c4&P<)z)MTD%d(0-YLq&f@6nnd!Ycp^79VkVSU9#+1JTBkvz`GPhpXNkg;>0_Sj zOf%}B=D;908=9sIbXjd4p_iH7ClZ&v;~ex|DCJ=xVDkvF>f+p4Bo?;$VKJOU8VMbS zkRq%^VQk?lAIM6U1NoFV7Tb$xa<5$guVm4aayT#5&YXpqmS&RI0xpuQ=6$`^G&6w? zufSKaZYDJv)L=bkd$!@(>83}Xrnuoog;@#VlWO5)>Xph4huv$EoufNsZEQIwV> zkp~VmU4WQ2TnK5S83A<~7K#gP%M})5P6QKOXy1|IuufoYKW*Je3glSi$aA>Gd2EI> zG!3Ak({N~LnJxvp<;2{zO}xz6-YpXRdid~h)>>7BjIL!`HfwS!oTy0~931Lk+f(K` z%mmgHt{tf)5?(Belw+qPDer@xXML6YtEMf7vIt~^Ik)P5Ms|#1D=D#f$FnbF4?dW! zh6$OpoySGp?Y=7NG6VXVzD}Nyz2$UH?MDMZ(ld%bg_Sa{M!bNHK4yA}_R^mwzvM?} zi(jtv|Eu^}YQ=zOeZT>#t93YfJ!qzd(f?bs$=+i_X%5FpS1%Vs79SR48Zx9Va0st& z{MyC=ey!Wt=&gL3-hK1J9rD7t)~y?>=^vNwU;U!L_To>c>ks4K@1@_ZKcX!qIsftV z55E2U!s$nQH+tWEb^F%2+kdh7*3}qCtX|1}OzC1%l$LL!zcc^iWV;vy6AW=7jE|ZLl=w+NM=q2P5Q^xargnm zEL9L;5mhE>&e4Lfd1sO%d_pTRqJt#!r9Xf8Q4$m4OCMPw2=gu-CVLkJJ-XQMblGka(SLrXd-9jttCT1OI##*m9R{#8BxSeD_`PT7fz&kOPiHVpm@mC3CdMX z0ku<0U>IHvP16=#Ry$|hN~8C=#AW|Hr|Kas*=d34&Kb?BTT5dEw`cRyVl?-ZV3m$& z%3&oJrnRQ>A*)z9WH0ce-EO_fVYi^DVnv^^(K1yBOBPW#6kWU>BAjG3?_0H|<_HZ? zMSY3qO_zZw1Ff%F(9)o0z72E;zyccbS|F%GtAQCw;`3FYVF-I!S)mNmUf@eyl#(O_ zdUj;Ru3^dqXhb%3%abD~!m{ZgY$6mJwu9%o`1ye0(>j3l`9tU!qv+>5=W = 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 }) } + } + + + + + + ) } ); }