Switch to node-pty-prebuilt-multiarch and upgrade Electron

render/index.js

@@ -1,28 +1,31 @@
 /**
  * Render the frames into PNG images
  * An electron app, takes one command line argument `step`
- * 
+ *
  * @author Mohammad Fares <faressoft.com@gmail.com>
  */
 
-var path          = require('path'),
-    app           = require('electron').app,
-    BrowserWindow = require('electron').BrowserWindow,
-    ipcMain       = require('electron').ipcMain,
-    os            = require('os');
+const fs = require('fs');
+const path = require('path');
+const { app } = require('electron');
+const { BrowserWindow } = require('electron');
+const ipcMain = require('electron').ipcMain;
+const os = require('os');
+
+let mainWindow = null;
+
+/**
+ * The temporary rendering directory's path
+ * @type {String}
+ */
+var renderDir = path.join(__dirname, 'frames');
 
 /**
  * The step option
  * To reduce the number of rendered frames (step > 1)
  * @type {Number}
  */
-global.step = process.argv[2] || 1;
-
-/**
- * The temporary rendering directory's path
- * @type {String}
- */
-global.renderDir = path.join(__dirname, 'frames');
+var step = process.argv[2] || 1;
 
 // Hide the Dock for macOS
 if (os.platform() == 'darwin') {
@@ -36,33 +39,53 @@ app.on('ready', createWindow);
  * Create a hidden browser window and load the rendering page
  */
 function createWindow() {
-
   // Create a browser window
-  var win = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     show: false,
     width: 8000,
     height: 8000,
     webPreferences: {
-      nodeIntegration: true
-    }
+      preload: path.join(__dirname, 'preload.js'),
+    },
   });
 
-  // Load index.html 
-  win.loadURL('file://' + __dirname + '/index.html');
-
+  // Load index.html
+  mainWindow.loadURL('file://' + __dirname + '/index.html');
 }
 
 /**
  * A callback function for the event:
- * When a frame is captured
- * 
+ * getOptions to request the options that need
+ * to be passed to the renderer
+ *
  * @param {Object} event
- * @param {Number} recordIndex
  */
-ipcMain.on('captured', function(event, recordIndex) {
+ipcMain.handle('getOptions', function () {
+  return { step };
+});
 
-  console.log(recordIndex);
-  
+/**
+ * A callback function for the event:
+ * capturePage
+ *
+ * @param {Object} event
+ */
+ipcMain.handle('capturePage', async function (event, captureRect, frameIndex) {
+  const img = await mainWindow.webContents.capturePage(captureRect);
+  const outputPath = path.join(renderDir, frameIndex + '.png');
+  fs.writeFileSync(outputPath, img.toPNG());
+  console.log(frameIndex);
+});
+
+/**
+ * A callback function for the event:
+ * Close
+ *
+ * @param {Object} event
+ * @param {String} error
+ */
+ipcMain.on('close', function (event, error) {
+  mainWindow.close();
 });
 
 /**
@@ -72,8 +95,6 @@ ipcMain.on('captured', function(event, recordIndex) {
  * @param {Object} event
  * @param {String} error
  */
-ipcMain.on('error', function(event, error) {
-
+ipcMain.on('error', function (event, error) {
   process.stderr.write(error);
-  
 });

render/preload.js

@@ -0,0 +1,19 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('app', {
+  close() {
+    return ipcRenderer.send('close');
+  },
+  getOptions() {
+    return ipcRenderer.invoke('getOptions');
+  },
+  capturePage(captureRect, frameIndex) {
+    console.log('prelaod > capturePage');
+    return ipcRenderer.invoke('capturePage', captureRect, frameIndex);
+  },
+});
+
+// Catch all unhandled errors
+window.onerror = function (error) {
+  ipcRenderer.send('error', error);
+};

render/src/js/app.js

@@ -1,19 +1,11 @@
 /**
  * Terminalizer
- * 
+ *
  * @author Mohammad Fares <faressoft.com@gmail.com>
  */
 
-var fs                 = require('fs'),
-    path               = require('path'),
-    async              = require('async'),
-    remote             = require('electron').remote,
-    ipcRenderer        = require('electron').ipcRenderer,
-    terminalizerPlayer = require('terminalizer-player');
-var currentWindow      = remote.getCurrentWindow(),
-    capturePage        = currentWindow.webContents.capturePage,
-    step               = remote.getGlobal('step'),
-    renderDir          = remote.getGlobal('renderDir');
+import async from 'async';
+import 'terminalizer-player';
 
 // Styles
 import '../css/app.css';
@@ -26,119 +18,98 @@ import 'xterm/dist/xterm.css';
  */
 var stepsCounter = 0;
 
+/**
+ * Rendering options
+ */
+var options = {};
+
 /**
  * A callback function for the event:
  * When the document is loaded
  */
-$(document).ready(function() {
-  
+$(document).ready(async () => {
+  options = await app.getOptions();
+
   // Initialize the terminalizer plugin
   $('#terminal').terminalizer({
     recordingFile: 'data.json',
     autoplay: true,
-    controls: false
+    controls: false,
   });
 
   /**
    * A callback function for the event:
    * When the terminal playing is started
    */
-  $('#terminal').one('playingStarted', function() {
-
+  $('#terminal').one('playingStarted', function () {
     var terminalizer = $('#terminal').data('terminalizer');
 
     // Pause the playing
     terminalizer.pause();
-
   });
 
   /**
    * A callback function for the event:
    * When the terminal playing is paused
    */
-  $('#terminal').one('playingPaused', function() {
-
+  $('#terminal').one('playingPaused', function () {
     var terminalizer = $('#terminal').data('terminalizer');
 
     // Reset the terminal
     terminalizer._terminal.reset();
 
-    // When the terminal's reset is done 
+    // When the terminal's reset is done
     $('#terminal').one('rendered', render);
-
   });
-
 });
 
 /**
  * Render each frame and capture it
  */
 function render() {
-
   var terminalizer = $('#terminal').data('terminalizer');
   var framesCount = terminalizer.getFramesCount();
 
   // Foreach frame
-  async.timesSeries(framesCount, function(frameIndex, next) {
+  async.timesSeries(
+    framesCount,
+    function (frameIndex, next) {
+      terminalizer._renderFrame(frameIndex, true, function () {
+        capture(frameIndex, next);
+      });
+    },
+    function (error) {
+      if (error) {
+        throw new Error(error);
+      }
 
-    terminalizer._renderFrame(frameIndex, true, function() {
-      capture(frameIndex, next);
-    });
-
-  }, function(error) {
-
-    if (error) {
-      throw new Error(error);
+      app.close();
     }
-
-    currentWindow.close();
-    
-  });
-
+  );
 }
 
 /**
  * Capture the current frame
- * 
+ *
  * @param {Number}   frameIndex
  * @param {Function} callback
  */
 function capture(frameIndex, callback) {
-
   var width = $('#terminal').width();
   var height = $('#terminal').height();
-  var captureRect = {x: 0, y: 0, width: width, height: height};
+  var captureRect = { x: 0, y: 0, width: width, height: height };
 
   if (stepsCounter != 0) {
-    stepsCounter = (stepsCounter + 1) % step;
+    stepsCounter = (stepsCounter + 1) % options.step;
     return callback();
   }
 
-  stepsCounter = (stepsCounter + 1) % step;
-
-  capturePage(captureRect).then((img) => {
-  
-    var outputPath = path.join(renderDir, frameIndex + '.png');
-  
-    fs.writeFileSync(outputPath, img.toPNG());
-    ipcRenderer.send('captured', frameIndex);
-    callback();
-  
-  }).catch((err) => {
-  
-    throw new err;    
-  
-  });
+  stepsCounter = (stepsCounter + 1) % options.step;
 
+  app
+    .capturePage(captureRect, frameIndex)
+    .then(callback)
+    .catch((err) => {
+      throw err;
+    });
 }
-
-/**
- * Catch all unhandled errors
- * 
- * @param {String} error
- */
-window.onerror = function(error) {
-
-  ipcRenderer.send('error', error);
-
-};