Release 2.0.105-b3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ledfx",
-  "version": "2.0.105-b2",
+  "version": "2.0.105-b3",
   "description": "LedFx v2 - BladeMOD",
   "author": "YeonV aka Blade",
   "private": true,
@@ -54,6 +54,7 @@
     "jwt-decode": "^4.0.0",
     "notistack": "^3.0.1",
     "oauth-pkce": "0.0.7",
+    "postcss": "^8.4.47",
     "prop-types": "^15.8.1",
     "qrcode": "^1.5.4",
     "qs": "^6.13.0",
@@ -69,7 +70,6 @@
     "react-otp-input": "^3.1.1",
     "react-rnd": "^10.4.12",
     "react-router-dom": "^6.26.1",
-    "react-screen-wake-lock": "^3.0.2",
     "react-scripts": "5.0.1",
     "react-webcam": "^7.2.0",
     "react-zoom-pan-pinch": "^3.6.1",

src/components/Bars/BarTop.tsx

@@ -35,7 +35,7 @@ import {
 import { styled } from '@mui/styles'
 
 import useStore from '../../store/useStore'
-import { drawerWidth, ios, log } from '../../utils/helpers'
+import { drawerWidth, ios } from '../../utils/helpers'
 import TourDevice from '../Tours/TourDevice'
 import TourScenes from '../Tours/TourScenes'
 import TourSettings from '../Tours/TourSettings'
@@ -48,7 +48,7 @@ import { Ledfx } from '../../api/ledfx'
 import TourHome from '../Tours/TourHome'
 import { backendUrl } from '../../pages/Device/Cloud/CloudComponents'
 import { ledfxThemes } from '../../themes/AppThemes'
-import { useWakeLock } from 'react-screen-wake-lock';
+import useWakeLock from '../../utils/useWakeLook'
 
 export const StyledBadge = styled(Badge)(() => ({
   '& .MuiBadge-badge': {
@@ -229,11 +229,8 @@ const TopBar = () => {
   const coreParams = useStore((state) => state.coreParams)
   const isCC = coreParams && Object.keys(coreParams).length > 0
   const updateNotificationInterval = useStore((state) => state.updateNotificationInterval)
-  const { isSupported, request, release } = useWakeLock({
-    onRequest: () => log('successWakeLock on'),
-    onError: () => log('WakeLock error'),
-    onRelease: () => log('successWakeLock off'),
-  });
+  const { requestWakeLock, releaseWakeLock } = useWakeLock();
+
   const isCreator = localStorage.getItem('ledfx-cloud-role') === 'creator'
   const invisible = () => {
     switch (pathname.split('/')[1]) {
@@ -373,16 +370,16 @@ const TopBar = () => {
   }, [])
 
   useEffect(() => {
-    if (!isSupported) return
 
     if (features.wakelock) {
-      request()
+      requestWakeLock()
     } else {
-      release()
+      releaseWakeLock()
     }
     return () => {
-      release()
+      releaseWakeLock()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [features.wakelock])
 
   return (

src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx

@@ -279,7 +279,7 @@ const EditSceneDialog = () => {
             } else {
               output.send(lp.ledOn(newBtnNumber, 57))
             }
-            if (lastButton.current !== newBtnNumber) {
+            if (lastButton.current !== newBtnNumber && lastButton.current > -1) {
               output.send(lp.ledOff(lastButton.current))
             }       
           }

src/components/Midi/LaunchpadButtonMap.tsx

@@ -293,7 +293,7 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre
                     <Stack sx={{ pl: 2, pr: 1, mb:1 }}>
                         <Select fullWidth disableUnderline defaultValue={'Preconfigured'}>
                             {Object.keys(MidiDevices).map((mType) =>
-                                <>
+                                <Box key={mType}>
                                     <ListSubheader>{mType}</ListSubheader>
                                     {Object.keys(MidiDevices[mType as keyof typeof MidiDevices]).map((model) => 
                                         <MenuItem key={model} 
@@ -314,7 +314,7 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre
                                                 {model}
                                         </MenuItem>
                                     )}
-                                </>
+                                </Box>
                             )}
                         </Select>
                     </Stack>
@@ -414,9 +414,9 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre
             <Stack>
                 <Box sx={{overflowY: 'auto', height: 120}}>
                     {midiLogs.map((log, index) => <Stack key={index} direction={'row'}>
-                        <Typography width={200} variant='caption'>{log.name}</Typography>
-                        <Typography width={50} variant='caption'>{log.note}</Typography>
-                        <Typography width={50} variant='caption'>{log.button}</Typography>
+                        <Typography key={'name' + index} width={200} variant='caption'>{log.name}</Typography>
+                        <Typography key={'note' + index} width={50} variant='caption'>{log.note}</Typography>
+                        <Typography key={'button' + index} width={50} variant='caption'>{log.button}</Typography>
                     </Stack>)}
                 </Box>
                 <Stack direction={'row'}>

src/components/Midi/MidiListener.tsx

@@ -242,9 +242,10 @@ const MIDIListener = () => {
           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)
             const uiButtonNumber = getUiBtnNo(buttonNumber)
             const value = uiButtonNumber && midiMapping[0][uiButtonNumber]
+            if (!value || value.command !== 'scene') return
             if (key === scene_id) {
               sendSceneMidiMessage(output, buttonNumber, value, true)
             } else {

src/utils/useWakeLook.ts

@@ -0,0 +1,32 @@
+import { useState, useCallback } from 'react';
+import { log } from './helpers'
+
+const useWakeLock = () => {
+  const [wakeLock, setWakeLock] = useState<WakeLockSentinel | null>(null);
+
+  const requestWakeLock = useCallback(async () => {
+    try {
+      const wakeLockSentinel = await navigator.wakeLock.request('screen');
+      setWakeLock(wakeLockSentinel);
+      log('successWakeLock on');
+    } catch (err) {
+      console.error('Failed to acquire wake lock:', err);
+    }
+  }, []);
+
+  const releaseWakeLock = useCallback(async () => {
+    if (wakeLock) {
+      try {
+        await wakeLock.release();
+        log('successWakeLock off');
+        setWakeLock(null);
+      } catch (err) {
+        console.error('Failed to release wake lock:', err);
+      }
+    }
+  }, [wakeLock]);
+
+  return { requestWakeLock, releaseWakeLock };
+};
+
+export default useWakeLock;