nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-18 18:02:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update room thumbnail widget

Browse Source
This commit is contained in:
Bill 2021-08-08 22:54:49 -04:00
parent cbe7558b4b
commit 1b646c7344
9 changed files with 17 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/room/widgets/RoomWidgets.scss
View File

@ -7,4 +7,3 @@
@import './infostand/InfoStandWidgetView';
@import './object-location/ObjectLocationView';
@import './room-tools/RoomToolsWidgetView';
@import './room-thumbnail/RoomThumbnailView';

14
src/views/room/widgets/room-thumbnail/RoomThumbnailView.scss
View File

@ -1,14 +0,0 @@
.nitro-room-thumbnail {
width: 300px;
.option {
font-size: 30px;
height: 50px;
display: flex;
align-items: center;
cursor: pointer;
}
}
@import './views/builder/RoomThumbnailWidgetBuilderView';
@import './views/camera/RoomThumbnailWidgetCameraView';

59
src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx
View File

@ -1,33 +1,28 @@
import { NitroRenderTexture } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetRoomEngine } from '../../../../api';
import { RoomWidgetThumbnailEvent } from '../../../../events/room-widgets/thumbnail';
import { useUiEvent } from '../../../../hooks/events';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { RoomThumbnailWidgetBuilderView } from './views/builder/RoomThumbnailWidgetBuilderView';
import { RoomThumbnailWidgetCameraView } from './views/camera/RoomThumbnailWidgetCameraView';
import { NitroLayoutMiniCameraView } from '../../../../layout';
import { useRoomContext } from '../../context/RoomContext';
export const RoomThumbnailWidgetView: FC<{}> = props =>
{
const [ isSelectorVisible, setIsSelectorVisible ] = useState(false);
const [ isBuilderVisible, setIsBuilderVisible ] = useState(false);
const [ isCameraVisible, setIsCameraVisible ] = useState(false);
const [ isVisible, setIsVisible ] = useState(false);
const { roomSession = null } = useRoomContext();
const onNitroEvent = useCallback((event: RoomWidgetThumbnailEvent) =>
{
switch(event.type)
{
case RoomWidgetThumbnailEvent.SHOW_THUMBNAIL:
setIsSelectorVisible(true);
setIsVisible(true);
return;
case RoomWidgetThumbnailEvent.HIDE_THUMBNAIL:
setIsSelectorVisible(false);
setIsBuilderVisible(false);
setIsCameraVisible(false);
setIsVisible(false);
return;
case RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL:
setIsSelectorVisible(value => !value);
setIsBuilderVisible(false);
setIsCameraVisible(false);
setIsVisible(value => !value);
return;
}
}, []);
@ -36,34 +31,14 @@ export const RoomThumbnailWidgetView: FC<{}> = props =>
useUiEvent(RoomWidgetThumbnailEvent.HIDE_THUMBNAIL, onNitroEvent);
useUiEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL, onNitroEvent);
const handleAction = useCallback((action: string) =>
const receiveTexture = useCallback((texture: NitroRenderTexture) =>
{
switch(action)
{
case 'camera':
setIsSelectorVisible(false);
setIsCameraVisible(true);
return;
case 'builder':
setIsSelectorVisible(false);
setIsBuilderVisible(true);
return;
}
}, [ setIsSelectorVisible, setIsCameraVisible, setIsBuilderVisible ]);
GetRoomEngine().saveTextureAsScreenshot(texture, true);
return (<>
{ isSelectorVisible && <NitroCardView className="nitro-room-thumbnail">
<NitroCardHeaderView headerText={ LocalizeText('navigator.thumbeditor.caption') } onCloseClick={ () => setIsSelectorVisible(false) } />
<NitroCardContentView className="d-flex align-items-center justify-content-center text-muted">
<div className="option me-5" onClick={ () => handleAction('camera') }>
<i className="fas fa-camera" />
</div>
<div className="option" onClick={ () => handleAction('builder') }>
<i className="fas fa-pencil-ruler" />
</div>
</NitroCardContentView>
</NitroCardView> }
{ isBuilderVisible && <RoomThumbnailWidgetBuilderView onCloseClick={ () => setIsBuilderVisible(false) } /> }
{ isCameraVisible && <RoomThumbnailWidgetCameraView onCloseClick={ () => setIsCameraVisible(false) } /> }
</>);
setIsVisible(false);
}, []);
if(!isVisible) return null;
return <NitroLayoutMiniCameraView roomId={ roomSession.roomId } textureReceiver={ receiveTexture } onClose={ () => setIsVisible(false) } />
};

4
src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.props.ts
View File

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

3
src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.scss
View File

@ -1,3 +0,0 @@
.nitro-room-thumbnail-builder {
width: 600px;
}

63
src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.tsx
View File

@ -1,63 +0,0 @@
import { FC, useCallback, useState } from 'react';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../../layout';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { RoomThumbnailWidgetBuilderViewProps } from './RoomThumbnailWidgetBuilderView.props';
const TABS: string[] = [
'navigator.thumbeditor.bgtab',
'navigator.thumbeditor.objtab',
'navigator.thumbeditor.toptab',
];
export const RoomThumbnailWidgetBuilderView: FC<RoomThumbnailWidgetBuilderViewProps> = props =>
{
const { onCloseClick = null } = props;
const [ currentTab, setCurrentTab ] = useState(TABS[0]);
const processAction = useCallback((action: string, value?: string) =>
{
switch(action)
{
case 'change_tab':
setCurrentTab(value);
return;
}
}, [ setCurrentTab ]);
return (
<NitroCardView className="nitro-room-thumbnail-builder">
<NitroCardHeaderView headerText={ LocalizeText('navigator.thumbeditor.caption') } onCloseClick={ onCloseClick } />
<div className="d-flex">
<div className="w-100">
<NitroCardTabsView>
{ TABS.map(tab =>
{
return <NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ event => processAction('change_tab', tab) }>
{ LocalizeText(tab) }
</NitroCardTabsItemView>
}) }
</NitroCardTabsView>
<NitroCardContentView>
<div className="d-flex h-100 overflow-auto effects px-2">
<div className="row row-cols-3">
</div>
</div>
</NitroCardContentView>
</div>
<div>
<NitroCardTabsView></NitroCardTabsView>
<NitroCardContentView>
<div className="d-flex justify-content-between mt-2">
<div className="d-flex justify-content-end">
<button className="btn btn-primary me-2" onClick={ event => processAction('cancel') }>{ LocalizeText('generic.cancel') }</button>
<button className="btn btn-success" onClick={ event => processAction('checkout') }>{ LocalizeText('camera.preview.button.text') }</button>
</div>
</div>
</NitroCardContentView>
</div>
</div>
</NitroCardView>
);
};

13
src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.scss
View File

@ -1,13 +0,0 @@
.nitro-room-thumbnail-camera {
width: 132px;
height: 192px;
background-image: url('../../../../../../assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
.camera-frame {
position: absolute;
width: 110px;
height: 110px;
margin-top: 38px;
margin-left: 3px;
}
}

38
src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.tsx
View File

@ -1,38 +0,0 @@
import { NitroRectangle } from '@nitrots/nitro-renderer';
import { FC, useCallback, useRef } from 'react';
import { GetRoomEngine, GetRoomSession } from '../../../../../../api';
import { DraggableWindow } from '../../../../../../layout';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { RoomThumbnailWidgetCameraViewProps } from './RoomThumbnailWidgetCameraView.types';
export const RoomThumbnailWidgetCameraView: FC<RoomThumbnailWidgetCameraViewProps> = props =>
{
const { onCloseClick = null } = props;
const cameraFrameRef = useRef<HTMLDivElement>();
const takePicture = useCallback(() =>
{
const frameBounds = cameraFrameRef.current.getBoundingClientRect();
if(!frameBounds) return;
const rectangle = new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height));
const image = GetRoomEngine().createTextureFromRoom(GetRoomSession().roomId, 1, rectangle);
onCloseClick();
}, [ onCloseClick ]);
return (
<DraggableWindow handle=".nitro-room-thumbnail-camera">
<div className="nitro-room-thumbnail-camera px-2">
<div ref={ cameraFrameRef } className={ 'camera-frame' }></div>
<div className="d-flex align-items-end h-100 pb-2">
<button className="btn btn-sm btn-danger w-100 mb-1 me-2" onClick={ onCloseClick }>{ LocalizeText('cancel') }</button>
<button className="btn btn-sm btn-success w-100 mb-1" onClick={ () => takePicture() }>{ LocalizeText('navigator.thumbeditor.save') }</button>
</div>
</div>
</DraggableWindow>
);
};

4
src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.types.ts
View File

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