From 580bcfe743e2bbb90f71108150364bb10b133b97 Mon Sep 17 00:00:00 2001 From: Aarron Lee Date: Sun, 26 Nov 2023 10:37:55 -0500 Subject: [PATCH] useRgb custom hook --- src/components/ControllerLightingPanel.tsx | 124 +++++++++------------ src/hooks/useRgb.tsx | 117 +++++++++++++++++++ 2 files changed, 168 insertions(+), 73 deletions(-) create mode 100644 src/hooks/useRgb.tsx diff --git a/src/components/ControllerLightingPanel.tsx b/src/components/ControllerLightingPanel.tsx index c8b3e3e..26d56b2 100644 --- a/src/components/ControllerLightingPanel.tsx +++ b/src/components/ControllerLightingPanel.tsx @@ -11,6 +11,7 @@ import { } from 'decky-frontend-lib'; import { VFC } from 'react'; import { useState } from 'react'; +import useRgb from '../hooks/useRgb'; const DEFAULT_STATE = { ledR_b: 50, ledL_b: 50, @@ -23,52 +24,64 @@ const DEFAULT_STATE = { blue: 255 }; +// const defaultLeftRgb; + const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({ serverAPI }) => { - const [ledRightBrightness, setRightLedBrightness] = useState( - DEFAULT_STATE.ledR_b - ); - const [ledLeftBrightness, setLeftLedBrightness] = useState( - DEFAULT_STATE.ledL_b - ); - const [isLeftRgbOn, setIsLeftRgbOn] = useState(DEFAULT_STATE.isLeftRgbOn); - const [isRightRgbOn, setIsRightRgbOn] = useState(DEFAULT_STATE.isRigthRgbOn); + // const [ledRightBrightness, setRightLedBrightness] = useState( + // DEFAULT_STATE.ledR_b + // ); + // const [ledLeftBrightness, setLeftLedBrightness] = useState( + // DEFAULT_STATE.ledL_b + // ); + // const [isLeftRgbOn, setIsLeftRgbOn] = useState(DEFAULT_STATE.isLeftRgbOn); + // const [isRightRgbOn, setIsRightRgbOn] = useState(DEFAULT_STATE.isRigthRgbOn); const [isTouchpad, setIsTouchpad] = useState(DEFAULT_STATE.isTouchpad); - const [redR, setRedR] = useState(DEFAULT_STATE.red); - const [greenR, setGreenR] = useState(DEFAULT_STATE.green); - const [blueR, setBlueR] = useState(DEFAULT_STATE.blue); - const [redL, setRedL] = useState(DEFAULT_STATE.red); - const [greenL, setGreenL] = useState(DEFAULT_STATE.green); - const [blueL, setBlueL] = useState(DEFAULT_STATE.blue); + // const [redR, setRedR] = useState(DEFAULT_STATE.red); + // const [greenR, setGreenR] = useState(DEFAULT_STATE.green); + // const [blueR, setBlueR] = useState(DEFAULT_STATE.blue); + // const [redL, setRedL] = useState(DEFAULT_STATE.red); + // const [greenL, setGreenL] = useState(DEFAULT_STATE.green); + // const [blueL, setBlueL] = useState(DEFAULT_STATE.blue); const [showRightOptions, setShowRightOptions] = useState(false); const [showLeftOptions, setShowLeftOptions] = useState(false); + const [ + { + enabled: isLeftRgbOn, + red: redL, + green: greenL, + blue: blueL, + brightness: brightnessL + }, + setIsLeftRgbOn, + setLeftColor, + setLeftLedBrightness + ] = useRgb('LEFT', serverAPI); + + const [ + { + enabled: isRightRgbOn, + red: redR, + green: greenR, + blue: blueR, + brightness: brightnessR + }, + setIsRightRgbOn, + setRightColor, + setRightLedBrightness + ] = useRgb('RIGHT', serverAPI); + const handleSliderChange = (controller: string, newValue: number) => { - let r = 100; - let g = 100; - let b = 100; if (controller === 'LEFT') { setLeftLedBrightness(newValue); - r = redL; - g = greenL; - b = blueL; } else if (controller === 'RIGHT') { setRightLedBrightness(newValue); - r = redR; - g = greenR; - b = blueR; } console.log(`New brightness: ${newValue}`); - serverAPI!.callPluginMethod('rgb_brightness', { - controller: controller, - value_str: newValue, - red: r, - blue: b, - green: g - }); }; const handleToggleChange = (controller: string, value: boolean) => { if (controller === 'LEFT') { @@ -76,9 +89,6 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({ } else if (controller === 'RIGHT') { setIsRightRgbOn(value); } - console.log(`Toggle value: ${value}`); - const method = value ? 'rgb_on' : 'rgb_off'; - serverAPI!.callPluginMethod(method, { controller: controller }); }; const TPadToggleChange = (value: boolean) => { setIsTouchpad(value); @@ -86,32 +96,6 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({ serverAPI!.callPluginMethod('set_touchpad', { enable: value }); }; - const handleColorChange = (controller: string) => { - let ledB = 100; - let r = 100; - let g = 100; - let b = 100; - if (controller === 'LEFT') { - ledB = ledLeftBrightness; - r = redL; - g = greenL; - b = blueL; - } else if (controller === 'RIGHT') { - ledB = ledRightBrightness; - r = redR; - g = greenR; - b = blueR; - } - const rgbColor = `rgb(${r}, ${g}, ${b})`; - console.log(rgbColor); - serverAPI!.callPluginMethod('rgb_color', { - controller: controller, - red: r, - blue: b, - green: g, - brightness: ledB - }); - }; return (
@@ -134,7 +118,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({ <> = ({ max={255} validValues="range" onChange={(value) => { - setRedR(value); - handleColorChange('RIGHT'); + setRightColor('red', value); }} /> = ({ max={255} validValues="range" onChange={(value) => { - setGreenR(value); - handleColorChange('RIGHT'); + setRightColor('green', value); }} /> = ({ max={255} validValues="range" onChange={(value) => { - setBlueR(value); - handleColorChange('RIGHT'); + setRightColor('blue', value); }} />
= ({ <> = ({ max={255} validValues="range" onChange={(value) => { - setRedL(value); - handleColorChange('LEFT'); + setLeftColor('red', value); }} /> = ({ max={255} validValues="range" onChange={(value) => { - setGreenL(value); - handleColorChange('LEFT'); + setLeftColor('green', value); }} /> = ({ max={255} validValues="range" onChange={(value) => { - setBlueL(value); - handleColorChange('LEFT'); + setLeftColor('blue', value); }} />
{ + if (action.type === Actions.SET_COLOR && action.payload) { + let newState = { ...state, [action.payload.color]: action.payload.value }; + return newState; + } + if (action.type === Actions.SET_BRIGHTNESS) { + let newState = { ...state, brightness: action.payload }; + return newState; + } + if (action.type === Actions.TOGGLE_ENABLED) { + let newState = { ...state, enabled: !state.enabled }; + return newState; + } + if (action.type === Actions.SET_ENABLED) { + let newState = { ...state, enabled: Boolean(action.payload) }; + return newState; + } + return state; +}; + +const initialState = { + enabled: false, + red: 255, + green: 255, + blue: 255, + brightness: 50 +}; + +const useRgb = ( + // initialState: StateType, + controller: ControllerType, + serverAPI: ServerAPI +) => { + const [state, dispatch] = useReducer(rgbReducer, initialState); + + const { enabled, red, green, blue, brightness } = state as StateType; + + useEffect(() => { + if (enabled) { + serverAPI.callPluginMethod('rgb_on', { controller }); + serverAPI.callPluginMethod('rgb_brightness', { + controller, + value_str: brightness, + red, + green, + blue + }); + } else { + // turn off rgb + serverAPI.callPluginMethod('rgb_off', { controller }); + } + }, [enabled, red, green, blue, brightness]); + + const updateColor = (color: Colors, value: number) => { + return dispatch({ + type: Actions.SET_COLOR, + payload: { + color, + value + } + }); + }; + + // const toggleEnabled = () => { + // return dispatch({ + // type: Actions.TOGGLE_ENABLED + // }); + // }; + + const setEnabled = (enabled: boolean) => { + return dispatch({ + type: Actions.SET_ENABLED, + payload: enabled + }); + }; + + const updateBrightness = (brightness: number) => { + return dispatch({ + type: Actions.SET_BRIGHTNESS, + payload: brightness + }); + }; + + return [state, setEnabled, updateColor, updateBrightness]; +}; + +export default useRgb;