| author | Raphael Velt <raph.velt@gmail.com> |
| Tue, 02 Oct 2012 14:40:14 +0200 | |
| changeset 694 | e9400c80e1e4 |
| parent 668 | eb7e39c732c6 |
| child 719 | d0d3a9369f84 |
| permissions | -rw-r--r-- |
| 694 | 1 |
// TODO: Trigger IriSP.SegmentsWidget.click |
| 598 | 2 |
|
3 |
IriSP.Widgets.Segments = function(player, config) { |
|
4 |
IriSP.Widgets.Widget.call(this, player, config); |
|
5 |
}; |
|
6 |
||
7 |
IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget(); |
|
8 |
||
9 |
IriSP.Widgets.Segments.prototype.defaults = { |
|
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"], |
|
12 |
height: 10 |
|
13 |
}; |
|
14 |
||
15 |
IriSP.Widgets.Segments.prototype.template = |
|
| 694 | 16 |
'<div class="Ldt-Segments-List"></div>' |
|
654
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
17 |
+ '<div class="Ldt-Segments-Position"></div>' |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
18 |
+ '<div class="Ldt-Segments-Tooltip"></div>'; |
| 598 | 19 |
|
| 694 | 20 |
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}}"' |
|
22 |
+ 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>' |
|
23 |
||
24 |
||
| 598 | 25 |
IriSP.Widgets.Segments.prototype.draw = function() { |
| 694 | 26 |
this.onMdpEvent("search", "onSearch"); |
27 |
this.onMdpEvent("search.closed", "onSearch"); |
|
28 |
this.onMdpEvent("search.cleared", "onSearch"); |
|
29 |
this.onMediaEvent("timeupdate", "onTimeupdate"); |
|
30 |
|
|
31 |
this.renderTemplate(); |
|
| 598 | 32 |
|
33 |
var _list = this.getWidgetAnnotations(), |
|
34 |
_this = this, |
|
35 |
_scale = this.width / this.source.getDuration(); |
|
36 |
this.$.css({ |
|
37 |
width : this.width + "px", |
|
38 |
height : (this.height - 2) + "px", |
|
39 |
margin : "1px 0" |
|
40 |
}); |
|
| 694 | 41 |
this.list_$ = this.$.find('.Ldt-Segments-List'); |
42 |
|
|
43 |
_list.forEach(function(_annotation, _k) { |
|
44 |
var _left = _annotation.begin * _scale, |
|
45 |
_width = ( _annotation.getDuration() ) * _scale, |
|
46 |
_center = Math.floor( _left + _width / 2 ), |
|
47 |
_fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ); |
|
48 |
var _data = { |
|
49 |
color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
|
50 |
text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'), |
|
51 |
left : Math.floor( _left ), |
|
52 |
width : Math.floor( _width ), |
|
53 |
id : _annotation.id, |
|
54 |
media_id : _annotation.getMedia().id |
|
55 |
}; |
|
56 |
var _html = Mustache.to_html(_this.annotationTemplate, _data), |
|
57 |
_el = IriSP.jQuery(_html); |
|
58 |
_el.mouseover(function() { |
|
59 |
_annotation.trigger("select"); |
|
60 |
}) |
|
61 |
.mouseout(function() { |
|
62 |
_annotation.trigger("unselect"); |
|
63 |
}) |
|
64 |
.click(function() { |
|
65 |
_annotation.trigger("click"); |
|
66 |
}) |
|
67 |
.appendTo(_this.list_$) |
|
68 |
_annotation.on("select", function() { |
|
69 |
_this.$segments.removeClass("active").addClass("inactive"); |
|
70 |
_this.tooltip.show( _center, 0, _data.text, _data.color ); |
|
71 |
_el.removeClass("inactive").addClass("active"); |
|
72 |
}); |
|
73 |
_annotation.on("unselect", function() { |
|
74 |
_this.tooltip.hide(); |
|
75 |
_this.$segments.removeClass("inactive active"); |
|
76 |
}); |
|
77 |
}); |
|
78 |
this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip"); |
|
| 598 | 79 |
this.$segments = this.$.find('.Ldt-Segments-Segment'); |
80 |
} |
|
81 |
||
82 |
IriSP.Widgets.Segments.prototype.onSearch = function(searchString) { |
|
83 |
this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
|
84 |
var _found = 0, |
|
|
654
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
85 |
_re = IriSP.Model.regexpFromTextOrArray(searchString, true); |
| 598 | 86 |
if (this.searchString) { |
87 |
this.$segments.each(function() { |
|
88 |
var _el = IriSP.jQuery(this); |
|
89 |
if (_re.test(_el.attr("segment-text"))) { |
|
90 |
_el.removeClass("unfound").addClass("found"); |
|
91 |
_found++; |
|
92 |
} else { |
|
93 |
_el.removeClass("found").addClass("unfound"); |
|
94 |
} |
|
95 |
}); |
|
96 |
if (_found) { |
|
| 694 | 97 |
this.player.trigger("search.matchFound"); |
| 598 | 98 |
} else { |
| 694 | 99 |
this.player.trigger("search.noMatchFound"); |
| 598 | 100 |
} |
101 |
} else { |
|
102 |
this.$segments.removeClass("found unfound"); |
|
103 |
} |
|
104 |
} |
|
105 |
||
| 694 | 106 |
IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) { |
107 |
var _x = Math.floor( this.width * _time / this.media.duration); |
|
| 598 | 108 |
this.$.find('.Ldt-Segments-Position').css({ |
109 |
left: _x + "px" |
|
110 |
}) |
|
111 |
} |