diff options
| -rw-r--r-- | assets/css/application.css | 17 | ||||
| -rw-r--r-- | assets/js/models/sample.js | 5 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 21 | ||||
| -rw-r--r-- | index.html | 2 |
4 files changed, 33 insertions, 12 deletions
diff --git a/assets/css/application.css b/assets/css/application.css index df74acb..c3dba05 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -19,7 +19,6 @@ header { #samples { margin: 3em 0; - z-index:1; } @@ -116,7 +115,6 @@ header { /* . Buttons . */ .button { - z-index:1; border-width: 1px; border-style: solid; cursor: pointer; @@ -211,8 +209,17 @@ header { width: 100%; height: 100%; position:absolute; + + z-index: -10; } -.sample-media{ - z-index: -1; -} +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + position:absolute; + z-index: -5; + background: url('../images/background.png') repeat; + } diff --git a/assets/js/models/sample.js b/assets/js/models/sample.js index 228454b..c3c395c 100644 --- a/assets/js/models/sample.js +++ b/assets/js/models/sample.js @@ -8,7 +8,8 @@ ClipPlay.Models.Sample = Backbone.Model.extend({ 'player': '', 'iframe': '', 'timeout' : '', - 'thumbnail' : '' + 'thumbnail' : '', + 'playing' : false }, initialize: function() { var a = ClipPlay.Config['key_defaults'].shift(); @@ -44,6 +45,7 @@ ClipPlay.Models.Sample = Backbone.Model.extend({ play: function() { console.log('playing'); //play then pause + this.set('playing',true); window.clearTimeout(this.get('timeout')); this.get('player').pause(); this.get('player').seekTo(this.get('start')); @@ -53,6 +55,7 @@ ClipPlay.Models.Sample = Backbone.Model.extend({ console.log(length); this.set('timeout',setTimeout(function(){ that.get('player').pause(); + that.set('playing',false); }, length*1000 )); } }); diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js index 3122641..6d1f95a 100644 --- a/assets/js/views/sample.js +++ b/assets/js/views/sample.js @@ -7,8 +7,8 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ initialize: function(options){ this.collection = options.collection; - this.listenTo(this.model, 'change:key', this.key_bind); + this.listenTo(this.model, 'change:playing', this.show_clip); this.key_bind(); this.listenTo(this.model, 'change:thumbnail', this.render_thumbnail); }, @@ -32,9 +32,9 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ src: iframe_src, id: 'video-sample-' + that.model.cid }); - var wrapper= document.createElement('div'); - $(wrapper).addClass("responsive-object"); + var wrapper= document.createElement('span'); $(wrapper).append(iframe[0]); + $(wrapper).addClass("responsive-object"); $('#video').append(wrapper); var player = new OP.Player(iframe[0]); that.model.set('player', player); @@ -48,7 +48,6 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ img_resize+=new_height; that.model.set('thumbnail', img_resize); - window.BOKASHAKA = that.model; player.getDuration(function(value) { that.model.set('duration', value); @@ -116,5 +115,17 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ }, 500, function() { Marionette.View.prototype.close.call(that, arguments); }); - } + }, + + show_clip: function(){ + var isPlaying = this.model.get('playing'); + console.log('playing :' + isPlaying); + var $iframe_video = $('#video-sample-' + this.model.cid); + if(isPlaying){ + $iframe_video.css({'z-index':10}); + } + if(!isPlaying){ + $iframe_video.css({'z-index':-10}); + } + } }); @@ -18,7 +18,7 @@ <header> <h1>ClipPlay</h1> </header> - + <div class="overlay"></div> <div role="main"> <div id="add-sample"> <form action="" method="get" class="js-add-sample-form"> |