resolve #6 - Fix about menu option in win and linux

moshfeu · Dec 13, 2018 · 22a68b3 · 22a68b3
1 parent e2d8c29
commit 22a68b3
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 39 deletions.
diff --git a/appveyor.yml b/appveyor.yml
@@ -26,9 +26,6 @@ build_script:
   - npm run generate-icons
   - npm run dist
 test: true
-# artifacts:
-# - path: dist/*.exe
-#   name: y2mp3
 deploy:
   - provider: GitHub
     auth_token:

diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <title>y2mp3</title>
   <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.css" rel="stylesheet" />
 </head>
 
 <body>

diff --git a/main.js b/main.js
@@ -5,12 +5,18 @@ const os = require('os');
 
 // 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.
+
+const eos = {
+  MAC: 'darwin',
+  WINDOWS: 'win32'
+};
+
 let win;
 function getIconFile() {
   switch (os.platform()) {
-    case 'darwin':
+    case eos.MAC:
       return 'mac/icon.icns';
-    case 'win32':
+    case eos.WINDOWS:
     default:
       return 'win/icon.ico';
   }
@@ -44,14 +50,18 @@ function createWindow () {
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
     win = null
-  })
+  });
 
   // Create the Application's main menu
   const template = [
     {
       label: "Application",
       submenu: [
-        { label: "About Application", selector: "orderFrontStandardAboutPanel:" },
+        { label: "About Application", click: function() {
+          // if (os.platform() !== eos.MAC) {
+            win.webContents.send('open-about');
+          // }
+        } },
         { type: "separator" },
         { label: "Toggle Developer Tools", accelerator: "CommandOrControl+Option+J", click: function() {
           win.webContents.openDevTools()

diff --git a/package.json b/package.json
@@ -2,12 +2,12 @@
   "name": "y2mp3",
   "appname": "y2mp3",
   "productName": "y2mp3",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "main.js",
   "author": {
-    "name" : "MosheF",
-    "email" : "moshfeu.dev@gmail.com",
-    "url" : "https://github.com/moshfeu"
+    "name": "MosheF",
+    "email": "moshfeu.dev@gmail.com",
+    "url": "https://github.com/moshfeu"
   },
   "email": "moshfeu.dev@gmail.com",
   "license": "MIT",
@@ -32,6 +32,7 @@
     "enzyme-adapter-react-16": "^1.7.1",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
+    "semantic-ui-react": "^0.84.0",
     "sinon": "^7.1.1",
     "youtube-mp3-downloader": "git+https://github.com/moshfeu/youtube-mp3-downloader.git",
     "youtube-playlist": "^1.0.2"

diff --git a/src/components/about-modal/about-modal.tsx b/src/components/about-modal/about-modal.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import Button from 'semantic-ui-react/dist/commonjs/elements/Button';
+import Modal from 'semantic-ui-react/dist/commonjs/modules/Modal';
+import Header from 'semantic-ui-react/dist/commonjs/elements/Header';
+import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon';
+import { remote } from '../../services/electron-adapter';
+
+interface IAboutModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default class AboutModal extends React.Component<IAboutModalProps> {
+  render() {
+    const { open, onClose } = this.props;
+    return (
+      <Modal open={open} basic size='small'>
+        <Header icon='info circle' content='About' />
+        <Modal.Content>
+          <p>
+            <b>Version:</b> {remote.app.getVersion()}
+          </p>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button color='green' inverted onClick={() => onClose()}>
+            <Icon name='checkmark' /> Ok
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    )
+  }
+}
diff --git a/src/components/about-modal/index.ts b/src/components/about-modal/index.ts
@@ -0,0 +1 @@
+export {default} from './about-modal';
diff --git a/src/components/main.tsx b/src/components/main.tsx
@@ -10,12 +10,15 @@ import { isFFMpegInstalled } from '../services/ffmpeg-installer';
 import { Form } from './form';
 import ButtonProgress from './button-progress';
 import { InstallFFMpeg } from './install-ffmpeg';
+import { ipcRenderer } from '../services/electron-adapter';
+import AboutModal from './about-modal';
 
 interface IMainState {
   videos: IVideoEntity[];
   inProcess: boolean;
   doneDownloading: boolean;
   isFFMpegInstalled: boolean;
+  isAboutOpen: boolean;
 }
 
 class Main extends React.Component<{}, IMainState> {
@@ -27,35 +30,17 @@ class Main extends React.Component<{}, IMainState> {
       videos: [],
       inProcess: false,
       doneDownloading: false,
-      isFFMpegInstalled: isFFMpegInstalled()
+      isFFMpegInstalled: isFFMpegInstalled(),
+      isAboutOpen: false
     };
   }
 
   componentDidMount() {
     this.listenToDownloader();
 
-    // this.setState({
-    //   videos: [
-    //     {
-    //       "id": "JvKKd32Yw2E",
-    //       "name": "video 1",
-    //       "progress": 0,
-    //       "status": EVideoStatus.NOT_STARTED
-    //     },
-    //     {
-    //       "id": "tPEE9ZwTmy0",
-    //       "name": "video 2",
-    //       "progress": 0,
-    //       "status": EVideoStatus.NOT_STARTED
-    //     },
-    //     {
-    //       "id": "cdwal5Kw3Fc",
-    //       "name": "video 3",
-    //       "progress": 0,
-    //       "status": EVideoStatus.NOT_STARTED
-    //     }
-    //   ]
-    // })
+    ipcRenderer.on('open-about', () => this.setState({
+      isAboutOpen: true
+    }));
   }
 
   fetchVideosClick = async (terms: string) => {
@@ -181,6 +166,7 @@ class Main extends React.Component<{}, IMainState> {
         {
           !isFFMpegInstalled && <InstallFFMpeg onDone={() => this.setState({isFFMpegInstalled: true})} />
         }
+        <AboutModal open={this.state.isAboutOpen} onClose={() => this.setState({isAboutOpen: false})} />
       </div>
     );
   }

diff --git a/src/services/electron-adapter.ts b/src/services/electron-adapter.ts
@@ -0,0 +1,17 @@
+import {IpcRenderer, Remote} from 'electron';
+
+declare global {
+  interface Window {
+    require: (module: 'electron') => {
+      ipcRenderer: IpcRenderer,
+      remote: Remote
+    };
+  }
+}
+
+const electron = window.require('electron');
+const { ipcRenderer, remote } = electron;
+export {
+  ipcRenderer,
+  remote
+}
diff --git a/src/styles/components/form.scss b/src/styles/components/form.scss
@@ -108,8 +108,8 @@
         }
 
         &::after {
-          width: 14px;
-          height: 14px;
+          width: 18px;
+          height: 18px;
           left: 0px;
           top: 0px;
           border-radius: 16px;

diff --git a/webpack.config.js b/webpack.config.js
@@ -55,7 +55,7 @@ module.exports = {
   },
   output: {
     filename: 'resources/app.bundle.js',
-    sourceMapFilename: 'maps/app.[chunkhash].map.js',
+    sourceMapFilename: 'resources/app.bundle.js.map',
     path: __dirname
   },
   mode: 'development',
@@ -76,6 +76,5 @@ module.exports = {
         // });
       }
     }
-  ],
-  devtool: 'source-map'
+  ]
 }
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,5 +1,6 @@
 const config = require('./webpack.config');
 
 config.watch = false;
+config.mode = 'production';
 
 module.exports = config;