Add generic mini camera component

src/layout/index.ts

@@ -1,5 +1,6 @@
 export * from './card';
 export * from './draggable-window';
 export * from './loading-spinner';
+export * from './mini-camera';
 export * from './transitions';
 export * from './trophy';

src/layout/mini-camera/NitroLayoutMiniCameraView.tsx

@@ -0,0 +1,38 @@
+import { NitroRectangle } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useRef } from 'react';
+import { GetRoomEngine } from '../../api';
+import { LocalizeText } from '../../utils';
+import { DraggableWindow } from '../draggable-window';
+import { NitroLayoutMiniCameraViewProps } from './NitroLayoutMiniCameraView.types';
+
+export const NitroLayoutMiniCameraView: FC<NitroLayoutMiniCameraViewProps> = props =>
+{
+    const { roomId = -1, textureReceiver = null, onClose = null } = props;
+    const elementRef = useRef<HTMLDivElement>();
+
+    const getCameraBounds = useCallback(() =>
+    {
+        if(!elementRef || !elementRef.current) return null;
+
+        const frameBounds = elementRef.current.getBoundingClientRect();
+        
+        return new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height));
+    }, []);
+
+    const takePicture = useCallback(() =>
+    {
+        textureReceiver(GetRoomEngine().createTextureFromRoom(roomId, 1, getCameraBounds()));
+    }, [ roomId, getCameraBounds, textureReceiver ]);
+    
+    return (
+        <DraggableWindow handle=".nitro-room-thumbnail-camera">
+            <div className="nitro-room-thumbnail-camera px-2">
+                <div ref={ elementRef } className={ 'camera-frame' } />
+                <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={ onClose }>{ 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/layout/mini-camera/NitroLayoutMiniCameraView.types.ts

@@ -0,0 +1,8 @@
+import { NitroRenderTexture } from '@nitrots/nitro-renderer';
+
+export interface NitroLayoutMiniCameraViewProps
+{
+    roomId: number;
+    textureReceiver: (texture: NitroRenderTexture) => void;
+    onClose: () => void;
+}

src/layout/mini-camera/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutMiniCameraView';
+export * from './NitroLayoutMiniCameraView.types';