add widget: Melbank Graph: ctrl+alt+m

src/components/Integrations/Spotify/Widgets/MGraphFlotaing/MGraphFloating.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@mui/material'
+
+import useStyle from './MgFloating.styles'
+import MgFloating from './MgFloating'
+import MGraph from '../../../../MGraph'
+
+const MGraphFloating = () => {
+  const classes = useStyle()
+
+  return (
+    <Box component={MgFloating}>
+      <div className={classes.Widget}>
+        <Box
+          bgcolor="#111"
+          height={50}
+          alignItems="center"
+          justifyContent="center"
+          display="flex"
+        >
+          Audio Graph
+        </Box>
+        <MGraph />
+      </div>
+    </Box>
+  )
+}
+
+export default MGraphFloating

src/components/Integrations/Spotify/Widgets/MGraphFlotaing/MgFloating.styles.tsx

@@ -0,0 +1,46 @@
+import { makeStyles } from '@mui/styles'
+
+const useStyles = makeStyles(() => ({
+  Widget: {
+    padding: 0,
+    overflow: 'hidden',
+    borderRadius: 16,
+    width: 960,
+    maxWidth: '100%',
+    margin: '0',
+    position: 'relative',
+    zIndex: 1,
+    backgroundColor: '#2229',
+    backdropFilter: 'blur(40px)',
+    '@media (max-width: 720px)': {
+      '&&': {
+        width: 400
+      }
+    },
+    '&.small': {
+      '&&': {
+        width: 400
+      }
+    }
+  }
+}))
+
+export const VolSliderStyles = {
+  color: '#fff',
+  '& .MuiSlider-track': {
+    border: 'none'
+  },
+  '& .MuiSlider-thumb': {
+    width: 16,
+    height: 16,
+    backgroundColor: '#fff',
+    '&:before': {
+      boxShadow: '0 4px 8px rgba(0,0,0,0.4)'
+    },
+    '&:hover, &.Mui-focusVisible, &.Mui-active': {
+      boxShadow: 'none'
+    }
+  }
+}
+
+export default useStyles

src/components/Integrations/Spotify/Widgets/MGraphFlotaing/MgFloating.tsx

@@ -0,0 +1,29 @@
+import { Rnd } from 'react-rnd'
+import useStore from '../../../../../store/useStore'
+
+const MgFloating = ({ children }: any) => {
+  const mgX = useStore((state) => state.ui.mgX)
+  const setMgX = useStore((state) => state.ui.setMgX)
+  const mgY = useStore((state) => state.ui.mgY)
+  const setMgY = useStore((state) => state.ui.setMgY)
+
+  return (
+    <Rnd
+      size={{ width: 960, height: 'auto' }}
+      position={{ x: mgX, y: mgY }}
+      onDragStop={(e, d) => {
+        setMgX(d.x)
+        setMgY(d.y)
+      }}
+      onResizeStop={(_e, _direction, ref, _delta, position) => {
+        setMgX(position.x)
+        setMgY(position.y)
+      }}
+      style={{ zIndex: 10 }}
+    >
+      {children}
+    </Rnd>
+  )
+}
+
+export default MgFloating

src/pages/Pages.tsx

@@ -32,12 +32,18 @@ import Mp from '../components/Integrations/Spotify/Widgets/Mp/Mp'
 import FrontendPixelsTooSmall from '../components/Dialogs/FrontendPixelsTooSmall'
 import HostManager from '../components/Dialogs/HostManager'
 import Graph from './Graph/Graph'
+import MGraphFloating from '../components/Integrations/Spotify/Widgets/MGraphFlotaing/MGraphFloating'
+import Keybinding from '../components/Integrations/Spotify/Widgets/Keybinding/Keybinding'
 
 const Routings = ({ handleWs }: any) => {
   const theme = useTheme()
   const isElect = isElectron()
+  const keybinding = useStore((state) => state.ui.keybinding)
+  const setKeybinding = useStore((state) => state.ui.setKeybinding)
   const mp = useStore((state) => state.ui.mp)
   const setMp = useStore((state) => state.ui.setMp)
+  const mg = useStore((state) => state.ui.mg)
+  const setMg = useStore((state) => state.ui.setMg)
   const features = useStore((state) => state.features)
   const setFeatures = useStore((state) => state.setFeatures)
   const setShowFeatures = useStore((state) => state.setShowFeatures)
@@ -53,6 +59,8 @@ const Routings = ({ handleWs }: any) => {
 
   useHotkeys(['ctrl+alt+y', 'ctrl+alt+z'], () => setSmartBarOpen(!smartBarOpen))
   useHotkeys(['ctrl+alt+d'], () => setMp(!mp))
+  useHotkeys(['ctrl+alt+m'], () => setMg(!mg))
+  useHotkeys(['ctrl+alt+k', 'ctrl+space'], () => setKeybinding(!keybinding))
   useHotkeys(['ctrl+alt+g'], () => {
     if (window.localStorage.getItem('guestmode') === 'activated') {
       window.localStorage.removeItem('guestmode')
@@ -141,6 +149,8 @@ const Routings = ({ handleWs }: any) => {
           )}
         </Routes>
         {mp && <Mp />}
+        {mg && <MGraphFloating />}
+        {keybinding && <Keybinding />}
         <NoHostDialog />
         <HostManager />
         <FrontendPixelsTooSmall />

src/store/ui/storeUI.tsx

@@ -49,6 +49,33 @@ const storeUI = (set: any) => ({
       false,
       'ui/showHex'
     ),
+  mgX: 50,
+  setMgX: (x: number): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.mgX = x
+      }),
+      false,
+      'ui/mgX'
+    ),
+  mgY: 200,
+  setMgY: (y: number): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.mgY = y
+      }),
+      false,
+      'ui/mgY'
+    ),
+  mg: false,
+  setMg: (mg: boolean): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.mg = mg
+      }),
+      false,
+      'ui/mg'
+    ),
   mp: false,
   setMp: (mp: boolean): void =>
     set(
@@ -58,6 +85,33 @@ const storeUI = (set: any) => ({
       false,
       'ui/mp'
     ),
+  keybindingX: 50,
+  setKeybindingX: (x: number): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.keybindingX = x
+      }),
+      false,
+      'ui/keybindingX'
+    ),
+  keybindingY: 200,
+  setKeybindingY: (y: number): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.keybindingY = y
+      }),
+      false,
+      'ui/keybindingY'
+    ),
+  keybinding: false,
+  setKeybinding: (keybinding: boolean): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.keybinding = keybinding
+      }),
+      false,
+      'ui/keybinding'
+    ),
   latestTag: pkg.version as string,
   setLatestTag: (tag: string): void =>
     set(