new feature: last effect. Added Play Buttons and changed clear-effect…

… icon to Stop
YeonV · Dec 27, 2024 · 228cc1f · 228cc1f
1 parent a1e51ac
commit 228cc1f
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 17 deletions.
diff --git a/src/pages/Device/Effects.tsx b/src/pages/Device/Effects.tsx
@@ -9,16 +9,17 @@ import {
   AccordionDetails,
   AccordionSummary,
   Typography,
-  Box
+  Box,
+  Tooltip
 } from '@mui/material'
 import {
-  Clear,
   ExpandMore,
   Pause,
   PlayArrow,
   GridOn,
   GridOff,
-  Fullscreen as FullScreenIcon
+  Fullscreen as FullScreenIcon,
+  Stop
 } from '@mui/icons-material'
 import useStore from '../../store/useStore'
 import EffectDropDown from '../../components/SchemaForm/components/DropDown/DropDown.wrapper'
@@ -82,6 +83,7 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
   const clearEffect = useStore((state) => state.clearEffect)
   const setEffect = useStore((state) => state.setEffect)
   const updateEffect = useStore((state) => state.updateEffect)
+  const schemas = useStore((state) => state.schemas)
   const virtuals = useStore((state) => state.virtuals)
   const effects = useStore((state) => state.schemas.effects)
   const viewMode = useStore((state) => state.viewMode)
@@ -112,6 +114,7 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
   }, [JSON.stringify(virtuals[virtId])])
 
   const effectType = virtual && virtual.effect.type
+  const lastEffect = virtual && virtual.last_effect
   const [theModel, setTheModel] = useState(virtual?.effect?.config)
   const orderedProperties =
     effects &&
@@ -223,6 +226,22 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
                 justifyContent: 'flex-end'
               }}
             >
+              {lastEffect && !effectType && (
+                <>
+                  <Tooltip title={schemas.effects[lastEffect].name}>
+                    <Button
+                      style={{ marginRight: '.5rem' }}
+                      onClick={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                        handlePlayPause()
+                      }}
+                    >
+                      <PlayArrow />
+                    </Button>
+                  </Tooltip>
+                </>
+              )}
               {!(
                 virtuals &&
                 virtual &&
@@ -282,7 +301,7 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
                     className="step-device-five"
                     onClick={() => handleClearEffect()}
                   >
-                    <Clear />
+                    <Stop />
                   </Button>
                 </>
               )}

diff --git a/src/pages/Devices/DeviceCard/DeviceCard.interface.tsx b/src/pages/Devices/DeviceCard/DeviceCard.interface.tsx
@@ -87,6 +87,10 @@ export interface DeviceCardProps {
    * Handle Function
    */
   handlePlayPause?: any
+  /**
+   * Handle Function
+   */
+  handlePlayLast?: any
   /**
    * Handle Function
    */
@@ -96,14 +100,15 @@ export interface DeviceCardProps {
    */
   linkTo?: any
   /**
-   * onClick Link
+   * JSX styles
    */
   additionalStyle?: any
   /**
-   * JSX styles
+   * On Context Menu
    */
   onContextMenu?: any
   /**
-   * On Context Menu
+   * last effect
    */
+  lastEffect?: null | string
 }
diff --git a/src/pages/Devices/DeviceCard/DeviceCard.tsx b/src/pages/Devices/DeviceCard/DeviceCard.tsx
@@ -12,14 +12,14 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
 import {
-  Clear,
   Delete,
   Pause,
   PestControl,
   PlayArrow,
+  Stop,
   SyncProblem
 } from '@mui/icons-material'
-import { Box } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import Popover from '../../../components/Popover/Popover'
 import EditVirtuals from '../EditVirtuals/EditVirtuals'
 import PixelGraph from '../../../components/PixelGraph'
@@ -44,6 +44,7 @@ const DeviceCard = ({
   handleEditDevice = () => console.log('EDITING DEVICE'),
   handleClearEffect = () => console.log('CLEARING EFFECT'),
   handlePlayPause = () => console.log('PLAY/PAUSE'),
+  handlePlayLast = () => console.log('PLAY LAST'),
   linkTo = '/',
   additionalStyle = {},
   iconName = 'wled',
@@ -57,7 +58,8 @@ const DeviceCard = ({
   isDevice = 'yz-quad',
   graphsActive = true,
   showMatrix = false,
-  onContextMenu
+  onContextMenu,
+  lastEffect
 }: DeviceCardProps) => {
   const classes = useStyle()
   const theme = useTheme()
@@ -203,7 +205,7 @@ const DeviceCard = ({
                     zIndex: expanded ? 1 : 3
                   }}
                 >
-                  <Clear />
+                  <Stop />
                 </Button>
               </Typography>
             ) : isStreaming ? (
@@ -215,12 +217,57 @@ const DeviceCard = ({
                 Streaming...
               </Typography>
             ) : (
-              <Typography
-                variant="body1"
-                style={{ color: theme.palette.text.disabled, height: 25 }}
-              >
-                off
-              </Typography>
+              <Stack direction="row" spacing={1} alignItems="center">
+                <Typography
+                  variant="body1"
+                  style={{
+                    color: theme.palette.text.disabled,
+                    height: 25
+                  }}
+                >
+                  off
+                </Typography>
+                {lastEffect && (
+                  <>
+                    <Typography
+                      variant="body1"
+                      style={{
+                        color: theme.palette.text.disabled,
+                        height: 25
+                      }}
+                    >
+                      &nbsp;|&nbsp;
+                    </Typography>
+                    <Typography
+                      variant="body1"
+                      style={{
+                        color: theme.palette.text.disabled,
+                        height: 25,
+                        paddingTop: 1
+                      }}
+                    >
+                      {lastEffect}
+                    </Typography>
+                    <Button
+                      variant="text"
+                      style={{
+                        color: '#999',
+                        minWidth: 'unset',
+                        zIndex: expanded ? 1 : 3,
+                        padding: 0
+                      }}
+                      size="small"
+                      onClick={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                        handlePlayLast()
+                      }}
+                    >
+                      <PlayArrow />
+                    </Button>
+                  </>
+                )}
+              </Stack>
             )}
           </div>
 

diff --git a/src/pages/Devices/DeviceCard/DeviceCard.wrapper.tsx b/src/pages/Devices/DeviceCard/DeviceCard.wrapper.tsx
@@ -16,6 +16,7 @@ const DeviceCardWrapper = ({
 }) => {
   const getVirtuals = useStore((state) => state.getVirtuals)
   const getDevices = useStore((state) => state.getDevices)
+  const schemas = useStore((state) => state.schemas)
   const virtuals = useStore((state) => state.virtuals)
   const devices = useStore((state) => state.devices)
   const deleteVirtual = useStore((state) => state.deleteVirtual)
@@ -218,8 +219,14 @@ const DeviceCardWrapper = ({
         online={
           devices[Object.keys(devices).find((d) => d === virtual) || '']?.online
         }
+        lastEffect={
+          virtuals[virtual]?.last_effect
+            ? schemas.effects[virtuals[virtual]?.last_effect].name
+            : null
+        }
         virtId={virtual}
         index={index}
+        handlePlayLast={() => handlePlayPause()}
         handleDeleteDevice={() => handleDeleteDevice()}
         handleEditVirtual={() => handleEditVirtual()}
         handleEditDevice={() => handleEditDevice(virtuals[virtual]?.is_device)}

diff --git a/src/store/api/storeVirtuals.tsx b/src/store/api/storeVirtuals.tsx
@@ -103,6 +103,7 @@ export interface Virtual {
   active: boolean
   effect: Effect
   effects: Effect[]
+  last_effect?: null | string
 }
 
 const storeVirtuals = (set: any) => ({