Update room thumbnail widget

src/views/room/widgets/RoomWidgets.scss

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

src/views/room/widgets/room-thumbnail/RoomThumbnailView.scss

@@ -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';

src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx

@@ -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 { NitroLayoutMiniCameraView } from '../../../../layout';
-import { LocalizeText } from '../../../../utils/LocalizeText';
+import { useRoomContext } from '../../context/RoomContext';
-import { RoomThumbnailWidgetBuilderView } from './views/builder/RoomThumbnailWidgetBuilderView';
-import { RoomThumbnailWidgetCameraView } from './views/camera/RoomThumbnailWidgetCameraView';
 
 export const RoomThumbnailWidgetView: FC<{}> = props =>
 {
-    const [ isSelectorVisible, setIsSelectorVisible ] = useState(false);
+    const [ isVisible, setIsVisible ] = useState(false);
-    const [ isBuilderVisible, setIsBuilderVisible ] = useState(false);
+    const { roomSession = null } = useRoomContext();
-    const [ isCameraVisible, setIsCameraVisible ] = useState(false);
 
     const onNitroEvent = useCallback((event: RoomWidgetThumbnailEvent) =>
     {
         switch(event.type)
         {
             case RoomWidgetThumbnailEvent.SHOW_THUMBNAIL:
-                setIsSelectorVisible(true);
+                setIsVisible(true);
                 return;
             case RoomWidgetThumbnailEvent.HIDE_THUMBNAIL:
-                setIsSelectorVisible(false);
+                setIsVisible(false);
-                setIsBuilderVisible(false);
-                setIsCameraVisible(false);
                 return;   
             case RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL:
-                setIsSelectorVisible(value => !value);
+                setIsVisible(value => !value);
-                setIsBuilderVisible(false);
-                setIsCameraVisible(false);
                 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)
+        GetRoomEngine().saveTextureAsScreenshot(texture, true);
-        {
-            case 'camera':
-                setIsSelectorVisible(false);
-                setIsCameraVisible(true);
-                return;
-            case 'builder':
-                setIsSelectorVisible(false);
-                setIsBuilderVisible(true);
-                return;
-        }
-    }, [ setIsSelectorVisible, setIsCameraVisible, setIsBuilderVisible ]);
 
-    return (<>
+        setIsVisible(false);
-        { 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">
+    if(!isVisible) return null;
-                <div className="option me-5" onClick={ () => handleAction('camera') }>
+
-                    <i className="fas fa-camera" />
+    return <NitroLayoutMiniCameraView roomId={ roomSession.roomId } textureReceiver={ receiveTexture } onClose={ () => setIsVisible(false) } />
-                </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) } /> }
-    </>);
 };

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

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

src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.scss

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

src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.tsx

@@ -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>
-    );
-};

src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.scss

@@ -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;
-    }
-}

src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.tsx

@@ -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>
-    );
-};

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

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