9 IriSP.Widgets.Segments.prototype.defaults = { |
9 IriSP.Widgets.Segments.prototype.defaults = { |
10 annotation_type : "chap", |
10 annotation_type : "chap", |
11 colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"], |
11 colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"], |
12 line_height: 8, |
12 line_height: 8, |
13 background: "#e0e0e0", |
13 background: "#e0e0e0", |
14 overlap: .25 |
14 overlap: .25, |
|
15 found_color: "#FF00FC", |
|
16 faded_found_color: "#ff80fc" |
15 }; |
17 }; |
16 |
18 |
17 IriSP.Widgets.Segments.prototype.template = |
19 IriSP.Widgets.Segments.prototype.template = |
18 '<div class="Ldt-Segments-List"></div>' |
20 '<div class="Ldt-Segments-List"></div>' |
19 + '<div class="Ldt-Segments-Position"></div>' |
21 + '<div class="Ldt-Segments-Position"></div>' |
23 '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"' |
25 '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"' |
24 + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>' |
26 + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>' |
25 |
27 |
26 |
28 |
27 IriSP.Widgets.Segments.prototype.draw = function() { |
29 IriSP.Widgets.Segments.prototype.draw = function() { |
28 this.onMdpEvent("search", "onSearch"); |
|
29 this.onMdpEvent("search.closed", "onSearch"); |
|
30 this.onMdpEvent("search.cleared", "onSearch"); |
|
31 this.onMediaEvent("timeupdate", "onTimeupdate"); |
30 this.onMediaEvent("timeupdate", "onTimeupdate"); |
32 |
|
33 this.renderTemplate(); |
31 this.renderTemplate(); |
34 |
32 |
35 var _list = this.getWidgetAnnotations().filter(function(_ann) { |
33 var _list = this.getWidgetAnnotations().filter(function(_ann) { |
36 return _ann.getDuration() > 0; |
34 return _ann.getDuration() > 0; |
37 }), |
35 }), |
38 _this = this, |
36 _this = this, |
39 _scale = this.width / this.source.getDuration(); |
37 _scale = this.width / this.source.getDuration(), |
40 var list_$ = this.$.find('.Ldt-Segments-List'), |
38 list_$ = this.$.find('.Ldt-Segments-List'), |
41 lines = [], |
39 lines = [], |
42 zindex = 1; |
40 zindex = 1, |
|
41 searching = false; |
43 |
42 |
44 function saturate(r, g, b, s) { |
43 function saturate(r, g, b, s) { |
45 function satcomp(c) { |
44 function satcomp(c) { |
46 return Math.floor(240 * (1 - s) + c * s); |
45 return Math.floor(240 * (1 - s) + c * s); |
47 } |
46 } |
48 var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16); |
47 var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16); |
49 while (res.length < 6) { |
48 while (res.length < 6) { |
50 res = "0" + res; |
49 res = "0" + res; |
51 } |
50 } |
52 return "#" + res; |
51 return "#" + res; |
53 } |
|
54 |
|
55 function unselect() { |
|
56 _this.tooltip.hide(); |
|
57 _this.$segments.each(function() { |
|
58 var _segment = IriSP.jQuery(this); |
|
59 _segment.css("background", _segment.attr("data-medium-color")); |
|
60 }); |
|
61 } |
52 } |
62 |
53 |
63 _list.forEach(function(_annotation, _k) { |
54 _list.forEach(function(_annotation, _k) { |
64 var _left = _annotation.begin * _scale, |
55 var _left = _annotation.begin * _scale, |
65 _width = ( _annotation.getDuration() ) * _scale, |
56 _width = ( _annotation.getDuration() ) * _scale, |
108 .appendTo(list_$) |
99 .appendTo(list_$) |
109 _annotation.on("select", function() { |
100 _annotation.on("select", function() { |
110 _this.$segments.each(function() { |
101 _this.$segments.each(function() { |
111 var _segment = IriSP.jQuery(this); |
102 var _segment = IriSP.jQuery(this); |
112 _segment.css({ |
103 _segment.css({ |
113 background: _segment.attr("data-low-color") |
104 background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color") |
114 }); |
105 }); |
115 }); |
106 }); |
116 _this.tooltip.show( _center, _top, _data.text, _data.color ); |
|
117 _el.css({ |
107 _el.css({ |
118 background: color, |
108 background: _el.hasClass("found") ? _this.found_color: color, |
119 "z-index": ++zindex |
109 "z-index": ++zindex |
120 }); |
110 }); |
|
111 _this.tooltip.show( _center, _top, _data.text, _data.color ); |
121 }); |
112 }); |
122 _annotation.on("unselect", unselect); |
113 _annotation.on("unselect", function() { |
|
114 _this.tooltip.hide(); |
|
115 _this.$segments.each(function() { |
|
116 var _segment = IriSP.jQuery(this); |
|
117 _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color")); |
|
118 }); |
|
119 }); |
|
120 _annotation.on("found", function() { |
|
121 _el.css("background", _this.found_color).addClass("found"); |
|
122 }); |
|
123 _annotation.on("not-found", function() { |
|
124 _el.css("background", lowcolor).removeClass("found"); |
|
125 }); |
123 }); |
126 }); |
124 |
127 |
125 this.$.css({ |
128 this.$.css({ |
126 width : this.width + "px", |
129 width : this.width + "px", |
127 height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px", |
130 height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px", |
128 background : this.background, |
131 background : this.background, |
129 margin: "1px 0" |
132 margin: "1px 0" |
130 }); |
133 }); |
131 this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip"); |
134 this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip"); |
132 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
135 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
133 } |
136 this.source.getAnnotations().on("search", function() { |
134 |
137 searching = true; |
135 IriSP.Widgets.Segments.prototype.onSearch = function(searchString) { |
138 }); |
136 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
139 this.source.getAnnotations().on("search-cleared", function() { |
137 var _found = 0, |
140 searching = false; |
138 _re = IriSP.Model.regexpFromTextOrArray(searchString, true); |
|
139 if (this.searchString) { |
|
140 this.$segments.each(function() { |
|
141 var _el = IriSP.jQuery(this); |
|
142 if (_re.test(_el.attr("segment-text"))) { |
|
143 _el.css("background", _el.attr("data-base-color")); |
|
144 _found++; |
|
145 } else { |
|
146 _el.css("background", _el.attr("data-low-color")); |
|
147 } |
|
148 }); |
|
149 if (_found) { |
|
150 this.player.trigger("search.matchFound"); |
|
151 } else { |
|
152 this.player.trigger("search.noMatchFound"); |
|
153 } |
|
154 } else { |
|
155 _this.$segments.each(function() { |
141 _this.$segments.each(function() { |
156 var _segment = IriSP.jQuery(this); |
142 var _segment = IriSP.jQuery(this); |
157 _segment.css("background", _segment.attr("data-medium-color")); |
143 _segment.css("background", _segment.attr("data-medium-color")).removeClass("found"); |
158 }); |
144 }); |
159 } |
145 }); |
160 } |
146 } |
161 |
147 |
162 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) { |
148 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) { |
163 var _x = Math.floor( this.width * _time / this.media.duration); |
149 var _x = Math.floor( this.width * _time / this.media.duration); |
164 this.$.find('.Ldt-Segments-Position').css({ |
150 this.$.find('.Ldt-Segments-Position').css({ |