From a0db3c9154c3e63ae943982de273615b6893c3b2 Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Thu, 1 Jul 2021 21:34:21 +0100
Subject: [PATCH 1/6] fix: updates a group's outputContext name when group's
 name is updated (#604)

* fix: updates a group's outputContext name when group's name is updated

Adds new store methods for auxillary outputContexts and updating a group name

fixes #599

* fix: removes accidental code committed from a different feature branch

* fix: removes accidental code committed from a different feature branch
---
 .../worker/store/modules/groups.js            | 18 ++++
 .../worker/store/modules/outputs.js           | 12 +++
 src/components/Group.vue                      | 84 +------------------
 3 files changed, 33 insertions(+), 81 deletions(-)

diff --git a/src/application/worker/store/modules/groups.js b/src/application/worker/store/modules/groups.js
index c889b1d0e..7ec5bf8e7 100644
--- a/src/application/worker/store/modules/groups.js
+++ b/src/application/worker/store/modules/groups.js
@@ -194,6 +194,24 @@ const actions = {
       });
   },
 
+  updateGroupName({ commit }, { groupId, name }) {
+    const group = state.groups.find(group => group.id === groupId);
+
+    store.commit("outputs/UPDATE_AUXILLARY", {
+      auxillaryId: group.context.id,
+      data: {
+        name
+      }
+    });
+
+    commit("UPDATE_GROUP", {
+      groupId,
+      data: {
+        name
+      }
+    });
+  },
+
   async loadPresetData({ dispatch }, groups) {
     for (let i = 0, len = groups.length; i < len; i++) {
       const group = groups[i];
diff --git a/src/application/worker/store/modules/outputs.js b/src/application/worker/store/modules/outputs.js
index 1b47eb854..0a5185feb 100644
--- a/src/application/worker/store/modules/outputs.js
+++ b/src/application/worker/store/modules/outputs.js
@@ -127,6 +127,18 @@ const mutations = {
     Vue.delete(state.auxillary, id);
   },
 
+  UPDATE_AUXILLARY(state, { auxillaryId, data }) {
+    if (state.auxillary[auxillaryId]) {
+      const dataKeys = Object.keys(data);
+      const dataKeysLength = dataKeys.length;
+      for (let i = 0; i < dataKeysLength; i += 1) {
+        const key = dataKeys[i];
+        const value = data[key];
+        state.auxillary[auxillaryId][key] = value;
+      }
+    }
+  },
+
   RESIZE_MAIN_OUTPUT(state, { width, height }) {
     if (!state.main.canvas) {
       return;
diff --git a/src/components/Group.vue b/src/components/Group.vue
index 9049df73e..5e5ff2fcd 100644
--- a/src/components/Group.vue
+++ b/src/components/Group.vue
@@ -199,87 +199,11 @@
       </Container>
     </div>
   </div>
-
-  <!-- <div
-
-  >
-    <section class="group-controls">
-      <input
-        type="range"
-        v-model.number="alpha"
-        max="1"
-        min="0"
-        step="0.001"
-        class="group-alpha"
-        @mousedown="focusInput(group.alphaInputId, 'Alpha')"
-        :class="{
-          'has-link': hasLink(group.alphaInputId),
-          focused: isFocused(group.alphaInputId)
-        }"
-      />
-      <select
-        v-model="compositeOperation"
-        class="group-composite-operation"
-        @mousedown="
-          focusInput(group.compositeOperationInputId, 'Composite Operation')
-        "
-        :class="{
-          'has-link': hasLink(group.compositeOperationInputId),
-          focused: isFocused(group.compositeOperationInputId)
-        }"
-      >
-        <optgroup
-          v-for="group in compositeOperations"
-          :label="group.label"
-          :key="group.label"
-        >
-          <option
-            v-for="mode in group.children"
-            :value="mode.value"
-            :key="mode.label"
-            >{{ mode.label }}</option
-          >
-        </optgroup>
-      </select>
-    </section>
-    <section class="group-body">
-      <div class="group-title" @click.self="endTitleEditable">
-        <span v-if="!titleEditable" @dblclick="toggleTitleEditable">{{
-          name
-        }}</span>
-        <input
-          type="text"
-          v-model="localName"
-          v-else
-          @keypress.enter="endTitleEditable"
-        />
-      </div>
-      <Container
-        drag-handle-selector=".handle"
-        orientation="horizontal"
-        group-name="modules"
-        :should-animate-drop="() => false"
-        :get-child-payload="getChildPayload"
-        tag="div"
-        class="group-modules"
-        @drop="onDrop"
-      >
-        <Draggable
-          v-for="moduleId in modules"
-          :key="moduleId"
-          class="group-module"
-        >
-          <div class="group-module-container">
-            <ActiveModule :id="moduleId" @remove-module="removeModule" />
-          </div>
-        </Draggable>
-      </Container>
-    </section>
-  </div> -->
 </template>
 
 <script>
 import { Container, Draggable } from "vue-smooth-dnd";
+
 import ActiveModule from "./ActiveModule";
 import compositeOperations from "../util/composite-operations";
 import Arrow from "../assets/graphics/Arrow.svg";
@@ -533,11 +457,9 @@ export default {
       const trimmedName = localName.trim();
 
       if (trimmedName.length > 0) {
-        this.$modV.store.commit("groups/UPDATE_GROUP", {
+        this.$modV.store.dispatch("groups/updateGroupName", {
           groupId: this.groupId,
-          data: {
-            name: trimmedName
-          }
+          name: trimmedName
         });
       } else {
         this.localName = this.name;

From 48f00754764b54f2db3d2910f7d187a4f61fa346 Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Thu, 1 Jul 2021 21:36:45 +0100
Subject: [PATCH 2/6] feat(gallery): updates ordering of modules to be
 alphabetical (#606)

add a sort to modulesByRenderer

fixes #605
---
 src/components/Gallery.vue | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index 736d7d04c..b40320f3b 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -97,18 +97,24 @@ export default {
     },
 
     modulesByRenderer() {
-      return Object.keys(this.registeredModules).reduce((obj, key) => {
-        const module = this.registeredModules[key];
-        const { type, name } = module.meta;
-
-        if (!(type in obj)) {
-          obj[type] = {};
-        }
+      return Object.keys(this.registeredModules)
+        .sort((a, b) =>
+          this.registeredModules[a].meta.name.localeCompare(
+            this.registeredModules[b].meta.name
+          )
+        )
+        .reduce((obj, key) => {
+          const module = this.registeredModules[key];
+          const { type, name } = module.meta;
+
+          if (!(type in obj)) {
+            obj[type] = {};
+          }
 
-        obj[type][name] = module;
+          obj[type][name] = module;
 
-        return obj;
-      }, {});
+          return obj;
+        }, {});
     }
   },
 

From 1894edabfb44ff7cf700c5166c1719b0c0eec606 Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Thu, 1 Jul 2021 21:44:59 +0100
Subject: [PATCH 3/6] feat(group-inheritance): adds group inheritance option
 (#607)

restores modV 2 functionality. replaces the inheritance checkbox on groups with a select input

fixes #603

Co-authored-by: Tim Pietrusky <timpietrusky@gmail.com>
---
 src/application/worker/loop.js                | 12 +++--
 .../worker/store/modules/groups.js            |  7 +--
 src/components/Group.vue                      | 54 +++++++++++++++----
 3 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/src/application/worker/loop.js b/src/application/worker/loop.js
index d3310f1a1..e52c902be 100644
--- a/src/application/worker/loop.js
+++ b/src/application/worker/loop.js
@@ -100,7 +100,7 @@ function loop(delta, features) {
       continue;
     }
 
-    const { clearing, inherit, pipeline } = group;
+    const { clearing, inherit, inheritFrom, pipeline } = group;
 
     const aux = group.drawToCanvasId && auxillary[group.drawToCanvasId].context;
     const groupContext = group.context.context;
@@ -124,8 +124,14 @@ function loop(delta, features) {
     }
 
     if (inherit) {
+      const canvasToInherit =
+        inheritFrom === -1
+          ? lastCanvas
+          : groups.find(group => group.id === inheritFrom).context.context
+              .canvas;
+
       drawTo.drawImage(
-        lastCanvas,
+        canvasToInherit,
         0,
         0,
         drawTo.canvas.width,
@@ -134,7 +140,7 @@ function loop(delta, features) {
 
       if (pipeline && !isGalleryGroup) {
         bufferContext.drawImage(
-          lastCanvas,
+          canvasToInherit,
           0,
           0,
           drawTo.canvas.width,
diff --git a/src/application/worker/store/modules/groups.js b/src/application/worker/store/modules/groups.js
index 7ec5bf8e7..9c62a753b 100644
--- a/src/application/worker/store/modules/groups.js
+++ b/src/application/worker/store/modules/groups.js
@@ -22,9 +22,9 @@ import uuidv4 from "uuid/v4";
  * @property {Boolean} inherit             Indicates whether the Group should inherit from another
  *                                         Group at redraw
  *
- * @property {Number}  inheritFrom         The target Group to inherit from, -1 being the previous
- *                                         Group in modV#Groups, 0-n being the index of
- *                                         another Group within modV#Groups
+ * @property {String|Number}  inheritFrom  The target Group to inherit from, -1 being the previous
+ *                                         Group in modV#Groups, UUID4 string being the ID of
+ *                                         another Group within modV.store.state.groups.groups
  *
  * @property {Boolean} pipeline            Indicates whether the Group should render using pipeline
  *                                         at redraw
@@ -120,6 +120,7 @@ const actions = {
       hidden: args.hidden || false,
       modules: args.modules || [],
       inherit,
+      inheritFrom: -1,
       alpha: args.alpha || 1,
       compositeOperation: args.compositeOperation || "normal",
       context: await store.dispatch("outputs/getAuxillaryOutput", {
diff --git a/src/components/Group.vue b/src/components/Group.vue
index 5e5ff2fcd..7e00b8045 100644
--- a/src/components/Group.vue
+++ b/src/components/Group.vue
@@ -41,11 +41,21 @@
             }"
           >
             <c span="2">Inherit</c>
-            <c span="4"
-              ><Checkbox
-                v-model="inherit"
+            <c span="4">
+              <Select
+                v-model="inheritanceSelection"
                 :class="{ light: isFocused(group.inheritInputId) }"
-            /></c>
+              >
+                <option :value="-2">Don't Inherit</option>
+                <option :value="-1">Previous Group</option>
+                <option
+                  v-for="group in groups"
+                  :key="group.id"
+                  :value="group.id"
+                  >{{ group.name }}</option
+                >
+              </Select>
+            </c>
           </grid>
         </c>
 
@@ -203,7 +213,7 @@
 
 <script>
 import { Container, Draggable } from "vue-smooth-dnd";
-
+import constants from "../application/constants";
 import ActiveModule from "./ActiveModule";
 import compositeOperations from "../util/composite-operations";
 import Arrow from "../assets/graphics/Arrow.svg";
@@ -248,12 +258,14 @@ export default {
       titleEditable: false,
       localName: "",
       controlsShown: false,
-      Arrow
+      Arrow,
+      inheritanceSelection: -1
     };
   },
 
   created() {
     this.localName = this.name;
+    this.inheritanceSelection = !this.inherit ? -2 : this.inheritFrom;
 
     if (!this.focusedGroup) {
       this.focus();
@@ -261,10 +273,13 @@ export default {
   },
 
   computed: {
-    group() {
+    groups() {
       return this.$modV.store.state.groups.groups.filter(
-        group => group.id === this.groupId
-      )[0];
+        group => group.name !== constants.GALLERY_GROUP_NAME
+      );
+    },
+    group() {
+      return this.groups.filter(group => group.id === this.groupId)[0];
     },
 
     name() {
@@ -328,6 +343,10 @@ export default {
       }
     },
 
+    inheritFrom() {
+      return this.group.inheritFrom;
+    },
+
     pipeline: {
       get() {
         return this.group.pipeline;
@@ -493,6 +512,23 @@ export default {
   watch: {
     name(value) {
       this.localName = value;
+    },
+
+    inheritanceSelection(value) {
+      const inheritFrom = value.length === 2 ? parseInt(value) : value;
+
+      if (inheritFrom === -2) {
+        this.inherit = false;
+      } else {
+        this.inherit = true;
+
+        this.$modV.store.commit("groups/UPDATE_GROUP", {
+          groupId: this.groupId,
+          data: {
+            inheritFrom
+          }
+        });
+      }
     }
   }
 };

From 33109cdaf4686d4c4b3b5c6ca43fb5c83e9e10e4 Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Thu, 1 Jul 2021 21:48:31 +0100
Subject: [PATCH 4/6] feat: adds localStorage saving for audio and video inputs
 (#608)

removes vuex-localstorage in favour of vuex-persistedstate

fixes #470
---
 package.json                          |  1 +
 src/application/worker/store/index.js | 16 ++++++++++++++++
 yarn.lock                             | 18 ++++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/package.json b/package.json
index eedab3e72..e7d2d570d 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "vue-property-decorator": "^8.3.0",
     "vue-smooth-dnd": "^0.8.1",
     "vuex": "^3.1.2",
+    "vuex-persistedstate": "^4.0.0-beta.3",
     "webpack": "^4.43.0",
     "webpack-2": "npm:webpack@2.7.0"
   },
diff --git a/src/application/worker/store/index.js b/src/application/worker/store/index.js
index ae68f53e8..a1583374e 100644
--- a/src/application/worker/store/index.js
+++ b/src/application/worker/store/index.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import createPersistedState from "vuex-persistedstate";
 
 const requireModule = require.context("./modules/", false, /\.js$/);
 const modules = {};
@@ -15,7 +16,22 @@ for (let i = 0, len = moduleKeys.length; i < len; i++) {
 
 Vue.use(Vuex);
 
+const plugins = [];
+
+// createPersistedState doesn't work in the worker store, so don't run it there.
+// That's okay as the worker doesn't need to know about mediaStream.
+// If we want other persisted items that the worker needs to know about
+// we'll need to implement something more complex to commit via postMessage.
+if (self.document !== undefined) {
+  const dataState = createPersistedState({
+    paths: ["mediaStream"]
+  });
+
+  plugins.push(dataState);
+}
+
 export default new Vuex.Store({
   modules,
+  plugins,
   strict: false
 });
diff --git a/yarn.lock b/yarn.lock
index 9b24b71ec..c8b2afc64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3597,6 +3597,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -10506,6 +10511,11 @@ shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+shvl@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/shvl/-/shvl-2.0.3.tgz#eb4bd37644f5684bba1fc52c3010c96fb5e6afd1"
+  integrity sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==
+
 signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -12073,6 +12083,14 @@ vuex-localstorage@^1.0.0:
   resolved "https://registry.yarnpkg.com/vuex-localstorage/-/vuex-localstorage-1.0.0.tgz#3d680e9f6feee26d1a72a9c84ebd9daa64a06536"
   integrity sha1-PWgOn2/u4m0acqnITr2dqmSgZTY=
 
+vuex-persistedstate@^4.0.0-beta.3:
+  version "4.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-4.0.0-beta.3.tgz#89dd712de72d28e85cc95467d066002c1405f277"
+  integrity sha512-T4IRD27qoUWh+8qr6T6zVp15xO7x/nPgnU13OD0C2uUwA7U9PhGozrj6lvVmMYDyRgc36J0msMXn3GvwHjkIhA==
+  dependencies:
+    deepmerge "^4.2.2"
+    shvl "^2.0.2"
+
 vuex@^3.1.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.4.0.tgz#20cc086062d750769fce1febb34e7fceeaebde45"

From f9f2b90e99325898a7aa47c3c5cddd7420264e3c Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Thu, 1 Jul 2021 21:59:23 +0100
Subject: [PATCH 5/6] feat(fft): adds fft (#611)

* feat(fft): Pass u_fft into shader

* refactor: updates fft code to be re-useable between any module or renderer

Co-authored-by: Tim Pietrusky <timpietrusky@gmail.com>
---
 src/application/constants.js                  |  4 +++
 src/application/index.js                      |  7 +++-
 .../renderers/shader/default-shader.js        |  4 +++
 src/application/renderers/shader/index.js     | 18 +++++++++-
 src/application/setup-media.js                | 34 ++++++++++++++++---
 src/application/worker/index.worker.js        | 13 ++++++-
 src/application/worker/loop.js                | 22 ++++++++++--
 src/application/worker/store/modules/meyda.js |  1 +
 8 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/src/application/constants.js b/src/application/constants.js
index 04fd2f2b4..c397f5612 100644
--- a/src/application/constants.js
+++ b/src/application/constants.js
@@ -9,5 +9,9 @@ export default {
 
   get LAYOUT_LOAD_ERROR() {
     return "layoutLoadError";
+  },
+
+  get AUDIO_BUFFER_SIZE() {
+    return 512;
   }
 };
diff --git a/src/application/index.js b/src/application/index.js
index 7b93ad05d..9d9c4928f 100644
--- a/src/application/index.js
+++ b/src/application/index.js
@@ -1,5 +1,9 @@
 import Worker from "worker-loader!./worker/index.worker.js";
-import { setupMedia, enumerateDevices } from "./setup-media";
+import {
+  setupMedia,
+  enumerateDevices,
+  getByteFrequencyData
+} from "./setup-media";
 import setupBeatDetektor from "./setup-beat-detektor";
 import setupMidi from "./setup-midi";
 
@@ -244,6 +248,7 @@ export default class ModV {
 
     const features = this.meyda.get(featuresToGet);
     this.updateBeatDetektor(delta, features);
+    features.byteFrequencyData = Array.from(getByteFrequencyData() || []);
     this.$worker.postMessage({ type: "meyda", payload: features });
 
     for (let i = 0; i < featuresToGet.length; i += 1) {
diff --git a/src/application/renderers/shader/default-shader.js b/src/application/renderers/shader/default-shader.js
index 35eba0173..6c101c471 100644
--- a/src/application/renderers/shader/default-shader.js
+++ b/src/application/renderers/shader/default-shader.js
@@ -29,6 +29,8 @@ export default {
     uniform sampler2D iChannel2;             // Texture #3
     uniform sampler2D iChannel3;             // Texture #4
     uniform sampler2D u_modVCanvas;          // modV's canvas
+    uniform sampler2D u_fft;                 // fft texture
+    uniform float     u_fftResolution;       // fft texture width
 
     varying vec2 vUv;
 
@@ -62,6 +64,8 @@ export default {
     uniform sampler2D iChannel2;             // Texture #3
     uniform sampler2D iChannel3;             // Texture #4
     uniform sampler2D u_modVCanvas;          // modV's canvas
+    uniform sampler2D u_fft;                 // fft texture
+    uniform float     u_fftResolution;       // fft texture width
 
     in vec2 vUv;
     out vec4 outColor;
diff --git a/src/application/renderers/shader/index.js b/src/application/renderers/shader/index.js
index 6bd248815..27de79e99 100644
--- a/src/application/renderers/shader/index.js
+++ b/src/application/renderers/shader/index.js
@@ -25,6 +25,7 @@ const indices = pex.indexBuffer([0, 1, 2, 3, 4, 5]);
 const commands = {};
 
 let canvasTexture;
+let fftTexture;
 
 const clearCmd = {
   pass: pex.pass({
@@ -63,6 +64,8 @@ function generateUniforms(canvasTexture, uniforms) {
     iChannel3: canvasTexture,
     iChannelResolution: [resolution, resolution, resolution, resolution],
     u_modVCanvas: canvasTexture,
+    u_fft: fftTexture,
+    u_fftResolution: fftTexture ? fftTexture.width : 1,
     u_delta: time / 1000,
     u_time: time
   };
@@ -138,7 +141,7 @@ async function setupModule(Module) {
   }
 }
 
-function render({ module, props, canvas, context, pipeline }) {
+function render({ module, props, canvas, context, pipeline, fftCanvas }) {
   resize({ width: canvas.width, height: canvas.height });
 
   if (!canvasTexture) {
@@ -152,12 +155,25 @@ function render({ module, props, canvas, context, pipeline }) {
       mag: pex.Filter.Linear,
       wrap: pex.Wrap.Repeat
     });
+    fftTexture = pex.texture2D({
+      data: fftCanvas.data || fftCanvas,
+      width: fftCanvas.width,
+      height: 1,
+      pixelFormat: pex.PixelFormat.RGBA8,
+      encoding: pex.Encoding.Linear,
+      wrap: pex.Wrap.Repeat
+    });
   } else {
     pex.update(canvasTexture, {
       width: canvas.width,
       height: canvas.height,
       data: canvas.data || canvas
     });
+    pex.update(fftTexture, {
+      width: fftCanvas.width,
+      height: 1,
+      data: fftCanvas.data || fftCanvas
+    });
   }
 
   const shaderUniforms = {};
diff --git a/src/application/setup-media.js b/src/application/setup-media.js
index 638c4f2f7..116080c4f 100644
--- a/src/application/setup-media.js
+++ b/src/application/setup-media.js
@@ -1,4 +1,9 @@
 import Meyda from "meyda";
+import constants from "./constants";
+
+let floatFrequencyDataArray;
+let byteFrequencyDataArray;
+let analyserNode;
 
 async function enumerateDevices() {
   const { _store: store } = this;
@@ -114,7 +119,12 @@ async function setupMedia({ audioId, videoId }) {
   });
 
   // Create new Audio Analyser
-  this.analyserNode = this.audioContext.createAnalyser();
+  analyserNode = this.audioContext.createAnalyser();
+  analyserNode.smoothingTimeConstant = 0;
+
+  // Set up arrays for analyser
+  floatFrequencyDataArray = new Float32Array(analyserNode.frequencyBinCount);
+  byteFrequencyDataArray = new Uint8Array(analyserNode.frequencyBinCount);
 
   // Create a gain node
   this.gainNode = this.audioContext.createGain();
@@ -126,7 +136,7 @@ async function setupMedia({ audioId, videoId }) {
   this.audioStream = this.audioContext.createMediaStreamSource(mediaStream);
 
   // Connect the audio stream to the analyser (this is a passthru) (audio->(analyser))
-  this.audioStream.connect(this.analyserNode);
+  this.audioStream.connect(analyserNode);
 
   // Connect the audio stream to the gain node (audio->(analyser)->gain)
   this.audioStream.connect(this.gainNode);
@@ -139,7 +149,7 @@ async function setupMedia({ audioId, videoId }) {
   this.meyda = new Meyda.createMeydaAnalyzer({
     audioContext: this.audioContext,
     source: this.audioStream,
-    bufferSize: 512,
+    bufferSize: constants.AUDIO_BUFFER_SIZE,
     windowingFunction: "rect",
     featureExtractors: ["complexSpectrum"]
   });
@@ -161,4 +171,20 @@ async function setupMedia({ audioId, videoId }) {
   return mediaStream;
 }
 
-export { enumerateDevices, setupMedia };
+function getFloatFrequencyData() {
+  analyserNode.getFloatFrequencyData(floatFrequencyDataArray);
+
+  return floatFrequencyDataArray;
+}
+
+function getByteFrequencyData() {
+  analyserNode.getByteFrequencyData(byteFrequencyDataArray);
+  return byteFrequencyDataArray;
+}
+
+export {
+  enumerateDevices,
+  setupMedia,
+  getFloatFrequencyData,
+  getByteFrequencyData
+};
diff --git a/src/application/worker/index.worker.js b/src/application/worker/index.worker.js
index a6aea5bfc..dc344a056 100644
--- a/src/application/worker/index.worker.js
+++ b/src/application/worker/index.worker.js
@@ -1,5 +1,7 @@
 /* eslint-env worker node */
 
+const { default: constants } = require("../constants");
+
 let lastKick = false;
 
 async function start() {
@@ -126,6 +128,15 @@ async function start() {
   });
   store.dispatch("outputs/setWebcamOutput", webcamOutput.context);
 
+  const fftOutput = await store.dispatch("outputs/getAuxillaryOutput", {
+    name: "fft",
+    reactToResize: false,
+    width: constants.AUDIO_BUFFER_SIZE,
+    height: 1,
+    group: "audio",
+    id: "fft"
+  });
+
   // eslint-disable-next-line
   let raf = requestAnimationFrame(looper);
   let frames = 0;
@@ -168,7 +179,7 @@ async function start() {
       payload: delta
     });
 
-    loop(delta, getFeatures());
+    loop(delta, getFeatures(), fftOutput);
 
     frameTick();
     frames += 1;
diff --git a/src/application/worker/loop.js b/src/application/worker/loop.js
index e52c902be..437ef08f1 100644
--- a/src/application/worker/loop.js
+++ b/src/application/worker/loop.js
@@ -9,8 +9,9 @@ const meyda = { windowing: applyWindow };
 
 let bufferCanvas;
 let bufferContext;
+const fallbackByteFrequencyData = Array(constants.AUDIO_BUFFER_SIZE).fill(0);
 
-function loop(delta, features) {
+function loop(delta, features, fftOutput) {
   if (!bufferCanvas) {
     bufferCanvas = new OffscreenCanvas(300, 300);
     bufferContext = bufferCanvas.getContext("2d");
@@ -37,6 +38,22 @@ function loop(delta, features) {
     return;
   }
 
+  // Put fftBuffer on fftCanvas
+  const byteFrequencyData =
+    features.byteFrequencyData || fallbackByteFrequencyData;
+  const fftBuffer = byteFrequencyData.reduce((arr, value) => {
+    arr.push(value, value, value, 255);
+    return arr;
+  }, []);
+
+  const uInt8Array = Uint8ClampedArray.from(fftBuffer);
+
+  fftOutput.context.putImageData(
+    new ImageData(uInt8Array, byteFrequencyData.length),
+    0,
+    0
+  );
+
   // Update Input Links
   const inputLinkKeys = Object.keys(inputLinks);
   const inputLinkKeysLength = inputLinkKeys.length;
@@ -209,7 +226,8 @@ function loop(delta, features) {
         props,
         data: moduleData,
         pipeline,
-        kick
+        kick,
+        fftCanvas: fftOutput.context.canvas
       });
       drawTo.restore();
 
diff --git a/src/application/worker/store/modules/meyda.js b/src/application/worker/store/modules/meyda.js
index eba5dee08..e55145ace 100644
--- a/src/application/worker/store/modules/meyda.js
+++ b/src/application/worker/store/modules/meyda.js
@@ -10,6 +10,7 @@ import uuidv4 from "uuid/v4";
 
 const state = {
   features: [
+    "buffer",
     "complexSpectrum",
     "rms",
     "zcr",

From d7ca887ea837c52a28e5649aa469868662490c7b Mon Sep 17 00:00:00 2001
From: Tim Pietrusky <timpietrusky@gmail.com>
Date: Thu, 1 Jul 2021 23:13:26 +0200
Subject: [PATCH 6/6] feat(grabCanvas): Adds grab-canvas as a plugin (#612)

* feat(grabcanvas): adds grabCanvas plugin

also adds the plugin panel and adds some plugin lifecycle functions

#366

* feat(pluginprops): adds plugin props

splits the Control component out into ModuleControl and PluginControl to allow code re-use. Adds
store methods for plugin props.

re #366

* fix: removes unnecessary gl-stack for plugins

* feat: adds infoview directive for plugins panel

* feat: adds searchterms directive

* fix(grab-canvas): Clear mappingContext on every frame

* refactor(grab-canvas): Set default size to 7x7

* refactor(grab-canvas): Proper reconnect and restructure of code

Co-authored-by: Sam Wray <sam@wray.pro>
---
 src/App.vue                                   |   8 +-
 src/application/plugins/grab-canvas.js        | 185 ++++++++++++++++++
 src/application/worker/index.worker.js        |   5 +-
 src/application/worker/loop.js                |  19 +-
 .../worker/store/modules/outputs.js           |  12 +-
 .../worker/store/modules/plugins.js           | 108 +++++++++-
 src/components/Control.vue                    |  85 ++++----
 src/components/Controls/RangeControl.vue      |   5 +-
 src/components/ModuleControl.vue              |  79 ++++++++
 src/components/ModuleInspector.vue            |   6 +-
 src/components/PluginControl.vue              |  85 ++++++++
 src/components/Plugins.vue                    |  89 +++++++++
 12 files changed, 626 insertions(+), 60 deletions(-)
 create mode 100644 src/application/plugins/grab-canvas.js
 create mode 100644 src/components/ModuleControl.vue
 create mode 100644 src/components/PluginControl.vue
 create mode 100644 src/components/Plugins.vue

diff --git a/src/App.vue b/src/App.vue
index 761c951fc..1185ec431 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,6 +66,10 @@
                 <NDIConfig />
               </gl-component>
             </gl-stack>
+
+            <gl-component title="Plugins" :closable="false">
+              <Plugins />
+            </gl-component>
           </gl-stack>
 
           <gl-stack title="Preview Stack">
@@ -101,6 +105,7 @@ import InfoView from "@/components/InfoView";
 import Search from "@/components/Search";
 import FrameRateDialog from "@/components/dialogs/FrameRateDialog";
 import ErrorWatcher from "@/components/ErrorWatcher";
+import Plugins from "@/components/Plugins";
 
 import getNextName from "@/application/utils/get-next-name";
 import constants from "@/application/constants";
@@ -125,7 +130,8 @@ export default {
     ModuleInspector,
     Search,
     FrameRateDialog,
-    ErrorWatcher
+    ErrorWatcher,
+    Plugins
   },
 
   data() {
diff --git a/src/application/plugins/grab-canvas.js b/src/application/plugins/grab-canvas.js
new file mode 100644
index 000000000..a4b9e93c9
--- /dev/null
+++ b/src/application/plugins/grab-canvas.js
@@ -0,0 +1,185 @@
+const mappingCanvas = new OffscreenCanvas(1, 1);
+mappingCanvas.title = "mappingCanvas";
+
+let timeout = 0;
+let connection = undefined;
+let outputContext = null;
+let reconnect = false;
+
+const mappingContext = mappingCanvas.getContext("2d", {
+  // Boolean that indicates if the canvas contains an alpha channel.
+  // If set to false, the browser now knows that the backdrop is always opaque,
+  // which can speed up drawing of transparent content and images.
+  // (lights don't have an alpha channel, so let's drop it)
+  alpha: false,
+  desynchronized: true,
+  imageSmoothingEnabled: false
+});
+
+export default {
+  name: "Grab Canvas",
+  props: {
+    mappingWidth: {
+      type: "int",
+      default: 7,
+      min: 1,
+      max: 1024,
+      step: 1,
+      abs: true
+    },
+
+    mappingHeight: {
+      type: "int",
+      default: 7,
+      min: 1,
+      max: 1024,
+      step: 1,
+      abs: true
+    },
+
+    url: {
+      type: "text",
+      default: "ws://localhost:3006/modV"
+    },
+
+    reconnectAfter: {
+      type: "int",
+      default: 4000,
+      min: 1000,
+      max: 60000,
+      step: 1,
+      abs: true
+    },
+
+    shouldReconnect: {
+      type: "bool",
+      default: true
+    }
+  },
+
+  async init({ store, props }) {
+    if (!outputContext) {
+      outputContext = await store.dispatch("outputs/getAuxillaryOutput", {
+        name: "Fixture Canvas",
+        group: "Plugins",
+        canvas: mappingCanvas,
+        context: mappingContext,
+        reactToResize: false
+      });
+    }
+
+    mappingCanvas.width = props.mappingWidth;
+    mappingCanvas.height = props.mappingHeight;
+
+    reconnect = props.shouldReconnect;
+
+    this.setupSocket(props);
+  },
+
+  shutdown() {
+    this.stopReconnect();
+    this.closeConnection();
+  },
+
+  /**
+   * Create a WebSocket for example to luminave
+   */
+  setupSocket(props) {
+    const { url, reconnectAfter } = props;
+
+    // Close an old connection
+    this.closeConnection();
+
+    // Create a new connection
+    connection = new WebSocket(url);
+
+    // Listen for errors (e.g. could not connect)
+    connection.addEventListener("error", event => {
+      console.error("grab-canvas: WebSocket: Error:", event);
+
+      // Reconnect is allowed
+      if (reconnect) {
+        // Reconnect after a specific amount of time
+        timeout = setTimeout(() => {
+          this.setupSocket(props);
+        }, reconnectAfter);
+      }
+    });
+
+    // Connection is opened
+    connection.addEventListener("open", () => {
+      console.info("grab-canvas: WebSocket: Opened");
+    });
+
+    connection.addEventListener("close", () => {
+      console.info("grab-canvas: WebSocket: Closed");
+    });
+  },
+
+  /**
+   * Close the WebSocket connection and stop reconnecting
+   */
+  closeConnection() {
+    clearTimeout(timeout);
+
+    if (connection !== undefined) {
+      connection.close();
+    }
+
+    connection = undefined;
+  },
+
+  /**
+   * Stop reconnecting to WebSocket
+   */
+  stopReconnect() {
+    reconnect = false;
+    clearTimeout(timeout);
+  },
+
+  postProcessFrame({ canvas, props }) {
+    mappingContext.clearRect(0, 0, canvas.width, canvas.height);
+    mappingContext.drawImage(
+      canvas,
+      0,
+      0,
+      canvas.width,
+      canvas.height,
+      0,
+      0,
+      props.mappingWidth,
+      props.mappingHeight
+    );
+
+    const imageData = mappingContext.getImageData(
+      0,
+      0,
+      props.mappingWidth,
+      props.mappingHeight
+    );
+    const { data } = imageData;
+    const arrayData = Array.from(data);
+    const rgbArray = arrayData.filter((value, index) => (index + 1) % 4 !== 0);
+
+    this.send(rgbArray);
+  },
+
+  /**
+   * Send data to WebSocket if connection is established
+   * @param {Object} data
+   */
+  send(data) {
+    // Connection is established
+    if (connection !== undefined && connection.readyState === 1) {
+      const message = {
+        _type: "modV",
+        colors: data
+      };
+
+      const messageString = JSON.stringify(message, null, 2);
+
+      // Send JSON message
+      connection.send(messageString);
+    }
+  }
+};
diff --git a/src/application/worker/index.worker.js b/src/application/worker/index.worker.js
index dc344a056..d51c6d85f 100644
--- a/src/application/worker/index.worker.js
+++ b/src/application/worker/index.worker.js
@@ -1,5 +1,4 @@
 /* eslint-env worker node */
-
 const { default: constants } = require("../constants");
 
 let lastKick = false;
@@ -9,6 +8,8 @@ async function start() {
   const fs = require("fs");
   const store = require("./store").default;
   const loop = require("./loop").default;
+  const grabCanvasPlugin = require("../plugins/grab-canvas").default;
+
   const { tick: frameTick } = require("./frame-counter");
   const { getFeatures, setFeatures } = require("./audio-features");
   // const featureAssignmentPlugin = require("../plugins/feature-assignment");
@@ -45,6 +46,8 @@ async function start() {
     });
   });
 
+  store.dispatch("plugins/add", grabCanvasPlugin);
+
   const renderers = require.context("../renderers/", false, /\.js$/);
 
   const rendererKeys = renderers.keys();
diff --git a/src/application/worker/loop.js b/src/application/worker/loop.js
index 437ef08f1..a1ade5c43 100644
--- a/src/application/worker/loop.js
+++ b/src/application/worker/loop.js
@@ -96,7 +96,11 @@ function loop(delta, features, fftOutput) {
   const preProcessFrameFunctionsLength = preProcessFrameFunctions.length;
 
   for (let i = 0; i < preProcessFrameFunctionsLength; ++i) {
-    preProcessFrameFunctions[i].preProcessFrame({ features, store });
+    preProcessFrameFunctions[i].preProcessFrame({
+      features,
+      store,
+      props: preProcessFrameFunctions[i].$props
+    });
   }
 
   const renderersWithTick = store.getters["renderers/renderersWithTick"];
@@ -338,7 +342,18 @@ function loop(delta, features, fftOutput) {
     }
   }
 
-  // main.getImageData(0, 0, main.canvas.width, main.canvas.height);
+  const postProcessFrameFunctions =
+    store.getters["plugins/postProcessFrame"] || [];
+  const postProcessFrameFunctionsLength = postProcessFrameFunctions.length;
+
+  for (let i = 0; i < postProcessFrameFunctionsLength; ++i) {
+    postProcessFrameFunctions[i].postProcessFrame({
+      canvas: main.canvas,
+      features,
+      store,
+      props: postProcessFrameFunctions[i].$props
+    });
+  }
 }
 
 export default loop;
diff --git a/src/application/worker/store/modules/outputs.js b/src/application/worker/store/modules/outputs.js
index 0a5185feb..c0b8e7046 100644
--- a/src/application/worker/store/modules/outputs.js
+++ b/src/application/worker/store/modules/outputs.js
@@ -49,6 +49,7 @@ const actions = {
     { dispatch },
     {
       canvas = new OffscreenCanvas(300, 300),
+      context,
       name,
       type = "2d",
       options = {},
@@ -63,13 +64,16 @@ const actions = {
       options.storage = "discardable";
     }
 
-    const context = canvas.getContext(type, options);
-    canvas.width = width;
-    canvas.height = height;
+    if (!context) {
+      canvas.width = width;
+      canvas.height = height;
+    }
+
+    const canvasContext = context || canvas.getContext(type, options);
 
     const outputContext = await dispatch("addAuxillaryOutput", {
       name,
-      context,
+      context: canvasContext,
       reactToResize,
       group,
       id
diff --git a/src/application/worker/store/modules/plugins.js b/src/application/worker/store/modules/plugins.js
index c3f540ed8..d4dcaa0c0 100644
--- a/src/application/worker/store/modules/plugins.js
+++ b/src/application/worker/store/modules/plugins.js
@@ -1,4 +1,5 @@
 import store from "../";
+import getPropDefault from "../../../utils/get-prop-default";
 
 import uuidv4 from "uuid/v4";
 
@@ -15,12 +16,16 @@ const state = [];
 
 const getters = {
   preProcessFrame: state => {
-    return state.filter(plugin => !!plugin.preProcessFrame);
+    return state.filter(plugin => !!plugin.preProcessFrame && plugin.enabled);
+  },
+
+  postProcessFrame: state => {
+    return state.filter(plugin => !!plugin.postProcessFrame && plugin.enabled);
   }
 };
 
 const actions = {
-  add({ commit }, plugin) {
+  async add({ commit }, plugin) {
     if (!("name" in plugin)) {
       throw new Error("Plugin requires a name");
     }
@@ -30,14 +35,113 @@ const actions = {
       store.registerModule(storeName, plugin.store);
     }
 
+    plugin.$props = {};
+
+    if ("props" in plugin) {
+      const keys = Object.keys(plugin.props);
+      const keysLength = keys.length;
+
+      for (let i = 0; i < keysLength; i += 1) {
+        const key = keys[i];
+        const prop = plugin.props[key];
+
+        plugin.$props[key] = await getPropDefault(module, key, prop, false);
+
+        if (!plugin.$props[key]) {
+          plugin.$props[key] = null;
+        }
+      }
+    }
+
     plugin.id = uuidv4();
+    plugin.enabled = false;
     commit("ADD_PLUGIN", plugin);
+  },
+
+  setEnabled({ commit }, { pluginId, enabled }) {
+    const plugin = state.find(item => item.id === pluginId);
+
+    if (!plugin) {
+      return false;
+    }
+
+    if (enabled) {
+      if ("init" in plugin) {
+        plugin.init({ store, props: plugin.$props });
+      }
+    } else {
+      if ("shutdown" in plugin) {
+        plugin.shutdown({ store, props: plugin.$props });
+      }
+    }
+
+    commit("SET_PLUGIN_ENABLE", { pluginId, enabled });
+  },
+
+  async updateProp({ commit }, { pluginId, prop, data }) {
+    const plugin = state.find(item => item.id === pluginId);
+
+    if (!plugin) {
+      return false;
+    }
+
+    let dataOut = data;
+
+    const propData = plugin.props[prop];
+    const currentValue = plugin.$props[prop];
+    const { type } = propData;
+
+    if (data === currentValue) {
+      return;
+    }
+
+    if (store.state.dataTypes[type] && store.state.dataTypes[type].create) {
+      dataOut = await store.state.dataTypes[type].create(dataOut);
+    }
+
+    if (!Array.isArray(dataOut)) {
+      const { strict, min, max, abs } = propData;
+
+      if (strict && typeof min !== "undefined" && typeof max !== "undefined") {
+        dataOut = Math.min(Math.max(dataOut, min), max);
+      }
+
+      if (abs) {
+        dataOut = Math.abs(dataOut);
+      }
+
+      if (type === "int") {
+        dataOut = Math.round(dataOut);
+      }
+    }
+
+    commit("UPDATE_PROP", { pluginId, prop, data: dataOut });
   }
 };
 
 const mutations = {
   ADD_PLUGIN(state, plugin) {
     state.push(plugin);
+  },
+
+  SET_PLUGIN_ENABLE(state, { pluginId, enabled }) {
+    const plugin = state.find(item => item.id === pluginId);
+
+    if (!plugin) {
+      return false;
+    }
+
+    plugin.enabled = enabled;
+  },
+
+  UPDATE_PROP(state, { pluginId, prop, data }) {
+    const plugin = state.find(item => item.id === pluginId);
+
+    if (!plugin) {
+      return false;
+    }
+
+    plugin.$props[prop] = data;
   }
 };
 
diff --git a/src/components/Control.vue b/src/components/Control.vue
index 3870ef584..9715067f4 100644
--- a/src/components/Control.vue
+++ b/src/components/Control.vue
@@ -9,42 +9,43 @@
     </c>
     <c span="3">
       <div class="input" v-if="component">
-        <component :is="component" v-model="value" />
+        <component :is="component" v-model="internalValue" />
       </div>
       <div class="input" v-else-if="type === 'int' || type === 'float'">
         <RangeControl
           :min="min"
           :max="max"
-          v-model.number="value"
+          :step="step"
+          v-model.number="internalValue"
           :type="type"
         />
       </div>
       <div class="input" v-else-if="type === 'tween'">
-        <TweenControl v-model="value" />
+        <TweenControl v-model="internalValue" />
       </div>
       <div class="input" v-else-if="type === 'vec2'">
-        <Vec2DControl v-model="value" />
+        <Vec2DControl v-model="internalValue" />
       </div>
       <div class="input" v-else-if="type === 'vec3'">
-        <Vec3Control v-model="value" />
+        <Vec3Control v-model="internalValue" />
       </div>
       <div class="input" v-else-if="type === 'vec4'">
-        <Vec4Control v-model="value" />
+        <Vec4Control v-model="internalValue" />
       </div>
       <div class="input" v-else-if="type === 'text'">
-        <input type="text" v-model="value" />
+        <input type="text" v-model="internalValue" />
       </div>
       <div class="input" v-else-if="type === 'bool'">
-        <Checkbox :class="{ light: !inputIsFocused }" v-model="value" />
+        <Checkbox :class="{ light: !inputIsFocused }" v-model="internalValue" />
       </div>
       <div class="input" v-else-if="type === 'color'">
-        <ColorControl v-model="value" :moduleId="id" :prop="prop" />
+        <ColorControl v-model="internalValue" :moduleId="id" :prop="prop" />
       </div>
       <div class="input" v-else-if="type === 'texture'">
-        <TextureControl v-model="value" />
+        <TextureControl v-model="internalValue" />
       </div>
       <div class="input" v-else-if="type === 'enum'">
-        <select v-model="value">
+        <select v-model="internalValue">
           <option
             v-for="(option, index) in activeProp.enum"
             :value="option.value"
@@ -75,7 +76,26 @@ import inputIsFocused from "./mixins/input-is-focused";
 export default {
   mixins: [hasLink, inputIsFocused],
 
-  props: ["id", "prop"],
+  props: {
+    inputTitle: {
+      type: String,
+      default: ""
+    },
+
+    title: {
+      type: String,
+      required: true
+    },
+
+    value: {
+      required: true
+    },
+
+    activeProp: {
+      type: Object,
+      required: true
+    }
+  },
 
   components: {
     RangeControl,
@@ -105,17 +125,9 @@ export default {
 
   methods: {
     async queueLoop() {
-      const { id, prop, queued } = this;
-
-      try {
-        await this.$modV.store.dispatch("modules/updateProp", {
-          moduleId: id,
-          prop,
-          data: queued
-        });
-      } catch (e) {
-        console.error(e.message);
-      }
+      const { queued } = this;
+
+      this.$emit("input", queued);
 
       this.queued = null;
       this.dirty = false;
@@ -124,22 +136,12 @@ export default {
     focusInput() {
       this.$modV.store.dispatch("inputs/setFocusedInput", {
         id: this.inputId,
-        title: `${this.moduleName}: ${this.title}`
+        title: this.inputTitle
       });
     }
   },
 
   computed: {
-    activeProp() {
-      const { id, prop } = this;
-      return this.$modV.store.state.modules.active[id].$props[prop];
-    },
-
-    moduleName() {
-      const { id } = this;
-      return this.$modV.store.state.modules.active[id].meta.name;
-    },
-
     inputId() {
       return this.activeProp.id;
     },
@@ -156,24 +158,17 @@ export default {
       return this.activeProp.max;
     },
 
-    title() {
-      return this.activeProp.label || this.prop;
+    step() {
+      return this.activeProp.step;
     },
 
     component() {
       return this.activeProp.component || false;
     },
 
-    value: {
+    internalValue: {
       get() {
-        const { id, prop, type } = this;
-        const propData = this.$modV.store.state.modules.active[id].props[prop];
-
-        if (type === "tween") {
-          return this.$modV.store.state.tweens.tweens[propData.id];
-        }
-
-        return propData;
+        return this.value;
       },
 
       set(value) {
diff --git a/src/components/Controls/RangeControl.vue b/src/components/Controls/RangeControl.vue
index 242730122..ef5ad10f7 100644
--- a/src/components/Controls/RangeControl.vue
+++ b/src/components/Controls/RangeControl.vue
@@ -11,7 +11,7 @@
     <Number
       v-model="inputValue"
       type="number"
-      step="0.01"
+      :step="step"
       @keypress.enter="toggleEditMode"
       @click.right="toggleEditMode"
       v-show="editMode"
@@ -37,7 +37,7 @@ export default {
     },
     step: {
       type: Number,
-      default: 2
+      default: 1
     },
     default: Number,
     value: Number
@@ -77,6 +77,7 @@ export default {
 
   created() {
     this.position = -this.value * this.spacingCalc;
+    this.inputValue = this.value;
   },
 
   mounted() {
diff --git a/src/components/ModuleControl.vue b/src/components/ModuleControl.vue
new file mode 100644
index 000000000..7b9038a1a
--- /dev/null
+++ b/src/components/ModuleControl.vue
@@ -0,0 +1,79 @@
+<template>
+  <Control
+    @input="handleInput"
+    :inputTitle="`${moduleName}: ${title}`"
+    :activeProp="activeProp"
+    :title="title"
+    :value="value"
+  />
+</template>
+
+<script>
+import Control from "./Control";
+
+export default {
+  components: {
+    Control
+  },
+
+  props: {
+    prop: {
+      type: String,
+      required: true
+    },
+
+    id: {
+      type: String,
+      required: true
+    }
+  },
+
+  computed: {
+    activeProp() {
+      const { id, prop } = this;
+      return this.$modV.store.state.modules.active[id].$props[prop];
+    },
+
+    type() {
+      return this.activeProp.type;
+    },
+
+    moduleName() {
+      const { id } = this;
+      return this.$modV.store.state.modules.active[id].meta.name;
+    },
+
+    title() {
+      return this.activeProp.label || this.prop;
+    },
+
+    value() {
+      const { id, prop, type } = this;
+      const propData = this.$modV.store.state.modules.active[id].props[prop];
+
+      if (type === "tween") {
+        return this.$modV.store.state.tweens.tweens[propData.id];
+      }
+
+      return propData;
+    }
+  },
+
+  methods: {
+    async handleInput(e) {
+      const { prop, id: moduleId } = this;
+      const data = e;
+
+      try {
+        await this.$modV.store.dispatch("modules/updateProp", {
+          moduleId,
+          prop,
+          data
+        });
+      } catch (e) {
+        console.error(e.message);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/components/ModuleInspector.vue b/src/components/ModuleInspector.vue
index b5357cf88..04b2a0359 100644
--- a/src/components/ModuleInspector.vue
+++ b/src/components/ModuleInspector.vue
@@ -9,7 +9,7 @@
       <div class="title">{{ module.meta.name }}</div>
     </c>
     <c span="1..">
-      <Control
+      <ModuleControl
         v-for="key in getProps(module.$moduleName)"
         :id="module.$id"
         :prop="key"
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-import Control from "@/components/Control";
+import ModuleControl from "@/components/ModuleControl";
 
 export default {
   props: ["moduleId"],
 
   components: {
-    Control
+    ModuleControl
   },
 
   mounted() {
diff --git a/src/components/PluginControl.vue b/src/components/PluginControl.vue
new file mode 100644
index 000000000..3c38859e7
--- /dev/null
+++ b/src/components/PluginControl.vue
@@ -0,0 +1,85 @@
+<template>
+  <Control
+    @input="handleInput"
+    :inputTitle="`${pluginName}: ${title}`"
+    :activeProp="activeProp"
+    :title="title"
+    :value="value"
+  />
+</template>
+
+<script>
+import Control from "./Control";
+
+export default {
+  components: {
+    Control
+  },
+
+  props: {
+    prop: {
+      type: String,
+      required: true
+    },
+
+    id: {
+      type: String,
+      required: true
+    }
+  },
+
+  computed: {
+    plugin() {
+      const { id } = this;
+
+      return this.$modV.store.state.plugins.find(item => item.id === id);
+    },
+
+    activeProp() {
+      const { plugin, prop } = this;
+
+      return plugin.props[prop];
+    },
+
+    type() {
+      return this.activeProp.type;
+    },
+
+    pluginName() {
+      return this.plugin.name;
+    },
+
+    title() {
+      return this.activeProp.label || this.prop;
+    },
+
+    value() {
+      const { prop, type, plugin } = this;
+      const propData = plugin.$props[prop];
+
+      if (type === "tween") {
+        return this.$modV.store.state.tweens.tweens[propData.id];
+      }
+
+      return propData;
+    }
+  },
+
+  methods: {
+    async handleInput(e) {
+      const { prop, id: pluginId } = this;
+      const data = e;
+
+      try {
+        await this.$modV.store.dispatch("plugins/updateProp", {
+          pluginId,
+          prop,
+          data
+        });
+      } catch (e) {
+        console.error(e.message);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/components/Plugins.vue b/src/components/Plugins.vue
new file mode 100644
index 000000000..7aa53acdd
--- /dev/null
+++ b/src/components/Plugins.vue
@@ -0,0 +1,89 @@
+<template>
+  <grid
+    class="borders"
+    v-infoView="{ title: iVTitle, body: iVBody, id: 'Plugins Panel' }"
+    v-searchTerms="{
+      terms: ['plugin', 'plug in', 'addon', 'add-on'],
+      title: 'Plugins',
+      type: 'Panel'
+    }"
+  >
+    <CollapsibleRow v-for="plugin in plugins" :key="plugin.id">
+      <template v-slot:label>
+        {{ plugin.name }}
+      </template>
+
+      <template v-slot:body>
+        <c span="1..">
+          <grid columns="4">
+            <c span="1..">
+              <grid columns="4">
+                <c span="1">
+                  Enable
+                </c>
+                <c span="3">
+                  <Checkbox
+                    @input="handleEnableInput(plugin.id)"
+                    class="light"
+                  />
+                </c>
+              </grid>
+            </c>
+
+            <c
+              span="1.."
+              v-for="(prop, propKey) in plugin.$props"
+              :key="propKey"
+            >
+              <PluginControl :id="plugin.id" :prop="propKey" />
+            </c>
+          </grid>
+        </c>
+      </template>
+    </CollapsibleRow>
+  </grid>
+</template>
+
+<script>
+import CollapsibleRow from "./CollapsibleRow.vue";
+import Checkbox from "./inputs/Checkbox.vue";
+import PluginControl from "./PluginControl.vue";
+
+export default {
+  components: {
+    CollapsibleRow,
+    Checkbox,
+    PluginControl
+  },
+
+  data() {
+    return {
+      iVTitle: "Plugins",
+      iVBody: "The Plugins panel lists all available Plugins."
+    };
+  },
+
+  computed: {
+    plugins() {
+      return this.$modV.store.state.plugins;
+    }
+  },
+
+  methods: {
+    handleEnableInput(pluginId) {
+      const plugin = this.plugins.find(item => item.id === pluginId);
+
+      if (!plugin) {
+        return;
+      }
+
+      this.$modV.store.dispatch("plugins/setEnabled", {
+        pluginId,
+        enabled: !plugin.enabled
+      });
+    }
+  }
+};
+</script>
+
+<style></style>