diff -r 3ab36f402b0c -r 198c2b79f5e1 src/widgets/Slice.js --- a/src/widgets/Slice.js Thu Jan 02 16:40:25 2014 +0100 +++ b/src/widgets/Slice.js Thu Jan 02 16:49:20 2014 +0100 @@ -10,72 +10,90 @@ IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget(); IriSP.Widgets.Slice.prototype.defaults = { - show_arrow: false + start_visible : false, + live_update : true, + /* Shall the bounds change each time + the Annotation Widget sends an update (true) + or only when "show" is triggered (false) ? + - true is to be recommended when the widget is permanently displayed. + */ + override_bounds : true + /* Can the Annotation Widget bounds be overriden ? */ }; -IriSP.Widgets.Slice.prototype.template = - '
' - + '{{#show_arrow}}
{{/show_arrow}}'; - IriSP.Widgets.Slice.prototype.draw = function() { - this.renderTemplate(); - - this.$slider = this.$.find(".Ldt-Slice"); + this.$slider = IriSP.jQuery('
') + .addClass("Ldt-Slice") - if (this.show_arrow) { - this.insertSubwidget(this.$.find(".Ldt-Slice-Arrow"), { type: "Arrow" },"arrow"); - } + this.$.append(this.$slider); this.min = 0; - this.max = this.media.duration.valueOf(); + this.max = this.source.getDuration().valueOf(); var _this = this, _currentTime; this.$slider.slider({ range: true, - values: [0, this.max], + values: [0, 0], min: 0, max: this.max, change: function(event, ui) { - if (_this.arrow) { - _this.arrow.moveToTime((ui.values[0]+ui.values[1])/2); - } - if (_this.onBoundsChanged) { - _this.onBoundsChanged(ui.values[0],ui.values[1]); - } + _this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{ + widget:_this.type, + time:Math.floor((ui.values[0]+ui.values[1])/2) + }); + _this.player.popcorn.trigger("IriSP.Slice.boundsChanged",[ui.values[0], ui.values[1]]); }, start: function() { _this.sliding = true; - if (!_this.media.getPaused()) { - _this.media.pause(); + if (!_this.player.popcorn.media.paused) { + _this.player.popcorn.pause(); } - _currentTime = _this.media.getCurrentTime(); + _currentTime = _this.player.popcorn.currentTime(); }, slide: function(event, ui) { - _this.media.setCurrentTime(ui.value); + if (!_this.override_bounds && (ui.value < _this.min || ui.value > _this.max)) { + return false; + } + _this.player.popcorn.currentTime(ui.value / 1000); }, stop: function() { _this.sliding = false; - _this.media.setCurrentTime(_currentTime); + _this.player.popcorn.currentTime(_currentTime); } }); - this.$slider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle"); this.$slider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle"); - - this.getWidgetAnnotations().forEach(function(_a) { - _a.on("enter", function() { - _this.$slider.slider("values",[_a.begin, _a.end]); - }); - }); + if (this.start_visible) { + this.show(); + } else { + this.hide(); + } + this.bindPopcorn("IriSP.Slice.show","show"); + this.bindPopcorn("IriSP.Slice.hide","hide"); + this.bindPopcorn("IriSP.Annotation.boundsChanged","storeBounds"); + this.player.popcorn.trigger("IriSP.Annotation.getBounds"); }; IriSP.Widgets.Slice.prototype.show = function() { this.$slider.show(); -}; + this.player.popcorn.trigger("IriSP.Arrow.takeover",this.type); + this.$slider.slider("values", [this.min, this.max]); +} IriSP.Widgets.Slice.prototype.hide = function() { this.$slider.hide(); -}; + this.player.popcorn.trigger("IriSP.Arrow.release"); +} + +IriSP.Widgets.Slice.prototype.storeBounds = function(_values) { + if (!this.player.popcorn.media.paused && (this.min != _values[0] || this.max != _values[1])) { + this.min = _values[0]; + this.max = _values[1]; + if (this.live_update && !this.sliding) { + this.$slider.slider("values", [this.min, this.max]); + } + } +} \ No newline at end of file