# HG changeset patch # User hamidouk # Date 1320942860 -3600 # Node ID 808768eb5930d8703c6e3aeae4416914220ff5d9 # Parent 53d8d95a007900ba68d44e530d66cab3b08ad8dc rewriting the slider-port to not use jquery ui slider. diff -r 53d8d95a0079 -r 808768eb5930 src/css/LdtPlayer.css --- a/src/css/LdtPlayer.css Thu Nov 10 17:25:30 2011 +0100 +++ b/src/css/LdtPlayer.css Thu Nov 10 17:34:20 2011 +0100 @@ -200,3 +200,20 @@ font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; overflow:hidden; } + + .SliderWidget { + + } + /* slider */ + .sliderBackground { + background-color: #B6B8B8; + width: 100%; + padding-top: 5px; + } + + .sliderForeground { + background-color: #747474; + padding-top: 5px; + z-index: 2; + width: 0px; + } diff -r 53d8d95a0079 -r 808768eb5930 src/js/widgets/segmentsWidget.js --- a/src/js/widgets/segmentsWidget.js Thu Nov 10 17:25:30 2011 +0100 +++ b/src/js/widgets/segmentsWidget.js Thu Nov 10 17:34:20 2011 +0100 @@ -18,7 +18,7 @@ var annotations = this._serializer._data.annotations; this.selector.css("overflow", "auto"); // clear the floats - FIXME : to refactor ? - this.selector.append(Mustache.to_html(IriSP.segment_marker_template)); + this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); this.positionMarker = this.selector.children(":first"); diff -r 53d8d95a0079 -r 808768eb5930 src/js/widgets/sliderWidget.js --- a/src/js/widgets/sliderWidget.js Thu Nov 10 17:25:30 2011 +0100 +++ b/src/js/widgets/sliderWidget.js Thu Nov 10 17:34:20 2011 +0100 @@ -7,27 +7,25 @@ IriSP.SliderWidget.prototype.draw = function() { var self = this; - this.selector.slider( { //range: "min", - value: 0, - min: 1, - max: this._serializer.currentMedia().meta["dc:duration"]/1000,//1:54:52.66 = 3600+3240+ - step: 0.1, - slide: function(event, ui) { - self._Popcorn.currentTime(ui.value); - }, - /* change event is similar to slide, but it happens when the slider position is - modified programatically. We use it for unit tests */ - change: function(event, ui) { - self._Popcorn.trigger("test.fixture", ui.value); - } - - }); + this.selector.append("
"); + this.sliderBackground = this.selector.children(".sliderBackground"); + + this.selector.append("
"); + this.sliderForeground = this.selector.children(".sliderForeground"); + + this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); + this.positionMarker = this.selector.children(".positionMarker"); this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); }; /* updates the slider as time passes */ IriSP.SliderWidget.prototype.sliderUpdater = function() { - var currentPosition = this._Popcorn.currentTime(); - this.selector.slider( "value", currentPosition); + var time = this._Popcorn.currentTime(); + + var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; + var percent = ((time / duration) * 100).toFixed(2); + this.sliderForeground.css("width", percent + "%"); + this.positionMarker.css("left", percent + "%"); + }; \ No newline at end of file