v2.4.0 (#49)

moshfeu · Oct 28, 2019 · 02f4fc8 · 02f4fc8
1 parent 3637470
commit 02f4fc8
Show file tree

Hide file tree

Showing 17 changed files with 1,458 additions and 1,299 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,5 +3,6 @@
     "**/*.js.map": true,
     "**/*.bundle.js": true
   },
-  "javascript.implicitProjectConfig.experimentalDecorators": true
+  "javascript.implicitProjectConfig.experimentalDecorators": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 [![Travis-ci build Status](https://travis-ci.com/moshfeu/y2mp3.svg?branch=master)](https://travis-ci.com/moshfeu/y2mp3)
 [![Wallaby.js](https://img.shields.io/badge/wallaby.js-configured-green.svg)](https://wallabyjs.com)
 [![Release version](https://img.shields.io/github/release/moshfeu/y2mp3.svg)](https://github.com/moshfeu/y2mp3/releases/latest)
+[![Github All Releases](https://img.shields.io/github/downloads/moshfeu/y2mp3/total.svg)](https://github.com/moshfeu/y2mp3/releases)
 
 <img src="app-resources/logo-128.png" alt="logo" />
 
@@ -39,6 +40,11 @@ Find your download: [https://github.com/moshfeu/y2mp3/releases/latest](https://g
 
 ## Change log
 
+##### 2.4.0
+
+- Allow to stop active video download
+- Scroll the screen to a download when it starts
+
 ##### 2.3.0
 
 - Allow to remove videos from the list

diff --git a/main.ts b/main.ts
@@ -76,7 +76,7 @@ function createWindow() {
 
   win.on('closed', () => {
     win = null;
-    tray.destroy();
+    tray?.destroy();
     tray = null;
   }).on('focus', () => {
     win.webContents.send(EWindowEvents.WINDOW_FOCUS);

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "y2mp3",
   "appname": "y2mp3",
   "productName": "y2mp3",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "main.js",
   "author": {
     "name": "MosheF",
@@ -61,7 +61,7 @@
     "@types/electron-is-dev": "^0.3.0",
     "@types/enzyme": "^3.1.15",
     "@types/fluent-ffmpeg": "2.1.2",
-    "@types/jest": "^23.3.13",
+    "@types/jest": "^24.0.20",
     "@types/mkdirp": "^0.5.2",
     "@types/node": "^11.13.9",
     "@types/react": "^16.9.5",
@@ -77,7 +77,8 @@
     "enzyme-adapter-react-16": "^1.7.1",
     "ffbinaries": "^1.1.0",
     "file-loader": "^2.0.0",
-    "jest": "^23.6.0",
+    "flush-promises": "^1.0.2",
+    "jest": "^24.9.0",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
     "object-assign": "^4.1.1",
@@ -86,7 +87,7 @@
     "sinon": "^7.2.3",
     "style-loader": "^0.23.1",
     "ts-loader": "^5.3.3",
-    "typescript": "^3.2.4",
+    "typescript": "^3.7.0-dev.20191018",
     "webpack": "^4.28.4",
     "webpack-cli": "^3.2.1"
   },

diff --git a/src/components/form.tsx b/src/components/form.tsx
@@ -20,6 +20,7 @@ interface IFormState {
 }
 
 export class Form extends React.Component<IFormProps, IFormState> {
+  input: HTMLInputElement;
   constructor(props: IFormProps) {
     super(props);
     this.state = {
@@ -40,6 +41,7 @@ export class Form extends React.Component<IFormProps, IFormState> {
         this.setState({
           terms: clipboardContent
         });
+        this.input.focus();
       }
     });
   }
@@ -88,7 +90,7 @@ export class Form extends React.Component<IFormProps, IFormState> {
       <div className={['search-wrapper', containerActive && 'active' || '', hasResult && '-has-result' || '', inProcess && '-in-process' || ''].join(' ')}>
         <form className="search-form" onSubmit={this.onSubmit}>
           <div className="input-holder">
-            <input className="search-input" type="url" placeholder="https://www.youtube.com/..." value={terms} onChange={e => this.setState({terms: e.target.value})} />
+            <input ref={ref => this.input = ref} className="search-input" type="url" placeholder="https://www.youtube.com/..." value={terms} onChange={e => this.setState({terms: e.target.value})} />
             <button type="button" className="search-icon" onClick={this.searchClick} disabled={inProcess}>
               <span></span>
             </button>

diff --git a/src/components/preferences-modal/preferences-modal.tsx b/src/components/preferences-modal/preferences-modal.tsx
@@ -114,7 +114,7 @@ export class PreferencesModal extends React.Component<IModalProps, IPreferencesM
           </Form.Field>
           <Form.Field inline>
             <label>
-              Download with the video thumbnail
+              Set the video's thumnail as album art (for mp3 only)
             </label>
             <label>
               <Checkbox id="albumArt" slider onChange={this.handleFieldChange} checked={albumArt} />

diff --git a/src/components/video.tsx b/src/components/video.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { observe } from 'mobx';
 import { observer } from 'mobx-react';
 import { IVideoEntity, EVideoStatus, IButtonProgressOptions } from '../types';
 import { ButtonProgress } from './button-progress';
@@ -24,6 +25,8 @@ interface IVideoProps {
 
 @observer
 export class Video extends React.Component<IVideoProps, any> {
+  containerNode: HTMLDivElement;
+
   constructor(props) {
     super(props);
   }
@@ -33,7 +36,6 @@ export class Video extends React.Component<IVideoProps, any> {
   }
 
   onClickTitle = () =>  {
-    const { video:{id} } = this.props;
     shell.openExternal(`https://www.youtube.com/watch?v=${this.props.video.id}`);
   }
 
@@ -42,6 +44,17 @@ export class Video extends React.Component<IVideoProps, any> {
     settingsManager.downloadFormat = format;
   }
 
+  componentDidMount() {
+    observe(this.props.video, 'status', status => {
+      if (status.newValue === EVideoStatus.GETTING_INFO) {
+        // wait for removed video to disappear
+        setTimeout(() => {
+          this.containerNode.scrollIntoView({behavior: 'smooth'});
+        }, 0);
+      }
+    });
+  }
+
   render() {
     const { video, onVideoDownloadClick, style } = this.props;
     const { backgroundImage } = this;
@@ -50,17 +63,14 @@ export class Video extends React.Component<IVideoProps, any> {
     const { downloadFormat } = settingsManager;
 
     return (
-      <div className="video" style={{backgroundImage, ...style}}>
-        {
-          (video.status === EVideoStatus.NOT_STARTED || video.status === EVideoStatus.DONE) &&
-          <Popup
-            trigger={
-              <Button className="remove" color="red" circular basic icon="close" onClick={() => removeVideo(video.id)}></Button>
-            }
-            content="Remove"
-            inverted
-          />
-        }
+      <div className="video" ref={elm => this.containerNode = elm} style={{backgroundImage, ...style}}>
+        <Popup
+          trigger={
+            <Button className="remove" color="red" circular basic icon="close" onClick={() => removeVideo(video.id)}></Button>
+          }
+          content="Remove"
+          inverted
+        />
         <div className="details">
           <Popup
             trigger={<div className="name"

diff --git a/src/mobx/store.ts b/src/mobx/store.ts
@@ -1,6 +1,6 @@
 import { observable, computed, action, toJS } from 'mobx';
 import { IVideoEntity, EVideoStatus, IMessage } from '../types';
-import { fetchVideos } from '../services/api';
+import { fetchVideos, removeAllVideos } from '../services/api';
 import { IVideoTask } from '../services/youtube-mp3-downloader';
 import { isFFMpegInstalled } from '../services/ffmpeg-installer';
 import { showTermsIsInvalid, hideMessage, showNoInternet } from '../services/modalsAndAlerts';
@@ -26,11 +26,14 @@ class Store {
     this.searchTerm = term;
     this.searchInProgress = true;
     hideMessage();
+    removeAllVideos();
     try {
-      this.videos = await fetchVideos(this.searchTerm);
-      if (!this.videos.length) {
+      const videos = await fetchVideos(this.searchTerm);;
+      if (!videos.length) {
         showTermsIsInvalid();
+        return;
       }
+      this.videos = videos;
     } catch (error) {
       if (error.code === 'ENOTFOUND') {
         showNoInternet();
@@ -53,22 +56,23 @@ class Store {
     const video = this.getVideo(videoId);
     video.status = EVideoStatus.PENDING;
     video.progress = 0;
-    console.log(toJS(this.videos), 'addToQueue');
+    console.log('addToQueue', toJS(video));
   }
 
   @action gettingInfo = (videoId: string) => {
     const video = this.getVideo(videoId);
+    if (!video) {
+      return;
+    }
     video.status = EVideoStatus.GETTING_INFO;
     this.countProgressUntil(video, 19);
-    console.log(toJS(this.videos), 'gettingInfo');
   }
 
   @action progress = ({videoId, progress}: IVideoTask, video: IVideoEntity = this.getVideo(videoId)) => {
     // in case of searching while the download in progress
     if (video) {
       video.status = EVideoStatus.DOWNLOADING;
       video.progress = 20 + Math.floor(progress.percentage * 0.8);
-      console.log(toJS(this.videos), progress, 'progress');
     }
   }
 
@@ -78,7 +82,6 @@ class Store {
     if (video) {
       video.status = EVideoStatus.DONE;
       video.progress = 0;
-      console.log('done');
     }
   }
 

diff --git a/src/services/api.ts b/src/services/api.ts
@@ -1,4 +1,4 @@
-import YoutubeMp3Downloader from './youtube-mp3-downloader';
+import { YoutubeMp3Downloader, DownloadTaskState } from './youtube-mp3-downloader';
 import * as ytlist from 'youtube-playlist';
 import store from '../mobx/store';
 import { IVideoEntity, IPlaylistYoutube, IDownloadProgress } from '../types';
@@ -12,7 +12,9 @@ import { sync } from 'mkdirp';
 import { existsSync } from 'fs';
 import { join } from 'path';
 import { sync as commandExistsSync } from 'command-exists';
-import { downloading, gettingInfo, inResult } from './tray-messanger';
+import { downloading, gettingInfo, inResult, clear } from './tray-messanger';
+import { IVideoTask } from './youtube-mp3-downloader';
+import { showCustomError } from './modalsAndAlerts';
 
 export function isFfmpegInPath() {
   return commandExistsSync('ffmpeg');
@@ -22,38 +24,10 @@ 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: 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
   filter: 'audio',
   format: settingsManager.downloadFormat,
-})
-  .on('addToQueue', videoId => store.addToQueue(videoId))
-  .on('gettingInfo', videoId => {
-    gettingInfo(videoId);
-    store.gettingInfo(videoId)
-  })
-  .on('progress', ({videoId, progress}: {videoId: string, progress: IDownloadProgress}) => {
-    const video = store.getVideo(videoId);
-    if (video) {
-      downloading(videoId, progress.speed, progress.eta);
-      store.progress({videoId, progress}, video);
-    }
-  })
-  .on('finished', (err, { videoId, thumbnail, videoTitle }) => {
-    store.finished(err, { videoId })
-    if (videoTitle && settingsManager.notificationWhenDone) {
-      new Notification('Download completed', {
-        icon: './app-resources/logo-128.png',
-        body: `The video "${videoTitle}" downloaded successfully`,
-        image: thumbnail
-      });
-    }
-  })
-  .on('error', (err, { videoId }) => {
-    alert(`Sorry, something went wrong.\nPlease contact the author using "support" menu and just copy / paste the error:\n${err}\n Thanks!`);
-    console.error(err);
-    finishVideoOnError(err, videoId);
-  });
+  progressTimeout: 1000,
+});
 
 function finishVideoOnError(err, videoId: string) {
   store.progress({videoId, progress: {
@@ -117,11 +91,20 @@ export function download(videoOrVideos: IVideoEntity | IVideoEntity[]) {
   }
 }
 
+export function removeAllVideos() {
+  store.videos.forEach(video => downloader.cancelDownload(video.id));
+  store.videos = [];
+}
+
 // not in use currently
 export function removeVideo(videoId: string) {
   store.removeVideo(videoId);
   downloader.cancelDownload(videoId);
-  inResult();
+  if (store.videos.length) {
+    inResult();
+  } else {
+    clear();
+  }
 }
 
 export async function search(url: string) {
@@ -148,5 +131,56 @@ function setVideoDownloadPath(video: IVideoEntity) {
 
 function performDownload(video: IVideoEntity) {
   setVideoDownloadPath(video);
-  downloader.download(video.id);
+  downloader.download(video.id, downloadReducer);
 }
+
+function downloadReducer(state: DownloadTaskState, ...args: any[]) {
+  switch (state) {
+    case 'added': {
+      const [videoId] = args;
+      store.addToQueue(videoId);
+    } break;
+    case 'getting info': {
+      const [videoId] = args;
+      gettingInfo(videoId);
+      store.gettingInfo(videoId);
+    } break;
+    case 'downloading': {
+      const [{videoId, progress}] = args as [{videoId: string, progress: IDownloadProgress}];
+      const video = store.getVideo(videoId);
+      if (video) {
+        downloading(videoId, progress.speed, progress.eta);
+        store.progress({videoId, progress}, video);
+      }
+    } break;
+    case 'done': {
+      const [{ videoId, thumbnail, videoTitle }] = args as [{videoId: string, thumbnail: string; videoTitle: string}];
+
+      store.finished(null, { videoId })
+      if (videoTitle && settingsManager.notificationWhenDone) {
+        new Notification('Download completed', {
+          icon: './app-resources/logo-128.png',
+          body: `The video "${videoTitle}" downloaded successfully`,
+          image: thumbnail
+        });
+      }
+    } break;
+    case 'error': {
+      const [err, {videoId}] = args as [Error, IVideoTask];
+      finishVideoOnError(err, videoId);
+      if (isCustomError(err)) {
+        showCustomError(err.message);
+        break;
+      } else {
+        alert(`Sorry, something went wrong.\nPlease contact the author using "support" menu and just copy / paste the error:\n${err}\n Thanks!`);
+        console.error(err);
+      }
+    } break;
+  }
+}
+
+function isCustomError(error: Error | object) {
+  return error instanceof Error &&
+    // https://commons.wikimedia.org/wiki/File:YouTube_blocked_UMG_country_en.png
+    error.message.includes('UMG')
+}
diff --git a/src/services/tray-messanger.ts b/src/services/tray-messanger.ts
@@ -4,7 +4,7 @@ import store from '../mobx/store';
 const CHANNEL_NAME = 'tray';
 
 function getVideoName(videoId: string): string {
-  return store.videos.find(v => v.id == videoId).name;
+  return store.videos.find(v => v.id == videoId)?.name || '';
 }
 
 export function inResult() {