feat(ndi): adds NDI support via electron-builder (#522)

* feat(ndi): adds NDI support via electron-builder

Adds back NDI support with electron-builder 22.9.1. Fixes texture control. Increases discovery
timeout. Adds strictVerify: false for macOS builds.

fixes #413

* fix(ndi): Enforce electron-builder in 22.9.1 also for vue-cli

* feat(ndi): adds countdown and correct buttons to NDI UI

* fix(ndi): fixes timer overlap when sources are found early

Co-authored-by: Tim Pietrusky <timpietrusky@gmail.com>

package.json

@@ -35,6 +35,7 @@
  "fluent-ffmpeg": "^2.1.2",
  "font-list": "^1.2.11",
  "fuse.js": "^6.2.1",
+ "grandiose": "github:vcync/grandiose#feat/workerCompatibility",
  "golden-layout": "^1.5.9",
  "interactive-shader-format": "github:vcync/interactive-shader-format-js#feat/ImageBitmap",
  "lfo-for-modv": "0.0.1",
@@ -71,7 +72,7 @@
  "@vue/eslint-config-prettier": "^4.0.1",
  "babel-eslint": "^10.0.3",
  "electron": "^7.1.2",
- "electron-builder": "^22.7.0",
+ "electron-builder": "^22.9.1",
  "electron-notarize": "^1.0.0",
  "eslint": "^5.16.0",
  "eslint-plugin-no-for-each": "^0.1.14",
@@ -94,5 +95,8 @@
  "vue-cli-service lint",
  "git add"
  ]
+ },
+ "resolutions": {
+ "electron-builder": "22.9.1"
  }
 }

src/App.vue

@@ -62,9 +62,9 @@
  <gl-component title="BPM" :closable="false">
  <BPMConfig />
  </gl-component>
- <!-- <gl-component title="NDI" :closable="false">
+ <gl-component title="NDI" :closable="false">
  <NDIConfig />
- </gl-component> -->
+ </gl-component>
  </gl-stack>
  </gl-stack>
 
@@ -90,7 +90,7 @@ import InputConfig from "@/components/InputConfig";
 import AudioVideoDeviceConfig from "@/components/InputDeviceConfig/AudioVideo.vue";
 import MIDIDeviceConfig from "@/components/InputDeviceConfig/MIDI.vue";
 import BPMConfig from "@/components/InputDeviceConfig/BPM.vue";
-// import NDIConfig from "@/components/InputDeviceConfig/NDI.vue";
+import NDIConfig from "@/components/InputDeviceConfig/NDI.vue";
 import StatusBar from "@/components/StatusBar";
 import ModuleInspector from "@/components/ModuleInspector";
 import InfoView from "@/components/InfoView";
@@ -113,7 +113,7 @@ export default {
  AudioVideoDeviceConfig,
  MIDIDeviceConfig,
  BPMConfig,
- // NDIConfig,
+ NDIConfig,
  StatusBar,
  InfoView,
  ModuleInspector,

src/application/worker/store/modules/ndi._js → src/application/worker/store/modules/ndi.js

@@ -14,6 +14,7 @@ __dirname = __dirname.replace("/node_modules/grandiose", "");
 
 const state = {
  discovering: false,
+ timeout: 30 * 1000,
 
  receivers: {
  // "receiver-uuidv4": {
@@ -94,7 +95,10 @@ const actions = {
  commit("SET_DISCOVERING", true);
 
  try {
- const sources = await grandiose.find(state.discoveryOptions);
+ const sources = await grandiose.find(
+ state.discoveryOptions,
+ state.timeout
+ );
  commit("SET_SOURCES", sources);
  } catch (e) {
  console.log(e);

src/components/Control.vue

@@ -97,11 +97,15 @@ export default {
  async queueLoop() {
  const { id, prop, queued } = this;
 
- await this.$modV.store.dispatch("modules/updateProp", {
- moduleId: id,
- prop,
- data: queued
- });
+ try {
+ await this.$modV.store.dispatch("modules/updateProp", {
+ moduleId: id,
+ prop,
+ data: queued
+ });
+ } catch (e) {
+ console.error(e.message);
+ }
 
  this.queued = null;
  this.dirty = false;

src/components/Controls/TextureControl.vue

@@ -118,6 +118,10 @@ export default {
  }
 
  if (type === "canvas") {
+ if (!this.modelCanvasId) {
+ return;
+ }
+
  textureDefinition.options.id = this.modelCanvasId;
  }
 

src/components/InputDeviceConfig/NDI.vue

@@ -10,9 +10,11 @@
  <grid columns="4" class="device-config">
  <c span="3">Available NDI Sources</c>
  <c span="1"
- ><button @click="discover" :disabled="discovering">
- {{ discovering ? "Discovering…" : "Discover Sources" }}
- </button></c
+ ><Button class="light" @click="discover" :disabled="discovering">
+ {{
+ discovering ? `Discovering… (${timeRemaining})` : "Discover Sources"
+ }}
+ </Button></c
  >
  <c
  span="1.."
@@ -22,7 +24,11 @@
  >
  <grid columns="4">
  <c span="3">{{ source.name }}</c>
- <c><button @click="recieve(source)">Recieve source</button></c>
+ <c
+ ><Button class="light" @click="recieve(source)"
+ >Recieve source</Button
+ ></c
+ >
  </grid>
  </c>
  </grid>
@@ -41,14 +47,14 @@
  <grid columns="4">
  <c span="2">{{ receiver.receiver.source.name }}</c>
  <c
- ><button @click="toggleReceiver(receiver)">
+ ><Button class="light" @click="toggleReceiver(receiver)">
  {{ receiver.enabled ? "Disable" : "Enable" }}
- </button></c
+ </Button></c
  >
  <c
- ><button @click="removeReceiver(receiver)">
+ ><Button class="light" @click="removeReceiver(receiver)">
  Remove receiver
- </button></c
+ </Button></c
  >
  </grid>
  </c>
@@ -62,7 +68,10 @@ export default {
  return {
  iVTitle: "NDI Input Config",
  iVBody:
- "Configure your NDI inputs here. Click Discover Sources to search for NDI sources available on your network. Click Enable to create an NDI reciever so modV can consume the NDI source. Once a receiver has been created, click Remove Receiver to stop modV consuming the NDI source."
+ "Configure your NDI inputs here. Click Discover Sources to search for NDI sources available on your network. Click Enable to create an NDI reciever so modV can consume the NDI source. Once a receiver has been created, click Remove Receiver to stop modV consuming the NDI source.",
+
+ timeRemaining: 0,
+ timer: null
  };
  },
 
@@ -83,6 +92,15 @@ export default {
  methods: {
  discover() {
  this.$modV.store.dispatch("ndi/discoverSources");
+ this.timeRemaining = this.$modV.store.state.ndi.timeout / 1000;
+
+ this.timer = setInterval(() => {
+ this.timeRemaining -= 1;
+
+ if (this.timeRemaining < 1) {
+ clearInterval(this.timer);
+ }
+ }, 1000);
  },
 
  recieve(source) {
@@ -106,6 +124,14 @@ export default {
  receiverId: receiver.id
  });
  }
+ },
+
+ watch: {
+ discovering(value) {
+ if (!value) {
+ clearInterval(this.timer);
+ }
+ }
  }
 };
 </script>

vue.config.js

@@ -71,6 +71,8 @@ module.exports = {
  mac: {
  // See https://developer.apple.com/documentation/security/hardened_runtime
  hardenedRuntime: true,
+ // See https://github.com/vcync/modV/issues/413
+ strictVerify: false,
  gatekeeperAssess: false,
  entitlements: "build/entitlements.mac.plist",
  entitlementsInherit: "build/entitlements.mac.plist",