Skip to content

Commit

Permalink
queue ordering
Browse files Browse the repository at this point in the history
  • Loading branch information
@comster
comster committed Aug 2, 2012
1 parent aac7330 commit 35d2ec5
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 38 deletions.
10 changes: 0 additions & 10 deletions apps/jukebox/web/houseChat.js
View file
Expand Up @@ -194,7 +194,6 @@
"submit": "submit"
},
submit: function(el) {
console.log(this.model)
this.model.set({name: this.$el.find('input[name="name"]').val()}, {wait: true});

return false;
Expand Down Expand Up @@ -275,7 +274,6 @@
"click li": "selectLi"
},
selectLi: function(el) {
console.log(el);
var room = this.collection.get($(el.target).attr('data-id'));
$(el.target).parent().attr('selected', true);
$(el.target).parent().siblings().removeAttr('selected');
Expand Down Expand Up @@ -328,8 +326,6 @@
chat.colors.push(userColor); // reuse our colors
var sty = '<style>.'+this.model.get('name')+' { color: '+userColor+'; }</style>';
this.$el.html(sty + this.model.get('name'));
console.log(this.model.attributes);
console.log(this.model.get('avatar'));
var $avatar = $('<img src="/jukebox/assets/img/icons/library.png" />');
if(this.model.has('avatar')) {
$avatar.attr('src', '/api/files/'+this.model.get('avatar'));
Expand Down Expand Up @@ -366,11 +362,9 @@
var docs, users;

if(this.model.has('messages')) {
console.log(this.model.get('messages'));
docs = this.model.get('messages');
}
if(this.model.has('users')) {
console.log(this.model.get('users'));
users = this.model.get('users');
}
this.messageCollection = new chat.MessageCollection(docs, {roomId: this.model.get('id')});
Expand Down Expand Up @@ -521,16 +515,13 @@
window.chatSocket = socket;

socket.on('song', function (filename) {
//console.log('socket song '+filename)
window.mediaPlayer.loadSong(filename)
});
socket.on('loadSong', function (song) {
//console.log('socket song '+song.filename)
window.mediaPlayer.preloadSong(song)
});

socket.on('songqPlay', function (songq) {
//console.log('socket song '+songq.song.filename)
window.mediaPlayer.loadSong('/api/files/'+songq.song.filename, songq.song)

// insert chat msg that song is playing
Expand Down Expand Up @@ -573,7 +564,6 @@
this.roomsFindListView = new chat.RoomListView({collection: this.collection});
this.roomNewFormView = new chat.RoomNewFormView({collection: this.collection});
this.collection.load(function(){
console.log(self.collection.first());
self.trigger('room', self.collection.first());
});
this.roomsFindListView.on('select', function(room){
Expand Down
5 changes: 3 additions & 2 deletions apps/jukebox/web/index.css
View file
Expand Up @@ -198,13 +198,14 @@ ul.queue li div {
width: 100%;
position: relative;
}
ul.queue li button {
ul.queue li .actions {
position: absolute;
right: 0px;
top: 0px;
visibility: hidden;
text-align: right;
}
ul.queue li:hover button {
ul.queue li:hover .actions {
visibility: visible;
}
button.skip {
Expand Down
171 changes: 149 additions & 22 deletions apps/jukebox/web/jukebox.js
View file
Expand Up @@ -894,18 +894,18 @@
var self = this;
this.reset();

this.filter.sort = 'rank';
this.dataFilter.sort = 'rank';

var options = {data: this.filter};
var options = {data: this.dataFilter};
options.add = true;

if(callback) options.success = callback;
this.fetch(options);
}, comparator: function(a,b) {
return a.get('rank') < b.get('rank');
}, comparator: function(a) {
return a.get('rank');
},
filter: function(obj) {
this.filter = obj;
addFilter: function(obj) {
this.dataFilter = obj;
}
});

Expand All @@ -919,23 +919,45 @@
this.setElement(this.$el);
return this;
},
sort: function() {
var self = this;
var prevRank = 0;
var lis = this.$el.find('li');
lis.each(function(i,e){
var $e = $(e);
var r = parseInt($e.attr('data-rank'), 10);
if(i == 0) {
prevRank = r;
} else {
if(r < prevRank) {
$(lis[i-1]).before(e);
self.sort();
}
prevRank = r;
}
});
this.collection.each(function(m,i,c){
m.getView().render();
});
},
initialize: function(options) {
this.$ul = $('<ul class="songs"></ul>');
this.$skip = $('<button class="skip">☣</button>');
var self = this;
if(!this.collection) {
this.collection = new SongqCollection();
this.collection.list = this;
}
this.room_id = options.roomId;
this.collection.on('reset', function() {
self.$ul.html('');
self.render();
});
this.collection.on('add', function(doc, col) {
var $li = $('<li></li>');
$li.attr('data-rank', doc.get('rank'));
var view = doc.getView();
$li.append(view.render().el);
$li.attr('data-id', doc.get('id'));
$li.attr('data-rank', doc.get('rank'));

if(self.$ul.children().length === 0) {
self.$ul.append($li);
Expand All @@ -957,8 +979,34 @@
return false;
});
});
this.collection.filter({room_id: options.roomId});
this.collection.addFilter({room_id: options.roomId});
this.collection.load();

var insertOrUpdateSongQ = function(songq) {
var model = self.collection.get(songq.id);
if(!model) {
var model = new SongqModel(songq);
self.collection.add(model);
} else {
var view = model.getView();
model.set(songq, {silent:true});
view.render();
self.sort();
}
}
chatSocket.on('songq', function(songq) {
if(_.isArray(songq)) {
for(var i in songq) {
insertOrUpdateSongQ(songq[i]);
}
} else {
if(songq.hasOwnProperty('deleted_id')) {
self.collection.remove(songq.deleted_id);
} else {
insertOrUpdateSongQ(songq);
}
}
});
},
events: {
"click li": "selectLi",
Expand Down Expand Up @@ -1001,11 +1049,20 @@
tagName: 'span',
className: 'songq',
render: function() {
this.$el.html('<span class="dj" title="'+this.model.get('dj').name+'"></span><span class="title">'+this.model.get('song').title+'</span> - <span class="artist">'+this.model.get('song').artist+'</span><button class="remove" title="Remove from queue spot '+this.model.get('rank')+'">x</button>');
this.$el.html('<span class="dj" title="'+this.model.get('dj').name+'"></span><span class="title">'+this.model.get('song').title+'</span> - <span class="artist">'+this.model.get('song').artist+'</span>');
this.$actions = $('<div class="actions"></div>');
this.$actions.append('<button class="upAll" title="Move to top">▲</button>');
this.$actions.append('<button class="upOne" title="Move up one spot">△</button>');
this.$actions.append('<button class="downOne" title="Move down one spot">▽</button>');
this.$actions.append('<button class="downAll" title="Move to bottom">▼</button>');
this.$actions.append('<button class="remove" title="Remove from queue spot '+this.model.get('rank')+'">x</button>');
this.$el.append(this.$actions);
this.$el.attr('title', this.model.get('song').ss);
this.$el.attr('data-id', this.model.get('id'));
this.$el.find('.dj').append(this.userAvatar.render().el);
this.setElement(this.$el);
this.$el.attr('data-rank', this.model.get('rank'));
this.$el.parent().attr('data-rank', this.model.get('rank'));
return this;
},
initialize: function() {
Expand All @@ -1015,7 +1072,77 @@
},
events: {
"click .remove": "unqueueSong"
//, "click .play": "playSong"
, "click .upAll": "queueToTop"
, "click .downAll": "queueToBottom"
, "click .upOne": "queueUpOne"
, "click .downOne": "queueDownOne"
},
queueToTop: function() {
var self = this;
self.model.collection.sort({silent: true});
var topRank = parseInt(self.model.collection.at(0).get('rank'),10);
var topModel = self.model.collection.at(0);
topModel.save({rank: topRank-1}, {wait: true})
.done(function(s, typeStr, respStr) {
});

var s = self.model.save({rank: topRank}, {wait: true})
.done(function(s, typeStr, respStr) {
self.render();
self.model.collection.list.sort();
});
},
queueToBottom: function() {
var self = this;
self.model.collection.sort({silent: true});
var bottomRank = this.model.collection.last().get('rank') + 1;
var s = this.model.save({rank: bottomRank}, {wait: true})
.done(function(s, typeStr, respStr) {
self.render();
self.model.collection.list.sort();
});
},
queueUpOne: function() {
var self = this;
self.model.collection.sort({silent: true});
var r = self.model.get('rank');
var higherRank = r - 1;
var sibId = this.$el.parents('li').prev().find('.songq').attr('data-id');
var swapModel = self.model.collection.get(sibId);
console.log(swapModel);
var sm = swapModel.save({rank:r}, {wait: true})
.done(function(s, typeStr, respStr) {
self.render();
self.model.collection.list.sort();
});
var s = self.model.save({rank: higherRank}, {wait: true})
.done(function(s, typeStr, respStr) {
self.render();
self.model.collection.list.sort();
});
},
queueDownOne: function() {
var self = this;
self.model.collection.sort({silent: true});
var r = self.model.get('rank');
var lowerRank = r + 1;
console.log(self.model.collection)
console.log({rank: lowerRank})
var sibId = this.$el.parents('li').next().find('.songq').attr('data-id');
console.log(this.$el.parents('li'))
console.log(this.$el.parents('li').next())
var swapModel = self.model.collection.get(sibId);
console.log(swapModel);
var sm = swapModel.save({rank:r}, {wait: true})
.done(function(s, typeStr, respStr) {
self.render();
self.model.collection.list.sort();
});
var s = self.model.save({rank: lowerRank}, {wait: true})
.done(function(s, typeStr, respStr) {
self.render();
self.model.collection.list.sort();
});
},
unqueueSong: function() {
this.model.destroy();
Expand Down Expand Up @@ -1050,18 +1177,18 @@
}, load: function(callback) {
var self = this;
this.reset();
this.filter.limit = 15;
this.filter.sort = 'pAt-';
var options = {data: this.filter};
this.dataFilter.limit = 15;
this.dataFilter.sort = 'pAt-';
var options = {data: this.dataFilter};
options.add = true;

if(callback) options.success = callback;
this.fetch(options);
}, comparator: function(a,b) {
return a.get('pAt') < b.get('pAt');
},
filter: function(obj) {
this.filter = obj;
addFilter: function(obj) {
this.dataFilter = obj;
}
});

Expand Down Expand Up @@ -1107,7 +1234,7 @@
return false;
});
});
this.collection.filter({room_id: options.roomId});
this.collection.addFilter({room_id: options.roomId});
this.collection.load();
},
events: {
Expand Down Expand Up @@ -1298,16 +1425,16 @@
var self = this;
}, load: function(callback) {
var self = this;
this.filter.sort = 'at-';
var options = {data: this.filter, add: true};
this.dataFilter.sort = 'at-';
var options = {data: this.dataFilter, add: true};
if(callback) options.success = callback;
this.reset();
this.fetch(options);
}, comparator: function(a,b) {
return a.get('at') > b.get('at');
},
filter: function(obj) {
this.filter = obj;
addFilter: function(obj) {
this.dataFilter = obj;
}
});

Expand All @@ -1327,7 +1454,7 @@
if(!this.collection) {
this.collection = new SongRatingCollection();
if(options.song_id) {
this.collection.filter({song_id:options.song_id});
this.collection.addFilter({song_id:options.song_id});
}
}
this.collection.on('add', function(doc, col) {
Expand Down

0 comments on commit 35d2ec5

Please sign in to comment.