2021-08-06 05:38:57 +02:00
|
|
|
import { InitCameraMessageEvent, IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, RequestCameraConfigurationComposer, RoomCameraWidgetManagerEvent } from '@nitrots/nitro-renderer';
|
2021-08-05 08:26:43 +02:00
|
|
|
import { FC, useCallback, useEffect, useState } from 'react';
|
2021-06-15 22:52:23 +02:00
|
|
|
import { GetRoomCameraWidgetManager } from '../../../../api';
|
2021-06-13 07:13:55 +02:00
|
|
|
import { RoomWidgetCameraEvent } from '../../../../events/room-widgets/camera/RoomWidgetCameraEvent';
|
2021-06-15 22:52:23 +02:00
|
|
|
import { useCameraEvent } from '../../../../hooks/events/nitro/camera/camera-event';
|
2021-06-13 07:13:55 +02:00
|
|
|
import { useUiEvent } from '../../../../hooks/events/ui/ui-event';
|
2021-06-20 16:04:31 +02:00
|
|
|
import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages/message-event';
|
2021-08-05 08:26:43 +02:00
|
|
|
import { CameraPicture } from './common/CameraPicture';
|
2021-06-20 09:39:47 +02:00
|
|
|
import { CameraWidgetContextProvider } from './context/CameraWidgetContext';
|
2021-06-15 19:40:02 +02:00
|
|
|
import { CameraWidgetCaptureView } from './views/capture/CameraWidgetCaptureView';
|
2021-06-20 16:04:31 +02:00
|
|
|
import { CameraWidgetCheckoutView } from './views/checkout/CameraWidgetCheckoutView';
|
2021-06-15 19:40:02 +02:00
|
|
|
import { CameraWidgetEditorView } from './views/editor/CameraWidgetEditorView';
|
2021-06-13 07:13:55 +02:00
|
|
|
|
2021-08-05 08:26:43 +02:00
|
|
|
const MODE_NONE: number = 0;
|
|
|
|
const MODE_CAPTURE: number = 1;
|
|
|
|
const MODE_EDITOR: number = 2;
|
|
|
|
const MODE_CHECKOUT: number = 3;
|
|
|
|
|
2021-07-12 09:59:40 +02:00
|
|
|
export const CameraWidgetView: FC<{}> = props =>
|
2021-06-13 07:13:55 +02:00
|
|
|
{
|
2021-08-05 08:26:43 +02:00
|
|
|
const [ mode, setMode ] = useState<number>(MODE_NONE);
|
|
|
|
const [ availableEffects, setAvailableEffects ] = useState<IRoomCameraWidgetEffect[]>([]);
|
|
|
|
const [ cameraRoll, setCameraRoll ] = useState<CameraPicture[]>([]);
|
2021-06-20 09:39:47 +02:00
|
|
|
const [ selectedPictureIndex, setSelectedPictureIndex ] = useState(-1);
|
2021-08-05 08:26:43 +02:00
|
|
|
const [ selectedEffects, setSelectedEffects ] = useState<IRoomCameraWidgetSelectedEffect[]>([]);
|
|
|
|
const [ isZoomed, setIsZoomed ] = useState(false);
|
|
|
|
const [ myLevel, setMyLevel ] = useState(10);
|
|
|
|
const [ price, setPrice ] = useState<{ credits: number, duckets: number, publishDucketPrice: number }>(null);
|
2021-06-15 19:40:02 +02:00
|
|
|
|
|
|
|
const onNitroEvent = useCallback((event: RoomWidgetCameraEvent) =>
|
2021-06-13 07:13:55 +02:00
|
|
|
{
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case RoomWidgetCameraEvent.SHOW_CAMERA:
|
2021-08-05 08:26:43 +02:00
|
|
|
setMode(MODE_CAPTURE);
|
2021-06-13 07:13:55 +02:00
|
|
|
return;
|
|
|
|
case RoomWidgetCameraEvent.HIDE_CAMERA:
|
2021-08-05 08:26:43 +02:00
|
|
|
setMode(MODE_NONE);
|
2021-06-13 07:13:55 +02:00
|
|
|
return;
|
|
|
|
case RoomWidgetCameraEvent.TOGGLE_CAMERA:
|
2021-08-05 08:26:43 +02:00
|
|
|
setMode(prevValue =>
|
|
|
|
{
|
|
|
|
if(!prevValue) return MODE_CAPTURE;
|
|
|
|
else return MODE_NONE;
|
|
|
|
});
|
2021-06-13 07:13:55 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2021-06-15 19:40:02 +02:00
|
|
|
useUiEvent(RoomWidgetCameraEvent.SHOW_CAMERA, onNitroEvent);
|
|
|
|
useUiEvent(RoomWidgetCameraEvent.HIDE_CAMERA, onNitroEvent);
|
|
|
|
useUiEvent(RoomWidgetCameraEvent.TOGGLE_CAMERA, onNitroEvent);
|
2021-06-15 22:52:23 +02:00
|
|
|
|
2021-08-05 08:26:43 +02:00
|
|
|
const onRoomCameraWidgetManagerEvent = useCallback((event: RoomCameraWidgetManagerEvent) =>
|
2021-06-20 16:04:31 +02:00
|
|
|
{
|
2021-08-05 08:26:43 +02:00
|
|
|
setAvailableEffects(Array.from(GetRoomCameraWidgetManager().effects.values()))
|
2021-06-30 18:05:10 +02:00
|
|
|
}, []);
|
2021-06-20 16:04:31 +02:00
|
|
|
|
2021-08-05 08:26:43 +02:00
|
|
|
useCameraEvent(RoomCameraWidgetManagerEvent.INITIALIZED, onRoomCameraWidgetManagerEvent);
|
2021-06-15 22:52:23 +02:00
|
|
|
|
2021-08-05 08:26:43 +02:00
|
|
|
const onCameraConfigurationEvent = useCallback((event: InitCameraMessageEvent) =>
|
2021-06-15 22:52:23 +02:00
|
|
|
{
|
2021-08-05 08:26:43 +02:00
|
|
|
const parser = event.getParser();
|
|
|
|
|
|
|
|
setPrice({ credits: parser.creditPrice, duckets: parser.ducketPrice, publishDucketPrice: parser.publishDucketPrice });
|
2021-06-15 22:52:23 +02:00
|
|
|
}, []);
|
|
|
|
|
2021-08-05 08:26:43 +02:00
|
|
|
CreateMessageHook(InitCameraMessageEvent, onCameraConfigurationEvent);
|
2021-06-15 22:52:23 +02:00
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
if(!GetRoomCameraWidgetManager().isLoaded)
|
|
|
|
{
|
|
|
|
GetRoomCameraWidgetManager().init();
|
|
|
|
|
2021-08-05 08:26:43 +02:00
|
|
|
SendMessageHook(new RequestCameraConfigurationComposer());
|
|
|
|
|
2021-06-15 22:52:23 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, []);
|
2021-06-13 07:13:55 +02:00
|
|
|
|
2021-08-05 08:26:43 +02:00
|
|
|
const processAction = useCallback((type: string) =>
|
2021-06-13 07:13:55 +02:00
|
|
|
{
|
|
|
|
switch(type)
|
|
|
|
{
|
|
|
|
case 'close':
|
2021-08-05 08:26:43 +02:00
|
|
|
setMode(MODE_NONE);
|
2021-06-15 19:40:02 +02:00
|
|
|
return;
|
2021-08-05 08:26:43 +02:00
|
|
|
case 'edit':
|
|
|
|
setMode(MODE_EDITOR);
|
|
|
|
return;
|
|
|
|
case 'delete':
|
|
|
|
setCameraRoll(prevValue =>
|
|
|
|
{
|
|
|
|
const clone = [ ...prevValue ];
|
|
|
|
|
|
|
|
clone.splice(selectedPictureIndex, 1);
|
|
|
|
|
|
|
|
return clone;
|
|
|
|
});
|
2021-06-13 07:13:55 +02:00
|
|
|
return;
|
2021-06-20 09:39:47 +02:00
|
|
|
case 'editor_cancel':
|
2021-08-05 08:26:43 +02:00
|
|
|
setMode(MODE_CAPTURE);
|
2021-06-20 16:04:31 +02:00
|
|
|
return;
|
2021-08-05 08:26:43 +02:00
|
|
|
case 'checkout':
|
|
|
|
setMode(MODE_CHECKOUT);
|
2021-06-20 09:39:47 +02:00
|
|
|
return;
|
2021-06-13 07:13:55 +02:00
|
|
|
}
|
2021-08-05 08:26:43 +02:00
|
|
|
}, [ selectedPictureIndex ]);
|
2021-06-14 09:49:30 +02:00
|
|
|
|
2021-06-13 07:13:55 +02:00
|
|
|
return (
|
2021-06-20 16:04:31 +02:00
|
|
|
<CameraWidgetContextProvider value={ { cameraRoll, setCameraRoll, selectedPictureIndex, setSelectedPictureIndex, selectedEffects, setSelectedEffects, isZoomed, setIsZoomed } }>
|
2021-08-05 08:26:43 +02:00
|
|
|
{ (mode === MODE_CAPTURE) && <CameraWidgetCaptureView onClose={ () => processAction('close') } onEdit={ () => processAction('edit') } onDelete={ () => processAction('delete') } /> }
|
|
|
|
{ (mode === MODE_EDITOR) && <CameraWidgetEditorView myLevel={ myLevel } onClose={ () => processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ () => processAction('checkout') } availableEffects={ availableEffects } /> }
|
|
|
|
{ (mode === MODE_CHECKOUT) && <CameraWidgetCheckoutView onCloseClick={ () => processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }></CameraWidgetCheckoutView> }
|
2021-06-20 09:39:47 +02:00
|
|
|
</CameraWidgetContextProvider>
|
2021-06-13 07:13:55 +02:00
|
|
|
);
|
|
|
|
}
|