diff --git a/src/components/camera/views/editor/CameraWidgetEditorView.tsx b/src/components/camera/views/editor/CameraWidgetEditorView.tsx index ebe394f..d31ac35 100644 --- a/src/components/camera/views/editor/CameraWidgetEditorView.tsx +++ b/src/components/camera/views/editor/CameraWidgetEditorView.tsx @@ -24,7 +24,8 @@ export const CameraWidgetEditorView: FC = props => const [ effectsThumbnails, setEffectsThumbnails ] = useState([]); const [ isZoomed, setIsZoomed ] = useState(false); const [ currentPictureUrl, setCurrentPictureUrl ] = useState(''); - const isBusy = useRef(false); + const debounceTimerRef = useRef>(null); + const requestIdRef = useRef(0); const getColorMatrixEffects = useMemo(() => { return availableEffects.filter(effect => effect.colorMatrix); @@ -134,15 +135,24 @@ export const CameraWidgetEditorView: FC = props => }, [ picture, availableEffects ]); useEffect(() => { - GetRoomCameraWidgetManager() - .applyEffects(picture.texture, selectedEffects, false) // Remove isZoomed from here - .then(imageElement => { - setCurrentPictureUrl(imageElement.src); - }) - .catch(error => { - NitroLogger.error('Failed to apply effects to picture', error); - }); - }, [ picture, selectedEffects ]); // Remove isZoomed from dependency array + if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current); + + debounceTimerRef.current = setTimeout(() => { + const id = ++requestIdRef.current; + + GetRoomCameraWidgetManager() + .applyEffects(picture.texture, selectedEffects, false) + .then(imageElement => { + if (id !== requestIdRef.current) return; + setCurrentPictureUrl(imageElement.src); + }) + .catch(error => NitroLogger.error('Failed to apply effects to picture', error)); + }, 50); + + return () => { + if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current); + }; + }, [ picture, selectedEffects ]); return ( @@ -182,10 +192,10 @@ export const CameraWidgetEditorView: FC = props => { LocalizeText('camera.effect.name.' + selectedEffectName) } setSelectedEffectAlpha(event) } + max={ 100 } + step={ 1 } + value={ Math.round(getCurrentEffect.strength * 100) } + onChange={ event => setSelectedEffectAlpha(event / 100) } renderThumb={ ({ key, ...props }, state) =>
{ state.valueNow }
} /> diff --git a/src/css/icons/icons.css b/src/css/icons/icons.css index e8382b2..5c97f32 100644 --- a/src/css/icons/icons.css +++ b/src/css/icons/icons.css @@ -201,6 +201,15 @@ filter: grayscale(100%); } +.chatstyles-anchor { + width: 17px; + height: 19px; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; +} + .nitro-icon.chatstyles-icon:hover { filter: grayscale(0%); }