Release 2.0.0-beta27

LedFx · Sep 20, 2021 · 30a2cb1 · 30a2cb1
1 parent a1c6096
commit 30a2cb1
Show file tree

Hide file tree

Showing 21 changed files with 1,056 additions and 516 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ledfx",
-  "version": "2.0.0-beta25",
+  "version": "2.0.0-beta27",
   "description": "LedFx - BladeMOD",
   "author": "YeonV aka Blade",
   "private": true,

diff --git a/src/AppThemes.jsx b/src/AppThemes.jsx
@@ -1,7 +1,49 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 
 
-export const BladeDarkTheme = createMuiTheme({
+export const BladeDarkGreenTheme = createTheme({
+  palette: {
+    type: 'dark',
+    primary: {
+      main: '#1db954',
+    },
+    secondary: {
+      main: '#1db954',
+    },
+    background: { 
+      default: '#030303', 
+      paper: '#151515' 
+    },
+  },
+  props: {
+    MuiCard: {
+      variant: 'outlined',
+    },
+  },
+});
+
+export const BladeDarkBlueTheme = createTheme({
+  palette: {
+    type: 'dark',
+    primary: {
+      main: '#0dbedc',
+    },
+    secondary: {
+      main: '#0dbedc',
+    },
+    background: { 
+      default: '#030303', 
+      paper: '#151515' 
+    },
+  },
+  props: {
+    MuiCard: {
+      variant: 'outlined',
+    },
+  },
+});
+
+export const BladeDarkTheme = createTheme({
   palette: {
     type: 'dark',
     primary: {
@@ -22,7 +64,7 @@ export const BladeDarkTheme = createMuiTheme({
   },
 });
 
-export const BladeLightTheme = createMuiTheme({
+export const BladeLightTheme = createTheme({
   palette: {
     type: 'light',
     primary: {

diff --git a/src/components/AddButton.jsx b/src/components/AddButton.jsx
@@ -65,7 +65,7 @@ const AddButton = ({ className, style, setBackdrop }) => {
     }
 
     return (
-        <div className={className} style={style}>
+        <div className={className} style={{zIndex: 5, ...style}}>
             <Fab color="primary" aria-label="add" onClick={handleClick}>
                 <Add />
             </Fab>

diff --git a/src/components/Bars/BarBottom.styles.jsx b/src/components/Bars/BarBottom.styles.jsx
@@ -6,6 +6,7 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     position: 'fixed',
     bottom: 0,
+    zIndex: 4,
     background: theme.palette.background.light,
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.sharp,

diff --git a/src/components/Bars/BarLeft.jsx b/src/components/Bars/BarLeft.jsx
@@ -66,6 +66,7 @@ const LeftBar = () => {
             } button key={virtuals[d].config.name}>
               <ListItemIcon>
                 <BladeIcon
+                style={{ position: 'relative' }}
                   colorIndicator={!(pathname.split('/').length === 3 && pathname.split('/')[1] === 'device' && pathname.split('/')[2] === d) && Object.keys(virtuals[d].effect).length > 0}
                   name={virtuals && virtuals[d] && virtuals[d].config && virtuals[d].config.icon_name && virtuals[d].config.icon_name} />
               </ListItemIcon>

diff --git a/src/components/Dialogs/AddDeviceDialog.jsx b/src/components/Dialogs/AddDeviceDialog.jsx
@@ -136,7 +136,7 @@ const AddDeviceDialog = () => {
         Object.keys(initial.config).length === 0 &&
         initial.config.constructor === Object
           ? `Add ${deviceType.toUpperCase()} Device`
-          : `Edit ${deviceType.toUpperCase()} Settings`}
+          : `${deviceType.toUpperCase()} Config`}
       </DialogTitle>
       <DialogContent>
         <DialogContentText>

diff --git a/src/components/Dialogs/AddVirtualDialog.jsx b/src/components/Dialogs/AddVirtualDialog.jsx
@@ -105,7 +105,7 @@ const AddVirtualDialog = () => {
         Object.keys(initial.config).length === 0 &&
         initial.config.constructor === Object
           ? "Add Virtual Device"
-          : "Edit Virtual Settings"}
+          : "Settings"}
       </DialogTitle>
       <DialogContent>
         <DialogContentText>

diff --git a/src/components/Dialogs/_AddSegmentDialog.jsx b/src/components/Dialogs/_AddSegmentDialog.jsx
@@ -8,20 +8,7 @@ import BladeFrame from '../SchemaForm/BladeFrame';
 
 function ConfirmationDialogRaw(props) {
     const { onClose, value: valueProp, open, ...other } = props;
-    const [value, setValue] = React.useState(valueProp);
-    const radioGroupRef = React.useRef(null);
-
-    // React.useEffect(() => {
-    //     if (!open) {
-    //         setValue(valueProp);
-    //     }
-    // }, [valueProp, open]);
-
-    const handleEntering = () => {
-        // if (radioGroupRef.current != null) {
-        //     radioGroupRef.current.focus();
-        // }
-    };
+    const [value, setValue] = React.useState(valueProp);  
 
     const handleCancel = () => {
         onClose();
@@ -36,13 +23,10 @@ function ConfirmationDialogRaw(props) {
     };
 
     delete other.deviceList;
-    // console.log(props.deviceList)
     return (
         <Dialog
-            disableBackdropClick
             disableEscapeKeyDown
             maxWidth="xs"
-            onEntering={handleEntering}
             aria-labelledby="confirmation-dialog-title"
             open={open}
             {...other}
@@ -65,22 +49,6 @@ function ConfirmationDialogRaw(props) {
                         ))}
                     </Select>
                 </BladeFrame>
-                {/* <RadioGroup
-                    ref={radioGroupRef}
-                    aria-label="ringtone"
-                    name="ringtone"
-                    value={""}
-                    onChange={handleChange}
-                >
-                    {Object.keys(props.deviceList).map(device => (
-                        <FormControlLabel
-                            value={props.deviceList[device].id}
-                            key={props.deviceList[device].id}
-                            control={<Radio />}
-                            label={props.deviceList[device].config.name}
-                        />
-                    ))}
-                </RadioGroup> */}
             </DialogContent>
             <DialogActions>
                 <Button autoFocus onClick={handleCancel} color="primary">

diff --git a/src/components/Icons/YZ-Logo2.jsx b/src/components/Icons/YZ-Logo2.jsx
@@ -1,69 +1,69 @@
 import React from 'react';
 
-export const Bottom = ({ currentColor, stroke, strokeWidth, style }) => <path style={style} fill={currentColor} stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="bevel" strokeMiterlimit="22.9256" d="M22751.73 30209.19l-4508.17 1605.87c6186.94,5970.28 15978.27,5978.16 22158.89,1.34l-4508.57 -1606.03c-3977.4,2650.87 -9163.74,2648.16 -13142.15,-1.18z" />
-export const Top = ({ currentColor, stroke, strokeWidth, style }) => <path style={style} fill={currentColor} stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="bevel" strokeMiterlimit="22.9256" d="M22802.89 10449.6l-4523.5 -1606.47c6163.23,-5924.29 15916.39,-5917.68 22087.23,-1.33l-4523.9 1606.62c-3958.6,-2605.67 -9083.15,-2607.37 -13039.83,1.18z" />
-export const Y = ({ currentColor, stroke, strokeWidth, style }) => <polygon style={style} fill={currentColor} stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="bevel" strokeMiterlimit="22.9256" points="11616.1,8249.12 11616.1,22417.04 24322.12,22417.04 24322.12,23326 15789.82,26458.12 15789.82,24700.98 11610.12,26235.29 11610.12,32404.98 28502.47,26387.7 28502.47,14246.16 22571.24,12139.74 22571.24,16618.6 24322.12,17196.7 24322.12,18147.8 15830.96,18147.8 15830.96,14182.39 17568.29,14856.66 17568.29,10363 " />
-export const Z = ({ currentColor, stroke, strokeWidth, style }) => <polygon style={style} fill={currentColor} stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="bevel" strokeMiterlimit="22.9256" points="47093.19,8225.33 30139.81,14246.16 30139.81,16475.31 36517.25,16475.31 42851.53,14225.75 42851.53,18170.76 30139.81,18170.76 30139.81,26387.7 47093.19,32426.72 47093.19,24108.92 42820.02,24108.92 42820.02,24487.97 42820.02,26458.31 34335.23,23420.94 34335.23,22451.01 47093.19,22451.01 " />
+export const Bottom = ({ stroke, strokeWidth, style }) => <path style={style} fill="currentColor" stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="bevel" strokeMiterlimit="22.9256" d="M22751.73 30209.19l-4508.17 1605.87c6186.94,5970.28 15978.27,5978.16 22158.89,1.34l-4508.57 -1606.03c-3977.4,2650.87 -9163.74,2648.16 -13142.15,-1.18z" />
+export const Top = ({ stroke, strokeWidth, style }) => <path style={style} fill="currentColor" stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="bevel" strokeMiterlimit="22.9256" d="M22802.89 10449.6l-4523.5 -1606.47c6163.23,-5924.29 15916.39,-5917.68 22087.23,-1.33l-4523.9 1606.62c-3958.6,-2605.67 -9083.15,-2607.37 -13039.83,1.18z" />
+export const Y = ({ stroke, strokeWidth, style }) => <polygon style={style} fill="currentColor" stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="bevel" strokeMiterlimit="22.9256" points="11616.1,8249.12 11616.1,22417.04 24322.12,22417.04 24322.12,23326 15789.82,26458.12 15789.82,24700.98 11610.12,26235.29 11610.12,32404.98 28502.47,26387.7 28502.47,14246.16 22571.24,12139.74 22571.24,16618.6 24322.12,17196.7 24322.12,18147.8 15830.96,18147.8 15830.96,14182.39 17568.29,14856.66 17568.29,10363 " />
+export const Z = ({ stroke, strokeWidth, style }) => <polygon style={style} fill="currentColor" stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="bevel" strokeMiterlimit="22.9256" points="47093.19,8225.33 30139.81,14246.16 30139.81,16475.31 36517.25,16475.31 42851.53,14225.75 42851.53,18170.76 30139.81,18170.76 30139.81,26387.7 47093.19,32426.72 47093.19,24108.92 42820.02,24108.92 42820.02,24487.97 42820.02,26458.31 34335.23,23420.94 34335.23,22451.01 47093.19,22451.01 " />
 
 export const YZLogo2Bottom = ({
-  stroke, strokeWidth, strokeLinejoin, strokeLinecap, currentColor = '#fff', style
+  stroke, strokeWidth, strokeLinejoin, strokeLinecap, style
 }) => (
   <svg style={{ transform: 'scale(0.025)', marginTop: '8px', transformOrigin: 'top left', ...style }} xmlns="http://www.w3.org/2000/svg" width="594mm" height="420mm" version="1.1" shapeRendering="geometricPrecision" textRendering="geometricPrecision" imageRendering="optimizeQuality" fillRule="evenodd" clipRule="evenodd"
     viewBox="0 0 59400 42000">
     <g id="_0" style={{ transformOrigin: 'center', transform: 'scale(1.3' }}>
       <g id="YZLogo2Bottom">
-        <Bottom currentColor={currentColor} stroke={stroke} strokeWidth={strokeWidth} />
+        <Bottom stroke={stroke} strokeWidth={strokeWidth} />
       </g>
     </g>
   </svg>
 );
 export const YZLogo2Top = ({
-  stroke, strokeWidth, strokeLinejoin, strokeLinecap, currentColor = '#fff', style
+  stroke, strokeWidth, strokeLinejoin, strokeLinecap, style
 }) => (
   <svg style={{ transform: 'scale(0.025)', marginTop: '8px', transformOrigin: 'top left', ...style }} xmlns="http://www.w3.org/2000/svg" width="594mm" height="420mm" version="1.1" shapeRendering="geometricPrecision" textRendering="geometricPrecision" imageRendering="optimizeQuality" fillRule="evenodd" clipRule="evenodd"
     viewBox="0 0 59400 42000">
     <g id="_0" style={{ transformOrigin: 'center', transform: 'scale(1.3' }}>
       <g id="YZLogo2Top">
-        <Top currentColor={currentColor} stroke={stroke} strokeWidth={strokeWidth} />
+        <Top stroke={stroke} strokeWidth={strokeWidth} />
       </g>
     </g>
   </svg>
 );
 export const YZLogo2Y = ({
-  stroke, strokeWidth, strokeLinejoin, strokeLinecap, currentColor = '#fff', style
+  stroke, strokeWidth, strokeLinejoin, strokeLinecap, style
 }) => (
   <svg style={{ transform: 'scale(0.03)', marginTop: '8px', transformOrigin: 'top left', ...style }} xmlns="http://www.w3.org/2000/svg" width="594mm" height="420mm" version="1.1" shapeRendering="geometricPrecision" textRendering="geometricPrecision" imageRendering="optimizeQuality" fillRule="evenodd" clipRule="evenodd"
     viewBox="0 0 29700 42000">
     <g id="_0" style={{ transformOrigin: 'center', transform: 'scale(1.3' }}>
       <g id="YZLogo2Y">
-        <Y currentColor={currentColor} stroke={stroke} strokeWidth={strokeWidth} />
+        <Y stroke={stroke} strokeWidth={strokeWidth} />
       </g>
     </g>
   </svg>
 );
 export const YZLogo2Z = ({
-  stroke, strokeWidth, strokeLinejoin, strokeLinecap, currentColor = '#fff', style
+  stroke, strokeWidth, strokeLinejoin, strokeLinecap, style
 }) => (
   <svg style={{ transform: 'scale(0.035)', marginTop: '8px', transformOrigin: 'top left', ...style }} xmlns="http://www.w3.org/2000/svg" width="594mm" height="420mm" version="1.1" shapeRendering="geometricPrecision" textRendering="geometricPrecision" imageRendering="optimizeQuality" fillRule="evenodd" clipRule="evenodd"
     viewBox="29700 0 59400 42000">
     <g id="_0" style={{ transformOrigin: 'center', transform: 'scale(1.3' }}>
       <g id="YZLogo2Z">
-        <Z currentColor={currentColor} stroke={stroke} strokeWidth={strokeWidth} />
+        <Z stroke={stroke} strokeWidth={strokeWidth} />
       </g>
     </g>
   </svg>
 );
 export const YZLogo2 = ({
-  stroke, strokeWidth, strokeLinejoin, strokeLinecap, currentColor = '#fff', style
+  stroke, strokeWidth, strokeLinejoin, strokeLinecap, style
 }) => (
   <svg style={{ marginTop: '8px', transformOrigin: 'top left', ...style }} xmlns="http://www.w3.org/2000/svg" width="594mm" height="420mm" version="1.1" shapeRendering="geometricPrecision" textRendering="geometricPrecision" imageRendering="optimizeQuality" fillRule="evenodd" clipRule="evenodd"
     viewBox="0 0 59400 42000">
     <g id="_0" style={{ transformOrigin: 'center', transform: 'scale(1.3' }}>
       <g id="YZLogo2">
-        <Z currentColor={currentColor} stroke={stroke} strokeWidth={strokeWidth} />
-        <Y currentColor={currentColor} stroke={stroke} strokeWidth={strokeWidth} />
-        <Top currentColor={currentColor} stroke={stroke} strokeWidth={strokeWidth} />
-        <Bottom currentColor={currentColor} stroke={stroke} strokeWidth={strokeWidth} />
+        <Z stroke={stroke} strokeWidth={strokeWidth} />
+        <Y stroke={stroke} strokeWidth={strokeWidth} />
+        <Top stroke={stroke} strokeWidth={strokeWidth} />
+        <Bottom stroke={stroke} strokeWidth={strokeWidth} />
       </g>
     </g>
   </svg>

diff --git a/src/components/Integrations/Spotify/SpotifyWidget.jsx b/src/components/Integrations/Spotify/SpotifyWidget.jsx
@@ -15,18 +15,22 @@ const SpotifyWidget = ({
   const setSpotifyURL = useStore((state) => state.setSpotifyEmbedUrl);
 
   return (
-    <>         
-      <Fab size="small" color="secondary" onClick={() => setSpotifyEnabled(!spotifyEnabled)} style={{ position: 'fixed', bottom: spotifyEnabled ? spotifyExpanded ? 363 : 143: 65, right: 10, zIndex: 2 }} >
-        <BladeIcon name="mdi:spotify" />
-      </Fab>        
+    <>
+      <Fab size="small" color="secondary" onClick={() => setSpotifyEnabled(!spotifyEnabled)} style={{ position: 'fixed', bottom: spotifyEnabled ? spotifyExpanded ? 363 : 143 : 65, right: 10, zIndex: 2 }} >
+        <BladeIcon name="mdi:spotify" style={{
+          marginLeft: '50%',
+          marginTop: '50%',
+          transform: 'translate(-43%, -43%)'
+        }} />
+      </Fab>
       {spotifyEnabled && <>
-      <div style={{ position: 'fixed', display: 'flex', bottom: spotifyExpanded ? 258 : 38, right: 36, zIndex: 2 }}>
-        <ChangeSpotifyURLDialog spotifyURL={spotifyURL} setSpotifyURL={setSpotifyURL} />
-        <IconButton onClick={() => setSpotifyExpanded(!spotifyExpanded)} >
-          <QueueMusic />
-        </IconButton>
-      </div>
-      <iframe src={`${spotifyURL.split('?')[0].replace('.com/embed/', '.com/').replace('.com/', '.com/embed/')}?theme=0`} width="100%" height={spotifyEnabled ? spotifyExpanded ? 300 : 80 : 0} style={{ position: 'fixed', bottom: 0, left: 0 }} frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
+        <div style={{ position: 'fixed', display: 'flex', bottom: spotifyExpanded ? 258 : 38, right: 36, zIndex: 2 }}>
+          <ChangeSpotifyURLDialog spotifyURL={spotifyURL} setSpotifyURL={setSpotifyURL} />
+          <IconButton onClick={() => setSpotifyExpanded(!spotifyExpanded)} >
+            <QueueMusic />
+          </IconButton>
+        </div>
+        <iframe src={`${spotifyURL.split('?')[0].replace('.com/embed/', '.com/').replace('.com/', '.com/embed/')}?theme=0`} width="100%" height={spotifyEnabled ? spotifyExpanded ? 300 : 80 : 0} style={{ position: 'fixed', bottom: 0, left: 0 }} frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
       </>}
     </>
   )

diff --git a/src/components/SchemaForm/BladeEffectDropDown.jsx b/src/components/SchemaForm/BladeEffectDropDown.jsx
@@ -102,7 +102,7 @@ const BladeEffectDropDown = ({ effects, virtual }) => {
           id="grouped-select"
           className={classes.FormSelect}
         >
-          <MenuItem value="">
+          <MenuItem value="" disabled>
             <em>None</em>
           </MenuItem>
           {effects

diff --git a/src/components/SchemaForm/BladeEffectSchemaForm.jsx b/src/components/SchemaForm/BladeEffectSchemaForm.jsx
@@ -89,7 +89,7 @@ const BladeEffectSchemaForm = (props) => {
       {parseInt(window.localStorage.getItem('BladeMod')) > 10 && (
         <Fab
           onClick={handleClickOpen}
-          variant="round"
+          variant="circular"
           color="primary"
           size="small"
           style={{ position: 'absolute', right: '1rem', top: '1rem' }}