nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update camera

Browse Source
This commit is contained in:
Bill 2021-06-15 16:52:23 -04:00
parent 4d5915fa98
commit 581ef7c0c6
8 changed files with 95 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/configuration.json
View File

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

7
src/api/nitro/camera/GetRoomCameraWidgetManager.ts Normal file
View File

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

1
src/api/nitro/camera/index.ts Normal file
View File

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

1
src/api/nitro/index.ts
View File

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

8
src/hooks/events/nitro/camera/camera-event.tsx Normal file
View File

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

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

@ -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<CameraWidgetViewProps> = props =>
{
const [ effectsReady, setEffectsReady ] = useState(false);
const [ isCaptureVisible, setIsCaptureVisible ] = useState(false);
const [ isEditorVisible, setIsEditorVisible ] = useState(false);
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 [ isEditorVisible, setIsEditorVisible ] = useState(false);
const [ chosenPicture, setChosenPicture ] = useState<HTMLImageElement>(null);
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) =>
{

34
src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx
View File

@ -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 [ isZoomed, setIsZoomed ] = useState(false);
const [ selectedEffects, setSelectedEffects ] = useState<RoomCameraWidgetEditorSelectedEffect[]>([]);
const [ currentTab, setCurrentTab ] = useState(CameraWidgetEditorTabs.COLORMATRIX);
const [ isZoomed, setIsZoomed ] = useState(false);
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>

6
src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts
View File

@ -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