TM818/index.html Secret

## index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://*.wistia.com https://*.wistia.net; worker-src blob:; default-src * data: 'unsafe-eval' 'unsafe-inline' blob:">
  </head>
  <body>
    <div id="root">
    </div>
    <script src="./build/js/app.js"></script>
  </body>
</html>

## main.js (electron entry file)
const { BrowserWindow, app, Menu, screen, ipcMain, ipcRenderer, Notification, Tray } = require('electron');
const { is } = require('electron-util');
const path = require('path');
const debug = require('electron-debug'); // Required to launch developer tools when no menu present
const os = require('os');
const Store = require('electron-store');
const schema = {
  launchAtStart: true
}
const store = new Store(schema);

// Custom
const TrayGenerator = require('./TrayGenerator');

const isDev = !app.isPackaged;
let mainWindow = null;

Menu.setApplicationMenu(false) // Eliminate menu from chromium instance
const gotTheLock = app.requestSingleInstanceLock() // Assigned if second instance of app is launched

debug(); // Auto-launch developer tools - comment out when not needed

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    x: 1530,
    y: 0,
    frame: false,
    backgroundColor: "white",
    icon: __dirname + '/ml_logo_256x256.png',
    title: 'Momentum Lab',
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true, // Allows render process to access APIs / GUI modules normally only available to main process
      worldSafeExecuteJavaScript: true,
      contextIsolation: false, // If you enable this, you can't use require() in /src
      devTools: is.development,
      preload: path.join(__dirname, '/preload.js')
    }
  })

  mainWindow.loadFile('index.html');

}

if (isDev) {
  require('electron-reload')(__dirname, {
    electron: path.join(__dirname, 'node_modules', '.bin', 'electron.cmd')
  })
}

// Second instance lock - Brings existing instance to front instead of creating new one - Confirm
if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event, commandLine, workingDirectory) => {
    // Someone tried to run a second instance, we should focus our window.
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore()
      mainWindow.focus()
    }
  })
}

ipcMain.on('notify', (_, message) => {
  new Notification({title: 'Notifiation', body: message}).show();
})

// app.whenReady().then(createWindow)
app.on('ready', () => {
  createMainWindow();
  tray = new Tray(__dirname + '/public/images/IconTemplate.png'); // This works, but would prefer to use TrayGenerator
  ipcMain.on('COUNTER_UPDATED', (event, data) => {
    store.set('counterValue', data);
  });
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.send('INITIALIZE_COUNTER', store.get('counterValue'));
  });
});

// OS detect
if (os.platform == "Win32") {
  mainWindow.setSkipTaskbar(true);
} else if (os.platform == "darwin") { // Confirm this is actually the string returned
  app.dock.hide();
}

// Kill app when all windows closed, except for MacOS
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// Added from https://medium.com/folkdevelopers/the-ultimate-guide-to-electron-with-react-8df8d73f4c97
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 (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

## package.json
{
  "name": "project_manhattan",
  "productName": "MyProject",
  "version": "1.0.0",
  "description": "MyProject",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --config webpack.common.js --watch",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "anima-timeline": "^1.0.7",
    "electron": "^11.2.0",
    "electron-store": "^6.0.1",
    "electron-util": "^0.14.2",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-player": "^2.7.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-transition-group": "^4.4.1",
    "sass-loader": "^10.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "css-loader": "^5.0.1",
    "electron-debug": "^3.2.0",
    "electron-reload": "^1.5.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.15.0",
    "webpack-cli": "^4.3.1"
  }
}

## src > index.js (react renderer entry point)
import React from 'react';
import ReactDOM from 'react-dom';
const { path } = require('path');

import App from './ml.js';

ReactDOM.render(<App />, document.getElementById('root'));

## webpack.common.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  // entry: './electron.js',
  devtool: 'inline-source-map',
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /src/,
        // exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env', {
                targets: {
                  esmodules: true
                }
              }],
              '@babel/preset-react'],
            plugins: [
              "babel-plugin-transform-class-properties"
            ],
          }
        }
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      }
    ]
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build', 'js'),
  }
};

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://.wistia.com https://.wistia.net; worker-src blob:; default-src * data: 'unsafe-eval' 'unsafe-inline' blob:">
	</head>
	<body>
	<div id="root">
	</div>
	<script src="./build/js/app.js"></script>
	</body>
	</html>
	const { BrowserWindow, app, Menu, screen, ipcMain, ipcRenderer, Notification, Tray } = require('electron');
	const { is } = require('electron-util');
	const path = require('path');
	const debug = require('electron-debug'); // Required to launch developer tools when no menu present
	const os = require('os');
	const Store = require('electron-store');
	const schema = {
	launchAtStart: true
	}
	const store = new Store(schema);

	// Custom
	const TrayGenerator = require('./TrayGenerator');

	const isDev = !app.isPackaged;
	let mainWindow = null;

	Menu.setApplicationMenu(false) // Eliminate menu from chromium instance
	const gotTheLock = app.requestSingleInstanceLock() // Assigned if second instance of app is launched

	debug(); // Auto-launch developer tools - comment out when not needed

	function createMainWindow() {
	mainWindow = new BrowserWindow({
	width: 1024,
	height: 768,
	x: 1530,
	y: 0,
	frame: false,
	backgroundColor: "white",
	icon: __dirname + '/ml_logo_256x256.png',
	title: 'Momentum Lab',
	webPreferences: {
	nodeIntegration: true,
	enableRemoteModule: true, // Allows render process to access APIs / GUI modules normally only available to main process
	worldSafeExecuteJavaScript: true,
	contextIsolation: false, // If you enable this, you can't use require() in /src
	devTools: is.development,
	preload: path.join(__dirname, '/preload.js')
	}
	})

	mainWindow.loadFile('index.html');

	}

	if (isDev) {
	require('electron-reload')(__dirname, {
	electron: path.join(__dirname, 'node_modules', '.bin', 'electron.cmd')
	})
	}

	// Second instance lock - Brings existing instance to front instead of creating new one - Confirm
	if (!gotTheLock) {
	app.quit()
	} else {
	app.on('second-instance', (event, commandLine, workingDirectory) => {
	// Someone tried to run a second instance, we should focus our window.
	if (mainWindow) {
	if (mainWindow.isMinimized()) mainWindow.restore()
	mainWindow.focus()
	}
	})
	}

	ipcMain.on('notify', (_, message) => {
	new Notification({title: 'Notifiation', body: message}).show();
	})

	// app.whenReady().then(createWindow)
	app.on('ready', () => {
	createMainWindow();
	tray = new Tray(__dirname + '/public/images/IconTemplate.png'); // This works, but would prefer to use TrayGenerator
	ipcMain.on('COUNTER_UPDATED', (event, data) => {
	store.set('counterValue', data);
	});
	mainWindow.webContents.on('did-finish-load', () => {
	mainWindow.webContents.send('INITIALIZE_COUNTER', store.get('counterValue'));
	});
	});

	// OS detect
	if (os.platform == "Win32") {
	mainWindow.setSkipTaskbar(true);
	} else if (os.platform == "darwin") { // Confirm this is actually the string returned
	app.dock.hide();
	}

	// Kill app when all windows closed, except for MacOS
	app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	// Added from https://medium.com/folkdevelopers/the-ultimate-guide-to-electron-with-react-8df8d73f4c97
	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 (BrowserWindow.getAllWindows().length === 0) {
	createWindow()
	}
	})
	{
	"name": "project_manhattan",
	"productName": "MyProject",
	"version": "1.0.0",
	"description": "MyProject",
	"main": "main.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"watch": "webpack --config webpack.common.js --watch",
	"start": "electron ."
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
	"anima-timeline": "^1.0.7",
	"electron": "^11.2.0",
	"electron-store": "^6.0.1",
	"electron-util": "^0.14.2",
	"node-sass": "^5.0.0",
	"react": "^17.0.1",
	"react-dom": "^17.0.1",
	"react-player": "^2.7.2",
	"react-router": "^5.2.0",
	"react-router-dom": "^5.2.0",
	"react-transition-group": "^4.4.1",
	"sass-loader": "^10.1.1"
	},
	"devDependencies": {
	"@babel/core": "^7.12.10",
	"@babel/preset-env": "^7.12.11",
	"@babel/preset-react": "^7.12.10",
	"babel-loader": "^8.2.2",
	"babel-plugin-transform-class-properties": "^6.24.1",
	"css-loader": "^5.0.1",
	"electron-debug": "^3.2.0",
	"electron-reload": "^1.5.0",
	"style-loader": "^2.0.0",
	"webpack": "^5.15.0",
	"webpack-cli": "^4.3.1"
	}
	}
	import React from 'react';
	import ReactDOM from 'react-dom';
	const { path } = require('path');

	import App from './ml.js';

	ReactDOM.render(<App />, document.getElementById('root'));
	const path = require('path');

	module.exports = {
	mode: 'development',
	entry: './src/index.js',
	// entry: './electron.js',
	devtool: 'inline-source-map',
	target: 'electron-renderer',
	module: {
	rules: [
	{
	test: /\.js$/,
	include: /src/,
	// exclude: /node_modules/,
	use: {
	loader: 'babel-loader',
	options: {
	presets: [[
	'@babel/preset-env', {
	targets: {
	esmodules: true
	}
	}],
	'@babel/preset-react'],
	plugins: [
	"babel-plugin-transform-class-properties"
	],
	}
	}
	},
	{
	test: [/\.s[ac]ss$/i, /\.css$/i],
	use: [
	// Creates `style` nodes from JS strings
	'style-loader',
	// Translates CSS into CommonJS
	'css-loader',
	// Compiles Sass to CSS
	'sass-loader',
	],
	}
	]
	},
	resolve: {
	extensions: ['.js'],
	},
	output: {
	filename: 'app.js',
	path: path.resolve(__dirname, 'build', 'js'),
	}
	};