--- a/src/ldt/ldt/static/ldt/metadataplayer/Annotation.css Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Annotation.css Fri Nov 16 17:08:05 2012 +0100
@@ -56,6 +56,10 @@
color: #0068c4;
}
+.Ldt-Annotation-Type {
+ color: #8080A0;
+}
+
.Ldt-Annotation-Time {
color: #ff3b77
}
--- a/src/ldt/ldt/static/ldt/metadataplayer/Annotation.js Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Annotation.js Fri Nov 16 17:08:05 2012 +0100
@@ -31,11 +31,11 @@
+ '<div class="Ldt-Annotation-Widget {{^show_arrow}}Ldt-Annotation-ShowTop{{/show_arrow}}">'
+ '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
+ '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'
- + '<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>'
- + '<h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">'
- + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>'
- + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time">'
- + '( <span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span> )</span></h3>'
+ + '{{#show_social}}<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>{{/show_social}}'
+ + '<h3 class="Ldt-Annotation-HiddenWhenEmpty">{{#show_annotation_type}}<span class="Ldt-Annotation-Type"></span> » {{/show_annotation_type}}<span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
+ + '(<span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span>)</span></h3>'
+ + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
+ + '(<span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span>)</span></h3>'
+ '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>'
+ '<p class="Ldt-Annotation-Labelled Ldt-Annotation-Description"></p></div>'
+ '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Cleared">'
@@ -47,7 +47,9 @@
start_minimized: false,
show_arrow : true,
site_name : "Lignes de Temps",
- search_on_tag_click: true
+ search_on_tag_click: true,
+ show_social: true,
+ show_annotation_type: false
}
IriSP.Widgets.Annotation.prototype.draw = function() {
@@ -99,13 +101,16 @@
} else {
_this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
}
- _this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
- _this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
+ if (_this.show_annotation_type) {
+ _this.$.find(".Ldt-Annotation-Type").text(_annotation.getAnnotationType().title)
+ }
+ _this.$.find(".Ldt-Annotation-Begin").text(_annotation.begin.toString());
+ _this.$.find(".Ldt-Annotation-End").text(_annotation.end.toString());
if (_annotation.elementType === "mashedAnnotation") {
_this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
- _this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title);
- _this.$.find(".Ldt-Annotation-MashupBegin").html(_annotation.annotation.begin.toString());
- _this.$.find(".Ldt-Annotation-MashupEnd").html(_annotation.annotation.end.toString());
+ _this.$.find(".Ldt-Annotation-MashupMedia").text(_annotation.getMedia().title);
+ _this.$.find(".Ldt-Annotation-MashupBegin").text(_annotation.annotation.begin.toString());
+ _this.$.find(".Ldt-Annotation-MashupEnd").text(_annotation.annotation.end.toString());
} else {
_this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");
}
@@ -127,7 +132,11 @@
}
this.renderTemplate();
- this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
+
+ if (_this.show_social) {
+ this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
+ }
+
this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow" }, "arrow");
this.onMediaEvent("timeupdate",timeupdate);
this.onMdpEvent("Annotation.hide","hide");
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css Fri Nov 16 17:08:05 2012 +0100
@@ -15,7 +15,7 @@
}
.Ldt-CreateAnnotation-Inner h3 {
- margin: 5px 0; font-size: 14px; font-weight: bold; text-align: right;
+ margin: 5px 0; font-size: 14px; font-weight: bold; text-align: right; clear:both; color: #0068c4;
}
.Ldt-CreateAnnotation-h3Left {
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js Fri Nov 16 17:08:05 2012 +0100
@@ -57,7 +57,7 @@
add_keywords_: "Add keywords:",
add_polemic_keywords_: "Add polemic keywords:",
your_name_: "Your name:",
- no_title: "Annotate this video",
+ annotate_video: "Annotate this video",
type_title: "Annotation title",
type_description: "Type the full contents of your annotation here.",
wait_while_processing: "Please wait while your annotation is being processed...",
@@ -78,7 +78,7 @@
add_keywords_: "Ajouter des mots-clés :",
add_polemic_keywords_: "Ajouter des mots-clés polémiques :",
your_name_: "Votre nom :",
- no_title: "Annoter cette vidéo",
+ annotate_video: "Annoter cette vidéo",
type_title: "Titre de l'annotation",
type_description: "Rédigez ici le contenu de votre annotation.",
wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...",
@@ -98,11 +98,11 @@
+ '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}'
+ '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
+ '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
- + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
- + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}'
+ + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{l10n.annotate_video}}{{#show_title_field}}</span></h3>'
+ + '<h3><span class="Ldt-CreateAnnotation-h3Left"><input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
+ '<span class="Ldt-CreateAnnotation-Times"> {{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
+ '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>'
- + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" /></h3>{{/show_creator_field}}'
+ + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" />{{/show_creator_field}}</h3>'
+ '<textarea class="Ldt-CreateAnnotation-Description empty" placeholder="{{l10n.type_description}}"></textarea>'
+ '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
+ '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'
--- a/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js Fri Nov 16 17:08:05 2012 +0100
@@ -1445,7 +1445,13 @@
}
IriSP.Widgets.Widget.prototype.getWidgetAnnotations = function() {
- return typeof this.annotation_type !== "undefined" && this.annotation_type ? this.media.getAnnotationsByTypeTitle(this.annotation_type) : this.media.getAnnotations();
+ if (typeof this.annotation_type === "undefined") {
+ return this.media.getAnnotations();
+ }
+ if (this.annotation_type.elementType === "annotationType") {
+ return this.annotation_type.getAnnotations();
+ }
+ return this.media.getAnnotationsByTypeTitle(this.annotation_type);
}
IriSP.Widgets.Widget.prototype.getWidgetAnnotationsAtTime = function() {
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ldt/ldt/static/ldt/metadataplayer/MultiSegments.js Fri Nov 16 17:08:05 2012 +0100
@@ -0,0 +1,120 @@
+IriSP.Widgets.MultiSegments = function(player, config) {
+ IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.MultiSegments.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.MultiSegments.prototype.defaults = {
+ annotation_show_arrow: true,
+ annotation_start_minimized: true,
+ annotation_show_annotation_type: true,
+ show_all: false
+}
+
+IriSP.Widgets.MultiSegments.prototype.draw = function() {
+ var _this = this,
+ lines = [],
+ currentLine = null,
+ segmentsopts = {},
+ annotationopts = {};
+ IriSP._(this).each(function(_v,_k) {
+ if (/^segments_/.test(_k)) {
+ segmentsopts[_k.replace(/^segments_/,"")] = _v;
+ }
+ if (/^annotation_/.test(_k)) {
+ annotationopts[_k.replace(/^annotation_/,"")] = _v;
+ }
+ })
+ this.source.getAnnotationTypes().forEach(function(_anntype) {
+ var segments = _anntype.getAnnotations().filter(function(_ann) {
+ return _ann.getDuration() > 0;
+ });
+ if (segments.length) {
+
+ var visible = false;
+
+ var line = {
+ segmentWidget: IriSP.jQuery("<div>"),
+ annotationWidget: IriSP.jQuery("<div>"),
+ hasSegmentsNow: function() {
+ var _time = _this.media.getCurrentTime();
+ return !!segments.filter(function(_annotation) {
+ return _annotation.begin <= _time && _annotation.end > _time;
+ }).length;
+ },
+ hide: function() {
+ if (visible) {
+ visible = false;
+ this.annotationWidget.slideUp();
+ }
+ },
+ show: function() {
+ if (!visible) {
+ visible = true;
+ this.annotationWidget.slideDown();
+ }
+ }
+ }
+
+
+ line.segmentWidget
+ .addClass("Ldt-MultiSegments-Segment")
+ .appendTo(_this.$);
+
+ if (!_this.show_all) {
+ line.segmentWidget.mouseenter(function() {
+ if (line.hasSegmentsNow()) {
+ currentLine = line;
+ checkVisibilities();
+ }
+ });
+ }
+
+ line.annotationWidget
+ .addClass("Ldt-MultiSegments-Annotation")
+ .appendTo(_this.$)
+ .hide();
+
+ _this.insertSubwidget(
+ line.segmentWidget,
+ IriSP._({
+ type: "Segments",
+ annotation_type: _anntype
+ }).extend(segmentsopts)
+ );
+
+ _this.insertSubwidget(
+ line.annotationWidget,
+ IriSP._({
+ type: "Annotation",
+ annotation_type: _anntype
+ }).extend(annotationopts)
+ );
+
+ lines.push(line);
+ }
+ });
+ var _annotationWidgets = _this.$.find(".Ldt-MultiSegments-Annotation")
+
+ function checkVisibilities(_time) {
+ if (!_this.show_all && currentLine && !currentLine.hasSegmentsNow()) {
+ currentLine = undefined;
+ }
+ IriSP._(lines).each(function(line) {
+ if (line.hasSegmentsNow()) {
+ if (!_this.show_all && !currentLine) {
+ currentLine = line;
+ }
+ if (_this.show_all || line === currentLine) {
+ line.show();
+ } else {
+ line.hide();
+ }
+ } else {
+ line.hide();
+ }
+ });
+ }
+
+ this.onMediaEvent("timeupdate", checkVisibilities);
+}
\ No newline at end of file
--- a/src/ldt/ldt/static/ldt/metadataplayer/Segments.css Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Segments.css Fri Nov 16 17:08:05 2012 +0100
@@ -2,28 +2,17 @@
* Segments Widget
*/
-.Ldt-Segments-List {
- width: 100%; height: 100%;
-}
-
.Ldt-Segments-Segment {
- position: absolute; height: 100%; opacity: .5; filter:alpha(opacity=50); margin-left: -1px; border-left: 1px solid #ffffff;
-}
-
-.Ldt-Segments-Segment.inactive, .Ldt-Segments-Segment.unfound {
- opacity: .2; filter:alpha(opacity=20);
-}
-
-.Ldt-Segments-Segment.active, .Ldt-Segments-Segment.found {
- opacity: 1; filter:alpha(opacity=100);
+ position: absolute; margin-left: -1px; border: 1px solid #ffffff;
}
.Ldt-Segments-Position {
background: #fc00ff;
position: absolute;
- top: 0;
+ top: -1px;
left: 0;
margin-left: -1px;
width: 2px;
- height: 100%;
+ bottom: -1px;
+ z-index: 80000;
}
\ No newline at end of file
--- a/src/ldt/ldt/static/ldt/metadataplayer/Segments.js Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Segments.js Fri Nov 16 17:08:05 2012 +0100
@@ -9,7 +9,9 @@
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
};
IriSP.Widgets.Segments.prototype.template =
@@ -19,7 +21,7 @@
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() {
@@ -30,26 +32,65 @@
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');
+ var list_$ = this.$.find('.Ldt-Segments-List'),
+ lines = [],
+ zindex = 1;
+
+ 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;
+ }
+
+ function unselect() {
+ _this.tooltip.hide();
+ _this.$segments.each(function() {
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", _segment.attr("data-medium-color"));
+ });
+ }
_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,16 +105,28 @@
.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.attr("data-low-color")
+ });
+ });
+ _this.tooltip.show( _center, _top, _data.text, _data.color );
+ _el.css({
+ background: color,
+ "z-index": ++zindex
+ });
});
- _annotation.on("unselect", function() {
- _this.tooltip.hide();
- _this.$segments.removeClass("inactive active");
- });
+ _annotation.on("unselect", unselect);
+ });
+
+ 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');
@@ -87,10 +140,10 @@
this.$segments.each(function() {
var _el = IriSP.jQuery(this);
if (_re.test(_el.attr("segment-text"))) {
- _el.removeClass("unfound").addClass("found");
+ _el.css("background", _el.attr("data-base-color"));
_found++;
} else {
- _el.removeClass("found").addClass("unfound");
+ _el.css("background", _el.attr("data-low-color"));
}
});
if (_found) {
@@ -99,7 +152,10 @@
this.player.trigger("search.noMatchFound");
}
} else {
- this.$segments.removeClass("found unfound");
+ _this.$segments.each(function() {
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", _segment.attr("data-medium-color"));
+ });
}
}