Version 2, ridding of reliance on web-service

app/containers/app.container.js

@@ -1,14 +1,16 @@
-import React, {Component} from 'react';
 import LinkInput from '../components/LinkInput';
 import ProgressBar from '../components/ProgressBar';
-const ytdl = window.require('ytdl-core');
-const fs = window.require('fs-extra');
+
+import React, {Component} from 'react';
+
 import * as path from 'path';
-import OutputPath from "../components/OutputPath";
+
 const ffmpeg = window.require('fluent-ffmpeg');
 const binaries = window.require('ffmpeg-binaries');
 const sanitize = window.require('sanitize-filename');
-const {remote} = window.require('electron');
+const {ipcRenderer, remote} = window.require('electron');
+const ytdl = window.require('ytdl-core');
+const fs = window.require('fs-extra');
 
 class AppContainer extends Component {
   constructor(props) {
@@ -20,7 +22,11 @@ class AppContainer extends Component {
       userDownloadsFolder: localStorage.getItem('userSelectedFolder') ? localStorage.getItem('userSelectedFolder') : remote.app.getPath('downloads'),
     };
 
-    console.log();
+    // Signal from main process to show prompt to change the download to folder.
+    ipcRenderer.on('promptForChangeDownloadFolder', () => {
+      // Changing the folder in renderer because we need access to both state and local storage.
+      this.changeOutputFolder();
+    });
 
     // This property will be used to control the rate at which the progress bar is updated to prevent UI lag.
     this.rateLimitTriggered = false;
@@ -149,42 +155,33 @@ class AppContainer extends Component {
     // Make sure progress bar is at 100% and tell the user we have completed the task successfully.
     this.setState({
       progress: 100,
-      progressMessage: 'Conversion successful! Resetting in 5 seconds.'
+      progressMessage: 'Conversion successful!'
     });
 
     // Reset the progress bar to the LinkInput
     setTimeout(() => this.setState({
       showProgressBar: false
-    }), 6000);
+    }), 2000);
   }
 
   changeOutputFolder() {
     // Create an electron open dialog for selecting folders, this will take into account platform.
-    let fileSelector = remote.dialog.showOpenDialog({properties: ['openDirectory'], title: 'Select folder to store files.'});
+    let fileSelector = remote.dialog.showOpenDialog({defaultPath: `${this.state.userDownloadsFolder}`, properties: ['openDirectory'], title: 'Select folder to store files.'});
 
     // If a folder was selected and not just closed, set the localStorage value to that path and adjust the state.
     if (fileSelector) {
       let pathToStore = fileSelector[0];
       localStorage.setItem('userSelectedFolder', pathToStore);
       this.setState({userDownloadsFolder: pathToStore});
+      console.log(`New current path ${localStorage.getItem('userSelectedFolder')}`)
     }
   }
 
   render() {
     if (this.state.showProgressBar) {
-      return (
-        <div>
-          <ProgressBar progress={this.state.progress} messageText={this.state.progressMessage}/>
-          <OutputPath changeLocation={this.changeOutputFolder} userSelectedFolder={this.state.userDownloadsFolder}/>
-        </div>
-      );
+      return <ProgressBar progress={this.state.progress} messageText={this.state.progressMessage}/>;
     } else {
-      return (
-        <div>
-          <LinkInput startDownload={this.startDownload}/>
-          <OutputPath changeLocation={this.changeOutputFolder} userSelectedFolder={this.state.userDownloadsFolder}/>
-        </div>
-      );
+      return <LinkInput startDownload={this.startDownload}/>;
     }
   }
 }

main.js

@@ -40,10 +40,18 @@ function createWindow() {
       {label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:"},
       {label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:"}
     ]
-  }];
+  }, {
+    label: "Preferences",
+    submenu: [
+      {label: "Download Folder", click: () => {
+        mainWindow.webContents.send('promptForChangeDownloadFolder');
+      }}
+    ]
+  }
+  ];
 
   // If developing add dev menu option to menu bar
-  if (isDevMode)
+  if (isDevMode) {
     template.push({
       label: 'Dev Options',
       submenu: [
@@ -54,6 +62,7 @@ function createWindow() {
         }
       ]
     });
+  }
 
   Menu.setApplicationMenu(Menu.buildFromTemplate(template));
 

public/css/global.css

@@ -71,27 +71,3 @@ body {
   margin-top: 10px;
   font-weight: 200;
   cursor: pointer; }
-
-.output_folder_display {
-  position: absolute;
-  left: 3px;
-  bottom: 1px;
-  font-size: 10pt;
-  color: rgba(55,55,55,0.7)
-}
-
-.output_folder_display span:last-child{
-  font-style: italic;
-  font-weight: normal;
-}
-
-.output_folder_display span:first-child {
-  font-weight: bold;
-  font-style: normal;
-  padding-left: 10px;
-}
-
-.output_folder_display a {
-  color: rgba(50,80,150,0.6);
-  cursor: pointer;
-}