diff --git a/src/components/Midi/LaunchpadButtonMap.tsx b/src/components/Midi/LaunchpadButtonMap.tsx index f506f7f1..ff6b6e53 100644 --- a/src/components/Midi/LaunchpadButtonMap.tsx +++ b/src/components/Midi/LaunchpadButtonMap.tsx @@ -1,5 +1,5 @@ -import { ArrowForwardIos, BrightnessHigh, Collections, Pause, PlayArrow, ViewSidebar, Menu as MenuIcon, Save, Delete, DeleteForever, Visibility, Autorenew, Fullscreen, FullscreenExit } from '@mui/icons-material' -import { Box, Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Stack, Typography, useTheme } from '@mui/material' +import { ArrowForwardIos, BrightnessHigh, Collections, Pause, PlayArrow, ViewSidebar, Menu as MenuIcon, Save, Delete, DeleteForever, Visibility, Autorenew, Fullscreen, FullscreenExit, BugReport } from '@mui/icons-material' +import { Box, Button, Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Stack, Typography, useTheme } from '@mui/material' import BladeIcon from '../Icons/BladeIcon/BladeIcon' import useStore from '../../store/useStore' import Assign from '../Gamepad/Assign' @@ -16,6 +16,12 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre const parentRef = useRef(null); const childRef = useRef(null); const [scale, setScale] = useState(1); + const [midiLogs, setMidiLogs] = useState<{ + name: string; + note: string; + button: number; + }[]>([]) + const [showMidiLogs, setShowMidiLogs] = useState(false) const [showMapping, setShowMapping] = useState(false) const setMidiMappingButtonNumbers = useStore((state) => state.setMidiMappingButtonNumbers) const initMidi = useStore((state) => state.initMidi) @@ -129,198 +135,239 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre // eslint-disable-next-line react-hooks/exhaustive-deps }, []) + useEffect(() => { + if (midiEvent.button === -1) return + setMidiLogs((prev) => [...prev, midiEvent]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [midiEvent]) + return ( <> - - - - - + + + + + + - - - - - - - setShowMapping(!showMapping)}> - - - - - - { - download({ midiMapping }, 'midiMapping.json', 'application/json') - handleClose() - }}> - - - - - { - gotMidiMapping(e) - }} - /> - - - { - setMidiMapping({ 0: defaultMapping } as IMapping) - handleClose() - }}> - - - - - { - setMidiMappingButtonNumbers(LpMapping.LaunchpadX) - setLpType('LPX') - setMidiSceneActiveColor('1E') - setMidiSceneInactiveColor('3C') - setMidiCommandColor('63') - initMidi() - }}> - - - - { - setMidiMappingButtonNumbers(LpMapping.LaunchpadS) - setLpType('LPS') - setMidiSceneActiveColor('3C') - setMidiSceneInactiveColor('0F') - setMidiCommandColor('3E') - initMidi() - }}> - - - - - { - const m = JSON.parse(JSON.stringify(midiMapping)); - Object.keys(m).forEach(mappingKey => { - const nestedMapping = m[parseInt(mappingKey) as keyof typeof m]; - Object.keys(nestedMapping).forEach(key => { - const b = nestedMapping[parseInt(key) as keyof typeof nestedMapping]; - delete b.colorCommand; - delete b.colorSceneActive; - delete b.colorSceneInactive; + + + + + + { + setFullScreen(!fullScreen) + handleClose() + }}> + {fullScreen ? : } + + + { + toggleSidebar() + handleClose() + }}> + + + + + setShowMapping(!showMapping)}> + + + + + { + download({ midiMapping }, 'midiMapping.json', 'application/json') + handleClose() + }}> + + + + + { + gotMidiMapping(e) + }} + /> + + + { + setMidiMapping({ 0: defaultMapping } as IMapping) + handleClose() + }}> + + + + + { + setMidiMappingButtonNumbers(LpMapping.LaunchpadX) + setLpType('LPX') + setMidiSceneActiveColor('1E') + setMidiSceneInactiveColor('3C') + setMidiCommandColor('63') + initMidi() + }}> + + + + { + setMidiMappingButtonNumbers(LpMapping.LaunchpadS) + setLpType('LPS') + setMidiSceneActiveColor('3C') + setMidiSceneInactiveColor('0F') + setMidiCommandColor('3E') + initMidi() + }}> + + + + + { + setShowMidiLogs(!showMidiLogs) + handleClose() + }}> + + + + { + const m = JSON.parse(JSON.stringify(midiMapping)); + Object.keys(m).forEach(mappingKey => { + const nestedMapping = m[parseInt(mappingKey) as keyof typeof m]; + Object.keys(nestedMapping).forEach(key => { + const b = nestedMapping[parseInt(key) as keyof typeof nestedMapping]; + delete b.colorCommand; + delete b.colorSceneActive; + delete b.colorSceneInactive; + }); }); - }); - setMidiMapping(m); - handleClose() - }}> - - - - - + setMidiMapping(m); + handleClose() + }}> + + + + + - - - - {matrix.map((row, rowIndex) => { - return ( - - {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] + + + {matrix.map((row, rowIndex) => { + return ( + + {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 = functionalButtonNumber === -1 ? '#000' : (midiEvent.button === functionalButtonNumber) - ? ( pressedButtonColor || theme.palette.primary.main ) - : btn?.command && - btn?.command === 'scene' && - btn?.payload?.scene === recentScenes[0] - ? getColorFromValue((btn?.colorSceneActive || '1E'), lpType) || '#0f0' - : btn?.command && - btn?.command === 'scene' - ? getColorFromValue((btn?.colorSceneInactive || '07'), lpType) || '#f00' + // Use the buttonNumber from the mapping for functional logic + const functionalButtonNumber = btn?.buttonNumber + const bgColor = functionalButtonNumber === -1 ? '#000' : (midiEvent.button === functionalButtonNumber) + ? ( pressedButtonColor || theme.palette.primary.main ) + : btn?.command && + btn?.command === 'scene' && + btn?.payload?.scene === recentScenes[0] + ? getColorFromValue((btn?.colorSceneActive || '1E'), lpType) || '#0f0' : btn?.command && - btn?.command !== 'none' && rowIndex !== 0 - ? getColorFromValue((btn?.colorCommand || '63'), lpType) || '#ff0' - : rowIndex === 0 || buttonIndex === 8 - ? '#000' - : '#ccc' + btn?.command === 'scene' + ? getColorFromValue((btn?.colorSceneInactive || '07'), lpType) || '#f00' + : btn?.command && + btn?.command !== 'none' && rowIndex !== 0 + ? getColorFromValue((btn?.colorCommand || '63'), lpType) || '#ff0' + : rowIndex === 0 || buttonIndex === 8 + ? '#000' + : '#ccc' - return ( - + return ( + + ) + })} + ) - })} - - ) - })} - - - {sideBarOpen && - {matrix.map((row, rowIndex) => row.map((button, buttonIndex) => { - return ( - - ) - }))} - } + })} + + {sideBarOpen && + {matrix.map((row, rowIndex) => row.map((button, buttonIndex) => { + return ( + + ) + }))} + } + + {showMidiLogs && + + Name + Note + Button + setMidiLogs([])}>Clear Logs + + + + {midiLogs.map((log, index) => + {log.name} + {log.note} + {log.button} + )} + + } - ) }