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

Code cleanup

Browse source
This commit is contained in:
Jonathan Cremin 2015-05-17 19:10:30 +01:00
parent a74ccfa575
commit be00516521
18 changed files with 209 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

11
views/.eslintrc Normal file
View file

@ -0,0 +1,11 @@
{
"ecmaFeatures": {
"jsx": true
},
"plugins": [
"react"
],
"env": {
"browser": true
}
}

42
views/app.jsx
View file

@ -1,23 +1,19 @@
'use strict';
"use strict";
var request = require('superagent');
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 Error = require('./error.jsx');
var Head = require('./head.jsx');
var ga = require('react-google-analytics');
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({
render: function () {
return (
<html>
<Head {...this.props} />
@ -47,16 +43,16 @@ var routes = (
module.exports.routes = routes;
if (typeof window !== 'undefined') {
if (typeof window !== "undefined") {
window.onload = function() {
Router.run(routes, Router.HistoryLocation, function (Handler) {
if (typeof recents !== "undefined") {
React.render(<Handler recents={recents} />, document);
if (typeof window.recents !== "undefined") {
React.render(<Handler recents={window.recents} />, document);
} else if (typeof shares !== "undefined") {
React.render(<Handler shares={shares} />, document);
React.render(<Handler shares={window.shares} />, document);
}
});
ga('create', 'UA-66209-8', 'auto');
ga('send', 'pageview');
}
}
ga("create", "UA-66209-8", "auto");
ga("send", "pageview");
};
}

8
views/error.jsx
View file

@ -1,8 +1,8 @@
'use strict';
"use strict";
var React = require('react');
var Head = require('./head.jsx');
var Foot = require('./foot.jsx');
var React = require("react");
var Head = require("./head.jsx");
var Foot = require("./foot.jsx");
module.exports = React.createClass({

4
views/faq.jsx
View file

@ -1,6 +1,6 @@
'use strict';
"use strict";
var React = require('react');
var React = require("react");
module.exports = React.createClass({

6
views/foot.jsx
View file

@ -1,6 +1,6 @@
'use strict';
"use strict";
var React = require('react');
var React = require("react");
module.exports = React.createClass({
@ -9,7 +9,7 @@ module.exports = React.createClass({
<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"}>
<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>

18
views/head.jsx
View file

@ -1,12 +1,14 @@
'use strict';
"use strict";
var React = require('react');
var Router = require('react-router');
var React = require("react");
var Router = require("react-router");
module.exports = React.createClass({
mixins: [ Router.State ],
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";
@ -15,7 +17,7 @@ module.exports = React.createClass({
<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>
<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" />
@ -27,10 +29,10 @@ module.exports = React.createClass({
<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 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>
);
}
});
});

24
views/home.jsx
View file

@ -1,11 +1,11 @@
'use strict';
"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');
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");
var Recent = React.createClass({
@ -33,7 +33,7 @@ var RecentItem = React.createClass({
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={this.props.item.service === "youtube" ? "artwork-youtube artwork" : "artwork"} style={{backgroundImage: "url(" + this.props.item.artwork.small + ")"}}></div>
</Link>
</div>
);
@ -65,7 +65,7 @@ var SearchForm = React.createClass({
});
return;
}
request.post('/search').send({url:url}).end(function(res) {
request.post("/search").send({url: url}).end(function(res) {
that.setState({
submitting: false
});
@ -115,10 +115,10 @@ module.exports = React.createClass({
recents: []
};
},
componentDidMount: function () {
if (!this.props.recents) {
request.get('/recent').set('Accept', 'application/json').end(function(res) {
request.get("/recent").set("Accept", "application/json").end(function(res) {
this.setState({
recents: res.body.recents
});
@ -142,7 +142,7 @@ module.exports = React.createClass({
<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>

54
views/share.jsx
View file

@ -1,10 +1,10 @@
'use strict';
"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 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({
@ -13,7 +13,7 @@ var MusicItem = React.createClass({
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 className="artwork" style={{backgroundImage: "url(" + this.props.items[0].artwork.small + ")"}}>
</div>
<div className="loading-wrap">
<img src="/images/eq.svg" className="loading" />
@ -28,7 +28,7 @@ var MusicItem = React.createClass({
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="artwork not-found" style={{backgroundImage: "url(" + this.props.items[0].artwork.small + ")"}}></div>
<div className="no-match">
No Match
</div>
@ -41,13 +41,13 @@ var MusicItem = React.createClass({
} 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>
<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 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 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">
@ -68,7 +68,7 @@ module.exports = React.createClass({
mixins: [ Router.State ],
getInitialState: function () {
if (this.props.shares && this.props.shares[0].id == this.getParams().id) {
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,
@ -92,13 +92,13 @@ module.exports = React.createClass({
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(res) {
var shares = res.body.shares;
@ -108,11 +108,11 @@ module.exports = React.createClass({
complete = false;
}
});
if (complete) {
clearInterval(this.state.interval);
}
if (shares.length) {
this.setState({
name: shares[0].name,
@ -122,8 +122,8 @@ module.exports = React.createClass({
});
}
}.bind(this));
}.bind(this)
}.bind(this);
if (!this.state.shares.length) {
getShares();
}
@ -133,23 +133,23 @@ module.exports = React.createClass({
if (!complete) {
getShares();
}
}.bind(this), 2000);
}, 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 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);
var newWindow = window.open(dialog.href, "Share Music", "scrollbars=yes, width=" + w + ", height=" + h + ", top=" + top + ", left=" + left);
if (window.focus) {
newWindow.focus();
}