nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Take pictures

Browse Source
This commit is contained in:
Bill 2021-06-14 03:49:30 -04:00
parent 88a8c2f015
commit 8efaf59889
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/room/widgets/camera/CameraWidgetView.scss
View File

@ -4,6 +4,11 @@
background-image: url('../../../../assets/images/room-widgets/camera-widget/camera-spritesheet.png');
.camera-frame {
width: 300px;
height: 300px;
}
.camera-button {
width: 94px;
height: 94px;

21
src/views/room/widgets/camera/CameraWidgetView.tsx
View File

@ -1,4 +1,6 @@
import { FC, useCallback, useState } from 'react';
import { NitroRectangle } from 'nitro-renderer';
import { FC, useCallback, useRef, useState } from 'react';
import { GetRoomEngine, GetRoomSession } from '../../../../api';
import { RoomWidgetCameraEvent } from '../../../../events/room-widgets/camera/RoomWidgetCameraEvent';
import { DraggableWindow } from '../../../../hooks/draggable-window/DraggableWindow';
import { useUiEvent } from '../../../../hooks/events/ui/ui-event';
@ -7,6 +9,7 @@ import { CameraWidgetViewProps } from './CameraWidgetView.types';
export const CameraWidgetView: FC<CameraWidgetViewProps> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const cameraFrameRef = useRef<HTMLDivElement>();
const onRoomWidgetCameraEvent = useCallback((event: RoomWidgetCameraEvent) =>
{
@ -37,6 +40,19 @@ export const CameraWidgetView: FC<CameraWidgetViewProps> = props =>
return;
}
}, []);
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));
console.log(rectangle);
GetRoomEngine().createRoomScreenshot(GetRoomSession().roomId, 1, rectangle);
}, []);
if(!isVisible) return null;
@ -49,7 +65,8 @@ export const CameraWidgetView: FC<CameraWidgetViewProps> = props =>
</div>
</div>
<div className="d-flex justify-content-center">
<div className="camera-button"></div>
<div ref={ cameraFrameRef } className="camera-frame"></div>
<div className="camera-button" onClick={ takePicture }></div>
</div>
</div>
</DraggableWindow>