Backbone-ify code from Kawan's sample.js

* Add attributes to the model
* Add player initialisation code to the Sample item view

4 files changed, 38 insertions, 15 deletions

diff --git a/assets/js/models/sample.js b/assets/js/models/sample.js
index a695f39..79cbace 100644
--- a/assets/js/models/sample.js
+++ b/assets/js/models/sample.js
@@ -1 +1,16 @@
-ClipPlay.Models.Sample = Backbone.Model.extend({});
\ No newline at end of file
+ClipPlay.Models.Sample = Backbone.Model.extend({
+	defaults: {
+		'url': '',
+		'start': '',
+		'stop': '',
+		'duration': '',
+		'key': '',
+		'player': '',
+		'iframe': ''
+	},
+	
+	
+	play: function() {
+		
+	}
+});
\ No newline at end of file
diff --git a/assets/js/views/sample-editor.js b/assets/js/views/sample-editor.js
index 74dc04d..6accd89 100644
--- a/assets/js/views/sample-editor.js
+++ b/assets/js/views/sample-editor.js
@@ -1,17 +1,6 @@
 ClipPlay.Views.SampleEditor = Marionette.CollectionView.extend({
 	itemView: ClipPlay.Views.Sample,
 	
-	initialize: function() {
-		this.initialize_player();
-	},
-	
-	
-	// this will soon be obsolete
-	initialize_player: function() {
-		this.player = new OP.Player($('#single-video-lets-see-if-we-can-get-this-to-work').get(0));
-	},
-	
-	
 	onRender: function() {
 		// Initialize view for adding new samples
 		this.sample_add_view = new ClipPlay.Views.SampleAddView({
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index 9f57c06..e28a964 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -2,10 +2,31 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 	template: '#sample-view-template',
 	
 	onRender: function() {
+		this.initialize_player();
 		this.initialize_clip_drag_handles();
 	},
 	
 	
+	initialize_player: function() {
+		var that = this;
+		$.embedly.oembed(this.model.get('url')).done(function(results){
+			var BASE_IFRAME = "http://cdn.embedly.com/widgets/media.html";
+			var data = results[0];
+			var f= data.html;
+			var src = $(f)[0].src;
+			var schema = data.provider_name.toLowerCase();
+			var iframe_src= BASE_IFRAME +"?schema="+schema+"&type=text%2Fhtml&html="+src;
+			var iframe = $('<iframe/>', {
+				src: iframe_src
+			});
+			$('#video').append(iframe[0]);
+			var player = new OP.Player(iframe[0]);
+			that.model.set('player', player);
+			that.model.set('iframe', iframe);
+		});
+	},
+	
+	
 	initialize_clip_drag_handles: function() {
 		var $clip_line = this.$('.js-clip-line');
 		
diff --git a/index.html b/index.html
index 5a09cef..717dcf8 100644
--- a/index.html
+++ b/index.html
@@ -25,9 +25,7 @@
 		<div id="samples"></div>
 
 
-		<div class="video">
-			<iframe src="http://cdn.embedly.com/widgets/media.html?schema=youtube&type=text%2Fhtml&html=http://www.youtube.com/embed/q3wHLCW4hbg" width="500" height="281" scrolling="no" frameborder="0" allowfullscreen id="single-video-lets-see-if-we-can-get-this-to-work"></iframe>
-		</div>
+		<div id="video"></div>
 	</div>