deploy

build/Dockerfile

@@ -1,4 +1,8 @@
-FROM node
+FROM ubuntu:16.04
+RUN apt-get update
+RUN apt-get install -y curl ffmpeg build-essential python libssl-dev
+RUN curl -sL https://deb.nodesource.com/setup_6.x | bash -
+RUN apt-get install -y nodejs
 RUN mkdir -p /usr/src/app
 COPY bundle/ /usr/src/app/
 WORKDIR /usr/src/app/

imports/api/security.js

@@ -0,0 +1,6 @@
+import { Meteor } from 'meteor/meteor';
+
+if (Meteor.isServer) {
+	if (!process.env.API_KEY) throw new Error("You must fill the API_KEY env variable !");
+	Meteor.methods({ 'security.key'() { return { key: process.env.API_KEY}; } });
+}

imports/ui/App.jsx

@@ -13,16 +13,8 @@ class App extends Component {
 		this.state = { result: [], links: [], value: '' };
 		this.timeout = undefined;
 		this.options = [
-			{
-				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()}`)
-			},
+			{ type: 'MP3', handler: v => window.open('/mp3/'+ (v ? v.id : `batch/${this.batchLinks()}`)) },
+			{ type: 'MP4', handler: v => window.open('/mp4/'+ (v ? v.id : `batch/${this.batchLinks()}`)) },
 		];
 		_.each(['inputChange', 'selectResult', 'removeLink'], f => this[f] = this[f].bind(this));
 	}

imports/ui/AppLayout.jsx

@@ -18,7 +18,6 @@ const AppLayout = (props) =>
 		</div>
 	</div>;
 
-
 AppLayout.propTypes = {
 	links: Links.propTypes.links,
 	linkRemove: Links.propTypes.remove,

imports/ui/Input.jsx

@@ -1,13 +1,13 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 
 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,
-	placeholder: PropTypes.string
+	change: React.PropTypes.func.isRequired,
+	value: React.PropTypes.string.isRequired,
+	placeholder: React.PropTypes.string
 };
 
 export default Input;

imports/ui/Link.jsx

@@ -1,33 +1,27 @@
-import React, {Component, PropTypes} from 'react';
+import React from 'react';
 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() {
-		return (
-			<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>
-		);
-	}
-}
+const Link = ({ link, remove, options, converted }) =>
+	<li className="link">
+		<span className="link-text" title={link.title}>{link.title}</span>
+		<Options className="link-options" handlers={options} video={link} converted={converted}/>
+		<button className="link-delete" onClick={remove}>&times;</button>
+	</li>;
 
 Link.propTypes = {
-	link: PropTypes.instanceOf(Video).isRequired,
-	remove: PropTypes.func.isRequired,
-	options: PropTypes.arrayOf(PropTypes.shape({
-		type: PropTypes.string,
-		handler: PropTypes.func
+	link: React.PropTypes.instanceOf(Video).isRequired,
+	remove: React.PropTypes.func.isRequired,
+	options: React.PropTypes.arrayOf(React.PropTypes.shape({
+		type: React.PropTypes.string,
+		handler: React.PropTypes.func
 	})).isRequired,
-	converted: PropTypes.object
+	converted: React.PropTypes.object
 };
 
-export default createContainer(({link, converted_id, remove, options}) => {
-	const converted = Converted.findOne(converted_id);
-	return { link, remove, options, converted }
-}, Link);
+export default createContainer(({ link, converted_id, remove, options }) => ({
+	converted: Converted.findOne(converted_id),
+	link, remove, options,
+}), Link);

imports/ui/Links.jsx

@@ -1,27 +1,24 @@
-import React, {Component, PropTypes} from 'react';
+import React 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>
-		);
-	}
-}
+const Links = ({ links, remove, handlers }) =>
+	<ul>
+		{ links.map(link => (
+			<Link key={link.id} converted_id={link.converted}
+				  link={link} options={handlers}
+				  remove={() => 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
+	links: React.PropTypes.arrayOf(React.PropTypes.instanceOf(Video)).isRequired,
+	remove: React.PropTypes.func.isRequired,
+	handlers: React.PropTypes.arrayOf(React.PropTypes.shape({
+		type: React.PropTypes.string,
+		handler: React.PropTypes.func
 	})).isRequired
-};
+};
+
+export default Links;

imports/ui/Options.jsx

@@ -3,21 +3,6 @@ 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'];
 	}
@@ -38,6 +23,21 @@ export default class Options extends Component {
 		let typestr = (type === 'MP3' ? 'audio' : 'video');
 		return this.props.converted && this.props.converted[`error_${typestr}`] || 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) + '%' }} />
+						<i className="fa fa-download" /> {h.type}
+					</button>
+				)) }
+			</div>
+		);
+	}
 }
 
 Options.propTypes = {

imports/ui/OptionsAll.jsx

@@ -2,7 +2,6 @@ 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' : '' );
 	}
@@ -22,7 +21,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.handlerAll} disabled={this.isDisabled(h.type)}>
+						<button key={h.type} className="option" onClick={() => h.handler()} disabled={this.isDisabled(h.type)}>
 							<i className="fa fa-download"/> {h.type}
 						</button>
 					)) }
@@ -38,6 +37,6 @@ OptionsAll.propTypes = {
 	converted: PropTypes.arrayOf(PropTypes.object),
 	handlers: PropTypes.arrayOf(PropTypes.shape({
 		type: PropTypes.string,
-		handlerAll: PropTypes.func,
+		handler: PropTypes.func,
 	})).isRequired,
 };

imports/ui/Result.jsx

@@ -1,14 +1,6 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import Video from './Video';
-_ = lodash;
-
-const iconsClasses = {
-	view: "eye",
-	like: "thumbs-o-up",
-	dislike: "thumbs-o-down",
-	comment: "comments-o",
-	favorite: "star-o"
-};
+import Stats from './Stats';
 
 const Result = ({ click, result }) =>
 	<a className="result-link" onClick={click}>
@@ -19,19 +11,13 @@ const Result = ({ click, result }) =>
 				<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>
+			<Stats stats={result.stats} prefix="result"/>
 		</div>
 	</a>;
 
 Result.propTypes = {
-	result: PropTypes.instanceOf(Video).isRequired,
-	click: PropTypes.func
+	result: React.PropTypes.instanceOf(Video).isRequired,
+	click: React.PropTypes.func
 };
 
 export default Result;

imports/ui/Results.jsx

@@ -1,21 +1,16 @@
-import React, {Component, PropTypes} from 'react';
+import React 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>
-		);
-	}
-}
+const Results = ({ results, select }) => (!results.length ? null :
+	<ul id="search-result">
+		{ results.map(res => <Result key={res.id} result={res} click={() => select(res) }/>) }
+	</ul>
+);
 
 Results.propTypes = {
-	results: PropTypes.arrayOf(PropTypes.instanceOf(Video)).isRequired,
-	select: PropTypes.func.isRequired
-};
+	results: React.PropTypes.arrayOf(React.PropTypes.instanceOf(Video)).isRequired,
+	select: React.PropTypes.func.isRequired
+};
+
+export default Results;

imports/ui/Stats.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const Stats = ({ stats, prefix }) =>
+	<div className={`${prefix}-stats`}>
+		<div className={`${prefix}-views`} title={stats.viewCount} >
+			<i className="fa fa-eye"/> {stats.viewCount}
+		</div>
+		<div className={`${prefix}-likes`} title={stats.likeCount} >
+			<i className="fa fa-thumbs-o-up"/> {stats.likeCount}
+		</div>
+		<div className={`${prefix}-dislikes`} title={stats.dislikeCount} >
+			<i className="fa fa-thumbs-o-down"/> {stats.dislikeCount}
+		</div>
+		<div className={`${prefix}-comments`} title={stats.commentCount} >
+			<i className="fa fa-comments-o"/> {stats.commentCount}
+		</div>
+		<div className={`${prefix}-favorites`} title={stats.favoriteCount} >
+			<i className="fa fa-star-o"/> {stats.favoriteCount}
+		</div>
+	</div>;
+
+const CountType = React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]);
+Stats.propTypes = {
+	prefix: React.PropTypes.string.isRequired,
+	stats: React.PropTypes.shape({
+		viewCount: CountType,
+		likeCount: CountType,
+		dislikeCount: CountType,
+		commentCount: CountType,
+		favoriteCount: CountType,
+	}).isRequired
+};
+
+export default Stats;

imports/ui/YouTubeAPI.js

@@ -1,43 +1,29 @@
+import { Meteor } from 'meteor/meteor';
 import 'whatwg-fetch';
 import querystring from 'querystring';
-_ = lodash;
 
-const KEY = 'AIzaSyDh641dLzxYexCASA3TdYMlc6zzS793ppQ';
+let KEY = '';
+Meteor.call('security.key', (err, res) => KEY = res.key);
 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 checkStatus = response => {
+	if (response.status >= 200 && response.status < 300) return response;
+	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)}`)
+const YouTubeAPIQuery = ({ action, params}) =>
+	fetch(`${ENDPOINT}/${action}?${querystring.stringify(params)}`)
 		.then(checkStatus)
 		.then(parseJson);
-}
 
-export function YouTubeVideoInfo(id) {
-	const params = {
-		part: 'statistics,contentDetails',
-		key: KEY,
-		id: id
-	};
+const YouTubeSearch = query => YouTubeAPIQuery({ action: 'search',
+	params: { part: 'snippet', type: 'video', key: KEY, q: query }});
 
-	return fetch(`${ENDPOINT}/videos?${querystring.stringify(params)}`)
-		.then(checkStatus)
-		.then(parseJson);
-}
+const YouTubeVideoInfo = id => YouTubeAPIQuery({ action: 'videos',
+	params: { part: 'statistics,contentDetails', key: KEY, id: id }});
+
+export { YouTubeSearch, YouTubeVideoInfo };

server/main.js

@@ -1,5 +1,6 @@
 import { Meteor } from 'meteor/meteor';
 import '../imports/api/links.js';
+import '../imports/api/security.js';
 import '../imports/startup/routes';
 
 Meteor.startup(() => {});