diff options
| -rw-r--r-- | assets/css/sample-editor.css | 17 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 17 | ||||
| -rw-r--r-- | index.html | 6 |
3 files changed, 31 insertions, 9 deletions
diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css index 20ebd90..bb10484 100644 --- a/assets/css/sample-editor.css +++ b/assets/css/sample-editor.css @@ -13,7 +13,7 @@ .progress-bar { border: 1px solid #b9b9b9; - width: 90%; + width: 80%; height: 3em; position: relative; background-color: #ddd; @@ -30,6 +30,14 @@ background-color: #797979; } +.clip-line-start { + left: 55px; +} + +.clip-line-stop { + left: 58px; +} + .drag-handle { width: 2em; height: 1em; @@ -102,3 +110,10 @@ .edit-sample .key-input { margin-top: 0.1em; } + + +/* Thumbnail */ +.thumbnail-image { + height: 3em; + vertical-align: middle; +} diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js index aa07acd..3122641 100644 --- a/assets/js/views/sample.js +++ b/assets/js/views/sample.js @@ -5,19 +5,20 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ 'click .js-remove-sample' : 'remove_sample' }, - onRender: function() { - this.initialize_player(); - this.initialize_clip_lines(); - this.$('.js-keyboard-key').val(this.model.get('key')); - }, - initialize: function(options){ this.collection = options.collection; this.listenTo(this.model, 'change:key', this.key_bind); this.key_bind(); + this.listenTo(this.model, 'change:thumbnail', this.render_thumbnail); }, + onRender: function() { + this.initialize_player(); + this.initialize_clip_lines(); + this.$('.js-keyboard-key').val(this.model.get('key')); + }, + initialize_player: function() { var that = this; $.embedly.oembed(this.model.get('url')).done(function(results){ @@ -77,6 +78,10 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ }); }, + render_thumbnail: function() { + this.$('.js-thumbnail').html('<img src="' + this.model.get('thumbnail') + '" alt="thumbnail" class="thumbnail-image" />'); + }, + on_keyboard_change: function(){ var keyval = this.$('.js-keyboard-key').val(); if (keyval != this.model.get('key')){ @@ -43,8 +43,10 @@ <script type="text/html" id="sample-view-template"> <div class="edit-sample js-edit-sample"> + <div class="thumbnail js-thumbnail"></div> + <div class="progress-bar"> - <div class="clip-line js-clip-line js-start-position"> + <div class="clip-line clip-line-start js-clip-line js-start-position"> <div class="drag-handle start-drag-handle js-drag-handle"> <span class="clip-time js-time"></span> </div> @@ -52,7 +54,7 @@ <div class="selected-bar js-selected-bar"></div> - <div class="clip-line js-clip-line js-end-position"> + <div class="clip-line clip-line-stop js-clip-line js-end-position"> <div class="drag-handle stop-drag-handle js-drag-handle"> <span class="js-time"></span> </div> |