--- a/web/res/metadataplayer/Segments.js Thu Nov 15 13:12:29 2012 +0100
+++ b/web/res/metadataplayer/Segments.js Wed Nov 28 13:19:48 2012 +0100
@@ -9,7 +9,11 @@
IriSP.Widgets.Segments.prototype.defaults = {
annotation_type : "chap",
colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
- height: 10
+ line_height: 8,
+ background: "#e0e0e0",
+ overlap: .25,
+ found_color: "#FF00FC",
+ faded_found_color: "#ff80fc"
};
IriSP.Widgets.Segments.prototype.template =
@@ -19,37 +23,65 @@
IriSP.Widgets.Segments.prototype.annotationTemplate =
'<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"'
- + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>'
+ + '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>'
IriSP.Widgets.Segments.prototype.draw = function() {
- this.onMdpEvent("search", "onSearch");
- this.onMdpEvent("search.closed", "onSearch");
- this.onMdpEvent("search.cleared", "onSearch");
this.onMediaEvent("timeupdate", "onTimeupdate");
-
this.renderTemplate();
- var _list = this.getWidgetAnnotations(),
+ var _list = this.getWidgetAnnotations().filter(function(_ann) {
+ return _ann.getDuration() > 0;
+ }),
_this = this,
- _scale = this.width / this.source.getDuration();
- this.$.css({
- width : this.width + "px",
- height : (this.height - 2) + "px",
- margin : "1px 0"
- });
- this.list_$ = this.$.find('.Ldt-Segments-List');
+ _scale = this.width / this.source.getDuration(),
+ list_$ = this.$.find('.Ldt-Segments-List'),
+ lines = [],
+ zindex = 1,
+ searching = false;
+
+ function saturate(r, g, b, s) {
+ function satcomp(c) {
+ return Math.floor(240 * (1 - s) + c * s);
+ }
+ var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16);
+ while (res.length < 6) {
+ res = "0" + res;
+ }
+ return "#" + res;
+ }
_list.forEach(function(_annotation, _k) {
var _left = _annotation.begin * _scale,
_width = ( _annotation.getDuration() ) * _scale,
_center = Math.floor( _left + _width / 2 ),
- _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' );
+ _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ),
+ line = IriSP._(lines).find(function(line) {
+ return !IriSP._(line.annotations).find(function(a) {
+ return a.begin < _annotation.end && a.end > _annotation.begin
+ });
+ });
+ if (!line) {
+ line = { index: lines.length, annotations: []};
+ lines.push(line);
+ }
+ line.annotations.push(_annotation);
+ var _top = ((1 - _this.overlap) * line.index) * _this.line_height,
+ color = ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
+ r = parseInt(color.substr(1,2),16),
+ g = parseInt(color.substr(3,2),16),
+ b = parseInt(color.substr(5,2),16),
+ medcolor = saturate(r, g, b, .5),
+ lowcolor = saturate(r, g, b, .2);
var _data = {
- color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
+ color : color,
+ medcolor: medcolor,
+ lowcolor: lowcolor,
text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),
- left : Math.floor( _left ),
- width : Math.floor( _width ),
+ left : _left,
+ width : _width,
+ top: _top,
+ height: _this.line_height - 1,
id : _annotation.id,
media_id : _annotation.getMedia().id
};
@@ -64,43 +96,53 @@
.click(function() {
_annotation.trigger("click");
})
- .appendTo(_this.list_$)
+ .appendTo(list_$)
_annotation.on("select", function() {
- _this.$segments.removeClass("active").addClass("inactive");
- _this.tooltip.show( _center, 0, _data.text, _data.color );
- _el.removeClass("inactive").addClass("active");
+ _this.$segments.each(function() {
+ var _segment = IriSP.jQuery(this);
+ _segment.css({
+ background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")
+ });
+ });
+ _el.css({
+ background: _el.hasClass("found") ? _this.found_color: color,
+ "z-index": ++zindex
+ });
+ _this.tooltip.show( _center, _top, _data.text, _data.color );
});
_annotation.on("unselect", function() {
_this.tooltip.hide();
- _this.$segments.removeClass("inactive active");
+ _this.$segments.each(function() {
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
+ });
+ });
+ _annotation.on("found", function() {
+ _el.css("background", _this.found_color).addClass("found");
});
+ _annotation.on("not-found", function() {
+ _el.css("background", lowcolor).removeClass("found");
+ });
+ });
+
+ this.$.css({
+ width : this.width + "px",
+ height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px",
+ background : this.background,
+ margin: "1px 0"
});
this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip");
this.$segments = this.$.find('.Ldt-Segments-Segment');
-}
-
-IriSP.Widgets.Segments.prototype.onSearch = function(searchString) {
- this.searchString = typeof searchString !== "undefined" ? searchString : '';
- var _found = 0,
- _re = IriSP.Model.regexpFromTextOrArray(searchString, true);
- if (this.searchString) {
- this.$segments.each(function() {
- var _el = IriSP.jQuery(this);
- if (_re.test(_el.attr("segment-text"))) {
- _el.removeClass("unfound").addClass("found");
- _found++;
- } else {
- _el.removeClass("found").addClass("unfound");
- }
+ this.source.getAnnotations().on("search", function() {
+ searching = true;
+ });
+ this.source.getAnnotations().on("search-cleared", function() {
+ searching = false;
+ _this.$segments.each(function() {
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", _segment.attr("data-medium-color")).removeClass("found");
});
- if (_found) {
- this.player.trigger("search.matchFound");
- } else {
- this.player.trigger("search.noMatchFound");
- }
- } else {
- this.$segments.removeClass("found unfound");
- }
+ });
}
IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {