1 IriSP.Widgets.Sparkline = function(player, config) { |
1 IriSP.Widgets.Sparkline = function(player, config) { |
2 IriSP.Widgets.Widget.call(this, player, config); |
2 IriSP.Widgets.Widget.call(this, player, config); |
|
3 //this.bindPopcorn("timeupdate", "onTimeupdate"); |
3 }; |
4 }; |
4 |
5 |
5 IriSP.Widgets.Sparkline.prototype = new IriSP.Widgets.Widget(); |
6 IriSP.Widgets.Sparkline.prototype = new IriSP.Widgets.Widget(); |
6 |
7 |
7 IriSP.Widgets.Sparkline.prototype.defaults = { |
8 IriSP.Widgets.Sparkline.prototype.defaults = { |
16 IriSP.Widgets.Sparkline.prototype.draw = function() { |
17 IriSP.Widgets.Sparkline.prototype.draw = function() { |
17 var _slices = [], |
18 var _slices = [], |
18 _duration = this.source.getDuration(), |
19 _duration = this.source.getDuration(), |
19 _max = 0, |
20 _max = 0, |
20 _list = this.getWidgetAnnotations(); |
21 _list = this.getWidgetAnnotations(); |
|
22 |
21 for (var _i = 0; _i < this.slice_count; _i++) { |
23 for (var _i = 0; _i < this.slice_count; _i++) { |
22 var _begin = (_i*_duration/this.slice_count), |
24 var _begin = new IriSP.Model.Time(_i*_duration/this.slice_count), |
23 _end = ((_i+1)*_duration/this.slice_count), |
25 _end = new IriSP.Model.Time((_i+1)*_duration/this.slice_count), |
24 _volume = 0; |
26 _annotations = _list.filter(function(_annotation) { |
25 _list.forEach(function(_annotation) { |
27 return _annotation.begin >= _begin && _annotation.end < _end; |
26 if (_annotation.begin < _end && _annotation.end >= _begin) { |
28 }).length; |
27 var _d = _annotation.getDuration().milliseconds; |
29 _max = Math.max(_max, _annotations); |
28 if (!_d) { |
30 _slices.push(_annotations); |
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 } |
31 } |
38 if (!_max) { |
32 if (!_max) { |
39 return; |
33 return; |
40 } |
34 } |
41 this.paper = new Raphael(this.$[0], this.width, this.height); |
35 this.paper = new Raphael(this.$[0], this.width, this.height); |
46 return _this.margin + _this.height - (_scale * _v); |
40 return _this.margin + _this.height - (_scale * _v); |
47 }), |
41 }), |
48 _d = IriSP._(_y).reduce(function(_memo, _v, _k) { |
42 _d = IriSP._(_y).reduce(function(_memo, _v, _k) { |
49 return _memo + ( _k |
43 return _memo + ( _k |
50 ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v |
44 ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v |
51 : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ); |
45 : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ) |
52 },'') + 'L' + this.width + ' ' + _y[_y.length - 1], |
46 },'') + 'L' + this.width + ' ' + _y[_y.length - 1], |
53 _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; |
47 _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; |
54 |
48 |
55 this.paper.path(_d2).attr({ |
49 this.paper.path(_d2).attr({ |
56 "stroke" : "none", |
50 "stroke" : "none", |
72 |
66 |
73 this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}); |
67 this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}); |
74 |
68 |
75 this.$.click(function(_e) { |
69 this.$.click(function(_e) { |
76 var _x = _e.pageX - _this.$.offset().left; |
70 var _x = _e.pageX - _this.$.offset().left; |
77 _this.media.setCurrentTime(_this.media.duration * _x / _this.width); |
71 _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width); |
78 }); |
72 }); |
79 |
73 |
80 this.onMediaEvent("timeupdate","onTimeupdate"); |
74 this.bindPopcorn("timeupdate","onTimeupdate"); |
81 }; |
75 } |
82 |
76 |
83 IriSP.Widgets.Sparkline.prototype.onTimeupdate = function(_time) { |
77 IriSP.Widgets.Sparkline.prototype.onTimeupdate = function() { |
84 var _x = Math.floor( this.width * _time / this.media.duration); |
78 var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds()); |
85 this.rectangleProgress.attr({ |
79 this.rectangleProgress.attr({ |
86 "width" : _x |
80 "width" : _x |
87 }); |
81 }); |
88 this.ligneProgress.attr({ |
82 this.ligneProgress.attr({ |
89 "path" : "M" + _x + " 0L" + _x + " " + this.height |
83 "path" : "M" + _x + " 0L" + _x + " " + this.height |
90 }); |
84 }); |
91 }; |
85 } |