Navigator Doorbell (requester) and Password

src/views/navigator/NavigatorMessageHandler.tsx

@@ -1,12 +1,13 @@
-import { NavigatorCategoriesComposer, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomDataParser, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer';
+import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer';
 import { useCallback } from 'react';
 import { GetRoomSessionManager, GetSessionDataManager } from '../../api';
 import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
+import { NavigatorLockViewStage } from './lock/NavigatorLockView.types';
 import { NavigatorMessageHandlerProps } from './NavigatorMessageHandler.types';
 
 export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JSX.Element
 {
-    const { setTopLevelContext = null, setTopLevelContexts = null, setSearchResults = null } = props;
+    const { setTopLevelContext = null, setTopLevelContexts = null, setSearchResults = null, showLock = null, hideLock = null } = props;
 
     const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
     {
@@ -48,7 +49,6 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
 
             // this._data.createdRoomId = 0;
         }
-
         else if(parser.roomForward)
         {
             if((parser.data.ownerName !== GetSessionDataManager().userName) && !parser.isGroupMember)
@@ -56,17 +56,14 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
                 switch(parser.data.doorMode)
                 {
                     case RoomDataParser.DOORBELL_STATE:
-                        console.log('open doorbell');
-                        return;
                     case RoomDataParser.PASSWORD_STATE:
-                        console.log('open password');
+                        showLock();
                         return;
                 }
             }
 
             GetRoomSessionManager().createSession(parser.data.roomId);
         }
-
         else
         {
             // this._data.enteredGuestRoom = parser.data;
@@ -74,6 +71,50 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
         }
     }, []);
 
+    const onRoomDoorbellEvent = useCallback((event: RoomDoorbellEvent) =>
+    {
+        if(!event) return;
+
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        if(!parser.userName || (parser.userName.length === 0))
+        {
+            showLock(NavigatorLockViewStage.WAITING);
+        }
+    }, []);
+
+    const onRoomDoorbellAcceptedEvent = useCallback((event: RoomDoorbellAcceptedEvent) =>
+    {
+        if(!event) return;
+
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        if(!parser.userName || (parser.userName.length === 0))
+        {
+            hideLock();
+        }
+    }, []);
+
+    const onGenericErrorEvent = useCallback((event: GenericErrorEvent) =>
+    {
+        if(!event) return;
+
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        switch(parser.errorCode)
+        {
+            case -100002:
+                showLock(NavigatorLockViewStage.FAILED);
+                break;
+        }
+    }, []);
+
     const onNavigatorMetadataEvent = useCallback((event: NavigatorMetadataEvent) =>
     {
         const parser = event.getParser();
@@ -96,6 +137,9 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
     CreateMessageHook(new RoomForwardEvent(onRoomForwardEvent));
     CreateMessageHook(new RoomInfoOwnerEvent(onRoomInfoOwnerEvent));
     CreateMessageHook(new RoomInfoEvent(onRoomInfoEvent));
+    CreateMessageHook(new RoomDoorbellEvent(onRoomDoorbellEvent));
+    CreateMessageHook(new RoomDoorbellAcceptedEvent(onRoomDoorbellAcceptedEvent));
+    CreateMessageHook(new GenericErrorEvent(onGenericErrorEvent));
     CreateMessageHook(new NavigatorMetadataEvent(onNavigatorMetadataEvent));
     CreateMessageHook(new NavigatorSearchEvent(onNavigatorSearchEvent));
 

src/views/navigator/NavigatorMessageHandler.types.ts

@@ -1,8 +1,11 @@
 import { NavigatorSearchResultList, NavigatorTopLevelContext } from 'nitro-renderer';
+import { NavigatorLockViewStage } from './lock/NavigatorLockView.types';
 
 export interface NavigatorMessageHandlerProps
 {
     setTopLevelContext: (context: NavigatorTopLevelContext) => void;
     setTopLevelContexts: (contexts: NavigatorTopLevelContext[]) => void;
     setSearchResults: (results: NavigatorSearchResultList[]) => void;
+    showLock: (stage?: NavigatorLockViewStage) => void;
+    hideLock: () => void;
 }

src/views/navigator/NavigatorView.scss

@@ -2,5 +2,6 @@
     width: 400px;
 }
 
+@import './lock/NavigatorLockView';
 @import './result-lists/NavigatorResultListsView';
 @import './tabs/NavigatorTabsView';

src/views/navigator/NavigatorView.tsx

@@ -1,26 +1,35 @@
-import { NavigatorInitComposer, NavigatorSearchComposer, NavigatorSearchResultList, NavigatorTopLevelContext, RoomSessionEvent } from 'nitro-renderer';
+import { NavigatorInitComposer, NavigatorSearchComposer, NavigatorSearchResultList, NavigatorTopLevelContext, RoomDataParser, RoomInfoComposer, RoomSessionEvent } from 'nitro-renderer';
-import { MouseEvent, useCallback, useEffect, useState } from 'react';
+import React, { MouseEvent, useCallback, useEffect, useState } from 'react';
+import { GetRoomSessionManager } from '../../api';
 import { NavigatorEvent } from '../../events';
 import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
 import { LocalizeText } from '../../utils/LocalizeText';
+import { NavigatorLockView } from './lock/NavigatorLockView';
+import { NavigatorLockViewStage } from './lock/NavigatorLockView.types';
 import { NavigatorMessageHandler } from './NavigatorMessageHandler';
-import { NavigatorViewProps } from './NavigatorView.types';
+import { INavigatorContext, NavigatorViewProps } from './NavigatorView.types';
 import { NavigatorResultListsView } from './result-lists/NavigatorResultListsView';
 import { NavigatorTabsView } from './tabs/NavigatorTabsView';
 
+export const NavigatorContext = React.createContext<INavigatorContext>(null);
+
 export function NavigatorView(props: NavigatorViewProps): JSX.Element
 {
-    const [ isVisible, setIsVisible ]   = useState(false);
+    const [ isVisible, setIsVisible ]           = useState(false);
-    const [ isLoaded, setIsLoaded ]     = useState(false);
+    const [ isLoaded, setIsLoaded ]             = useState(false);
-    const [ isLoading, setIsLoading ]   = useState(false);
+    const [ isLoading, setIsLoading ]           = useState(false);
-    const [ isSearching, setIsSearching ] = useState(false);
+    const [ isSearching, setIsSearching ]       = useState(false);
+    const [ isLockVisible, setIsLockVisible ]   = useState(false);
+
+    const [ lockStage, setLockStage ]               = useState<NavigatorLockViewStage>(NavigatorLockViewStage.INIT);
+    const [ lastRoomVisited, setLastRoomVisited ]   = useState<RoomDataParser>(null);
 
     const [ topLevelContexts, setTopLevelContexts ] = useState<NavigatorTopLevelContext[]>(null);
-    const [ topLevelContext, setTopLevelContext ] = useState<NavigatorTopLevelContext>(null);
+    const [ topLevelContext, setTopLevelContext ]   = useState<NavigatorTopLevelContext>(null);
-    const [ searchResults, setSearchResults ] = useState<NavigatorSearchResultList[]>(null);
+    const [ searchResults, setSearchResults ]       = useState<NavigatorSearchResultList[]>(null);
 
     function hideNavigator(event: MouseEvent = null): void
     {
@@ -29,6 +38,31 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
         setIsVisible(false);
     }
 
+    function hideLock(): void
+    {
+        setIsLockVisible(false);
+        setLockStage(NavigatorLockViewStage.INIT);
+    }
+
+    function showLock(stage: NavigatorLockViewStage = NavigatorLockViewStage.INIT)
+    {
+        setLockStage(stage);
+        setIsLockVisible(true);
+    }
+
+    function visitRoom(roomId: number, password: string = null): void
+    {
+        setIsLockVisible(false);
+        GetRoomSessionManager().createSession(roomId, password);
+    }
+
+    function tryVisitRoom(room: RoomDataParser): void
+    {
+        setIsLockVisible(false);
+        setLastRoomVisited(room);
+        SendMessageHook(new RoomInfoComposer(room.roomId, false, true));
+    }
+
     const onNavigatorEvent = useCallback((event: NavigatorEvent) =>
     {
         switch(event.type)
@@ -94,19 +128,22 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
     
     return (
         <>
-            <NavigatorMessageHandler setTopLevelContext={ setTopLevelContext } setTopLevelContexts={ setTopLevelContexts } setSearchResults={ setSearchResults } />
+            <NavigatorContext.Provider value={{ onTryVisitRoom: tryVisitRoom }}>
-            { isVisible && <DraggableWindow handle=".drag-handler">
+                <NavigatorMessageHandler setTopLevelContext={ setTopLevelContext } setTopLevelContexts={ setTopLevelContexts } setSearchResults={ setSearchResults } showLock={ showLock } hideLock={ hideLock } />
-                <div className="nitro-navigator d-flex flex-column bg-primary border border-black shadow rounded position-absolute">
+                { isVisible && <DraggableWindow handle=".drag-handler">
-                    <div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
+                    <div className="nitro-navigator d-flex flex-column bg-primary border border-black shadow rounded position-absolute">
-                        <div className="h6 m-0">{ LocalizeText((isLoading || isSearching) ? 'navigator.title.is.busy' : 'navigator.title') }</div>
+                        <div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
-                        <button type="button" className="close" onClick={ hideNavigator }>
+                            <div className="h6 m-0">{ LocalizeText((isLoading || isSearching) ? 'navigator.title.is.busy' : 'navigator.title') }</div>
-                            <i className="fas fa-times"></i>
+                            <button type="button" className="close" onClick={ hideNavigator }>
-                        </button>
+                                <i className="fas fa-times"></i>
+                            </button>
+                        </div>
+                        <NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } />
+                        <NavigatorResultListsView resultLists={ searchResults } />
                     </div>
-                    <NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } />
+                </DraggableWindow> }
-                    <NavigatorResultListsView resultLists={ searchResults } />
+                { isLockVisible && <NavigatorLockView roomData={ lastRoomVisited } stage={ lockStage } onHideLock={ hideLock } onVisitRoom={ visitRoom }></NavigatorLockView> }
-                </div>
+            </NavigatorContext.Provider>
-            </DraggableWindow> }
         </>
     );
 }

src/views/navigator/NavigatorView.types.ts

@@ -1,4 +1,8 @@
+import { RoomDataParser } from 'nitro-renderer';
 export interface NavigatorViewProps
+{}
+
+export interface INavigatorContext
 {
-    
+    onTryVisitRoom: (roomData: RoomDataParser) => void;
 }

src/views/navigator/lock/NavigatorLockView.scss

@@ -0,0 +1,3 @@
+.nitro-navigator-lock {
+    width: 250px;
+}

src/views/navigator/lock/NavigatorLockView.tsx

@@ -0,0 +1,38 @@
+import { RoomDataParser } from 'nitro-renderer';
+import { DraggableWindow } from '../../../hooks/draggable-window/DraggableWindow';
+import { LocalizeText } from '../../../utils/LocalizeText';
+import { NavigatorLockDoorbellView } from './doorbell/NavigatorLockDoorbellView';
+import { NavigatorLockViewProps } from './NavigatorLockView.types';
+import { NavigatorLockPasswordView } from './password/NavigatorLockPasswordView';
+
+export function NavigatorLockView(props: NavigatorLockViewProps): JSX.Element
+{
+    const { roomData = null, stage = null, onHideLock = null, onVisitRoom = null } = props;
+
+    function visitRoom(password?: string): void
+    {
+        onVisitRoom(roomData.roomId, password);
+    }
+
+    return (
+        <>
+        <DraggableWindow handle=".drag-handler">
+            <div className="nitro-navigator-lock d-flex flex-column bg-primary border border-black shadow rounded position-absolute">
+                <div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
+                    <div className="h6 m-0">{ LocalizeText(roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'navigator.password.title' : 'navigator.doorbell.title') }</div>
+                    <button type="button" className="close" onClick={ onHideLock }>
+                        <i className="fas fa-times"></i>
+                    </button>
+                </div>
+                <div className="p-3">
+                    { roomData && <>
+                        <h5>{ roomData.roomName }</h5>
+                        { roomData.doorMode && roomData.doorMode === RoomDataParser.DOORBELL_STATE && <NavigatorLockDoorbellView stage={stage} onVisitRoom={ visitRoom } onHideLock={ onHideLock } /> }
+                        { roomData.doorMode && roomData.doorMode === RoomDataParser.PASSWORD_STATE && <NavigatorLockPasswordView stage={stage} onVisitRoom={ visitRoom } onHideLock={ onHideLock } /> }
+                    </> }
+                </div>
+            </div>
+            </DraggableWindow>
+        </>
+    );
+}

src/views/navigator/lock/NavigatorLockView.types.ts

@@ -0,0 +1,16 @@
+import { RoomDataParser } from 'nitro-renderer';
+
+export interface NavigatorLockViewProps
+{
+    roomData: RoomDataParser;
+    stage: NavigatorLockViewStage;
+    onHideLock: () => void;
+    onVisitRoom: (roomId: number, password?: string) => void;
+}
+
+export enum NavigatorLockViewStage
+{
+    INIT = 'navigator_lock_view_stage_init',
+    WAITING = 'navigator_lock_view_stage_waiting',
+    FAILED = 'navigator_lock_view_stage_failed'
+}

src/views/navigator/lock/doorbell/NavigatorLockDoorbellView.tsx

@@ -0,0 +1,22 @@
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { NavigatorLockViewStage } from '../NavigatorLockView.types';
+import { NavigatorLockDoorbellViewProps } from './NavigatorLockDoorbellView.types';
+
+export function NavigatorLockDoorbellView(props: NavigatorLockDoorbellViewProps): JSX.Element
+{
+    const { stage = null, onVisitRoom = null, onHideLock = null } = props;
+
+    return (
+        <>
+            { stage && <div className="mb-3">
+                { stage === NavigatorLockViewStage.INIT && LocalizeText('navigator.doorbell.info') }
+                { stage === NavigatorLockViewStage.WAITING && LocalizeText('navigator.doorbell.waiting') }
+                { stage === NavigatorLockViewStage.FAILED && LocalizeText('navigator.doorbell.no.answer') }
+            </div> }
+            <div className="d-flex justify-content-between">
+                <button type="button" className="btn btn-secondary" onClick={ () => onHideLock() }>{ LocalizeText('generic.cancel') }</button>
+                { stage === NavigatorLockViewStage.INIT && <button type="button" className="btn btn-primary" onClick={ () => onVisitRoom() }>{ LocalizeText('navigator.doorbell.button.ring') }</button> }
+            </div>
+        </>
+    );
+}

src/views/navigator/lock/doorbell/NavigatorLockDoorbellView.types.ts

@@ -0,0 +1,8 @@
+import { NavigatorLockViewStage } from '../NavigatorLockView.types';
+
+export interface NavigatorLockDoorbellViewProps
+{
+    stage: NavigatorLockViewStage;
+    onVisitRoom: (password?: string) => void;
+    onHideLock: () => void;
+}

src/views/navigator/lock/password/NavigatorLockPasswordView.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { NavigatorLockViewStage } from '../NavigatorLockView.types';
+import { NavigatorLockPasswordViewProps } from './NavigatorLockPasswordView.types';
+
+export function NavigatorLockPasswordView(props: NavigatorLockPasswordViewProps): JSX.Element
+{
+    const { stage = null, onVisitRoom = null, onHideLock = null } = props;
+
+    const [ password, setPassword ] = useState<string>(null);
+
+    return (
+        <>
+            { stage && <div className="mb-2">
+                { stage === NavigatorLockViewStage.INIT && LocalizeText('navigator.password.info') }
+                { stage === NavigatorLockViewStage.FAILED && LocalizeText('navigator.password.retryinfo') }
+            </div> }
+            <div className="form-group mb-3">
+                <label>{ LocalizeText('navigator.password.enter') }</label>
+                <input autoComplete="off" type="password" className="form-control form-control-sm" placeholder="*****" value={ password } onChange={ (event) => setPassword(event.target.value) } />
+            </div>
+            <div className="d-flex justify-content-between">
+                <button type="button" className="btn btn-secondary" onClick={ () => onHideLock() }>{ LocalizeText('generic.cancel') }</button>
+                <button type="button" className="btn btn-primary" onClick={ () => onVisitRoom(password) }>{ LocalizeText('navigator.password.button.try') }</button>
+            </div>
+        </>
+    );
+}

src/views/navigator/lock/password/NavigatorLockPasswordView.types.ts

@@ -0,0 +1,8 @@
+import { NavigatorLockViewStage } from '../NavigatorLockView.types';
+
+export interface NavigatorLockPasswordViewProps
+{
+    stage: NavigatorLockViewStage;
+    onVisitRoom: (password?: string) => void;
+    onHideLock: () => void;
+}

src/views/navigator/result-lists/NavigatorResultListsView.tsx

@@ -9,7 +9,7 @@ export function NavigatorResultListsView(props: NavigatorResultListsViewProps):
         <div className="nitro-navigator-result-lists px-3 pb-3">
             { resultLists && resultLists.length &&  resultLists.map((resultList, index) =>
                 {
-                    return <NavigatorResultListView key={ index } resultList={ resultList }  />
+                    return <NavigatorResultListView key={ index } resultList={ resultList } isLast={ index + 1 === resultLists.length }  />
                 })
             }
         </div>

src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx

@@ -6,7 +6,7 @@ import { NavigatorResultView } from './result/NavigatorResultView';
 
 export function NavigatorResultListView(props: NavigatorResultListViewProps): JSX.Element
 {
-    const { resultList = null }         = props;
+    const { resultList = null, isLast = false } = props;
 
     const [ isExtended, setIsExtended ] = useState(true);
 
@@ -37,7 +37,7 @@ export function NavigatorResultListView(props: NavigatorResultListViewProps): JS
     }
 
     return (
-        <div className="mb-2">
+        <div>
             <div className="d-flex">
                 <div className=" mr-2" onClick={ toggleList }><i className={classNames({ 'fas': true, 'fa-plus': !isExtended, 'fa-minus': isExtended })}></i></div>
                 <div className="align-self-center w-100">{ LocalizeText(getListCode()) }</div>
@@ -47,7 +47,7 @@ export function NavigatorResultListView(props: NavigatorResultListViewProps): JS
                     return <NavigatorResultView key={ index } result={ room }  />
                 })
             }
-            <hr />
+            { !isLast && <hr className="mb-2" /> }
         </div>
     );
 }

src/views/navigator/result-lists/result-list/NavigatorResultListView.types.ts

@@ -3,4 +3,5 @@ import { NavigatorSearchResultList } from 'nitro-renderer';
 export interface NavigatorResultListViewProps
 {
     resultList: NavigatorSearchResultList;
+    isLast: boolean;
 }

src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import { RoomDataParser, RoomInfoComposer } from 'nitro-renderer';
+import { RoomDataParser } from 'nitro-renderer';
 import React from 'react';
-import { SendMessageHook } from '../../../../../hooks/messages/message-event';
+import { NavigatorContext } from '../../../NavigatorView';
 import { NavigatorResultViewProps } from './NavigatorResultView.types';
 
 export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Element
@@ -36,32 +36,31 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
         console.log('info');
     }
 
-    function enterRoom(): void
-    {
-        SendMessageHook(new RoomInfoComposer(result.roomId, false, true));
-    }
-
     return (
-        <div className="nitro-navigator-result rounded mt-1 py-1 px-2" onClick={ enterRoom }>
+        <NavigatorContext.Consumer>
-            <div className="d-flex">
+        { navigatorContext => {
-                <div className="mr-2 align-self-center">
+            return <div className="nitro-navigator-result rounded mt-1 py-1 px-2" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
-                    <div className={'badge badge-sm ' + getUserCounterColor() }><i className="fas fa-user"></i> { result.userCount }</div>
+                        <div className="d-flex">
-                </div>
+                            <div className="mr-2 align-self-center">
-                <div className="w-100 align-self-center">{ result.roomName }</div>
+                                <div className={'badge badge-sm ' + getUserCounterColor() }><i className="fas fa-user"></i> { result.userCount }</div>
-                { result.doorMode !== RoomDataParser.OPEN_STATE && 
+                            </div>
-                    <div className="ml-2 small align-self-center">
+                            <div className="w-100 align-self-center">{ result.roomName }</div>
-                        <i className={classNames({'fas': true, 'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE})}></i>
+                            { result.doorMode !== RoomDataParser.OPEN_STATE && 
+                                <div className="ml-2 small align-self-center">
+                                    <i className={classNames({'fas': true, 'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE})}></i>
+                                </div>
+                            }
+                            { result.habboGroupId > 0 && 
+                                <div className="ml-2 small align-self-center">
+                                    <i className="fas fa-users"></i>
+                                </div>
+                            }
+                            <div className="ml-2 small align-self-center" onClick={ openInfo }>
+                                <i className="fas fa-info-circle"></i>
+                            </div>
+                        </div>
                     </div>
-                }
+        }}
-                { result.habboGroupId > 0 && 
+        </NavigatorContext.Consumer>
-                    <div className="ml-2 small align-self-center">
-                        <i className="fas fa-users"></i>
-                    </div>
-                }
-                <div className="ml-2 small align-self-center" onClick={ openInfo }>
-                    <i className="fas fa-info-circle"></i>
-                </div>
-            </div>
-        </div>
     );
 }