Captivate API

package.json

@@ -32,18 +32,27 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@firebase/analytics": "^0.8.0",
     "@mui/icons-material": "^5.8.2",
     "@mui/material": "^5.8.2",
     "@reduxjs/toolkit": "^1.8.2",
     "@sentry/react": "^7.0.0",
     "@sentry/tracing": "^7.0.0",
+    "cookie-parser": "^1.4.5",
     "deep-equal": "^2.0.5",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.7",
+    "electron-storage": "^1.0.7",
     "electron-updater": "^5.0.1",
+    "express": "^4.17.1",
+    "firebase": "^9.9.4",
+    "helmet": "^3.23.3",
+    "http-errors": "^1.8.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
+    "morgan": "^1.10.0",
+    "node-fetch": "^3.2.10",
     "path-browserify": "^1.0.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
@@ -52,6 +61,8 @@
     "react-router-dom": "^6.3.0",
     "redux": "^4.2.0",
     "redux-undo": "^1.0.1",
+    "socket.io": "^4.5.2",
+    "socket.io-client": "^4.5.2",
     "styled-components": "^5.3.5",
     "three": "^0.141.0"
   },
@@ -89,6 +100,11 @@
     "electron-notarize": "^1.2.1",
     "electron-rebuild": "^3.2.7",
     "electronmon": "^2.0.2",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb-base": "^13.2.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-prettier": "^3.4.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "i": "^0.3.7",
@@ -97,14 +113,16 @@
     "jest-environment-jsdom": "^28.1.0",
     "lint-staged": "^12.4.1",
     "mini-css-extract-plugin": "^2.6.0",
-    "npm": "^8.12.0",
+    "nodemon": "^2.0.12",
+    "npm": "^8.19.0",
     "prettier": "^2.6.2",
     "raw-loader": "^4.0.2",
     "react-refresh": "^0.13.0",
     "rimraf": "^3.0.2",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
+    "supertest": "^3.4.2",
     "terser-webpack-plugin": "^5.3.1",
     "ts-jest": "^28.0.2",
     "ts-loader": "^9.3.0",

saves/Red

@@ -0,0 +1 @@
+{}

saves/blue

@@ -0,0 +1 @@
+{"0":"blue","1":{"07wkgoVXzfnMp6m1mTOcea-204517":["07wkgoVXzfnMp6m1mTOcea","Pattern Recognition (ABGT489) - Grum",204517],"4AZEvIDQpzyib7BX4Cd91U-50963":["4AZEvIDQpzyib7BX4Cd91U","Garden Of The Gods - Hausman",50963],"name":"blue","scene_image":"image:https://i.ytimg.com/vi/4G2unzNoOnY/maxresdefault.jpg","virtuals":{}}}

saves/new-scene-3

@@ -0,0 +1 @@
+{}

saves/none

@@ -0,0 +1 @@
+{}

saves/scene-2

@@ -0,0 +1 @@
+{}

saves/triggeredscene

@@ -0,0 +1 @@
+{"0":"triggeredscene","1":{"name":"triggeredscene","scene_image":"","virtuals":{"wled-dj-desk-103":{"config":{"background_brightness":1,"background_color":"#000000","blur":3,"brightness":1,"color_high":"#0000ff","color_lows":"#ff0000","color_mids":"#00ff00","decay":0.97,"flip":false,"mirror":true,"speed":3,"threshold":0},"type":"scroll"},"wled-dj-tv":{}}}}

src/main/engine/ipcHandler.ts

@@ -12,6 +12,7 @@ import { PayloadAction } from '@reduxjs/toolkit'
 import { promises } from 'fs'
 import { VisualizerResource } from '../../visualizer/threejs/VisualizerManager'
 import { VisualizerContainer } from './createVisualizerWindow'
+import fetch from 'node-fetch'
 
 interface Config {
   renderer: WebContents
@@ -101,6 +102,37 @@ ipcMain.handle(
   }
 )
 
+ipcMain.handle(ipcChannels.fetch_scenes, async (_event, url: string) => {
+  try {
+    return await fetch(`${url}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json; charset=utf-8' },
+    }).then((res) => res.json())
+  } catch (error: any) {
+    if (error.code === 'ECONNREFUSED') console.log('No LedFx URL set!')
+    console.error('Error connecting to LedFx')
+  }
+})
+
+ipcMain.handle(
+  ipcChannels.put_scenes,
+  async (_event, url: string, id: string) => {
+    try {
+      return await fetch(url, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json; charset=utf-8' },
+        body: JSON.stringify({
+          id: id,
+          action: 'activate',
+        }),
+      }).then((res) => res.json())
+    } catch (err: any) {
+      if (err.code === 'ECONNREFUSED') console.log('No LedFx URL set!')
+      console.log({ err })
+    }
+  }
+)
+
 ipcMain.handle(
   ipcChannels.get_local_filepaths,
   async (_event, title: string, fileFilters: Electron.FileFilter[]) => {

src/main/main.ts

@@ -18,6 +18,8 @@ import * as engine from './engine/engine'
 import { VisualizerContainer } from './engine/createVisualizerWindow'
 import './prevent_sleep'
 import './electron_error_logging'
+const server = require('./../../src/server/src/bin/server')
+
 export default class AppUpdater {
   constructor() {
     log.transports.file.level = 'info'
@@ -151,7 +153,6 @@ const createWindow = async () => {
 //     app.quit()
 //   }
 // })
-
 app
   .whenReady()
   .then(() => {

src/main/menu.ts

@@ -89,6 +89,13 @@ export default class MenuBuilder {
             this.res.ipcCallbacks.send_main_command({ type: 'new-project' })
           },
         },
+        {
+          label: 'LEDFx URL',
+          accelerator: 'Command+L',
+          click: () => {
+            this.res.ipcCallbacks.send_main_command({ type: 'ledfx-url' })
+          },
+        },
         {
           label: 'Save',
           accelerator: 'Command+S',
@@ -260,6 +267,13 @@ export default class MenuBuilder {
               this.res.ipcCallbacks.send_main_command({ type: 'new-project' })
             },
           },
+          {
+            label: 'LEDFx URL',
+            accelerator: 'Command+L',
+            click: () => {
+              this.res.ipcCallbacks.send_main_command({ type: 'ledfx-url' })
+            },
+          },
           {
             label: 'Save',
             accelerator: 'Ctrl+S',

src/main/preload.js

@@ -54,7 +54,13 @@ contextBridge.exposeInMainWorld('electron', {
       }
     },
     invoke(channel, ...args) {
-      const validChannels = ['save_file', 'load_file', 'get_local_filepaths']
+      const validChannels = [
+        'save_file',
+        'load_file',
+        'get_local_filepaths',
+        'fetch_scenes',
+        'put_scenes',
+      ]
       if (validChannels.includes(channel)) {
         return ipcRenderer.invoke(channel, ...args)
       } else {

src/renderer/App.tsx

@@ -10,9 +10,56 @@ import FullscreenOverlay from './overlays/FullscreenOverlay'
 import ErrorBoundarySentry from './error-boundary/ErrorBoundarySentry'
 import BottomStatus from './menu/BottomStatus'
 
+import { store } from './redux/store'
+
+import io from 'socket.io-client'
+import { useState, useEffect } from 'react'
+import { getUtil, putUtil } from './apiUtils/apiUtils'
+
 export default function App() {
+  const [socket, setSocket] = useState(io('http://localhost:3001'))
   const activePage = useTypedSelector((state) => state.gui.activePage)
 
+  useEffect(() => {
+    // PUT
+    socket.on('controller-put', (payload: any) => {
+      try {
+        putUtil(payload.target, payload.id, payload.data)
+        socket.emit('controller-put-response', {
+          status: 'success',
+          data: null,
+        })
+      } catch (err: any) {
+        console.log(err)
+        socket.emit('controller-put-response', {
+          status: 'fail',
+          err: err.message,
+        })
+      }
+    })
+
+    // GET
+
+    socket.on('controller-get', (recivedData) => {
+      console.log(store.getState())
+
+      try {
+        let endResult: any = getUtil(recivedData.target)
+        socket.emit('controller-get-response', {
+          status: 'success',
+          data: endResult,
+        })
+      } catch (err: any) {
+        socket.emit('controller-get-response', {
+          status: 'fail',
+          data: {
+            err: err.message,
+          },
+        })
+      }
+    })
+  }, [])
+
   function getActivePage() {
     if (activePage == 'Modulation') return <Modulation />
     if (activePage == 'Universe') return <Universe />

src/renderer/apiUtils/apiUtils.js

@@ -0,0 +1,33 @@
+import { store } from 'renderer/redux/store'
+
+import { universeSorter } from './universeSorter'
+import { modulationSorter } from './modulationSorter'
+import { visualSorter } from './visualSorter'
+import { dmxSorter } from './dmxSorter'
+import { masterSorter } from './masterSorter'
+
+export const getUtil = (target) => {
+  let state = store.getState()
+
+  target.forEach((el) => (state = state[el]))
+
+  let final = state
+
+  return final
+}
+
+export const putUtil = (target, id, data) => {
+  if (target[0] === 'universe') {
+    universeSorter(target[1], data)
+  } else if (target[0] === 'dmxOut') {
+    dmxSorter(target[1], data)
+  } else if (target[0] === 'visualScenes') {
+    visualSorter(target[1], data)
+  } else if (target[0] === 'modulation') {
+    modulationSorter(target[1], data)
+  } else if (target[0] === 'master') {
+    masterSorter(target[1], data)
+  } else {
+    throw Error('Invalid property/route.')
+  }
+}

src/renderer/apiUtils/dmxSorter.js

@@ -0,0 +1,26 @@
+import { store } from 'renderer/redux/store'
+import {
+  setPageIndex,
+  setChannelsPerPage,
+  clearOverwrites,
+  setOverwrite,
+} from 'renderer/redux/mixerSlice'
+export const dmxSorter = (target, data) => {
+  switch (target) {
+    case 'pageIndex': {
+      store.dispatch(setPageIndex(data.value - 1))
+    }
+    case 'channelsPerPage': {
+      store.dispatch(setChannelsPerPage(data.value))
+    }
+    case 'clearOverwrites': {
+      store.dispatch(clearOverwrites())
+    }
+    case 'overwrite': {
+      store.dispatch(setOverwrite({ index: data.index - 1, value: data.value }))
+    }
+    default: {
+      throw Error('Invalid property.')
+    }
+  }
+}

src/renderer/apiUtils/masterSorter.js

@@ -0,0 +1,68 @@
+import { store } from 'renderer/redux/store'
+import { redoAction, undoAction } from 'renderer/controls/UndoRedo'
+import {
+  setActivePage,
+  setBlackout,
+  setConnectionsMenu,
+  setLEDFx,
+  setNewProjectDialog,
+  setSaving,
+  setSceneSelect,
+} from 'renderer/redux/guiSlice'
+import { getUndoGroup } from 'renderer/controls/UndoRedo'
+import { setMaster } from 'renderer/redux/controlSlice'
+
+export const masterSorter = (target, data) => {
+  switch (target) {
+    case 'master': {
+      store.dispatch(setMaster(data.value))
+      break
+    }
+    case 'undoAction': {
+      let group = getGroup()
+      store.dispatch(undoAction(group))
+      break
+    }
+    case 'redoAction': {
+      let group = getGroup()
+      store.dispatch(redoAction(group))
+      break
+    }
+    case 'connectionMenu': {
+      store.dispatch(setConnectionsMenu(data.value))
+      break
+    }
+    case 'saving': {
+      store.dispatch(setSaving(data.value))
+      break
+    }
+    case 'newProjectDialog': {
+      store.dispatch(setNewProjectDialog(data.value))
+      break
+    }
+    case 'activePage': {
+      store.dispatch(setActivePage(data.value))
+      break
+    }
+    case 'blackout': {
+      store.dispatch(setBlackout(data.value))
+      break
+    }
+    case 'sceneSelect': {
+      store.dispatch(setSceneSelect(data.value))
+      break
+    }
+    case 'ledfx': {
+      store.dispatch(setLEDFx(data.value))
+    }
+    default: {
+      throw Error('Invalid property.')
+    }
+  }
+}
+const getGroup = () => {
+  let state = store.getState()
+  selector = getUndoGroup(state)
+
+  return selector
+}