default keys, listener on key change

3 files changed, 27 insertions, 14 deletions

diff --git a/assets/js/app.js b/assets/js/app.js
index cee86e0..bf8f375 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -4,14 +4,16 @@ ClipPlay.App = new Marionette.Application();
 
 ClipPlay.App.addInitializer(function(options) {
 	var samples_collection = new ClipPlay.Collections.Samples();
-    window.SAMPLES = samples_collection;
 	var sample_editor_view = new ClipPlay.Views.SampleEditor({
 		collection: samples_collection
 	});
 	sample_editor_view.render();
 	$('#samples').append(sample_editor_view.$el);
 
+
     //just to have something loaded for debugging
+    ClipPlay.Config = {};
+    ClipPlay.Config['key_defaults'] = ['a','s','d','f','g','h','j','k','l'];
     samples_collection.add({url:"https://vimeo.com/18150336"});
 });
 
diff --git a/assets/js/models/sample.js b/assets/js/models/sample.js
index 5483f01..5179a7c 100644
--- a/assets/js/models/sample.js
+++ b/assets/js/models/sample.js
@@ -1,15 +1,20 @@
 ClipPlay.Models.Sample = Backbone.Model.extend({
 	defaults: {
 		'url': '',
-		'start': '',
-		'stop': '',
+		'start': '3',
+		'stop': '4',
 		'duration': '',
 		'key': '',
 		'player': '',
 		'iframe': '',
         'timeout' : ''
 	},
-
+    initialize: function() {
+        var a = ClipPlay.Config['key_defaults'].shift();
+        if(a){
+          this.set('key', a);
+        }
+    },
 
 	play: function() {
         console.log('playing');
@@ -19,7 +24,7 @@ ClipPlay.Models.Sample = Backbone.Model.extend({
         this.get('player').seekTo(this.get('start'));
         this.get('player').play();
         var that = this;
-        var length = this.get('stop') - this.get('start');
+        var length = Math.abs(this.get('stop') - this.get('start'));
         console.log(length);
         this.set('timeout',setTimeout(function(){
           that.get('player').pause();
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index 6555464..c57c987 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -1,14 +1,19 @@
 ClipPlay.Views.Sample = Marionette.ItemView.extend({
 	template: '#sample-view-template',
 	events: {
-		'blur .js-keyboard-key': 'on_keyboard_bind'
+		'blur .js-keyboard-key': 'on_keyboard_change'
 	},
 
 	onRender: function() {
 		this.initialize_player();
 		this.initialize_clip_lines();
+        this.$('.js-keyboard-key').val(this.model.get('key'));
 	},
 
+    initialize: function(){
+        this.listenTo(this.model, 'change:key', this.key_bind);
+        this.key_bind();
+    },
 
 	initialize_player: function() {
 		var that = this;
@@ -48,18 +53,19 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 		});
 	},
 
-    on_keyboard_bind: function(){
+    on_keyboard_change: function(){
       var keyval = this.$('.js-keyboard-key').val();
       if (keyval != this.model.get('key')){
-        if(this.model.get('key') !=''){
-            Mousetrap.unbind(this.model.get('key'));
-        }
 	    this.model.set('key',keyval);
-        var that = this;
-        Mousetrap.bind(this.model.get('key'), function(){
-          that.model.play();
-        });
         console.log('changed key to ' + keyval);
       }
+    },
+
+    key_bind: function(){
+      Mousetrap.unbind(this.model.get('key'));
+      var that = this;
+      Mousetrap.bind(this.model.get('key'), function(){
+        that.model.play();
+      });
     }
 });