1 IriSP.Widgets.Sparkline = function(player, config) {

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

     3 };

     4 

     5 IriSP.Widgets.Sparkline.prototype = new IriSP.Widgets.Widget();

     6 

     7 IriSP.Widgets.Sparkline.prototype.defaults = {

     8    lineColor : "#7492b4",

     9    fillColor : "#aeaeb8",

    10    lineWidth : 2,

    11    slice_count : 20,

    12    height : 50,

    13    margin : 5

    14 };

    15 

    16 IriSP.Widgets.Sparkline.prototype.draw = function() {

    17     var _slices = [],

    18         _duration = this.source.getDuration(),

    19         _max = 0,

    20         _list = this.getWidgetAnnotations();

    21     for (var _i = 0; _i < this.slice_count; _i++) {

    22         var _begin = (_i*_duration/this.slice_count),

    23             _end = ((_i+1)*_duration/this.slice_count),

    24             _volume = 0;

    25             _list.forEach(function(_annotation) {

    26                 if (_annotation.begin < _end && _annotation.end >= _begin) {

    27                     var _d = _annotation.getDuration().milliseconds;

    28                     if (!_d) {

    29                         _volume += 1;

    30                     } else {

    31                         _volume += (Math.min(_annotation.end, _end) - Math.max(_annotation.begin, _begin)) / _d;

    32                     }

    33                 }

    34             });

    35             _max = Math.max(_max, _volume);

    36         _slices.push(_volume);

    37     }

    38     if (!_max) {

    39         return;

    40     }

    41     this.paper = new Raphael(this.$[0], this.width, this.height);

    42     var _scale = (this.height - this.margin) / _max,

    43         _width = this.width / this.slice_count,

    44         _this = this,

    45         _y = IriSP._(_slices).map(function(_v) {

    46             return _this.margin + _this.height - (_scale * _v);

    47         }),

    48         _d = IriSP._(_y).reduce(function(_memo, _v, _k) {

    49                return _memo + ( _k

    50                    ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v

    51                    : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v );

    52             },'') + 'L' + this.width + ' ' + _y[_y.length - 1],

    53         _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height;

    54     

    55     this.paper.path(_d2).attr({

    56         "stroke" : "none",

    57         "fill" : this.fillColor

    58     });

    59          

    60     this.paper.path(_d).attr({

    61         "fill" : "none",

    62         "stroke" : this.lineColor,

    63         "stroke-width" : this.lineWidth

    64     });

    65     

    66     this.rectangleProgress = this.paper.rect(0,0,0,this.height)

    67         .attr({

    68             "stroke" : "none",

    69             "fill" : "#808080",

    70             "opacity" : .3

    71         });

    72         

    73     this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2});

    74    

    75     this.$.click(function(_e) {

    76         var _x = _e.pageX - _this.$.offset().left;

    77         _this.media.setCurrentTime(_this.media.duration * _x / _this.width);

    78     });

    79     

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

    81 };

    82 

    83 IriSP.Widgets.Sparkline.prototype.onTimeupdate = function(_time) {

    84     var _x = Math.floor( this.width * _time / this.media.duration);

    85     this.rectangleProgress.attr({

    86         "width" : _x

    87     });

    88     this.ligneProgress.attr({

    89         "path" : "M" + _x + " 0L" + _x + " " + this.height

    90     });

    91 };