From 86a09a9fb1a304e53dd142125c90ec171253fa37 Mon Sep 17 00:00:00 2001
From: YeonV <trusted.yeon@gmail.com>
Date: Fri, 4 Oct 2024 02:54:46 +0200
Subject: [PATCH] Fix MIDI-Scenes. Add custom midi button mapping

---
 .../Dialogs/SceneDialogs/EditSceneDialog.tsx  |  43 +----
 src/components/Midi/LaunchpadButton.tsx       |  54 +++++--
 src/components/Midi/LaunchpadButtonMap.tsx    |  87 +++++-----
 src/components/Midi/MidiListener.tsx          | 151 ++++++++++--------
 src/store/ui/storeMidi.tsx                    |   7 +-
 5 files changed, 177 insertions(+), 165 deletions(-)

diff --git a/src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx b/src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx
index a8c7dd2d..9ccdb9ba 100644
--- a/src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx
+++ b/src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx
@@ -29,7 +29,6 @@ import {
   Autocomplete
 } from '@mui/material'
 import { Clear, Undo, NavigateBefore, MusicNote } from '@mui/icons-material'
-import { WebMidi, Input, NoteMessageEvent } from 'webmidi'
 import { useDropzone } from 'react-dropzone'
 import isElectron from 'is-electron'
 import { filterKeys, ordered } from '../../../utils/helpers'
@@ -76,7 +75,7 @@ const EditSceneDialog = () => {
   const getUserPresets = useStore((state) => state.getUserPresets)
   const getImage = useStore((state) => state.getImage)
   const [imageData, setImageData] = useState(null)
-  const midiInput = useStore((state) => state.midiInput)
+  const midiEvent = useStore((state) => state.midiEvent)
 
   const getFullConfig = useStore((state) => state.getFullConfig)
 
@@ -227,34 +226,12 @@ const EditSceneDialog = () => {
   }, [open])
 
   useEffect(() => {
-    if (features.scenemidi) {
-      const handleMidiEvent = (input: Input, event: NoteMessageEvent) => {
+    if (features.scenemidi && midiEvent.button > -1) {
         setMIDIActivate(
-          `${input.name} Note: ${event.note.identifier} buttonNumber: ${event.note.number}`
+          `${midiEvent.name} Note: ${midiEvent.note} buttonNumber: ${midiEvent.button}`
         )
-      }
-      WebMidi.enable({
-        callback(err: Error) {
-          if (err) {
-            console.error('WebMidi could not be enabled:', err)
-          } else {
-            const { inputs } = WebMidi
-            if (inputs.length > 0) {
-              inputs.forEach((input: Input) => {
-                if (midiInput === input.name) {
-                  return input.addListener('noteon', (event: NoteMessageEvent) => {
-                    handleMidiEvent(input, event)
-                  })
-                }
-              }
-              )
-            }
-          }
-        }
-      })
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [midiEvent])
 
   const renderPresets = (
     current_ledfx_presets: any,
@@ -665,7 +642,7 @@ const EditSceneDialog = () => {
             ) : (
               <></>
             )}
-            {features && features.scenemidi && WebMidi.inputs.length > 0 ? (
+            {features && features.scenemidi ? (
               <>
                 <Stack direction={small ? 'column' : 'row'} gap={1}>
                   <FormControl sx={{ mt: 1, width: small ? '100%' : '130px' }}>
@@ -771,15 +748,6 @@ const EditSceneDialog = () => {
                                   </Avatar>
                                 }
                               />
-                              {/* <Chip
-                            label={/\((.*?)\)/.exec(midiActivate)?.[1]}
-                            onDelete={() => setMIDIActivate('')}
-                            avatar={
-                              <Avatar>
-                                {/\((.*?)\)/.exec(midiActivate)?.[1]}
-                              </Avatar>
-                            }
-                          /> */}
                               <Chip
                                 label={
                                   midiActivate
@@ -793,7 +761,6 @@ const EditSceneDialog = () => {
                                 }
                               />
                               <Chip
-                                // onDelete={() => setMIDIActivate('')}
                                 label={
                                   midiActivate
                                     ?.split('buttonNumber: ')[1]
diff --git a/src/components/Midi/LaunchpadButton.tsx b/src/components/Midi/LaunchpadButton.tsx
index 3c2305f2..7f47dfac 100644
--- a/src/components/Midi/LaunchpadButton.tsx
+++ b/src/components/Midi/LaunchpadButton.tsx
@@ -1,12 +1,13 @@
 import Button from '@mui/material/Button'
 import DialogTitle from '@mui/material/DialogTitle'
 import Dialog from '@mui/material/Dialog'
-import { darken, DialogContent, Divider, MenuItem, Select, Stack, Typography } from '@mui/material'
-import { useState } from 'react'
+import { darken, DialogContent, Divider, IconButton, MenuItem, Select, Stack, TextField, Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
 import LpColorPicker from './LpColorPicker'
 import Assign from '../Gamepad/Assign'
 import useStore from '../../store/useStore'
 import { getColorFromValue } from './lpColors'
+import { Autorenew, Save } from '@mui/icons-material'
 
 const LaunchpadButton = ({
     buttonNumber,
@@ -23,8 +24,8 @@ const LaunchpadButton = ({
     bgColor?: string
 }) => {
   const [open, setOpen] = useState(false)
-
   const midiMapping = useStore((state) => state.midiMapping)
+  const midiEvent = useStore((state) => state.midiEvent)
   const setMidiMapping = useStore((state) => state.setMidiMapping)
   const midiSceneInactiveColor = useStore((state) => state.midiColors.sceneInactiveColor)
   const midiSceneActiveColor = useStore((state) => state.midiColors.sceneActiveColor)
@@ -41,6 +42,17 @@ const LaunchpadButton = ({
     setOpen(false)
   }
 
+  const currentMapping = midiMapping[0][buttonNumber] || {};
+  
+  const [midiButtonNumber, setMidiButtonNumber] = useState(currentMapping.buttonNumber || 0)
+  const [midiRecord, setMidiRecord] = useState(false)
+
+  useEffect(() => {
+    if (midiRecord && midiEvent.button > -1) {
+        setMidiButtonNumber(midiEvent.button)
+    }
+  }, [midiEvent.button])
+
   return (
     <div>
         <Button
@@ -77,6 +89,16 @@ const LaunchpadButton = ({
         }}>
         <DialogTitle>Edit Launchpad Button {buttonNumber}</DialogTitle>
         <DialogContent>
+            <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
+                <Typography>MIDI Button</Typography>
+                <Stack direction={'row'}>
+                    <IconButton onClick={() => {
+                        setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, buttonNumber: midiButtonNumber}}})
+                        setMidiRecord(!midiRecord)
+                    }}>{midiRecord ? <Save /> : <Autorenew />}</IconButton>
+                    <TextField disabled value={midiButtonNumber} sx={{ width: 70 }} size='small' />
+                </Stack>
+            </Stack>
             <Assign
                 type={'midi'}
                 compact={false}
@@ -90,48 +112,48 @@ const LaunchpadButton = ({
             <Divider sx={{ mb: 2.5, mt: 1.5}} />
             <Stack direction={'column'} spacing={1} mt={1}>
                 <Typography variant='h6'>Button Color</Typography>
-                {midiMapping[0][buttonNumber]?.command === 'scene' ? <>
+                {currentMapping.command === 'scene' ? <>
                     <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
                         <Typography>Scene inactive</Typography>
                         <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
-                            <Select disableUnderline value={midiMapping[0][buttonNumber]?.typeSceneInactive || midiSceneInactiveType || '90'} onChange={(e) => {
-                                setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...midiMapping[0][buttonNumber], typeSceneInactive: e.target.value}}})
+                            <Select disableUnderline value={currentMapping.typeSceneInactive || midiSceneInactiveType || '90'} onChange={(e) => {
+                                setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, typeSceneInactive: e.target.value}}})
                             }}>
                             <MenuItem value={'90'}>Solid</MenuItem>
                             <MenuItem value={'91'}>Flash</MenuItem>
                             <MenuItem value={'92'}>Pulse</MenuItem>
                             </Select>
-                        <LpColorPicker defaultColor={getColorFromValue(midiMapping[0][buttonNumber]?.colorSceneInactive || midiSceneInactiveColor)} onColorSelect={(color: string) => {
-                            setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...midiMapping[0][buttonNumber], colorSceneInactive: color}}})
+                        <LpColorPicker defaultColor={getColorFromValue(currentMapping.colorSceneInactive || midiSceneInactiveColor)} onColorSelect={(color: string) => {
+                            setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, colorSceneInactive: color}}})
                         }} />
                         </Stack>
                     </Stack>
                     <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
                         <Typography>Scene active</Typography>
                         <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
-                            <Select disableUnderline value={midiMapping[0][buttonNumber]?.typeSceneActive || midiSceneActiveType || '90'} onChange={(e) => {
-                                setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...midiMapping[0][buttonNumber], typeSceneActive: e.target.value}}})
+                            <Select disableUnderline value={currentMapping.typeSceneActive || midiSceneActiveType || '90'} onChange={(e) => {
+                                setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, typeSceneActive: e.target.value}}})
                             }}>
                             <MenuItem value={'90'}>Solid</MenuItem>
                             <MenuItem value={'91'}>Flash</MenuItem>
                             <MenuItem value={'92'}>Pulse</MenuItem>
                             </Select>
-                        <LpColorPicker defaultColor={getColorFromValue(midiMapping[0][buttonNumber]?.colorSceneActive || midiSceneActiveColor)} onColorSelect={(color: string) => {
-                            setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...midiMapping[0][buttonNumber], colorSceneActive: color}}})
+                        <LpColorPicker defaultColor={getColorFromValue(currentMapping.colorSceneActive || midiSceneActiveColor)} onColorSelect={(color: string) => {
+                            setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, colorSceneActive: color}}})
                         }} />
                         </Stack>
                     </Stack>
                 </> :
                 <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
-                         <Select disableUnderline value={midiMapping[0][buttonNumber]?.typeCommand || midiCommandType || '90'} onChange={(e) => {
-                            setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...midiMapping[0][buttonNumber], typeCommand: e.target.value}}})
+                         <Select disableUnderline value={currentMapping.typeCommand || midiCommandType || '90'} onChange={(e) => {
+                            setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, typeCommand: e.target.value}}})
                         }}>
                         <MenuItem value={'90'}>Solid</MenuItem>
                         <MenuItem value={'91'}>Flash</MenuItem>
                         <MenuItem value={'92'}>Pulse</MenuItem>
                         </Select>
-                        <LpColorPicker defaultColor={getColorFromValue(midiMapping[0][buttonNumber]?.colorCommand || midiCommandColor)} onColorSelect={(color: string) => {
-                            setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...midiMapping[0][buttonNumber], colorCommand: color}}})
+                        <LpColorPicker defaultColor={getColorFromValue(currentMapping.colorCommand || midiCommandColor)} onColorSelect={(color: string) => {
+                            setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, colorCommand: color}}})
                         }} />
                 </Stack>}
             </Stack>
diff --git a/src/components/Midi/LaunchpadButtonMap.tsx b/src/components/Midi/LaunchpadButtonMap.tsx
index ac40783b..05fdb53f 100644
--- a/src/components/Midi/LaunchpadButtonMap.tsx
+++ b/src/components/Midi/LaunchpadButtonMap.tsx
@@ -205,48 +205,53 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen}:{toggleSidebar: () => v
         </Stack>
     </Stack>
     <Stack direction={'row'} spacing={2} mb={2}>
-    <Stack direction={'column'} spacing={1}>
-    {matrix.map((row, rowIndex) => {
-        return (
-            <Stack key={'row' + rowIndex} direction={'row'} spacing={1}>
-            {row.map((_button, buttonIndex) => {
-                const row = 9 - rowIndex
-                const column = buttonIndex + 1
-                const buttonNumber = `${(row)}${column}`
-                const btnNumberInt = parseInt(buttonNumber)
-                const btn = midiMapping[0][btnNumberInt]
-                
-                const bgColor = midiEvent.button === btnNumberInt
-                    ? theme.palette.primary.main 
-                    : btn?.command && 
-                        btn?.command === 'scene' &&
-                        btn?.payload.scene === recentScenes[0]
-                        ? getColorFromValue(btn?.colorSceneActive || '1E') || '#0f0'
-                        : btn?.command && 
-                        btn?.command === 'scene' 
-                            ? getColorFromValue(btn?.colorSceneInactive || '07') || '#f00'
-                            : btn?.command && 
-                                btn?.command !== 'none'  && rowIndex !== 0
-                                ? getColorFromValue(btn?.colorCommand || '63') || '#ff0'
-                            : rowIndex === 0 || buttonIndex === 8
-                                    ? '#000' 
-                                : '#ccc'
-                return (
-                    <LaunchpadButton
-                        buttonNumber={btnNumberInt}
-                        active={!!(rowIndex === 0 && btn?.command && btn?.command !== 'none')}
-                        bgColor={bgColor}
-                        key={'button' + buttonIndex}
-                        borderless={rowIndex === 0 && buttonIndex === 8}
-                    >
-                        {labels(rowIndex, buttonIndex)}
-                    </LaunchpadButton>
-                )
-            })}
-            </Stack>
-        )
-    })}
+<Stack direction={'column'} spacing={1}>
+  {matrix.map((row, rowIndex) => {
+    return (
+      <Stack key={'row' + rowIndex} direction={'row'} spacing={1}>
+        {row.map((_button, buttonIndex) => {
+          const row = 9 - rowIndex
+          const column = buttonIndex + 1
+          const buttonNumber = `${row}${column}`
+          const btnNumberInt = parseInt(buttonNumber)
+          const btn = midiMapping[0][btnNumberInt]
+
+          // Use the buttonNumber from the mapping for functional logic
+          const functionalButtonNumber = btn?.buttonNumber
+
+          const bgColor = midiEvent.button === (functionalButtonNumber || btnNumberInt)
+            ? theme.palette.primary.main 
+            : btn?.command && 
+              btn?.command === 'scene' &&
+              btn?.payload.scene === recentScenes[0]
+              ? getColorFromValue(btn?.colorSceneActive || '1E') || '#0f0'
+              : btn?.command && 
+                btn?.command === 'scene' 
+                ? getColorFromValue(btn?.colorSceneInactive || '07') || '#f00'
+                : btn?.command && 
+                  btn?.command !== 'none'  && rowIndex !== 0
+                  ? getColorFromValue(btn?.colorCommand || '63') || '#ff0'
+                  : rowIndex === 0 || buttonIndex === 8
+                    ? '#000' 
+                    : '#ccc'
+
+          return (
+            <LaunchpadButton
+              buttonNumber={btnNumberInt}
+              active={!!(rowIndex === 0 && btn?.command && btn?.command !== 'none')}
+              bgColor={bgColor}
+              key={'button' + buttonIndex}
+              borderless={rowIndex === 0 && buttonIndex === 8}
+            >
+              {labels(rowIndex, buttonIndex)}
+            </LaunchpadButton>
+          )
+        })}
+      </Stack>
+    )
+  })}
 </Stack>
+
     {sideBarOpen && <Stack direction={'column'} spacing={1} maxHeight={694} width={300} sx={{ overflowY: 'scroll'}}>
         {matrix.map((row, rowIndex) => row.map((button, buttonIndex) => {
             return (
diff --git a/src/components/Midi/MidiListener.tsx b/src/components/Midi/MidiListener.tsx
index f4130030..17bea979 100644
--- a/src/components/Midi/MidiListener.tsx
+++ b/src/components/Midi/MidiListener.tsx
@@ -3,8 +3,8 @@ import { WebMidi, Input } from 'webmidi'
 import useStore from '../../store/useStore'
 
 // function setAllButtonsToBlack(output: WebMidi.MIDIOutput) {
-//   for (let i = 0; i < 81; i++) {
-//     output?.send([0x90, i, 0]);
+//   for (let i = 0 i < 81 i++) {
+//     output?.send([0x90, i, 0])
 //   }
 // }
 
@@ -50,16 +50,16 @@ const MIDIListener = () => {
 
   function handleButtonPress(command: string, payload?: any) {
     if (command === 'scene' && payload?.scene) {
-      setScene(payload.scene);
+      setScene(payload.scene)
     } else if (command === 'smartbar') {
-      setSmartBarOpen(!useStore.getState().ui.bars.smartBar.open);
+      setSmartBarOpen(!useStore.getState().ui.bars.smartBar.open)
     } else if (command === 'play/pause') {
-      togglePause();
+      togglePause()
     } else if (command === 'brightness-up') {
       setSystemSetting(
         'global_brightness',
         Math.min(glBrightness.current + 0.1, 1).toFixed(2)
-      );
+      )
       glBrightness.current = Math.min(glBrightness.current + 0.1, 1)
       setBright(Math.min(bright + 0.1, 1))
     } else if (command === 'brightness-down') {
@@ -70,51 +70,62 @@ const MIDIListener = () => {
       glBrightness.current = Math.min(glBrightness.current - 0.1, 1)
       setBright(Math.max(bright - 0.1, 0))
     } else if (command === 'scene-playlist') {
-      toggleScenePLplay();
+      toggleScenePLplay()
     } else if (command === 'one-shot') {
       oneShotAll(
         payload?.color || '#0dbedc',
         payload?.ramp || 10,
         payload?.holdType !== 'release' ? (payload?.hold || 200) : 10000,
         payload?.fade || 2000
-      );
+      )
     } else if (command === 'copy-to') {
-      setFeatures('streamto', !useStore.getState().features.streamto);
+      setFeatures('streamto', !useStore.getState().features.streamto)
     } else if (command === 'transitions') {
-      setFeatures('transitions', !useStore.getState().features.transitions);
+      setFeatures('transitions', !useStore.getState().features.transitions)
     } else if (command === 'frequencies') {
-      setFeatures('frequencies', !useStore.getState().features.frequencies);
+      setFeatures('frequencies', !useStore.getState().features.frequencies)
     }
   }
 
+  const getMappingByButtonNumber = (buttonNumber: number) => {
+    return Object.values(midiMapping[0]).find(mapping => mapping.buttonNumber === buttonNumber)
+  }
+  
   useEffect(() => {
     const handleMidiInput = (input: Input) => {
-      if (!input || input.name !== midiInput) return  
-      // console.log('Input Name:', input.name)
-      input.removeListener('noteon')
-      input.removeListener('noteoff')
+      if (!input || input.name !== midiInput) return
+  
+      if (input) {
+        input.removeListener('noteon')
+        input.removeListener('noteoff')
+        input.removeListener('controlchange')
+      }
+  
       input.addListener('noteon', (event: any) => {
         if (!event.note || (midiEvent.button === event.note.number && midiEvent.name === input.name && midiEvent.note === event.note.identifier)) return
-        // console.log('Input Name:', input.name)
-        // console.log('MIDI Event:', event)
+  
         setMidiEvent({
           name: input.name,
           note: event.note.identifier,
           button: event.note.number
         })
-        if (midiMapping[0][event.note.number]?.command !== undefined) {
-          handleButtonPress(midiMapping[0][event.note.number]?.command!, midiMapping[0][event.note.number].payload)
+  
+        const mapping = getMappingByButtonNumber(event.note.number)
+        console.log('MIDI Mapping:', mapping, event.note.number)
+        if (mapping?.command !== undefined) {
+          console.log('MIDI Command:', mapping.command)
+          handleButtonPress(mapping.command, mapping.payload)
         }
       })
-
+  
       input.addListener('noteoff', (event: any) => {
-        // console.log('MIDI Event:', event)
-        if (midiMapping[0][event.note.number]?.command === 'one-shot' && midiMapping[0][event.note.number]?.payload?.holdType === 'release') {
+        const mapping = getMappingByButtonNumber(event.note.number)
+        if (mapping?.command === 'one-shot' && mapping?.payload?.holdType === 'release') {
           oneShotAll(
-            midiMapping[0][event.note.number]?.payload?.color || '#0dbedc',
-            midiMapping[0][event.note.number]?.payload?.ramp || 10,
+            mapping.payload?.color || '#0dbedc',
+            mapping.payload?.ramp || 10,
             1,
-            midiMapping[0][event.note.number]?.payload?.fade || 220
+            mapping.payload?.fade || 220
           )
         }
         if (midiInput !== input.name) return
@@ -124,8 +135,8 @@ const MIDIListener = () => {
           button: -1
         })
       })
+  
       input.addListener('controlchange', (event: any) => {
-        // console.log('MIDI Event:', event)
         if (event.controller.number === midiEvent.button && midiEvent.name === input.name) return
         if (event.value === 1) {
           setMidiEvent({
@@ -133,8 +144,10 @@ const MIDIListener = () => {
             note: 'CTRL',
             button: event.controller.number
           })
-          if (midiMapping[0][event.controller.number]?.command !== undefined) {
-            handleButtonPress(midiMapping[0][event.controller.number]?.command!, midiMapping[0][event.controller.number].payload)
+  
+          const mapping = getMappingByButtonNumber(event.controller.number)
+          if (mapping?.command !== undefined) {
+            handleButtonPress(mapping.command, mapping.payload)
           }
         } else {
           setMidiEvent({
@@ -145,64 +158,66 @@ const MIDIListener = () => {
         }
       })
     }
-
-
+  
     const enableWebMidi = () => {
       WebMidi.enable({
         sysex: true,
         callback: (err: any) => {
           if (err) {
-            console.error('WebMidi could not be enabled:', err);
-            alert('Please re-grant MIDI permissions to use this feature.');
+            console.error('WebMidi could not be enabled:', err)
+            alert('Please re-grant MIDI permissions to use this feature.')
           } else {
-            const { inputs, outputs } = WebMidi;
-            setMidiInputs(inputs.map((input) => input.name));
-            setMidiOutputs(outputs.map((output) => output.name));
-            if (midiInput === '') setMidiInput(inputs[inputs.length - 1]?.name);
-            if (midiOutput === '') setMidiOutput(outputs[inputs.length - 1]?.name);
-            const output = outputs[inputs.length - 1];
-  
-            Object.entries(midiMapping[0]).forEach(([key, value]) => {
+            const { inputs, outputs } = WebMidi
+            setMidiInputs(inputs.map((input) => input.name))
+            setMidiOutputs(outputs.map((output) => output.name))
+            if (midiInput === '') setMidiInput(inputs[inputs.length - 1]?.name)
+            if (midiOutput === '') setMidiOutput(outputs[inputs.length - 1]?.name)
+            const output = outputs[inputs.length - 1]
+    
+            Object.entries(midiMapping[0]).forEach(([_key, value]) => {
+              const buttonNumber = value.buttonNumber
               if (value.command !== 'scene' && value.command !== 'none') {
                 if (output) {
                   try {
-                    output.send([0x90, parseInt(key), parseInt(value.colorCommand, 16) || 99]);
+                    output.send([0x90, buttonNumber, parseInt(value.colorCommand, 16) || 99])
                   } catch (error) {
-                    console.error('Error sending MIDI message:', error);
-                  }                  
+                    console.error('Error sending MIDI message:', error)
+                  }
                 }
               } else if (value.command === 'scene') {
                 if (output) {
                   try {
-                    output.send([0x90, parseInt(key), parseInt(value.colorSceneInactive, 16) || 60]);
+                    output.send([0x90, buttonNumber, parseInt(value.colorSceneInactive, 16) || 60])
                   } catch (error) {
-                    console.error('Error sending MIDI message:', error);
-                  }                  
+                    console.error('Error sending MIDI message:', error)
+                  }
                 }
               }
-            });
+            })
+    
             if (inputs.length > 0) {
               inputs.forEach((input) => {
-                handleMidiInput(input);
-              });
+                handleMidiInput(input)
+              })
             }
           }
         }
-      });
-    };
+      })
+    }
+    
+    enableWebMidi()
+    
   
-    enableWebMidi();
 
     const handleWebsockets = (event: any) => {
       const output = WebMidi.getOutputByName(midiOutput)
-
-      // if (output) setAllButtonsToBlack(output as any)
-
+    
       Object.entries(midiMapping[0]).forEach(([key, value]) => {
+        const buttonNumber = value.buttonNumber
         if (value.command !== 'scene' && value.command !== 'none') {
           if (output) {
             try {
-              output.send([parseInt(`0x${value.typeCommand}`) || 0x90, parseInt(key), parseInt(value.colorCommand, 16) || 99])
+              output.send([parseInt(`0x${value.typeCommand}`) || 0x90, buttonNumber, parseInt(value.colorCommand, 16) || 99])
             } catch (error) {
               console.error('Error sending MIDI message:', error)
             }
@@ -210,58 +225,55 @@ const MIDIListener = () => {
         } else if (value.command === 'scene') {
           if (output) {
             try {
-              output.send([parseInt(`0x${value.typeSceneInactive}`) || 0x90, parseInt(key), parseInt(value.colorSceneInactive, 16) || 60])
+              output.send([parseInt(`0x${value.typeSceneInactive}`) || 0x90, buttonNumber, parseInt(value.colorSceneInactive, 16) || 60])
             } catch (error) {
               console.error('Error sending MIDI message:', error)
             }
           }
         }
       })
-      
+    
       try {
         if (event.type === 'scene_activated') {
           const { scene_id } = event.detail
           Object.keys(scenes).forEach((key) => {
             const scene = scenes[key]
-            const buttonNumber = parseInt(
-              scene.scene_midiactivate.split('buttonNumber: ')[1],
-              10
-            )
+            const buttonNumber = parseInt(scene.scene_midiactivate.split('buttonNumber: ')[1], 10)
             if (key === scene_id) {
               if (output) {
-                // output?.send([0xb0, 0x00, 0x00])
                 if (!Number.isNaN(buttonNumber)) {
-                  output?.send([ parseInt(`0x${midiMapping[0][buttonNumber]?.typeSceneActive}`) || 0x90, buttonNumber, parseInt(midiMapping[0][buttonNumber]?.colorSceneActive || '1E', 16)])
+                  output.send([parseInt(`0x${midiMapping[0][buttonNumber]?.typeSceneActive}`) || 0x90, buttonNumber, parseInt(midiMapping[0][buttonNumber]?.colorSceneActive || '1E', 16)])
                 }
               } else {
                 console.error('No MIDI output devices found')
               }
             } else {
               if (output) {
-                // output?.send([0xb0, 0x00, 0x00])
                 if (!Number.isNaN(buttonNumber)) {
-                  output?.send([parseInt(`0x${midiMapping[0][buttonNumber]?.typeSceneInactive}`) || 0x90, buttonNumber, parseInt(midiMapping[0][buttonNumber]?.colorSceneInactive || '3C', 16)])
+                  output.send([parseInt(`0x${midiMapping[0][buttonNumber]?.typeSceneInactive}`) || 0x90, buttonNumber, parseInt(midiMapping[0][buttonNumber]?.colorSceneInactive || '3C', 16)])
                 }
               } else {
                 console.error('No MIDI output devices found')
               }
-            }            
+            }
           })
         }
       } catch (error) {
         console.error('Error parsing websocket message:', error)
       }
     }
+    
     document.addEventListener('scene_activated', handleWebsockets)
     return () => {
       document.removeEventListener('scene_activated', handleWebsockets)
     }
+    
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scenes, sceneDialogOpen, midiInitialized])
 
   useEffect(() => {
     return () => {
-      WebMidi.disable();
+      WebMidi.disable()
     }
   }, [])
 
@@ -281,7 +293,8 @@ const MIDIListener = () => {
         [buttonNumber]: {
           ...mapping[0][buttonNumber],
           command: 'scene',
-          payload: { scene: key }
+          payload: { scene: key },
+          buttonNumber: buttonNumber
         }
       }
     })
diff --git a/src/store/ui/storeMidi.tsx b/src/store/ui/storeMidi.tsx
index 46e7f2b8..d98a9486 100644
--- a/src/store/ui/storeMidi.tsx
+++ b/src/store/ui/storeMidi.tsx
@@ -10,6 +10,7 @@ export interface IMidiMapping {
   typeSceneInactive?: string
   typeSceneActive?: string
   typeCommand?: string
+  buttonNumber?: number
 }
 
 export interface IDefaultMapping {
@@ -22,16 +23,20 @@ export interface IMapping {
 export const defaultMapping = {
   0: {
     mode: 'command',
-    command: 'play/pause'
+    command: 'play/pause',
+    buttonNumber: 0,
   },
   91: {
     command: 'brightness-up',
+    buttonNumber: 91,
   },
   92: {
     command: 'brightness-down',
+    buttonNumber: 92,
   },
   94: {
     command: 'play/pause',
+    buttonNumber: 94,
   },
 } as IDefaultMapping