Load matches after page load
This commit is contained in:
parent
a2148dc00a
commit
874c3c162c
7 changed files with 140 additions and 25 deletions
|
|
@ -26,6 +26,7 @@
|
|||
"body-parser": "~1.8.1",
|
||||
"compression": "^1.2.2",
|
||||
"connect-flash": "^0.1.1",
|
||||
"connect-browserify": "^3.2.1",
|
||||
"cookie-parser": "~1.3.3",
|
||||
"crypto-js": "^3.1.2-5",
|
||||
"debug": "~2.0.0",
|
||||
|
|
@ -48,7 +49,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"browserify": "^7.0.0",
|
||||
"connect-browserify": "^3.2.1",
|
||||
"should": "^4.3.0",
|
||||
"mocha": "^2.0.1",
|
||||
"envify": "^3.2.0",
|
||||
|
|
|
|||
56
public/images/grid.svg
Normal file
56
public/images/grid.svg
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<svg width="105" height="105" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg" fill="#fff">
|
||||
<circle cx="12.5" cy="12.5" r="12.5">
|
||||
<animate attributeName="fill-opacity"
|
||||
begin="0s" dur="1s"
|
||||
values="1;.2;1" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
|
||||
<animate attributeName="fill-opacity"
|
||||
begin="100ms" dur="1s"
|
||||
values="1;.2;1" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="52.5" cy="12.5" r="12.5">
|
||||
<animate attributeName="fill-opacity"
|
||||
begin="300ms" dur="1s"
|
||||
values="1;.2;1" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="52.5" cy="52.5" r="12.5">
|
||||
<animate attributeName="fill-opacity"
|
||||
begin="600ms" dur="1s"
|
||||
values="1;.2;1" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="92.5" cy="12.5" r="12.5">
|
||||
<animate attributeName="fill-opacity"
|
||||
begin="800ms" dur="1s"
|
||||
values="1;.2;1" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="92.5" cy="52.5" r="12.5">
|
||||
<animate attributeName="fill-opacity"
|
||||
begin="400ms" dur="1s"
|
||||
values="1;.2;1" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="12.5" cy="92.5" r="12.5">
|
||||
<animate attributeName="fill-opacity"
|
||||
begin="700ms" dur="1s"
|
||||
values="1;.2;1" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="52.5" cy="92.5" r="12.5">
|
||||
<animate attributeName="fill-opacity"
|
||||
begin="500ms" dur="1s"
|
||||
values="1;.2;1" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="92.5" cy="92.5" r="12.5">
|
||||
<animate attributeName="fill-opacity"
|
||||
begin="200ms" dur="1s"
|
||||
values="1;.2;1" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -138,7 +138,13 @@ h3 {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
.not-found {
|
||||
opacity: 0.3;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
left: 33%;
|
||||
width: 33%;
|
||||
}
|
||||
.service-link {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@ module.exports = function(req, res, next) {
|
|||
var searching = false;
|
||||
|
||||
if (!url.host) {
|
||||
req.flash('search-error', 'Paste a music link above to find and share the matches');
|
||||
res.redirect('/');
|
||||
res.json({error:{message:"You need to submit a url."}});
|
||||
} else {
|
||||
var items = {};
|
||||
for (var id in services) {
|
||||
|
|
@ -34,16 +33,14 @@ module.exports = function(req, res, next) {
|
|||
services[id].lookupId(result.id, result.type).then(function(item) {
|
||||
items[id] = item;
|
||||
req.db.matches.save({_id:id + "$$" + result.id, created_at: new Date(), services:items}).then(function() {
|
||||
setTimeout(function() {
|
||||
res.json(item);
|
||||
}, 1000)
|
||||
res.json(item);
|
||||
});
|
||||
});
|
||||
}
|
||||
}, function(error) {
|
||||
if (error.code == "ETIMEDOUT") {
|
||||
error = new Error("Error talking to music service");
|
||||
error.status = "502";
|
||||
error.status = 502;
|
||||
next(error);
|
||||
} else if (!error || !error.status) {
|
||||
error = new Error("An unexpected error happenend");
|
||||
|
|
|
|||
|
|
@ -60,10 +60,6 @@ module.exports = function(req, res, next) {
|
|||
});
|
||||
|
||||
shares.sort(function(a, b) {
|
||||
return !a.id || !b.id;
|
||||
}).sort(function(a, b) {
|
||||
return !a.streamUrl || b.streamUrl;
|
||||
}).sort(function(a, b) {
|
||||
return a.type == "video" && b.type != "video";
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -47,8 +47,7 @@ var SearchForm = React.createClass({
|
|||
return;
|
||||
}
|
||||
request.post('/search').send({url:url}).end(function(res) {
|
||||
console.log(res)
|
||||
that.transitionTo("/" + res.body.service + "/" + res.body.type + "/" + res.body.id);
|
||||
that.transitionTo("share", res.body);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -69,8 +68,16 @@ var SearchForm = React.createClass({
|
|||
module.exports = React.createClass({
|
||||
|
||||
getInitialState: function () {
|
||||
// Use this only on first page load, refresh whenever we navigate back.
|
||||
if (this.props.recents) {
|
||||
var recents = this.props.recents;
|
||||
delete this.props.recents;
|
||||
return {
|
||||
recents: recents
|
||||
};
|
||||
}
|
||||
return {
|
||||
recents: this.props.recents
|
||||
recents: []
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -104,7 +111,7 @@ module.exports = React.createClass({
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Recent recents={this.props.recents} />
|
||||
<Recent recents={this.state.recents} />
|
||||
</div>
|
||||
</div>
|
||||
<Foot page="home" />
|
||||
|
|
|
|||
|
|
@ -9,11 +9,22 @@ var Foot = require('./foot.jsx');
|
|||
var MusicItem = React.createClass({
|
||||
|
||||
render: function() {
|
||||
if (!this.props.item.name) {
|
||||
if (typeof this.props.item.id === "undefined") {
|
||||
return (
|
||||
<div className="col-md-3 col-xs-6">
|
||||
<div className="service">
|
||||
<img src="/images/grid.svg" className="loading" />
|
||||
<img src={this.props.items[0].artwork.small} className="img-rounded album-artwork incomplete" width="100%" />
|
||||
<div className="service-link">
|
||||
<img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (this.props.item.id === null) {
|
||||
return (
|
||||
<div className="col-md-3 col-xs-6">
|
||||
<div className="service">
|
||||
<div className="matching-from hidden-xs"></div>
|
||||
<img src={this.props.items[0].artwork.small} className="img-rounded album-artwork not-found" width="100%" />
|
||||
<div className="service-link">
|
||||
<img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />
|
||||
|
|
@ -24,8 +35,8 @@ var MusicItem = React.createClass({
|
|||
} else {
|
||||
return (
|
||||
<div className="col-md-3 col-xs-6">
|
||||
<div className="service">
|
||||
<div className="matching-from hidden-xs"></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}>
|
||||
<img src={this.props.item.artwork.small} className="img-rounded album-artwork" width="100%" /></a>
|
||||
<div className="service-link">
|
||||
|
|
@ -67,25 +78,67 @@ 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 ? this.props.shares[0].name : "",
|
||||
artist: this.props.shares ? this.props.shares[0].artist.name : "",
|
||||
shares: this.props.shares || []
|
||||
};
|
||||
}
|
||||
return {
|
||||
name: this.props.shares[0].name || "",
|
||||
artist: this.props.shares[0].artist.name || "",
|
||||
shares: this.props.shares || []
|
||||
name: "",
|
||||
artist: "",
|
||||
shares: []
|
||||
};
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
if (this.state.interval) {
|
||||
clearInterval(this.state.interval);
|
||||
}
|
||||
},
|
||||
|
||||
componentDidMount: function () {
|
||||
if (!this.props.shares) {
|
||||
var complete = this.state.shares.length > 0;
|
||||
|
||||
this.state.shares.forEach(function(share) {
|
||||
if (typeof share.id === "undefined") {
|
||||
complete = false;
|
||||
}
|
||||
});
|
||||
|
||||
var getShares = function() {
|
||||
request.get(this.getPathname()).set('Accept', 'application/json').end(function(res) {
|
||||
var shares = res.body.shares;
|
||||
complete = true;
|
||||
shares.forEach(function(share) {
|
||||
if (typeof share.id === "undefined") {
|
||||
complete = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (complete) {
|
||||
clearInterval(this.state.interval);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
name: shares[0].name,
|
||||
artist: shares[0].artist.name,
|
||||
shares: shares
|
||||
});
|
||||
}.bind(this))
|
||||
}.bind(this));
|
||||
}.bind(this)
|
||||
|
||||
if (!this.state.shares.length) {
|
||||
getShares();
|
||||
}
|
||||
|
||||
this.state.interval = setInterval(function() {
|
||||
if (!complete) {
|
||||
getShares();
|
||||
}
|
||||
}.bind(this), 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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue