From 581ef7c0c673986953faee80ad5fb3036126ac82 Mon Sep 17 00:00:00 2001 From: Bill Date: Tue, 15 Jun 2021 16:52:23 -0400 Subject: [PATCH] Update camera --- public/configuration.json | 26 ++++++++- .../camera/GetRoomCameraWidgetManager.ts | 7 +++ src/api/nitro/camera/index.ts | 1 + src/api/nitro/index.ts | 1 + .../events/nitro/camera/camera-event.tsx | 8 +++ .../room/widgets/camera/CameraWidgetView.tsx | 55 +++++++++++-------- .../views/editor/CameraWidgetEditorView.tsx | 34 ++++++------ .../editor/CameraWidgetEditorView.types.ts | 6 +- 8 files changed, 95 insertions(+), 43 deletions(-) create mode 100644 src/api/nitro/camera/GetRoomCameraWidgetManager.ts create mode 100644 src/api/nitro/camera/index.ts create mode 100644 src/hooks/events/nitro/camera/camera-event.tsx diff --git a/public/configuration.json b/public/configuration.json index 8be03e62..6854994a 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -423,6 +423,7 @@ }, { "name":"shadow_multiply_02", + "colorMatrix": [], "minLevel": 0, "enabled": true }, @@ -440,51 +441,61 @@ }, { "name":"hearts_hardlight_02", + "colorMatrix": [], "minlevel": 1, "enabled": true }, { "name":"texture_overlay", + "colorMatrix": [], "minlevel": 1, "enabled": true }, { "name":"pinky_nrm", + "colorMatrix": [], "minlevel": 1, "enabled": true }, { - "name":"color_2", "colorMatrix": [0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0, 0, 0, 1, 0], + "name":"color_2", + "colorMatrix": [0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0, 0, 0, 1, 0], "minlevel": 2, "enabled": true }, { - "name":"night_vision", "colorMatrix": [0, 0, 0, 0, 0, 0, 1.1, 0, 0, -50, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], + "name":"night_vision", + "colorMatrix": [0, 0, 0, 0, 0, 0, 1.1, 0, 0, -50, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], "minlevel": 2, "enabled": true }, { "name":"stars_hardlight_02", + "colorMatrix": [], "minlevel": 2, "enabled": true }, { "name":"coffee_mpl", + "colorMatrix": [], "minlevel": 2, "enabled": true }, { "name":"security_hardlight", + "colorMatrix": [], "minlevel": 3, "enabled": true }, { "name":"bluemood_mpl", + "colorMatrix": [], "minlevel": 3, "enabled": true }, { "name":"rusty_mpl", + "colorMatrix": [], "minlevel": 3, "enabled": true }, @@ -502,6 +513,7 @@ }, { "name":"alien_hrd", + "colorMatrix": [], "minlevel": 4, "enabled": true }, @@ -519,6 +531,7 @@ }, { "name":"toxic_hrd", + "colorMatrix": [], "minlevel": 5, "enabled": true }, @@ -536,6 +549,7 @@ }, { "name":"misty_hrd", + "colorMatrix": [], "minlevel": 6, "enabled": true }, @@ -553,41 +567,49 @@ }, { "name":"drops_mpl", + "colorMatrix": [], "minlevel": 8, "enabled": true }, { "name":"shiny_hrd", + "colorMatrix": [], "minlevel": 9, "enabled": true }, { "name":"glitter_hrd", + "colorMatrix": [], "minlevel": 10, "enabled": true }, { "name":"frame_gold", + "colorMatrix": [], "minlevel": 10, "enabled": true }, { "name":"frame_gray_4", + "colorMatrix": [], "minlevel": 10, "enabled": true }, { "name":"frame_black_2", + "colorMatrix": [], "minlevel": 10, "enabled": true }, { "name":"frame_wood_2", + "colorMatrix": [], "minlevel": 10, "enabled": true }, { "name":"finger_nrm", + "colorMatrix": [], "minlevel": 10, "enabled": true }, diff --git a/src/api/nitro/camera/GetRoomCameraWidgetManager.ts b/src/api/nitro/camera/GetRoomCameraWidgetManager.ts new file mode 100644 index 00000000..ca3e498f --- /dev/null +++ b/src/api/nitro/camera/GetRoomCameraWidgetManager.ts @@ -0,0 +1,7 @@ +import { Nitro } from 'nitro-renderer'; +import { IRoomCameraWidgetManager } from 'nitro-renderer/src/nitro/camera/IRoomCameraWidgetManager'; + +export function GetRoomCameraWidgetManager(): IRoomCameraWidgetManager +{ + return Nitro.instance.cameraManager; +} diff --git a/src/api/nitro/camera/index.ts b/src/api/nitro/camera/index.ts new file mode 100644 index 00000000..3c2707c1 --- /dev/null +++ b/src/api/nitro/camera/index.ts @@ -0,0 +1 @@ +export * from './GetRoomCameraWidgetManager'; diff --git a/src/api/nitro/index.ts b/src/api/nitro/index.ts index e3920860..c0347237 100644 --- a/src/api/nitro/index.ts +++ b/src/api/nitro/index.ts @@ -1,4 +1,5 @@ export * from './avatar'; +export * from './camera'; export * from './GetConnection'; export * from './room'; export * from './session'; diff --git a/src/hooks/events/nitro/camera/camera-event.tsx b/src/hooks/events/nitro/camera/camera-event.tsx new file mode 100644 index 00000000..499b162f --- /dev/null +++ b/src/hooks/events/nitro/camera/camera-event.tsx @@ -0,0 +1,8 @@ +import { NitroEvent } from 'nitro-renderer'; +import { Nitro } from 'nitro-renderer/src/nitro/Nitro'; +import { CreateEventDispatcherHook } from '../../event-dispatcher.base'; + +export function useCameraEvent(type: string, handler: (event: NitroEvent) => void): void +{ + CreateEventDispatcherHook(type, Nitro.instance.cameraManager.events, handler); +} diff --git a/src/views/room/widgets/camera/CameraWidgetView.tsx b/src/views/room/widgets/camera/CameraWidgetView.tsx index 6e3a3ad3..4068a542 100644 --- a/src/views/room/widgets/camera/CameraWidgetView.tsx +++ b/src/views/room/widgets/camera/CameraWidgetView.tsx @@ -1,9 +1,8 @@ -import { RoomCameraWidgetEditorEffect } from 'nitro-renderer/src/nitro/room/camera-widget/RoomCameraWidgetEditorEffect'; -import { RoomCameraWidgetManagerEvent } from 'nitro-renderer/src/nitro/room/events/RoomCameraWidgetManagerEvent'; -import { FC, useCallback, useState } from 'react'; -import { GetRoomEngine } from '../../../../api'; +import { RoomCameraWidgetManagerEvent } from 'nitro-renderer/src/nitro/camera/events/RoomCameraWidgetManagerEvent'; +import { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { GetRoomCameraWidgetManager } from '../../../../api'; import { RoomWidgetCameraEvent } from '../../../../events/room-widgets/camera/RoomWidgetCameraEvent'; -import { useRoomEngineEvent } from '../../../../hooks/events/nitro/room/room-engine-event'; +import { useCameraEvent } from '../../../../hooks/events/nitro/camera/camera-event'; import { useUiEvent } from '../../../../hooks/events/ui/ui-event'; import { CameraWidgetViewProps } from './CameraWidgetView.types'; import { CameraWidgetCaptureView } from './views/capture/CameraWidgetCaptureView'; @@ -11,18 +10,10 @@ import { CameraWidgetEditorView } from './views/editor/CameraWidgetEditorView'; export const CameraWidgetView: FC = props => { + const [ effectsReady, setEffectsReady ] = useState(false); const [ isCaptureVisible, setIsCaptureVisible ] = useState(false); - const [ isEditorVisible, setIsEditorVisible ] = useState(false); - const [ chosenPicture, setChosenPicture ] = useState(null); - const [ availableEffects, setAvailableEffects ] = useState(null); - - const getAvailableEffects = useCallback(() => - { - if(GetRoomEngine().roomCameraWidgetManager.isLoaded) - { - setAvailableEffects(Array.from(GetRoomEngine().roomCameraWidgetManager.loadedEffects.values())); - } - }, []); + const [ isEditorVisible, setIsEditorVisible ] = useState(false); + const [ chosenPicture, setChosenPicture ] = useState(null); const onNitroEvent = useCallback((event: RoomWidgetCameraEvent) => { @@ -30,7 +21,6 @@ export const CameraWidgetView: FC = props => { case RoomWidgetCameraEvent.SHOW_CAMERA: setIsCaptureVisible(true); - getAvailableEffects(); return; case RoomWidgetCameraEvent.HIDE_CAMERA: setIsCaptureVisible(false); @@ -39,10 +29,6 @@ export const CameraWidgetView: FC = props => case RoomWidgetCameraEvent.TOGGLE_CAMERA: setIsEditorVisible(false); setIsCaptureVisible(value => !value); - getAvailableEffects(); - return; - case RoomCameraWidgetManagerEvent.INITIALIZED: - getAvailableEffects(); return; } }, []); @@ -50,7 +36,32 @@ export const CameraWidgetView: FC = props => useUiEvent(RoomWidgetCameraEvent.SHOW_CAMERA, onNitroEvent); useUiEvent(RoomWidgetCameraEvent.HIDE_CAMERA, onNitroEvent); useUiEvent(RoomWidgetCameraEvent.TOGGLE_CAMERA, onNitroEvent); - useRoomEngineEvent(RoomCameraWidgetManagerEvent.INITIALIZED, onNitroEvent); + + const availableEffects = useMemo(() => + { + if(!effectsReady) return null; + + return Array.from(GetRoomCameraWidgetManager().effects.values()); + }, [ effectsReady ]); + + const onRoomCameraWidgetManagerEvent = useCallback((event: RoomCameraWidgetManagerEvent) => + { + setEffectsReady(true); + }, []); + + useCameraEvent(RoomCameraWidgetManagerEvent.INITIALIZED, onRoomCameraWidgetManagerEvent); + + useEffect(() => + { + if(!GetRoomCameraWidgetManager().isLoaded) + { + GetRoomCameraWidgetManager().init(); + + return; + } + + setEffectsReady(true); + }, []); const processAction = useCallback((type: string, value: any = null) => { diff --git a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx index 0153ced7..f1d41d12 100644 --- a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx +++ b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx @@ -1,7 +1,8 @@ import classNames from 'classnames'; -import { RoomCameraWidgetEditorSelectedEffect } from 'nitro-renderer/src/nitro/room/camera-widget/RoomCameraWidgetEditorSelectedEffect'; +import { IRoomCameraWidgetSelectedEffect } from 'nitro-renderer/src/nitro/camera/IRoomCameraWidgetSelectedEffect'; +import { RoomCameraWidgetSelectedEffect } from 'nitro-renderer/src/nitro/camera/RoomCameraWidgetSelectedEffect'; import { FC, useCallback, useEffect, useState } from 'react'; -import { GetRoomEngine } from '../../../../../../api'; +import { GetRoomCameraWidgetManager } from '../../../../../../api'; import { NitroCardContentView } from '../../../../../../layout/card/content/NitroCardContentView'; import { NitroCardHeaderView } from '../../../../../../layout/card/header/NitroCardHeaderView'; import { NitroCardView } from '../../../../../../layout/card/NitroCardView'; @@ -12,29 +13,30 @@ import { CameraWidgetEditorTabs, CameraWidgetEditorViewProps } from './CameraWid export const CameraWidgetEditorView: FC = props => { + const { picture = null, availableEffects = null, onCloseClick = null } = props; const TABS: string[] = [ CameraWidgetEditorTabs.COLORMATRIX, CameraWidgetEditorTabs.COMPOSITE ]; const MY_LEVEL: number = 0; - const [ currentTab, setCurrentTab ] = useState(CameraWidgetEditorTabs.COLORMATRIX); - const [ isZoomed, setIsZoomed ] = useState(false); - const [ selectedEffects, setSelectedEffects ] = useState([]); + const [ currentTab, setCurrentTab ] = useState(CameraWidgetEditorTabs.COLORMATRIX); + const [ isZoomed, setIsZoomed ] = useState(false); + const [ selectedEffects, setSelectedEffects ] = useState([]); const [ effectsThumbnails, setEffectThumbnails ] = useState<{name: string, image: HTMLImageElement}[]>([]); useEffect(() => { const thumbnails = []; - for(const effect of props.availableEffects) + for(const effect of availableEffects) { let alpha = 126; - if(effect.colorMatrix.length > 0) alpha = 0.5; + if(effect.colorMatrix) alpha = 0.5; - thumbnails.push({name: effect.name, image: GetRoomEngine().roomCameraWidgetManager.editImage(props.picture, [new RoomCameraWidgetEditorSelectedEffect(effect, alpha)])}); + thumbnails.push({name: effect.name, image: GetRoomCameraWidgetManager().applyEffects(picture, [ new RoomCameraWidgetSelectedEffect(effect, alpha) ])}); } setEffectThumbnails(thumbnails); - }, [ props.availableEffects ]); + }, [ picture, availableEffects ]); const getEffectThumbnail = useCallback((effectName: string) => { @@ -49,20 +51,20 @@ export const CameraWidgetEditorView: FC = props => { if(currentTab === CameraWidgetEditorTabs.COLORMATRIX) { - return props.availableEffects.filter(effect => effect.colorMatrix.length > 0); + return availableEffects.filter(effect => effect.colorMatrix); } else { - return props.availableEffects.filter(effect => effect.colorMatrix.length === 0); + return availableEffects.filter(effect => effect.texture); } - }, [ currentTab, props.availableEffects ]); + }, [ currentTab, availableEffects ]); const processAction = useCallback((type: string, value: string | number = null) => { switch(type) { case 'close': - props.onCloseClick(); + onCloseClick(); return; case 'change_tab': setCurrentTab(String(value)); @@ -71,7 +73,7 @@ export const CameraWidgetEditorView: FC = props => setIsZoomed(isZoomed => !isZoomed); return; } - }, []); + }, [ onCloseClick ]); return ( @@ -93,7 +95,7 @@ export const CameraWidgetEditorView: FC = props =>
- +
@@ -107,7 +109,7 @@ export const CameraWidgetEditorView: FC = props =>
-
+
diff --git a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts index 4a3407c6..fae983d8 100644 --- a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts +++ b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts @@ -1,10 +1,10 @@ -import { RoomCameraWidgetEditorEffect } from '../../../../../../../../nitro-renderer/src/nitro/room/camera-widget/RoomCameraWidgetEditorEffect'; +import { IRoomCameraWidgetEffect } from 'nitro-renderer/src/nitro/camera/IRoomCameraWidgetEffect'; export interface CameraWidgetEditorViewProps { - onCloseClick: () => void; picture: HTMLImageElement; - availableEffects: RoomCameraWidgetEditorEffect[]; + availableEffects: IRoomCameraWidgetEffect[]; + onCloseClick: () => void; } export class CameraWidgetEditorTabs