From 936595d4b211f787d15c6c1082e5208e14497009 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Fri, 3 May 2024 11:35:06 +0200
Subject: [PATCH] Update: Room Settings

---
 .../navigator/views/NavigatorRoomInfoView.tsx | 159 +++++++-----------
 1 file changed, 65 insertions(+), 94 deletions(-)

diff --git a/src/components/navigator/views/NavigatorRoomInfoView.tsx b/src/components/navigator/views/NavigatorRoomInfoView.tsx
index 89f2e4f..b6aa5ad 100644
--- a/src/components/navigator/views/NavigatorRoomInfoView.tsx
+++ b/src/components/navigator/views/NavigatorRoomInfoView.tsx
@@ -1,10 +1,10 @@
-import { AddFavouriteRoomMessageComposer, DeleteFavouriteRoomMessageComposer, GetCustomRoomFilterMessageComposer, NavigatorSearchComposer, RoomMuteComposer, RoomSettingsComposer, SecurityLevel, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
+import { GetCustomRoomFilterMessageComposer, NavigatorSearchComposer, RemoveOwnRoomRightsRoomMessageComposer, RoomControllerLevel, RoomMuteComposer, RoomSettingsComposer, SecurityLevel, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { CreateLinkEvent, DispatchUiEvent, GetConfiguration, GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer } from '../../../api';
-import { Base, Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView, classNames } from '../../../common';
-
+import { FaLink, FaSignOutAlt } from 'react-icons/fa';
+import { CreateLinkEvent, DispatchUiEvent, GetGroupInformation, GetSessionDataManager, LocalizeText, ReportType, SendMessageComposer } from '../../../api';
+import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView, classNames } from '../../../common';
 import { RoomWidgetThumbnailEvent } from '../../../events';
-import { useHelp, useNavigator } from '../../../hooks';
+import { useHelp, useNavigator, useRoom } from '../../../hooks';
 
 export class NavigatorRoomInfoViewProps
 {
@@ -16,9 +16,9 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
     const { onCloseClick = null } = props;
     const [ isRoomPicked, setIsRoomPicked ] = useState(false);
     const [ isRoomMuted, setIsRoomMuted ] = useState(false);
-    const [ isOpenLink, setIsOpenLink ] = useState<boolean>(false);
     const { report = null } = useHelp();
     const { navigatorData = null } = useNavigator();
+    const { roomSession = null } = useRoom();
 
     const hasPermission = (permission: string) =>
     {
@@ -28,6 +28,10 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                 return (GetSessionDataManager().userId === navigatorData.enteredGuestRoom.ownerId || GetSessionDataManager().isModerator);
             case 'staff_pick':
                 return GetSessionDataManager().securityLevel >= SecurityLevel.COMMUNITY;
+            case 'floor':
+                return roomSession?.controllerLevel >= RoomControllerLevel.GUEST;
+            case 'guest':
+                return roomSession?.controllerLevel === RoomControllerLevel.GUEST;
             default: return false;
         }
     }
@@ -39,14 +43,14 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
         switch(action)
         {
             case 'set_home_room':
-                let newRoomId = -1;
+                let newRoomId = 0;
 
                 if(navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId)
                 {
                     newRoomId = navigatorData.enteredGuestRoom.roomId;
                 }
 
-                if(newRoomId > 0) SendMessageComposer(new UpdateHomeRoomMessageComposer(newRoomId));
+                SendMessageComposer(new UpdateHomeRoomMessageComposer(newRoomId));
                 return;
             case 'navigator_search_tag':
                 CreateLinkEvent(`navigator/search/${ value }`);
@@ -54,14 +58,15 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                 return;
             case 'open_room_thumbnail_camera':
                 DispatchUiEvent(new RoomWidgetThumbnailEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL));
-                onCloseClick();
                 return;
             case 'open_group_info':
                 GetGroupInformation(navigatorData.enteredGuestRoom.habboGroupId);
                 return;
+            case 'toggle_room_link':
+                CreateLinkEvent('navigator/toggle-room-link');
+                return;
             case 'open_room_settings':
                 SendMessageComposer(new RoomSettingsComposer(navigatorData.enteredGuestRoom.roomId));
-                onCloseClick();
                 return;
             case 'toggle_pick':
                 setIsRoomPicked(value => !value);
@@ -73,21 +78,15 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                 return;
             case 'room_filter':
                 SendMessageComposer(new GetCustomRoomFilterMessageComposer(navigatorData.enteredGuestRoom.roomId));
-                onCloseClick();
                 return;
             case 'open_floorplan_editor':
                 CreateLinkEvent('floor-editor/toggle');
-                onCloseClick();
                 return;
             case 'report_room':
                 report(ReportType.ROOM, { roomId: navigatorData.enteredGuestRoom.roomId, roomName: navigatorData.enteredGuestRoom.roomName });
-                onCloseClick();
                 return;
-            case 'set_favourite_room':
-                SendMessageComposer(new AddFavouriteRoomMessageComposer(navigatorData.enteredGuestRoom.roomId));    
-                return;
-            case 'set_unfavourite_room':
-                SendMessageComposer(new DeleteFavouriteRoomMessageComposer(navigatorData.enteredGuestRoom.roomId));    
+            case 'remove_rights':
+                SendMessageComposer(new RemoveOwnRoomRightsRoomMessageComposer(navigatorData.enteredGuestRoom.roomId));
                 return;
             case 'close':
                 onCloseClick();
@@ -108,111 +107,83 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
     if(!navigatorData.enteredGuestRoom) return null;
 
     return (
-        <NitroCardView className="nitro-room-info" theme="primary">
+        <NitroCardView className="nitro-room-info" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings.roominfo') } onCloseClick={ () => processAction('close') } />
             <NitroCardContentView className="text-black">
                 { navigatorData.enteredGuestRoom &&
                     <>
                         <Flex gap={ 2 } overflow="hidden">
+                            <Flex column gap={ 2 } overflow="hidden" shrink style={ { maxWidth: '110px' } }>
+                                <LayoutRoomThumbnailView roomId={ navigatorData.enteredGuestRoom.roomId } customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef }>
+                                    { hasPermission('settings') && <i className="top-0 m-1 cursor-pointer icon icon-camera-small position-absolute b-0 r-0" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
+                                </LayoutRoomThumbnailView>
+                                { (navigatorData.enteredGuestRoom.tags.length > 0) &&
+                                            <Flex column gap={ 1 }>
+                                                { navigatorData.enteredGuestRoom.tags.map((tag, index) =>
+                                                {
+                                                    return <Text key={ 'tag-' + index } pointer className="w-full p-1 rounded bg-muted" truncate onClick={ event => processAction('navigator_search_tag', tag) }>#{ tag }</Text>
+                                                }) }
+                                            </Flex> }
+                            </Flex>
                             <Column grow gap={ 1 } overflow="hidden">
                                 <Flex gap={ 1 }>
-                                    <Column grow gap={ 1 }>
-                                        <Flex gap={ 1 } justifyContent="between">
-                                            <Text bold>{ navigatorData.enteredGuestRoom.roomName }</Text>
-                                            <Flex>
-                                                <i title={ navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId ? LocalizeText('navigator.roominfo.makehome.tooltip') : '' } onClick={ () => processAction('set_home_room') } className={ classNames('flex-shrink-0 icon icon-house-small', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'cursor-pointer'), ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } />
-                                                { /* <Flex className={ navigatorData.enteredGuestRoom.ownerId !== GetSessionDataManager().userId ? 'ms-1' : 'ms-4' }>
-                                                    { (navigatorData.enteredGuestRoom.ownerId !== GetSessionDataManager().userId) &&
-                                                        <i onClick={ () => processAction('set_favourite_room') } className={ classNames('flex-shrink-0 icon icon-favourite-room-active cursor-pointer') } />
-                                                        <i onClick={ () => processAction('set_unfavourite_room') } className={ classNames('flex-shrink-0 icon icon-favourite-room-inactive cursor-pointer') } />
-                                                    }
-                                                </Flex> */ }
-                                            </Flex>
-                                        </Flex>
+                                    <Column grow gap={ 1 } overflow="hidden">
+                                        <Text bold truncate>{ navigatorData.enteredGuestRoom.roomName }</Text>
                                         { navigatorData.enteredGuestRoom.showOwner &&
-                                            <Flex pointer title={ LocalizeText('guide.help.common.profile.tooltip') } alignItems="center" gap={ 1 } onClick={ () => GetUserProfile(navigatorData.enteredGuestRoom.ownerId) }>
-                                                <Text small variant="muted">{ LocalizeText('navigator.roomownercaption') }</Text>
+                                            <Flex alignItems="center" gap={ 1 }>
+                                                <Text variant="muted">{ LocalizeText('navigator.roomownercaption') }</Text>
                                                 <Flex alignItems="center" gap={ 1 }>
                                                     <UserProfileIconView userId={ navigatorData.enteredGuestRoom.ownerId } />
-                                                    <Text small>{ navigatorData.enteredGuestRoom.ownerName }</Text>
+                                                    <Text>{ navigatorData.enteredGuestRoom.ownerName }</Text>
                                                 </Flex>
-                                            </Flex>
-                                        }
+                                            </Flex> }
                                         <Flex alignItems="center" gap={ 1 }>
-                                            <Text small variant="muted">{ LocalizeText('navigator.roomrating') }</Text>
-                                            <Text small>{ navigatorData.currentRoomRating }</Text>
+                                            <Text variant="muted">{ LocalizeText('navigator.roomrating') }</Text>
+                                            <Text>{ navigatorData.currentRoomRating }</Text>
+                                        </Flex>
+                                    </Column>
+                                    <Column>
+                                        <Flex column alignItems="center" gap={ 1 } className="p-1 rounded bg-muted">
+                                            <i onClick={ () => processAction('set_home_room') } className={ classNames('flex-shrink-0 icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } />
+                                            { hasPermission('settings') &&
+                                            <i className="cursor-pointer icon icon-cog" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
+                                            <i title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer icon icon-navigator-link" onClick={ event => CreateLinkEvent('navigator/toggle-room-link') } />
+                                            { hasPermission('guest') && <FaSignOutAlt title={ LocalizeText('navigator.roominfo.removerights.tooltip') } className="cursor-pointer fa-icon" onClick={ event => processAction('remove_rights') } /> }
                                         </Flex>
-                                        { (navigatorData.enteredGuestRoom.tags.length > 0) &&
-                                            <Flex className="mt-1" alignItems="center" gap={ 1 }>
-                                                { navigatorData.enteredGuestRoom.tags.map(tag =>
-                                                {
-                                                    return <Text key={ tag } pointer className="text-tag rounded p-1" onClick={ event => processAction('navigator_search_tag', tag) }>#{ tag }</Text>
-                                                }) }
-                                            </Flex>
-                                        }
                                     </Column>
                                 </Flex>
-                                <Text small overflow="auto" style={ { wordBreak: 'break-all' } }>{ navigatorData.enteredGuestRoom.description }</Text>
-                                <Flex justifyContent="center">
-                                    <LayoutRoomThumbnailView title={ LocalizeText('tooltip.navigator.room.info.add.thumbnail') } roomId={ navigatorData.enteredGuestRoom.roomId } customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef }>
-                                        { hasPermission('settings') && <i className="icon icon-camera-small position-absolute cursor-pointer bottom-1 end-1" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
-                                    </LayoutRoomThumbnailView>
-                                </Flex>
+                                <Text overflow="y-scroll" textBreak style={ { maxWidth: '100%', maxHeight: '80px', whiteSpace: 'pre-line' } }>{ navigatorData.enteredGuestRoom.description }</Text>
                                 { (navigatorData.enteredGuestRoom.habboGroupId > 0) &&
-                                    <Flex pointer alignItems="center" gap={ 2 } onClick={ () => processAction('open_group_info') }>
+                                    <Flex pointer alignItems="center" gap={ 1 } onClick={ () => processAction('open_group_info') }>
                                         <LayoutBadgeImageView className="flex-none" badgeCode={ navigatorData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
-                                        <Text small underline>
+                                        <Text underline>
                                             { LocalizeText('navigator.guildbase', [ 'groupName' ], [ navigatorData.enteredGuestRoom.groupName ]) }
                                         </Text>
-                                    </Flex>
-                                }
-                                <Flex gap={ 1 } className="w-100 room-tool-item" onClick={ () => setIsOpenLink(prevValue => !prevValue) }>
-                                    <Base pointer title={ LocalizeText('room.like.button.text') } className="icon-width icon icon-link-room float-start" />
-                                    <Text underline small >{ LocalizeText('navigator.embed.caption') }</Text>
-                                </Flex>
-                                { (isOpenLink) &&
-                                    <Column className="w-100">
-                                        <Text className="text-embed">{ LocalizeText('navigator.embed.info') }</Text>
-                                        <input type="text" readOnly className="form-control form-control-sm" value={ LocalizeText('navigator.embed.src', [ 'roomId' ], [ navigatorData.enteredGuestRoom.roomId.toString() ]).replace('${url.prefix}', GetConfiguration<string>('url.prefix', '')) } />
-                                    </Column>
-                                }
+                                    </Flex> }
                             </Column>
                         </Flex>
                         <Column gap={ 1 }>
                             { hasPermission('staff_pick') &&
-                                <Button onClick={ () => processAction('toggle_pick') }>
-                                    { LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }
-                                </Button>
-                            }
-                            { hasPermission('settings') &&
-                                <>
-                                    <Button onClick={ () => processAction('open_room_settings') }>
-                                        { LocalizeText('navigator.room.popup.info.room.settings') }
-                                    </Button>
-                                    <Button onClick={ () => processAction('room_filter') }>
-                                        { LocalizeText('navigator.roomsettings.roomfilter') }
-                                    </Button>
-                                    <Button onClick={ () => processAction('open_floorplan_editor') }>
-                                        { LocalizeText('open.floor.plan.editor') }
-                                    </Button>
-                                </>
-                            }
-                            
+                            <Button onClick={ () => processAction('toggle_pick') }>
+                                { LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }
+                            </Button> }
                             { hasPermission('settings') &&
+                            <>
                                 <Button onClick={ () => processAction('toggle_mute') }>
                                     { LocalizeText(isRoomMuted ? 'navigator.muteall_on' : 'navigator.muteall_off') }
                                 </Button>
-                            }
-							<Flex justifyContent="center" alignItems="center">
-                                <Button className="col-8 mt-2 mb-2 btn-danger" onClick={ () => processAction('report_room') }>
-                                    <Base className="flex-shrink-0 icon icon-report-room" />
-                                    <Base className="vr" />
-                                    <b className="px-2">{ LocalizeText('help.emergency.main.report.room') }</b>
+                                <Button onClick={ () => processAction('room_filter') }>
+                                    { LocalizeText('navigator.roomsettings.roomfilter') }
                                 </Button>
-                            </Flex>
+                            </> }
+                            { hasPermission('floor') && <Button onClick={ () => processAction('open_floorplan_editor') }>
+                                { LocalizeText('open.floor.plan.editor') }
+                            </Button> }
+                            <Button variant="danger" onClick={ () => processAction('report_room') }>
+                                { LocalizeText('help.emergency.main.report.room') }
+                            </Button>
                         </Column>
-                    </>
-                }
+                    </> }
 
             </NitroCardContentView>
         </NitroCardView>