1 IriSP.Widgets.Sparkline = function(player, config) { |
1 import _ from "lodash"; |
2 IriSP.Widgets.Widget.call(this, player, config); |
2 import Raphael from "raphael"; |
3 }; |
|
4 |
3 |
5 IriSP.Widgets.Sparkline.prototype = new IriSP.Widgets.Widget(); |
4 const Sparkline = function (ns) { |
|
5 return class extends ns.Widgets.Widget { |
|
6 constructor(player, config) { |
|
7 super(player, config); |
|
8 } |
6 |
9 |
7 IriSP.Widgets.Sparkline.prototype.defaults = { |
10 static defaults = { |
8 lineColor : "#7492b4", |
11 lineColor: "#7492b4", |
9 fillColor : "#aeaeb8", |
12 fillColor: "#aeaeb8", |
10 lineWidth : 2, |
13 lineWidth: 2, |
11 slice_count : 20, |
14 slice_count: 20, |
12 height : 50, |
15 height: 50, |
13 margin : 5 |
16 margin: 5, |
14 }; |
17 }; |
15 |
18 |
16 IriSP.Widgets.Sparkline.prototype.draw = function() { |
19 draw() { |
17 var _slices = [], |
20 var _slices = [], |
18 _duration = this.source.getDuration(), |
21 _duration = this.source.getDuration(), |
19 _max = 0, |
22 _max = 0, |
20 _list = this.getWidgetAnnotations(); |
23 _list = this.getWidgetAnnotations(); |
21 for (var _i = 0; _i < this.slice_count; _i++) { |
24 for (var _i = 0; _i < this.slice_count; _i++) { |
22 var _begin = (_i*_duration/this.slice_count), |
25 var _begin = (_i * _duration) / this.slice_count, |
23 _end = ((_i+1)*_duration/this.slice_count), |
26 _end = ((_i + 1) * _duration) / this.slice_count, |
24 _volume = 0; |
27 _volume = 0; |
25 _list.forEach(function(_annotation) { |
28 _list.forEach(function (_annotation) { |
26 if (_annotation.begin < _end && _annotation.end >= _begin) { |
29 if (_annotation.begin < _end && _annotation.end >= _begin) { |
27 var _d = _annotation.getDuration().milliseconds; |
30 var _d = _annotation.getDuration().milliseconds; |
28 if (!_d) { |
31 if (!_d) { |
29 _volume += 1; |
32 _volume += 1; |
30 } else { |
33 } else { |
31 _volume += (Math.min(_annotation.end, _end) - Math.max(_annotation.begin, _begin)) / _d; |
34 _volume += |
32 } |
35 (Math.min(_annotation.end, _end) - |
33 } |
36 Math.max(_annotation.begin, _begin)) / |
34 }); |
37 _d; |
35 _max = Math.max(_max, _volume); |
38 } |
|
39 } |
|
40 }); |
|
41 _max = Math.max(_max, _volume); |
36 _slices.push(_volume); |
42 _slices.push(_volume); |
37 } |
43 } |
38 if (!_max) { |
44 if (!_max) { |
39 return; |
45 return; |
40 } |
46 } |
41 this.paper = new Raphael(this.$[0], this.width, this.height); |
47 this.paper = new Raphael(this.$[0], this.width, this.height); |
42 var _scale = (this.height - this.margin) / _max, |
48 var _scale = (this.height - this.margin) / _max, |
43 _width = this.width / this.slice_count, |
49 _width = this.width / this.slice_count, |
44 _this = this, |
50 _this = this, |
45 _y = IriSP._(_slices).map(function(_v) { |
51 _y = _(_slices).map(function (_v) { |
46 return _this.margin + _this.height - (_scale * _v); |
52 return _this.margin + _this.height - _scale * _v; |
47 }), |
53 }).value(), |
48 _d = IriSP._(_y).reduce(function(_memo, _v, _k) { |
54 _d = |
49 return _memo + ( _k |
55 _(_y).reduce(function (_memo, _v, _k) { |
50 ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v |
56 return ( |
51 : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ); |
57 _memo + |
52 },'') + 'L' + this.width + ' ' + _y[_y.length - 1], |
58 (_k |
53 _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; |
59 ? "C" + |
54 |
60 _k * _width + |
55 this.paper.path(_d2).attr({ |
61 " " + |
56 "stroke" : "none", |
62 _y[_k - 1] + |
57 "fill" : this.fillColor |
63 " " + |
58 }); |
64 _k * _width + |
59 |
65 " " + |
60 this.paper.path(_d).attr({ |
66 _v + |
61 "fill" : "none", |
67 " " + |
62 "stroke" : this.lineColor, |
68 (_k + 0.5) * _width + |
63 "stroke-width" : this.lineWidth |
69 " " + |
64 }); |
70 _v |
65 |
71 : "M0 " + _v + "L" + 0.5 * _width + " " + _v) |
66 this.rectangleProgress = this.paper.rect(0,0,0,this.height) |
72 ); |
67 .attr({ |
73 }, "") + |
68 "stroke" : "none", |
74 "L" + |
69 "fill" : "#808080", |
75 this.width + |
70 "opacity" : .3 |
76 " " + |
71 }); |
77 _y[_y.length - 1], |
72 |
78 _d2 = _d + "L" + this.width + " " + this.height + "L0 " + this.height; |
73 this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}); |
79 |
74 |
80 this.paper.path(_d2).attr({ |
75 this.$.click(function(_e) { |
81 stroke: "none", |
|
82 fill: this.fillColor, |
|
83 }); |
|
84 |
|
85 this.paper.path(_d).attr({ |
|
86 fill: "none", |
|
87 stroke: this.lineColor, |
|
88 "stroke-width": this.lineWidth, |
|
89 }); |
|
90 |
|
91 this.rectangleProgress = this.paper.rect(0, 0, 0, this.height).attr({ |
|
92 stroke: "none", |
|
93 fill: "#808080", |
|
94 opacity: 0.3, |
|
95 }); |
|
96 |
|
97 this.ligneProgress = this.paper |
|
98 .path("M0 0L0 " + this.height) |
|
99 .attr({ stroke: "#ff00ff", "line-width": 2 }); |
|
100 |
|
101 this.$.click(function (_e) { |
76 var _x = _e.pageX - _this.$.offset().left; |
102 var _x = _e.pageX - _this.$.offset().left; |
77 _this.media.setCurrentTime(_this.media.duration * _x / _this.width); |
103 _this.media.setCurrentTime((_this.media.duration * _x) / _this.width); |
78 }); |
104 }); |
79 |
105 |
80 this.onMediaEvent("timeupdate","onTimeupdate"); |
106 this.onMediaEvent("timeupdate", "onTimeupdate"); |
|
107 } |
|
108 |
|
109 onTimeupdate(_time) { |
|
110 var _x = Math.floor((this.width * _time) / this.media.duration); |
|
111 this.rectangleProgress.attr({ |
|
112 width: _x, |
|
113 }); |
|
114 this.ligneProgress.attr({ |
|
115 path: "M" + _x + " 0L" + _x + " " + this.height, |
|
116 }); |
|
117 } |
|
118 }; |
81 }; |
119 }; |
82 |
120 |
83 IriSP.Widgets.Sparkline.prototype.onTimeupdate = function(_time) { |
121 export { Sparkline }; |
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 }; |
|