diff --git a/src/App.tsx b/src/App.tsx index 3dc1f09c..8424cffe 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomCameraWidgetManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer'; +import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { GetUIVersion } from './api'; import { Base } from './common'; @@ -55,8 +55,7 @@ export const App: FC<{}> = props => GetAvatarRenderManager().init(), GetSoundManager().init(), GetSessionDataManager().init(), - GetRoomSessionManager().init(), - GetRoomCameraWidgetManager().init() + GetRoomSessionManager().init() ] ); diff --git a/src/components/camera/views/editor/CameraWidgetEditorView.tsx b/src/components/camera/views/editor/CameraWidgetEditorView.tsx index 74898c46..35f14647 100644 --- a/src/components/camera/views/editor/CameraWidgetEditorView.tsx +++ b/src/components/camera/views/editor/CameraWidgetEditorView.tsx @@ -1,5 +1,5 @@ -import { GetRoomCameraWidgetManager, IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, RoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { GetRoomCameraWidgetManager, IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, NitroLogger, RoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { FaSave, FaSearchMinus, FaSearchPlus, FaTrash } from 'react-icons/fa'; import ReactSlider from 'react-slider'; import { CameraEditorTabs, CameraPicture, CameraPictureThumbnail, LocalizeText } from '../../../../api'; @@ -27,6 +27,7 @@ export const CameraWidgetEditorView: FC = props => const [ effectsThumbnails, setEffectsThumbnails ] = useState([]); const [ isZoomed, setIsZoomed ] = useState(false); const [ currentPictureUrl, setCurrentPictureUrl ] = useState(''); + const isBusy = useRef(false); const getColorMatrixEffects = useMemo(() => { @@ -158,29 +159,28 @@ export const CameraWidgetEditorView: FC = props => useEffect(() => { - (async () => + const processThumbnails = async () => { - const thumbnails: CameraPictureThumbnail[] = []; + const renderedEffects = await Promise.all(availableEffects.map(effect => GetRoomCameraWidgetManager().applyEffects(picture.texture, [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false))); - for await (const effect of availableEffects) - { - const image = await GetRoomCameraWidgetManager().applyEffects(picture.texture, [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false); + setEffectsThumbnails(renderedEffects.map((image, index) => new CameraPictureThumbnail(availableEffects[index].name, image.src))); + }; - thumbnails.push(new CameraPictureThumbnail(effect.name, image.src)); - } - - setEffectsThumbnails(thumbnails); - })(); + processThumbnails(); }, [ picture, availableEffects ]); useEffect(() => { - (async () => - { - const imageUrl = await GetRoomCameraWidgetManager().applyEffects(picture.texture, selectedEffects, isZoomed); - - setCurrentPictureUrl(imageUrl.src); - })(); + GetRoomCameraWidgetManager() + .applyEffects(picture.texture, selectedEffects, isZoomed) + .then(imageElement => + { + setCurrentPictureUrl(imageElement.src); + }) + .catch(error => + { + NitroLogger.error('Failed to apply effects to picture', error); + }); }, [ picture, selectedEffects, isZoomed ]); return ( @@ -208,9 +208,9 @@ export const CameraWidgetEditorView: FC = props => min={ 0 } max={ 1 } step={ 0.01 } - value={ getCurrentEffect.alpha } + value={ getCurrentEffect.strength } onChange={ event => setSelectedEffectAlpha(event) } - renderThumb={ (props, state) =>
{ state.valueNow }
} /> + renderThumb={ ({ key, ...props }, state) =>
{ state.valueNow }
} /> } diff --git a/src/hooks/camera/useCamera.ts b/src/hooks/camera/useCamera.ts index f169c647..7d725b70 100644 --- a/src/hooks/camera/useCamera.ts +++ b/src/hooks/camera/useCamera.ts @@ -26,14 +26,11 @@ const useCameraState = () => useEffect(() => { - if(!GetRoomCameraWidgetManager().isLoaded) - { - GetRoomCameraWidgetManager().init(); + if(GetRoomCameraWidgetManager().isLoaded) return; - SendMessageComposer(new RequestCameraConfigurationComposer()); + GetRoomCameraWidgetManager().init(); - return; - } + SendMessageComposer(new RequestCameraConfigurationComposer()); }, []); return { availableEffects, cameraRoll, setCameraRoll, selectedPictureIndex, setSelectedPictureIndex, myLevel, price };