1 /*

     2  The Slider Widget fits right under the video

     3  */

     4 

     5 IriSP.Widgets.Slider = function(player, config) {

     6     IriSP.Widgets.Widget.call(this, player, config);

     7 };

     8 

     9 IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget();

    10 

    11 IriSP.Widgets.Slider.prototype.defaults = {

    12     minimized_height : 4,

    13     maximized_height : 10,

    14     minimize_timeout : 1500 /*  time before minimizing slider after mouseout,

    15                                 set to zero for fixed slider */

    16 };

    17 

    18 IriSP.Widgets.Slider.prototype.template =

    19     '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>';

    20 

    21 IriSP.Widgets.Slider.prototype.draw = function() {

    22     

    23     this.renderTemplate();

    24     

    25     this.$time = this.$.find(".Ldt-Slider-Time");

    26     

    27     this.$slider = this.$.find(".Ldt-Slider");

    28     

    29     var _this = this;

    30     

    31     this.$slider.slider({

    32         range: "min",

    33         value: 0,

    34         min: 0,

    35         max: this.source.getDuration().milliseconds,

    36         slide: function(event, ui) {

    37             _this.media.setCurrentTime(ui.value);

    38             _this.player.trigger("Mediafragment.setHashToTime");

    39         }

    40     });

    41     

    42     this.$handle = this.$slider.find('.ui-slider-handle');

    43     

    44     this.onMediaEvent("timeupdate","onTimeupdate");

    45     this.onMdpEvent("Player.MouseOver","onMouseover");

    46     this.onMdpEvent("Player.MouseOut","onMouseout");

    47     

    48     if (this.minimize_timeout) {

    49         this.$slider.css(this.calculateSliderCss(this.minimized_height));

    50         this.$handle.css(this.calculateHandleCss(this.minimized_height));

    51         

    52         this.maximized = false;

    53         this.timeoutId = false;

    54     }

    55     

    56     this.$

    57         .mouseover(function() {

    58             _this.$time.show();

    59             _this.onMouseover();

    60         })

    61         .mouseout(this.functionWrapper("onMouseout"))

    62         .mousemove(function(_e) {

    63             var _x = _e.pageX - _this.$.offset().left,

    64                 _t = new IriSP.Model.Time(_this.media.duration * _x / _this.width);

    65             _this.$time.text(_t.toString()).css("left",_x);

    66         });

    67 };

    68 

    69 IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) {

    70     this.$slider.slider("value",_time);

    71     this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time});

    72 };

    73 

    74 IriSP.Widgets.Slider.prototype.onMouseover = function() {

    75     if (this.minimize_timeout) {

    76         if (this.timeoutId) {

    77             window.clearTimeout(this.timeoutId);

    78             this.timeoutId = false;

    79         }

    80         if (!this.maximized) {

    81            this.animateToHeight(this.maximized_height);

    82            this.maximized = true;

    83         }

    84     }

    85 };

    86 

    87 IriSP.Widgets.Slider.prototype.onMouseout = function() {

    88     this.$time.hide();

    89     if (this.minimize_timeout) {

    90         if (this.timeoutId) {

    91             window.clearTimeout(this.timeoutId);

    92             this.timeoutId = false;

    93         }

    94         var _this = this;

    95         this.timeoutId = window.setTimeout(function() {

    96             if (_this.maximized) {

    97                 _this.animateToHeight(_this.minimized_height);

    98                 _this.maximized = false;

    99             }

   100             _this.timeoutId = false;

   101         }, this.minimize_timeout);

   102     }

   103 };

   104 

   105 IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) {

   106     this.$slider.stop().animate(

   107         this.calculateSliderCss(_height),

   108         500,

   109         function() {

   110             IriSP.jQuery(this).css("overflow","visible");

   111         });

   112     this.$handle.stop().animate(

   113         this.calculateHandleCss(_height),

   114         500,

   115         function() {

   116             IriSP.jQuery(this).css("overflow","visible");

   117         });

   118 };

   119 

   120 IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) {

   121     return {

   122         height: _size + "px",

   123         "margin-top": (this.minimized_height - _size) + "px"

   124     };

   125 };

   126 

   127 IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) {

   128     return {

   129         height: (2 + _size) + "px",

   130         width: (2 + _size) + "px",

   131         "margin-left": -Math.ceil(2 + _size / 2) + "px" 

   132     };

   133 };