web/res/metadataplayer/Slider.js
author Raphael Velt <raph.velt@gmail.com>
Thu, 03 May 2012 17:52:07 +0200
changeset 598 d366aa22bd79
child 623 5b7d7ab6baff
permissions -rw-r--r--
New Metadataplayer version
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
598
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
     1
/*
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
     2
 The Slider Widget fits right under the video
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
     3
 */
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
     4
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
     5
IriSP.Widgets.Slider = function(player, config) {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
     6
    IriSP.Widgets.Widget.call(this, player, config);
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
     7
    this.bindPopcorn("timeupdate","onTimeupdate");
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
     8
    this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
     9
    this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    10
};
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    11
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    12
IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget();
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    13
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    14
IriSP.Widgets.Slider.prototype.defaults = {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    15
    minimized_height : 4,
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    16
    maximized_height : 10,
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    17
    minimize_timeout : 1500 // time before minimizing slider after mouseout
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    18
};
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    19
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    20
IriSP.Widgets.Slider.prototype.draw = function() {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    21
    
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    22
    this.$slider = IriSP.jQuery('<div>')
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    23
        .addClass("Ldt-Slider")
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    24
        .css(this.calculateSliderCss(this.minimized_height));
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    25
    
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    26
    this.$.append(this.$slider);
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    27
    
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    28
    var _this = this;
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    29
    
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    30
    this.$slider.slider({
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    31
        range: "min",
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    32
        value: 0,
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    33
        min: 0,
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    34
        max: this.source.getDuration().getSeconds(),
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    35
        slide: function(event, ui) {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    36
            _this.player.popcorn.currentTime(ui.value);
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    37
            _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime");
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    38
        }
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    39
    });
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    40
    
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    41
    this.$handle = this.$slider.find('.ui-slider-handle');
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    42
    
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    43
    this.$handle.css(this.calculateHandleCss(this.minimized_height));
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    44
    
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    45
    this.$
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    46
        .mouseover(this.functionWrapper("onMouseover"))
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    47
        .mouseout(this.functionWrapper("onMouseout"));
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    48
    
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    49
    this.maximized = false;
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    50
    this.timeoutId = false;
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    51
};
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    52
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    53
IriSP.Widgets.Slider.prototype.onTimeupdate = function() {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    54
    var _time = this.player.popcorn.currentTime();
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    55
    this.$slider.slider("value",_time);
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    56
    this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: 1000 * _time});
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    57
}
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    58
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    59
IriSP.Widgets.Slider.prototype.onMouseover = function() {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    60
    if (this.timeoutId) {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    61
        window.clearTimeout(this.timeoutId);
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    62
        this.timeoutId = false;
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    63
    }
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    64
    if (!this.maximized) {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    65
       this.animateToHeight(this.maximized_height);
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    66
       this.maximized = true;
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    67
    }
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    68
}
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    69
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    70
IriSP.Widgets.Slider.prototype.onMouseout = function() {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    71
    if (this.timeoutId) {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    72
        window.clearTimeout(this.timeoutId);
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    73
        this.timeoutId = false;
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    74
    }
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    75
    var _this = this;
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    76
    this.timeoutId = window.setTimeout(function() {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    77
        if (_this.maximized) {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    78
            _this.animateToHeight(_this.minimized_height);
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    79
            _this.maximized = false;
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    80
        }
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    81
        _this.timeoutId = false;
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    82
    }, this.minimize_timeout);
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    83
    
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    84
}
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    85
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    86
IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    87
    this.$slider.stop().animate(
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    88
        this.calculateSliderCss(_height),
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    89
        500,
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    90
        function() {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    91
            IriSP.jQuery(this).css("overflow","visible");
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    92
        });
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    93
    this.$handle.stop().animate(
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    94
        this.calculateHandleCss(_height),
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    95
        500,
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    96
        function() {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    97
            IriSP.jQuery(this).css("overflow","visible");
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    98
        });
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
    99
}
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   100
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   101
IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   102
    return {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   103
        height: _size + "px",
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   104
        "margin-top": (this.minimized_height - _size) + "px"
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   105
    };
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   106
}
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   107
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   108
IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   109
    return {
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   110
        height: (2 + _size) + "px",
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   111
        width: (2 + _size) + "px",
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   112
        "margin-left": -Math.ceil(2 + _size / 2) + "px" 
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   113
    }
d366aa22bd79 New Metadataplayer version
Raphael Velt <raph.velt@gmail.com>
parents:
diff changeset
   114
}