refacto and deploy

.dockerignore

@@ -0,0 +1 @@
+uploaded/

.meteor/packages

@@ -6,28 +6,24 @@
 
 meteor-base@1.0.4             # Packages every Meteor app needs to have
 mobile-experience@1.0.4       # Packages for a great mobile UX
-mongo@1.1.15                   # The database Meteor supports right now
+mongo@1.1.16                   # The database Meteor supports right now
 blaze-html-templates@1.0.4 # Compile .html files into Meteor Blaze views
 reactive-var@1.0.11            # Reactive variable for tracker
 jquery@1.11.10                  # Helpful client-side library
 tracker@1.1.2                 # Meteor's client-side reactive programming library
 
-standard-minifier-css@1.3.3   # CSS minifier run for production mode
-standard-minifier-js@1.2.2    # JS minifier run for production mode
+standard-minifier-css@1.3.4   # CSS minifier run for production mode
+standard-minifier-js@2.0.0    # JS minifier run for production mode
 es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers.
-ecmascript@0.6.3              # Enable ECMAScript2015+ syntax in app code
-shell-server@0.2.2            # Server-side component of the `meteor shell` command
+ecmascript@0.7.2              # Enable ECMAScript2015+ syntax in app code
+shell-server@0.2.3            # Server-side component of the `meteor shell` command
 
 react-meteor-data
-accounts-ui
-accounts-password
-underscore
+accounts-ui@1.1.9
+accounts-password@1.3.5
 fortawesome:fontawesome
 numeral:numeral
-meteorhacks:npm
-
-
-npm-container
 momentjs:moment
 iron:router
 udondan:jszip
+erasaur:meteor-lodash

.meteor/release

@@ -1 +1 @@
-METEOR@1.4.3.1
+METEOR@1.4.4.1

.meteor/versions

@@ -1,32 +1,33 @@
-accounts-base@1.2.14
-accounts-password@1.3.4
+accounts-base@1.2.16
+accounts-password@1.3.5
 accounts-ui@1.1.9
-accounts-ui-unstyled@1.2.0
+accounts-ui-unstyled@1.2.1
 allow-deny@1.0.5
 autoupdate@1.3.12
-babel-compiler@6.14.1
+babel-compiler@6.18.1
 babel-runtime@1.0.1
 base64@1.0.10
 binary-heap@1.0.10
-blaze@2.3.0
-blaze-html-templates@1.1.0
+blaze@2.3.2
+blaze-html-templates@1.1.2
 blaze-tools@1.0.10
 boilerplate-generator@1.0.11
 caching-compiler@1.1.9
-caching-html-compiler@1.1.0
+caching-html-compiler@1.1.2
 callback-hook@1.0.10
-check@1.2.4
+check@1.2.5
 ddp@1.2.5
-ddp-client@1.3.3
+ddp-client@1.3.4
 ddp-common@1.2.8
-ddp-rate-limiter@1.0.6
-ddp-server@1.3.13
+ddp-rate-limiter@1.0.7
+ddp-server@1.3.14
 deps@1.0.12
 diff-sequence@1.0.7
-ecmascript@0.6.3
+ecmascript@0.7.2
 ecmascript-runtime@0.3.15
 ejson@1.0.13
-email@1.1.18
+email@1.2.0
+erasaur:meteor-lodash@4.0.0
 es5-shim@4.6.15
 fastclick@1.0.13
 fortawesome:fontawesome@4.7.0
@@ -34,7 +35,7 @@ geojson-utils@1.0.10
 hot-code-push@1.0.4
 html-tools@1.0.11
 htmljs@1.0.11
-http@1.2.11
+http@1.2.12
 id-map@1.0.9
 iron:controller@1.0.12
 iron:core@1.0.11
@@ -52,27 +53,24 @@ localstorage@1.0.12
 logging@1.1.17
 meteor@1.6.1
 meteor-base@1.0.4
-meteorhacks:async@1.0.0
-meteorhacks:npm@1.5.0
 minifier-css@1.2.16
-minifier-js@1.2.17
-minimongo@1.0.20
+minifier-js@2.0.0
+minimongo@1.0.21
 mobile-experience@1.0.4
 mobile-status-bar@1.0.14
-modules@0.7.9
-modules-runtime@0.7.9
+modules@0.8.1
+modules-runtime@0.7.10
 momentjs:moment@2.18.1
-mongo@1.1.15
+mongo@1.1.16
 mongo-id@1.0.6
 npm-bcrypt@0.9.2
-npm-container@1.2.0
-npm-mongo@2.2.16_1
+npm-mongo@2.2.24
 numeral:numeral@1.5.3_1
-observe-sequence@1.0.15
+observe-sequence@1.0.16
 ordered-dict@1.0.9
 promise@0.8.8
 random@1.0.10
-rate-limit@1.0.6
+rate-limit@1.0.8
 react-meteor-data@0.2.9
 reactive-dict@1.1.8
 reactive-var@1.0.11
@@ -82,21 +80,21 @@ routepolicy@1.0.12
 service-configuration@1.0.11
 session@1.1.7
 sha@1.0.9
-shell-server@0.2.2
-spacebars@1.0.13
-spacebars-compiler@1.1.0
+shell-server@0.2.3
+spacebars@1.0.15
+spacebars-compiler@1.1.2
 srp@1.0.10
-standard-minifier-css@1.3.3
-standard-minifier-js@1.2.2
-templating@1.3.0
-templating-compiler@1.3.0
-templating-runtime@1.3.0
-templating-tools@1.1.0
+standard-minifier-css@1.3.4
+standard-minifier-js@2.0.0
+templating@1.3.2
+templating-compiler@1.3.2
+templating-runtime@1.3.2
+templating-tools@1.1.2
 tmeasday:check-npm-versions@0.2.0
 tracker@1.1.2
 udondan:jszip@2.4.0_1
-ui@1.0.12
+ui@1.0.13
 underscore@1.0.10
 url@1.1.0
-webapp@1.3.13
+webapp@1.3.15
 webapp-hashing@1.0.9

Dockerfile

@@ -0,0 +1 @@
+FROM jshimko/meteor-launchpad:latest

build/Dockerfile

@@ -0,0 +1,11 @@
+FROM node
+RUN mkdir -p /usr/src/app
+COPY bundle/ /usr/src/app/
+WORKDIR /usr/src/app/
+RUN cd programs/server && npm install && npm uninstall fibers && npm install fibers
+EXPOSE 3000
+ENV MONGO_URL mongodb://mongo:27017/soundwave
+ENV ROOT_URL http://localhost
+ENV UPLOAD_DIR /usr/src/upload
+ENV PORT 3000
+CMD ["node", "main.js"]

client/main.js

@@ -4,6 +4,4 @@ import { render } from 'react-dom';
 import App from '../imports/ui/App.jsx';
 import '../imports/startup/routes';
  
-Meteor.startup(() => {
-	render(<App />, document.getElementById('main'));
-});
+Meteor.startup(() => render(<App />, document.getElementById('main')));

imports/api/converter.js

@@ -0,0 +1,54 @@
+import { Meteor } from 'meteor/meteor';
+import { Converted } from './links';
+_ = lodash;
+
+const bindHandlers = (ressource, type, path, filename, id, url, ) => {
+	let capType = _.capitalize(type);
+	ressource.on('unavailable', Meteor.bindEnvironment(err => {
+		console.error('KO', url, err);
+		Converted.update({ _id: id }, { $set: { [`error_${type}`]: `${capType} is unreachable` } });
+	}))
+			 .on('available', info => {
+				 console.info('OK');
+				 ressource.download(path);
+			 })
+			 .on('progress', Meteor.bindEnvironment(percent => {
+				 Converted.update({ _id: id }, { $set: { [`${type}_progress`]: percent } })
+			 }))
+			 .on('error', Meteor.bindEnvironment(err => {
+				 console.error(`${capType} download error: ${err.message}`);
+				 Converted.update({ _id: id }, { $set: { [`error_${type}`]: `${capType} cannot be saved` } });
+			 }))
+			 .on('end', Meteor.bindEnvironment(() => {
+				 console.info(`${capType} download complete for ${url}`);
+				 Converted.update({ _id: id }, { $set: { [type]: filename, [`${type}_progress`]: 100 } });
+			 }));
+};
+
+const convertAudio = (url, filename, id) => {
+	if (Meteor.isServer) {
+		import { AudioConverter } from '../../server/Converter';
+		import path from 'path';
+
+		const filePath = path.resolve(process.env.UPLOAD_DIR, filename);
+		console.log(`Converting ${url} to MP3...`);
+
+		let audio_dl = new AudioConverter(url);
+		bindHandlers(audio_dl, 'audio', filePath + '.mp3', filename + '.mp3', id, url);
+	}
+};
+
+const convertVideo = (url, filename, id) => {
+	if (Meteor.isServer) {
+		import { VideoConverter } from '../../server/Converter';
+		import path from 'path';
+
+		const filePath = path.resolve(process.env.UPLOAD_DIR, filename);
+		console.log(`Converting ${url} to MP4 ...`);
+
+		let video_dl = new VideoConverter(url);
+		bindHandlers(video_dl, 'video', filePath + '.mp4', filename + '.mp4', id, url);
+	}
+};
+
+export { convertAudio, convertVideo };

imports/api/links.js

@@ -1,108 +1,40 @@
 import { Meteor } from 'meteor/meteor';
 import { Mongo } from 'meteor/mongo';
 import { check, Match } from 'meteor/check';
+import { convertVideo, convertAudio} from './converter';
 
 export const Converted = new Mongo.Collection('links');
 
 const YTExp = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-_]*)/;
 
 if (Meteor.isServer) {
-	Meteor.publish('links', function linksPublication() {
-		return Converted.find();
-	});
+	Meteor.publish('links', () => Converted.find());
 }
 
-const convert = (url, filename, id) => {
-	if (Meteor.isServer) {
-		console.log('Converting ...');
-		const fs = Meteor.npmRequire("fs");
-		const ytdl = Meteor.npmRequire('ytdl-core');
-		const path = Meteor.npmRequire('path');
-		const ffmpeg = Meteor.npmRequire('fluent-ffmpeg');
-		const filePath = path.resolve('/home/kod3/projects/SoundWave/uploaded/', filename)
-		const videoPath = filePath + '.mp4';
-		const audioPath = filePath + '.mp3';
-		ytdl.getInfo(url, {}, Meteor.bindEnvironment((err, info) => {
-			console.info(info ? 'ok' : 'ko');
-			if (err) {
-				console.log(url);
-				console.error(err);
-				Converted.update({ _id: id }, { $set: {
-					error_video: 'Video is unreachable',
-					error_audio: 'Video is unreachable',
-				} });
-			} else {
-				const totalSeconds = info ? info.length_seconds : 0;
-				const dl = ytdl(url);
-				dl.pipe(fs.createWriteStream(videoPath));
-				ffmpeg(dl)
-					.noVideo()
-					.on('end', Meteor.bindEnvironment(() => {
-						Converted.update({ _id: id }, { $set: { audio: filename + '.mp3', audio_progress: 100 } });
-					}))
-					.on('progress', Meteor.bindEnvironment((params) => {
-						const time = moment(new Date(...[0, 0, 0, ...params.timemark.split(':')]));
-						const seconds = time.hours() * 3600 + time.minutes() * 60 + time.seconds();
-						let percent = ((seconds / totalSeconds) * 100).toFixed(0);
-						Converted.update({ _id: id }, { $set: { audio_progress: percent } });
-					}))
-					.on('error', Meteor.bindEnvironment((err) => {
-						console.error('MP3 encoding error: ' + err.message);
-						Converted.update({ _id: id }, { $set: { error_audio: 'Audio cannot be extracted' } });
-					}))
-					.format('mp3')
-					.output(fs.createWriteStream(audioPath))
-					.run();
-				dl.on('info', (info, format) => console.log);
-				dl.on('response', Meteor.bindEnvironment((res) => {
-					const totalSize = res.headers['content-length'];
-					let dataRead = 0;
-					res.on('data', Meteor.bindEnvironment((data) => {
-						dataRead += data.length;
-						let percent = dataRead / totalSize;
-						Converted.update({ _id: id }, { $set: { video_progress: (percent * 100).toFixed(0) } });
-					}));
-					res.on('end', Meteor.bindEnvironment(() => {
-						Converted.update({ _id: id }, { $set: { video: filename + '.mp4', video_progress: 100 } });
-					}));
-					res.on('error', Meteor.bindEnvironment((err) => {
-						console.error('Error: ' + err.message)
-						Converted.update({ _id: id }, { $set: { error_video: 'Video cannot be saved' } });
-					}));
-				}));
-			}
-		}));
-	} else return false;
-};
-
 Meteor.methods({
 
   'links.add'({video, type}) {
   	check(video.url, Match.Where(url => YTExp.test(url)));
 	check(type, Match.Where(t => ['audio'].includes(t)));
 
- 	let converted = Converted.findOne({
-		url: video.url,
-		error_audio: { $ne: null },
-		error_video: { $ne: null },
-	});
+ 	let converted = Converted.findOne({ id: video.id });
 
 	if (!converted) {
-		const filename = video.title.replace(/ /g, '_');
-		Converted.remove({url: video.url});
-		var inserted_id = Converted.insert({
-			id: video.id,
-			url: video.url,
-			title: video.title,
-			video: '',
-			video_progress: 0,
-			error_video: '',
-			audio: '',
-			audio_progress: 0,
-			error_audio: '',
-			createdAt: new Date()
+		let inserted_id = Converted.insert({
+			id: video.id, url: video.url,
+			title: video.title, createdAt: new Date()
 		});
-		convert(video.url, filename, inserted_id);
+		converted = Converted.findOne({_id: inserted_id });
+	}
+
+	if (!converted.audio) {
+		Converted.update({ _id: converted._id }, { $set: { audio: '', error_audio: '', audio_progress: 0 } });
+		convertAudio(converted.url, converted.title.replace(/ /g, '_'), converted._id);
+	}
+
+	if (!converted.video) {
+		Converted.update({ _id: converted._id }, { $set: { video: '', error_video: '', video_progress: 0 } });
+		convertVideo(converted.url, converted.title.replace(/ /g, '_'), converted._id);
 	}
   },
 

imports/startup/accounts-config.js

@@ -1,6 +0,0 @@
-
-import { Accounts } from 'meteor/accounts-base';
-
-Accounts.ui.config({
-  passwordSignupFields: 'USERNAME_ONLY',
-});

imports/startup/routes.js

@@ -1,12 +1,12 @@
 import { Converted } from '../api/links';
 
-const uploadedPath = '/home/kod3/projects/SoundWave/uploaded/';
+const uploadedPath = process.env.UPLOAD_DIR;
 
 Router.route('/');
 
 Router.route("/:type/batch/:ids", function() {
-	const fs = Meteor.npmRequire('fs');
-	const path = Meteor.npmRequire('path');
+	import fs from 'fs';
+	import path from 'path';
 
 	let { type, ids } = this.params;
 	ids = ids.split(',');
@@ -27,8 +27,8 @@ Router.route("/:type/batch/:ids", function() {
 
 
 Router.route("/:type/:id", function() {
-	const fs = Meteor.npmRequire('fs');
-	const path = Meteor.npmRequire('path');
+	import fs from 'fs';
+	import path from 'path';
 
 	let { type, id } = this.params;
 	let file = (type === 'mp3' ? 'audio' : 'video');

imports/ui/AccountsUIWrapper.jsx

@@ -1,20 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Template } from 'meteor/templating';
-import { Blaze } from 'meteor/blaze';
-
-export default class AccountsUIWrapper extends Component {
-  componentDidMount() {
-    // Use Meteor Blaze to render login buttons
-    this.view = Blaze.render(Template.loginButtons,
-      ReactDOM.findDOMNode(this.refs.container));
-  }
-  componentWillUnmount() {
-    // Clean up Blaze view
-    Blaze.remove(this.view);
-  }
-  render() {
-    // Just render a placeholder container that will be filled in
-    return <span id="accounts-ui" ref="container" />;
-  }
-}

imports/ui/App.jsx

@@ -2,50 +2,38 @@ import React, { Component, PropTypes } from 'react';
 import { Meteor } from 'meteor/meteor';
 import { createContainer } from 'meteor/react-meteor-data';
 import { Converted } from '../api/links';
-import Links from './Links';
 import { YouTubeSearch, YouTubeVideoInfo } from './YouTubeAPI';
 import Video from './Video';
-import Input from "./Input";
-import Results from "./Results";
-import OptionsAll from "./OptionsAll";
+import AppLayout from './AppLayout';
+_ = lodash;
 
 class App extends Component {
 	constructor(props) {
 		super(props);
 		this.state = { result: [], links: [], value: '' };
+		this.timeout = undefined;
 		this.options = [
-			{ type: 'MP3', handler: (video) => window.open('/mp3/'+ video.id) },
-			{ type: 'MP4', handler: (video) => window.open('/mp4/'+ video.id) },
+			{
+				type: 'MP3',
+				handler: (video) => window.open('/mp3/'+ video.id),
+				handlerAll: () => window.open(`/mp3/batch/${this.batchLinks()}`)
+			},
+			{
+				type: 'MP4',
+				handler: (video) => window.open('/mp4/'+ video.id),
+				handlerAll: () => window.open(`/mp4/batch/${this.batchLinks()}`)
+			},
 		];
-		this.optionsAll = [
-			{ type: 'MP3', handler: () => window.open(`/mp3/batch/${this.batchLinks()}`) },
-			{ type: 'MP4', handler: () => window.open(`/mp4/batch/${this.batchLinks()}`) },
-		];
-	}
-
-	render() {
-		return (
-			<div className="container">
-				<h1 className="logo">SoundWave</h1>
-				<div className="box-container">
-					<header>
-						<Input value={this.state.value} change={this.inputChange.bind(this)} />
-						<Results results={this.state.result} select={this.selectResult.bind(this)} />
-					</header>
-					<Links links={this.state.links} remove={this.removeLink.bind(this)} handlers={this.options}/>
-					<OptionsAll count={this.state.links.length} handlers={this.optionsAll}
-								links={this.state.links} converted={this.props.converted} />
-				</div>
-			</div>
-		);
+		_.each(['inputChange', 'selectResult', 'removeLink'], f => this[f] = this[f].bind(this));
 	}
 
 	batchLinks() {
-		return this.state.links.map(e => e.id).join(',');
+		return _.map(this.state.links, 'id').join(',');
 	}
 
 	inputChange(text) {
-		this.setState({ value: text }, this.search);
+		clearTimeout(this.timeout);
+		this.setState({ value: text }, () => this.timeout = setTimeout(this.search.bind(this), 100));
 	}
 
 	removeLink(link) {
@@ -55,9 +43,9 @@ class App extends Component {
 
 	selectResult(video) {
 		if (_.every(this.state.links, e => e.id !== video.id)) {
-			if (_.some(this.props.converted, e => e.id === video.id)) {
+			if (_.some(this.props.converted, e => e.id === video.id && e.audio && e.video))
 				video.converted = _.find(this.props.converted, e => e.id === video.id)._id;
-			} else
+			else
 				Meteor.call('links.add', {video, type: 'audio'}, (err, res) => {
 					if (err)
 						console.error(err);
@@ -70,27 +58,31 @@ class App extends Component {
 	}
 
 	search() {
-		if (!this.state.value) {
+		if (!this.state.value)
 			this.setState({ result: [] });
-		} else {
+		else
 			YouTubeSearch(this.state.value)
 				.then(e => e.items.map(e => new Video(e)))
 				.then(e => { this.setState({ result: e }); return e; })
-				.then(e => e.forEach(i => YouTubeVideoInfo(i.id)
-					.then(r => i.update(r.items[0].statistics, r.items[0].contentDetails.duration))
+				.then(e => YouTubeVideoInfo(_.map(e, 'id').join(','))
+					.then(r => _.each(e, (elem, i) => elem.update(r.items[i].statistics, r.items[i].contentDetails.duration)))
 					.then(() => this.setState({ result: e }))
-				));
-		}
+				);
+	}
+
+	render() {
+		return <AppLayout
+			links={this.state.links} linkRemove={this.removeLink} linkHandlers={this.options}
+			inputChange={this.inputChange} inputValue={this.state.value}
+			resultSelect={this.selectResult} results={this.state.result}
+			optionsHandler={this.options} converted={this.props.converted}
+		/>;
 	}
 }
 
-App.propTypes = {
-	converted: PropTypes.array.isRequired,
-};
+App.propTypes = { converted: PropTypes.array.isRequired };
 
 export default createContainer(() => {
 	Meteor.subscribe('links');
-	return {
-		converted: Converted.find({}).fetch(),
-	};
-}, App)
+	return { converted: Converted.find({}).fetch(), };
+}, App);

imports/ui/AppLayout.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Input from "./Input";
+import Results from "./Results";
+import OptionsAll from "./OptionsAll";
+import Links from './Links';
+
+const AppLayout = (props) =>
+	<div className="container">
+		<h1 className="logo">SoundWave</h1>
+		<div className="box-container">
+			<header>
+				<Input placeholder="Search a video" value={props.inputValue} change={props.inputChange} />
+				<Results results={props.results} select={props.resultSelect} />
+			</header>
+			<Links links={props.links} remove={props.linkRemove} handlers={props.linkHandlers}/>
+			<OptionsAll count={props.links.length} handlers={props.optionsHandler}
+						links={props.links} converted={props.converted} />
+		</div>
+	</div>;
+
+
+AppLayout.propTypes = {
+	links: Links.propTypes.links,
+	linkRemove: Links.propTypes.remove,
+	linkHandlers: Links.propTypes.handlers,
+	inputValue: Input.propTypes.value,
+	inputChange: Input.propTypes.change,
+	results: Results.propTypes.results,
+	resultSelect: Results.propTypes.select,
+	optionsHandler: OptionsAll.propTypes.handlers,
+	converted: OptionsAll.propTypes.converted
+};
+
+export default AppLayout;

imports/ui/Input.jsx

@@ -1,19 +1,13 @@
-import React, {Component, PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 
-export default class Input extends Component {
-	handleChange(e) {
-		this.props.change(e.target.value);
-	}
-
-	render() {
-		return (
-			<input type="text" ref="textInput" placeholder="Search a video" autoFocus
-				   value={this.props.value} className="new-link" onChange={this.handleChange.bind(this)} />
-		);
-	}
-}
+const Input = ({ value, change, placeholder }) =>
+	<input type="text" className="new-link" placeholder={placeholder} autoFocus
+		   value={value} onChange={e => change(e.target.value)} />;
 
 Input.propTypes = {
 	change: PropTypes.func.isRequired,
-	value: PropTypes.string.isRequired
+	value: PropTypes.string.isRequired,
+	placeholder: PropTypes.string
 };
+
+export default Input;

imports/ui/Options.jsx

@@ -1,17 +1,29 @@
-import React, {Component, PropTypes} from 'react';
+import React, { Component, PropTypes } from 'react';
 import Video from './Video';
 import classnames from 'classnames';
 
 export default class Options extends Component {
+	render() {
+		return (
+			<div>
+				{ _.map(this.props.handlers, (h) => (
+					<button key={h.type} className={this.getClasses(h.type)}
+							onClick={() => h.handler(this.props.video)}
+							disabled={this.isDisabled(h.type)} title={this.getErrorMessage(h.type)}>
+						<div className="option-progress" style={{ width: this.getProgress(h.type) + '%' }} />
+						<i className="fa fa-download" /> {h.type}
+					</button>
+				)) }
+			</div>
+		);
+	}
 
 	getProgress(type) {
-		return !this.props.converted ? 0 :
-			this.props.converted[type === 'MP3' ? 'audio_progress' : 'video_progress'];
+		return !this.props.converted ? 0 : this.props.converted[type === 'MP3' ? 'audio_progress' : 'video_progress'];
 	}
 
 	isDisabled(type) {
-		return !this.props.converted ||
-			!this.props.converted[type === 'MP3' ? 'audio' : 'video'];
+		return !this.props.converted || !this.props.converted[type === 'MP3' ? 'audio' : 'video'];
 	}
 
 	getClasses(type) {
@@ -23,22 +35,8 @@ export default class Options extends Component {
 	}
 
 	getErrorMessage(type) {
-		return (type === 'MP3' ? this.props.converted.error_audio : this.props.converted.error_video) || null;
-	}
-
-	render() {
-		return (
-			<div>
-				{ _.map(this.props.handlers, (h) => (
-					<button key={h.type} className={this.getClasses(h.type)}
-							onClick={() => h.handler(this.props.video)}
-							disabled={this.isDisabled(h.type)} title={this.getErrorMessage(h.type)}>
-						<div className="option-progress" style={{width: this.getProgress(h.type) + '%'}}></div>
-						<i className="fa fa-download"/> {h.type}
-					</button>
-				)) }
-			</div>
-		);
+		let typestr = (type === 'MP3' ? 'audio' : 'video');
+		return this.props.converted && this.props.converted[`error_${typestr}`] || null;
 	}
 }
 

imports/ui/OptionsAll.jsx

@@ -22,7 +22,7 @@ export default class OptionsAll extends Component {
 				<div className="label">ALL: {this.renderCount()}</div>
 				<div>
 					{ _.map(this.props.handlers, (h) => (
-						<button key={h.type} className="option" onClick={h.handler} disabled={this.isDisabled(h.type)}>
+						<button key={h.type} className="option" onClick={h.handlerAll} disabled={this.isDisabled(h.type)}>
 							<i className="fa fa-download"/> {h.type}
 						</button>
 					)) }
@@ -38,6 +38,6 @@ OptionsAll.propTypes = {
 	converted: PropTypes.arrayOf(PropTypes.object),
 	handlers: PropTypes.arrayOf(PropTypes.shape({
 		type: PropTypes.string,
-		handler: PropTypes.func
+		handlerAll: PropTypes.func,
 	})).isRequired,
 };

imports/ui/Result.jsx

@@ -1,42 +1,37 @@
-import React, {Component, PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import Video from './Video';
+_ = lodash;
 
-export default class Result extends Component {
-	render() {
-		return (
-			<a className="result-link" onClick={this.props.click}>
-				<img src={this.props.result.thumb.url} alt="thumbnail" className="result-thumb"
-					 height={this.props.result.thumb.height / 2}
-					 width={this.props.result.thumb.width / 2}/>
-				<div className="result-info">
-					<div className="result-head" title={this.props.result.title}>
-						<div className="result-title">{this.props.result.title}</div>
-						<div className="result-duration">{this.props.result.duration}</div>
-					</div>
-					<div className="result-stats">
-						<div className="result-views" title={this.props.result.stats.viewCount}>
-							<i className="fa fa-eye"/> {this.props.result.stats.viewCount}
-						</div>
-						<div className="result-likes" title={this.props.result.stats.likeCount}>
-							<i className="fa fa-thumbs-o-up"/> {this.props.result.stats.likeCount}
-						</div>
-						<div className="result-dislikes" title={this.props.result.stats.dislikeCount}>
-							<i className="fa fa-thumbs-o-down"/> {this.props.result.stats.dislikeCount}
-						</div>
-						<div className="result-comments" title={this.props.result.stats.commentCount}>
-							<i className="fa fa-comments-o"/> {this.props.result.stats.commentCount}
-						</div>
-						<div className="result-favorites" title={this.props.result.stats.favoriteCount}>
-							<i className="fa fa-star-o"/> {this.props.result.stats.favoriteCount}
-						</div>
+const iconsClasses = {
+	view: "eye",
+	like: "thumbs-o-up",
+	dislike: "thumbs-o-down",
+	comment: "comments-o",
+	favorite: "star-o"
+};
+
+const Result = ({ click, result }) =>
+	<a className="result-link" onClick={click}>
+		<img src={result.thumb.url} alt="thumbnail" className="result-thumb"
+			 height={result.thumb.height / 2} width={result.thumb.width / 2}/>
+		<div className="result-info">
+			<div className="result-head" title={result.title}>
+				<div className="result-title">{result.title}</div>
+				<div className="result-duration">{result.duration}</div>
+			</div>
+			<div className="result-stats">
+				{ _.map(result.stats, (e, k) =>
+					<div key={k} className={`result-${k.slice(0, -5)}s`} title={e}>
+						<i className={`fa fa-${iconsClasses[k.slice(0, -5)]}`}/> {e}
 					</div>
-				</div>
-			</a>
-		);
-	}
-}
+				) }
+			</div>
+		</div>
+	</a>;
 
 Result.propTypes = {
 	result: PropTypes.instanceOf(Video).isRequired,
 	click: PropTypes.func
-};
+};
+
+export default Result;

imports/ui/YouTubeAPI.js

@@ -1,5 +1,6 @@
 import 'whatwg-fetch';
 import querystring from 'querystring';
+_ = lodash;
 
 const KEY = 'AIzaSyDh641dLzxYexCASA3TdYMlc6zzS793ppQ';
 const ENDPOINT = 'https://www.googleapis.com/youtube/v3';

launchpad.conf

@@ -0,0 +1 @@
+INSTALL_MONGO=true

package.json

@@ -15,7 +15,8 @@
     "react": "^15.4.2",
     "react-addons-pure-render-mixin": "^15.4.2",
     "react-dom": "^15.4.2",
-    "youtube-dl": "^1.11.1"
+    "ytdl-core":"0.12.1",
+    "fluent-ffmpeg":"2.1.0"
   },
   "devDependencies": {
     "babel-plugin-transform-class-properties": "^6.23.0"

packages.json

@@ -1,4 +0,0 @@
-{
-  "ytdl-core":"0.7.9",
-  "fluent-ffmpeg":"2.1.0"
-}

server/Converter.js

@@ -0,0 +1,64 @@
+import EventEmitter from 'events';
+import fs from 'fs';
+import ytdl from 'ytdl-core';
+import ffmpeg from 'fluent-ffmpeg';
+
+class Converter extends EventEmitter {
+	constructor(url) {
+		super();
+		this.ytdl = null;
+		this.totalSeconds = 0;
+		ytdl.getInfo(url, {}, (err, info) => {
+			if (err)
+				this.emit('unavailable', err);
+			else {
+				this.totalSeconds = info ? info.length_seconds : 0;
+				this.ytdl = ytdl(url);
+				this.emit('available', info);
+			}
+		});
+	}
+}
+
+export class VideoConverter extends Converter {
+	constructor(url) { super(url); }
+
+	initResponse(res, path) {
+		const totalSize = res.headers['content-length'];
+		let dataRead = 0;
+		res.on('data', data => {
+			dataRead += data.length;
+			let percent = dataRead / totalSize;
+			this.emit('progress', (percent * 100).toFixed(0));
+		})
+		   .on('end', () => this.emit('end'))
+		   .on('error', () => fs.unlink(path, err => this.emit('error', error)));
+	}
+
+	download(path) {
+		if (this.ytdl)
+			this.ytdl.on('response', res => this.initResponse(res, path)).pipe(fs.createWriteStream(path));
+	}
+}
+
+export class AudioConverter extends Converter {
+	constructor(url) { super(url); }
+
+	audio_percent(date) {
+		const time = moment(new Date(...[0, 0, 0, ...date.split(':')]));
+		const seconds = time.hours() * 3600 + time.minutes() * 60 + time.seconds();
+		return ((seconds / this.totalSeconds) * 100).toFixed(0);
+	}
+
+	download(path) {
+		if (this.ytdl)
+			ffmpeg(this.ytdl)
+				.noVideo().format('mp3')
+				.output(fs.createWriteStream(path))
+				.on('end', () => this.emit('end'))
+				.on('start', () => this.emit('start'))
+				.on('progress', params => this.emit('progress', this.audio_percent(params.timemark)))
+				.on('error', (err, stdout, stderr) => fs.unlink(path, () => this.emit('error', err, stdout, stderr)))
+				.run();
+	}
+}

server/main.js

@@ -2,7 +2,5 @@ import { Meteor } from 'meteor/meteor';
 import '../imports/api/links.js';
 import '../imports/startup/routes';
 
-Meteor.startup(() => {
-  // code to run on server at startup
-});
+Meteor.startup(() => {});