diff options
| -rw-r--r-- | assets/js/app.js | 6 | ||||
| -rw-r--r-- | assets/js/libs/mousetrap.min.js | 9 | ||||
| -rw-r--r-- | assets/js/models/sample.js | 22 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 22 | ||||
| -rw-r--r-- | index.html | 1 |
5 files changed, 52 insertions, 8 deletions
diff --git a/assets/js/app.js b/assets/js/app.js index 6cba5f3..cee86e0 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -4,12 +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 + samples_collection.add({url:"https://vimeo.com/18150336"}); }); -ClipPlay.App.start();
\ No newline at end of file +ClipPlay.App.start(); diff --git a/assets/js/libs/mousetrap.min.js b/assets/js/libs/mousetrap.min.js new file mode 100644 index 0000000..b3262b7 --- /dev/null +++ b/assets/js/libs/mousetrap.min.js @@ -0,0 +1,9 @@ +/* mousetrap v1.4.5 craig.is/killing/mice */ +(function(J,r,f){function s(a,b,c){a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent("on"+b,c)}function A(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return h[a.which]?h[a.which]:B[a.which]?B[a.which]:String.fromCharCode(a.which).toLowerCase()}function t(a){a=a||{};var b=!1,c;for(c in n)a[c]?b=!0:n[c]=0;b||(u=!1)}function C(a,b,c,d,e,v){var g,k,f=[],h=c.type;if(!l[a])return[];"keyup"==h&&w(a)&&(b=[a]);for(g=0;g<l[a].length;++g)if(k= +l[a][g],!(!d&&k.seq&&n[k.seq]!=k.level||h!=k.action||("keypress"!=h||c.metaKey||c.ctrlKey)&&b.sort().join(",")!==k.modifiers.sort().join(","))){var m=d&&k.seq==d&&k.level==v;(!d&&k.combo==e||m)&&l[a].splice(g,1);f.push(k)}return f}function K(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function x(a,b,c){m.stopCallback(b,b.target||b.srcElement,c)||!1!==a(b,c)||(b.preventDefault&&b.preventDefault(),b.stopPropagation&&b.stopPropagation(), +b.returnValue=!1,b.cancelBubble=!0)}function y(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=A(a);b&&("keyup"==a.type&&z===b?z=!1:m.handleKey(b,K(a),a))}function w(a){return"shift"==a||"ctrl"==a||"alt"==a||"meta"==a}function L(a,b,c,d){function e(b){return function(){u=b;++n[a];clearTimeout(D);D=setTimeout(t,1E3)}}function v(b){x(c,b,a);"keyup"!==d&&(z=A(b));setTimeout(t,10)}for(var g=n[a]=0;g<b.length;++g){var f=g+1===b.length?v:e(d||E(b[g+1]).action);F(b[g],f,d,a,g)}}function E(a,b){var c, +d,e,f=[];c="+"===a?["+"]:a.split("+");for(e=0;e<c.length;++e)d=c[e],G[d]&&(d=G[d]),b&&"keypress"!=b&&H[d]&&(d=H[d],f.push("shift")),w(d)&&f.push(d);c=d;e=b;if(!e){if(!p){p={};for(var g in h)95<g&&112>g||h.hasOwnProperty(g)&&(p[h[g]]=g)}e=p[c]?"keydown":"keypress"}"keypress"==e&&f.length&&(e="keydown");return{key:d,modifiers:f,action:e}}function F(a,b,c,d,e){q[a+":"+c]=b;a=a.replace(/\s+/g," ");var f=a.split(" ");1<f.length?L(a,f,b,c):(c=E(a,c),l[c.key]=l[c.key]||[],C(c.key,c.modifiers,{type:c.action}, +d,a,e),l[c.key][d?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:d,level:e,combo:a}))}var h={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",18:"alt",20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},B={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},H={"~":"`","!":"1", +"@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},G={option:"alt",command:"meta","return":"enter",escape:"esc",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},p,l={},q={},n={},D,z=!1,I=!1,u=!1;for(f=1;20>f;++f)h[111+f]="f"+f;for(f=0;9>=f;++f)h[f+96]=f;s(r,"keypress",y);s(r,"keydown",y);s(r,"keyup",y);var m={bind:function(a,b,c){a=a instanceof Array?a:[a];for(var d=0;d<a.length;++d)F(a[d],b,c);return this}, +unbind:function(a,b){return m.bind(a,function(){},b)},trigger:function(a,b){if(q[a+":"+b])q[a+":"+b]({},a);return this},reset:function(){l={};q={};return this},stopCallback:function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable},handleKey:function(a,b,c){var d=C(a,b,c),e;b={};var f=0,g=!1;for(e=0;e<d.length;++e)d[e].seq&&(f=Math.max(f,d[e].level));for(e=0;e<d.length;++e)d[e].seq?d[e].level==f&&(g=!0, +b[d[e].seq]=1,x(d[e].callback,c,d[e].combo)):g||x(d[e].callback,c,d[e].combo);d="keypress"==c.type&&I;c.type!=u||w(a)||d||t(b);I=g&&"keydown"==c.type}};J.Mousetrap=m;"function"===typeof define&&define.amd&&define(m)})(window,document); diff --git a/assets/js/models/sample.js b/assets/js/models/sample.js index d059f6b..7cb417f 100644 --- a/assets/js/models/sample.js +++ b/assets/js/models/sample.js @@ -6,10 +6,11 @@ ClipPlay.Models.Sample = Backbone.Model.extend({ 'duration': '', 'key': '', 'player': '', - 'iframe': '' + 'iframe': '', + 'timeout' : '' }, - - + + in_minutes_and_seconds: function(seconds) { var minutes = Math.floor(seconds / 60); seconds = Math.floor(seconds); @@ -35,6 +36,17 @@ ClipPlay.Models.Sample = Backbone.Model.extend({ play: function() { - + console.log('playing'); + //play then pause + window.clearTimeout(this.get('timeout')); + this.get('player').pause(); + this.get('player').seekTo(this.get('start')); + this.get('player').play(); + var that = this; + var length = this.get('stop') - this.get('start'); + console.log(length); + this.set('timeout',setTimeout(function(){ + that.get('player').pause(); + }, length*1000 )); } -});
\ No newline at end of file +}); diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js index 2ddc6f9..e1c1448 100644 --- a/assets/js/views/sample.js +++ b/assets/js/views/sample.js @@ -1,5 +1,8 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ template: '#sample-view-template', + events: { + 'blur .js-keyboard-key': 'on_keyboard_bind' + }, onRender: function() { this.initialize_player(); @@ -21,10 +24,10 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ }); $('#video').append(iframe[0]); var player = new OP.Player(iframe[0]); - window.player = player; that.model.set('player', player); that.model.set('iframe', iframe); + window.BOKASHAKA = that.model; player.getDuration(function(value) { that.model.set('duration', value); }); @@ -43,5 +46,20 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ el: this.$('.js-end-position'), model: this.model }); - } + }, + + on_keyboard_bind: 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); + } + } }); @@ -30,6 +30,7 @@ <script src="/assets/js/libs/jquery-2.0.3.min.js"></script> + <script src="/assets/js/libs/mousetrap.min.js"></script> <script src="/assets/js/libs/jquery-ui-1.10.3.custom.min.js"></script> <script src="/assets/js/libs/jquery.embedly-3.1.1.min.js"></script> <script src="/assets/js/libs/underscore-min.js"></script> |