Working search, add, ui and conversion. to add download

.gitignore

 node_modules/
+uploaded/
+packages/

.meteor/packages

 react-meteor-data
 accounts-ui
 accounts-password
+underscore
+fortawesome:fontawesome
+numeral:numeral
+meteorhacks:npm
+
+
+npm-container
+momentjs:moment

.meteor/versions

 email@1.1.18
 es5-shim@4.6.15
 fastclick@1.0.13
+fortawesome:fontawesome@4.7.0
 geojson-utils@1.0.10
 hot-code-push@1.0.4
 html-tools@1.0.11
 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
 mobile-status-bar@1.0.14
 modules@0.7.9
 modules-runtime@0.7.9
+momentjs:moment@2.18.1
 mongo@1.1.15
 mongo-id@1.0.6
 npm-bcrypt@0.9.2
+npm-container@1.2.0
 npm-mongo@2.2.16_1
+numeral:numeral@1.5.3_1
 observe-sequence@1.0.15
 ordered-dict@1.0.9
 promise@0.8.8

client/main.css

   margin-right: 1em;
 }
  
-form {
-  margin-top: 10px;
-  margin-bottom: -10px;
-  position: relative;
-}
- 
-.new-link input {
+input.new-link {
   box-sizing: border-box;
-  padding: 10px 0;
   background: transparent;
   border: none;
   width: 100%;
-  padding-right: 80px;
-  font-size: 1em;
+  padding: 10px;
+  font-size: 1.5em;
+  color: rgba(20, 20, 20);
 }
  
-.new-link input:focus{
+input.new-link:focus{
   outline: 0;
 }
- 
+
 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.options-all {
+  background: #d2edf4;
+  background-image: linear-gradient(to top, #d0edf5, #e1e5f0 100%);
+  display: flex;
+  padding: 20px 15px 15px 15px;
+}
+
+button.option {
+  background: white;
+  border: none;
+  margin: 0 5px;
+  padding: 5px 10px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  position: relative;
+}
+
+button.unreachable {
+  background: rgba(117, 0, 0, 0.51);
+  color: white;
+}
+
+button.option:hover {
+  -webkit-box-shadow:  0 1px 5px 0 rgba(0, 0, 0, 0.3);
+  -moz-box-shadow:  0 1px 5px 0 rgba(0, 0, 0, 0.3);
+  box-shadow:  0 1px 5px 0 rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+}
+
+button.unreachable:hover {
+  cursor: not-allowed;
+}
+
+button.option .option-progress {
+  background: rgba(0, 128, 0, 0.25);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.options-all .label {
+  flex: 2;
+}
+ 
+.box-container {
   margin: 0;
   padding: 0;
   background: white;
 }
+
+.link {
+  display: flex;
+  flex-direction: row;
+}
+
+.link .link-text {
+  flex: 10;
+  -ms-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 8px 10px 0;
+}
+
+.link .link-options {
+  flex: 4;
+}
  
-.delete {
-  float: right;
+.link .link-delete {
   font-weight: bold;
   background: none;
   font-size: 1em;
   border: none;
-  position: relative;
+  flex: 1;
+  cursor: pointer;
 }
  
 li {
   .new-link input {
     padding-bottom: 5px;
   }
+}
+
+#search-result {
+  margin-top:20px;
+  background: none;
+}
+
+#search-result .result-link {
+  display: block;
+  padding: 10px;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  background: rgba(255,255,255,0.3);
+  height: 45px;
+}
+
+#search-result .result-link:hover {
+  background: rgba(255,255,255,0.5);
+  -webkit-box-shadow:  0 5px 5px -5px black;
+  -moz-box-shadow:  0 5px 5px -5px black;
+  box-shadow:  0 5px 5px -5px black;
+  cursor: pointer;
+}
+
+#search-result .result-thumb {
+  float: left;
+}
+
+#search-result .result-info {
+  vertical-align: top;
+  margin-left: 100px;
+  //line-height: 45px;
+  display: flex;
+  flex-direction: column;
+}
+
+#search-result .result-info .result-head {
+  flex-direction: row;
+  display: flex;
+}
+
+#search-result .result-info .result-head .result-duration {
+  flex: 1;
+  padding: 5px 0 10px;
+  text-align: right;
+}
+
+#search-result .result-info .result-head .result-title {
+  -ms-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 5px 10px 10px 0;
+  flex:10;
+}
+#search-result .result-info .result-stats {
+  display: flex;
+  flex-direction: row;
+  font-size: 0.8em;
+}
+
+#search-result .result-info .result-stats div {
+  flex: 1;
 }

imports/api/links.js

 import { Mongo } from 'meteor/mongo';
 import { check, Match } from 'meteor/check';
 
-export const Links = new Mongo.Collection('links');
+export const Converted = new Mongo.Collection('links');
 
 const YTExp = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-_]*)/;
 
 if (Meteor.isServer) {
-	// This code only runs on the server
 	Meteor.publish('links', function linksPublication() {
-		return Links.find({
-			 completed: {$ne: true}
-		});
+		return 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 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: audioPath, 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', (err) => { console.error('MP3 encoding error: ' + err.message); })
+					.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: videoPath, video_progress: 100 } });
+					}));
+					res.on('error', (err) => { console.error('Error: ' + err.message) });
+				}));
+			}
+		}));
+	} else return false;
+};
+
 Meteor.methods({
 
-  'links.insert'(url) {
-	check(url, Match.Where((url) => YTExp.test(url)));
-    Links.insert({
-      url,
-      createdAt: new Date(),
-    });
-  },
+  'links.add'({video, type}) {
+  	check(video.url, Match.Where(url => YTExp.test(url)));
+	check(type, Match.Where(t => ['audio'].includes(t)));
 
-  'links.remove'(linkId) {
-    check(linkId, String);
-    Links.remove(linkId);
+ 	let converted = Converted.findOne({
+		url: video.url
+	});
+
+	if (!converted) {
+		const filename = video.title.replace(/ /g, '_');
+		var inserted_id = Converted.insert({
+			id: video.id,
+			url: video.url,
+			title: video.title,
+			video: '',
+			video_progress: 0,
+			audio: '',
+			audio_progress: 0,
+			createdAt: new Date()
+		});
+		convert(video.url, filename, inserted_id);
+	}
   },
 
 });

imports/ui/App.jsx

 import React, { Component, PropTypes } from 'react';
-import ReactDOM from 'react-dom';
 import { Meteor } from 'meteor/meteor';
+import { Tracker } from 'meteor/tracker';
 import { createContainer } from 'meteor/react-meteor-data';
-import { Links } from '../api/links.js';
-import Link from './Link.jsx';
-import AccountsUIWrapper from './AccountsUIWrapper.jsx';
+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";
 
-// App component - represents the whole app
 class App extends Component {
 	constructor(props) {
 		super(props);
-		this.state = { };
-	}
-
-	renderLinks() {
-		return this.props.links.map((link) => {
-			return (
-				<Link key={link._id} link={link} />
-			)
-		});
-	}
-
-	handleSubmit(event) {
-		event.preventDefault();
-
-		// Find the text field via the React ref
-		const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
-
-		Meteor.call('links.insert', text);
-
-		// Clear form
-		ReactDOM.findDOMNode(this.refs.textInput).value = '';
+		this.state = { result: [], links: [], value: '' };
+		this.options = [
+			{ type: 'MP3', handler: this.downloadAudio.bind(this) },
+			{ type: 'MP4', handler: this.downloadVideo.bind(this) },
+		];
+		this.optionsAll = [
+			{ type: 'MP3', handler: this.downloadAllAudio.bind(this) },
+			{ type: 'MP4', handler: this.downloadAllVideo.bind(this) },
+		];
 	}
 
 	render() {
 				<h1 className="logo">SoundWave</h1>
 				<div className="box-container">
 					<header>
-						<AccountsUIWrapper />
-						<form className="new-link" onSubmit={this.handleSubmit.bind(this)}>
-							<input type="text" ref="textInput" placeholder="Search a video" />
-						</form>
+						<Input value={this.state.value} change={this.inputChange.bind(this)} />
+						<Results results={this.state.result} select={this.selectResult.bind(this)} />
 					</header>
-					<ul>{ this.renderLinks() }</ul>
+					<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>
 		);
 	}
+
+	downloadAudio(video) {
+		console.log('Requesting mp3 for ' + video.id);
+	}
+
+	downloadVideo(video) {
+		console.log('Requesting mp4 for ' + video.id);
+	}
+
+	downloadAllAudio() {
+		console.log('Requesting mp3 for all');
+	}
+
+	downloadAllVideo() {
+		console.log('Requesting mp4 for all');
+	}
+
+	inputChange(text) {
+		this.setState({ value: text }, this.search);
+	}
+
+	removeLink(link) {
+		if (_.some(this.state.links, e => e.id === link.id))
+			this.setState({ links: _.reject(this.state.links, e => e.id === link.id) });
+	}
+
+	selectResult(video) {
+		if (_.every(this.state.links, e => e.id !== video.id)) {
+			if (_.some(this.props.converted, e => e.id === video.id)) {
+				video.converted = _.find(this.props.converted, e => e.id === video.id)._id;
+			} else
+				Meteor.call('links.add', {video, type: 'audio'}, (err, res) => {
+					if (err)
+						console.error(err);
+					else
+						video.converted = _.find(this.props.converted, e => e.id === video.id)._id;
+				});
+			this.setState({links: [...this.state.links, video]});
+		}
+		this.setState({ value: '', result: [] });
+	}
+
+	search() {
+		if (!this.state.value) {
+			this.setState({ result: [] });
+		} 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(() => this.setState({ result: e }))
+				));
+		}
+	}
 }
 
 App.propTypes = {
-	links: PropTypes.array.isRequired,
-	currentUser: PropTypes.object,
+	converted: PropTypes.array.isRequired,
 };
 
 export default createContainer(() => {
 	Meteor.subscribe('links');
-
 	return {
-		links: Links.find({}, {sort: {createdAt: -1}}).fetch(),
-		currentUser: Meteor.user(),
+		converted: Converted.find({}).fetch(),
 	};
-}, App);
+}, App)

imports/ui/Input.jsx

+import React, {Component, 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)} />
+		);
+	}
+}
+
+Input.propTypes = {
+	change: PropTypes.func.isRequired,
+	value: PropTypes.string.isRequired
+};

imports/ui/Link.jsx

 import React, {Component, PropTypes} from 'react';
-import classnames from 'classnames';
-
-// Task component - represents a single todo item
-export default class Link extends Component {
-
-	deleteThisLink() {
-		Meteor.call('links.remove', this.props.link._id);
-	}
+import { createContainer } from 'meteor/react-meteor-data';
+import { Converted } from '../api/links';
+import Options from './Options';
+import Video from './Video';
 
+class Link extends Component {
 	render() {
-		// Give tasks a different className when they are checked off,
-		// so that we can style them nicely in CSS
-		const linkClassName = classnames({
-			completed: this.props.link.completed,
-		});
-
 		return (
-			<li className={linkClassName}>
-				<button className="delete" onClick={this.deleteThisLink.bind(this)}>
-					&times;
-				</button>
-				<span className="text">{this.props.link.url}</span>
+			<li className="link">
+				<span className="link-text" title={this.props.link.title}>{this.props.link.title}</span>
+				<Options className="link-options" handlers={this.props.options}
+						 video={this.props.link} converted={this.props.converted}/>
+				<button className="link-delete" onClick={this.props.remove}>&times;</button>
 			</li>
 		);
 	}
 }
 
 Link.propTypes = {
-	// This component gets the task to display through a React prop.
-	// We can use propTypes to indicate it is required
-	link: PropTypes.object.isRequired,
+	link: PropTypes.instanceOf(Video).isRequired,
+	remove: PropTypes.func.isRequired,
+	options: PropTypes.arrayOf(PropTypes.shape({
+		type: PropTypes.string,
+		handler: PropTypes.func
+	})).isRequired,
+	converted: PropTypes.object
 };
+
+export default createContainer(({link, converted_id, remove, options}) => {
+	const converted = Converted.findOne(converted_id);
+	return { link, remove, options, converted }
+}, Link);

imports/ui/Links.jsx

+import React, {Component, PropTypes} from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+import Link from './Link';
+import Video from './Video';
+
+export default class Links extends Component {
+	render() {
+		return (
+			<ul>
+				{ this.props.links.map(link => (
+					<Link key={link.id} converted_id={link.converted}
+						  link={link} options={this.props.handlers}
+						  remove={() => this.props.remove(link)}/>
+				)) }
+			</ul>
+		);
+	}
+}
+
+Links.propTypes = {
+	links: PropTypes.arrayOf(PropTypes.instanceOf(Video)).isRequired,
+	remove: PropTypes.func.isRequired,
+	handlers: PropTypes.arrayOf(PropTypes.shape({
+		type: PropTypes.string,
+		handler: PropTypes.func
+	})).isRequired
+};

imports/ui/Options.jsx

+import React, {Component, PropTypes} from 'react';
+import Video from './Video';
+import classnames from 'classnames';
+
+export default class Options extends Component {
+
+	getProgress(type) {
+		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'];
+	}
+
+	getClasses() {
+		return classnames({
+			option: true,
+			unreachable: this.props.converted.error
+		});
+	}
+
+	getErrorMessage() {
+		return this.props.converted.error || null;
+	}
+
+	render() {
+		return (
+			<div>
+				{ _.map(this.props.handlers, (h) => (
+					<button key={h.type} className={this.getClasses()}
+							onClick={() => h.handler(this.props.video)}
+							disabled={this.isDisabled(h.type)} title={this.getErrorMessage()}>
+						<div className="option-progress" style={{width: this.getProgress(h.type) + '%'}}></div>
+						<i className="fa fa-download"/> {h.type}
+					</button>
+				)) }
+			</div>
+		);
+	}
+}
+
+Options.propTypes = {
+	handlers: PropTypes.arrayOf(PropTypes.shape({
+		type: PropTypes.string,
+		handler: PropTypes.func
+	})),
+	video: PropTypes.instanceOf(Video),
+	converted: PropTypes.object
+};

imports/ui/OptionsAll.jsx

+import React, {Component, PropTypes} from 'react';
+import Video from './Video';
+
+export default class OptionsAll extends Component {
+
+	renderCount() {
+		return (this.props.count || 0) + ' link' + (this.props.count > 1 ? 's' : '' );
+	}
+
+	isDisabled(type) {
+		const prop = (type === 'MP3' ? 'audio' : 'video');
+		return !_.every(this.props.links, (e) => {
+			const converted = _.find(this.props.converted, i => e.id === i.id);
+			return converted ? converted[prop] : true;
+		});
+	}
+
+	render() {
+		if (!this.props.count) return null;
+		return (
+			<div className="options-all">
+				<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)}>
+							<i className="fa fa-download"/> {h.type}
+						</button>
+					)) }
+				</div>
+			</div>
+		);
+	}
+}
+
+OptionsAll.propTypes = {
+	count: PropTypes.number.isRequired,
+	links: PropTypes.arrayOf(PropTypes.instanceOf(Video)),
+	converted: PropTypes.arrayOf(PropTypes.object),
+	handlers: PropTypes.arrayOf(PropTypes.shape({
+		type: PropTypes.string,
+		handler: PropTypes.func
+	})).isRequired,
+};

imports/ui/Result.jsx

+import React, {Component, PropTypes} from 'react';
+import Video from './Video';
+
+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>
+					</div>
+				</div>
+			</a>
+		);
+	}
+}
+
+Result.propTypes = {
+	result: PropTypes.instanceOf(Video).isRequired,
+	click: PropTypes.func
+};

imports/ui/Results.jsx

+import React, {Component, PropTypes} from 'react';
+import Video from './Video';
+import Result from './Result';
+
+export default class Results extends Component {
+	render() {
+		if (!this.props.results.length) return null;
+		return (
+			<ul id="search-result">
+				{ this.props.results.map(res => (
+					<Result key={res.id} result={res} click={() => this.props.select(res) }/>
+				)) }
+			</ul>
+		);
+	}
+}
+
+Results.propTypes = {
+	results: PropTypes.arrayOf(PropTypes.instanceOf(Video)).isRequired,
+	select: PropTypes.func.isRequired
+};

imports/ui/Video.js

+export default class Video {
+	constructor(result) {
+		this.id = result.id.videoId;
+		this.title = result.snippet.title;
+		this.thumb = result.snippet.thumbnails.default;
+		this.url = `https://www.youtube.com/watch?v=${this.id}`;
+		this.stats = {
+			viewCount: 0,
+			likeCount: 0,
+			dislikeCount: 0,
+			commentCount: 0,
+			favoriteCount: 0,
+		};
+		this.duration = 0;
+		this.converted = {};
+	}
+
+	update(stats, duration) {
+		for (count in stats)
+			this.stats[count] = numeral(stats[count]).format('0.[00]a');
+		console.log(duration);
+		const time = moment.utc(moment.duration(duration).asMilliseconds())
+		this.duration = time.format(time.hours() ? 'k:mm:ss' : 'm:ss');
+	}
+}

imports/ui/YouTubeAPI.js

+import 'whatwg-fetch';
+import querystring from 'querystring';
+
+const KEY = 'AIzaSyDh641dLzxYexCASA3TdYMlc6zzS793ppQ';
+const ENDPOINT = 'https://www.googleapis.com/youtube/v3';
+
+const checkStatus = (response) => {
+	if (response.status >= 200 && response.status < 300) {
+		return response
+	} else {
+		let error = new Error(response.statusText);
+		error.response = response;
+		throw error
+	}
+};
+
+const parseJson = response => response.json();
+
+export function YouTubeSearch(query) {
+	const params = {
+		part: 'snippet',
+		type: 'video',
+		key: KEY,
+		q: query
+	};
+
+	return fetch(`${ENDPOINT}/search?${querystring.stringify(params)}`)
+		.then(checkStatus)
+		.then(parseJson);
+}
+
+export function YouTubeVideoInfo(id) {
+	const params = {
+		part: 'statistics,contentDetails',
+		key: KEY,
+		id: id
+	};
+
+	return fetch(`${ENDPOINT}/videos?${querystring.stringify(params)}`)
+		.then(checkStatus)
+		.then(parseJson);
+}

package.json

     "babel-runtime": "^6.20.0",
     "bcrypt": "^1.0.2",
     "classnames": "^2.2.5",
+    "fetch": "^1.1.0",
+    "gapi": "0.0.3",
     "meteor-node-stubs": "~0.2.4",
+    "querystring": "^0.2.0",
     "react": "^15.4.2",
     "react-addons-pure-render-mixin": "^15.4.2",
-    "react-dom": "^15.4.2"
+    "react-dom": "^15.4.2",
+    "youtube-dl": "^1.11.1"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-class-properties": "^6.23.0"
   }
 }

packages.json

+{
+  "ytdl-core":"0.7.9",
+  "fluent-ffmpeg":"2.1.0"
+}