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.draw = function() {

    19     

    20     this.$slider = IriSP.jQuery('<div>')

    21         .addClass("Ldt-Slider");

    22     

    23     this.$.append(this.$slider);

    24     

    25     var _this = this;

    26     

    27     this.$slider.slider({

    28         range: "min",

    29         value: 0,

    30         min: 0,

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

    32         slide: function(event, ui) {

    33             _this.player.popcorn.currentTime(ui.value / 1000);

    34             _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime");

    35         }

    36     });

    37     

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

    39     

    40     this.bindPopcorn("timeupdate","onTimeupdate");

    41     this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");

    42     this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");

    43     

    44     if (this.minimize_timeout) {

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

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

    47         

    48         this.$

    49             .mouseover(this.functionWrapper("onMouseover"))

    50             .mouseout(this.functionWrapper("onMouseout"));

    51         

    52         this.maximized = false;

    53         this.timeoutId = false;

    54     }

    55 };

    56 

    57 IriSP.Widgets.Slider.prototype.onTimeupdate = function() {

    58     var _time = 1000 * this.player.popcorn.currentTime();

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

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

    61 }

    62 

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

    64     if (this.minimize_timeout) {

    65         if (this.timeoutId) {

    66             window.clearTimeout(this.timeoutId);

    67             this.timeoutId = false;

    68         }

    69         if (!this.maximized) {

    70            this.animateToHeight(this.maximized_height);

    71            this.maximized = true;

    72         }

    73     }

    74 }

    75 

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

    77     if (this.minimize_timeout) {

    78         if (this.timeoutId) {

    79             window.clearTimeout(this.timeoutId);

    80             this.timeoutId = false;

    81         }

    82         var _this = this;

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

    84             if (_this.maximized) {

    85                 _this.animateToHeight(_this.minimized_height);

    86                 _this.maximized = false;

    87             }

    88             _this.timeoutId = false;

    89         }, this.minimize_timeout);

    90     }

    91 }

    92 

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

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

    95         this.calculateSliderCss(_height),

    96         500,

    97         function() {

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

    99         });

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

   101         this.calculateHandleCss(_height),

   102         500,

   103         function() {

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

   105         });

   106 }

   107 

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

   109     return {

   110         height: _size + "px",

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

   112     };

   113 }

   114 

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

   116     return {

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

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

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

   120     }

   121 }