Start adding video and player functions

Create functions to convert between progress bar position and seek
point in seconds. Add a test video to the index.html page.

2 files changed, 52 insertions, 0 deletions

diff --git a/assets/js/sample-editor.js b/assets/js/sample-editor.js
index 10f5a08..7ae2bca 100644
--- a/assets/js/sample-editor.js
+++ b/assets/js/sample-editor.js
@@ -2,6 +2,9 @@ var SampleEditor = SampleEditor || {};
 
 (function($) {
 	SampleEditor = function() {
+		this.player = null;
+		
+		
 		this.initialize = function() {
 			var $clip_line = $('.js-clip-line');
 			
@@ -11,6 +14,48 @@ var SampleEditor = SampleEditor || {};
 				scroll: false,
 				containment: $clip_line.parents('.progress-bar')
 			});
+			
+			$clip_line.on('drag', this.on_clip_drag_stop);
+			
+			
+			this.player = new OP.Player($('#single-video-lets-see-if-we-can-get-this-to-work').get(0));
+		};
+		
+		
+		// percentage_progress
+		//
+		// Get a percentage value from a clip-line that represents its 
+		// position within the progress bar.
+		//
+		this.percentage_progress = function($el) {
+			var container = $el.parents('.progress-bar');
+			var position_in_pixels = $el.css('left');
+			
+			var percentage = (position_in_pixels / container.width()) * 100;
+			
+			return percentage;
+		};
+		
+		
+		// seek_point
+		//
+		// Example:
+		// sample_editor.seek_point({
+		// 	$el: $('.clip-line'),
+		// 	video_length: 586
+		// });
+		//
+		this.seek_point = function(options) {
+			var options = options || {};
+			
+			var progress = this.percentage_progress(options.$el);
+			
+			return (progress * options.video_length) / 100;
+		};
+		
+		
+		this.on_clip_drag_stop = function(e, ui) {
+			
 		};
 		
 		
diff --git a/index.html b/index.html
index 1c24c97..a2106ba 100644
--- a/index.html
+++ b/index.html
@@ -32,11 +32,18 @@
 				</div>
 			</div>
 		</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>
 	
 	
 	<script src="/assets/js/libs/jquery-2.0.3.min.js"></script>
 	<script src="/assets/js/libs/jquery-ui-1.10.3.custom.min.js"></script>
+	<script src='/js/utils.js'></script>
+	<script src='/js/player.js'></script>
 	<script src="/assets/js/sample-editor.js"></script>
 	<script src="/assets/js/app.js"></script>
 </body>