metadataplayer: src/js/widgets/sliderWidget.js@9b86d3c52211 (annotated)

Mercurial Mercurial > metadataplayer / annotate

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

src/js/widgets/sliderWidget.js

author	hamidouk
	Mon, 14 Nov 2011 10:47:44 +0100
branch	slider-port
changeset 230	9b86d3c52211
parent 229	808768eb5930
child 238	6008172a0592
child 259	7d748154f0b5
permissions	-rw-r--r--

added a handler to seek the slider.

226 d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	1	IriSP.SliderWidget = function(Popcorn, config, Serializer) {
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	2	IriSP.Widget.call(this, Popcorn, config, Serializer);
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	3	};
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	4
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	5	IriSP.SliderWidget.prototype = new IriSP.Widget();
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	6
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	7	IriSP.SliderWidget.prototype.draw = function() {
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	8	var self = this;
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	9
229 808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	10	this.selector.append("<div class='sliderBackground'></div>");
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	11	this.sliderBackground = this.selector.children(".sliderBackground");
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	12
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	13	this.selector.append("<div class='sliderForeground' style='position: absolute; top: 0%; width: 0%;'></div>");
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	14	this.sliderForeground = this.selector.children(".sliderForeground");
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	15
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	16	this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	17	this.positionMarker = this.selector.children(".positionMarker");
226 d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	18
230 9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	19	this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); });
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	20
226 d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	21	this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	22	};
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	23
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	24	/* updates the slider as time passes */
d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	25	IriSP.SliderWidget.prototype.sliderUpdater = function() {
229 808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	26	var time = this._Popcorn.currentTime();
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	27
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	28	var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	29	var percent = ((time / duration) * 100).toFixed(2);
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	30	this.sliderForeground.css("width", percent + "%");
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	31	this.positionMarker.css("left", percent + "%");
808768eb5930 rewriting the slider-port to not use jquery ui slider. hamidouk parents: 226 diff changeset	32
230 9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	33	};
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	34
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	35	IriSP.SliderWidget.prototype.clickHandler = function(event) {
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	36	/* this piece of code is a little bit convoluted - here's how it works :
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	37	we want to handle clicks on the progress bar and convert those to seeks in the media.
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	38	However, jquery only gives us a global position, and we want a number of pixels relative
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	39	to our container div, so we get the parent position, and compute an offset to this position,
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	40	and finally compute the progress ratio in the media.
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	41	Finally we multiply this ratio with the duration to get the correct time
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	42	*/
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	43
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	44	var parentOffset = this.sliderBackground.parent().offset();
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	45	var width = this.sliderBackground.width();
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	46	var relX = event.pageX - parentOffset.left;
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	47
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	48	var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	49	var newTime = ((relX / width) * duration).toFixed(2);
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	50
9b86d3c52211 added a handler to seek the slider. hamidouk parents: 229 diff changeset	51	this._Popcorn.currentTime(newTime);
226 d1f0e604bd06 separated the slider from the playerWidget. hamidouk parents: diff changeset	52	};

metadataplayer