jonathan/combine.fm
jonathan/combine.fm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Add more ES6

Browse source
This commit is contained in:
Jonathan Cremin 2015-06-15 02:34:39 +01:00
parent 60f90817ad
commit 0650e6b3b8
17 changed files with 374 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

37
views/app.jsx → views/app.js
View file

@ -1,18 +1,12 @@
'use strict';
import React from 'react';
import Router, {Route, DefaultRoute, NotFoundRoute, RouteHandler} from 'react-router';
import ga, {Initializer as GAInitiailizer} from 'react-google-analytics';
import Home from './home';
import Share from './share';
import Head from './head';
import ErrorView from './error';
var React = require('react');
var Router = require('react-router');
var Route = require('react-router').Route;
var DefaultRoute = require('react-router').DefaultRoute;
var NotFoundRoute = require('react-router').NotFoundRoute;
var RouteHandler = require('react-router').RouteHandler;
var Home = require('./home.jsx');
var Share = require('./share.jsx');
var Head = require('./head.jsx');
var ga = require('react-google-analytics');
var GAInitiailizer = ga.Initializer;
var App = React.createClass({
let App = React.createClass({
render: function () {
return (
<html>
@ -20,25 +14,26 @@ var App = React.createClass({
<body className='home'>
<RouteHandler {...this.props} />
<GAInitiailizer />
<script src='jspm_packages/system.js'></script>
<script src='config.js'></script>
<script dangerouslySetInnerHTML={{__html: 'System.import(\'views/app.jsx\');'}}></script>
<script src='/jspm_packages/system.src.js'></script>
<script src='/config.js'></script>
<script dangerouslySetInnerHTML={{__html: 'System.import(\'views/app\');'}}></script>
</body>
</html>
);
}
});
var routes = (
let routes = (
<Route name='home' handler={App} path='/'>
<DefaultRoute handler={Home} />
<Route name='share' path=':service/:type/:id' handler={Share}/>
<NotFoundRoute handler={Error}/>
<NotFoundRoute handler={ErrorView}/>
</Route>
);
if (typeof window !== 'undefined') {
console.log("HEREER")
console.info('Time since page started rendering: ' + (Date.now() - timerStart) + 'ms');
Router.run(routes, Router.HistoryLocation, function (Handler) {
if (typeof window.recents !== 'undefined') {
React.render(<Handler recents={window.recents} />, document);
@ -50,4 +45,4 @@ if (typeof window !== 'undefined') {
ga('send', 'pageview');
}
module.exports.routes = routes;
export {routes};

37
views/error.js Normal file
View file

@ -0,0 +1,37 @@
import React from 'react';
import Head from './head';
import Foot from './foot';
export default React.createClass({
render: function() {
return (
<html>
<Head {...this.props} />
<body>
<div className='error'>
<header>
<div className='container'>
<div className='row'>
<div className='col-md-12'>
<h1><a href='/'>match<span className='audio-lighten'>.audio</span></a></h1>
</div>
</div>
</div>
</header>
<div className='container main'>
<div className='row'>
<div className='col-md-6 col-md-offset-3'>
<h2>{this.props.status}</h2>
<h1>{this.props.message}</h1>
<pre>{this.props.error.stack || ''}</pre>
</div>
</div>
</div>
<Foot page='error' />
</div>
</body>
</html>
);
}
});

39
views/error.jsx
View file

@ -1,39 +0,0 @@
"use strict";
var React = require("react");
var Head = require("./head.jsx");
var Foot = require("./foot.jsx");
module.exports = React.createClass({
render: function() {
return (
<html>
<Head {...this.props} />
<body>
<div className="error">
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1><a href="/">match<span className="audio-lighten">.audio</span></a></h1>
</div>
</div>
</div>
</header>
<div className="container main">
<div className="row">
<div className="col-md-6 col-md-offset-3">
<h2>{this.props.status}</h2>
<h1>{this.props.message}</h1>
<pre>{this.props.error.stack || ""}</pre>
</div>
</div>
</div>
<Foot page="error" />
</div>
</body>
</html>
);
}
});

6
views/faq.jsx → views/faq.js
View file

@ -1,8 +1,6 @@
'use strict';
import React from 'react';
var React = require('react');
module.exports = React.createClass({
export default React.createClass({
render: function() {
return (

18
views/foot.js Normal file
View file

@ -0,0 +1,18 @@
import React from 'react';
export default React.createClass({
render: function() {
return (
<footer>
<div className='container'>
<div className='row'>
<div className={this.props.page === 'home' || this.props.page === 'error' ? 'col-md-6 col-md-offset-3' : 'col-md-12'}>
<a href='https://twitter.com/MatchAudio'>Tweet</a> or <a href='https://github.com/kudos/match.audio'>Fork</a>. A work in progress by <a href='http://crem.in'>this guy</a>.
</div>
</div>
</div>
</footer>
);
}
});

20
views/foot.jsx
View file

@ -1,20 +0,0 @@
"use strict";
var React = require("react");
module.exports = React.createClass({
render: function() {
return (
<footer>
<div className="container">
<div className="row">
<div className={this.props.page === "home" || this.props.page === "error" ? "col-md-6 col-md-offset-3" : "col-md-12"}>
<a href="https://twitter.com/MatchAudio">Tweet</a> or <a href="https://github.com/kudos/match.audio">Fork</a>. A work in progress by <a href="http://crem.in">this guy</a>.
</div>
</div>
</div>
</footer>
);
}
});

37
views/head.js Normal file
View file

@ -0,0 +1,37 @@
import React from 'react';
import {State} from 'react-router';
export default React.createClass({
mixins: [ State ],
contextTypes: {
router: React.PropTypes.func.isRequired
},
render: function() {
var image = this.props.shares ? this.props.shares[0].artwork.large : 'https://match.audio/images/logo-512.png';
var title = this.props.shares ? this.props.shares[0].name + ' by ' + this.props.shares[0].artist.name : 'Match Audio';
var shareUrl = 'https://match.audio/' + this.getParams().service + '/' + this.getParams().type + '/' + this.getParams().id;
return (
<head>
<script dangerouslySetInnerHTML={{__html: 'var timerStart = Date.now();'}}></script>
<meta charSet='utf-8' />
<meta httpEquiv='X-UA-Compatible' content='IE=edge' />
<title>{this.props.shares ? 'Listen to ' + this.props.shares[0].name + ' by ' + this.props.shares[0].artist.name + ' on Match Audio' : 'Match Audio'}</title>
<meta name='description' content='Match Audio matches album and track links from Youtube, Rdio, Spotify, Deezer, Google Music, Xbox Music, Beats Music, and iTunes and give you back one link with matches we find on all of them.' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta name='theme-color' content='#FE4365' />
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:site' content='@MatchAudio' />
<meta name='twitter:title' property='og:title' content={title} />
<meta name='twitter:description' property='og:description' content='Match Audio matches album and track links from Youtube, Rdio, Spotify, Deezer, Google Music, Xbox Music, Beats Music, and iTunes and give you back one link with matches we find on all of them.' />
<meta name='twitter:image:src' property='og:image' content={image} />
<meta property='og:url' content={shareUrl} />
<link rel='shortcut icon' href='/images/favicon.png' />
<link rel='icon' sizes='512x512' href='/images/logo-128.png' />
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css' />
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
);
}
});

38
views/head.jsx
View file

@ -1,38 +0,0 @@
"use strict";
var React = require("react");
var Router = require("react-router");
module.exports = React.createClass({
mixins: [ Router.State ],
contextTypes: {
router: React.PropTypes.func.isRequired
},
render: function() {
var image = this.props.shares ? this.props.shares[0].artwork.large : "https://match.audio/images/logo-512.png";
var title = this.props.shares ? this.props.shares[0].name + " by " + this.props.shares[0].artist.name : "Match Audio";
var shareUrl = "https://match.audio/" + this.getParams().service + "/" + this.getParams().type + "/" + this.getParams().id;
return (
<head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<title>{this.props.shares ? "Listen to " + this.props.shares[0].name + " by " + this.props.shares[0].artist.name + " on Match Audio" : "Match Audio"}</title>
<meta name="description" content="Match Audio matches album and track links from Youtube, Rdio, Spotify, Deezer, Google Music, Xbox Music, Beats Music, and iTunes and give you back one link with matches we find on all of them." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#FE4365" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@MatchAudio" />
<meta name="twitter:title" property="og:title" content={title} />
<meta name="twitter:description" property="og:description" content="Match Audio matches album and track links from Youtube, Rdio, Spotify, Deezer, Google Music, Xbox Music, Beats Music, and iTunes and give you back one link with matches we find on all of them." />
<meta name="twitter:image:src" property="og:image" content={image} />
<meta property="og:url" content={shareUrl} />
<link rel="shortcut icon" href="/images/favicon.png" />
<link rel="icon" sizes="512x512" href="/images/logo-128.png" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="/stylesheets/style.css" />
</head>
);
}
});

77
views/home.jsx → views/home.js
View file

@ -1,19 +1,16 @@
"use strict";
var React = require("react");
var request = require("superagent");
var Router = require("react-router");
var Link = require("react-router").Link;
var Faq = require("./faq.jsx");
var Foot = require("./foot.jsx");
import React from 'react';
import request from 'superagent';
import {Navigation, State, Link} from 'react-router';
import Faq from './faq';
import Foot from './foot';
var Recent = React.createClass({
render: function() {
return (<div className="row">
<div className="col-md-6 col-md-offset-3">
return (<div className='row'>
<div className='col-md-6 col-md-offset-3'>
<h2>Recently Shared</h2>
<div className="row recent">
<div className='row recent'>
{this.props.recents.map(function(item, i){
return (<RecentItem item={item} key={i} />);
})}
@ -31,9 +28,9 @@ var RecentItem = React.createClass({
return false;
}
return (
<div className="col-sm-4 col-xs-6">
<Link to="share" params={this.props.item}>
<div className={this.props.item.service === "youtube" ? "artwork-youtube artwork" : "artwork"} style={{backgroundImage: "url(" + this.props.item.artwork.small + ")"}}></div>
<div className='col-sm-4 col-xs-6'>
<Link to='share' params={this.props.item}>
<div className={this.props.item.service === 'youtube' ? 'artwork-youtube artwork' : 'artwork'} style={{backgroundImage: 'url(' + this.props.item.artwork.small + ')'}}></div>
</Link>
</div>
);
@ -43,7 +40,7 @@ var RecentItem = React.createClass({
var SearchForm = React.createClass({
mixins: [ Router.Navigation, Router.State ],
mixins: [ Navigation, State ],
getInitialState: function () {
return {
@ -65,14 +62,14 @@ var SearchForm = React.createClass({
});
return;
}
request.post("/search").send({url: url}).end(function(req, res) {
request.post('/search').send({url: url}).end(function(req, res) {
that.setState({
submitting: false
});
if (res.body.error) {
that.setState({error: res.body.error.message});
}
that.transitionTo("share", res.body);
that.transitionTo('share', res.body);
});
},
@ -85,14 +82,14 @@ var SearchForm = React.createClass({
render: function() {
return (
<form role="form" method="post" action="/search" onSubmit={this.handleSubmit}>
<div className="input-group input-group-lg">
<input type="text" name="url" placeholder="Paste link here" className="form-control" autofocus ref="url" />
<span className="input-group-btn">
<input type="submit" className="btn btn-lg btn-custom" value="Share Music" disabled={this.state.submitting} />
<form role='form' method='post' action='/search' onSubmit={this.handleSubmit}>
<div className='input-group input-group-lg'>
<input type='text' name='url' placeholder='Paste link here' className='form-control' autofocus ref='url' />
<span className='input-group-btn'>
<input type='submit' className='btn btn-lg btn-custom' value='Share Music' disabled={this.state.submitting} />
</span>
</div>
<div className={this.state.error ? "alert alert-warning" : ""} role="alert">
<div className={this.state.error ? 'alert alert-warning' : ''} role='alert'>
{this.state.error}
</div>
</form>
@ -100,7 +97,7 @@ var SearchForm = React.createClass({
}
});
module.exports = React.createClass({
export default React.createClass({
getInitialState: function () {
// Use this only on first page load, refresh whenever we navigate back.
@ -118,7 +115,7 @@ module.exports = React.createClass({
componentDidMount: function () {
if (!this.props.recents) {
request.get("/recent").set("Accept", "application/json").end(function(err, res) {
request.get('/recent').set('Accept', 'application/json').end(function(err, res) {
this.setState({
recents: res.body.recents
});
@ -129,42 +126,42 @@ module.exports = React.createClass({
render: function() {
return (
<div>
<div className="page-wrap">
<div className='page-wrap'>
<header>
<h1><Link to="home">match<span className="audio-lighten">.audio</span></Link></h1>
<h1><Link to='home'>match<span className='audio-lighten'>.audio</span></Link></h1>
</header>
<div className="container">
<div className="row share-form">
<div className="col-md-6 col-md-offset-3">
<div className='container'>
<div className='row share-form'>
<div className='col-md-6 col-md-offset-3'>
<SearchForm />
</div>
</div>
<div className="row blurb">
<div className="col-md-6 col-md-offset-3">
<div className='row blurb'>
<div className='col-md-6 col-md-offset-3'>
<p>Match Audio makes sharing from music services better.
What happens when you share your favourite song on Spotify with a friend, but they don"t use Spotify?
What happens when you share your favourite song on Spotify with a friend, but they don't use Spotify?
</p><p>We match album and track links from Youtube, Rdio, Spotify, Deezer, Google Music, Xbox Music, Beats Music, and iTunes and give you back one link with matches we find on all of them.
</p>
</div>
</div>
<Recent recents={this.state.recents} />
<Faq />
<div className="row">
<div className="col-md-6 col-md-offset-3">
<div className='row'>
<div className='col-md-6 col-md-offset-3'>
<h2>Tools</h2>
<div className="row">
<div className="col-md-6">
<div className='row'>
<div className='col-md-6'>
<p>Download the Chrome Extension and get Match Audio links right from your address bar.</p>
</div>
<div className="col-md-6">
<p><a href="https://chrome.google.com/webstore/detail/kjfpkmfgcflggjaldcfnoppjlpnidolk"><img src="/images/chrome-web-store.png" alt="Download the Chrome Extension" height="75" /></a></p>
<div className='col-md-6'>
<p><a href='https://chrome.google.com/webstore/detail/kjfpkmfgcflggjaldcfnoppjlpnidolk'><img src='/images/chrome-web-store.png' alt='Download the Chrome Extension' height='75' /></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<Foot page="home" />
<Foot page='home' />
</div>
);
}

196
views/share.js Normal file
View file

@ -0,0 +1,196 @@
import React from 'react';
import request from 'superagent';
import {State, Link} from 'react-router';
import Foot from './foot';
var MusicItem = React.createClass({
render: function() {
if (!this.props.item.matched_at) {
return (
<div className='col-md-3 col-xs-6'>
<div className='service'>
<div className='artwork' style={{backgroundImage: 'url(' + this.props.items[0].artwork.small + ')'}}>
</div>
<div className='loading-wrap'>
<img src='/images/eq.svg' className='loading' />
</div>
<div className='service-link'>
<img src={'/images/' + this.props.item.service + '.png'} className='img-rounded' />
</div>
</div>
</div>
);
} else if (!this.props.item.id) {
return (
<div className='col-md-3 col-xs-6'>
<div className='service'>
<div className='artwork not-found' style={{backgroundImage: 'url(' + this.props.items[0].artwork.small + ')'}}></div>
<div className='no-match'>
No Match
</div>
<div className='service-link not-found'>
<img src={'/images/' + this.props.item.service + '.png'} className='img-rounded' />
</div>
</div>
</div>
);
} else {
return (
<div className='col-md-3 col-xs-6'>
<div className={'service' + (this.props.inc === 0 ? ' source-service' : '')}>
<div className='matching-from hidden-xs'>{this.props.inc === 0 ? 'Found matches using this link' : ''}</div>
<a href={this.props.item.streamUrl || this.props.item.purchaseUrl}>
<div className={this.props.item.service === 'youtube' ? 'artwork-youtube artwork' : 'artwork'} style={{backgroundImage: 'url(' + this.props.item.artwork.small + ')'}}>
</div>
<div className={this.props.item.service === 'youtube' && this.props.inc > 0 ? 'youtube' : ''}>
{this.props.item.service === 'youtube' && this.props.inc > 0 ? this.props.item.name : ''}
</div>
</a>
<div className='service-link'>
<a href={this.props.item.streamUrl || this.props.item.purchaseUrl}>
<img src={'/images/' + this.props.item.service + '.png'} className='img-rounded' />
</a>
</div>
</div>
</div>
);
}
}
});
export default React.createClass({
mixins: [ State ],
getInitialState: function () {
if (this.props.shares && this.props.shares[0].id === this.getParams().id) {
return {
name: this.props.shares[0].name,
artist: this.props.shares[0].artist.name,
shares: this.props.shares,
shareUrl: 'https://match.audio/' + this.props.shares[0].service + '/' + this.props.shares[0].type + '/' + this.props.shares[0].id
};
}
return {
name: '',
artist: '',
shares: [],
shareUrl: ''
};
},
componentWillUnmount: function() {
if (this.state.interval) {
clearInterval(this.state.interval);
}
},
componentDidMount: function () {
var complete = this.state.shares.length > 0;
this.state.shares.forEach(function(share) {
if (typeof share.matched_at === 'undefined') {
complete = false;
}
});
var getShares = function() {
request.get(this.getPathname() + '.json').end(function(err, res) {
var shares = res.body.shares;
complete = true;
shares.forEach(function(share) {
if (typeof share.matched_at === 'undefined') {
complete = false;
}
});
if (complete) {
clearInterval(this.state.interval);
}
if (shares.length) {
this.setState({
name: shares[0].name,
artist: shares[0].artist.name,
shares: shares,
shareUrl: 'https://match.audio/' + shares[0].service + '/' + shares[0].type + '/' + shares[0].id
});
}
}.bind(this));
}.bind(this);
if (!this.state.shares.length) {
getShares();
}
// Temporary until websockets implementation
this.state.interval = setInterval(function() {
if (!complete) {
getShares();
}
}, 2000);
// Some hacks to pop open the Twitter/Facebook/Google Plus sharing dialogs without using their code.
Array.prototype.forEach.call(document.querySelectorAll('.share-dialog'), function(dialog){
dialog.addEventListener('click', function(event) {
event.preventDefault();
var w = 845;
var h = 670;
var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(dialog.href, 'Share Music', 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
if (window.focus) {
newWindow.focus();
}
});
});
},
render: function() {
return (
<div>
<div className='page-wrap share'>
<header>
<div className='container'>
<div className='row'>
<div className='col-md-12'>
<h1><Link to='home'>match<span className='audio-lighten'>.audio</span></Link></h1>
</div>
</div>
</div>
</header>
<div className='container'>
<div className='row'>
<div className='col-md-9 col-sm-8 col-xs-12'>
<h3>Matched {this.state.shares[0] ? this.state.shares[0].type + 's' : ''} for</h3>
<h2>{this.state.name} <span className='artist-lighten'>- {this.state.artist}</span></h2>
</div>
<div className='col-md-3 col-sm-4 hidden-xs'>
<ul className='list-inline share-tools'>
<li>Share this</li>
<li><a href={'http://twitter.com/intent/tweet/?text=' + encodeURIComponent(this.state.name) + ' by ' + encodeURIComponent(this.state.artist) + '&via=MatchAudio&url=' + this.state.shareUrl} className='share-dialog'><img src='/images/twitter.png' alt='Twitter' /></a></li>
<li><a href={'http://www.facebook.com/sharer/sharer.php?p[url]=' + this.state.shareUrl} className='share-dialog'><img src='/images/facebook.png' alt='Facebook' /></a></li>
<li><a href={'https://plus.google.com/share?url=' + this.state.shareUrl} className='share-dialog'><img src='/images/googleplus.png' alt='Google+' /></a></li>
</ul>
</div>
</div>
<div className='row'>
{this.state.shares.map(function(item, i){
return (<MusicItem items={this.state.shares} item={item} inc={i} key={i} />);
}.bind(this))}
</div>
</div>
</div>
<Foot page='share' />
</div>
);
}
});

199
views/share.jsx
View file

@ -1,199 +0,0 @@
"use strict";
var React = require("react");
var request = require("superagent");
var Router = require("react-router");
var Link = require("react-router").Link;
var Foot = require("./foot.jsx");
var MusicItem = React.createClass({
render: function() {
if (!this.props.item.matched_at) {
return (
<div className="col-md-3 col-xs-6">
<div className="service">
<div className="artwork" style={{backgroundImage: "url(" + this.props.items[0].artwork.small + ")"}}>
</div>
<div className="loading-wrap">
<img src="/images/eq.svg" className="loading" />
</div>
<div className="service-link">
<img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />
</div>
</div>
</div>
);
} else if (!this.props.item.id) {
return (
<div className="col-md-3 col-xs-6">
<div className="service">
<div className="artwork not-found" style={{backgroundImage: "url(" + this.props.items[0].artwork.small + ")"}}></div>
<div className="no-match">
No Match
</div>
<div className="service-link not-found">
<img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />
</div>
</div>
</div>
);
} else {
return (
<div className="col-md-3 col-xs-6">
<div className={"service" + (this.props.inc === 0 ? " source-service" : "")}>
<div className="matching-from hidden-xs">{this.props.inc === 0 ? "Found matches using this link" : ""}</div>
<a href={this.props.item.streamUrl || this.props.item.purchaseUrl}>
<div className={this.props.item.service === "youtube" ? "artwork-youtube artwork" : "artwork"} style={{backgroundImage: "url(" + this.props.item.artwork.small + ")"}}>
</div>
<div className={this.props.item.service === "youtube" && this.props.inc > 0 ? "youtube" : ""}>
{this.props.item.service === "youtube" && this.props.inc > 0 ? this.props.item.name : ""}
</div>
</a>
<div className="service-link">
<a href={this.props.item.streamUrl || this.props.item.purchaseUrl}>
<img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />
</a>
</div>
</div>
</div>
);
}
}
});
module.exports = React.createClass({
mixins: [ Router.State ],
getInitialState: function () {
if (this.props.shares && this.props.shares[0].id === this.getParams().id) {
return {
name: this.props.shares[0].name,
artist: this.props.shares[0].artist.name,
shares: this.props.shares,
shareUrl: "https://match.audio/" + this.props.shares[0].service + "/" + this.props.shares[0].type + "/" + this.props.shares[0].id
};
}
return {
name: "",
artist: "",
shares: [],
shareUrl: ""
};
},
componentWillUnmount: function() {
if (this.state.interval) {
clearInterval(this.state.interval);
}
},
componentDidMount: function () {
var complete = this.state.shares.length > 0;
this.state.shares.forEach(function(share) {
if (typeof share.matched_at === "undefined") {
complete = false;
}
});
var getShares = function() {
request.get(this.getPathname() + ".json").end(function(err, res) {
var shares = res.body.shares;
complete = true;
shares.forEach(function(share) {
if (typeof share.matched_at === "undefined") {
complete = false;
}
});
if (complete) {
clearInterval(this.state.interval);
}
if (shares.length) {
this.setState({
name: shares[0].name,
artist: shares[0].artist.name,
shares: shares,
shareUrl: "https://match.audio/" + shares[0].service + "/" + shares[0].type + "/" + shares[0].id
});
}
}.bind(this));
}.bind(this);
if (!this.state.shares.length) {
getShares();
}
// Temporary until websockets implementation
this.state.interval = setInterval(function() {
if (!complete) {
getShares();
}
}, 2000);
// Some hacks to pop open the Twitter/Facebook/Google Plus sharing dialogs without using their code.
Array.prototype.forEach.call(document.querySelectorAll(".share-dialog"), function(dialog){
dialog.addEventListener("click", function(event) {
event.preventDefault();
var w = 845;
var h = 670;
var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(dialog.href, "Share Music", "scrollbars=yes, width=" + w + ", height=" + h + ", top=" + top + ", left=" + left);
if (window.focus) {
newWindow.focus();
}
});
});
},
render: function() {
return (
<div>
<div className="page-wrap share">
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1><Link to="home">match<span className="audio-lighten">.audio</span></Link></h1>
</div>
</div>
</div>
</header>
<div className="container">
<div className="row">
<div className="col-md-9 col-sm-8 col-xs-12">
<h3>Matched {this.state.shares[0] ? this.state.shares[0].type + "s" : ""} for</h3>
<h2>{this.state.name} <span className="artist-lighten">- {this.state.artist}</span></h2>
</div>
<div className="col-md-3 col-sm-4 hidden-xs">
<ul className="list-inline share-tools">
<li>Share this</li>
<li><a href={"http://twitter.com/intent/tweet/?text=" + encodeURIComponent(this.state.name) + " by " + encodeURIComponent(this.state.artist) + "&via=MatchAudio&url=" + this.state.shareUrl} className="share-dialog"><img src="/images/twitter.png" alt="Twitter" /></a></li>
<li><a href={"http://www.facebook.com/sharer/sharer.php?p[url]=" + this.state.shareUrl} className="share-dialog"><img src="/images/facebook.png" alt="Facebook" /></a></li>
<li><a href={"https://plus.google.com/share?url=" + this.state.shareUrl} className="share-dialog"><img src="/images/googleplus.png" alt="Google+" /></a></li>
</ul>
</div>
</div>
<div className="row">
{this.state.shares.map(function(item, i){
return (<MusicItem items={this.state.shares} item={item} inc={i} key={i} />);
}.bind(this))}
</div>
</div>
</div>
<Foot page="share" />
</div>
);
}
});