7 IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget(); |
7 IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget(); |
8 |
8 |
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 height: 10 |
12 line_height: 8, |
|
13 background: "#e0e0e0", |
|
14 overlap: .25, |
|
15 found_color: "#FF00FC", |
|
16 faded_found_color: "#ff80fc" |
13 }; |
17 }; |
14 |
18 |
15 IriSP.Widgets.Segments.prototype.template = |
19 IriSP.Widgets.Segments.prototype.template = |
16 '<div class="Ldt-Segments-List"></div>' |
20 '<div class="Ldt-Segments-List"></div>' |
17 + '<div class="Ldt-Segments-Position"></div>' |
21 + '<div class="Ldt-Segments-Position"></div>' |
18 + '<div class="Ldt-Segments-Tooltip"></div>'; |
22 + '<div class="Ldt-Segments-Tooltip"></div>'; |
19 |
23 |
20 IriSP.Widgets.Segments.prototype.annotationTemplate = |
24 IriSP.Widgets.Segments.prototype.annotationTemplate = |
21 '<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}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"' |
22 + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></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>'; |
23 |
27 |
24 |
28 |
25 IriSP.Widgets.Segments.prototype.draw = function() { |
29 IriSP.Widgets.Segments.prototype.draw = function() { |
26 this.bindPopcorn("IriSP.search", "onSearch"); |
30 this.onMediaEvent("timeupdate", "onTimeupdate"); |
27 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
|
28 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
|
29 this.bindPopcorn("timeupdate", "onTimeupdate"); |
|
30 |
|
31 this.renderTemplate(); |
31 this.renderTemplate(); |
32 |
32 |
33 var _list = this.getWidgetAnnotations(), |
33 var _list = this.getWidgetAnnotations().filter(function(_ann) { |
|
34 return _ann.getDuration() > 0; |
|
35 }), |
34 _this = this, |
36 _this = this, |
35 _scale = this.width / this.source.getDuration(); |
37 _scale = this.width / this.source.getDuration(), |
36 this.$.css({ |
38 list_$ = this.$.find('.Ldt-Segments-List'), |
37 width : this.width + "px", |
39 lines = [], |
38 height : (this.height - 2) + "px", |
40 zindex = 1, |
39 margin : "1px 0" |
41 searching = false; |
40 }); |
42 |
41 this.list_$ = this.$.find('.Ldt-Segments-List'); |
43 function saturate(r, g, b, s) { |
|
44 function satcomp(c) { |
|
45 return Math.floor(240 * (1 - s) + c * s); |
|
46 } |
|
47 var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16); |
|
48 while (res.length < 6) { |
|
49 res = "0" + res; |
|
50 } |
|
51 return "#" + res; |
|
52 } |
42 |
53 |
43 _list.forEach(function(_annotation, _k) { |
54 _list.forEach(function(_annotation, _k) { |
44 var _left = _annotation.begin * _scale, |
55 var _left = _annotation.begin * _scale, |
45 _width = ( _annotation.getDuration() ) * _scale, |
56 _width = ( _annotation.getDuration() ) * _scale, |
46 _center = Math.floor( _left + _width / 2 ), |
57 _center = Math.floor( _left + _width / 2 ), |
47 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ), |
58 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ), |
48 _beginseconds = _annotation.begin.getSeconds(); |
59 line = IriSP._(lines).find(function(line) { |
|
60 return !IriSP._(line.annotations).find(function(a) { |
|
61 return a.begin < _annotation.end && a.end > _annotation.begin; |
|
62 }); |
|
63 }); |
|
64 if (!line) { |
|
65 line = { index: lines.length, annotations: []}; |
|
66 lines.push(line); |
|
67 } |
|
68 line.annotations.push(_annotation); |
|
69 var _top = ((1 - _this.overlap) * line.index) * _this.line_height, |
|
70 color = ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
|
71 r = parseInt(color.substr(1,2),16), |
|
72 g = parseInt(color.substr(3,2),16), |
|
73 b = parseInt(color.substr(5,2),16), |
|
74 medcolor = saturate(r, g, b, .5), |
|
75 lowcolor = saturate(r, g, b, .2); |
49 var _data = { |
76 var _data = { |
50 color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
77 color : color, |
|
78 medcolor: medcolor, |
|
79 lowcolor: lowcolor, |
51 text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'), |
80 text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'), |
52 left : Math.floor( _left ), |
81 left : _left, |
53 width : Math.floor( _width ), |
82 width : _width, |
|
83 top: _top, |
|
84 height: _this.line_height - 1, |
54 id : _annotation.id, |
85 id : _annotation.id, |
55 media_id : _annotation.getMedia().id |
86 media_id : _annotation.getMedia().id, |
|
87 from: _annotation.begin.toString(), |
|
88 to: _annotation.end.toString() |
56 }; |
89 }; |
57 var _html = Mustache.to_html(_this.annotationTemplate, _data), |
90 var _html = Mustache.to_html(_this.annotationTemplate, _data), |
58 _el = IriSP.jQuery(_html); |
91 _el = IriSP.jQuery(_html); |
59 _el.mouseover(function() { |
92 _el.mouseover(function() { |
60 _annotation.trigger("select"); |
93 _annotation.trigger("select"); |
61 }) |
94 }) |
62 .mouseout(function() { |
95 .mouseout(function() { |
63 _annotation.trigger("unselect"); |
96 _annotation.trigger("unselect"); |
64 }) |
97 }) |
65 .click(function() { |
98 .click(function() { |
66 _this.player.popcorn.currentTime(_beginseconds); |
99 _annotation.trigger("click"); |
67 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _data.id); |
|
68 }) |
100 }) |
69 .appendTo(_this.list_$) |
101 .appendTo(list_$); |
|
102 IriSP.attachDndData(_el, { |
|
103 title: _annotation.title, |
|
104 description: _annotation.description, |
|
105 uri: (typeof _annotation.url !== "undefined" |
|
106 ? _annotation.url |
|
107 : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id)), |
|
108 image: _annotation.thumbnail |
|
109 }); |
70 _annotation.on("select", function() { |
110 _annotation.on("select", function() { |
71 _this.$segments.removeClass("active").addClass("inactive"); |
111 _this.$segments.each(function() { |
72 _this.tooltip.show( _center, 0, _data.text, _data.color ); |
112 var _segment = IriSP.jQuery(this); |
73 _el.removeClass("inactive").addClass("active"); |
113 _segment.css({ |
|
114 background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color") |
|
115 }); |
|
116 }); |
|
117 _el.css({ |
|
118 background: _el.hasClass("found") ? _this.found_color: color, |
|
119 "z-index": ++zindex |
|
120 }); |
|
121 if (_this.tooltip) { |
|
122 _this.tooltip.show( _center, _top, _data.text, _data.color ); |
|
123 } |
74 }); |
124 }); |
75 _annotation.on("unselect", function() { |
125 _annotation.on("unselect", function() { |
76 _this.tooltip.hide(); |
126 if (_this.tooltip) { |
77 _this.$segments.removeClass("inactive active"); |
127 _this.tooltip.hide(); |
|
128 } |
|
129 _this.$segments.each(function() { |
|
130 var _segment = IriSP.jQuery(this); |
|
131 _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color")); |
|
132 }); |
|
133 }); |
|
134 _annotation.on("found", function() { |
|
135 _el.css("background", _this.found_color).addClass("found"); |
|
136 }); |
|
137 _annotation.on("not-found", function() { |
|
138 _el.css("background", lowcolor).removeClass("found"); |
78 }); |
139 }); |
79 }); |
140 }); |
80 this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), "tooltip", { type: "Tooltip" }); |
141 |
|
142 this.$.css({ |
|
143 width : this.width + "px", |
|
144 height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px", |
|
145 background : this.background, |
|
146 margin: "1px 0" |
|
147 }); |
|
148 this.insertSubwidget( |
|
149 this.$.find(".Ldt-Segments-Tooltip"), |
|
150 { |
|
151 type: "Tooltip", |
|
152 min_x: 0, |
|
153 max_x: this.width |
|
154 }, |
|
155 "tooltip" |
|
156 ); |
81 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
157 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
82 } |
158 this.source.getAnnotations().on("search", function() { |
|
159 searching = true; |
|
160 }); |
|
161 this.source.getAnnotations().on("search-cleared", function() { |
|
162 searching = false; |
|
163 _this.$segments.each(function() { |
|
164 var _segment = IriSP.jQuery(this); |
|
165 _segment.css("background", _segment.attr("data-medium-color")).removeClass("found"); |
|
166 }); |
|
167 }); |
|
168 }; |
83 |
169 |
84 IriSP.Widgets.Segments.prototype.onSearch = function(searchString) { |
170 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) { |
85 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
171 var _x = Math.floor( this.width * _time / this.media.duration); |
86 var _found = 0, |
|
87 _re = IriSP.Model.regexpFromTextOrArray(searchString, true); |
|
88 if (this.searchString) { |
|
89 this.$segments.each(function() { |
|
90 var _el = IriSP.jQuery(this); |
|
91 if (_re.test(_el.attr("segment-text"))) { |
|
92 _el.removeClass("unfound").addClass("found"); |
|
93 _found++; |
|
94 } else { |
|
95 _el.removeClass("found").addClass("unfound"); |
|
96 } |
|
97 }); |
|
98 if (_found) { |
|
99 this.player.popcorn.trigger("IriSP.search.matchFound"); |
|
100 } else { |
|
101 this.player.popcorn.trigger("IriSP.search.noMatchFound"); |
|
102 } |
|
103 } else { |
|
104 this.$segments.removeClass("found unfound"); |
|
105 } |
|
106 } |
|
107 |
|
108 IriSP.Widgets.Segments.prototype.onTimeupdate = function() { |
|
109 var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds()); |
|
110 this.$.find('.Ldt-Segments-Position').css({ |
172 this.$.find('.Ldt-Segments-Position').css({ |
111 left: _x + "px" |
173 left: _x + "px" |
112 }) |
174 }); |
113 } |
175 }; |