Release 2.0.0-beta36

YeonV · Dec 23, 2021 · 2c05658 · 2c05658
1 parent 9c965f8
commit 2c05658
Show file tree

Hide file tree

Showing 17 changed files with 530 additions and 290 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ledfx",
-    "version": "2.0.0-beta35b",
+    "version": "2.0.0-beta36",
     "description": "LedFx - BladeMOD",
     "author": "YeonV aka Blade",
     "private": true,

diff --git a/src/App.jsx b/src/App.jsx
@@ -30,6 +30,7 @@ import WaveLines from './components/Icons/waves';
 import useWindowDimensions from './utils/useWindowDimension';
 import { useHotkeys } from 'react-hotkeys-hook'
 import SmartBar from './components/Dialogs/SmartBar';
+import wsNew, { HandleWsNew, WsContextNew } from './utils/WebsocketNew';
 
 export default function App() {
   const classes = useStyles();
@@ -39,11 +40,15 @@ export default function App() {
   const getSchemas = useStore((state) => state.getSchemas);
   const shutdown = useStore((state) => state.shutdown);
   const features = useStore((state) => state.features);
+  const showSnackbar = useStore((state) => state.showSnackbar);
+
   const [open, setOpen] = useState(false)
   useHotkeys('ctrl+alt+y', () => setOpen(!open));
 
   const { height, width } = useWindowDimensions();
 
+  let newBase = !!window.localStorage.getItem('ledfx-newbase')
+
   const ledfxTheme = !!window.localStorage.getItem('ledfx-theme') ?
     window.localStorage.getItem('ledfx-theme')
     : !!window.localStorage.getItem('hassTokens') ? 'DarkBlue'
@@ -67,6 +72,16 @@ export default function App() {
     getSchemas();
   }, [getVirtuals, getSystemConfig, getSchemas]);
 
+  useEffect(() => {
+    if (features['go']) {
+      window.localStorage.setItem('ledfx-newbase', 1)
+      newBase = true
+    } else {
+      window.localStorage.removeItem('ledfx-newbase')
+      newBase = false
+    }    
+  }, [features]);
+
   useEffect(() => {
     initFrontendConfig();
     console.info('%c Ledfx ' + '%c\n       © by Blade  ', 'padding: 10px 40px; color: #ffffff; border-radius: 5px 5px 0 0; background-image:url(https://my.ledfx.app/favicon/favicon-32x32.png); background-color: #800000; background-repeat: no-repeat; background-position: 10% 50%;', 'background: #fff; color: #800000; border-radius: 0 0 5px 5px;padding: 5px 0;');
@@ -85,46 +100,63 @@ export default function App() {
     }
   });
 
+  useEffect(() => {
+    const handleWebsockets = (e) => {
+      showSnackbar({
+        message: e.detail.message,
+        messageType: e.detail.type,
+      });
+    }
+    document.addEventListener("YZNEW", handleWebsockets);
+    return () => {
+      document.removeEventListener("YZNEW", handleWebsockets)
+    }
+  }, []);
+
+
   return (
     <ThemeProvider theme={BladeDarkGreyTheme5}>
       <MuiThemeProvider theme={ledfxThemes[ledfxTheme || 'DarkRed']}>
-        <WsContext.Provider value={ws}>
-          <div className={classes.root} style={{ paddingTop: isElectron() ? '30px' : 0 }}>
-            <CssBaseline />
-            <Router basename={process.env.PUBLIC_URL}>
-              <ScrollToTop />
-              <HandleWs />
-              <MessageBar />
-              <TopBar />
-              <LeftBar />
-              <main
-                className={clsx(classes.content, {
-                  [classes.contentShift]: leftBarOpen,
-                })}
-              >
-                <div className={classes.drawerHeader} />
-                <Switch>
-                  <Route exact path="/connect/:providerName/redirect" component={LoginRedirect} />
-                  <Route exact path="/" component={Home} />
-                  <Route path="/devices" component={Devices} />
-                  <Route path="/device/:virtId" component={Device} />
-                  <Route path="/scenes" component={Scenes} />
-                  <Route path="/integrations" component={Integrations} />
-                  <Route path="/settings" component={Settings} />
-                </Switch>
-                <NoHostDialog />
-                <SmartBar open={open} setOpen={setOpen} />
-              </main>
-              <BottomBar />
-            </Router>
-            {features['waves'] && <WaveLines
-              startColor={ledfxThemes[ledfxTheme || 'DarkRed'].palette.primary.main}
-              stopColor={ledfxThemes[ledfxTheme || 'DarkRed'].palette.accent.main || '#ffdc0f'}
-              width={width - 8}
-              height={height}
-            />}
-          </div>
-        </WsContext.Provider>
+        <WsContextNew.Provider value={wsNew}>
+          <WsContext.Provider value={ws}>
+            <div className={classes.root} style={{ paddingTop: isElectron() ? '30px' : 0 }}>
+              <CssBaseline />
+              <Router basename={process.env.PUBLIC_URL}>
+                <ScrollToTop />
+                {/* {!newBase && <HandleWs />} */}
+                {newBase && <HandleWsNew />}
+                <MessageBar />
+                <TopBar />
+                <LeftBar />
+                <main
+                  className={clsx(classes.content, {
+                    [classes.contentShift]: leftBarOpen,
+                  })}
+                >
+                  <div className={classes.drawerHeader} />
+                  <Switch>
+                    <Route exact path="/connect/:providerName/redirect" component={LoginRedirect} />
+                    <Route exact path="/" component={Home} />
+                    <Route path="/devices" component={Devices} />
+                    <Route path="/device/:virtId" component={Device} />
+                    <Route path="/scenes" component={Scenes} />
+                    <Route path="/integrations" component={Integrations} />
+                    <Route path="/settings" component={Settings} />
+                  </Switch>
+                  <NoHostDialog />
+                  <SmartBar open={open} setOpen={setOpen} />
+                </main>
+                <BottomBar />
+              </Router>
+              {features['waves'] && <WaveLines
+                startColor={ledfxThemes[ledfxTheme || 'DarkRed'].palette.primary.main}
+                stopColor={ledfxThemes[ledfxTheme || 'DarkRed'].palette.accent.main || '#ffdc0f'}
+                width={width - 8}
+                height={height}
+              />}
+            </div>
+          </WsContext.Provider>
+        </WsContextNew.Provider>
       </MuiThemeProvider>
     </ThemeProvider>
   );

diff --git a/src/assets/transitions.gif b/src/assets/transitions.gif
diff --git a/src/components/Bars/BarTop.jsx b/src/components/Bars/BarTop.jsx
@@ -123,13 +123,16 @@ const TopBar = () => {
         setDisconnected(e.detail.isDisconnected)
         if (e.detail.isDisconnected === false) {
           window.localStorage.removeItem('undefined')
-          setDialogOpen(false, true)          
+          setDialogOpen(false, true)
           clearSnackbar()
           if (window.localStorage.getItem("core-init") !== 'initialized') {
-            window.localStorage.setItem("core-init", 'initialized')            
+            window.localStorage.setItem("core-init", 'initialized')
           }
         }
       }
+      if (!!window.localStorage.getItem('ledfx-newbase')) {
+        setDialogOpen(false, true)
+      }
     }
     document.addEventListener("disconnected", handleDisconnect);
     return () => {
@@ -210,7 +213,7 @@ const TopBar = () => {
           </IconButton>
         </div>
 
-        
+
         <Menu
           id="simple-menu"
           anchorEl={anchorEl}
@@ -253,7 +256,7 @@ const TopBar = () => {
                 : pathname.split('/')[1] === 'Devices' ? <TourDevices cally={() => setAnchorEl(null)} />
                   : pathname.split('/')[1] === 'Integrations' ? <TourIntegrations cally={() => setAnchorEl(null)} />
                     : null}
-          <MenuItem  onClick={() => setAnchorEl(null)} component={Link} to={"/Settings"} >
+          <MenuItem onClick={() => setAnchorEl(null)} component={Link} to={"/Settings"} >
             <ListItemIcon>
               <Settings />
             </ListItemIcon>

diff --git a/src/components/Dialogs/DeleteColors.jsx b/src/components/Dialogs/DeleteColors.jsx
@@ -68,7 +68,7 @@ const DeleteColorsDialog = ({dialogOpen, setDialogOpen}) => {
               renderValue={(selected) => selected.join(', ')}
               MenuProps={MenuProps}
             >
-              {[...Object.keys(colors.colors.user),...Object.keys(colors.gradients.user)].map((color) => (
+              {colors.colors && colors.gradients && [...Object.keys(colors.colors.user),...Object.keys(colors.gradients.user)].map((color) => (
                 <MenuItem key={color} value={color} sx={{ background: theme.palette.background.paper, color: theme.palette.text.primary }}>
                   <Checkbox color={"primary"} checked={colorsToDelete.indexOf(color) > -1} />
                   <ListItemText primary={color} />

diff --git a/src/components/Dialogs/SmartBar.jsx b/src/components/Dialogs/SmartBar.jsx
@@ -13,6 +13,7 @@ const SmartBar = ({ open, setOpen }) => {
   const setFeatures = useStore((state) => state.setFeatures);
   const setShowFeatures = useStore((state) => state.setShowFeatures);
   const features = useStore((state) => state.features);
+  const setViewMode = useStore((state) => state.setViewMode);
 
   const filterOptions = createFilterOptions({
     stringify: (option) => Object.keys(option).indexOf('is_device') > -1 ? `device ${option.config.name}` : `scene ${option.name}`
@@ -53,11 +54,11 @@ const SmartBar = ({ open, setOpen }) => {
           }}
           onInputChange={(event, value) => {
             if (value === 'HackedByBlade!') {
-              alert("DevMode")
+              alert("DevMode activated!")
               setFeatures('dev', true)
             }
             if (features['dev']) {
-              if (value === 'clear') { setViewMode('user'); setShowFeatures('streamto', false); setShowFeatures('waves', false);setShowFeatures('effectfilter', false); setShowFeatures('cloud', false); setShowFeatures('wled', false); setShowFeatures('integrations', false); setShowFeatures('spotify', false); setShowFeatures('webaudio', false); setFeatures('streamto', false); setFeatures('waves', false); setFeatures('cloud', false);setFeatures('effectfilter', false); setFeatures('wled', false); setFeatures('integrations', false); setFeatures('spotify', false); setFeatures('webaudio', false); window.localStorage.removeItem('ledfx-theme'); window.localStorage.setItem('BladeMod', 0); window.location.reload() }
+              if (value === 'clear') { setViewMode('user'); setShowFeatures('dev', false); setShowFeatures('go', false); setShowFeatures('streamto', false); setShowFeatures('waves', false);setShowFeatures('effectfilter', false); setShowFeatures('cloud', false); setShowFeatures('wled', false); setShowFeatures('integrations', false); setShowFeatures('spotify', false); setShowFeatures('webaudio', false); setFeatures('streamto', false); setFeatures('go', false); setFeatures('waves', false); setFeatures('cloud', false);setFeatures('effectfilter', false); setFeatures('wled', false); setFeatures('dev', false); setFeatures('integrations', false); setFeatures('spotify', false); setFeatures('webaudio', false); window.localStorage.removeItem('ledfx-theme'); window.localStorage.setItem('BladeMod', 0); window.location.reload() }
               if (value === 'BladeCloud') { setShowFeatures('cloud', true) }
               if (value === 'BladeWled') { setShowFeatures('wled', true) }
               if (value === 'BladeIntegrations') { setShowFeatures('integrations', true) }
@@ -66,9 +67,10 @@ const SmartBar = ({ open, setOpen }) => {
               if (value === 'BladeWaves') { setShowFeatures('waves', true) }
               if (value === 'BladeStreamTo') { setShowFeatures('streamto', true) }
               if (value === 'BladeEffectFilter') { setShowFeatures('effectfilter', true) }
+              if (value === 'BladeGo') { setShowFeatures('go', true) }
               if (value.startsWith('theme:') && ["DarkRed", "DarkOrange", "Light", "DarkGreen", "DarkBlue", "DarkGrey"].indexOf(value.replace('theme:', '')) > -1) { window.localStorage.setItem('ledfx-theme', value.replace('theme:', '')); window.location.reload() }
             }
-            if (value === 'BladeIsYeon') { setViewMode('expert'); setShowFeatures('streamto', true); setShowFeatures('cloud', true);setShowFeatures('effectfilter', true); setShowFeatures('waves', true); setShowFeatures('wled', true); setShowFeatures('integrations', true); setShowFeatures('spotify', true); setShowFeatures('webaudio', true); setFeatures('streamto', true); setFeatures('waves', true); setFeatures('cloud', true); setFeatures('wled', true); setFeatures('integrations', true);setFeatures('effectfilter', true); setFeatures('spotify', true); setFeatures('webaudio', true); window.localStorage.setItem('ledfx-theme', "DarkRed"); window.location.reload() }
+            if (value === 'BladeIsYeon') { setViewMode('expert'); setShowFeatures('dev', true); setShowFeatures('go', true); setShowFeatures('streamto', true); setShowFeatures('cloud', true);setShowFeatures('effectfilter', true); setShowFeatures('waves', true); setShowFeatures('wled', true); setShowFeatures('integrations', true); setShowFeatures('spotify', true); setShowFeatures('webaudio', true); setFeatures('streamto', true); setFeatures('go', true); setFeatures('waves', true); setFeatures('cloud', true); setFeatures('wled', true); setFeatures('integrations', true);setFeatures('effectfilter', true); setFeatures('spotify', true); setFeatures('webaudio', true); window.localStorage.setItem('ledfx-theme', "DarkRed"); window.location.reload() }
 
           }}
           renderOption={(props, option) => (

diff --git a/src/components/SchemaForm/BladeGradientPicker.jsx b/src/components/SchemaForm/BladeGradientPicker.jsx
@@ -9,6 +9,7 @@ import { TextField, Typography, Button } from '@material-ui/core';
 import { Add } from '@material-ui/icons';
 import { log } from '../../utils/helpers';
 import DeleteColorsDialog from '../Dialogs/DeleteColors';
+import { color } from '@mui/system';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -281,12 +282,14 @@ const BladeGradientPicker = ({ col, clr, index, virtual, gradient = false, wrapp
   // const gradients = useStore((state) => state.gradients);
   // const getGradients = useStore((state) => state.getGradients);
   // const addGradient = useStore((state) => state.addGradient);
-
+  // console.log(colors)
   const test = {}
-  Object.entries(colors.gradients.builtin).forEach(([k, g]) => { test[k] = g })
-  Object.entries(colors.gradients.user).forEach(([k, g]) => { test[k] = g })
-  Object.entries(colors.colors.builtin).forEach(([k, g]) => { test[k] = g })
-  Object.entries(colors.colors.user).forEach(([k, g]) => { test[k] = g })
+  if (colors.gradients && colors.colors) {
+    Object.entries(colors.gradients.builtin).forEach(([k, g]) => { test[k] = g })
+    Object.entries(colors.gradients.user).forEach(([k, g]) => { test[k] = g })
+    Object.entries(colors.colors.builtin).forEach(([k, g]) => { test[k] = g })
+    Object.entries(colors.colors.user).forEach(([k, g]) => { test[k] = g })
+  }
 
   const virtuals = useStore((state) => state.virtuals);
   const effectyz = virtual && virtuals[Object.keys(virtuals).find((d) => d === virtual.id)];
@@ -319,15 +322,16 @@ const BladeGradientPicker = ({ col, clr, index, virtual, gradient = false, wrapp
   const open = Boolean(anchorEl);
   const id = open ? 'simple-popper' : undefined;
 
-  const handleAddGradient = (e, v) => {    
-    addColor( {[name]: col} ).then(() => {
+  const handleAddGradient = (e, v) => {
+    addColor({ [name]: col }).then(() => {
       getColors();
     });
   }
 
   useEffect(() => {
     getColors();
   }, [])
+
   return (
     <div className={`${classes.wrapper} step-effect-${index} gradient-picker`} style={{ ...wrapperStyle }}>
       <label className={'MuiFormLabel-root'}>
@@ -364,8 +368,9 @@ const BladeGradientPicker = ({ col, clr, index, virtual, gradient = false, wrapp
             />
             <div style={{ marginTop: 2.5, width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
 
-
-              <Button style={{
+
+              <Button 
+              style={{
                 width: 69,
                 height: 30,
                 borderRadius: 4,
@@ -376,7 +381,11 @@ const BladeGradientPicker = ({ col, clr, index, virtual, gradient = false, wrapp
                 fontSize: 24,
                 marginRight: 16,
                 cursor: 'pointer'
-              }} variant={"outlined"} onClick={() => handleDeleteDialog()} >
+              }} 
+              variant={"outlined"} 
+              onClick={() => handleDeleteDialog()}
+              disabled={colors.length && colors.colors.length && colors.gradients.length && !(Object.keys(colors.colors.user).length > 0) && !Object.keys(colors.gradients.user).length > 0}
+              >
                 -
               </Button>
               <Popover
@@ -406,7 +415,7 @@ const BladeGradientPicker = ({ col, clr, index, virtual, gradient = false, wrapp
                 size="medium"
                 icon={<Add />}
               />
-              
+
 
             </div>
           </>