From 1e8e8bc555e965c68d7ad2f0335892f727f3456c Mon Sep 17 00:00:00 2001 From: Mosh Feu Date: Sun, 6 Jan 2019 14:41:03 +0200 Subject: [PATCH] Allow to change quality (#14) --- main.ts | 3 +- package.json | 2 +- .../electron-events-listener.tsx | 6 ++-- src/components/main.tsx | 5 +-- .../preferences-modal/preferences-modal.tsx | 36 ++++++++++++++++--- src/components/video.tsx | 3 +- src/mobx/store.ts | 2 +- src/services/api.ts | 5 +-- src/services/modals.ts | 24 +++++++++++++ src/services/settings.ts | 10 ++++++ src/types.ts | 6 ++++ 11 files changed, 85 insertions(+), 17 deletions(-) create mode 100644 src/services/modals.ts diff --git a/main.ts b/main.ts index 0e23bf7..1a6aa41 100644 --- a/main.ts +++ b/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'); } } diff --git a/package.json b/package.json index e631158..5be0a21 100644 --- a/package.json +++ b/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", diff --git a/src/components/electron-events-listener/electron-events-listener.tsx b/src/components/electron-events-listener/electron-events-listener.tsx index cfb3bf9..6e0289a 100644 --- a/src/components/electron-events-listener/electron-events-listener.tsx +++ b/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() { diff --git a/src/components/main.tsx b/src/components/main.tsx index b914d35..98f5d4e 100644 --- a/src/components/main.tsx +++ b/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 && store.isFFMpegInstalled = true} /> } - store.isAboutOpen = false} /> - store.isPreferencesOpen = false} /> + + ); } diff --git a/src/components/preferences-modal/preferences-modal.tsx b/src/components/preferences-modal/preferences-modal.tsx index ab9d536..fba0223 100644 --- a/src/components/preferences-modal/preferences-modal.tsx +++ b/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 { componentWillMount() { this.setState({ - downloadsFolder: settingsManager.downloadsFolder + downloadsFolder: settingsManager.downloadsFolder, + quality: settingsManager.audioQuality }); } @@ -31,9 +40,19 @@ export class PreferencesModal extends React.Component { + 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 (
@@ -46,6 +65,15 @@ export class PreferencesModal extends React.Component + + + + diff --git a/src/components/video.tsx b/src/components/video.tsx index dcd8951..de9276e 100644 --- a/src/components/video.tsx +++ b/src/components/video.tsx @@ -36,8 +36,7 @@ export class Video extends React.Component { text={text} progress={video.progress} onClick={() => onVideoDownloadClick(video)} - disabled={isDisabled} - /> + disabled={isDisabled} /> diff --git a/src/mobx/store.ts b/src/mobx/store.ts index 3d4c386..ca8ef3d 100644 --- a/src/mobx/store.ts +++ b/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 }) => { diff --git a/src/services/api.ts b/src/services/api.ts index 647c138..1c10e8b 100644 --- a/src/services/api.ts +++ b/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)) diff --git a/src/services/modals.ts b/src/services/modals.ts new file mode 100644 index 0000000..edf611f --- /dev/null +++ b/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;`` + } +} \ No newline at end of file diff --git a/src/services/settings.ts b/src/services/settings.ts index 3ee4367..806cbe5 100644 --- a/src/services/settings.ts +++ b/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(); diff --git a/src/types.ts b/src/types.ts index aee56c1..b89b06d 100644 --- a/src/types.ts +++ b/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; } \ No newline at end of file