Apigee integration, A-B side

app.js

@@ -31,6 +31,22 @@ sdigital.configure({
 });
 var tracks = new sdigital.Tracks();
 
+// Usergrid
+
+var OAuth2 = require('oauth').OAuth2;
+
+var apigUrl = 'http://api.usergrid.com/' + process.env.APIG_APP + '/';
+var apig = new OAuth2(process.env.APIG_ID, process.env.APIG_SECRET, apigUrl, 'token', 'token');
+
+var apigToken;
+
+apig.getOAuthAccessToken('', {
+	grant_type: 'client_credentials'
+}, function(err, access_token) {
+
+	apigToken = access_token;
+
+});
 
 // Configure express
 
@@ -42,10 +58,12 @@ app.configure(function() {
   app.set('view engine', 'jade');
 
   app.use(express.bodyParser());
+  app.use(express.cookieParser());
   app.use(express.methodOverride());
-  app.use(app.router);
 
-  // app.use(express.session({ secret: process.env.SESSION_SECRET || 'secret123' }));
+  app.use(express.session({secret: process.env.SESSION_SECRET || 'secret123'}));
+
+  app.use(app.router);
 
   // Stylus
   app.use(stylus.middleware({
@@ -116,13 +134,72 @@ var index = function index(req, res) {
 
 };
 
+var saveMixtape = function(req, res, model) {
+
+	request.post(apigUrl + 'mixtapes?' + qs.stringify({
+		access_token: req.session.access_token
+	}), {
+		body: JSON.stringify(model),
+		headers: {
+			'content-type': 'application/json'
+		}
+	}, function(err, r, data) {
+
+		console.log(data);
+
+		res.json(true);
+
+	});
+
+};
+
 app.get('/', index);
 
 app.get('/search', index);
 app.get('/publish', index);
 app.get('/player', index);
 app.get('/mix/:id', index);
 
+app.post('/login', function(req, res) {
+
+	request.get(apigUrl + 'auth/facebook?' + qs.stringify({
+		fb_access_token: req.body.accessToken || null
+	}), function(err, r, data) {
+
+		data = JSON.parse(data);
+
+		req.session.access_token = data.access_token;
+		req.session.user_id = data.user.uuid;
+
+		var url = apigUrl + 'users/' + req.session.user_id + '?' + qs.stringify({
+			access_token: req.session.access_token
+		});
+		console.log(url);
+
+		request.put(url, {
+			body: JSON.stringify({
+				activated: true
+			}),
+			headers: {
+				'content-type': 'application/json'
+			}
+		}, function(err, r, data) {
+
+			data = JSON.parse(data);
+			console.log(data);
+
+			if (req.body.mixtape) {
+				saveMixtape(req, res, req.body.mixtape);
+			} else {
+				res.json(true);
+			}
+
+		});
+
+	});
+
+});
+
 app.get('/play/:id', function play(req, res) {
 
 	tracks.getPreview({trackId: req.params.id}, function(err, data) {
@@ -163,11 +240,11 @@ app.get('/searchResults/:q?', function search(req, res) {
 
 			// Nice duration
 			var duration = track.duration;
-			var seconds = String(duration % 60);
-			while (seconds.length < 2) {
-				seconds += '0'
-			}
-			duration = Math.round(duration / 60) + ':' + seconds
+			// var seconds = String(duration % 60);
+			// while (seconds.length < 2) {
+			//	seconds += '0'
+			// }
+			// duration = Math.round(duration / 60) + ':' + seconds
 
 			return {
 				id: track.id,
@@ -177,6 +254,8 @@ app.get('/searchResults/:q?', function search(req, res) {
 				url: track.url,
 				image: track.release.image || null
 			};
+		}).filter(function(track) {
+			return track.duration < 1800
 		});
 
 		cache.search[query] = data;

package.json

@@ -6,7 +6,6 @@
 
   "dependencies": {
     "express":   "*",
-    "faceplate": "*",
     "redis": "*",
     "underscore": "*",
     "jade": "*",
@@ -19,7 +18,9 @@
     "socket.io": "*",
     "7digital-api": "*",
     "async": "*",
-    "querystring": "*"
+    "querystring": "*",
+    "oauth": "*",
+    "restler": "*"
   },
 
   "engines": {

public/js/app.js

@@ -54,7 +54,10 @@ var Application = Backbone.Router.extend({
 		this.currentView = null;
 
 		this.publishView = new Publish();
-		this.editorView = new Editor();
+		this.editorView = new Editor({model: new MixedTape({
+				playlist: []
+			})
+		});
 		this.searchView = new Search();
 		this.playerView = new Player({model: new MixedTape({
 				to: 'to',

public/js/models/mixedtape.js

@@ -1,8 +1,22 @@
 
 var MixedTape = Backbone.Model.extend({
 
+	defaults: {
+		title: ''
+	},
+
 	initialize: function() {
+
 		this.set('playlist', new PlayerTracks(this.get('playlist')));
+
+	},
+
+	toJSON: function() {
+
+		var json = _.clone(this.attributes);
+		json.playlist = this.get('playlist').toJSON();
+
+		return json;
 	}
 
 });

public/js/views/editor.js

@@ -7,36 +7,56 @@ var Editor = Backbone.View.extend({
 
 	events: {
 		'click .search': 'routeSearch',
-		'click .publish': 'publish'
+		'click .publish': 'publish',
+		'change input': 'updateModel'
 	},
 
-	model: new MixedTape(),
 
-	collection: new MixtapeTracks(),
+	model: new MixedTape(),
 
 	initialize: function() {
 
 		_.bindAll(this);
 
+		this.collection = this.model.get('playlist');
 		this.collection.bind('add', this.add, this);
-		this.collection.bind('change', this.render, this);
 
-		this.$list = this.$el.find('.playlist');
+		this.model.bind('change', this.updateView, this);
+
+		this.$lists = [
+			this.$('.playlistA'),
+			this.$('.playlistB')
+		];
+
+	},
+
+	updateModel: function() {
+
+		var val = this.$('input').val();
+		this.model.set('title', val);
+
+	},
+
+	updateView: function() {
+
+		this.$('input').val(this.model.get('title'));
 
 	},
 
 	render: function() {
 
-		this.$list.html('');
+		this.$lists[0].html('');
+		this.$lists[1].html('');
 
 		var self = this;
+		var side = -1;
 
 		this.collection.each(function(track) {
 
 			var view = new TrackEntry({model: track});
 			view.render();
 
-			self.$list.append(view.$el);
+			self.$lists[track.get('side')].append(view.$el);
 
 		});
 
@@ -45,30 +65,61 @@ var Editor = Backbone.View.extend({
 
 	add: function(track) {
 
-		this.render()
+		var duration = 0, side = 0, sides = [0, 0];
+
+		this.collection.reset(this.collection.filter(function(track) {
+
+			sides[side] = duration;
+
+			duration += Number(track.get('duration'));
+
+			if (duration > 1800) {
+				duration = Number(track.get('duration'));
+				side += 1;
+			}
+			if (side > 1) {
+				return null;
+			}
+
+			track.set('side', side, {silent: true});
+
+			return true;
+
+		}, this), {silent: true});
+
+		this.model.set('sides', sides, {silent: true});
+
+		this.render();
 
 	},
 
 	routeSearch: function(evt) {
 
+		if (!this.activated) {
+			this.activated = true;
+			$('.page-header').animate({height: 0, opacity: 0});
+		}
+
+
 		App.navigate('search', {trigger: true});
 
 	},
 
 	publish: function() {
 
+		var model = this.model;
+
 		var login = function(response) {
 
 			if (response.status === 'connected') {
 				var uid = response.authResponse.userID;
 				var accessToken = response.authResponse.accessToken;
 
-				App.user = {
-					uid: uid,
-					accessToken: accessToken
-				};
+				$.post('/login', {accessToken: accessToken, mixtape: model.toJSON()}, function(data) {
+
+					console.log('Saved');
 
-				console.log('PUBLISH!');
+				});
 
 				App.navigate('publish', {trigger: true});
 

public/js/views/trackentry.js

@@ -11,9 +11,9 @@ var TrackEntry = Backbone.View.extend({
 	tagName: 'li',
 
 	template: _.template(
-		'<div class="pull-left">' + 
-		'<button class="btn play"><i class="icon-play"></i></button>' + 
-		'<button class="btn loading"><i class="icon-refresh"></i></button>' + 
+		'<div class="pull-left">' +
+		'<button class="btn play"><i class="icon-play"></i></button>' +
+		'<button class="btn loading"><i class="icon-refresh"></i></button>' +
 		'<button class="btn pause"><i class="icon-pause"></i></button>' +
 		'</div>' +
 		'<div class="pull-left"><strong><%= title %></strong><%= artist %></div><div style="clear: both"></div><small class="duration"><%= duration %></small>'), // load jQuery template
@@ -56,7 +56,7 @@ var TrackEntry = Backbone.View.extend({
 
 		evt.stopImmediatePropagation();
 
-		if (this.collection == App.editorView.collection) {
+		if (this.collection == App.editorView.model.get('playlist')) {
 			return;
 		}
 

views/index.jade

@@ -8,27 +8,29 @@
 				.span12
 					input(type='text', placeholder='Name your Mixtape …').span12
 					hr
-					ul.playlist
+					h6 A
+					ul.playlist.playlistA
+					h6 B
+					ul.playlist.playlistB
 					hr
 					.row
 						.span12
 							.pull-right
 								button.search.btn
-									i.icon-search 
+									i.icon-search
 									|  Search for Tracks
-								button.publish.btn 
+								button.publish.btn
 									i.icon-share
 									|  Share
 							div(style='clear:both')
 
 			.row#search
 				.span12
-					h3
-						div.pull-right
-							button.btn.small.back Back
+					h4
+						button.pull-right.btn.back Back
 						| Find your track
 					hr
-					input(type='search', placeholder='Song title or artist …').span12
+					input(type='search', placeholder='Type a song title or artist and press Enter …').span12
 					ul.playlist