duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update: Room Settings

Browse Source
This commit is contained in:
duckietm 2024-05-03 11:35:06 +02:00
parent fc4924a368
commit 936595d4b2
1 changed files with 65 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/navigator/views/NavigatorRoomInfoView.tsx
View File

@ -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 { FC, useEffect, useState } from 'react';
import { CreateLinkEvent, DispatchUiEvent, GetConfiguration, GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer } from '../../../api'; import { FaLink, FaSignOutAlt } from 'react-icons/fa';
import { Base, Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView, classNames } from '../../../common'; 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 { RoomWidgetThumbnailEvent } from '../../../events';
import { useHelp, useNavigator } from '../../../hooks'; import { useHelp, useNavigator, useRoom } from '../../../hooks';
export class NavigatorRoomInfoViewProps export class NavigatorRoomInfoViewProps
{ {
@ -16,9 +16,9 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
const { onCloseClick = null } = props; const { onCloseClick = null } = props;
const [ isRoomPicked, setIsRoomPicked ] = useState(false); const [ isRoomPicked, setIsRoomPicked ] = useState(false);
const [ isRoomMuted, setIsRoomMuted ] = useState(false); const [ isRoomMuted, setIsRoomMuted ] = useState(false);
const [ isOpenLink, setIsOpenLink ] = useState<boolean>(false);
const { report = null } = useHelp(); const { report = null } = useHelp();
const { navigatorData = null } = useNavigator(); const { navigatorData = null } = useNavigator();
const { roomSession = null } = useRoom();
const hasPermission = (permission: string) => const hasPermission = (permission: string) =>
{ {
@ -28,6 +28,10 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
return (GetSessionDataManager().userId === navigatorData.enteredGuestRoom.ownerId || GetSessionDataManager().isModerator); return (GetSessionDataManager().userId === navigatorData.enteredGuestRoom.ownerId || GetSessionDataManager().isModerator);
case 'staff_pick': case 'staff_pick':
return GetSessionDataManager().securityLevel >= SecurityLevel.COMMUNITY; return GetSessionDataManager().securityLevel >= SecurityLevel.COMMUNITY;
case 'floor':
return roomSession?.controllerLevel >= RoomControllerLevel.GUEST;
case 'guest':
return roomSession?.controllerLevel === RoomControllerLevel.GUEST;
default: return false; default: return false;
} }
} }
@ -39,14 +43,14 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
switch(action) switch(action)
{ {
case 'set_home_room': case 'set_home_room':
let newRoomId = -1; let newRoomId = 0;
if(navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) if(navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId)
{ {
newRoomId = navigatorData.enteredGuestRoom.roomId; newRoomId = navigatorData.enteredGuestRoom.roomId;
} }
if(newRoomId > 0) SendMessageComposer(new UpdateHomeRoomMessageComposer(newRoomId)); SendMessageComposer(new UpdateHomeRoomMessageComposer(newRoomId));
return; return;
case 'navigator_search_tag': case 'navigator_search_tag':
CreateLinkEvent(`navigator/search/${ value }`); CreateLinkEvent(`navigator/search/${ value }`);
@ -54,14 +58,15 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
return; return;
case 'open_room_thumbnail_camera': case 'open_room_thumbnail_camera':
DispatchUiEvent(new RoomWidgetThumbnailEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL)); DispatchUiEvent(new RoomWidgetThumbnailEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL));
onCloseClick();
return; return;
case 'open_group_info': case 'open_group_info':
GetGroupInformation(navigatorData.enteredGuestRoom.habboGroupId); GetGroupInformation(navigatorData.enteredGuestRoom.habboGroupId);
return; return;
case 'toggle_room_link':
CreateLinkEvent('navigator/toggle-room-link');
return;
case 'open_room_settings': case 'open_room_settings':
SendMessageComposer(new RoomSettingsComposer(navigatorData.enteredGuestRoom.roomId)); SendMessageComposer(new RoomSettingsComposer(navigatorData.enteredGuestRoom.roomId));
onCloseClick();
return; return;
case 'toggle_pick': case 'toggle_pick':
setIsRoomPicked(value => !value); setIsRoomPicked(value => !value);
@ -73,21 +78,15 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
return; return;
case 'room_filter': case 'room_filter':
SendMessageComposer(new GetCustomRoomFilterMessageComposer(navigatorData.enteredGuestRoom.roomId)); SendMessageComposer(new GetCustomRoomFilterMessageComposer(navigatorData.enteredGuestRoom.roomId));
onCloseClick();
return; return;
case 'open_floorplan_editor': case 'open_floorplan_editor':
CreateLinkEvent('floor-editor/toggle'); CreateLinkEvent('floor-editor/toggle');
onCloseClick();
return; return;
case 'report_room': case 'report_room':
report(ReportType.ROOM, { roomId: navigatorData.enteredGuestRoom.roomId, roomName: navigatorData.enteredGuestRoom.roomName }); report(ReportType.ROOM, { roomId: navigatorData.enteredGuestRoom.roomId, roomName: navigatorData.enteredGuestRoom.roomName });
onCloseClick();
return; return;
case 'set_favourite_room': case 'remove_rights':
SendMessageComposer(new AddFavouriteRoomMessageComposer(navigatorData.enteredGuestRoom.roomId)); SendMessageComposer(new RemoveOwnRoomRightsRoomMessageComposer(navigatorData.enteredGuestRoom.roomId));
return;
case 'set_unfavourite_room':
SendMessageComposer(new DeleteFavouriteRoomMessageComposer(navigatorData.enteredGuestRoom.roomId));
return; return;
case 'close': case 'close':
onCloseClick(); onCloseClick();
@ -108,111 +107,83 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
if(!navigatorData.enteredGuestRoom) return null; if(!navigatorData.enteredGuestRoom) return null;
return ( 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') } /> <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings.roominfo') } onCloseClick={ () => processAction('close') } />
<NitroCardContentView className="text-black"> <NitroCardContentView className="text-black">
{ navigatorData.enteredGuestRoom && { navigatorData.enteredGuestRoom &&
<> <>
<Flex gap={ 2 } overflow="hidden"> <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"> <Column grow gap={ 1 } overflow="hidden">
<Flex gap={ 1 }> <Flex gap={ 1 }>
<Column grow gap={ 1 }> <Column grow gap={ 1 } overflow="hidden">
<Flex gap={ 1 } justifyContent="between"> <Text bold truncate>{ navigatorData.enteredGuestRoom.roomName }</Text>
<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>
{ navigatorData.enteredGuestRoom.showOwner && { navigatorData.enteredGuestRoom.showOwner &&
<Flex pointer title={ LocalizeText('guide.help.common.profile.tooltip') } alignItems="center" gap={ 1 } onClick={ () => GetUserProfile(navigatorData.enteredGuestRoom.ownerId) }> <Flex alignItems="center" gap={ 1 }>
<Text small variant="muted">{ LocalizeText('navigator.roomownercaption') }</Text> <Text variant="muted">{ LocalizeText('navigator.roomownercaption') }</Text>
<Flex alignItems="center" gap={ 1 }> <Flex alignItems="center" gap={ 1 }>
<UserProfileIconView userId={ navigatorData.enteredGuestRoom.ownerId } /> <UserProfileIconView userId={ navigatorData.enteredGuestRoom.ownerId } />
<Text small>{ navigatorData.enteredGuestRoom.ownerName }</Text> <Text>{ navigatorData.enteredGuestRoom.ownerName }</Text>
</Flex> </Flex>
</Flex> </Flex> }
}
<Flex alignItems="center" gap={ 1 }> <Flex alignItems="center" gap={ 1 }>
<Text small variant="muted">{ LocalizeText('navigator.roomrating') }</Text> <Text variant="muted">{ LocalizeText('navigator.roomrating') }</Text>
<Text small>{ navigatorData.currentRoomRating }</Text> <Text>{ navigatorData.currentRoomRating }</Text>
</Flex> </Flex>
{ (navigatorData.enteredGuestRoom.tags.length > 0) && </Column>
<Flex className="mt-1" alignItems="center" gap={ 1 }> <Column>
{ navigatorData.enteredGuestRoom.tags.map(tag => <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')) } />
return <Text key={ tag } pointer className="text-tag rounded p-1" onClick={ event => processAction('navigator_search_tag', tag) }>#{ tag }</Text> { 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> </Flex>
}
</Column> </Column>
</Flex> </Flex>
<Text small overflow="auto" style={ { wordBreak: 'break-all' } }>{ navigatorData.enteredGuestRoom.description }</Text> <Text overflow="y-scroll" textBreak style={ { maxWidth: '100%', maxHeight: '80px', whiteSpace: 'pre-line' } }>{ 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>
{ (navigatorData.enteredGuestRoom.habboGroupId > 0) && { (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 } /> <LayoutBadgeImageView className="flex-none" badgeCode={ navigatorData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
<Text small underline> <Text underline>
{ LocalizeText('navigator.guildbase', [ 'groupName' ], [ navigatorData.enteredGuestRoom.groupName ]) } { LocalizeText('navigator.guildbase', [ 'groupName' ], [ navigatorData.enteredGuestRoom.groupName ]) }
</Text> </Text>
</Flex> </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>
}
</Column> </Column>
</Flex> </Flex>
<Column gap={ 1 }> <Column gap={ 1 }>
{ hasPermission('staff_pick') && { hasPermission('staff_pick') &&
<Button onClick={ () => processAction('toggle_pick') }> <Button onClick={ () => processAction('toggle_pick') }>
{ LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') } { LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }
</Button> </Button> }
}
{ hasPermission('settings') && { hasPermission('settings') &&
<> <>
<Button onClick={ () => processAction('open_room_settings') }> <Button onClick={ () => processAction('toggle_mute') }>
{ LocalizeText('navigator.room.popup.info.room.settings') } { LocalizeText(isRoomMuted ? 'navigator.muteall_on' : 'navigator.muteall_off') }
</Button> </Button>
<Button onClick={ () => processAction('room_filter') }> <Button onClick={ () => processAction('room_filter') }>
{ LocalizeText('navigator.roomsettings.roomfilter') } { LocalizeText('navigator.roomsettings.roomfilter') }
</Button> </Button>
<Button onClick={ () => processAction('open_floorplan_editor') }> </> }
{ hasPermission('floor') && <Button onClick={ () => processAction('open_floorplan_editor') }>
{ LocalizeText('open.floor.plan.editor') } { LocalizeText('open.floor.plan.editor') }
</Button> }
<Button variant="danger" onClick={ () => processAction('report_room') }>
{ LocalizeText('help.emergency.main.report.room') }
</Button> </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> </Column>
</> </> }
}
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>