updates

public/configuration.json

@@ -19,7 +19,7 @@
     "avatar.asset.url": "${asset.url}/bundled/figure/%libname%.nitro",
     "avatar.asset.effect.url": "${asset.url}/bundled/effect/%libname%.nitro",
     "furni.extras.url": "${asset.url}/images/furniextras/%image%.png",
-    "url.prefix": "",
+    "url.prefix": "http://localhost:3000",
     "chat.viewer.height.percentage": 0.40,
     "auth.system.enabled": true,
     "auth.system.http.enabled": true,

src/assets/styles/icons.scss

@@ -468,6 +468,24 @@ i {
             }
         }
 
+        &.icon-house-small {
+            background: url('../images/icons/house-small.png');
+            width: 19px;
+            height: 14px;
+        }
+
+        &.icon-camera-small {
+            background: url('../images/icons/camera-small.png');
+            width: 17px;
+            height: 15px;
+        }
+
+        &.icon-arrows {
+            background: url('../images/icons/arrows.png');
+            width: 17px;
+            height: 15px;
+        }
+
         &.spin {
             animation: rotating 1s linear infinite;
         }

src/events/navigator/NavigatorEvent.ts

@@ -5,6 +5,8 @@ export class NavigatorEvent extends NitroEvent
     public static SHOW_NAVIGATOR: string = 'NE_SHOW_NAVIGATOR';
     public static HIDE_NAVIGATOR: string = 'NE_HIDE_NAVIGATOR';
     public static TOGGLE_NAVIGATOR: string = 'NE_TOGGLE_NAVIGATOR';
+    public static TOGGLE_ROOM_INFO: string = 'NE_TOGGLE_ROOM_INFO';
+    public static TOGGLE_ROOM_LINK: string = 'NE_TOGGLE_ROOM_LINK';
 
     private _roomId: number;
     private _password: string;

src/views/navigator/NavigatorMessageHandler.tsx

@@ -1,4 +1,4 @@
-import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer';
+import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer';
 import { FC, useCallback } from 'react';
 import { GetRoomSessionManager, GetSessionDataManager } from '../../api';
 import { VisitRoom } from '../../api/navigator/VisitRoom';
@@ -9,7 +9,7 @@ import { NavigatorActions } from './reducers/NavigatorReducer';
 
 export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =>
 {
-    const { dispatchNavigatorState = null } = useNavigatorContext();
+    const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext();
 
     const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
     {
@@ -28,8 +28,19 @@ export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =
     {
         const parser = event.getParser();
 
+        const roomInfoData = navigatorState.roomInfoData;
+        roomInfoData.currentRoomOwner = parser.isOwner;
+        roomInfoData.currentRoomId = parser.roomId;
+
+        dispatchNavigatorState({
+            type: NavigatorActions.SET_ROOM_INFO_DATA,
+            payload: {
+                roomInfoData: roomInfoData
+            }
+        });
+
         SendMessageHook(new RoomInfoComposer(parser.roomId, true, false));
-    }, []);
+    }, [ navigatorState, dispatchNavigatorState ]);
 
     const onRoomInfoEvent = useCallback((event: RoomInfoEvent) =>
     {
@@ -37,17 +48,15 @@ export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =
 
         if(parser.roomEnter)
         {
-            // this._data.enteredGuestRoom = parser.data;
-            // this._data.staffPick        = parser.data.roomPicker;
+            const roomInfoData = navigatorState.roomInfoData;
+            roomInfoData.enteredGuestRoom = parser.data;
 
-            // const isCreatedRoom = (this._data.createdRoomId === parser.data.roomId);
-
-            // if(!isCreatedRoom && parser.data.displayRoomEntryAd)
-            // {
-            //     // display ad
-            // }
-
-            // this._data.createdRoomId = 0;
+            dispatchNavigatorState({
+                type: NavigatorActions.SET_ROOM_INFO_DATA,
+                payload: {
+                    roomInfoData: roomInfoData
+                }
+            });
         }
         else if(parser.roomForward)
         {
@@ -66,10 +75,17 @@ export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =
         }
         else
         {
-            // this._data.enteredGuestRoom = parser.data;
-            // this._data.staffPick        = parser.data.roomPicker;
+            const roomInfoData = navigatorState.roomInfoData;
+            roomInfoData.enteredGuestRoom = parser.data;
+
+            dispatchNavigatorState({
+                type: NavigatorActions.SET_ROOM_INFO_DATA,
+                payload: {
+                    roomInfoData: roomInfoData
                 }
-    }, []);
+            });
+        }
+    }, [ dispatchNavigatorState, navigatorState ]);
 
     const onRoomDoorbellEvent = useCallback((event: RoomDoorbellEvent) =>
     {
@@ -146,6 +162,18 @@ export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =
         VisitRoom(parser.roomId);
     }, []);
 
+    const onNavigatorHomeRoomEvent = useCallback((event: NavigatorHomeRoomEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchNavigatorState({
+            type: NavigatorActions.SET_HOME_ROOM_ID,
+            payload: {
+                homeRoomId: parser.homeRoomId
+            }
+        });
+    }, [ dispatchNavigatorState ]);
+
     CreateMessageHook(UserInfoEvent, onUserInfoEvent);
     CreateMessageHook(RoomForwardEvent, onRoomForwardEvent);
     CreateMessageHook(RoomInfoOwnerEvent, onRoomInfoOwnerEvent);
@@ -157,6 +185,7 @@ export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =
     CreateMessageHook(NavigatorSearchEvent, onNavigatorSearchEvent);
     CreateMessageHook(NavigatorCategoriesEvent, onNavigatorCategoriesEvent);
     CreateMessageHook(RoomCreatedEvent, onRoomCreatedEvent);
+    CreateMessageHook(NavigatorHomeRoomEvent, onNavigatorHomeRoomEvent);
 
     return null;
 }

src/views/navigator/NavigatorView.tsx

@@ -11,6 +11,8 @@ import { NavigatorMessageHandler } from './NavigatorMessageHandler';
 import { NavigatorViewProps } from './NavigatorView.types';
 import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer';
 import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView';
+import { NavigatorRoomInfoView } from './views/room-info/NavigatorRoomInfoView';
+import { NavigatorRoomLinkView } from './views/room-link/NavigatorRoomLinkView';
 import { NavigatorSearchResultSetView } from './views/search-result-set/NavigatorSearchResultSetView';
 import { NavigatorSearchView } from './views/search/NavigatorSearchView';
 
@@ -18,6 +20,8 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
     const [ isCreatorOpen, setCreatorOpen ] = useState(false);
+    const [ isRoomInfoOpen, setRoomInfoOpen ] = useState(false);
+    const [ isRoomLinkOpen, setRoomLinkOpen ] = useState(false);
     const [ navigatorState, dispatchNavigatorState ] = useReducer(NavigatorReducer, initialNavigator);
     const { needsNavigatorUpdate = false, topLevelContext = null, topLevelContexts = null } = navigatorState;
 
@@ -34,12 +38,20 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
             case NavigatorEvent.TOGGLE_NAVIGATOR:
                 setIsVisible(value => !value);
                 return;
+            case NavigatorEvent.TOGGLE_ROOM_INFO:
+                setRoomInfoOpen(value => !value);
+                return;
+            case NavigatorEvent.TOGGLE_ROOM_LINK:
+                setRoomLinkOpen(value => !value);
+                return;
         }
     }, []);
 
     useUiEvent(NavigatorEvent.SHOW_NAVIGATOR, onNavigatorEvent);
     useUiEvent(NavigatorEvent.HIDE_NAVIGATOR, onNavigatorEvent);
     useUiEvent(NavigatorEvent.TOGGLE_NAVIGATOR, onNavigatorEvent);
+    useUiEvent(NavigatorEvent.TOGGLE_ROOM_INFO, onNavigatorEvent);
+    useUiEvent(NavigatorEvent.TOGGLE_ROOM_LINK, onNavigatorEvent);
 
     const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
     {
@@ -110,6 +122,8 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
                     </div>
                     </NitroCardContentView>
                 </NitroCardView> }
+            { isRoomInfoOpen && <NavigatorRoomInfoView onCloseClick={ () => setRoomInfoOpen(false) } /> }
+            { isRoomLinkOpen && <NavigatorRoomLinkView onCloseClick={ () => setRoomLinkOpen(false) } /> }
         </NavigatorContextProvider>
     );
 }

src/views/navigator/common/RoomInfoData.ts

@@ -0,0 +1,60 @@
+import { RoomDataParser } from 'nitro-renderer';
+
+export class RoomInfoData
+{
+    private _enteredGuestRoom: RoomDataParser = null;
+    private _createdRoomId: number = 0;
+    private _currentRoomId: number = 0;
+    private _currentRoomOwner: boolean = false;
+    private _canRate: boolean = false;
+
+    public get enteredGuestRoom(): RoomDataParser
+    {
+        return this._enteredGuestRoom;
+    }
+
+    public set enteredGuestRoom(data: RoomDataParser)
+    {
+        this._enteredGuestRoom = data;
+    }
+
+    public get createdRoomId(): number
+    {
+        return this._createdRoomId;
+    }
+
+    public set createdRoomId(id: number)
+    {
+        this._createdRoomId = id;
+    }
+
+    public get currentRoomId(): number
+    {
+        return this._currentRoomId;
+    }
+
+    public set currentRoomId(id: number)
+    {
+        this._currentRoomId = id;
+    }
+
+    public get currentRoomOwner(): boolean
+    {
+        return this._currentRoomOwner;
+    }
+
+    public set currentRoomOwner(flag: boolean)
+    {
+        this._currentRoomOwner = flag;
+    }
+
+    public get canRate(): boolean
+    {
+        return this._canRate;
+    }
+
+    public set canRate(flag: boolean)
+    {
+        this._canRate = flag;
+    }
+}

src/views/navigator/reducers/NavigatorReducer.tsx

@@ -1,5 +1,6 @@
 import { NavigatorCategoryDataParser, NavigatorSearchResultSet, NavigatorTopLevelContext } from 'nitro-renderer';
 import { Reducer } from 'react';
+import { RoomInfoData } from '../common/RoomInfoData';
 
 export interface INavigatorState
 {
@@ -8,6 +9,8 @@ export interface INavigatorState
     topLevelContexts: NavigatorTopLevelContext[];
     searchResult: NavigatorSearchResultSet;
     categories: NavigatorCategoryDataParser[];
+    roomInfoData: RoomInfoData;
+    homeRoomId: number;
 }
 
 export interface INavigatorAction
@@ -19,6 +22,8 @@ export interface INavigatorAction
         topLevelContexts?: NavigatorTopLevelContext[];
         searchResult?: NavigatorSearchResultSet;
         categories?: NavigatorCategoryDataParser[];
+        roomInfoData?: RoomInfoData;
+        homeRoomId?: number;
     }
 }
 
@@ -29,6 +34,8 @@ export class NavigatorActions
     public static SET_TOP_LEVEL_CONTEXTS: string = 'NA_SET_TOP_LEVEL_CONTEXTS';
     public static SET_SEARCH_RESULT: string = 'NA_SET_SEARCH_RESULT';
     public static SET_CATEGORIES: string = 'NA_SET_CATEGORIES';
+    public static SET_ROOM_INFO_DATA: string = 'NA_SET_ROOM_INFO_DATA';
+    public static SET_HOME_ROOM_ID: string = 'NA_SET_HOME_ROOM_ID';
 }
 
 export const initialNavigator: INavigatorState = {
@@ -36,7 +43,9 @@ export const initialNavigator: INavigatorState = {
     topLevelContext: null,
     topLevelContexts: null,
     searchResult: null,
-    categories: null
+    categories: null,
+    roomInfoData: new RoomInfoData(),
+    homeRoomId: null
 }
 
 export const NavigatorReducer: Reducer<INavigatorState, INavigatorAction> = (state, action) =>
@@ -90,6 +99,16 @@ export const NavigatorReducer: Reducer<INavigatorState, INavigatorAction> = (sta
 
             return { ...state, categories };
         }
+        case NavigatorActions.SET_ROOM_INFO_DATA: {
+            const roomInfoData = (action.payload.roomInfoData || state.roomInfoData || null);
+
+            return { ...state, roomInfoData };
+        }
+        case NavigatorActions.SET_HOME_ROOM_ID: {
+            const homeRoomId = (action.payload.homeRoomId || state.homeRoomId || null);
+
+            return { ...state, homeRoomId };
+        }
         default:
             return state;
     }

src/views/navigator/views/NavigatorViews.scss

@@ -2,3 +2,5 @@
 @import './search/NavigatorSearchView';
 @import './search-result/NavigatorSearchResultView';
 @import './search-result-item/NavigatorSearchResultItemView';
+@import './room-info/NavigatorRoomInfoView';
+@import './room-link/NavigatorRoomLinkView';

src/views/navigator/views/room-info/NavigatorRoomInfoView.scss

@@ -0,0 +1,20 @@
+.nitro-room-info {
+    width: 230px;
+
+    .gray {
+        filter: grayscale(1);
+        opacity: .5;
+    }
+
+    .room-thumbnail {
+        position: relative;
+        width: 110px;
+        height: 110px;
+        margin: 0 auto;
+        background-image: url(../../../../assets/images/navigator/thumbnail_placeholder.png);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-color: rgba($black, .125);
+        border-color: $black !important;
+    }
+}

src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx

@@ -0,0 +1,129 @@
+import classNames from 'classnames';
+import { RoomMuteComposer, RoomStaffPickComposer, UserHomeRoomComposer } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { GetConfiguration } from '../../../../api';
+import { NavigatorEvent } from '../../../../events';
+import { dispatchUiEvent } from '../../../../hooks/events';
+import { SendMessageHook } from '../../../../hooks/messages';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { useNavigatorContext } from '../../context/NavigatorContext';
+import { NavigatorActions } from '../../reducers/NavigatorReducer';
+import { NavigatorRoomInfoViewProps } from './NavigatorRoomInfoView.types';
+
+export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
+{
+    const { onCloseClick = null } = props;
+    
+    const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext();
+    const { roomInfoData = null, homeRoomId = null } = navigatorState;
+    const [ roomThumbnail, setRoomThumbnail ] = useState(null);
+    const [ isRoomPicked, setIsRoomPicked ] = useState(false);
+    const [ isRoomMuted, setIsRoomMuted ] = useState(false);
+
+    useEffect(() =>
+    {
+        if(!roomInfoData || !roomInfoData.enteredGuestRoom) return;
+        
+        if(roomInfoData.enteredGuestRoom.officialRoomPicRef)
+        {
+            setRoomThumbnail(GetConfiguration<string>('image.library.url') + roomInfoData.enteredGuestRoom.officialRoomPicRef);
+        }
+
+        setIsRoomPicked(roomInfoData.enteredGuestRoom.roomPicker);
+        setIsRoomMuted(roomInfoData.enteredGuestRoom.allInRoomMuted);
+    }, [ roomInfoData ]);
+    
+    const processAction = useCallback((action: string) =>
+    {
+        if(!roomInfoData || !roomInfoData.enteredGuestRoom) return;
+
+        switch(action)
+        {
+            case 'set_home_room':
+                let newRoomId = -1;
+
+                if(homeRoomId !== roomInfoData.enteredGuestRoom.roomId)
+                {
+                    newRoomId = roomInfoData.enteredGuestRoom.roomId;
+                }
+
+                dispatchNavigatorState({
+                    type: NavigatorActions.SET_HOME_ROOM_ID,
+                    payload: {
+                        homeRoomId: newRoomId
+                    }
+                });
+
+                SendMessageHook(new UserHomeRoomComposer(newRoomId));
+                return;
+            case 'toggle_room_link':
+                dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK));
+                return;
+            case 'toggle_pick':
+                setIsRoomPicked(value => !value);
+                SendMessageHook(new RoomStaffPickComposer(roomInfoData.enteredGuestRoom.roomId));
+                return;
+            case 'toggle_mute':
+                setIsRoomMuted(value => !value);
+                SendMessageHook(new RoomMuteComposer());
+            return;
+            case 'close':
+                onCloseClick();
+                return;
+        }
+        
+    }, [ onCloseClick, dispatchNavigatorState, roomInfoData, homeRoomId ]);
+
+    if(!roomInfoData) return null;
+    
+    return (
+        <NitroCardView className="nitro-room-info" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings.roominfo') } onCloseClick={ () => processAction('close') } />
+            <NitroCardContentView className="text-black">
+                { roomInfoData.enteredGuestRoom && <>
+                    <div className="d-flex justify-content-between align-items-center">
+                        <div className="fw-bold">
+                            { roomInfoData.enteredGuestRoom.roomName }
+                        </div>
+                        <i onClick={ () => processAction('set_home_room') } className={ 'icon icon-house-small cursor-pointer' + classNames({' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } />
+                    </div>
+                    <div className="d-flex align-items-center">
+                        { roomInfoData.enteredGuestRoom.showOwner && <>
+                            <div className="fw-bold text-muted me-1">{ LocalizeText('navigator.roomownercaption') }</div>
+                            <div className="d-flex align-items-center cursor-pointer">
+                                <i className="icon icon-user-profile me-1" />
+                                <div>{ roomInfoData.enteredGuestRoom.ownerName }</div>
+                            </div>
+                        </> }
+                    </div>
+                    <div>
+                        <span className="fw-bold text-muted me-1">{ LocalizeText('navigator.roomrating') }</span> { roomInfoData.enteredGuestRoom.score }
+                    </div>
+                    <div className="d-flex mb-1">
+                        { roomInfoData.enteredGuestRoom.tags.map(tag =>
+                            {
+                                return <div className="bg-muted p-1 rounded me-1 cursor-pointer">#{ tag }</div>
+                            }) }
+                    </div>
+                    <div>{ roomInfoData.enteredGuestRoom.description }</div>
+                    <div className="room-thumbnail border mt-1 mb-2">
+                        <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" />
+                        { roomThumbnail && <img alt="" src={ roomThumbnail } /> }
+                    </div>
+                    <div className="cursor-pointer text-decoration-underline d-flex align-items-center mb-2" onClick={ () => processAction('toggle_room_link') }>
+                        <i className="icon icon-arrows me-1" />
+                        <span>{ LocalizeText('navigator.embed.caption') }</span>
+                    </div>
+                    <button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('navigator.room.popup.info.room.settings') }</button>
+                    <button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('navigator.roomsettings.roomfilter') }</button>
+                    <button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('open.floor.plan.editor') }</button>
+                    <button className="btn btn-sm btn-primary w-100 mb-1" onClick={ () => processAction('toggle_pick') }>{ LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }</button>
+                    <button className="btn btn-sm btn-danger w-100 mb-1" disabled={ true }>{ LocalizeText('help.emergency.main.report.room') }</button>
+                    <button className="btn btn-sm btn-primary w-100" onClick={ () => processAction('toggle_mute') }>{ LocalizeText(isRoomMuted ? 'navigator.muteall_on' : 'navigator.muteall_off') }</button>
+                </> }
+                
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};

src/views/navigator/views/room-info/NavigatorRoomInfoView.types.ts

@@ -0,0 +1,5 @@
+
+export class NavigatorRoomInfoViewProps
+{
+    onCloseClick: () => void;
+}

src/views/navigator/views/room-link/NavigatorRoomLinkView.scss

@@ -0,0 +1,14 @@
+.nitro-room-link {
+    width: 400px;
+
+    .room-thumbnail {
+        position: relative;
+        width: 110px;
+        height: 110px;
+        background-image: url(../../../../assets/images/navigator/thumbnail_placeholder.png);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-color: rgba($black, .125);
+        border-color: $black !important;
+    }
+}

src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx

@@ -0,0 +1,70 @@
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { GetConfiguration } from '../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { useNavigatorContext } from '../../context/NavigatorContext';
+import { NavigatorRoomLinkViewProps } from './NavigatorRoomLinkView.types';
+
+export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
+{
+    const { onCloseClick = null } = props;
+    const { navigatorState = null } = useNavigatorContext();
+    const { roomInfoData = null } = navigatorState;
+
+    const [ roomThumbnail, setRoomThumbnail ] = useState(null);
+    const [ roomLink, setRoomLink ] = useState(null);
+    
+    const elementRef = useRef<HTMLInputElement>();
+    
+    useEffect(() =>
+    {
+        if(!roomInfoData || !roomInfoData.enteredGuestRoom) return;
+
+        if(roomInfoData.enteredGuestRoom.officialRoomPicRef)
+        {
+            setRoomThumbnail(GetConfiguration<string>('image.library.url') + roomInfoData.enteredGuestRoom.officialRoomPicRef);
+        }
+
+        const urlPrefix = GetConfiguration<string>('url.prefix');
+        const roomLinkRaw = LocalizeText('navigator.embed.src', ['roomId'], [roomInfoData.enteredGuestRoom.roomId.toString()]).replace('${url.prefix}', urlPrefix);
+
+        setRoomLink(roomLinkRaw);
+    }, [ roomInfoData ]);
+
+    const processAction = useCallback((action: string) =>
+    {
+        if(!roomInfoData || !roomInfoData.enteredGuestRoom) return;
+
+        switch(action)
+        {
+            case 'copy_room_link':
+                elementRef.current.select();
+                document.execCommand('copy');
+                return;
+            case 'close':
+                onCloseClick();
+                return;
+        }
+        
+    }, [onCloseClick, roomInfoData]);
+
+    if(!roomInfoData) return null;
+    
+    return (
+        <NitroCardView className="nitro-room-link" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('navigator.embed.title') } onCloseClick={ () => processAction('close') } />
+            <NitroCardContentView className="text-black d-flex align-items-center">
+                <div className="me-3">
+                    <div className="room-thumbnail border">
+                        { roomThumbnail && <img alt="" src={ roomThumbnail } /> }
+                    </div>
+                </div>
+                <div>
+                    <div className="h5 fw-bold m-0">{ LocalizeText('navigator.embed.headline') }</div>
+                    <div>{ LocalizeText('navigator.embed.info') }</div>
+                    { roomLink && <input ref={ elementRef } type="text" readOnly className="form-control form-control-sm" value={ roomLink } /> }
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};

src/views/navigator/views/room-link/NavigatorRoomLinkView.types.ts

@@ -0,0 +1,5 @@
+
+export class NavigatorRoomLinkViewProps
+{
+    onCloseClick: () => void;
+}

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

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
 import { RoomLikeRoomComposer } from 'nitro-renderer';
 import { FC, useCallback, useState } from 'react';
+import { NavigatorEvent } from '../../../../events';
+import { dispatchUiEvent } from '../../../../hooks/events';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { useRoomContext } from '../../context/RoomContext';
@@ -13,13 +15,14 @@ export const RoomToolsWidgetView: FC<RoomToolsWidgetViewProps> = props =>
 
     const [ isExpended, setIsExpanded ] = useState(false);
     const [ isZoomedIn, setIsZoomedIn ] = useState(false);
-    const [ liked, setLiked ] = useState(false);
+    const [ isLiked, setIsLiked ] = useState(false);
 
     const handleToolClick = useCallback((action: string) =>
     {
         switch(action)
         {
             case 'settings':
+                dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_INFO));
                 return;
             case 'zoom':
                 widgetHandler.processWidgetMessage(new RoomWidgetZoomToggleMessage(!isZoomedIn));
@@ -28,15 +31,16 @@ export const RoomToolsWidgetView: FC<RoomToolsWidgetViewProps> = props =>
             case 'chat_history':
                 return;
             case 'like_room':
-                if(liked) return;
+                if(isLiked) return;
 
                 SendMessageHook(new RoomLikeRoomComposer(1));
-                setLiked(true);
+                setIsLiked(true);
                 return;
-            case 'room_link':
+            case 'toggle_room_link':
+                dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK));
                 return;
         }
-    }, [ isZoomedIn, liked, widgetHandler ]);
+    }, [ isZoomedIn, isLiked, widgetHandler ]);
     
     return (
         <div className={'nitro-room-tools ps-3 d-flex' + classNames({' open': isExpended})}>
@@ -50,10 +54,10 @@ export const RoomToolsWidgetView: FC<RoomToolsWidgetViewProps> = props =>
                 <div className="list-group-item" onClick={ () => handleToolClick('chat_history') }>
                     <i className="fas fa-comment-alt me-2" />{ LocalizeText('room.chathistory.button.text') }
                 </div>
-                <div className={ 'list-group-item' + classNames({' disabled': liked})} onClick={ () => handleToolClick('like_room') }>
+                <div className={ 'list-group-item' + classNames({' disabled': isLiked})} onClick={ () => handleToolClick('like_room') }>
                     <i className="fas fa-heart me-2" />{ LocalizeText('room.like.button.text') }
                 </div>
-                <div className="list-group-item" onClick={ () => handleToolClick('room_link') }>
+                <div className="list-group-item" onClick={ () => handleToolClick('toggle_room_link') }>
                     <i className="fas fa-link me-2" />{ LocalizeText('navigator.embed.caption') }
                 </div>
             </div>