Add room-info to room-tools

src/views/room/widgets/room-tools/RoomToolsWidgetView.scss

@@ -2,50 +2,61 @@
     position: absolute;
     bottom: 125px;
     left: -145px;
-    background: rgba($dark,.95);
-    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;
         
     &.open {
         left: 0px;
     }
    
-    .list-group-item {
+    .nitro-room-tools-content {
-        background: transparent;
+        background: rgba($dark,.95);
-        padding: 3px 0px;
+        box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
-        color: $white;
+        border-top-right-radius: $border-radius;
-        border-color: rgba($black, 0.3);
+        border-bottom-right-radius: $border-radius;
-        cursor: pointer;
     
-        &:hover {
+        .list-group-item {
-            text-decoration: underline;
+            background: transparent;
+            padding: 3px 0px;
+            color: $white;
+            border-color: rgba($black, 0.3);
+            cursor: pointer;
+    
+            &:hover {
+                text-decoration: underline;
+            }
+    
+            &:first-child {
+                padding-top: 8px;
+            }
+    
+            &:last-child {
+                border-bottom: none;
+                padding-bottom: 8px;
+            }
+    
+            &.disabled {
+                opacity: .5;
+            }
         }
     
-        &:first-child {
+        .tools-item {
-            padding-top: 8px;
+            .icon {
-        }
+                width: 22px;
+                background-repeat: no-repeat;
+                background-position: center;
+            }
     
-        &:last-child {
+            &:hover {
-            border-bottom: none;
+                text-decoration: underline;
-            padding-bottom: 8px;
+            }
-        }
-
-        &.disabled {
-            opacity: .5;
         }
     }
 
-    .tools-item {
+    .nitro-room-tools-info {
-        .icon {
+        background: rgba($dark,.95);
-            width: 22px;
+        box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
-            background-repeat: no-repeat;
+        transition: all .2s ease;
-            background-position: center;
+        pointer-events: none;
-        }
+        max-width: 250px;
-
-        &:hover {
-            text-decoration: underline;
-        }
     }
 }

src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx

@@ -1,11 +1,11 @@
-import { RoomLikeRoomComposer } from '@nitrots/nitro-renderer';
+import { GetGuestRoomResultEvent, RoomLikeRoomComposer } from '@nitrots/nitro-renderer';
 import classNames from 'classnames';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetZoomToggleMessage } from '../../../../api';
 import { NavigatorEvent } from '../../../../events';
 import { ChatHistoryEvent } from '../../../../events/chat-history/ChatHistoryEvent';
 import { dispatchUiEvent } from '../../../../hooks/events';
-import { SendMessageHook } from '../../../../hooks/messages';
+import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
 import { useRoomContext } from '../../context/RoomContext';
 
 export const RoomToolsWidgetView: FC<{}> = props =>
@@ -16,6 +16,12 @@ export const RoomToolsWidgetView: FC<{}> = props =>
     const [ isZoomedIn, setIsZoomedIn ] = useState(false);
     const [ isLiked, setIsLiked ] = useState(false);
 
+    const [ roomName, setRoomName ] = useState(null);
+    const [ roomOwner, setRoomOwner ] = useState(null);
+    const [ roomTags, setRoomTags ] = useState(null);
+    const [ roomInfoOpacity, setRoomInfoOpacity ] = useState(false);
+    const [ roomInfoDisplay, setRoomInfoDisplay ] = useState(false);
+
     const handleToolClick = useCallback((action: string) =>
     {
         switch(action)
@@ -43,27 +49,81 @@ export const RoomToolsWidgetView: FC<{}> = props =>
         }
     }, [ isZoomedIn, isLiked, widgetHandler ]);
 
+    const onGetGuestRoomResultEvent = useCallback((event: GetGuestRoomResultEvent) =>
+    {
+        const parser = event.getParser();
+
+        let updated = false;
+
+        if(roomName !== parser.data.roomName)
+        {
+            updated = true;
+            setRoomName(parser.data.roomName);
+        }
+
+        if(roomOwner !== parser.data.ownerName)
+        {
+            updated = true;
+            setRoomOwner(parser.data.ownerName);
+        }
+
+        if(roomTags !== parser.data.tags)
+        {
+            updated = true;
+            setRoomTags(parser.data.tags);
+        }
+
+        if(updated)
+        {
+            setRoomInfoOpacity(true);
+            setRoomInfoDisplay(true);
+            
+            setTimeout(() =>
+            {
+                setRoomInfoOpacity(false);
+                
+                setTimeout(() => setRoomInfoDisplay(false), 1000);
+            }, 3000);
+        }
+    }, [ roomName, roomOwner, roomTags ]);
+
+    CreateMessageHook(GetGuestRoomResultEvent, onGetGuestRoomResultEvent);
+    
     return (
-        <div className={'nitro-room-tools ps-3 d-flex' + classNames({ ' open': isExpended })}>
+        <div className={ 'nitro-room-tools align-items-center d-flex gap-3' + classNames({ ' open': isExpended }) }>
-            <div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
+            <div className="nitro-room-tools-content ps-3 d-flex">
-                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('settings') }>
+                <div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
-                    <i className="icon icon-cog" /> { LocalizeText('room.settings.button.text') }
+                    <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('settings') }>
+                        <i className="icon icon-cog" /> { LocalizeText('room.settings.button.text') }
+                    </div>
+                    <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('zoom') }>
+                        <i className={ 'icon ' +classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
+                    </div>
+                    <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('chat_history') }>
+                        <i className="icon icon-chat-history" />{ LocalizeText('room.chathistory.button.text') }
+                    </div>
+                    <div className={ 'd-flex align-items-center gap-2 cursor-pointer tools-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
+                        <i className="icon icon-like-room" /> { LocalizeText('room.like.button.text') }
+                    </div>
+                    <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('toggle_room_link') }>
+                        <i className="icon icon-room-link" />{ LocalizeText('navigator.embed.caption') }
+                    </div>
                 </div>
-                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('zoom') }>
+                <div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
-                    <i className={ 'icon ' +classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
+                    <i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } />
-                </div>
-                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('chat_history') }>
-                    <i className="icon icon-chat-history" />{ LocalizeText('room.chathistory.button.text') }
-                </div>
-                <div className={ 'd-flex align-items-center gap-2 cursor-pointer tools-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
-                    <i className="icon icon-like-room" /> { LocalizeText('room.like.button.text') }
-                </div>
-                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('toggle_room_link') }>
-                    <i className="icon icon-room-link" />{ LocalizeText('navigator.embed.caption') }
                 </div>
             </div>
-            <div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
+            <div className="nitro-room-tools-info rounded py-2 px-3 d-flex flex-column gap-2" style={ { 'opacity': roomInfoOpacity ? '1' : '0', 'display': roomInfoDisplay ? 'block' : 'none' } }>
-                <i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } />
+                <div className="d-flex flex-column gap-1">
+                    <div className="h4 m-0">{ roomName }</div>
+                    <div className="h4 text-muted m-0">{ roomOwner }</div>
+                </div>
+                { roomTags && roomTags.length > 0 && <div className="d-flex gap-2">
+                    { roomTags.map(tag => 
+                    {
+                        return <div className="rounded bg-primary text-white p-1 text-sm">#{ tag }</div>
+                    }) }
+                </div> }
             </div>
         </div>
     );