From 2cf996c865bea0e76aa378198e6d0ee98789e7be Mon Sep 17 00:00:00 2001 From: YeonV Date: Tue, 17 Dec 2024 21:03:00 +0100 Subject: [PATCH] Song Detector --- src/App.tsx | 85 +++--- src/components/AddButton/AddB.styles.tsx | 28 +- src/components/AddButton/AddButton.props.tsx | 1 + src/components/AddButton/AddButton.tsx | 6 + src/components/Dialogs/AddDeviceDialog.tsx | 3 + src/components/Dialogs/AddVirtualDialog.tsx | 4 +- src/components/Dialogs/HostManager.tsx | 27 ++ .../SongDetector/SdFloating.styles.tsx | 47 +++ .../Widgets/SongDetector/SdFloating.tsx | 29 ++ .../Widgets/SongDetector/SongDetector.tsx | 23 ++ .../SongDetector/SongDetectorFloating.tsx | 37 +++ .../Widgets/SpotifyWidgetPro/SpTexter.tsx | 268 +---------------- .../Widgets/SpotifyWidgetPro/SpTexterForm.tsx | 269 ++++++++++++++++++ src/components/SeeDocs/SeeDocs.tsx | 13 + src/pages/Pages.tsx | 5 + src/store/ui/storeSongDectector.tsx | 16 ++ src/store/ui/storeUI.tsx | 27 ++ src/store/useStore.ts | 3 +- 18 files changed, 581 insertions(+), 310 deletions(-) create mode 100644 src/components/Integrations/Spotify/Widgets/SongDetector/SdFloating.styles.tsx create mode 100644 src/components/Integrations/Spotify/Widgets/SongDetector/SdFloating.tsx create mode 100644 src/components/Integrations/Spotify/Widgets/SongDetector/SongDetector.tsx create mode 100644 src/components/Integrations/Spotify/Widgets/SongDetector/SongDetectorFloating.tsx create mode 100644 src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpTexterForm.tsx create mode 100644 src/components/SeeDocs/SeeDocs.tsx create mode 100644 src/store/ui/storeSongDectector.tsx diff --git a/src/App.tsx b/src/App.tsx index c605a4e7..b1396210 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,6 +24,7 @@ export default function App() { const features = useStore((state) => state.features) const protoCall = useStore((state) => state.protoCall) const setEffect = useStore((state) => state.setEffect) + const setCurrentTrack = useStore((state) => state.setCurrentTrack) const setProtoCall = useStore((state) => state.setProtoCall) const setPlatform = useStore((state) => state.setPlatform) const getVirtuals = useStore((state) => state.getVirtuals) @@ -163,47 +164,51 @@ export default function App() { } } else if (proto[1] === 'song') { const v = proto[2] - const virtual = Object.keys(virtuals).find( - (virt) => virtuals[virt].id === v - ) - if (virtual && proto[3].length > 3) { - setEffect( - v, - 'texter2d', - { - gradient: - 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 120, 0) 14%, rgb(255, 200, 0) 28%, rgb(0, 255, 0) 42%, rgb(0, 199, 140) 56%, rgb(0, 0, 255) 70%, rgb(128, 0, 128) 84%, rgb(255, 0, 178) 98%)', - option_2: false, - flip: false, - blur: 0, - flip_horizontal: false, - speed_option_1: 2, - resize_method: 'Fast', - gradient_roll: 0, - alpha: false, - value_option_1: 0.5, - font: 'Blade-5x8', - use_gradient: false, - diag: false, - test: false, - impulse_decay: 0.1, - mirror: false, - flip_vertical: false, - text_effect: 'Side Scroll', - multiplier: 1, - brightness: 1, - text_color: '#ff0000', - background_brightness: 1, - rotate: 0, - dump: false, - option_1: false, - height_percent: 100, - background_color: '#000000', - text: proto[3] - }, - true, - true + if (v === 'ledfxcc' && proto[3].length > 3) { + setCurrentTrack(proto[3]) + } else { + const virtual = Object.keys(virtuals).find( + (virt) => virtuals[virt].id === v ) + if (virtual && proto[3].length > 3) { + setEffect( + v, + 'texter2d', + { + gradient: + 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 120, 0) 14%, rgb(255, 200, 0) 28%, rgb(0, 255, 0) 42%, rgb(0, 199, 140) 56%, rgb(0, 0, 255) 70%, rgb(128, 0, 128) 84%, rgb(255, 0, 178) 98%)', + option_2: false, + flip: false, + blur: 0, + flip_horizontal: false, + speed_option_1: 2, + resize_method: 'Fast', + gradient_roll: 0, + alpha: false, + value_option_1: 0.5, + font: 'Blade-5x8', + use_gradient: false, + diag: false, + test: false, + impulse_decay: 0.1, + mirror: false, + flip_vertical: false, + text_effect: 'Side Scroll', + multiplier: 1, + brightness: 1, + text_color: '#ff0000', + background_brightness: 1, + rotate: 0, + dump: false, + option_1: false, + height_percent: 100, + background_color: '#000000', + text: proto[3] + }, + true, + true + ) + } } } else { showSnackbar( diff --git a/src/components/AddButton/AddB.styles.tsx b/src/components/AddButton/AddB.styles.tsx index 8c3be5a9..249190d0 100644 --- a/src/components/AddButton/AddB.styles.tsx +++ b/src/components/AddButton/AddB.styles.tsx @@ -1,6 +1,14 @@ import type { Theme } from '@mui/material' import { styled } from '@mui/material/styles' -import { Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material' +import { + Menu, + MenuItem, + ListItemIcon, + ListItemText, + Stack, + useTheme, + Typography +} from '@mui/material' import { Send } from '@mui/icons-material' import { forwardRef } from 'react' import { makeStyles } from '@mui/styles' @@ -49,12 +57,26 @@ export const MenuLine = forwardRef( const { icon = , name = 'MenuItem', + description = '', action } = props + const theme = useTheme() return ( - {icon} - + + + {icon} + + + + + {description} + + + ) } diff --git a/src/components/AddButton/AddButton.props.tsx b/src/components/AddButton/AddButton.props.tsx index 5f28fc9b..aa76729c 100644 --- a/src/components/AddButton/AddButton.props.tsx +++ b/src/components/AddButton/AddButton.props.tsx @@ -5,6 +5,7 @@ export interface MenuLineProps { icon?: ReactElement name?: string action: () => void + description?: string } export interface StyledMenuProps extends MenuProps { diff --git a/src/components/AddButton/AddButton.tsx b/src/components/AddButton/AddButton.tsx index c97c4f16..635b1711 100644 --- a/src/components/AddButton/AddButton.tsx +++ b/src/components/AddButton/AddButton.tsx @@ -39,6 +39,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => { { icon: , name: 'Add Device', + description: 'New light hardware', action: () => { openAddDevice(true) handleClose() @@ -47,6 +48,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => { { icon: , name: 'Add Virtual', + description: 'Segments & Groups', action: () => { openAddVirtual(true) handleClose() @@ -55,6 +57,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => { { icon: , name: 'Add Scene', + description: 'Save your current setup', action: () => { openAddScene(true) handleClose() @@ -66,6 +69,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => { menuitems.push({ icon: , name: 'Add Integration', + description: 'Extend LedFx', action: () => { openAddInt(true) handleClose() @@ -103,6 +107,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => { name={menuitem.name} icon={menuitem.icon} action={menuitem.action} + description={menuitem.description} /> ))} @@ -138,6 +143,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => { name={menuitem.name} icon={menuitem.icon} action={menuitem.action} + description={menuitem.description} /> ))} diff --git a/src/components/Dialogs/AddDeviceDialog.tsx b/src/components/Dialogs/AddDeviceDialog.tsx index 6feefb82..3cedeed9 100644 --- a/src/components/Dialogs/AddDeviceDialog.tsx +++ b/src/components/Dialogs/AddDeviceDialog.tsx @@ -14,6 +14,7 @@ import { } from '@mui/material' import useStore from '../../store/useStore' import SchemaForm from '../SchemaForm/SchemaForm/SchemaForm' +import SeeDocs from '../SeeDocs/SeeDocs' const PREFIX = 'AddDeviceDialog' @@ -170,11 +171,13 @@ const AddDeviceDialog = () => { To add a device to LedFx, please first select the type of device you wish to add then provide the necessary configuration. + {deviceType === 'launchpad' && ( When adding a Lunchpad as a led-output device, you cannot use it as a MIDI input device at the same time (atm). + )}
diff --git a/src/components/Dialogs/AddVirtualDialog.tsx b/src/components/Dialogs/AddVirtualDialog.tsx index e24bb039..8f12869a 100644 --- a/src/components/Dialogs/AddVirtualDialog.tsx +++ b/src/components/Dialogs/AddVirtualDialog.tsx @@ -12,6 +12,7 @@ import { Tune } from '@mui/icons-material' import useStore from '../../store/useStore' import BladeSchemaForm from '../SchemaForm/SchemaForm/SchemaForm' import EditVirtuals from '../../pages/Devices/EditVirtuals/EditVirtuals' +import SeeDocs from '../SeeDocs/SeeDocs' const AddVirtualDialog = () => { const addVirtual = useStore((state) => state.addVirtual) @@ -146,7 +147,8 @@ const AddVirtualDialog = () => { MDI - (ie: mdi:icon-name) + (ie: mdi:icon-name) |{' '} +
diff --git a/src/components/Dialogs/HostManager.tsx b/src/components/Dialogs/HostManager.tsx index 1db8763a..54f45831 100644 --- a/src/components/Dialogs/HostManager.tsx +++ b/src/components/Dialogs/HostManager.tsx @@ -32,6 +32,7 @@ import useStore from '../../store/useStore' import Instances from './Instances' import SceneImage from '../../pages/Scenes/ScenesImage' import useStyles from '../../pages/Scenes/Scenes.styles' +import SongDetector from '../Integrations/Spotify/Widgets/SongDetector/SongDetector' export default function HostManager() { const theme = useTheme() @@ -471,6 +472,32 @@ export default function HostManager() { )} )} +
+ + + + Song detector{' '} + + alpha + + + + + + +
diff --git a/src/components/Integrations/Spotify/Widgets/SongDetector/SdFloating.styles.tsx b/src/components/Integrations/Spotify/Widgets/SongDetector/SdFloating.styles.tsx new file mode 100644 index 00000000..8a656fd8 --- /dev/null +++ b/src/components/Integrations/Spotify/Widgets/SongDetector/SdFloating.styles.tsx @@ -0,0 +1,47 @@ +import { makeStyles } from '@mui/styles' + +const useStyles = makeStyles(() => ({ + Widget: { + padding: 0, + overflow: 'hidden', + borderRadius: 16, + width: 500, + maxWidth: '100%', + minHeight: 400, + 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 diff --git a/src/components/Integrations/Spotify/Widgets/SongDetector/SdFloating.tsx b/src/components/Integrations/Spotify/Widgets/SongDetector/SdFloating.tsx new file mode 100644 index 00000000..57eba314 --- /dev/null +++ b/src/components/Integrations/Spotify/Widgets/SongDetector/SdFloating.tsx @@ -0,0 +1,29 @@ +import { Rnd } from 'react-rnd' +import useStore from '../../../../../store/useStore' + +const SdFloating = ({ children }: any) => { + const sdX = useStore((state) => state.ui.sdX) + const setSdX = useStore((state) => state.ui.setSdX) + const sdY = useStore((state) => state.ui.sdY) + const setSdY = useStore((state) => state.ui.setSdY) + + return ( + { + setSdX(d.x) + setSdY(d.y) + }} + onResizeStop={(_e, _direction, ref, _delta, position) => { + setSdX(position.x) + setSdY(position.y) + }} + style={{ zIndex: 10 }} + > + {children} + + ) +} + +export default SdFloating diff --git a/src/components/Integrations/Spotify/Widgets/SongDetector/SongDetector.tsx b/src/components/Integrations/Spotify/Widgets/SongDetector/SongDetector.tsx new file mode 100644 index 00000000..fcb61352 --- /dev/null +++ b/src/components/Integrations/Spotify/Widgets/SongDetector/SongDetector.tsx @@ -0,0 +1,23 @@ +import { Box, TextField } from '@mui/material' +import useStore from '../../../../../store/useStore' +import SpTexterForm from '../SpotifyWidgetPro/SpTexterForm' + +const SongDetector = () => { + const currentTrack = useStore((state) => state.spotify.currentTrack) + + return ( + + + {currentTrack && currentTrack.length > 3 && } + + ) +} + +export default SongDetector diff --git a/src/components/Integrations/Spotify/Widgets/SongDetector/SongDetectorFloating.tsx b/src/components/Integrations/Spotify/Widgets/SongDetector/SongDetectorFloating.tsx new file mode 100644 index 00000000..0bca28cb --- /dev/null +++ b/src/components/Integrations/Spotify/Widgets/SongDetector/SongDetectorFloating.tsx @@ -0,0 +1,37 @@ +import { Box, IconButton, Stack, Typography } from '@mui/material' + +import useStyle from './SdFloating.styles' +import SdFloating from './SdFloating' +import { Close } from '@mui/icons-material' +import SongDetector from './SongDetector' + +const SongDetectorFloating = ({ close }: { close?: () => void }) => { + const classes = useStyle() + + return ( + +
+ + {close && } + Song Detector + {close && ( + close()}> + + + )} + + +
+ + ) +} + +export default SongDetectorFloating diff --git a/src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpTexter.tsx b/src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpTexter.tsx index e243e477..e629160a 100644 --- a/src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpTexter.tsx +++ b/src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpTexter.tsx @@ -1,83 +1,23 @@ -import { useEffect, useState } from 'react' +import { useState } from 'react' import { Box, - Button, Dialog, DialogContent, DialogTitle, IconButton, - MenuItem, - Select, - Slider, - Stack, - Switch, useTheme } from '@mui/material' -import GradientPicker from '../../../../SchemaForm/components/GradientPicker/GradientPicker' -import BladeFrame from '../../../../SchemaForm/components/BladeFrame' import BladeIcon from '../../../../Icons/BladeIcon/BladeIcon' import useStore from '../../../../../store/useStore' +import SpTexterForm from './SpTexterForm' const SpTexter = () => { const theme = useTheme() - const schemas = useStore((state) => state.schemas) - const virtuals = useStore((state) => state.virtuals) const integrations = useStore((state) => state.integrations) - const currentTrack = useStore((state) => state.spotify.currentTrack) const spAuthenticated = useStore((state) => state.spotify.spAuthenticated) - const spotifyTexter = useStore((state) => state.spotify.spotifyTexter) const sendSpotifyTrack = useStore((state) => state.spotify.sendSpotifyTrack) - const colors = useStore((state) => state.colors) - - const setSendSpotifyTrack = useStore((state) => state.setSendSpotifyTrack) - const setSpTexterTextColor = useStore((state) => state.setSpTexterTextColor) - const setSpTexterFlipVertical = useStore( - (state) => state.setSpTexterFlipVertical - ) - const setSpTexterFlipHorizontal = useStore( - (state) => state.setSpTexterFlipHorizontal - ) - const setSpTexterUseGradient = useStore( - (state) => state.setSpTexterUseGradient - ) - const setSpTexterAlpha = useStore((state) => state.setSpTexterAlpha) - const setSpTexterBackground = useStore((state) => state.setSpTexterBackground) - const setSpTexterGradient = useStore((state) => state.setSpTexterGradient) - const setSpTexterGradientRoll = useStore( - (state) => state.setSpTexterGradientRoll - ) - const setSpTexterRotate = useStore((state) => state.setSpTexterRotate) - const setSpTexterHeightPercent = useStore( - (state) => state.setSpTexterHeightPercent - ) - const setSpTexterBrightness = useStore((state) => state.setSpTexterBrightness) - const setSpTexterSpeed = useStore((state) => state.setSpTexterSpeed) - const setSpTexterBackgroundBrightness = useStore( - (state) => state.setSpTexterBackgroundBrightness - ) - const setSpTexterFont = useStore((state) => state.setSpTexterFont) - const setSpTexterTextEffect = useStore((state) => state.setSpTexterTextEffect) - const setEffect = useStore((state) => state.setEffect) const [open, setOpen] = useState(false) - const [selected, setSelected] = useState('') - - const matrix = Object.keys(virtuals).filter( - (v: string) => virtuals[v].config.rows > 1 - ) - - useEffect(() => { - if (sendSpotifyTrack && currentTrack !== '' && selected !== '') { - setEffect( - selected, - 'texter2d', - { ...spotifyTexter, text: currentTrack }, - true, - true - ) - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentTrack, sendSpotifyTrack, spotifyTexter, selected]) if (!(integrations.spotify?.active && spAuthenticated)) return null @@ -100,209 +40,7 @@ const SpTexter = () => { > Send songname to matrix - - - - - - {spotifyTexter.use_gradient ? ( - setSpTexterGradient(v)} - /> - ) : ( - setSpTexterTextColor(v)} - /> - )} - setSpTexterBackground(v)} - /> - - - - - typeof v === 'number' && setSpTexterBrightness(v) - } - /> - - - - typeof v === 'number' && setSpTexterBackgroundBrightness(v) - } - /> - - - - {/* all booleans */} - - setSpTexterUseGradient(b)} - name={'Gradient'} - color="primary" - /> - - - setSpTexterAlpha(b)} - name={'Alpha'} - color="primary" - /> - - - setSpTexterFlipHorizontal(b)} - name={'Flip Hl'} - color="primary" - /> - - - setSpTexterFlipVertical(b)} - name={'Flip V'} - color="primary" - /> - - - - - - typeof v === 'number' && setSpTexterGradientRoll(v) - } - /> - - - - typeof v === 'number' && setSpTexterRotate(v) - } - /> - - - - - - typeof v === 'number' && setSpTexterSpeed(v) - } - /> - - - - typeof v === 'number' && setSpTexterHeightPercent(v) - } - /> - - - - - - - - - - + diff --git a/src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpTexterForm.tsx b/src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpTexterForm.tsx new file mode 100644 index 00000000..bdbb1615 --- /dev/null +++ b/src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpTexterForm.tsx @@ -0,0 +1,269 @@ +import { useEffect, useState } from 'react' +import { Button, MenuItem, Select, Slider, Stack, Switch } from '@mui/material' +import GradientPicker from '../../../../SchemaForm/components/GradientPicker/GradientPicker' +import BladeFrame from '../../../../SchemaForm/components/BladeFrame' +import useStore from '../../../../../store/useStore' + +const SpTexterForm = () => { + const schemas = useStore((state) => state.schemas) + const virtuals = useStore((state) => state.virtuals) + const currentTrack = useStore((state) => state.spotify.currentTrack) + const spotifyTexter = useStore((state) => state.spotify.spotifyTexter) + const sendSpotifyTrack = useStore((state) => state.spotify.sendSpotifyTrack) + const colors = useStore((state) => state.colors) + + const setSendSpotifyTrack = useStore((state) => state.setSendSpotifyTrack) + const setSpTexterTextColor = useStore((state) => state.setSpTexterTextColor) + const setSpTexterFlipVertical = useStore( + (state) => state.setSpTexterFlipVertical + ) + const setSpTexterFlipHorizontal = useStore( + (state) => state.setSpTexterFlipHorizontal + ) + const setSpTexterUseGradient = useStore( + (state) => state.setSpTexterUseGradient + ) + const setSpTexterAlpha = useStore((state) => state.setSpTexterAlpha) + const setSpTexterBackground = useStore((state) => state.setSpTexterBackground) + const setSpTexterGradient = useStore((state) => state.setSpTexterGradient) + const setSpTexterGradientRoll = useStore( + (state) => state.setSpTexterGradientRoll + ) + const setSpTexterRotate = useStore((state) => state.setSpTexterRotate) + const setSpTexterHeightPercent = useStore( + (state) => state.setSpTexterHeightPercent + ) + const setSpTexterBrightness = useStore((state) => state.setSpTexterBrightness) + const setSpTexterSpeed = useStore((state) => state.setSpTexterSpeed) + const setSpTexterBackgroundBrightness = useStore( + (state) => state.setSpTexterBackgroundBrightness + ) + const setSpTexterFont = useStore((state) => state.setSpTexterFont) + const setSpTexterTextEffect = useStore((state) => state.setSpTexterTextEffect) + const setEffect = useStore((state) => state.setEffect) + + const [selected, setSelected] = useState('') + + const matrix = Object.keys(virtuals).filter( + (v: string) => virtuals[v].config.rows > 1 + ) + + useEffect(() => { + if (sendSpotifyTrack && currentTrack !== '' && selected !== '') { + setEffect( + selected, + 'texter2d', + { ...spotifyTexter, text: currentTrack }, + true, + true + ) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currentTrack, sendSpotifyTrack, spotifyTexter, selected]) + + return ( + <> + + + + + + {spotifyTexter.use_gradient ? ( + setSpTexterGradient(v)} + /> + ) : ( + setSpTexterTextColor(v)} + /> + )} + setSpTexterBackground(v)} + /> + + + + + typeof v === 'number' && setSpTexterBrightness(v) + } + /> + + + + typeof v === 'number' && setSpTexterBackgroundBrightness(v) + } + /> + + + + {/* all booleans */} + + setSpTexterUseGradient(b)} + name={'Gradient'} + color="primary" + /> + + + setSpTexterAlpha(b)} + name={'Alpha'} + color="primary" + /> + + + setSpTexterFlipHorizontal(b)} + name={'Flip Hl'} + color="primary" + /> + + + setSpTexterFlipVertical(b)} + name={'Flip V'} + color="primary" + /> + + + + + + typeof v === 'number' && setSpTexterGradientRoll(v) + } + /> + + + typeof v === 'number' && setSpTexterRotate(v)} + /> + + + + + typeof v === 'number' && setSpTexterSpeed(v)} + /> + + + + typeof v === 'number' && setSpTexterHeightPercent(v) + } + /> + + + + + + + + + + + + ) +} + +export default SpTexterForm diff --git a/src/components/SeeDocs/SeeDocs.tsx b/src/components/SeeDocs/SeeDocs.tsx new file mode 100644 index 00000000..0c2ec0c1 --- /dev/null +++ b/src/components/SeeDocs/SeeDocs.tsx @@ -0,0 +1,13 @@ +import { Link } from '@mui/material' + +const SeeDocs = ({ + url = 'https://docs.ledfx.app/en/latest/configuring.html' +}) => { + return ( + + See Docs + + ) +} + +export default SeeDocs diff --git a/src/pages/Pages.tsx b/src/pages/Pages.tsx index 9c54405c..47e6a8f3 100644 --- a/src/pages/Pages.tsx +++ b/src/pages/Pages.tsx @@ -35,6 +35,7 @@ import Graph from './Graph/Graph' import MGraphFloating from '../components/Integrations/Spotify/Widgets/MGraphFlotaing/MGraphFloating' import Keybinding from '../components/Integrations/Spotify/Widgets/Keybinding/Keybinding' import OneEffect from '../components/Gamepad/OneEffect' +import SongDetectorFloating from '../components/Integrations/Spotify/Widgets/SongDetector/SongDetectorFloating' const Routings = ({ handleWs }: any) => { const theme = useTheme() @@ -45,6 +46,8 @@ const Routings = ({ handleWs }: any) => { const setMp = useStore((state) => state.ui.setMp) const mg = useStore((state) => state.ui.mg) const setMg = useStore((state) => state.ui.setMg) + const sd = useStore((state) => state.ui.sd) + const setSd = useStore((state) => state.ui.setSd) const features = useStore((state) => state.features) const setFeatures = useStore((state) => state.setFeatures) const setShowFeatures = useStore((state) => state.setShowFeatures) @@ -61,6 +64,7 @@ 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+t'], () => setSd(!sd)) useHotkeys(['ctrl+alt+k', 'ctrl+space'], () => setKeybinding(!keybinding)) useHotkeys(['ctrl+alt+g'], () => { if (window.localStorage.getItem('guestmode') === 'activated') { @@ -150,6 +154,7 @@ const Routings = ({ handleWs }: any) => { )} {mp && } + {sd && } {mg && setMg(false)} />} {keybinding && setKeybinding(false)} />} diff --git a/src/store/ui/storeSongDectector.tsx b/src/store/ui/storeSongDectector.tsx new file mode 100644 index 00000000..77179234 --- /dev/null +++ b/src/store/ui/storeSongDectector.tsx @@ -0,0 +1,16 @@ +import { produce } from 'immer' + +const storeSongDectector = (set: any) => ({ + song: '', + setSong: (url: string) => { + set( + produce((state: any) => { + state.song = url + }), + false, + 'songDetector/setSong' + ) + } +}) + +export default storeSongDectector diff --git a/src/store/ui/storeUI.tsx b/src/store/ui/storeUI.tsx index e6476430..f0d28f62 100644 --- a/src/store/ui/storeUI.tsx +++ b/src/store/ui/storeUI.tsx @@ -112,6 +112,33 @@ const storeUI = (set: any) => ({ false, 'ui/keybinding' ), + sdX: 50, + setSdX: (x: number): void => + set( + produce((state: IStore) => { + state.ui.sdX = x + }), + false, + 'ui/sdX' + ), + sdY: 200, + setSdY: (y: number): void => + set( + produce((state: IStore) => { + state.ui.sdY = y + }), + false, + 'ui/sdY' + ), + sd: false, + setSd: (sd: boolean): void => + set( + produce((state: IStore) => { + state.ui.sd = sd + }), + false, + 'ui/sd' + ), changeTheme: false, reloadTheme: (): void => set( diff --git a/src/store/useStore.ts b/src/store/useStore.ts index dbb08f21..582c4fc8 100644 --- a/src/store/useStore.ts +++ b/src/store/useStore.ts @@ -29,6 +29,7 @@ import storeMidi from './ui/storeMidi' import storeVideo from './ui/storeVideo' import storeUIPersist from './ui-persist/storeUIpersist' import storeUIPersistActions from './ui-persist/storeUIpersistActions' +import storeSongDectector from './ui/storeSongDectector' const useStore = create( devtools( @@ -56,7 +57,7 @@ const useStore = create( ...storeFeatures(set), ...storeWebAudio(set), ...storeYoutube(set), - + ...storeSongDectector(set), ...storeColors(set), ...storeDevices(set), ...storeVirtuals(set),