Merge pull request #861 from vcync/next

Merge next into main

.gitignore

@@ -16,7 +16,6 @@ yarn-error.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "vue.volar",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint"
+  ]
+}

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extensions": [
+    ".vue"
+  ],
+  "vueCompilerOptions": {
+    "target": 2
+  }
+}

package.json

@@ -20,7 +20,8 @@
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps && patch-package",
-    "postuninstall": "electron-builder install-app-deps"
+    "postuninstall": "electron-builder install-app-deps",
+    "test:e2e": "npx playwright test"
   },
   "main": "background.js",
   "dependencies": {
@@ -32,7 +33,6 @@
     "dotenv": "^8.2.0",
     "electron-updater": "^4.3.1",
     "fluent-ffmpeg": "^2.1.2",
-    "font-list": "^1.3.1",
     "fuse.js": "^6.2.1",
     "golden-layout": "^1.5.9",
     "grandiose": "github:vcync/grandiose#feat/workerCompatibility",
@@ -70,21 +70,26 @@
     "@babel/core": "^7.0.0-0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
     "@babel/plugin-proposal-optional-chaining": "^7.16.0",
+    "@playwright/test": "^1.31.2",
     "@semantic-release/git": "^9.0.0",
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-eslint": "^3.12.1",
     "@vue/cli-service": "^3.12.1",
     "@vue/eslint-config-prettier": "^4.0.1",
+    "@vue/runtime-dom": "^3.2.47",
     "babel-eslint": "^10.0.3",
     "core-js": "^3.19.1",
     "electron": "^23.1.2",
     "electron-builder": "^22.9.1",
     "electron-notarize": "^1.2.2",
+    "electron-playwright-helpers": "^1.5.3",
     "eslint": "^5.16.0",
     "eslint-plugin-no-for-each": "^0.1.14",
     "eslint-plugin-vue": "^5.2.3",
     "lint-staged": "^8.2.1",
     "node-loader": "^0.6.0",
+    "playwright": "^1.31.2",
+    "playwright-core": "^1.31.2",
     "sass-loader": "^7.3.1",
     "text-loader": "0.0.1",
     "vue-cli-plugin-electron-builder": "^2.0.0",

playwright.config.js

@@ -0,0 +1,9 @@
+import { defineConfig, expect } from "@playwright/test";
+import extensions from "./tests/e2e/extentions";
+
+expect.extend(extensions);
+
+export default defineConfig({
+  testDir: "./tests/e2e/spec",
+  workers: process.env.CI ? 1 : 2
+});

src/App.vue

@@ -142,20 +142,11 @@ export default {
       state: null,
       layoutState: null,
 
-      showUi: true,
-      mouseTimer: null,
-      cursor: "none",
       triggerUiRestart: 0
     };
   },
 
   computed: {
-    pluginComponents() {
-      return this.$modV.store.state.plugins
-        .filter(plugin => "component" in plugin)
-        .map(plugin => plugin.component.name);
-    },
-
     focusedModules() {
       const focusedOrPinned = this.$store.getters["ui-modules/focusedOrPinned"];
       const modules = focusedOrPinned.map(
@@ -191,50 +182,6 @@ export default {
   },
 
   methods: {
-    makeFullScreen() {
-      if (!document.body.ownerDocument.webkitFullscreenElement) {
-        document.body.webkitRequestFullscreen();
-      } else {
-        document.body.ownerDocument.webkitExitFullscreen();
-      }
-    },
-
-    mouseMove() {
-      if (this.mouseTimer) {
-        clearTimeout(this.mouseTimer);
-      }
-
-      this.cursor = "default";
-      this.mouseTimer = setTimeout(this.movedMouse, 200);
-    },
-
-    movedMouse() {
-      if (this.mouseTimer) {
-        this.mouseTimer = null;
-      }
-
-      this.cursor = "none";
-    },
-
-    getProps(moduleName) {
-      const moduleDefinition = this.$modV.store.state.modules.registered[
-        moduleName
-      ];
-
-      return Object.keys(moduleDefinition.props).filter(
-        key =>
-          moduleDefinition.props[key].type === "int" ||
-          moduleDefinition.props[key].type === "float" ||
-          moduleDefinition.props[key].type === "text" ||
-          moduleDefinition.props[key].type === "bool" ||
-          moduleDefinition.props[key].type === "color" ||
-          moduleDefinition.props[key].type === "vec2" ||
-          moduleDefinition.props[key].type === "tween" ||
-          moduleDefinition.props[key].type === "texture" ||
-          moduleDefinition.props[key].type === "enum"
-      );
-    },
-
     toggleModulePin(id) {
       if (this.isPinned(id)) {
         this.$store.commit("ui-modules/REMOVE_PINNED", id);

src/application/index.js

@@ -1,3 +1,9 @@
+import PromiseWorker from "promise-worker-transferable";
+import Vue from "vue";
+import { ipcRenderer } from "electron";
+import { app } from "@electron/remote";
+import { createWebcodecVideo } from "./createWebcodecVideo";
+
 import Worker from "worker-loader!./worker/index.worker.js";
 import {
   setupMedia,
@@ -7,16 +13,9 @@ import {
 } from "./setup-media";
 import setupBeatDetektor from "./setup-beat-detektor";
 import setupMidi from "./setup-midi";
-
 import store from "./worker/store";
 import windowHandler from "./window-handler";
 import use from "./use";
-
-import PromiseWorker from "promise-worker-transferable";
-import Vue from "vue";
-import { ipcRenderer } from "electron";
-import { app } from "@electron/remote";
-import { createWebcodecVideo } from "./createWebcodecVideo";
 import { GROUP_ENABLED } from "./constants";
 
 let imageBitmap;
@@ -158,6 +157,8 @@ export default class ModV {
   async setup(canvas = document.createElement("canvas")) {
     this.windowHandler();
 
+    this.enumerateFonts();
+
     try {
       await this.setupMedia({ useDefaultDevices: true });
     } catch (e) {
@@ -310,4 +311,21 @@ export default class ModV {
   loadPreset(filePathToPreset) {
     this.$worker.postMessage({ type: "loadPreset", payload: filePathToPreset });
   }
+
+  async enumerateFonts() {
+    const localFonts = await window.queryLocalFonts();
+    const fonts = [];
+
+    for (let i = 0; i < localFonts.length; i += 1) {
+      const { family, fullName, postscriptName, style } = localFonts[i];
+
+      fonts.push({ family, fullName, postscriptName, style });
+
+      // No need to await here, async loading is fine.
+      // The user can't use fonts fonts immediately at this stage, so no need to block the thread
+      document.fonts.load(`14px ${postscriptName}`, fullName);
+    }
+
+    this.store.commit("fonts/SET_LOCAL_FONTS", fonts);
+  }
 }

src/application/utils/apply-expression.js

@@ -1,16 +1,20 @@
+import get from "lodash.get";
 import store from "../worker/store";
 
 export function applyExpression({ value, inputId }) {
   const expressionAssignment = store.getters["expressions/getByInputId"](
     inputId
   );
 
+  const input = store.state.inputs.inputs[inputId];
+
   let dataOut = value;
 
   if (expressionAssignment) {
     const scope = {
       value: dataOut,
-      time: Date.now()
+      time: Date.now(),
+      inputValue: get(store.state, input.getLocation)
     };
 
     dataOut = expressionAssignment.func.evaluate(scope);

src/application/window-handler.js

@@ -1,5 +1,6 @@
 export default function windowHandler() {
   const windows = {};
+  const that = this;
 
   function createHideMouseTimerhandler(canvas) {
     let mouseTimer;
@@ -18,10 +19,16 @@ export default function windowHandler() {
     };
   }
 
-  function configureWindow({ win, canvas, title, backgroundColor }) {
+  function configureWindow({ win, canvas, backgroundColor }) {
     win.document.body.appendChild(canvas);
-    win.document.title = title;
     win.document.body.style.backgroundColor = backgroundColor;
+    win.addEventListener("beforeunload", ev => {
+      // Setting any value other than undefined here will prevent the window
+      // from closing or reloading
+      ev.returnValue = true;
+    });
+
+    setSize.call(that, win);
   }
 
   function pollToConfigureWindow(args) {
@@ -62,6 +69,7 @@ export default function windowHandler() {
         "modal",
         `width=${width}, height=${height}, location=no, menubar=no, left=0`
       );
+      win.document.title = title;
 
       if (win === null || typeof win === "undefined") {
         console.log(
@@ -120,8 +128,6 @@ export default function windowHandler() {
           setSize.call(this, win);
         });
       });
-
-      setSize.call(this, win);
     }
   });
 

src/application/worker/index.worker.js

@@ -11,6 +11,9 @@ async function start() {
   const grabCanvasPlugin = require("../plugins/grab-canvas").default;
   const get = require("lodash.get");
 
+  // For Playwright
+  self._get = get;
+
   const { tick: frameTick } = require("./frame-counter");
   const { getFeatures, setFeatures } = require("./audio-features");
   // const featureAssignmentPlugin = require("../plugins/feature-assignment");
@@ -344,6 +347,7 @@ async function start() {
       store.commit("groups/SWAP");
       store.commit("modules/SWAP");
       store.commit("inputs/SWAP");
+      store.commit("expressions/SWAP");
 
       return;
     }

src/application/worker/store/modules/common/swap.js

@@ -7,7 +7,7 @@ import Vue from "vue";
  * The idea is that this makes loading presets smooth and the end user will not see any
  * glitches in the render loop.
  */
-export default function SWAP(swap, getDefault, sharedPropertyRestrictions) {
+export function SWAP(swap, getDefault, sharedPropertyRestrictions) {
   return function(state) {
     const stateKeys = Object.keys(state);
 
@@ -82,8 +82,6 @@ export default function SWAP(swap, getDefault, sharedPropertyRestrictions) {
           }
         }
       });
-    } else {
-      Object.assign(swap, getDefault());
     }
 
     Object.assign(swap, getDefault());

src/application/worker/store/modules/dataTypes.js

@@ -2,6 +2,9 @@ import store from "../";
 import { frames, advanceFrame } from "./tweens";
 
 const state = {
+  text: {
+    get: value => value
+  },
   int: {
     get: value => value
   },
@@ -122,6 +125,10 @@ const state = {
   }
 };
 
+const getters = {
+  types: state => Object.keys(state)
+};
+
 const actions = {
   createType({ state }, { type, args }) {
     return state[type].create(args);
@@ -131,5 +138,6 @@ const actions = {
 export default {
   namespaced: true,
   state,
+  getters,
   actions
 };