Add room-info to room-tools

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

@@ -2,16 +2,18 @@
     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;
     }
    
+    .nitro-room-tools-content {
+        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;
+    
         .list-group-item {
             background: transparent;
             padding: 3px 0px;
@@ -49,3 +51,12 @@
             }
         }
     }
+
+    .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);
+        transition: all .2s ease;
+        pointer-events: none;
+        max-width: 250px;
+    }
+}

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,8 +49,49 @@ 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="nitro-room-tools-content ps-3 d-flex">
                 <div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
                     <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') }
@@ -66,5 +113,18 @@ export const RoomToolsWidgetView: FC<{}> = props =>
                     <i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } />
                 </div>
             </div>
+            <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' } }>
+                <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>
     );
 };