New Feature: SYNC; update CopyTo function

src/pages/Device/StreamTo.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable react/require-default-props */
-import * as React from 'react'
-
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import CardHeader from '@mui/material/CardHeader'
 import FormControl from '@mui/material/FormControl'
 import MenuItem from '@mui/material/MenuItem'
 import InputLabel from '@mui/material/InputLabel'
 import { Button, Chip, OutlinedInput, Select, Box } from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
 import useStore from '../../store/useStore'
+import { deepEqual } from '../../utils/helpers'
 
 const ITEM_HEIGHT = 48
 const ITEM_PADDING_TOP = 8
@@ -32,47 +32,39 @@ const StreamToCard = ({
   virtuals: any
   style?: any
 }) => {
+  const cref = useRef<any>(null)
   const streamingToDevices = useStore((state) => state.streamingToDevices)
   const setStreamingToDevices = useStore((state) => state.setStreamingToDevices)
-
-  const [streamingTo, setStreamingTo] = React.useState(
-    streamingToDevices.indexOf(virtual.id) === -1
-      ? [virtual.id]
-      : streamingToDevices
-  )
-  const setEffect = useStore((state) => state.setEffect)
+  const streaming = useStore((state) => state.streaming)
+  const setStreaming = useStore((state) => state.setStreaming)
   const getVirtuals = useStore((state) => state.getVirtuals)
 
-  const handleEffectConfig = (
-    virtual_id: string,
-    config: any,
-    selectedType: string
-  ) =>
-    setEffect(virtual_id, selectedType, config, true).then(() => getVirtuals())
+  const [streamingTo, setStreamingTo] = useState(streamingToDevices)
+  const copyTo = useStore((state) => state.copyTo)
 
   const handleToggle = (value: string) => {
     const currentIndex = streamingTo.indexOf(value)
     const newStreamingDevices = [...streamingTo]
-
     if (currentIndex === -1) {
       newStreamingDevices.push(value)
     } else {
       newStreamingDevices.splice(currentIndex, 1)
     }
-
     setStreamingTo(newStreamingDevices)
     setStreamingToDevices(newStreamingDevices)
   }
 
-  const handleCopy = () => {
-    streamingTo.map((e: string) =>
-      handleEffectConfig(
-        e,
-        virtuals[virtual.id]?.effect.config,
-        virtuals[virtual.id]?.effect.type
-      )
-    )
-  }
+  const handleCopy = () =>
+    copyTo(virtual.id, streamingTo).then(() => getVirtuals())
+
+  useEffect(() => {
+    if (streaming) {
+      if (!deepEqual(cref.current, virtuals[virtual.id]?.effect)) {
+        if (cref.current !== null) handleCopy()
+        cref.current = virtuals[virtual.id]?.effect
+      }
+    }
+  }, [virtuals[virtual.id]?.effect])
 
   return (
     <Card variant="outlined" className="step-device-twob" style={style}>
@@ -122,13 +114,18 @@ const StreamToCard = ({
             ))}
           </Select>
         </FormControl>
-        <Button
-          size="medium"
-          onClick={() => handleCopy()}
-          style={{ alignSelf: 'flex-start', margin: '10px 0' }}
-        >
-          Copy
-        </Button>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <Button size="medium" onClick={() => handleCopy()}>
+            Copy
+          </Button>
+          <Button
+            size="medium"
+            onClick={() => setStreaming(!streaming)}
+            color={streaming ? 'primary' : 'inherit'}
+          >
+            Sync
+          </Button>
+        </div>
       </CardContent>
     </Card>
   )

src/store/api/storeVirtuals.tsx

@@ -197,6 +197,16 @@ const storeVirtuals = (set: any) => ({
       }
     }
   },
+  copyTo: async (virtId: string, target: string[]) => {
+    const resp = await Ledfx(`/api/virtuals_tools/${virtId}`, 'PUT', {
+      tool: 'copy',
+      target
+    })
+    if (resp && resp.status && resp.status === 'success') {
+      return true
+    }
+    return false
+  },
   updateSegments: async (virtId: string, segments: Segment[]) => {
     const resp = await Ledfx(`/api/virtuals/${virtId}`, 'POST', {
       segments: [...segments]

src/store/ui/storeGeneral.tsx

@@ -54,7 +54,16 @@ const storeGeneral = (set: any) => ({
       'general/setStreamingToDevices'
     )
   },
-
+  streaming: false,
+  setStreaming: (streaming: boolean) => {
+    set(
+      produce((state: IStore) => {
+        state.streaming = streaming
+      }),
+      false,
+      'general/setStreaming'
+    )
+  },
   // graphs: !!isElectron(),
   showActiveDevicesFirst: true,
   setShowActiveDevicesFirst: (val: boolean) => {

src/utils/helpers.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 /* eslint-disable @typescript-eslint/indent */
 export const drawerWidth = 240
-export const frontendConfig = 11
+export const frontendConfig = 12
 
 export const formatTime = (dura: number) => {
   let seconds: string | number
@@ -185,4 +185,29 @@ export const inverseLogScale = (value: number) => {
   const maxv = Math.log2(16384);
   const scale = (maxv-minv) / (maxp-minp);
   return (Math.log2(value)-minv) / scale + minp;
-}
+}
+
+export function deepEqual(obj1: any, obj2: any) {
+  if (obj1 === obj2) {
+    return true;
+  }
+
+  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+    return false;
+  }
+
+  let keys1 = Object.keys(obj1).sort();
+  let keys2 = Object.keys(obj2).sort();
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (let i = 0; i < keys1.length; i++) {
+    if (keys1[i] !== keys2[i] || !deepEqual(obj1[keys1[i]], obj2[keys2[i]])) {
+      return false;
+    }
+  }
+
+  return true;
+}