🆙 WiP Camera

src/components/camera/views/editor/CameraWidgetEditorView.tsx

@@ -24,7 +24,8 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
     const [ effectsThumbnails, setEffectsThumbnails ] = useState<CameraPictureThumbnail[]>([]);
     const [ isZoomed, setIsZoomed ] = useState(false);
     const [ currentPictureUrl, setCurrentPictureUrl ] = useState<string>('');
-    const isBusy = useRef<boolean>(false);
+    const debounceTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
+    const requestIdRef = useRef<number>(0);
 
     const getColorMatrixEffects = useMemo(() => {
         return availableEffects.filter(effect => effect.colorMatrix);
@@ -134,15 +135,24 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
     }, [ picture, availableEffects ]);
 
     useEffect(() => {
-        GetRoomCameraWidgetManager()
+        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-            .applyEffects(picture.texture, selectedEffects, false) // Remove isZoomed from here
+
-            .then(imageElement => {
+        debounceTimerRef.current = setTimeout(() => {
-                setCurrentPictureUrl(imageElement.src);
+            const id = ++requestIdRef.current;
-            })
+
-            .catch(error => {
+            GetRoomCameraWidgetManager()
-                NitroLogger.error('Failed to apply effects to picture', error);
+                .applyEffects(picture.texture, selectedEffects, false)
-            });
+                .then(imageElement => {
-    }, [ picture, selectedEffects ]); // Remove isZoomed from dependency array
+                    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 (
         <NitroCardView className="w-[600px] h-[500px]">
@@ -182,10 +192,10 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                                     <Text>{ LocalizeText('camera.effect.name.' + selectedEffectName) }</Text>
                                     <Slider
                                         min={ 0 }
-                                        max={ 1 }
+                                        max={ 100 }
-                                        step={ 0.01 }
+                                        step={ 1 }
-                                        value={ getCurrentEffect.strength }
+                                        value={ Math.round(getCurrentEffect.strength * 100) }
-                                        onChange={ event => setSelectedEffectAlpha(event) }
+                                        onChange={ event => setSelectedEffectAlpha(event / 100) }
                                         renderThumb={ ({ key, ...props }, state) => <div key={ key } { ...props }>{ state.valueNow }</div> }
                                     />
                                 </Column>

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