New dark style.

assets.js

@@ -17,4 +17,4 @@ module.exports = {
     '/css/introjs.css',
     '/css/main.css'
   ]
-};
+}

config.js

@@ -1,6 +1,8 @@
 module.exports = {
   app: {
-    port: process.env.SOUNDTRACK_APP_PORT || 13000
+      safe: process.env.SOUNDTRACK_APP_SAFE || false
+    , host: process.env.SOUNDTRACK_APP_HOST || 'soundtrack.io'
+    , port: process.env.SOUNDTRACK_APP_PORT || 13000
   },
   database: {
       name: process.env.SOUNDTRACK_DB_NAME || 'soundtrack'
@@ -12,5 +14,13 @@ module.exports = {
   connection: {
       clientTimeout: 2 * 60 * 1000
     , checkInterval: 30 * 1000
+  },
+  lastfm: {
+      key: process.env.SOUNDTRACK_LASTFM_KEY       || 'key here'
+    , secret: process.env.SOUNDTRACK_LASTFM_SECRET || 'secret here'
+  },
+  soundcloud: {
+      id: process.env.SOUNDTRACK_SOUNDCLOUD_ID         || 'id here'
+    , secret: process.env.SOUNDTRACK_SOUNDCLOUD_SECRET || 'secret here'
   }
 }

controllers/artists.js

@@ -1,4 +1,5 @@
-var rest = require('restler');
+var rest = require('restler')
+  , _ = require('underscore');
 
 module.exports = {
   list: function(req, res, next) {
@@ -13,10 +14,23 @@ module.exports = {
       if (!artist) { return next(); }
 
       Track.find({ _artist: artist._id }).exec(function(err, tracks) {
-        res.render('artist', {
-            artist: artist
-          , tracks: tracks
+
+        Play.aggregate([
+          { $match: { _track: { $in: tracks.map(function(x) { return x._id; }) } } },
+          { $group: { _id: '$_track', count: { $sum: 1 } } },
+          { $sort: { 'count': -1 } }
+        ], function(err, trackScores) {
+
+          res.render('artist', {
+              artist: artist
+            , tracks: tracks.map(function(track) {
+                track.plays = _.find( trackScores , function(x) { return x._id.toString() == track._id.toString() } ).count;
+                return track;
+              })
+          });
+
         });
+
       });
     });
   }

controllers/auth.js

@@ -5,6 +5,7 @@ module.exports = {
     crypto.randomBytes(32, function(ex, buf){
       var authData = buf.toString('hex');
       var token = {token: authData, user: req.user, time: (new Date()).getTime()};
+      console.log('has token: ' + token);
       req.app.socketAuthTokens.push(token);
       res.send({authData: authData});
     });

controllers/tracks.js

@@ -18,6 +18,7 @@ module.exports = {
     });
   },
   view: function(req, res, next) {
+    // TODO: use artist in the lookup
     Track.findOne({ $or: [
         { _id: req.param('trackID') }
       , { slug: req.param('trackSlug') }

public/css/introjs.css

@@ -77,15 +77,15 @@
 }
 
 .introjs-arrow {
-  border: 5px solid white;
+  border: 5px solid rgb(44,44,44);
   content:'';
   position: absolute;
 }
 .introjs-arrow.top {
   top: -10px;
   border-top-color:transparent;
   border-right-color:transparent;
-  border-bottom-color:white;
+  border-bottom-color:rgb(44,44,44);
   border-left-color:transparent;
 }
 .introjs-arrow.right {
@@ -94,11 +94,11 @@
   border-top-color:transparent;
   border-right-color:transparent;
   border-bottom-color:transparent;
-  border-left-color:white;
+  border-left-color:rgb(44,44,44);
 }
 .introjs-arrow.bottom {
   bottom: -10px;
-  border-top-color:white;
+  border-top-color:rgb(44,44,44);
   border-right-color:transparent;
   border-bottom-color:transparent;
   border-left-color:transparent;
@@ -107,15 +107,15 @@
   left: -10px;
   top: 10px;
   border-top-color:transparent;
-  border-right-color:white;
+  border-right-color:rgb(44,44,44);
   border-bottom-color:transparent;
   border-left-color:transparent;
 }
 
 .introjs-tooltip {
   position: absolute;
   padding: 10px;
-  background-color: white;
+  background-color: rgb(44,44,44);
   min-width: 200px;
   max-width: 300px;
   border-radius: 3px;

public/css/main.css

@@ -1,16 +1,138 @@
 body {
-  padding-top: 60px;
+  padding-top: 41px;
   padding-bottom: 40px;
+  background: url('/img/binding_dark.png') rgb(22,22,22);
+  color: rgb(208,208,208);
+}
+textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
+  background: rgb(33,33,33);
+  border-radius: 0;
+  border: 0;
+  color: rgb(208,208,208);
+}
+.nav-list {
+  border: 1px solid rgb(33,33,33);
+  padding: 0;
+}
+.nav-list>li {
+  border-top: 1px solid rgb(33,33,33);
+  border-bottom: 1px solid black;
+}
+.nav-list>li:hover {
+  border-bottom: 1px solid rgb(22,22,22);
+}
+.nav-list>li>a {
+  text-shadow: none;
+  padding: 3px 15px 3px 22px;
+}
+.nav-list>li:hover {
+  background: rgb(33,33,33);
+}
+.module {
+  background: rgb(22,22,22);
+  padding-top: 19px;
+}
+.container.module {
+  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 7px 0px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 7px 0px;
+  box-shadow: rgba(0, 0, 0, 0.8) 0 1px 7px 0px;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.row-fluid [class*="span"].module-left {
+  margin: 0;
+  padding: 3px;
+  border-right: 1px solid rgb(33,33,33);
+  border-left: 1px solid rgb(22,22,22);
+}
+.row-fluid [class*="span"].module-center {
+  margin: 0;
+  padding: 3px;
+  border-right: 1px solid rgb(33,33,33);
+  border-left: 1px solid rgb(22,22,22);
+}
+.row-fluid [class*="span"].module-right {
+  margin: 0;
+  padding: 3px;
+  border-right: 1px solid rgb(33,33,33);
+  border-left: 1px solid rgb(22,22,22);
+}
+.modal {
+  background: rgb(33,33,33);
+}
+.modal-header, .modal-body {
+  border-bottom: 1px solid rgb(11,11,11);
+}
+.modal-body, .modal-footer {
+  border-top: 1px solid rgb(44,44,44);
+}
+.modal-footer {
+  background: rgb(22,22,22);
+  box-shadow: none;
+}
+.dropdown-menu {
+  color: rgb(208,208,208);
+  background-color: rgb(11,11,11);
+}
+.well {
+  padding: 12px;
+}
+.row-fluid [class*="span"].unpadded {
+  padding: 0;
+  margin: 0;
+  width: 541px;
+  margin: 0 12px;
+}
+.row-fluid [class*="span"].padded-left {
+  padding-left: 12px;
+  width: 302px;
+}
+.row-fluid [class*="span"].padded-right {
+  padding-right: 12px;
+  margin-left: 0;
+  width: 302px;
+}
+.stage {
+  border-bottom: 1px solid rgb(22,22,22);
+}
+footer {
+  font-size: 0.9em;
+  -webkit-box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow:    0px -1px 10px rgba(0, 0, 0, 0.75);
+  box-shadow:         0px -1px 10px rgba(0, 0, 0, 0.75);
+  border-top: 1px solid rgb(44,44,44);
+  padding: 24px;
+  background: url('/img/txture.png') rgb(22,22,22);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  margin: -5px;
+}
+.navbar a.brand {
+  padding-left: 12px;
+  margin-left: 0;
+  /* width: 258px; /* remove to align the navbar controls with left column */
+}
+.navbar a.brand img {
+  max-height: 1em;
+  padding-right: 0.5em;
+  margin-bottom: -0.2em;
+  vertical-align: top;
+}
+.content-well {
+  margin: 0 12px 12px;
 }
 
 #chat-form .input-block-level {
-  width: 492px;
+  width: 464px;
 }
 
 @media (max-width: 1199px) {
   #chat-form .input-block-level {
     width: 382px;
   }
+  .span6.unpadded {
+    width: 460px;
+  }
 }
 
 @media (max-width: 979px) {
@@ -52,28 +174,29 @@ body {
   height: 1.5em;
   font-size: 1.5em;
 }
-#track-artist
+#track-artist {
 
+}
 #search-results li {
   cursor: pointer;
 }
-#search-results li:hover {
-  background: #ccc;
-}
 #search-form .input-block-level {
-  width: 230px;
+  width: 227px;
 }
 #messages, #playlist, #userlist {
-  height: 230px;
+  height: 262px;
   overflow-y: scroll;
   overflow-x: hidden;
 }
+#messages {
+  padding-bottom: 0.2em;
+}
 #playlist {
   height: 338px;
   clear: both;
 }
 #userlist {
-  height: 500px;
+  height: 508px;
 }
 #user-playlists-dropdown {
   max-height: 300px;
@@ -97,15 +220,15 @@ body {
   clear: both;
 }
 
-.message abbr.timestamp {
+.message abbr.timestamp, abbr.track-length {
   font-size: 0.75em;
 }
 .message strong[data-role=author] {
   cursor: pointer;
 }
 
 .highlight {
-  background: #ffffd5;
+  background: rgb(33,33,33);
 }
 
 .user-avatar-small, .avatar-small {
@@ -139,6 +262,7 @@ body {
 .playlist-controls {
   float:left;
   padding-right: 5px;
+  padding-left: 5px;
 }
 .active .playlist-controls {
   visibility: hidden;
@@ -177,7 +301,7 @@ body {
   text-align: center;
   font-weight: bold;
   display: block;
-  text-shadow: 1px 1px 1px #aaa;
+  /*text-shadow: 1px 1px 1px #aaa;*/
 }
 
 .fadeout-top {

public/js/app.js

@@ -88,9 +88,9 @@ $(document).ready(function(){
           }
 
           promise.done(function() {
-            ytplayer.cueVideoById( msg.data.sources.youtube[0].id );
-            ytplayer.seekTo( msg.seekTo );
-            ytplayer.playVideo();
+            ytplayer.loadVideoById( msg.data.sources.youtube[0].id , msg.seekTo );
+            //ytplayer.seekTo( msg.seekTo );
+            //ytplayer.playVideo();
           });
 
           if ($('#playlist-list li:first').data('track-id') == msg.data._id) {
@@ -123,7 +123,6 @@ $(document).ready(function(){
           if ( msg.data.message.toLowerCase().indexOf( '@'+ soundtrack.user.username.toLowerCase() ) >= 0 ) {
             soundtrack.notify( 'https://soundtrack.io/favicon.ico', 'New Mention in Chat', msg.data.message );
           }
-
         break;
         case 'ping':
           sockjs.send(JSON.stringify({type: 'pong'}));
@@ -234,6 +233,7 @@ function AppController($scope, $http) {
 
   updatePlaylist();
 }
+Number.prototype.toHHMMSS = String.prototype.toHHMMSS;
 
 function updateUserlist() {
   $.get('/listeners.json', function(data) {
@@ -537,7 +537,7 @@ $(window).on('load', function() {
       console.log(data.data.items);
 
       data.data.items.forEach(function(item) {
-        $('<li data-source="youtube" data-id="'+item.id+'"><img src="'+item.thumbnail.sqDefault+'" class="thumbnail-medium" />' +item.title+' </li>').on('click', function(e) {
+        $('<li data-source="youtube" data-id="'+item.id+'"><img src="'+item.thumbnail.sqDefault+'" class="thumbnail-medium" /><abbr class="pull-right track-length">'+item.duration.toHHMMSS()+'</abbr>' +item.title+' </li>').on('click', function(e) {
           e.preventDefault();
           var self = this;