mirror of
https://github.com/duckietm/Nitro-Cool-UI.git
synced 2025-06-21 22:36:58 +00:00
Update: Room Settings
This commit is contained in:
duckietm
parent
fc4924a368
commit
936595d4b2
@ -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>
|
||||
{ (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>
|
||||
}) }
|
||||
</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>
|
||||
}
|
||||
</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>
|
||||
}
|
||||
</Button> }
|
||||
{ hasPermission('settings') &&
|
||||
<>
|
||||
<Button onClick={ () => processAction('open_room_settings') }>
|
||||
{ LocalizeText('navigator.room.popup.info.room.settings') }
|
||||
<Button onClick={ () => processAction('toggle_mute') }>
|
||||
{ LocalizeText(isRoomMuted ? 'navigator.muteall_on' : 'navigator.muteall_off') }
|
||||
</Button>
|
||||
<Button onClick={ () => processAction('room_filter') }>
|
||||
{ LocalizeText('navigator.roomsettings.roomfilter') }
|
||||
</Button>
|
||||
<Button onClick={ () => processAction('open_floorplan_editor') }>
|
||||
</> }
|
||||
{ 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>
|
||||
</>
|
||||
}
|
||||
|
||||
{ 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>
|
||||
</Flex>
|
||||
</Column>
|
||||
</>
|
||||
}
|
||||
</> }
|
||||
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user