Electron backend

client/.env.production

@@ -1 +1,3 @@
 VUE_APP_STATIC_PATH=./static/viame/
+
+ELECTRON=yeet

client/.gitignore

@@ -19,3 +19,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+#Electron-builder output
+/dist_electron

client/package.json

@@ -6,25 +6,31 @@
     "serve": "rimraf -rf ./node_modules/.cache/vue-loader && vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "electron:build": "vue-cli-service electron:build",
+    "electron:serve": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps",
     "test": "vue-cli-service test:unit"
   },
-  "resolutions": {
-    "@types/jest": "^25.2.3",
-    "vuetify": "^v2.3.0-beta.7"
-  },
+  "main": "background.js",
   "dependencies": {
     "@flatten-js/interval-tree": "^1.0.11",
     "@girder/components": "^2.2.4",
     "@mdi/font": "^3.9.97",
+    "@types/electron-devtools-installer": "^2.2.0",
     "@vue/composition-api": "^0.5.0",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "d3": "^5.12.0",
     "geojs": "^0.20.0",
     "lodash": "^4.17.19",
     "mousetrap": "^1.6.5",
+    "mux.js": "^5.6.4",
+    "video.js": "7.8.4",
     "vue": "^2.6.10",
+    "vue-core-video-player": "0.1.9",
     "vue-router": "^3.0.3",
+    "vue-video-player": "^5.0.2",
     "vuetify": "^v2.3.0-beta.7",
     "vuex": "^3.0.1"
   },
@@ -34,12 +40,12 @@
     "@types/geojson": "^7946.0.7",
     "@types/jest": "^25.2.3",
     "@types/lodash": "^4.14.151",
-    "@types/node": "^14.0.5",
+    "@types/node@": "^12",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.3.1",
     "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-plugin-typescript": "~4.3.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-plugin-unit-jest": "~4.4.0",
     "@vue/cli-service": "~4.3.1",
     "@vue/eslint-config-airbnb": "^5.0.2",
@@ -48,38 +54,26 @@
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-register": "^6.26.0",
+    "electron": "^9.0.0",
+    "electron-devtools-installer": "^3.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-vue": "^6.2.2",
     "git-describe": "^4.0.4",
     "jest": "^26.0.1",
     "jest-transform-stub": "^2.0.0",
+    "mpv.js": "0.3.0",
+    "react": "16.13.1",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
     "ts-jest": "^26.0.0",
-    "typescript": "~3.8.3",
+    "typescript": "~3.9.3",
+    "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
     "vue-cli-plugin-vuetify": "^2.0.5",
     "vue-jest": "^3.0.5",
     "vue-template-compiler": "^2.6.10",
     "vuetify-loader": "^1.4.3"
   },
-  "jest": {
-    "verbose": true,
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1",
-      "\\.css$": "<rootDir>/test/stub.js"
-    },
-    "transform": {
-      ".*\\.(vue)$": "vue-jest",
-      "^.+\\.tsx?$": "ts-jest",
-      "^.+\\.jsx?$": "babel-jest"
-    },
-    "globals": {
-      "ts-jest": {
-        "tsConfig": "tsconfig.spec.json"
-      }
-    }
-  },
   "eslintConfig": {
     "root": true,
     "env": {
@@ -121,5 +115,26 @@
       "parser": "@typescript-eslint/parser",
       "ecmaVersion": 2020
     }
+  },
+  "jest": {
+    "verbose": true,
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1",
+      "\\.css$": "<rootDir>/test/stub.js"
+    },
+    "transform": {
+      ".*\\.(vue)$": "vue-jest",
+      "^.+\\.tsx?$": "ts-jest",
+      "^.+\\.jsx?$": "babel-jest"
+    },
+    "globals": {
+      "ts-jest": {
+        "tsConfig": "tsconfig.spec.json"
+      }
+    }
+  },
+  "resolutions": {
+    "@types/jest": "^25.2.3",
+    "vuetify": "^v2.3.0-beta.7"
   }
 }

client/src/background.ts

@@ -0,0 +1,108 @@
+import { app, protocol, BrowserWindow } from 'electron';
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
+
+const path = require("path");
+const {getPluginEntry} = require("mpv.js");
+// Absolute path to the plugin directory.
+const pluginDir = path.join(path.dirname(require.resolve("mpv.js")), "build", "Release");
+// See pitfalls section for details.
+if (process.platform !== "linux") {process.chdir(pluginDir);}
+// Fix for latest Electron.
+app.commandLine.appendSwitch("no-sandbox");
+// To support a broader number of systems.
+app.commandLine.appendSwitch("ignore-gpu-blacklist");
+app.commandLine.appendSwitch("register-pepper-plugins", getPluginEntry(pluginDir));
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+console.log('ELECTRON TIME!!!!!');
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let win: BrowserWindow | null;
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'app', privileges: { secure: true, standard: true } },
+]);
+
+function createWindow() {
+  // Create the browser window.
+  win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      // Use pluginOptions.nodeIntegration, leave this alone
+      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html
+      // #node-integration for more info
+      nodeIntegration: (process.env
+        .ELECTRON_NODE_INTEGRATION as unknown) as boolean,
+      plugins: true,
+    },
+  });
+
+  if (process.env.IS_ELECTRON) {
+    // Load the url of the dev server if in development mode
+    console.log(process.env.IS_ELECTRON);
+    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
+    // win.loadURL(`file:/${__dirname}/index.html`);
+
+    if (!process.env.IS_TEST) win.webContents.openDevTools();
+  } else {
+    createProtocol('app');
+    console.log('local');
+    // Load the index.html when not in development
+    win.loadURL(`file://${__dirname}/index.html`);
+  }
+
+  win.on('closed', () => {
+    win = null;
+  });
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (win === null) {
+    createWindow();
+  }
+});
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    try {
+      await installExtension(VUEJS_DEVTOOLS);
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString());
+    }
+  }
+  createWindow();
+});
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  if (process.platform === 'win32') {
+    process.on('message', (data) => {
+      if (data === 'graceful-exit') {
+        app.quit();
+      }
+    });
+  } else {
+    process.on('SIGTERM', () => {
+      app.quit();
+    });
+  }
+}

client/src/components/decs.d.ts

@@ -0,0 +1,2 @@
+declare module 'vue-core-video-player'
+declare module 'vue-video-player'

client/src/decs.d.ts

@@ -0,0 +1 @@
+declare module 'vue-core-video-player'

client/src/lib/api/base.ts

@@ -0,0 +1,11 @@
+import girderRest from '@/plugins/girder';
+// import ElectronApi from './electron';
+
+let API;
+if (process.env.IS_ELECTRON) {
+  // API = new ElectronApi();
+  API = girderRest;
+} else {
+  API = girderRest
+}
+export default API;

client/src/lib/api/electron.ts

@@ -0,0 +1,8 @@
+// const { nodejsNativeFunc } = require('electron');
+
+// class ElectronApi implements ViameAPI {
+
+//   saveDetections() {
+//     nodejsNativeFunc();
+//   }
+// }

client/src/main.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueCompositionApi from '@vue/composition-api';
+import VueCoreVideoPlayer from 'vue-core-video-player';
 
 import NotificationBus from '@girder/components/src/utils/notifications';
 import snackbarService from '@/lib/vue-utilities/snackbar-service';
@@ -17,6 +18,7 @@ Vue.use(VueCompositionApi);
 Vue.use(snackbarService(vuetify));
 Vue.use(promptService(vuetify));
 Vue.use(vMousetrap);
+Vue.use(VueCoreVideoPlayer);
 
 const notificationBus = new NotificationBus(girderRest);
 notificationBus.connect();

client/src/mpv_test.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    html, body, #main {
+      margin: 0;
+      height: 100%;
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    .player {
+      flex: 1;
+      min-height: 0;
+    }
+    .controls {
+      display: flex;
+      height: 40px;
+    }
+    .control {
+      width: 50px;
+      height: 40px;
+      font-size: 23px;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      background: #fff;
+      margin-right: 5px;
+    }
+    .control:last-child {
+      margin: 0 0 0 5px;
+    }
+    .control:hover {
+      background: #e3ddd8;
+    }
+    .seek {
+      flex: 1;
+      height: 40px;
+      margin: 0;
+      cursor: pointer;
+      outline: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="main"></div>
+  <script src="../node_modules/babel-standalone/babel.js"></script>
+  <script type="text/babel" src="renderer.js"></script>
+</body>
+</html>