Release 2.0.100-b9

YeonV · Sep 21, 2024 · af5ae91 · af5ae91
1 parent ffc23f8
commit af5ae91
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ledfx",
-  "version": "2.0.100-b8",
+  "version": "2.0.100-b9",
   "description": "LedFx v2 - BladeMOD",
   "author": "YeonV aka Blade",
   "private": true,

diff --git a/src/components/Icons/Novation.tsx b/src/components/Icons/Novation.tsx
@@ -1,11 +1,15 @@
+import { useTheme } from '@mui/material'
 import { ReactElement } from 'react'
 
-const NovationLogo = (): ReactElement<any, any> => (
-  <svg viewBox="1.85 1.4 128.702 129.2" width="128.702" height="129.2">
+const NovationLogo = (): ReactElement<any, any> => {
+  const theme = useTheme()
+  return (
+  <svg viewBox="1.85 1.4 128.702 129.2" width="23.91" height="24">
     <path
-      style={{ fill: '#fff' }}
+      style={{ fill: theme.palette.mode === 'dark' ? '#fff' : '#000' }}
       d="M 120.55 1.4 L 11.85 1.4 C 6.35 1.4 1.85 5.9 1.85 11.4 L 1.85 120.6 C 1.85 126.1 6.35 130.6 11.85 130.6 L 120.55 130.6 C 126.05 130.6 130.55 126.1 130.55 120.6 L 130.55 11.5 C 130.65 5.9 126.15 1.4 120.55 1.4 Z M 13.25 64.2 L 68.85 8.6 L 95.45 35.3 L 39.85 90.9 L 13.25 64.2 Z M 116.85 74.3 C 115.55 78.7 113.15 82.8 109.45 86.5 L 72.45 123.5 L 45.45 96.5 L 101.05 40.9 L 108.45 48.3 C 112.35 52.2 115.05 56.4 116.55 61 C 117.95 65.4 118.05 69.9 116.85 74.3 Z"
     />
   </svg>
-)
+  )
+}
 export default NovationLogo
diff --git a/src/pages/Home/BladeScene.tsx b/src/pages/Home/BladeScene.tsx
@@ -17,6 +17,7 @@ const BladeScene = ({ onClick }: { onClick: () => void }) => {
     }, {})
 
   const setEffect = useStore((state) => state.setEffect)
+  const clearEffect = useStore((state) => state.clearEffect)
   // const updateEffect = useStore((state) => state.updateEffect)
   const activatePreset = useStore((state) => state.activatePreset)
   const addScene = useStore((state) => state.addScene)
@@ -34,7 +35,7 @@ const BladeScene = ({ onClick }: { onClick: () => void }) => {
   const large = Object.keys(virtuals).filter(
     (v: string) => virtuals[v].pixel_count >= 100
   )
-
+   
   const addBladeScene = () => {
     // if (noAuto) {
     large.map((v) => {
@@ -112,6 +113,7 @@ const BladeScene = ({ onClick }: { onClick: () => void }) => {
   return (
     <Button
       onClick={() => {
+        // await addOffScene()
         addBladeScene()
         onClick()
       }}

diff --git a/src/pages/Home/DbDevices.tsx b/src/pages/Home/DbDevices.tsx
@@ -149,8 +149,17 @@ const DbDevices = () => {
   const graphsMulti = useStore((state) => state.graphsMulti)
   const [fade] = useState(false)
   const showMatrix = useStore((state) => state.showMatrix)
+  const paused = useStore((state) => state.paused)
   const setPixelGraphs = useStore((state) => state.setPixelGraphs)
   const activateDevice = useStore((state) => state.activateDevice)
+  const clearEffect = useStore((state) => state.clearEffect)
+  const togglePause = useStore((state) => state.togglePause)
+  const getVirtuals = useStore((state) => state.getVirtuals)
+
+  const clearAllEffects = async () => {
+    await Promise.all(Object.keys(virtuals).map((v) => clearEffect(v)))
+  }
+
   useEffect(() => {
     if (graphs && graphsMulti) {
       setPixelGraphs(Object.keys(virtuals))
@@ -196,6 +205,7 @@ const DbDevices = () => {
         graphsMulti && (
           <div
             style={{
+              paddingTop: '7px',
               opacity: fade ? 0.2 : 1,
               transitionDuration: fade
                 ? `${virtuals[params.row.id].config.transition_time * 1000 || 1}s`
@@ -235,11 +245,38 @@ const DbDevices = () => {
             : 'Online'
           : virtuals[params.row.id]?.effect?.name
             ? `Effect: ${virtuals[params.row.id]?.effect?.name}`
-            : 'Offline'
+            : params.row.is_device ? 'Offline' : virtuals[params.row.id]?.active ? 'Active' : 'Inactive'
     },
     {
       field: 'actions',
       headerName: 'Actions',
+      renderHeader: () => <Stack direction={'row'} alignItems={'center'} style={{ width: 300 }}>
+          <Stack direction={'row'} alignItems={'center'} style={{ width: 135 }}>
+          <IconButton
+            size="small"
+            onClick={async(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              await togglePause()
+              getVirtuals()
+            }}
+          >
+            {paused ? <PlayArrow /> : <Pause /> }
+          </IconButton>
+          <IconButton
+            size="small"
+            onClick={async(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              await clearAllEffects()
+              getVirtuals()
+            }}
+          >
+            <Clear />
+          </IconButton>
+          </Stack>
+          Actions
+        </Stack>,
       width: 300, // eslint-disable-next-line
       renderCell: (params: GridRenderCellParams) => // eslint-disable-next-line
         devices[Object.keys(devices).find((d) => d === params.row.id) || '']?.online  // eslint-disable-next-line
@@ -248,7 +285,7 @@ const DbDevices = () => {
             : (<DeviceActions virtId={params.row.id} />))  // eslint-disable-next-line
           : virtuals[params.row.id]?.effect.name  // eslint-disable-next-line
             ? (<DeviceActions virtId={params.row.id} effect />) 
-            : (<ReconnectButton onClick={() => activateDevice(params.row.id)} />)
+            : params.row.is_device ? (<ReconnectButton onClick={() => activateDevice(params.row.id)} />) : null
     }
   ]
 
@@ -295,8 +332,14 @@ const DbDevices = () => {
           }}
           sx={{
             borderColor: 'transparent',
+            '& .MuiDataGrid-row': {
+              backgroundColor: theme.palette.mode === 'light' ? theme.palette.background.default + '90' : ''
+            },
             '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
               outline: 'none !important'
+            },
+            '& .MuiDataGrid-row:hover': {
+              cursor: 'pointer'
             }
           }}
         />

diff --git a/src/pages/Home/DbGlobalActions.tsx b/src/pages/Home/DbGlobalActions.tsx
@@ -89,7 +89,7 @@ const DbGlobalActions = () => {
               src={fx}
               alt="wled"
               style={{
-                filter: 'invert(1) brightness(2)',
+                filter: theme.palette.mode=== 'dark' ? 'invert(1) brightness(2)' : '',
                 objectFit: 'cover',
                 marginRight: 8,
                 marginLeft: -8
@@ -126,7 +126,9 @@ const DbGlobalActions = () => {
               src={openrgbLogo}
               alt="wled"
               style={{
-                filter: 'grayscale(100%) brightness(0) invert(1) brightness(2)',
+                filter: theme.palette.mode=== 'dark' 
+                  ? 'grayscale(100%) brightness(0) invert(1) brightness(2)'
+                  : 'grayscale(100%) brightness(0) invert(0) brightness(2)',
                 marginRight: 22,
                 marginLeft: 4
               }}

diff --git a/src/pages/Home/DbScenes.tsx b/src/pages/Home/DbScenes.tsx
@@ -9,8 +9,8 @@ const DbScenes = () => {
   const captivateScene = useStore((state) => state.captivateScene)
   const activateScene = useStore((state) => state.activateScene)
 
-  const handleActivateScene = (e: string) => {
-    activateScene(e)
+  const handleActivateScene = async (e: string) => {
+    await activateScene(e)
     if (scenes[e]?.scene_puturl && scenes[e]?.scene_payload)
       captivateScene(scenes[e]?.scene_puturl, scenes[e]?.scene_payload)
   }

diff --git a/src/pages/Scenes/ScenesMostUsed.tsx b/src/pages/Scenes/ScenesMostUsed.tsx
@@ -21,12 +21,14 @@ export default function ScenesMostUsed({
   // const [mostUsedScenes, setMostUsedScenes] = useState({});
   const mostUsedScenes = useStore((state) => state.mostUsedScenes)
   const setMostUsedScenes = useStore((state) => state.setMostUsedScenes)
+  const getVirtuals = useStore((state) => state.getVirtuals)
 
-  const handleEvent: GridEventListener<'rowClick'> = (params) =>
-    activateScene(
+  const handleEvent: GridEventListener<'rowClick'> = async (params) => {
+    await activateScene(
       Object.keys(scenes).find((s: any) => scenes[s].name === params.row?.name)
     )
-
+    getVirtuals()
+}
   useEffect(() => {
     Object.keys(count).map((key: string) => setMostUsedScenes(key, count[key]))
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -86,7 +88,7 @@ export default function ScenesMostUsed({
             {title}
           </Typography>
         )}
-        <DataGrid
+        <DataGrid        
           onRowClick={handleEvent}
           rowHeight={50}
           columns={db ? columns.filter((c) => c.field !== 'used') : columns}
@@ -116,6 +118,9 @@ export default function ScenesMostUsed({
             borderColor: db ? 'transparent' : theme.palette.divider,
             '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
               outline: 'none !important'
+            },
+            '& .MuiDataGrid-row:hover': {
+              cursor: 'pointer'
             }
           }}
         />

diff --git a/src/pages/Settings/GeneralCard.tsx b/src/pages/Settings/GeneralCard.tsx
@@ -36,10 +36,14 @@ const GeneralCard = () => {
   }
 
   const configDelete = async () => {
-    deleteFrontendConfig()
+    deleteFrontendConfig(true)
     deleteSystemConfig().then(() => {
-      window.location.href = window.location.href
+      setTimeout(() => {
+        window.location.reload()
+      }, 500)
+      window.location.href = window.location.href.split('/#/')[0] + '/#/'
     })
+
   }
 
   const fileChanged = async (e: any) => {

diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -72,15 +72,15 @@ export const swap = (array: any[], i: number, j: number) => {
   return arr
 }
 
-export const deleteFrontendConfig = () => {
+export const deleteFrontendConfig = (skipReload?: boolean) => {
   window.localStorage.removeItem('undefined')
   window.localStorage.removeItem('ledfx-storage')
   window.localStorage.removeItem('ledfx-host')
   window.localStorage.removeItem('ledfx-hosts')
   window.localStorage.removeItem('ledfx-ws')
   window.localStorage.removeItem('ledfx-theme')
   window.localStorage.removeItem('ledfx-frontend')
-  window.location.reload()
+  if (!skipReload ) window.location.reload()
 }
 
 export const initFrontendConfig = () => {