fix: Electron nodeIntegration: false - added preload.js - prepare for…

… moving hw related stuff to server side

fix: Webpack external - fs
chore: clean up css

main.js

@@ -32,7 +32,8 @@ function createWindow() {
     // frame: false,
     show: false,
     webPreferences: {
-      nodeIntegration: true
+      nodeIntegration: false,
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

package.json

@@ -41,11 +41,6 @@
         "watch": "jest --watch"
     },
     "dependencies": {
-        "@types/hoist-non-react-statics": "^3.3.1",
-        "@types/rc-slider": "^8.6.5",
-        "@types/react-redux": "^7.1.4",
-        "@types/react-select": "^3.0.4",
-        "@types/react-test-renderer": "^16.9.1",
         "casparcg-connection": "^4.7.0",
         "classnames": "^2.2.6",
         "emberplus": "https://github.com/nrkno/tv-automation-emberplus-connection.git",
@@ -56,7 +51,6 @@
         "react-select": "^3.0.6",
         "react-slider": "^1.0.0",
         "redux": "^4.0.4",
-        "typescript": "^3.6.3",
         "webmidi": "^2.5.1"
     },
     "devDependencies": {
@@ -67,26 +61,25 @@
         "@babel/preset-env": "^7.6.2",
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-typescript": "^7.6.0",
+        "@types/hoist-non-react-statics": "^3.3.1",
         "@types/jest": "^24.0.21",
+        "@types/rc-slider": "^8.6.5",
+        "@types/react-redux": "^7.1.4",
+        "@types/react-select": "^3.0.4",
+        "@types/react-test-renderer": "^16.9.1",
         "babel-loader": "^8.0.6",
-        "babili-webpack-plugin": "^0.1.2",
-        "css-loader": "^3.2.0",
-        "electron": "^6.0.10",
-        "electron-packager": "^14.0.6",
+        "css-loader": "^3.2.1",
+        "electron": "^7.1.2",
+        "electron-packager": "^14.1.1",
         "file-loader": "^4.2.0",
         "html-webpack-plugin": "^3.2.0",
         "jest": "^24.9.0",
-        "mini-css-extract-plugin": "^0.8.0",
-        "postcss-cssnext": "^3.1.0",
-        "postcss-import": "^12.0.1",
-        "postcss-loader": "^3.0.0",
-        "postcss-nested": "^4.1.2",
-        "postcss-pxtorem": "^4.0.1",
         "react-test-renderer": "^16.11.0",
-        "style-loader": "^1.0.0",
+        "style-loader": "^1.0.1",
         "ts-jest": "^24.1.0",
         "ts-loader": "^6.2.0",
         "ts-node": "^8.4.1",
+        "typescript": "^3.6.3",
         "typescript-babel-jest": "^1.0.6",
         "webpack": "^4.41.0",
         "webpack-cli": "^3.3.9",

preload.js

@@ -0,0 +1,35 @@
+console.log('preloading')
+
+const remote = require('electron').remote
+const { dialog } = require('electron').remote
+const { getPath } = require('electron').remote.app
+
+
+global.aaaasper = 'IT´s preloaded'
+global.fs = remote.require('fs')
+global.osc = remote.require('osc')
+global.net = remote.require('net')
+global.emberplus = remote.require('emberplus')
+global.casparcgconnection = remote.require('casparcg-connection')
+global.dialog = dialog
+global.getPath = getPath
+
+
+console.log('PreLoad executed')
+
+global.electron = {
+  ipc: {
+    invoke (channel, ...args) {
+      return ipcRenderer.invoke(channel, ...args)
+    },
+    send (msg, arg) {
+      ipcRenderer.send(msg, arg)
+    },
+    on (channel, cb) {
+      ipcRenderer.on(channel, cb)
+    },
+    off (channel, cb) {
+      ipcRenderer.off(channel, cb)
+    }
+  }
+}

src/components/App.tsx

@@ -36,7 +36,7 @@ class App extends React.Component<IAppProps> {
         if (this.props.store.settings[0].enableRemoteFader){
             (window as any).huiRemoteConnection = new HuiMidiRemoteConnection();
         }
-        this.settingsPath = electron.remote.app.getPath('userData');
+        this.settingsPath = window.getPath('userData');
 
         this.snapShopStoreTimer();
         let selectedProtocol = MixerProtocolPresets[this.props.store.settings[0].mixerProtocol];

src/components/CcgChannelSettings.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import '../assets/css/CcgChannelSettings.css';
 import { MixerProtocolPresets } from '../constants/MixerProtocolPresets';
-import { IMixerProtocolGeneric, ICasparCGMixerGeometry } from '../constants/MixerProtocolInterface';
+import { ICasparCGMixerGeometry } from '../constants/MixerProtocolInterface';
 import { Store } from 'redux';
 import { connect } from 'react-redux';
-import { IStore } from '../reducers/indexReducer';
 import { SET_OPTION } from  '../reducers/channelActions'
 import { TOGGLE_SHOW_OPTION } from '../reducers/settingsActions'
 

src/components/ChanStrip.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import React from 'react';
 import ReactSlider from 'react-slider'
 
 import '../assets/css/ChanStrip.css';
@@ -12,7 +12,7 @@ import {
     TOGGLE_SHOW_MONITOR_OPTIONS
  } from '../reducers/settingsActions'
 import { IFader } from '../reducers/fadersReducer'
-import { SET_FADER_LEVEL, SET_FADER_THRESHOLD, SET_FADER_RATIO, SET_FADER_LOW, SET_FADER_MID, SET_FADER_HIGH, SET_FADER_MONITOR } from '../reducers/faderActions'
+import { SET_FADER_THRESHOLD, SET_FADER_RATIO, SET_FADER_LOW, SET_FADER_MID, SET_FADER_HIGH } from '../reducers/faderActions'
 import { SET_AUX_LEVEL } from '../reducers/channelActions';
 
 interface IChanStripInjectProps {

src/components/ChannelMonitorOptions.tsx

@@ -11,7 +11,6 @@ import { SET_AUX_LEVEL } from '../reducers/channelActions'
 import { TOGGLE_SHOW_MONITOR_OPTIONS } from '../reducers/settingsActions'
 import { SET_FADER_MONITOR } from '../reducers/faderActions';
 import { ISettings } from '../reducers/settingsReducer';
-const { dialog } = require('electron').remote;
 
 interface IMonitorSettingsInjectProps {
     label: string,
@@ -46,7 +45,7 @@ class ChannelMonitorOptions extends React.PureComponent<IChannelProps & IMonitor
                 title: 'Remove monitoring',
                 message: 'Remove monitoring on ' + String(channel + 1),
             };
-            let response = dialog.showMessageBoxSync(options)
+            let response = window.dialog.showMessageBoxSync(options)
             if (response === 1) {
                 return true
             }
@@ -60,7 +59,7 @@ class ChannelMonitorOptions extends React.PureComponent<IChannelProps & IMonitor
                 title: 'Monitor Channel',
                 message: 'Enable monitoring of Channel ' + String(channel + 1) + '?',
             };
-            let response = dialog.showMessageBoxSync(options)
+            let response = window.dialog.showMessageBoxSync(options)
 
             if (response === 1) {
                 return true
@@ -84,7 +83,7 @@ class ChannelMonitorOptions extends React.PureComponent<IChannelProps & IMonitor
             message: 'WARNING!!!!!',
             detail: 'This will remove all monitor assignments to Aux :' + String(this.props.fader[this.faderIndex].monitor),
         };
-        let response = dialog.showMessageBoxSync(options)
+        let response = window.dialog.showMessageBoxSync(options)
         if (response === 0) {
             this.props.channel.forEach((channel: any, index: number) => {
                 this.props.dispatch({
@@ -106,7 +105,7 @@ class ChannelMonitorOptions extends React.PureComponent<IChannelProps & IMonitor
             title: 'WARNING',
             message: 'Send all channels to Aux: ' + String(this.props.fader[this.faderIndex].monitor)
         };
-        let response = dialog.showMessageBoxSync(options)
+        let response = window.dialog.showMessageBoxSync(options)
         if (response === 0) {
             this.props.channel.forEach((channel: any, index: number) => {
                 this.props.dispatch({

src/components/ChannelRouteSettings.tsx

@@ -10,7 +10,6 @@ import { connect } from 'react-redux';
 import CcgChannelSettings from './CcgChannelSettings';
 import { SET_ASSIGNED_FADER } from '../reducers/channelActions'
 import { TOGGLE_SHOW_OPTION } from '../reducers/settingsActions'
-const { dialog } = require('electron').remote;
 
 interface IChannelSettingsInjectProps {
     label: string,
@@ -52,7 +51,7 @@ class ChannelRouteSettings extends React.PureComponent<IChannelProps & IChannelS
                 title: 'Unlock Channel',
                 message: 'Unbind Channel ' + String(channel + 1) + ' from Fader ' + String(this.faderIndex + 1),
             };
-            let response = dialog.showMessageBoxSync(options)
+            let response = window.dialog.showMessageBoxSync(options)
             if (response === 1) {
                 return true
             }
@@ -70,7 +69,7 @@ class ChannelRouteSettings extends React.PureComponent<IChannelProps & IChannelS
                 message: 'Bind Channel ' + String(channel + 1) + ' to Fader ' + String(this.faderIndex + 1) + '?',
                 detail: detail,
             };
-            let response = dialog.showMessageBoxSync(options)
+            let response = window.dialog.showMessageBoxSync(options)
 
             if (response === 1) {
                 return true
@@ -93,7 +92,7 @@ class ChannelRouteSettings extends React.PureComponent<IChannelProps & IChannelS
             message: 'WARNING!!!!!',
             detail: 'This will remove all Fader-Channel assignments',
         };
-        let response = dialog.showMessageBoxSync(options)
+        let response = window.dialog.showMessageBoxSync(options)
         if (response === 0) {
             this.props.channel.forEach((channel: any, index: number) => {
                 this.props.dispatch({
@@ -115,7 +114,7 @@ class ChannelRouteSettings extends React.PureComponent<IChannelProps & IChannelS
             message: 'WARNING!!!!!',
             detail: 'This will reassign all Faders 1:1 to Channels',
         };
-        let response = dialog.showMessageBoxSync(options)
+        let response = window.dialog.showMessageBoxSync(options)
         if (response === 0) {
             this.props.fader.forEach((fader: any, index: number) => {
                 if (this.props.channel.length > index) {

src/components/Channels.tsx

@@ -23,7 +23,6 @@ import ChannelMonitorOptions from './ChannelMonitorOptions';
 import { IChannels } from '../reducers/channelsReducer';
 import { IFader } from '../reducers/fadersReducer';
 import { ISettings } from '../reducers/settingsReducer';
-const { dialog } = require('electron').remote;
 
 interface IChannelsInjectProps {
     channels: IChannels 
@@ -103,7 +102,7 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
             title: 'Save Current Setup',
             message: 'Stores the current state of Sisyfos - including Fader-Channel Routing',
         };
-        let response = dialog.showSaveDialogSync(options)
+        let response = window.dialog.showSaveDialogSync(options)
         if (response === 'save') {
             console.log('SAVING CURRENT STATE')
         }
@@ -115,7 +114,7 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
             title: 'Load selected file',
             message: 'Loading Fader and Channels state',
         };
-        let response = dialog.showOpenDialogSync(options)
+        let response = window.dialog.showOpenDialogSync(options)
         console.log('LOAD STATE? :', response)
     }
 

src/components/RoutingStorage.tsx

@@ -3,11 +3,10 @@ import React from 'react';
 import '../assets/css/RoutingStorage.css';
 import { Store } from 'redux';
 import { connect } from 'react-redux';
-import * as fs from 'fs'
-import * as electron from 'electron'
 import { TOGGLE_SHOW_STORAGE } from '../reducers/settingsActions'
 
-const { dialog } = require('electron').remote;
+// Node modules:
+const fs = window.fs
 
 interface IStorageProps {
     load: any
@@ -24,7 +23,7 @@ class Storage extends React.PureComponent<IStorageProps & Store> {
         this.load = this.props.load
         this.save = this.props.save
 
-        this.path = electron.remote.app.getPath('userData');
+        this.path = window.getPath('userData');
 
         this.updateFilelist()
 
@@ -55,7 +54,7 @@ class Storage extends React.PureComponent<IStorageProps & Store> {
             title: 'Save Current Setup',
             message: 'Stores the current state of Sisyfos - including Fader-Channel Routing',
         };
-        let response = dialog.showSaveDialogSync(options)
+        let response = window.dialog.showSaveDialogSync(options)
         if (response) {
             console.log('SAVING THIS FILE :', response)
             this.save(response)
@@ -71,7 +70,7 @@ class Storage extends React.PureComponent<IStorageProps & Store> {
             title: 'Load Routing',
             message: 'Load "' + event.target.textContent + '" Routing',
         };
-        let response = dialog.showMessageBoxSync(options)
+        let response = window.dialog.showMessageBoxSync(options)
         if (!response) {
             console.log('Loading files')
             this.load(this.path + '/' + event.target.textContent, false)

src/components/Settings.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { connect } from "react-redux";
 import Select from 'react-select';
-import WebMidi, { INoteParam, IMidiChannel } from 'webmidi';
+import WebMidi from 'webmidi';
 import { IAppProps } from './App';
 
 

src/components/VuMeter.tsx

@@ -5,8 +5,7 @@ import { connect } from "react-redux";
 import '../assets/css/VuMeter.css';
 //Utils:
 import { MixerProtocolPresets } from '../constants/MixerProtocolPresets';
-import { IMixerProtocol, IMixerProtocolGeneric } from '../constants/MixerProtocolInterface';
-import { any } from 'prop-types';
+import { IMixerProtocolGeneric } from '../constants/MixerProtocolInterface';
 
 export interface IVuMeterInjectedProps {
     showSnaps: boolean

src/constants/mixerProtocols/EmberLawo.ts

@@ -1,7 +1,7 @@
 import { IMixerProtocol, emptyMixerMessage } from '../MixerProtocolInterface';
 import path from 'path';
 import os from 'os';
-import fs from 'fs';
+const fs = window.fs
 
 export const LawoClient: IMixerProtocol = {
     protocol: 'EMBER',

src/constants/mixerProtocols/StuderVistaEmber.ts

@@ -1,7 +1,7 @@
 import { IMixerProtocol, emptyMixerMessage } from '../MixerProtocolInterface';
 import path from 'path';
 import os from 'os';
-import fs from 'fs';
+const fs = window.fs
 
 export const StuderVistaMaster: IMixerProtocol = {
     protocol: 'EMBER',

src/constants/mixerProtocols/casparCGMaster.ts

@@ -1,5 +1,5 @@
 import { ICasparCGMixerGeometry, ICasparCGMixerGeometryFile, emptyMixerMessage } from '../MixerProtocolInterface';
-import * as fs from 'fs';
+const fs = window.fs
 import * as os from 'os';
 import * as path from 'path';
 

src/index.ejs

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- NB: Various Webpack settings are exposed in the template through the htmlWebpackPlugin object -->
+    <!-- The title property maps onto whatever title you set in electron-webpack.json. -->
+    <title>SISYFOS INTELLIGENT AUDIO CONTROLLER</title>
+  </head>
+  <body>
+     <!-- HtmlWebpackPlugin will inject a script tag to load your renderer bundle inside here. -->
+  </body>
+</html>

src/index.tsx

@@ -11,12 +11,20 @@ import { UPDATE_SETTINGS } from './reducers/settingsActions'
 //Utils:
 import { loadSettings } from './utils/SettingsStorage';
 
+
 declare global {
     interface Window {
         storeRedux: any
         mixerGenericConnection: any
         automationConnection: any
         huiRemoteConnection: any
+        fs: any
+        osc: any
+        net: any
+        emberplus: any
+        casparcgconnection: any
+        dialog: any
+        getPath: any
     }
 }