Allow to change quality (#14)

main.ts

@@ -60,8 +60,7 @@ function createWindow() {
     if (ex) {
       BrowserWindow.addDevToolsExtension(reactDevtoolsPath);
     } else {
-      console.error()
-      alert('react devtools extension path not found');
+      console.error('react devtools extension path not found');
     }
   }
 

package.json

@@ -2,7 +2,7 @@
   "name": "y2mp3",
   "appname": "y2mp3",
   "productName": "y2mp3",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "main": "main.js",
   "author": {
     "name": "MosheF",

src/components/electron-events-listener/electron-events-listener.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { ipcRenderer } from '../../services/electron-adapter';
-import store from '../../mobx/store';
+import { openAbout, openPreferences } from '../../services/modals';
 
 @observer
 export class ElectronEventsListener extends React.Component {
   componentDidMount() {
-    ipcRenderer.on('open-about', () => store.isAboutOpen = true);
-    ipcRenderer.on('open-preferences', () => store.isPreferencesOpen = true);
+    ipcRenderer.on('open-about', openAbout);
+    ipcRenderer.on('open-preferences', openPreferences);
   }
 
   render() {

src/components/main.tsx

@@ -13,6 +13,7 @@ import { InstallFFMpeg } from './install-ffmpeg';
 import { AboutModal } from './about-modal';
 import { PreferencesModal } from './preferences-modal/preferences-modal';
 import { ElectronEventsListener } from './electron-events-listener';
+import { closeModal} from '../services/modals';
 
 @observer
 class Main extends React.Component<{}, {}> {
@@ -60,8 +61,8 @@ class Main extends React.Component<{}, {}> {
         {
           !store.isFFMpegInstalled && <InstallFFMpeg onDone={() => store.isFFMpegInstalled = true} />
         }
-        <AboutModal open={store.isAboutOpen} onClose={() => store.isAboutOpen = false} />
-        <PreferencesModal open={store.isPreferencesOpen} onClose={() => store.isPreferencesOpen = false} />
+        <AboutModal open={store.isAboutOpen} onClose={closeModal} />
+        <PreferencesModal open={store.isPreferencesOpen} onClose={closeModal} />
       </div>
     );
   }

src/components/preferences-modal/preferences-modal.tsx

@@ -1,17 +1,26 @@
 import * as React from 'react';
-import { IModalProps } from '../../types';
-import { Icon, Modal, Header, Button, Form } from 'semantic-ui-react';
+import { IModalProps, IQualityOption } from '../../types';
+import { Icon, Modal, Header, Button, Form, Dropdown, DropdownProps } from 'semantic-ui-react';
 import { remote } from '../../services/electron-adapter';
 import { settingsManager, IConfig } from '../../services/settings';
+import { DownloadQuality } from 'youtube-mp3-downloader';
+import { SyntheticEvent } from 'react';
+
+const qualityOptions: IQualityOption[] = ['highest', 'lowest'].map(option => ({
+  text: option,
+  value: option,
+}));
 
 interface IPreferencesModalState extends IConfig {
   downloadsFolder: string;
+  quality: DownloadQuality;
 }
 
 export class PreferencesModal extends React.Component<IModalProps, IPreferencesModalState> {
   componentWillMount() {
     this.setState({
-      downloadsFolder: settingsManager.downloadsFolder
+      downloadsFolder: settingsManager.downloadsFolder,
+      quality: settingsManager.audioQuality
     });
   }
 
@@ -31,9 +40,19 @@ export class PreferencesModal extends React.Component<IModalProps, IPreferencesM
     })
   }
 
+  onChangeQuality = (e: SyntheticEvent, data: DropdownProps) => {
+    const quality = data.value as DownloadQuality;
+
+    settingsManager.audioQuality = quality;
+    this.setState({
+      quality
+    });
+  }
+
   render() {
     const { open, onClose } = this.props;
-    const { downloadsFolder } = this.state;
+    const { downloadsFolder, quality } = this.state;
+
     return (
       <Modal open={open} size='small' className="preferences-modal">
         <Header icon='settings' content='Preferences' />
@@ -46,6 +65,15 @@ export class PreferencesModal extends React.Component<IModalProps, IPreferencesM
               <Button className="open-directory-button" icon='folder open outline' onClick={this.openDirectoryExplorer} />
             </label>
           </Form.Field>
+          <Form.Field inline>
+            <label>Quality</label>
+            <label>
+              <Dropdown
+                options={qualityOptions}
+                onChange={this.onChangeQuality}
+                value={quality} />
+            </label>
+          </Form.Field>
         </Form>
         </Modal.Content>
         <Modal.Actions>

src/components/video.tsx

@@ -36,8 +36,7 @@ export class Video extends React.Component<IVideoProps, any> {
               text={text}
               progress={video.progress}
               onClick={() => onVideoDownloadClick(video)}
-              disabled={isDisabled}
-            />
+              disabled={isDisabled} />
           </div>
         </div>
       </div>

src/mobx/store.ts

@@ -45,7 +45,7 @@ class Store {
     const video = this.getVideo(videoId);
     video.status = EVideoStatus.DOWNLOADING;
     video.progress = 20 + Math.floor(progress.percentage * 0.8);
-    console.log(toJS(this.videos), 'progress');
+    console.log(toJS(this.videos), progress, 'progress');
   }
 
   @action finished = (err, { videoId }: { videoId: string }) => {

src/services/api.ts

@@ -14,9 +14,10 @@ import { existsSync } from 'fs';
 export const downloader = new YoutubeMp3Downloader({
   ffmpegPath: ffmpegPath(),             // Where is the FFmpeg binary located?
   outputPath: settingsManager.downloadsFolder,         // Where should the downloaded and encoded files be stored?
-  youtubeVideoQuality: 'highest',       // What video quality should be used?
+  youtubeVideoQuality: settingsManager.audioQuality,       // What video quality should be used?
   queueParallelism: 1,                  // How many parallel downloads/encodes should be started?
-  progressTimeout: 1000                 // How long should be the interval of the progress reports
+  progressTimeout: 1000,                 // How long should be the interval of the progress reports
+  filter: 'audio'
 })
   .on('addToQueue', videoId => store.addToQueue(videoId))
   .on('gettingInfo', videoId => store.gettingInfo(videoId))

src/services/modals.ts

@@ -0,0 +1,24 @@
+import store from '../mobx/store';
+
+let currentOpen: 'about' | 'preferences';
+
+export function openAbout() {
+  store.isAboutOpen = true;
+  currentOpen = 'about';
+}
+
+export function openPreferences() {
+  store.isPreferencesOpen = true;
+  currentOpen = 'preferences';
+}
+
+export function closeModal() {
+  switch (currentOpen) {
+    case 'about':
+      store.isAboutOpen = false
+      break;
+    case 'preferences':
+      store.isPreferencesOpen = false;
+    break;``
+  }
+}

src/services/settings.ts

@@ -1,5 +1,6 @@
 import { DOWNLOADS_FOLDER } from './path';
 import { downloader } from './api';
+import { DownloadQuality } from 'youtube-mp3-downloader';
 
 export interface IConfig {
   downloadsFolder: string;
@@ -14,6 +15,15 @@ class SettingsManager implements IConfig {
     localStorage.setItem('downloadsFolder', path);
     downloader.setOutputPath(path);
   }
+
+  get audioQuality(): DownloadQuality {
+    return localStorage.getItem('audioQuality') || 'highest';
+  }
+
+  set audioQuality(quality: DownloadQuality) {
+    localStorage.setItem('audioQuality', '' + quality);
+    downloader.setQuality(quality);
+  }
 }
 
 export const settingsManager = new SettingsManager();

src/types.ts

@@ -1,4 +1,5 @@
 import { videoInfo } from 'ytdl-core';
+import { DownloadQuality } from 'youtube-mp3-downloader';
 
 export interface IVideoEntity {
   id: string;
@@ -46,4 +47,9 @@ export enum EVideoStatus {
   PENDING = 'Pending',
   DOWNLOADING = 'Downloading',
   DONE = 'Done'
+}
+
+export interface IQualityOption {
+  text: DownloadQuality;
+  value: DownloadQuality;
 }