Start implementing external track sources (#13)

- Search SoundCloud for tracks

browser/controllers/RoomCtrl.js

@@ -37,6 +37,7 @@ module.exports = Ractive.extend({
         activeDJ: null,
         votes: {yes: 0, no: 0},
         newMessages: false,
+        searchResults: [],
 
         messageToHTML: PrivateChat.prototype.messageToHTML
     },
@@ -255,10 +256,9 @@ module.exports = Ractive.extend({
         },
 
         previewTrack: function(e) {
-            var i = e.index.i;
-            var track = this.data.tracks[i];
+            var keypath = e.keypath + '.previewing';
+            var track = e.context;
             if (!track) return;
-            var keypath = 'tracks.' + i + '.previewing';
             var previewing = this.get(keypath);
             this.toggle(keypath);
             if (previewing) {
@@ -294,6 +294,22 @@ module.exports = Ractive.extend({
 
         newMessageBlur: function() {
             this.set('newMessageFocused', false);
+        },
+
+        trackSearch: function() {
+            if (this.get('searchTerm')) {
+                this.search();
+            } else {
+                this.set('searching', false);
+            }
+        },
+
+        trackSearchType: function() {
+            // debounce
+            if (this.inputTimer) {
+                clearTimeout(this.inputTimer);
+            }
+            this.inputTimer = setTimeout(this.search.bind(this), 500);
         }
     },
 
@@ -443,5 +459,16 @@ module.exports = Ractive.extend({
 
     stopPreviewing: function() {
         this.groove.player.previewTrack(null);
+    },
+
+    search: function() {
+        clearTimeout(this.inputTimer);
+        var query = this.get('searchTerm');
+        this.groove.searchTracks(query, this._gotSearchResults.bind(this));
+    },
+
+    _gotSearchResults: function(tracks) {
+        this.set('searching', true);
+        this.set('searchResults', tracks);
     }
 });

browser/groove.js

@@ -40,6 +40,7 @@ function Groove() {
     this.db = new GrooveDB();
     this.getPersistTracks();
     this.player = new Player();
+    this.trackSources = require('./tracksources');
 
     // get stats about incoming peer connection from DJ
     this.statsTimestamp = 0;
@@ -584,6 +585,10 @@ Groove.prototype.ensureTrackFile = function(track, cb) {
         cb();
     } else if (track.file) {
         cb();
+    } else if (track.audioUrl) {
+        // We'll share the audio url to the peers
+        // rather than download and stream it to them.
+        cb();
     } else {
         this.db.getTrackFile(track, function(file) {
             track.file = file;
@@ -738,4 +743,8 @@ Groove.prototype.getCurrentTrackTime = function() {
         (new Date().getTime() - this.trackStartTime) : -1;
 };
 
+Groove.prototype.searchTracks = function(query, cb) {
+    this.trackSources.search(query, cb);
+};
+
 module.exports = Groove;

browser/player.js

@@ -61,7 +61,10 @@ function Player_play(startTime) {
     var track = this.previewingTrack || this.playingTrack;
     if (!track) return;
 
-    if (track.stream || track.file) {
+    if (track.audioUrl) {
+        Player_playURL.call(this, track.audioUrl, startTime);
+
+    } else if (track.stream || track.file) {
         var url = URL.createObjectURL(track.stream || track.file);
         Player_playURL.call(this, url, startTime);
 
@@ -75,6 +78,7 @@ function Player_play(startTime) {
 
 function Player_stop() {
     this.audio.pause();
+    this.audio.src = null;
     if (this.mediaSource) {
         // We can't disconnect the media source because it have might remote
         // media stream destinations. So disconnect the gainNode.

browser/templates/room.html

@@ -43,7 +43,27 @@
             <form class="dropzone track-upload {{currentlyDragging ? 'active' : ''}}" id="upload-zone" action="" on-dropfiles="queueFiles" on-dragenter="setCurrentlyDragging:yes" on-dragend="setCurrentlyDragging:no">
                 drop music
             </form>
-
+
+            <div class="track-search">
+                <input type="search" value="{{searchTerm}}" placeholder="Search tracks" on-search="trackSearch" on-input="trackSearchType">
+            </div>
+
+            {{#searching}}
+            <div class="track-searching">
+                <ul class="songs">
+                    {{#searchResults}}
+                    <li>
+                        <div class="add-icon" title="Add track to your playlist" on-click="addTrack"></div>
+                        <div class="preview {{.previewing ? 'previewing' : ''}}" title="Preview track" on-click="previewTrack"></div>
+                        <div class="track">{{title}}</div>
+                        <div class="artist">{{artist}}</div>
+                    </li>
+                    {{/searchResults}}
+                </ul>
+            </div>
+            {{/searching}}
+
+            {{^searching}}
             <div class="sidebar-btn {{isActiveDJ ? 'half' : ''}}" on-click="becomeDJ">{{joinText}}</div>
             {{#isActiveDJ}}
             <div class="sidebar-btn half" on-click="skipSong">skip song</div>
@@ -89,6 +109,7 @@
                 {{/tracks}}
                 </ul>
             </div>
+            {{/searching}}
         </div>
     </div>
 </div>

browser/tracksources.js

@@ -0,0 +1,44 @@
+var soundCloudClientId = 'ef44c57ca5d4d98885bf7fb38da7492a';
+
+var SoundCloud = {};
+
+SoundCloud.search = function(query, cb) {
+    // SoundCloud
+    var xhr = new XMLHttpRequest();
+    var url = 'https://api.soundcloud.com/tracks?client_id=' +
+        soundCloudClientId + '&filter=streamable&format=json&q=' +
+        encodeURIComponent(query);
+    xhr.open('GET', url, true);
+    xhr.onerror = function(e) {
+        console.error('SoundCloud fetch error', e);
+    };
+
+    xhr.onload = function() {
+        var resp;
+        try {
+            resp = JSON.parse(xhr.responseText);
+            if (resp.errors) {
+                console.error('SoundCloud errors', resp.errors);
+            }
+        } catch(e) {
+            console.error('SoundCloud JSON error', e);
+        }
+
+        if (!resp) cb([]);
+        else cb(resp.filter(function(track) {
+            return track.streamable;
+        }).map(function(track) {
+            return {
+                title: track.title,
+                artist: track.user.username,
+                artistUrl: track.user.permalink_url,
+                audioUrl: track.stream_url + '?client_id=' +
+                    soundCloudClientId,
+                url: track.permalink_url
+            };
+        }));
+    };
+    xhr.send(null);
+};
+
+module.exports = SoundCloud;

style/main.less

@@ -500,6 +500,57 @@ a {
     border-bottom: 1px solid @gray;
     z-index: 1;
 
+    .track-search {
+        position: relative;
+        height: 30px;
+        border-top: 1px solid @gray;
+
+        [type=search] {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            margin: auto;
+            width: 80%;
+            height: 26px;
+            /*
+            border: 1px solid @gray;
+            */
+            border: none;
+            text-align: center;
+        }
+    }
+
+    .track-searching li {
+        z-index: 2;
+        background-color: white;
+
+        .add-icon {
+            position: absolute;
+            left: 8px;
+            top: 8px;
+            height: 24px;
+            width: 24px;
+            font-size: 20px;
+            font-weight: bold;
+            border-radius: 100%;
+            line-height: 20px;
+            text-align: center;
+            vertical-align: bottom;
+            color: darken(white, 15%);
+            cursor: pointer;
+
+            &:after {
+                content: '+';
+            }
+
+            &:hover {
+                color: red;
+            }
+        }
+    }
+
     .sidebar-btn {
         text-align: center;
         padding: 10px 0px;
@@ -581,7 +632,7 @@ a {
 
     .songs-container {
         position: absolute;
-        top: 137px;
+        top: 167px;
         left: 0px;
         right: 0px;
         bottom: 0px;