comparison johndyer-mediaelement-13fa20a/src/js/mep-feature-progress.js @ 0:032bc65ebafc

added core components

+(function($) {
+	// progress/loaded bar
+	MediaElementPlayer.prototype.buildprogress = function(player, controls, layers, media) {
+
+		$('<div class="mejs-time-rail">'+
+			'<span class="mejs-time-total">'+
+				'<span class="mejs-time-loaded"></span>'+
+				'<span class="mejs-time-current"></span>'+
+				'<span class="mejs-time-handle"></span>'+
+				'<span class="mejs-time-float">' + 
+					'<span class="mejs-time-float-current">00:00</span>' + 
+					'<span class="mejs-time-float-corner"></span>' + 
+				'</span>'+
+			'</span>'+
+		'</div>')
+			.appendTo(controls);
+
+		var 
+			t = this,
+			total = controls.find('.mejs-time-total'),
+			loaded  = controls.find('.mejs-time-loaded'),
+			current  = controls.find('.mejs-time-current'),
+			handle  = controls.find('.mejs-time-handle'),
+			timefloat  = controls.find('.mejs-time-float'),
+			timefloatcurrent  = controls.find('.mejs-time-float-current'),
+			handleMouseMove = function (e) {
+				// mouse position relative to the object
+				var x = e.pageX,
+					offset = total.offset(),
+					width = total.outerWidth(),
+					percentage = 0,
+					newTime = 0;
+
+
+				if (x > offset.left && x <= width + offset.left && media.duration) {
+					percentage = ((x - offset.left) / width);
+					newTime = (percentage <= 0.02) ? 0 : percentage * media.duration;
+
+					// seek to where the mouse is
+					if (mouseIsDown) {
+						media.setCurrentTime(newTime);
+					}
+
+					// position floating time box
+					var pos = x - offset.left;
+					timefloat.css('left', pos);
+					timefloatcurrent.html( mejs.Utility.secondsToTimeCode(newTime) );
+				}
+			},
+			mouseIsDown = false,
+			mouseIsOver = false;
+
+		// handle clicks
+		//controls.find('.mejs-time-rail').delegate('span', 'click', handleMouseMove);
+		total
+			.bind('mousedown', function (e) {
+				mouseIsDown = true;
+				handleMouseMove(e);
+				return false;
+			});
+
+		controls.find('.mejs-time-rail')
+			.bind('mouseenter', function(e) {
+				mouseIsOver = true;
+			})
+			.bind('mouseleave',function(e) {
+				mouseIsOver = false;
+			});
+
+		$(document)
+			.bind('mouseup', function (e) {
+				mouseIsDown = false;
+				//handleMouseMove(e);
+			})
+			.bind('mousemove', function (e) {
+				if (mouseIsDown || mouseIsOver) {
+					handleMouseMove(e);
+				}
+			});
+
+		// loading
+		media.addEventListener('progress', function (e) {
+			player.setProgressRail(e);
+			player.setCurrentRail(e);
+		}, false);
+
+		// current time
+		media.addEventListener('timeupdate', function(e) {
+			player.setProgressRail(e);
+			player.setCurrentRail(e);
+		}, false);
+		
+		
+		// store for later use
+		t.loaded = loaded;
+		t.total = total;
+		t.current = current;
+		t.handle = handle;
+	}
+	MediaElementPlayer.prototype.setProgressRail = function(e) {
+
+		var
+			t = this,
+			target = (e != undefined) ? e.target : t.media,
+			percent = null;			
+
+		// newest HTML5 spec has buffered array (FF4, Webkit)
+		if (target && target.buffered && target.buffered.length > 0 && target.buffered.end && target.duration) {
+			// TODO: account for a real array with multiple values (only Firefox 4 has this so far) 
+			percent = target.buffered.end(0) / target.duration;
+		} 
+		// Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
+		// to be anything other than 0. If the byte count is available we use this instead.
+		// Browsers that support the else if do not seem to have the bufferedBytes value and
+		// should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
+		else if (target && target.bytesTotal != undefined && target.bytesTotal > 0 && target.bufferedBytes != undefined) {
+			percent = target.bufferedBytes / target.bytesTotal;
+		}
+		// Firefox 3 with an Ogg file seems to go this way
+		else if (e && e.lengthComputable && e.total != 0) {
+			percent = e.loaded/e.total;
+		}
+
+		// finally update the progress bar
+		if (percent !== null) {
+			percent = Math.min(1, Math.max(0, percent));
+			// update loaded bar
+			if (t.loaded && t.total) {
+				t.loaded.width(t.total.width() * percent);
+			}
+		}
+	}
+	MediaElementPlayer.prototype.setCurrentRail = function() {
+
+		var t = this;
+	
+		if (t.media.currentTime != undefined && t.media.duration) {
+
+			// update bar and handle
+			if (t.total && t.handle) {
+				var 
+					newWidth = t.total.width() * t.media.currentTime / t.media.duration,
+					handlePos = newWidth - (t.handle.outerWidth(true) / 2);
+
+				t.current.width(newWidth);
+				t.handle.css('left', handlePos);
+			}
+		}
+
+	}	
+
+})(mejs.$);