Refactor rendering process.

Author: mikecao

src/core/Process.js

@@ -11,33 +11,29 @@ export default class Process extends EventEmitter {
   start(args) {
     logger.log('Starting process:', this.command, (args || []).join(' '));
 
-    // Spawn process
-    const { process, stop, push } = api.spawnProcess(this.command, args);
-
-    // Connect handlers
-    process.stdout.on('data', data => {
-      this.emit('stdout', data);
-    });
-
-    process.stderr.on('data', data => {
-      this.emit('stderr', data);
-    });
-
-    process.on('close', (code, signal) => {
-      logger.log('Process ended with code', code, 'and signal', signal);
+    const handlers = {
+      onStdOut: data => {
+        this.emit('data', data);
+      },
+      onStdErr: data => {
+        this.emit('data', data);
+      },
+      onClose: (code, signal) => {
+        logger.log('Process ended with code', code, 'and signal', signal);
+
+        this.emit('close', code, signal);
+      },
+      onExit: (code, signal) => {
+        this.emit('exit', code, signal);
+      },
+      onError: err => {
+        this.emit('error', err);
+      },
+    };
 
-      this.emit('close', code, signal);
-    });
-
-    process.on('exit', (code, signal) => {
-      this.emit('exit', code, signal);
-    });
-
-    process.on('error', err => {
-      this.emit('error', err);
-    });
+    // Spawn process
+    const { stop, push } = api.spawnProcess(this.command, args, handlers);
 
-    this.process = process;
     this.stop = stop;
     this.push = push;
 

src/main/api/process.js

@@ -1,14 +1,31 @@
 import { Transform } from 'stream';
 import { spawn } from 'child_process';
 
-export function spawnProcess(command, args) {
+export function spawnProcess(command, args, props = {}) {
   const stream = new Transform();
   const process = spawn(command, args);
+  const { onStdOut, onStdErr, onClose, onExit, onError } = props;
+
+  if (onStdOut) {
+    process.stdout.on('data', data => onStdOut(data.toString()));
+  }
+  if (onStdErr) {
+    process.stderr.on('data', data => onStdErr(data.toString()));
+  }
+  if (onClose) {
+    process.on('close', onClose);
+  }
+  if (onExit) {
+    process.on('exit', onExit);
+  }
+  if (onError) {
+    process.on('error', onError);
+  }
 
   stream.pipe(process.stdin);
 
   const stop = signal => process.kill(signal);
   const push = data => stream.push(data);
 
-  return { process, stop, push };
+  return { stop, push };
 }

src/main/environment.js

@@ -11,7 +11,6 @@ export const APP_PATH = app.getAppPath();
 export const OS_PLATFORM = os.platform();
 export const IS_WINDOWS = OS_PLATFORM === 'win32';
 export const IS_MACOS = OS_PLATFORM === 'darwin';
-export const USER_AGENT = `${APP_NAME}/${APP_VERSION}`;
 export const USER_DATA_PATH = app.getPath('userData');
 export const TEMP_PATH = path.join(app.getPath('temp'), APP_NAME);
 export const FFMPEG_PATH = path.join(APP_PATH, '..', 'bin', IS_WINDOWS ? 'ffmpeg.exe' : 'ffmpeg');
@@ -21,4 +20,12 @@ export const APP_CONFIG_FILE = path.join(
 );
 export const LICENSE_FILE = path.join(USER_DATA_PATH, 'license.dat');
 export const ELECTRON_VERSION = process.versions.electron;
+export const CHROME_VERSION = process.versions.chrome;
+export const V8_VERSION = process.versions.v8;
+export const NODE_VERSION = process.versions.node;
 export const MACHINE_ID = machineIdSync();
+export const USER_AGENT = [
+  `${APP_NAME}/${APP_VERSION} (${OS_PLATFORM})`,
+  `Chrome/${CHROME_VERSION}`,
+  `Electron/${ELECTRON_VERSION}`,
+].join(' ');

src/view/components/modals/VideoSettings.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { player } from 'global';
+import { api, player } from 'global';
 import { Settings, Setting } from 'components/editing';
 import Layout from 'components/layout/Layout';
 import Button from 'components/interface/Button';
@@ -39,11 +39,9 @@ export default function VideoSettings({ onClose }) {
     }));
   }, []);
 
-  function handleChange(name, value) {
-    const props = { [name]: value };
-
-    if (name === 'format' && videoFile) {
-      props.videoFile = replaceExt(videoFile, `.${value}`);
+  function handleChange(props) {
+    if (props.format && videoFile) {
+      props.videoFile = replaceExt(videoFile, `.${props.format}`);
     }
 
     setState(state => ({ ...state, ...props }));

src/view/components/window/Dialog.less

@@ -7,7 +7,7 @@
 .body {
   display: flex;
   flex-direction: row;
-  padding: 20px;
+  padding: 40px;
 }
 
 .icon {
@@ -18,7 +18,3 @@
 .message {
   flex: 1;
 }
-
-.buttons {
-
-}

src/view/assets/fonts.css renamed to src/view/fonts.css

@@ -4,7 +4,8 @@
     <meta charset="utf-8" />
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval'; img-src * data:">
     <title>Astrofox</title>
-    <link rel="preload" href="fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="fonts/roboto.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="images/about_bg.jpg" as="image" />
     <link rel="stylesheet" href="fonts.css" />
     <link rel="stylesheet" href="app.css" />
   </head>

src/view/assets/index.html renamed to src/view/index.html

@@ -4,9 +4,9 @@ import { Provider } from 'react-redux';
 import App from 'components/App';
 import * as globals from './global';
 import getStore from './store';
-import 'assets/index.html';
-import 'assets/fonts.css';
 import 'styles/index.less';
+import './fonts.css';
+import './index.html';
 
 const store = getStore();