Release 2.0.100-b1

YeonV · Sep 1, 2024 · 8d24394 · 8d24394
1 parent f89ad20
commit 8d24394
Show file tree

Hide file tree

Showing 24 changed files with 974 additions and 361 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ledfx",
-  "version": "2.0.99-b9",
+  "version": "2.0.100-b1",
   "description": "LedFx v2 - BladeMOD",
   "author": "YeonV aka Blade",
   "private": true,
@@ -51,6 +51,7 @@
     "immer": "10.1.1",
     "is-electron": "^2.2.2",
     "jwt-decode": "^4.0.0",
+    "launchpad-webmidi": "https://github.com/LostInBrittany/launchpad-webmidi.git",
     "notistack": "^3.0.1",
     "oauth-pkce": "0.0.7",
     "prop-types": "^15.8.1",

diff --git a/src/components/Bars/BarBottom.tsx b/src/components/Bars/BarBottom.tsx
@@ -25,7 +25,7 @@ import SpotifyFabFree from '../Integrations/Spotify/SpotifyFabFree'
 import AddButton from '../AddButton/AddButton'
 import YoutubeWidget from '../Integrations/Youtube/YoutubeWidget'
 import SpotifyFabPro from '../Integrations/Spotify/SpotifyFabPro'
-import MIDIListener from '../MidiInput'
+import MIDIListener from '../MidiListener'
 import { drawerWidth, ios } from '../../utils/helpers'
 import EditSceneDialog from '../Dialogs/SceneDialogs/EditSceneDialog'
 import BladeIcon from '../Icons/BladeIcon/BladeIcon'

diff --git a/src/components/Dialogs/AddDeviceDialog.tsx b/src/components/Dialogs/AddDeviceDialog.tsx
@@ -11,7 +11,8 @@ import {
   Select,
   MenuItem,
   Button,
-  Divider
+  Divider,
+  Alert
 } from '@mui/material'
 import useStore from '../../store/useStore'
 import SchemaForm from '../SchemaForm/SchemaForm/SchemaForm'
@@ -171,6 +172,10 @@ const AddDeviceDialog = () => {
           To add a device to LedFx, please first select the type of device you
           wish to add then provide the necessary configuration.
         </DialogContentText>
+        {deviceType === 'launchpad' && <Alert severity='info'>
+          When adding a Lunchpad as a led-output device, 
+          you cannot use it as a MIDI input device at the same time (atm).
+        </Alert>}
         <div className={classes.wrapper}>
           <label>Device Type</label>
           <Select

diff --git a/src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx b/src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx
@@ -26,7 +26,8 @@ import {
   FormControl,
   Avatar,
   useMediaQuery,
-  Autocomplete
+  Autocomplete,
+  IconButton
 } from '@mui/material'
 import { Clear, Undo, NavigateBefore, MusicNote } from '@mui/icons-material'
 import { WebMidi, Input, NoteMessageEvent } from 'webmidi'
@@ -38,6 +39,7 @@ import BladeIcon from '../../Icons/BladeIcon/BladeIcon'
 import TooltipImage from './TooltipImage'
 import TooltipTags from './TooltipTags'
 import TooltipMidi from './TooltipMidi'
+import MidiInputDialog from '../../Midi/MidiInputDialog'
 
 const EditSceneDialog = () => {
   const theme = useTheme()
@@ -56,6 +58,7 @@ const EditSceneDialog = () => {
   const small = useMediaQuery('(max-width: 580px )')
   const xsmall = useMediaQuery('(max-width: 480px )')
 
+
   const { effects } = useStore((state) => state.schemas)
   const scenes = useStore((state) => state.scenes)
   const open = useStore((state) => state.dialogs.addScene?.edit || false)
@@ -799,9 +802,7 @@ const EditSceneDialog = () => {
                               />
                               <Chip
                                 onDelete={() => setMIDIActivate('')}
-                                label={/\((.*?)\)/
-                                  .exec(midiActivate)?.[1]
-                                  .replace('MIDI', '')}
+                                label={/\((.*?)\)/.exec(midiActivate)?.[1].replace(' MIDI', '').trim()}
                                 icon={<BladeIcon name="mdi:midi" />}
                               />
                             </>
@@ -810,6 +811,9 @@ const EditSceneDialog = () => {
                       )
                     }}
                   />
+                  {/\((.*?)\)/.exec(midiActivate)?.[1].replace(' MIDI', '').trim() === 'LPX' && (
+                      <MidiInputDialog />
+                  )}
                 </Stack>
               </>
             ) : (

diff --git a/src/components/Gamepad/Assign.tsx b/src/components/Gamepad/Assign.tsx
@@ -30,6 +30,7 @@ const Assign = ({
   padIndex,
   disabled
 }: any) => {
+  // console.log('mapping', mapping)
   const theme = useTheme()
   const scenes = useStore((state) => state.scenes)
   const commands = {
@@ -72,8 +73,8 @@ const Assign = ({
           // IconComponent={() => null}
           style={{
             color:
-              mapping[padIndex][index]?.command &&
-              mapping[padIndex][index]?.command !== 'none'
+              mapping[padIndex]?.[index]?.command &&
+              mapping[padIndex]?.[index]?.command !== 'none'
                 ? 'white'
                 : 'grey'
           }}
@@ -84,10 +85,10 @@ const Assign = ({
           }}
           labelId="command-select-label"
           label="command"
-          // renderValue={(v) =>
-          //   v === 'scene' ? <Wallpaper sx={{ pr: 4 }} /> : v
-          // }
-          value={mapping[padIndex][index]?.command || 'none'}
+          renderValue={(v) =>
+            v === 'scene' ? <Wallpaper sx={{ pr: 4 }} /> : v
+          }
+          value={mapping[padIndex]?.[index]?.command || 'none'}
           onChange={(e) =>
             setMapping({
               ...mapping,
@@ -114,17 +115,17 @@ const Assign = ({
           ))}
         </Select>
       </FormControl>
-      {mapping[padIndex][index]?.command === 'scene' && (
-        <FormControl sx={{ maxWidth: 150 }} fullWidth>
+      {mapping[padIndex]?.[index]?.command === 'scene' && (
+        <FormControl sx={{ maxWidth: 150, minWidth:150 }} fullWidth>
           <Select
             fullWidth
             disableUnderline
             disabled={disabled}
             // IconComponent={() => null}
             style={{
               color:
-                mapping[padIndex][index]?.payload &&
-                mapping[padIndex][index]?.payload !== 'choose scene'
+                mapping[padIndex]?.[index]?.payload &&
+                mapping[padIndex]?.[index]?.payload !== 'choose scene'
                   ? 'white'
                   : 'grey'
             }}
@@ -136,14 +137,14 @@ const Assign = ({
             }}
             labelId="scene-select-label"
             label="Scene"
-            value={mapping[padIndex][index]?.payload?.scene || 'none'}
+            value={mapping[padIndex]?.[index]?.payload?.scene || 'none'}
             onChange={(e) =>
               setMapping({
                 ...mapping,
                 [padIndex]: {
                   ...mapping[padIndex],
                   [index]: {
-                    ...mapping[padIndex][index],
+                    ...mapping[padIndex]?.[index],
                     payload: { scene: e.target.value }
                   }
                 }
@@ -161,19 +162,19 @@ const Assign = ({
           </Select>
         </FormControl>
       )}
-      {mapping[padIndex][index]?.command === 'one-shot' && (
+      {mapping[padIndex]?.[index]?.command === 'one-shot' && (
         <OneShot
-          defaultColor={mapping[padIndex][index]?.payload?.color}
-          defaultRamp={mapping[padIndex][index]?.payload?.ramp}
-          defaultFate={mapping[padIndex][index]?.payload?.fade}
-          defaultHold={mapping[padIndex][index]?.payload?.hold}
+          defaultColor={mapping[padIndex]?.[index]?.payload?.color}
+          defaultRamp={mapping[padIndex]?.[index]?.payload?.ramp}
+          defaultFate={mapping[padIndex]?.[index]?.payload?.fade}
+          defaultHold={mapping[padIndex]?.[index]?.payload?.hold}
           setPayload={(v: any) =>
             setMapping({
               ...mapping,
               [padIndex]: {
                 ...mapping[padIndex],
                 [index]: {
-                  ...mapping[padIndex][index],
+                  ...mapping[padIndex]?.[index],
                   payload: v
                 }
               }

diff --git a/src/components/Gamepad/Gamepad.tsx b/src/components/Gamepad/Gamepad.tsx
@@ -122,6 +122,45 @@ const Gamepad = ({ setScene, bottom }: any) => {
     }
   })
 
+  function handleButtonPress(command: string, payload?: any) {
+    if (command === 'scene' && payload?.scene) {
+      setScene(payload.scene);
+    } else if (command === 'padscreen') {
+      setOpen(!open);
+    } else if (command === 'smartbar') {
+      setSmartBarPadOpen(!smartBarPadOpen);
+    } else if (command === 'play/pause') {
+      togglePause();
+    } else if (command === 'brightness-up') {
+      setSystemSetting(
+        'global_brightness',
+        Math.min(brightness + 0.1, 1).toFixed(2)
+      );
+    } else if (command === 'brightness-down') {
+      setSystemSetting(
+        'global_brightness',
+        Math.max(brightness - 0.1, 0).toFixed(2)
+      );
+    } else if (command === 'scan-wled') {
+      handleScan();
+    } else if (command === 'copy-to') {
+      setFeatures('streamto', !features.streamto);
+    } else if (command === 'transitions') {
+      setFeatures('transitions', !features.transitions);
+    } else if (command === 'frequencies') {
+      setFeatures('frequencies', !features.frequencies);
+    } else if (command === 'scene-playlist') {
+      toggleScenePLplay();
+    } else if (command === 'one-shot') {
+      oneShotAll(
+        payload?.color || '#0dbedc',
+        payload?.ramp || 10,
+        payload?.hold || 200,
+        payload?.fade || 2000
+      );
+    }
+  }
+
   useEffect(() => {
     if (!blocked) {
       const m = [pad0, pad1, pad2, pad3]
@@ -133,47 +172,9 @@ const Gamepad = ({ setScene, bottom }: any) => {
             mapping[pad.index][i] &&
             mapping[pad.index][i].command &&
             mapping[pad.index][i].command !== 'none'
-          if (test) {
-            if (
-              mapping[pad.index][i].command === 'scene' &&
-              mapping[pad.index][i].payload?.scene
-            ) {
-              setScene(mapping[pad.index][i].payload.scene)
-            } else if (mapping[pad.index][i].command === 'padscreen') {
-              setOpen(!open)
-            } else if (mapping[pad.index][i].command === 'smartbar') {
-              setSmartBarPadOpen(!smartBarPadOpen)
-            } else if (mapping[pad.index][i].command === 'play/pause') {
-              togglePause()
-            } else if (mapping[pad.index][i].command === 'brightness-up') {
-              setSystemSetting(
-                'global_brightness',
-                Math.min(brightness + 0.1, 1).toFixed(2)
-              )
-            } else if (mapping[pad.index][i].command === 'brightness-down') {
-              setSystemSetting(
-                'global_brightness',
-                Math.max(brightness - 0.1, 0).toFixed(2)
-              )
-            } else if (mapping[pad.index][i].command === 'scan-wled') {
-              handleScan()
-            } else if (mapping[pad.index][i].command === 'copy-to') {
-              setFeatures('streamto', !features.streamto)
-            } else if (mapping[pad.index][i].command === 'transitions') {
-              setFeatures('transitions', !features.transitions)
-            } else if (mapping[pad.index][i].command === 'frequencies') {
-              setFeatures('frequencies', !features.frequencies)
-            } else if (mapping[pad.index][i].command === 'scene-playlist') {
-              toggleScenePLplay()
-            } else if (mapping[pad.index][i].command === 'one-shot') {
-              oneShotAll(
-                mapping[pad.index][i].payload?.color || '#0dbedc',
-                mapping[pad.index][i].payload?.ramp || 10,
-                mapping[pad.index][i].payload?.hold || 200,
-                mapping[pad.index][i].payload?.fade || 2000
-              )
-            }
-          } else if (pad.axes[0] === 1 && analogBrightness[0]) {
+            if (test) {
+              handleButtonPress(mapping[pad.index][i].command!, mapping[pad.index][i].payload);
+            } else if (pad.axes[0] === 1 && analogBrightness[0]) {
             setSystemSetting(
               'global_brightness',
               Math.min(brightness + 0.1, 1).toFixed(2)

diff --git a/src/components/Icons/BladeIcon/BladeIcon.interface.tsx b/src/components/Icons/BladeIcon/BladeIcon.interface.tsx
@@ -1,3 +1,5 @@
+import { SxProps, Theme } from '@mui/material'
+
 export interface BladeIconProps {
   /**
    * flag indicator
@@ -32,4 +34,9 @@ export interface BladeIconProps {
    * JSX style
    */
   style?: Record<string, unknown>
+  /**
+   * JSX sx
+   * 
+   */
+  sx?: SxProps<Theme>
 }