Tweaks to hide/show elements for several widgets to adjust for remie scenarii + More work on new widgets
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.css Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.css Fri Jul 03 15:49:04 2015 +0200
@@ -1,7 +1,7 @@
.Ldt-AnnotationsController{
background: url(img/pinstripe.png);
- width: 537px;
+ width: 535px;
max-height: 280px;
margin: 0px;
margin-top: 4px;
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js Fri Jul 03 15:49:04 2015 +0200
@@ -13,6 +13,9 @@
IriSP.Widgets.AnnotationsController.prototype.defaults = {
// If true, displaying AnnotationList will hide CreateAnnotation and vice versa.
display_or_write: false,
+ starts_hidden: false,
+ hide_without_segment: false,
+ segments_annotation_type: "chap"
};
IriSP.Widgets.AnnotationsController.prototype.template =
@@ -37,20 +40,70 @@
IriSP.Widgets.AnnotationsController.prototype.draw = function() {
this.renderTemplate();
var _this = this;
+ this.element_$ = this.$.find(".Ldt-AnnotationsController")
- this.$displayButton = this.$.find(".Ldt-AnnotationsController-ShowAnnotationsListButton");
- this.$writeButton = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton");
+ this.displayButton_$ = this.$.find(".Ldt-AnnotationsController-ShowAnnotationsListButton");
+ this.writeButton_$ = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton");
- this.$writeButton.click(function(){
+ this.writeButton_$.click(function(){
_this.player.trigger("CreateAnnotation.toggle");
if (_this.display_or_write){
_this.player.trigger("AnnotationsList.hide");
}
});
- this.$displayButton.click(function(){
+ this.displayButton_$.click(function(){
_this.player.trigger("AnnotationsList.toggle");
if (_this.display_or_write){
_this.player.trigger("CreateAnnotation.hide");
}
})
+ this.onMediaEvent("timeupdate", "onTimeUpdate")
+
+ if (this.starts_hidden) {
+ this.visible = true
+ this.hide();
+ }
+ else{
+ this.visible = false
+ this.show();
+ }
+
};
+
+IriSP.Widgets.AnnotationsController.prototype.onTimeUpdate = function(){
+ if (this.hide_without_segment){
+ _currentTime = this.media.getCurrentTime()
+ _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+ _currentSegments = _segmentsAnnotations.filter(function(_segment){
+ return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+ });
+ if (_currentSegments.length == 0){
+ if (this.visible){
+ this.hide();
+ _this.player.trigger("CreateAnnotation.hide");
+ _this.player.trigger("AnnotationsList.hide");
+ }
+ }
+ else {
+ if (!this.visible){
+ this.show();
+ _this.player.trigger("CreateAnnotation.hide");
+ _this.player.trigger("AnnotationsList.hide");
+ }
+ }
+ }
+}
+
+IriSP.Widgets.AnnotationsController.prototype.hide = function() {
+ if (this.visible){
+ this.visible = false;
+ this.element_$.hide()
+ }
+}
+
+IriSP.Widgets.AnnotationsController.prototype.show = function() {
+ if(!this.visible){
+ this.visible = true;
+ this.element_$.show()
+ }
+}
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css Fri Jul 03 15:49:04 2015 +0200
@@ -13,6 +13,33 @@
width: 1px; height: 1px;
}
+.Ldt-AnnotationsList-Filters {
+ display: table-cell;
+ width: 100%;
+ height: 30px;
+ vertical-align: middle;
+ text-align: center;
+
+}
+
+.Ldt-AnnotationsList-filter-text {
+ text-align: left;
+ display: inline;
+ margin: 4px 2px;
+}
+
+.Ldt-AnnotationsList-filter-dropdown {
+ text-align: center;
+ display: inline;
+ margin: 4px 2px;
+}
+
+.Ldt-AnnotationsList-filter-checkbox {
+ text-align: center;
+ display: inline;
+ margin: 4px 2px;
+}
+
ul.Ldt-AnnotationsList-ul {
list-style: none;
padding: 2px;
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js Fri Jul 03 15:49:04 2015 +0200
@@ -35,8 +35,10 @@
newest_first : false,
always_visible : false,
start_visible: true,
- show_audio: true,
- show_creation_date: false,
+ show_audio : true,
+ show_filters : false,
+ show_creation_date : false,
+ show_timecode : true,
/*
* Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.
*/
@@ -50,7 +52,7 @@
* Show a text field that filter annotations by username
*/
filter_by_user: false,
-
+ tags : true,
polemics : [{
keyword: "++",
background_color: "#c9ecc6"
@@ -79,6 +81,13 @@
IriSP.Widgets.AnnotationsList.prototype.template =
'<div class="Ldt-AnnotationsListWidget">'
+ + '{{#show_filters}}'
+ + '<div class="Ldt-AnnotationsList-Filters">'
+ + '<input class="Ldt-AnnotationsList-filter-text" type="text" value="Mot-clés"></input>'
+ + '<select class="Ldt-AnnotationsList-filter-dropdown"></select>'
+ + '<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox">Toutes annotations</label>'
+ + '</div>'
+ + '{{/show_filters}}'
+ '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
+ '<ul class="Ldt-AnnotationsList-ul">'
+ '</ul>'
@@ -91,7 +100,7 @@
+ '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
+ '</a>'
+ '</div>'
- + '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>'
+ + '{{#show_timecode}}<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>{{/show_timecode}}'
+ '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
+ '<a href="{{url}}">{{{htitle}}}</a>'
+ '</h3>'
@@ -173,19 +182,19 @@
* A given annotation is considered "in" segment if the middle of it is between the segment beginning and the segment end.
* Note this is meant to be used for "markings" annotations (not segments)
*/
- _segments_annotations = this.currentSource.getAnnotationsByTypeTitle(this.segments_annotation_type)
- _current_segments = _segments_annotations.filter(function(_segment){
+ _segmentsAnnotation = this.currentSource.getAnnotationsByTypeTitle(this.segments_annotation_type)
+ _currentSegments = _segmentsAnnotation.filter(function(_segment){
return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
});
- if (_current_segments.length == 0) {
+ if (_currentSegments.length == 0) {
_list = _list.filter(function(_annotation){
return false;
- })
+ });
}
else {
_list = _list.filter(function(_annotation){
_annotation_time = (_annotation.begin+_annotation.end)/2;
- return (_current_segments[0].begin <= _annotation_time && _current_segments[0].end >= _annotation_time)
+ return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time)
});
}
}
@@ -260,6 +269,12 @@
if (_this.show_creation_date) {
_created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();
}
+ if(this.tags == true){
+ var _tags = _annotation.getTagTexts();
+ }
+ else {
+ var _tags = false;
+ }
var _data = {
id : _annotation.id,
media_id : _annotation.getMedia().id,
@@ -268,9 +283,10 @@
begin : _annotation.begin.toString(),
end : _annotation.end.toString(),
created : _created,
+ show_timecode : _this.show_timecode,
thumbnail : _thumbnail,
url : _url,
- tags : _annotation.getTagTexts(),
+ tags : _tags,
specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
l10n: _this.l10n
};
@@ -379,14 +395,14 @@
IriSP.Widgets.AnnotationsList.prototype.hide = function() {
if (this.visible){
this.visible = false;
- this.list_$.slideUp()
+ this.widget_$.slideUp()
}
}
IriSP.Widgets.AnnotationsList.prototype.show = function() {
if(!this.visible){
this.visible = true;
- this.list_$.slideDown()
+ this.widget_$.slideDown()
}
}
@@ -411,6 +427,7 @@
var _this = this;
this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
+ this.widget_$ = this.$.find(".Ldt-AnnotationsListWidget");
this.source.getAnnotations().on("search", function(_text) {
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js Fri Jul 03 15:49:04 2015 +0200
@@ -16,6 +16,7 @@
show_arrow : true,
show_mic_record: false,
show_mic_play: false,
+ show_time: true,
minimize_annotation_widget : true,
creator_name : "",
creator_avatar : "",
@@ -42,6 +43,8 @@
}],
slice_annotation_type: "chap",
annotation_type: "Contributions",
+ post_at_segment_time: false,
+ segment_annotation_type: "chap",
api_serializer: "ldt_annotate",
api_endpoint_template: "",
api_method: "POST",
@@ -103,7 +106,7 @@
+ '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
+ '<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_time}}<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_time}}'
+ '{{#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}}" {{#creator_field_readonly}}readonly{{/creator_field_readonly}}/>{{/show_creator_field}}</h3>'
+ '<textarea class="Ldt-CreateAnnotation-Description empty" placeholder="{{l10n.type_description}}"></textarea>'
@@ -409,9 +412,26 @@
* ATTENTION: Si nous sommes sur un MASHUP, ces éléments doivent se référer AU MEDIA D'ORIGINE
* */
_annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */
- _annotation.setBegin(this.begin); /*Timecode de début */
- _annotation.setEnd(this.end); /* Timecode de fin */
-
+
+ if (this.post_at_segment_time){
+ var _currentTime = this.media.getCurrentTime()
+ var _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+ var _currentSegments = _segmentsAnnotations.filter(function(_segment){
+ return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+ });
+ if (_currentSegments.length == 0){
+ _annotation.setBegin(this.begin); /* Timecode de début du widget */
+ _annotation.setEnd(this.end); /* Timecode de fin du widget */
+ }
+ else {
+ _annotation.setBegin(_currentSegments[0].begin); /* Timecode de début du segment */
+ _annotation.setEnd(_currentSegments[0].end); /* Timecode de fin du segment */
+ }
+ }
+ else {
+ _annotation.setBegin(this.begin); /*Timecode de début du widget */
+ _annotation.setEnd(this.end); /* Timecode de fin du widget */
+ }
_annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */
if (this.show_title_field) {
/* Champ titre, seulement s'il est visible */
@@ -460,7 +480,6 @@
}
_exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
_export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
- console.log(_export)
var _this = this;
/* Envoi de l'annotation via AJAX au serveur ! */
IriSP.jQuery.ajax({
--- a/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css Fri Jul 03 15:49:04 2015 +0200
@@ -1,6 +1,6 @@
.Ldt-LatestAnnotation{
background: url(img/pinstripe.png);
- width: 537px;
+ width: 535px;
max-height: 180px;
margin: 0px;
margin-top: 4px;
--- a/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js Fri Jul 03 15:49:04 2015 +0200
@@ -9,8 +9,15 @@
IriSP.Widgets.LatestAnnotation.prototype.defaults = {
from_user: false,
filter_by_segment: false,
- segment_annotation_type: "chap",
- annotation_type: "contribution"
+ segments_annotation_type: "chap",
+ hide_without_segment: false,
+ annotation_type: "contribution",
+ /*
+ * Set to a username if you only want to display annotations from a given user
+ */
+ show_only_annotation_from_user: false,
+ empty_message: false,
+ starts_hidden: false,
};
IriSP.Widgets.LatestAnnotation.prototype.template =
@@ -32,54 +39,100 @@
this.renderTemplate();
this.annotationContainer_$ = this.$.find('.Ldt-LatestAnnotation');
- this.refresh();
this.onMediaEvent("timeupdate", "refresh");
+
+ if (this.starts_hidden){
+ this.visible = true;
+ this.hide();
+ }
+ else{
+ this.visible = false;
+ this.show();
+ }
+
+ this.refresh();
}
-IriSP.Widgets.LatestAnnotation.prototype.refresh = function(){
- var _list = this.getWidgetAnnotations();
- if(this.filter_by_segment){
- _currentTime = this.media.getCurrentTime();
- _segments_annotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type);
- _current_segments = _segments_annotations.filter(function(_segment){
- return (_currentTime >= _segment.begin && _currentTime <= _segment.end);
- });
- if (_current_segments.length == 0) {
- _list = _list.filter(function(_annotation){
- return false;
- });
+IriSP.Widgets.LatestAnnotation.prototype.messages = {
+ fr : {
+ empty : "Aucune annotation à afficher"
+ },
+ en: {
+ empty: "No annotation to display"
+ }
+}
+
+IriSP.Widgets.LatestAnnotation.prototype.refresh = function(){
+ var _currentTime = this.media.getCurrentTime()
+ var _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+ var _currentSegments = _segmentsAnnotations.filter(function(_segment){
+ return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+ });
+ if (this.hide_without_segment){
+ if (_currentSegments.length == 0){
+ if (this.visible){
+ this.hide()
+ }
}
else {
- _list = _list.filter(function(_annotation){
- _annotation_time = (_annotation.begin+_annotation.end)/2;
- return (_current_segments[0].begin <= _annotation_time && _current_segments[0].end >= _annotation_time);
- });
+ if (!this.visible){
+ this.show()
+ }
}
- _list.sortBy(function(_annotation){
- return _annotation.created;
- });
-
- var _latestAnnotation = false;
- var _html="";
- if (_list.length != 0){
- _latestAnnotation = _list.pop();
- console.log(_latestAnnotation.creator);
- _html = Mustache.to_html(this.annotationTemplate, {
- annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(),
- annotation_creator: _latestAnnotation.creator,
- annotation_title: _latestAnnotation.title,
- annotation_content: _latestAnnotation.description,
+ }
+ if (this.visible){
+ var _list = this.getWidgetAnnotations();
+ if(this.filter_by_segment){
+ if (_currentSegments.length == 0) {
+ _list = _list.filter(function(_annotation){
+ return false;
+ });
+ }
+ else {
+ _list = _list.filter(function(_annotation){
+ _annotationTime = (_annotation.begin+_annotation.end)/2;
+ return (_currentSegments[0].begin <= _annotationTime && _currentSegments[0].end >= _annotationTime);
+ });
+ }
+ _list.sortBy(function(_annotation){
+ return _annotation.created;
});
- }
- else {
- _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>Aucune annotation à afficher</div>";
+
+ var _latestAnnotation = false;
+ var _html="";
+ if (_list.length != 0){
+ _latestAnnotation = _list.pop();
+ _html = Mustache.to_html(this.annotationTemplate, {
+ annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(),
+ annotation_creator: _latestAnnotation.creator,
+ annotation_title: _latestAnnotation.title,
+ annotation_content: _latestAnnotation.description,
+ });
+ }
+ else {
+ var _empty_message = this.l10n.empty
+ if (this.empty_message) {
+ _empty_message = this.empty_message
+ }
+ _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>"+_empty_message+"</div>";
+ }
+ this.annotationContainer_$.html(_html);
+
}
- this.annotationContainer_$.html(_html);
-
- };
+ }
}
-IriSP.Widgets.LatestAnnotation.prototype.getLastAnnotation = function(){
-
-}
\ No newline at end of file
+IriSP.Widgets.LatestAnnotation.prototype.hide = function() {
+ if (this.visible){
+ this.visible = false;
+ this.annotationContainer_$.hide()
+ }
+}
+
+IriSP.Widgets.LatestAnnotation.prototype.show = function() {
+ if(!this.visible){
+ this.visible = true;
+ this.annotationContainer_$.show()
+ }
+}