Song Detector

YeonV · Dec 17, 2024 · 2cf996c · 2cf996c
1 parent d7cd462
commit 2cf996c
Show file tree

Hide file tree

Showing 18 changed files with 581 additions and 310 deletions.
diff --git 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
@@ -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<HTMLLIElement, MenuLineProps>(
     const {
       icon = <Send fontSize="small" />,
       name = 'MenuItem',
+      description = '',
       action
     } = props
+    const theme = useTheme()
     return (
       <MenuItem onClick={action} ref={ref}>
-        <ListItemIcon>{icon}</ListItemIcon>
-        <ListItemText primary={name} />
+        <Stack direction="column" mt={1}>
+          <Stack direction="row" spacing={2}>
+            <ListItemIcon>{icon}</ListItemIcon>
+            <ListItemText primary={name} />
+          </Stack>
+          <ListItemText>
+            <Typography
+              sx={{ pl: 6.5, mt: '4px !important', mb: 1 }}
+              color={theme.palette.text.disabled}
+            >
+              {description}
+            </Typography>
+          </ListItemText>
+        </Stack>
       </MenuItem>
     )
   }

diff --git a/src/components/AddButton/AddButton.props.tsx b/src/components/AddButton/AddButton.props.tsx
@@ -5,6 +5,7 @@ export interface MenuLineProps {
   icon?: ReactElement<any>
   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
@@ -39,6 +39,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => {
     {
       icon: <BladeIcon name="mdi:led-strip" />,
       name: 'Add Device',
+      description: 'New light hardware',
       action: () => {
         openAddDevice(true)
         handleClose()
@@ -47,6 +48,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => {
     {
       icon: <BladeIcon name="mdi:led-strip-variant" />,
       name: 'Add Virtual',
+      description: 'Segments & Groups',
       action: () => {
         openAddVirtual(true)
         handleClose()
@@ -55,6 +57,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => {
     {
       icon: <BladeIcon name="mdi:image-plus" />,
       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: <ElectricalServices />,
       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}
             />
           ))}
         </StyledMenu>
@@ -138,6 +143,7 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => {
                 name={menuitem.name}
                 icon={menuitem.icon}
                 action={menuitem.action}
+                description={menuitem.description}
               />
             ))}
           </StyledMenu>

diff --git 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 = () => {
         <DialogContentText>
           To add a device to LedFx, please first select the type of device you
           wish to add then provide the necessary configuration.
+          <SeeDocs url="https://docs.ledfx.app/en/latest/configuring.html" />
         </DialogContentText>
         {deviceType === 'launchpad' && (
           <Alert severity="info">
             When adding a Lunchpad as a led-output device, you cannot use it as
             a MIDI input device at the same time (atm).
+            <SeeDocs url="https://docs.ledfx.app/en/latest/configuring.html" />
           </Alert>
         )}
         <div className={classes.wrapper}>

diff --git 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 = () => {
               <Link href="https://materialdesignicons.com" target="_blank">
                 MDI
               </Link>
-              (ie: mdi:icon-name)
+              (ie: mdi:icon-name) |{' '}
+              <SeeDocs url="https://docs.ledfx.app/en/latest/howto/virtuals.html" />
             </div>
           </DialogContentText>
 

diff --git 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() {
                 )}
               </>
             )}
+            <div style={{ marginBottom: '1rem' }}>
+              <Stack
+                direction="row"
+                spacing={2}
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <Tooltip title="Same scene id with different scene config across all running cors. ATTENTION: You have to make sure yourself, they are not colliding!">
+                  <Typography variant="caption" sx={{ marginBottom: '1rem' }}>
+                    Song detector{' '}
+                    <span
+                      style={{
+                        background: theme.palette.success.dark,
+                        padding: '0 1rem',
+                        borderRadius: 3,
+                        marginLeft: 8
+                      }}
+                    >
+                      alpha
+                    </span>
+                  </Typography>
+                </Tooltip>
+              </Stack>
+              <Divider sx={{ marginBottom: '1rem' }} />
+              <SongDetector />
+            </div>
           </div>
         </DialogContent>
         <DialogActions>

diff --git a/src/components/Integrations/Spotify/Widgets/SongDetector/SdFloating.styles.tsx 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
@@ -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 (
+    <Rnd
+      size={{ width: 960, height: 'auto' }}
+      position={{ x: sdX, y: sdY }}
+      onDragStop={(e, d) => {
+        setSdX(d.x)
+        setSdY(d.y)
+      }}
+      onResizeStop={(_e, _direction, ref, _delta, position) => {
+        setSdX(position.x)
+        setSdY(position.y)
+      }}
+      style={{ zIndex: 10 }}
+    >
+      {children}
+    </Rnd>
+  )
+}
+
+export default SdFloating
diff --git a/src/components/Integrations/Spotify/Widgets/SongDetector/SongDetector.tsx 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 (
+    <Box sx={{ padding: 2 }}>
+      <TextField
+        label="Song"
+        size="small"
+        disabled
+        value={currentTrack}
+        sx={{ marginBottom: 2 }}
+        fullWidth
+      />
+      {currentTrack && currentTrack.length > 3 && <SpTexterForm />}
+    </Box>
+  )
+}
+
+export default SongDetector