diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Slider.js --- a/src/widgets/Slider.js Thu Aug 30 14:45:23 2012 +0200 +++ b/src/widgets/Slider.js Thu Jan 02 16:40:25 2014 +0100 @@ -10,17 +10,21 @@ IriSP.Widgets.Slider.prototype.defaults = { minimized_height : 4, - maximized_height : 10, + maximized_height : 4, minimize_timeout : 1500 /* time before minimizing slider after mouseout, set to zero for fixed slider */ }; +IriSP.Widgets.Slider.prototype.template = + '
00:00
'; + IriSP.Widgets.Slider.prototype.draw = function() { - this.$slider = IriSP.jQuery('
') - .addClass("Ldt-Slider"); + this.renderTemplate(); - this.$.append(this.$slider); + this.$time = this.$.find(".Ldt-Slider-Time"); + + this.$slider = this.$.find(".Ldt-Slider"); var _this = this; @@ -30,35 +34,42 @@ min: 0, max: this.source.getDuration().milliseconds, slide: function(event, ui) { - _this.player.popcorn.currentTime(ui.value / 1000); - _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime"); + _this.media.setCurrentTime(ui.value); + _this.player.trigger("Mediafragment.setHashToTime"); } }); this.$handle = this.$slider.find('.ui-slider-handle'); - this.bindPopcorn("timeupdate","onTimeupdate"); - this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover"); - this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout"); + this.onMediaEvent("timeupdate","onTimeupdate"); + this.onMdpEvent("Player.MouseOver","onMouseover"); + this.onMdpEvent("Player.MouseOut","onMouseout"); if (this.minimize_timeout) { this.$slider.css(this.calculateSliderCss(this.minimized_height)); this.$handle.css(this.calculateHandleCss(this.minimized_height)); - this.$ - .mouseover(this.functionWrapper("onMouseover")) - .mouseout(this.functionWrapper("onMouseout")); - this.maximized = false; this.timeoutId = false; } + + this.$ + .mouseover(function() { + _this.$time.show(); + _this.onMouseover(); + }) + .mouseout(this.functionWrapper("onMouseout")) + .mousemove(function(_e) { + var _x = _e.pageX - _this.$.offset().left, + _t = new IriSP.Model.Time(_this.media.duration * _x / _this.width); + _this.$time.text(_t.toString()).css("left",_x); + }); }; -IriSP.Widgets.Slider.prototype.onTimeupdate = function() { - var _time = 1000 * this.player.popcorn.currentTime(); +IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) { this.$slider.slider("value",_time); - this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time}); -} + this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time}); +}; IriSP.Widgets.Slider.prototype.onMouseover = function() { if (this.minimize_timeout) { @@ -71,9 +82,10 @@ this.maximized = true; } } -} +}; IriSP.Widgets.Slider.prototype.onMouseout = function() { + this.$time.hide(); if (this.minimize_timeout) { if (this.timeoutId) { window.clearTimeout(this.timeoutId); @@ -88,7 +100,7 @@ _this.timeoutId = false; }, this.minimize_timeout); } -} +}; IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) { this.$slider.stop().animate( @@ -103,19 +115,19 @@ function() { IriSP.jQuery(this).css("overflow","visible"); }); -} +}; IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) { return { height: _size + "px", "margin-top": (this.minimized_height - _size) + "px" }; -} +}; IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) { return { height: (2 + _size) + "px", width: (2 + _size) + "px", "margin-left": -Math.ceil(2 + _size / 2) + "px" - } -} \ No newline at end of file + }; +}; \ No newline at end of file