..

YeonV · Oct 5, 2024 · b5f67c4 · b5f67c4
1 parent a8dbe7d
commit b5f67c4
Showing 1 changed file with 29 additions and 30 deletions.
diff --git a/src/components/Midi/MidiListener.tsx b/src/components/Midi/MidiListener.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { WebMidi, Input } from 'webmidi'
+import { WebMidi, Input, Output } from 'webmidi'
 import useStore from '../../store/useStore'
 import { getUiBtnNo } from '../../store/ui/storeMidi'
 
@@ -163,6 +163,30 @@ const MIDIListener = () => {
         }
       })
     }
+    const initLeds = (output: Output) => {
+      if (output)  {
+        Object.entries(midiMapping[0]).forEach(([key, value]) => {
+          const buttonNumber = value.buttonNumber
+          if (value.command !== 'scene' && value.command && value.command !== 'none' && buttonNumber !== -1) {
+            if (output) {
+              try {
+                output.send([parseInt(`0x${value.typeCommand}`) || 0x90, buttonNumber, parseInt(value.colorCommand || commandColor, 16) || 99])
+              } catch (error) {
+                console.error('Error sending MIDI message:', error)
+              }
+            }
+          } else if (value.command === 'scene') {
+            if (output && buttonNumber !== -1) {
+              try {
+                output.send([parseInt(`0x${value.typeSceneInactive}`) || 0x90, buttonNumber, parseInt(value.colorSceneInactive || midiSceneInactiveColor, 16) || 60])
+              } catch (error) {
+                console.error('Error sending MIDI message:', error)
+              }
+            }
+          }
+        })
+      }
+    }
 
     const enableWebMidi = () => {
       WebMidi.enable({
@@ -216,43 +240,18 @@ const MIDIListener = () => {
               })
             }
 
+            initLeds(output)
           }
         }
       })
     }
 
-    enableWebMidi()
-
-    const initLeds = () => {
-      const output = WebMidi.getOutputByName(midiOutput)
-      if (output)  {
-        Object.entries(midiMapping[0]).forEach(([key, value]) => {
-          const buttonNumber = value.buttonNumber
-          if (value.command !== 'scene' && value.command && value.command !== 'none' && buttonNumber !== -1) {
-            if (output) {
-              try {
-                output.send([parseInt(`0x${value.typeCommand}`) || 0x90, buttonNumber, parseInt(value.colorCommand || commandColor, 16) || 99])
-              } catch (error) {
-                console.error('Error sending MIDI message:', error)
-              }
-            }
-          } else if (value.command === 'scene') {
-            if (output && buttonNumber !== -1) {
-              try {
-                output.send([parseInt(`0x${value.typeSceneInactive}`) || 0x90, buttonNumber, parseInt(value.colorSceneInactive || midiSceneInactiveColor, 16) || 60])
-              } catch (error) {
-                console.error('Error sending MIDI message:', error)
-              }
-            }
-          }
-        })
-      }
-    }
-    initLeds()
+    enableWebMidi()   
+
 
     const handleWebsockets = (event: any) => {
-      initLeds()
       const output = WebMidi.getOutputByName(midiOutput)
+      if (output) initLeds(output)
       try {
         if (event.type === 'scene_activated') {
           const { scene_id } = event.detail