Load matches after page load

package.json

@@ -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",

public/images/grid.svg

@@ -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>

public/stylesheets/style.css

@@ -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;

routes/search.js

@@ -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.json({error:{message:"You need to submit a url."}});
-    res.redirect('/');
   } 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);
-                  res.json(item);
-                }, 1000)
               });
             });
           }
         }, 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");

routes/share.js

@@ -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";
     });
     

views/home.jsx

@@ -47,8 +47,7 @@ var SearchForm = React.createClass({
       return;
     }
     request.post('/search').send({url:url}).end(function(res) {
-      console.log(res)
+      that.transitionTo("share", res.body);
-      that.transitionTo("/" + res.body.service + "/" + res.body.type + "/" + res.body.id);
     });
   },
 
@@ -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" />

views/share.jsx

@@ -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={"service" + (this.props.inc == 0 ? " source-service" : "")}>
-            <div className="matching-from hidden-xs"></div>
+            <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 || "",
+      name: "",
-      artist: this.props.shares[0].artist.name || "",
+      artist: "",
-      shares: this.props.shares || []
+      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) {