feat: 灯光跟随屏幕内容。

feat: 灯光跟随屏幕内容。

src/App.tsx

@@ -4,17 +4,12 @@ import { invoke } from '@tauri-apps/api/tauri';
 import './App.css';
 import clsx from 'clsx';
 
+type Mode = 'Flowing' | 'Follow' | null;
+
 function App() {
-  const [greetMsg, setGreetMsg] = useState('');
-  const [name, setName] = useState('');
   const [screenshots, setScreenshots] = useState<string[]>([]);
   const [ledStripColors, setLedStripColors] = useState<string[]>([]);
-  const [flowingLightMode, setFlowingLightMode] = useState<boolean>(false);
-
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(await invoke('greet', { name }));
-  }
+  const [currentMode, setCurrentMode] = useState<Mode>(null);
 
   async function takeSnapshot() {
     const base64TextList: string[] = await invoke('take_snapshot');
@@ -30,16 +25,20 @@ function App() {
     setLedStripColors(await invoke('get_led_strip_colors'));
   }, []);
 
-  const switchFlowingLightMode = useCallback(async () => {
-    console.log('A', flowingLightMode);
-    if (flowingLightMode) {
-      await invoke('stop_flowing_light');
-    } else {
-      invoke('play_flowing_light');
-    }
-    console.log('B', flowingLightMode);
-    setFlowingLightMode(!flowingLightMode);
-  }, [flowingLightMode]);
+  const switchCurrentMode = useCallback(
+    async (targetMode: Mode) => {
+      console.log(targetMode, currentMode, currentMode === targetMode);
+      if (currentMode === targetMode) {
+        await invoke('play_mode', { targetMode: 'None' });
+        setCurrentMode(null);
+      } else {
+        await invoke('play_mode', { targetMode });
+        setCurrentMode(targetMode);
+      }
+      console.log(targetMode, currentMode, currentMode === targetMode);
+    },
+    [currentMode, setCurrentMode],
+  );
 
   return (
     <div>
@@ -81,13 +80,22 @@ function App() {
         </button>
         <button
           className={clsx('bg-black', 'bg-opacity-20', {
-            'bg-gradient-to-r from-purple-500 to-blue-500': flowingLightMode,
+            'bg-gradient-to-r from-purple-500 to-blue-500': currentMode === 'Flowing',
           })}
           type="button"
-          onClick={() => switchFlowingLightMode()}
+          onClick={() => switchCurrentMode('Flowing')}
         >
           Flowing Light
         </button>
+        <button
+          className={clsx('bg-black', 'bg-opacity-20', {
+            'bg-gradient-to-r from-purple-500 to-blue-500': currentMode === 'Follow',
+          })}
+          type="button"
+          onClick={() => switchCurrentMode('Follow')}
+        >
+          Follow
+        </button>
       </div>
 
       <div className="flex gap-5 justify-center">