metadataplayer: src/widgets/Segments.js@cfcbac34d020 (annotated)

Mercurial Mercurial > metadataplayer / annotate

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

src/widgets/Segments.js

author	veltr
	Fri, 16 Nov 2012 17:36:56 +0100
changeset 982	cfcbac34d020
parent 964	d7d56ea2d0a6
child 983	97fef7a4b189
permissions	-rw-r--r--

Added Multi Segments Widget

937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	1	// TODO: Trigger IriSP.SegmentsWidget.click
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	2
875 43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	3	IriSP.Widgets.Segments = function(player, config) {
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	4	IriSP.Widgets.Widget.call(this, player, config);
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	5	};
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	6
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	7	IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget();
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	8
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	9	IriSP.Widgets.Segments.prototype.defaults = {
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	10	annotation_type : "chap",
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	11	colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	12	line_height: 8,
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	13	background: "#e0e0e0",
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	14	overlap: .25
875 43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	15	};
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	16
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	17	IriSP.Widgets.Segments.prototype.template =
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	18	'<div class="Ldt-Segments-List"></div>'
924 64c2eaafe5e2 Modifications for LDT-Platform veltr parents: 916 diff changeset	19	+ '<div class="Ldt-Segments-Position"></div>'
64c2eaafe5e2 Modifications for LDT-Platform veltr parents: 916 diff changeset	20	+ '<div class="Ldt-Segments-Tooltip"></div>';
875 43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	21
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	22	IriSP.Widgets.Segments.prototype.annotationTemplate =
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	23	'<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"'
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	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>'
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	25
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	26
875 43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	27	IriSP.Widgets.Segments.prototype.draw = function() {
957 4da0a5740b6c Starting 'players-as-widgets' branch veltr parents: 937 diff changeset	28	this.onMdpEvent("search", "onSearch");
4da0a5740b6c Starting 'players-as-widgets' branch veltr parents: 937 diff changeset	29	this.onMdpEvent("search.closed", "onSearch");
4da0a5740b6c Starting 'players-as-widgets' branch veltr parents: 937 diff changeset	30	this.onMdpEvent("search.cleared", "onSearch");
4da0a5740b6c Starting 'players-as-widgets' branch veltr parents: 937 diff changeset	31	this.onMediaEvent("timeupdate", "onTimeupdate");
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	32
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	33	this.renderTemplate();
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	34
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	35	var _list = this.getWidgetAnnotations().filter(function(_ann) {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	36	return _ann.getDuration() > 0;
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	37	}),
875 43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	38	_this = this,
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	39	_scale = this.width / this.source.getDuration();
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	40	var list_$ = this.$.find('.Ldt-Segments-List'),
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	41	lines = [],
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	42	zindex = 1;
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	43
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	44	function saturate(r, g, b, s) {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	45	function satcomp(c) {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	46	return Math.floor(240 * (1 - s) + c * s);
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	47	}
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	48	var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16);
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	49	while (res.length < 6) {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	50	res = "0" + res;
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	51	}
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	52	return "#" + res;
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	53	}
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	54
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	55	function unselect() {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	56	_this.tooltip.hide();
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	57	_this.$segments.each(function() {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	58	var _segment = IriSP.jQuery(this);
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	59	_segment.css("background", _segment.attr("data-medium-color"));
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	60	});
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	61	}
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	62
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	63	_list.forEach(function(_annotation, _k) {
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	64	var _left = _annotation.begin * _scale,
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	65	_width = ( _annotation.getDuration() ) * _scale,
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	66	_center = Math.floor( _left + _width / 2 ),
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	67	_fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ),
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	68	line = IriSP._(lines).find(function(line) {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	69	return !IriSP._(line.annotations).find(function(a) {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	70	return a.begin < _annotation.end && a.end > _annotation.begin
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	71	});
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	72	});
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	73	if (!line) {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	74	line = { index: lines.length, annotations: []};
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	75	lines.push(line);
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	76	}
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	77	line.annotations.push(_annotation);
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	78	var _top = ((1 - _this.overlap) * line.index) * _this.line_height,
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	79	color = ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	80	r = parseInt(color.substr(1,2),16),
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	81	g = parseInt(color.substr(3,2),16),
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	82	b = parseInt(color.substr(5,2),16),
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	83	medcolor = saturate(r, g, b, .5),
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	84	lowcolor = saturate(r, g, b, .2);
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	85	var _data = {
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	86	color : color,
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	87	medcolor: medcolor,
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	88	lowcolor: lowcolor,
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	89	text: _fulltext.replace(/(\n\|\r\|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	90	left : _left,
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	91	width : _width,
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	92	top: _top,
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	93	height: _this.line_height - 1,
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	94	id : _annotation.id,
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	95	media_id : _annotation.getMedia().id
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	96	};
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	97	var _html = Mustache.to_html(_this.annotationTemplate, _data),
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	98	_el = IriSP.jQuery(_html);
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	99	_el.mouseover(function() {
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	100	_annotation.trigger("select");
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	101	})
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	102	.mouseout(function() {
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	103	_annotation.trigger("unselect");
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	104	})
eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	105	.click(function() {
964 d7d56ea2d0a6 Adaptations for Knowledge Concierge veltr parents: 959 diff changeset	106	_annotation.trigger("click");
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	107	})
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	108	.appendTo(list_$)
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	109	_annotation.on("select", function() {
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	110	_this.$segments.each(function() {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	111	var _segment = IriSP.jQuery(this);
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	112	_segment.css({
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	113	background: _segment.attr("data-low-color")
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	114	});
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	115	});
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	116	_this.tooltip.show( _center, _top, _data.text, _data.color );
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	117	_el.css({
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	118	background: color,
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	119	"z-index": ++zindex
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	120	});
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	121	});
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	122	_annotation.on("unselect", unselect);
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	123	});
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	124
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	125	this.$.css({
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	126	width : this.width + "px",
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	127	height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px",
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	128	background : this.background,
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	129	margin: "1px 0"
937 eb3c442cec50 Added events on annotation for inter widget communication veltr parents: 930 diff changeset	130	});
959 ee11ed1b739e Mashup Player and Dailymotion are now widgets veltr parents: 957 diff changeset	131	this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip");
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	132	this.$segments = this.$.find('.Ldt-Segments-Segment');
875 43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	133	}
43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	134
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	135	IriSP.Widgets.Segments.prototype.onSearch = function(searchString) {
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	136	this.searchString = typeof searchString !== "undefined" ? searchString : '';
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	137	var _found = 0,
925 28efc97b5d78 Corrected MAJOR bug in search results veltr parents: 924 diff changeset	138	_re = IriSP.Model.regexpFromTextOrArray(searchString, true);
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	139	if (this.searchString) {
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	140	this.$segments.each(function() {
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	141	var _el = IriSP.jQuery(this);
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	142	if (_re.test(_el.attr("segment-text"))) {
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	143	_el.css("background", _el.attr("data-base-color"));
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	144	_found++;
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	145	} else {
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	146	_el.css("background", _el.attr("data-low-color"));
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	147	}
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	148	});
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	149	if (_found) {
957 4da0a5740b6c Starting 'players-as-widgets' branch veltr parents: 937 diff changeset	150	this.player.trigger("search.matchFound");
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	151	} else {
957 4da0a5740b6c Starting 'players-as-widgets' branch veltr parents: 937 diff changeset	152	this.player.trigger("search.noMatchFound");
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	153	}
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	154	} else {
982 cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	155	_this.$segments.each(function() {
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	156	var _segment = IriSP.jQuery(this);
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	157	_segment.css("background", _segment.attr("data-medium-color"));
cfcbac34d020 Added Multi Segments Widget veltr parents: 964 diff changeset	158	});
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	159	}
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	160	}
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	161
957 4da0a5740b6c Starting 'players-as-widgets' branch veltr parents: 937 diff changeset	162	IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
4da0a5740b6c Starting 'players-as-widgets' branch veltr parents: 937 diff changeset	163	var _x = Math.floor( this.width * _time / this.media.duration);
876 03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	164	this.$.find('.Ldt-Segments-Position').css({
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	165	left: _x + "px"
03967b6ada7c ArrowWidget, AnnotationWidget veltr parents: 875 diff changeset	166	})
875 43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: diff changeset	167	}

metadataplayer