Update camera

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
         },

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

src/api/nitro/camera/index.ts

@@ -0,0 +1 @@
+export * from './GetRoomCameraWidgetManager';

src/api/nitro/index.ts

@@ -1,4 +1,5 @@
 export * from './avatar';
+export * from './camera';
 export * from './GetConnection';
 export * from './room';
 export * from './session';

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

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/camera/events/RoomCameraWidgetManagerEvent';
-import { RoomCameraWidgetManagerEvent } from 'nitro-renderer/src/nitro/room/events/RoomCameraWidgetManagerEvent';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { FC, useCallback, useState } from 'react';
+import { GetRoomCameraWidgetManager } from '../../../../api';
-import { GetRoomEngine } 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<CameraWidgetViewProps> = props =>
 {
+    const [ effectsReady, setEffectsReady ] = useState(false);
     const [ isCaptureVisible, setIsCaptureVisible ] = useState(false);
-    const [ isEditorVisible, setIsEditorVisible ]   = useState(false);
+    const [ isEditorVisible, setIsEditorVisible ] = useState(false);
-    const [ chosenPicture, setChosenPicture ]       = useState<HTMLImageElement>(null);
+    const [ chosenPicture, setChosenPicture ] = useState<HTMLImageElement>(null);
-    const [ availableEffects, setAvailableEffects ] = useState<RoomCameraWidgetEditorEffect[]>(null);
-
-    const getAvailableEffects = useCallback(() =>
-    {
-        if(GetRoomEngine().roomCameraWidgetManager.isLoaded)
-        {
-            setAvailableEffects(Array.from(GetRoomEngine().roomCameraWidgetManager.loadedEffects.values()));
-        }
-    }, []);
 
     const onNitroEvent = useCallback((event: RoomWidgetCameraEvent) =>
     {
@@ -30,7 +21,6 @@ export const CameraWidgetView: FC<CameraWidgetViewProps> = props =>
         {
             case RoomWidgetCameraEvent.SHOW_CAMERA:
                 setIsCaptureVisible(true);
-                getAvailableEffects();
                 return;
             case RoomWidgetCameraEvent.HIDE_CAMERA:
                 setIsCaptureVisible(false);
@@ -39,10 +29,6 @@ export const CameraWidgetView: FC<CameraWidgetViewProps> = 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<CameraWidgetViewProps> = 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) =>
     {

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<CameraWidgetEditorViewProps> = 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 [ currentTab, setCurrentTab ] = useState(CameraWidgetEditorTabs.COLORMATRIX);
-    const [ isZoomed, setIsZoomed ]                 = useState(false);
+    const [ isZoomed, setIsZoomed ] = useState(false);
-    const [ selectedEffects, setSelectedEffects ]   = useState<RoomCameraWidgetEditorSelectedEffect[]>([]);
+    const [ selectedEffects, setSelectedEffects ] = useState<IRoomCameraWidgetSelectedEffect[]>([]);
     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<CameraWidgetEditorViewProps> = 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<CameraWidgetEditorViewProps> = props =>
                 setIsZoomed(isZoomed => !isZoomed);
                 return;
         }
-    }, []);
+    }, [ onCloseClick ]);
 
     return (
         <NitroCardView className="nitro-camera-editor">
@@ -93,7 +95,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                                             <div key={ effect.name } className="col mb-3">
                                                 <div title={ LocalizeText('camera.effect.name.' + effect.name) } className="effect-thumbnail cursor-pointer position-relative border border-2 rounded d-flex flex-column justify-content-center align-items-center py-1">
                                                     <div className="effect-thumbnail-image rounded">
-                                                        <img className="rounded" src={ getEffectThumbnail(effect.name) } />
+                                                        <img alt="" className="rounded" src={ getEffectThumbnail(effect.name) } />
                                                     </div>
                                                 </div>
                                             </div>
@@ -107,7 +109,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                     <NitroCardTabsView></NitroCardTabsView>
                     <NitroCardContentView>
                         <div className="bg-black rounded">
-                            <div className={ 'picture-preview rounded' + classNames({ ' zoomed': isZoomed }) } style={ { backgroundImage: 'url(' + props.picture.src + ')' } }></div>
+                            <div className={ 'picture-preview rounded' + classNames({ ' zoomed': isZoomed }) } style={ { backgroundImage: 'url(' + picture.src + ')' } }></div>
                         </div>
                         <div className="d-flex mt-2">
                             <button className="btn btn-primary btn-sm me-2">{ LocalizeText('save') }</button>

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