Media click adds

public/js/main.js

@@ -73,9 +73,17 @@ var AppRouter = Backbone.Router.extend({
     },
 
     list: function() {
+        var self = this;
         var state = this.viewStates['list'] || {};
         this.viewStates['list'] = state;
-        return new MediaListView(state);
+
+        var view = new MediaListView(state);
+        // it is automatically unbound when we destroy the view
+        view.on('mediaclick', function(media) {
+            self.navigate('/media/' + media.id, {trigger: true});
+        });
+
+        return view;
     },
 
     universe: function () {

public/js/utils.js

@@ -185,3 +185,15 @@ window.utils.StateTracker = function() {
         self.off('deleted');
     };
 };
+
+window.utils.pieceFromMedia = function (media) {
+    /* For pieces created from a Media we want them to still have an unique id
+     * but a 'checksum' that points to the original Media.*/
+    var attrs = _.clone(media.attributes);
+    var piece = new Media.Piece(attrs);
+    piece.set('checksum', attrs['_id']);
+    /* XXX: keep this */
+    piece.unset('_id');
+    return piece;
+};
+

public/js/views/mediaedit.js

@@ -15,6 +15,8 @@ window.EditView = PanelView.extend({
         this.render();
     },
     render: function () {
+        var self = this;
+
         $(this.el).html(template.mediaedit());
 
         var state = this.options['state'] || new utils.StateTracker();
@@ -41,6 +43,15 @@ window.EditView = PanelView.extend({
         });
         this.medialist.on('dragstart', this.clearSearch);
 
+        // automatically unbound when we close this view.
+        this.medialist.on('mediadoubleclick', function(media) {
+            if (!self.editview) {
+                return;
+            }
+            self.editview.addMedia(media);
+        });
+
+
         var resp = state.enterView();
         if (resp.model) {
             if (resp.changed) {

public/js/views/medialist.js

@@ -186,16 +186,22 @@ window.MediaListView  = MasterView.extend({
                     }
                     return model.pretty_duration();
                 }, model);
+
+                this.mediaClick = function (viewmodel) {
+                    self.trigger('mediaclick', viewmodel.model());
+                };
+
+                this.mediaDoubleClick = function (viewmodel) {
+                    self.trigger('mediadoubleclick', viewmodel.model());
+                };
+
             },
 
             allowDrop: ko.observable(allow_drop),
 
             dragHandler: function(item, event, ui){
                 // Instantiate drag element as Media.Piece
-                var attrs = _.clone(item.model().attributes);
-                var piece = new Media.Piece(attrs);
-                piece.set('checksum', attrs['_id']);
-                piece.unset('_id');
+                var piece = utils.pieceFromMedia(item.model());
                 return kb.viewModel(piece)
             },
 
@@ -267,7 +273,11 @@ window.MediaListView  = MasterView.extend({
         };
 
         _.bindAll(this, 'onCollectionChange', 'addDummyRow', 'removeDummyRow', 'destroyView', 'deleteModel', 'save', 'editListName', '_model_change_cb', 'clearChanges', 'hasChanges', '_bindModel', '_unbindModel');
+        _.bindAll(this, 'mediaClick', 'mediaDoubleClick');
+
         this.view_model.collection.subscribe(this.onCollectionChange);
+        this.view_model.on('mediaclick', this.mediaClick);
+        this.view_model.on('mediadoubleclick', this.mediaDoubleClick);
         this._bindModel(model);
 
         ko.applyBindings(this.view_model, el[0]);
@@ -313,10 +323,28 @@ window.MediaListView  = MasterView.extend({
         this.clearChanges();
     },
 
+    mediaClick: function (viewmodel) {
+        this.trigger('mediaclick', viewmodel);
+    },
+
+    mediaDoubleClick: function (viewmodel) {
+        this.trigger('mediadoubleclick', viewmodel);
+    },
+
+    addMedia: function (media) {
+        var piece = utils.pieceFromMedia(media);
+        this.model.get('pieces').add(piece);
+    },
+
     releaseView: function() {
         // Release resources
         this.collection.off("filter");
         this._unbindModel(this.model);
+        this.view_model.off('mediaclick');
+        this.view_model.off('mediadoubleclick');
+        this.off('mediaclick');
+        this.off('mediadoubleclick');
+
         this.search_view.destroy();
         kb.release(this.view_model);
     },

views/templates/medialist.jade

@@ -88,7 +88,8 @@ block content
                 tr(data-bind=inndbind)
                   td.center
                     - if (!is_playlist)
-                      - var target = "attr:{href: '/media/'+checksum().split('-')[0]}";
+                      - var target = "click: $root.mediaClick, event:{ dblclick: $root.mediaDoubleClick }";
+
                     - var thumbnail_target = "attr:{ src: checksum() ?  '" + thumbnail_dir  + "'+checksum().split('-')[0]+'.jpg' : '/pics/generic.jpg' }"
                     a.plain(data-bind=target)
                       img(width="150",height="100",data-bind=thumbnail_target)