--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js Fri Sep 18 16:09:40 2015 +0200
@@ -15,14 +15,14 @@
display_or_write: false,
starts_hidden: false,
hide_without_segment: false,
- segments_annotation_type: "chap"
+ segments_annotation_type: "chap",
};
IriSP.Widgets.AnnotationsController.prototype.template =
"<div class='Ldt-AnnotationsController'>"
+ "<div class='Ldt-AnnotationsController-ButtonsContainer'>"
+ + " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{l10n.write}}</div>"
+ " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowAnnotationsListButton'>{{l10n.display}}</div>"
- + " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{l10n.write}}</div>"
+ "</div>"
+ "</div>"
@@ -46,18 +46,51 @@
this.writeButton_$ = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton");
this.writeButton_$.click(function(){
- _this.player.trigger("CreateAnnotation.toggle");
+ if (!_this.writeButton_$.hasClass("selected")){
+ _this.player.trigger("CreateAnnotation.show")
+ }
+ else {
+ _this.player.trigger("CreateAnnotation.hide")
+ }
if (_this.display_or_write){
_this.player.trigger("AnnotationsList.hide");
}
});
this.displayButton_$.click(function(){
- _this.player.trigger("AnnotationsList.toggle");
+ if (!_this.displayButton_$.hasClass("selected")){
+ _this.player.trigger("AnnotationsList.show")
+ }
+ else {
+ _this.player.trigger("AnnotationsList.hide")
+ }
if (_this.display_or_write){
_this.player.trigger("CreateAnnotation.hide");
}
})
- this.onMediaEvent("timeupdate", "onTimeUpdate")
+
+ if(this.hide_without_segment){
+ this.onMediaEvent("timeupdate", function(){
+ _this.refresh();
+ })
+ this.onMediaEvent("settimerange", function(_timeRange){
+ _this.refresh(_timeRange);
+ })
+ this.segments = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+ this.currentSegment = false
+ }
+
+ this.onMdpEvent("CreateAnnotation.hide", function(){
+ _this.writeButton_$.toggleClass("selected", false);
+ })
+ this.onMdpEvent("CreateAnnotation.show", function(){
+ _this.writeButton_$.toggleClass("selected", true);
+ })
+ this.onMdpEvent("AnnotationsList.hide", function(){
+ _this.displayButton_$.toggleClass("selected", false);
+ })
+ this.onMdpEvent("AnnotationsList.show", function(){
+ _this.displayButton_$.toggleClass("selected", true);
+ })
if (this.starts_hidden) {
this.visible = true
@@ -70,25 +103,57 @@
};
-IriSP.Widgets.AnnotationsController.prototype.onTimeUpdate = function(){
+IriSP.Widgets.AnnotationsController.prototype.refresh = function(_timeRange){
+ _timeRange = typeof _timeRange !== 'undefined' ? _timeRange : false ;
+
+ if(!_timeRange){
+ if (this.media.getTimeRange()){
+ _timeRange = this.media.getTimeRange();
+ }
+ }
+
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 (!_timeRange && !this.media.getTimeRange()){
+ _currentTime = this.media.getCurrentTime()
+ _currentSegments = this.segments.filter(function(_segment){
+ return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+ });
+ if(_currentSegments.length > 0){
+ currentSegment = true;
+ }
+ else {
+ currentSegment = false;
+ }
+ }
+ else {
+ var _timeRangeBegin = _timeRange[0],
+ _timeRangeEnd = _timeRange[1];
+ _currentSegments = this.segments.filter(function(_segment){
+ return (_timeRangeBegin == _segment.begin && _timeRangeEnd == _segment.end)
+ });
+ if(_currentSegments.length > 0){
+ currentSegment = true;
+ }
+ else {
+ currentSegment = false;
+ }
+ }
+ if (!currentSegment && _currentSegments.length == 0){
if (this.visible){
this.hide();
- _this.player.trigger("CreateAnnotation.hide");
- _this.player.trigger("AnnotationsList.hide");
+ this.writeButton_$.toggleClass("selected", false);
+ this.displayButton_$.toggleClass("selected", false);
+ 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");
+ this.writeButton_$.toggleClass("selected", false);
+ this.displayButton_$.toggleClass("selected", false);
+ this.player.trigger("CreateAnnotation.hide");
+ this.player.trigger("AnnotationsList.hide");
}
}
}
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css Fri Sep 18 16:09:40 2015 +0200
@@ -1,9 +1,14 @@
/* AnnotationsListWidget */
+#ui-datepicker-div
+{
+ display: none;
+}
+
.Ldt-AnnotationsListWidget {
border: none; margin: 0; padding: 0;
overflow: auto;
- max-height: 480px;
+ max-height: 380px;
}
.Ldt-AnnotationsListWidget a {
text-decoration: none;
@@ -40,11 +45,12 @@
margin: 4px 2px;
}
-ul.Ldt-AnnotationsList-ul {
+ul.Ldt-AnnotationsList-ul, ul.Ldt-AnnotationsList-ul-toDelete {
list-style: none;
- padding: 2px;
- margin: 0;
+ padding: 0px;
+ margin: 0px;
}
+
li.Ldt-AnnotationsList-li {
width: 100%;
clear: both;
@@ -68,6 +74,21 @@
max-height: 100%;
margin: 0 auto;
}
+
+.Ldt-AnnotationsList-DeleteButton {
+ margin: 0px;
+ float: right;
+ font-size: 20px;
+ position: relative;
+ top: -50px;
+ left: -5px;
+ color: #787878
+}
+.Ldt-AnnotationsList-DeleteButton:hover {
+ color: #f7268e;
+ cursor: pointer;
+}
+
.Ldt-AnnotationsList-Duration {
color: #f7268e;
float: right;
@@ -139,4 +160,26 @@
.Ldt-AnnotationsList-Play:hover {
background-position: 0 bottom;
+}
+
+.Ldt-AnnotationsList-ScreenMain{
+ margin: 0px;
+ padding: 0px;
+}
+
+.Ldt-AnnotationsList-ScreenDelete, .Ldt-AnnotationsList-ScreenSending,
+.Ldt-AnnotationsList-ScreenError, .Ldt-AnnotationsList-ScreenSuccess{
+ margin-top: 15px;
+ width: 100%
+ text-align: center;
+ vertical-align: middle;
+ font-size: 14px;
+ font-weight: bold;
+ color: #68273C;
+}
+
+a.Ldt-AnnotationsList-Close {
+ position: absolute; right: 2px;
+ display: inline-block; width: 17px; height: 17px; margin: 4px;
+ background: url(img/widget-control.png);
}
\ No newline at end of file
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js Fri Sep 18 16:09:40 2015 +0200
@@ -12,6 +12,9 @@
IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
IriSP.Widgets.AnnotationsList.prototype.defaults = {
+ pre_draw_callback: function(){
+ return this.importUsers();
+ },
/*
* URL when the annotations are to be reloaded from an LDT-like segment API
* e.g.
@@ -37,12 +40,33 @@
start_visible: true,
show_audio : true,
show_filters : false,
+ keyword_filter: true,
+ date_filter: true,
+ user_filter: true,
+ segment_filter: true,
+ latest_contributions_filter: false,
+ current_day_filter: true,
+ show_header : false,
+ custom_header : false,
+ annotations_count_header : true,
show_creation_date : false,
- show_timecode : true,
+ show_timecode : true,
/*
* Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.
*/
+ allow_annotations_deletion: false,
+ /*
+ * URL to call when deleting annotation. Expects a mustache template with {{annotation_id}}, ex /api/anotations/{{annotation_id}}/
+ */
+ api_delete_endpoint : "",
+ api_delete_method: "DELETE",
+ api_users_endpoint: "",
+ api_users_method: "GET",
+ make_name_string_function: function(params){
+ return params.username ? params.username : "Anonymous";
+ },
filter_by_segments: false,
+ segment_filter: true,
segments_annotation_type: "chap",
/*
* Set to a username if you only want to display annotations from a given user
@@ -51,7 +75,6 @@
/*
* Show a text field that filter annotations by username
*/
- filter_by_user: false,
tags : true,
polemics : [{
keyword: "++",
@@ -68,41 +91,126 @@
}]
};
+IriSP.Widgets.AnnotationsList.prototype.importUsers = function(){
+ if (!this.source.users_data){
+ this.usernames = Array();
+ var _this = this,
+ _list = this.getWidgetAnnotations(),
+ usernames_list_string = "";
+
+ _list.forEach(function(_annotation){
+ if(_this.usernames.indexOf(_annotation.creator) == -1){
+ _this.usernames.push(_annotation.creator);
+ }
+ });
+ this.usernames.forEach(function(_username){
+ usernames_list_string+=_username+","
+ })
+ usernames_list_string = usernames_list_string.substring(0, usernames_list_string.length - 1);
+ _url = Mustache.to_html(this.api_users_endpoint, {usernames_list_string: encodeURIComponent(usernames_list_string), usernames_list_length: this.usernames.length});
+ return IriSP.jQuery.ajax({
+ async: false,
+ url: _url,
+ type: "GET",
+ success: function(_data) {
+ _this.source.users_data = _data.objects
+ },
+ error: function(_xhr, _error, _thrown) {
+ console.log(_xhr)
+ console.log(_error)
+ console.log(_thrown)
+ }
+ })
+ }
+}
+
IriSP.Widgets.AnnotationsList.prototype.messages = {
en: {
voice_annotation: "Voice Annotation",
- now_playing: "Now playing..."
+ now_playing: "Now playing...",
+ everyone: "Everyone",
+ header: "Annotations for this content",
+ segment_filter: "All cuttings",
+ latest_contributions: "Latest contributions",
+ close_widget: "Close",
+ confirm: "Confirm",
+ cancel: "Cancel",
+ annotation_deletion_delete: "You will delete this annotation : ",
+ annotation_deletion_sending: "Your deletion request is being sent ... ",
+ annotation_deletion_success: "The annotation has been deleted.",
+ annotation_deletion_error: "There was an error contacting the server. The annotation has not been deleted."
},
fr: {
voice_annotation: "Annotation Vocale",
- now_playing: "Lecture en cours..."
+ now_playing: "Lecture en cours...",
+ everyone: "Tous",
+ header: "Annotations sur ce contenu",
+ segment_filter: "Tous les segments",
+ latest_contributions: "Dernières contributions",
+ close_widget: "Fermer",
+ confirm: "Confirmer",
+ cancel: "Annuler",
+ annotation_deletion_delete: "Vous allez supprimer cette annotation: ",
+ annotation_deletion_sending: "Votre demande de suppression est en cours d'envoi ... ",
+ annotation_deletion_success: "L'annotation a été supprimée.",
+ annotation_deletion_error: "Une erreur s'est produite en contactant le serveur. L'annotation n'a pas été supprimée."
}
};
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>'
+ '{{#show_header}}<p class="Ldt-AnnotationsList-header">'
+ + '{{#custom_header}}{{custom_header}}{{/custom_header}}'
+ + '{{^custom_header}}{{l10n.header}}{{/custom_header}}'
+ + '</p>{{/show_header}}'
+ + '<div class="Ldt-AnnotationsListWidget">'
+ + '<div class="Ldt-AnnotationsList-ScreenMain">'
+ + '{{#show_filters}}'
+ + '<div class="Ldt-AnnotationsList-Filters">'
+ + '{{#keyword_filter}}<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>{{/keyword_filter}}'
+ + '{{#user_filter}}<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>{{/user_filter}}'
+ + '{{#date_filter}}<label class="Ldt-AnnotationsList-filter-date">Date: <input id="Ldt-AnnotationsList-dateFilter" type="text"></input></label>{{/date_filter}}'
+ + '{{#segment_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-ignoreSegmentsFilter">{{l10n.segment_filter}}</label>{{/segment_filter}}'
+ + '{{#latest_contributions_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-latestContributionsFilter">{{l10n.latest_contributions}}</label>{{/latest_contributions_filter}}'
+ + '</div>'
+ + '{{/show_filters}}'
+ + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
+ + '<ul class="Ldt-AnnotationsList-ul">'
+ + '</ul>'
+ + '</div>'
+ + '{{#allow_annotations_deletion}}'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenDelete">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
+ + '<ul class="Ldt-AnnotationsList-ul-ToDelete"></ul>'
+ + '{{l10n.annotation_deletion_delete}} <a class="Ldt-AnnotationsList-ConfirmDelete">{{l10n.confirm}}</a> <a class="Ldt-AnnotationsList-CancelDelete">{{l10n.cancel}}</a>'
+ + '</div>'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSending">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
+ + '{{l10n.annotation_deletion_sending}}'
+ + '</div>'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSuccess">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
+ + '{{l10n.annotation_deletion_success}}'
+ + '</div>'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenError">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
+ + '{{l10n.annotation_deletion_error}}'
+ + '</div>'
+ + '{{/allow_annotations_deletion}}'
+ '</div>';
IriSP.Widgets.AnnotationsList.prototype.annotationTemplate =
'<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
- + '<div class="Ldt-AnnotationsList-ThumbContainer">'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-ThumbContainer Ldt-AnnotationsList-Annotation-Screen Ldt-AnnotationsList-Annotation-ScreenMain">'
+ '<a href="{{url}}" draggable="true">'
+ '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
+ '</a>'
+ '</div>'
+ + '{{#allow_annotations_deletion}}'
+ + '<div id={{id}} class="Ldt-AnnotationsList-DeleteButton">✖</div>'
+ + '{{/allow_annotations_deletion}}'
+ '{{#show_timecode}}<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>{{/show_timecode}}'
+ '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
- + '<a href="{{url}}">{{{htitle}}}</a>'
+ + '<a {{#url}} href="{{url}}" {{/url}}>{{{htitle}}}</a>'
+ '</h3>'
+ '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
+ '{{#created}}'
@@ -119,7 +227,7 @@
+ '{{/tags}}'
+ '</ul>'
+ '{{/tags.length}}'
- + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'
+ + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'
+ '</li>';
// obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project
@@ -139,6 +247,11 @@
}, this.metadata));
};
+IriSP.Widgets.AnnotationsList.prototype.showScreen = function(_screenName) {
+ this.$.find('.Ldt-AnnotationsList-Screen' + _screenName).show()
+ .siblings().hide();
+}
+
IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {
var _currentTime = this.media.getCurrentTime();
var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
@@ -177,15 +290,23 @@
_list = _list.filter(function(_annotation) {
return _annotation.found !== false;
});
- if (this.filter_by_segments) {
+
+ if ((this.filter_by_segments)&&(!(this.show_filters && this.segment_filter && this.ignoresegmentcheckbox_$[0].checked))) {
/*
* 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)
*/
_segmentsAnnotation = this.currentSource.getAnnotationsByTypeTitle(this.segments_annotation_type)
- _currentSegments = _segmentsAnnotation.filter(function(_segment){
- return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
- });
+ if (this.media.getTimeRange()){
+ _currentSegments = _segmentsAnnotation.filter(function(_segment){
+ return (_this.media.getTimeRange()[0] == _segment.begin && _this.media.getTimeRange()[1] == _segment.end)
+ });
+ }
+ else {
+ _currentSegments = _segmentsAnnotation.filter(function(_segment){
+ return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+ });
+ }
if (_currentSegments.length == 0) {
_list = _list.filter(function(_annotation){
return false;
@@ -197,6 +318,10 @@
return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time)
});
}
+ if(this.annotations_count_header && this.annotations_count != _list.length){
+ this.annotations_count = _list.length;
+ this.refreshHeader();
+ }
}
if (this.show_only_annotation_from_user){
_list = _list.filter(function(_annotation){
@@ -209,6 +334,7 @@
return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);
}).slice(0, this.limit_count);
}
+
if (this.newest_first) {
_list = _list.sortBy(function(_annotation) {
return -_annotation.created.valueOf();
@@ -219,6 +345,49 @@
});
}
+ if (this.show_filters){
+ if (this.user_filter){
+ _username = this.userselect_$[0].options[this.userselect_$[0].selectedIndex].value;
+ if (_username != "false")
+ {
+ _list = _list.filter(function(_annotation){
+ return _annotation.creator == _username
+ })
+ }
+ }
+ if (this.keyword_filter){
+ _keyword = this.keywordinput_$[0].value;
+ if (_keyword != ""){
+ _list = _list.filter(function(_annotation){
+ return _annotation.description.toLowerCase().match(_keyword.toLowerCase());
+ });
+ }
+ }
+ if (this.date_filter){
+ if(this.datefilterinput_$[0].value != ""){
+ _date = this.datefilterinput_$.datepicker("getDate");
+ _list = _list.filter(function(_annotation){
+ return ((_annotation.created.getDate() == _date.getDate())&&(_annotation.created.getMonth() == _date.getMonth())&&(_annotation.created.getFullYear() == _date.getFullYear()));
+ });
+ }
+ }
+ if (this.latest_contributions_filter && this.latestcontributionscheckbox_$[0].checked){
+ _list = _list.sortBy(function(_annotation) {
+ return -_annotation.created.valueOf();
+ });
+ this.usernames.forEach(function(_user){
+
+ latest_ann = _list.filter(function(_annotation){
+ return _annotation.creator == _user;
+ })[0];
+ _list = _list.filter(function(_annotation){
+ return _annotation.id == (latest_ann ? latest_ann.id : false) || _annotation.creator != _user;
+ });
+ });
+ }
+
+ }
+
var _ids = _list.idIndex;
if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) {
@@ -246,10 +415,21 @@
);
var _title = "",
_description = _annotation.description,
- _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail);
+ _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail)
+
// Update : display creator
if (_annotation.creator) {
- _title = _annotation.creator;
+ var _users = _this.source.users_data.filter(function(_user_data){
+ return _user_data.username == _annotation.creator
+ }),
+ _user = {};
+ if (_users.length == 0){
+ _user.username = _annotation.creator
+ }
+ else{
+ _user = _users[0]
+ }
+ _title = _this.make_name_string_function(_user);
}
if (_annotation.title) {
var tempTitle = _annotation.title;
@@ -288,7 +468,8 @@
url : _url,
tags : _tags,
specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
- l10n: _this.l10n
+ l10n: _this.l10n,
+ allow_annotations_deletion: _this.allow_annotations_deletion
};
if (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null") {
_data.audio = true;
@@ -334,6 +515,9 @@
.mouseout(function() {
_annotation.trigger("unselect");
})
+ .click(function() {
+ _annotation.trigger("click");
+ })
.appendTo(_this.list_$);
IriSP.attachDndData(_el.find("[draggable]"), {
title: _title,
@@ -377,6 +561,8 @@
_$.html(IriSP.textFieldHtml(_$.text(), rx));
});
}
+
+ this.$.find(".Ldt-AnnotationsList-DeleteButton").click(_this.functionWrapper("onDeleteClick"))
}
if (this.ajax_url) {
@@ -392,17 +578,90 @@
return _list.length;
};
+IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event){
+
+ ann_id = event.target.id;
+ delete_preview_$ = this.$.find(".Ldt-AnnotationsList-ul-ToDelete");
+ delete_preview_$.html("");
+ _list = this.getWidgetAnnotations()
+ _list = _list.filter(function(_annotation){
+ return _annotation.id == ann_id
+ })
+ var _annotation = _list[0],
+ _title = "",
+ _this = this;
+ if (_annotation.creator) {
+ var _users = _this.source.users_data.filter(function(_user_data){
+ return _user_data.username == _annotation.creator
+ }),
+ _user = {};
+ if (_users.length == 0){
+ _user.username = _annotation.creator
+ }
+ else{
+ _user = _users[0]
+ }
+ _title = _this.make_name_string_function(_user);
+ }
+ if (_annotation.title) {
+ var tempTitle = _annotation.title;
+ if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
+ _title = "";
+ }
+ _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;
+ }
+ var _created = false;
+ if (this.show_creation_date) {
+ _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();
+ }
+ var _data = {
+ id : _annotation.id,
+ media_id : _annotation.getMedia().id,
+ htitle : IriSP.textFieldHtml(_title),
+ hdescription : IriSP.textFieldHtml(_annotation.description),
+ begin : _annotation.begin.toString(),
+ end : _annotation.end.toString(),
+ created : _created,
+ show_timecode : this.show_timecode,
+ tags : false,
+ l10n: this.l10n,
+ allow_annotations_deletion: false
+ }
+ _html = Mustache.to_html(this.annotationTemplate, _data)
+ delete_preview_$.html(_html)
+
+ this.$.find(".Ldt-AnnotationsList-ConfirmDelete").click(function(){
+ _this.sendDelete(ann_id);
+ });
+
+ this.showScreen("Delete");
+}
+
+IriSP.Widgets.AnnotationsList.prototype.refreshHeader = function() {
+ var annotation_count_string = " (" + this.annotations_count +" annotations)";
+ this.$.find('.Ldt-AnnotationsList-header').html("");
+ this.$.find('.Ldt-AnnotationsList-header').html(
+ this.custom_header && typeof this.custom_header == "string"? this.custom_header + annotation_count_string : this.l10n.header + annotation_count_string
+ );
+}
+
IriSP.Widgets.AnnotationsList.prototype.hide = function() {
+ var _this = this;
if (this.visible){
this.visible = false;
- this.widget_$.slideUp()
+ this.widget_$.slideUp(function(){
+ _this.$.find('.Ldt-AnnotationsList-header').hide();
+ });
+ this.showScreen("Main")
}
}
IriSP.Widgets.AnnotationsList.prototype.show = function() {
if(!this.visible){
this.visible = true;
- this.widget_$.slideDown()
+ this.$.find('.Ldt-AnnotationsList-header').show();
+ this.widget_$.slideDown();
+ this.showScreen("Main")
}
}
@@ -417,18 +676,88 @@
}
};
+IriSP.Widgets.AnnotationsList.prototype.revertToMainScreen = function(){
+ if (this.$.find(".Ldt-AnnotationsList-ScreenMain").is(":hidden")){
+ this.showScreen("Main");
+ }
+}
+
+IriSP.Widgets.AnnotationsList.prototype.sendDelete = function(id){
+ var _this = this,
+ _url = Mustache.to_html(this.api_delete_endpoint, {annotation_id: id})
+
+ IriSP.jQuery.ajax({
+ url: _url,
+ type: this.api_delete_method,
+ contentType: 'application/json',
+ success: function(_data) {
+ _this.showScreen('Success');
+ window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 2000));
+ _this.currentSource.getAnnotations().removeId(id);
+ _this.player.trigger("AnnotationsList.refresh");
+ },
+ error: function(_xhr, _error, _thrown) {
+ IriSP.log("Error when sending annotation", _thrown);
+ _this.showScreen('Error');
+ window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 2000));
+ }
+ });
+ this.showScreen('Sending');
+}
+
IriSP.Widgets.AnnotationsList.prototype.draw = function() {
-
this.jwplayers = {};
this.mashupMode = (this.media.elementType === "mashup");
this.renderTemplate();
var _this = this;
-
+
this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
this.widget_$ = this.$.find(".Ldt-AnnotationsListWidget");
+ if (this.show_filters){
+ if (this.user_filter){
+ this.userselect_$ = this.$.find("#Ldt-AnnotationsList-userFilter");
+ this.userselect_$.change(function(){
+ _this.player.trigger("AnnotationsList.refresh");
+ });
+ this.userselect_$.html("<option selected value='false'>"+this.l10n.everyone+"</option>");
+ this.usernames.forEach(function(_user){
+ _this.userselect_$.append("<option value='"+_user+"'>"+_user+"</option>");
+ });
+ }
+ if (this.keyword_filter){
+ this.keywordinput_$ = this.$.find("#Ldt-AnnotationsList-keywordsFilter");
+ this.keywordinput_$.keyup(function(){
+ _this.player.trigger("AnnotationsList.refresh");
+ });
+
+ }
+ if (this.segment_filter){
+ this.ignoresegmentcheckbox_$ = this.$.find("#Ldt-AnnotationsList-ignoreSegmentsFilter");
+ this.ignoresegmentcheckbox_$.click(function(){
+ _this.player.trigger("AnnotationsList.refresh");
+ });
+ }
+ if(this.date_filter){
+ this.datefilterinput_$ = this.$.find("#Ldt-AnnotationsList-dateFilter");
+ this.datefilterinput_$.datepicker({ dateFormat: 'dd/mm/yy' });
+ this.datefilterinput_$.change(function(){
+ _this.player.trigger("AnnotationsList.refresh")
+ })
+ if (this.current_day_filter){
+ currentDate = new Date();
+ this.datefilterinput_$.datepicker("setDate",currentDate);
+ }
+ }
+ if(this.latest_contributions_filter){
+ this.latestcontributionscheckbox_$ = this.$.find("#Ldt-AnnotationsList-latestContributionsFilter");
+ this.latestcontributionscheckbox_$.click(function(){
+ _this.player.trigger("AnnotationsList.refresh");
+ });
+ }
+ }
this.source.getAnnotations().on("search", function(_text) {
_this.searchString = _text;
@@ -449,6 +778,11 @@
_this.currentSource.getAnnotations().trigger("clear-search");
}
});
+
+ this.$.find(".Ldt-AnnotationsList-Close").click(function(){
+ _this.showScreen("Main");
+ })
+
this.source.getAnnotations().on("search-cleared", function() {
_this.throttledRefresh();
});
@@ -480,15 +814,20 @@
}, this.refresh_interval);
}
+ if (this.annotations_count_header){
+ this.annotations_count = false;
+ }
+
this.onMdpEvent("AnnotationsList.toggle","toggle");
this.onMdpEvent("AnnotationsList.hide", "hide");
this.onMdpEvent("AnnotationsList.show", "show");
- this.onMdpEvent("createAnnotationWidget.addedAnnotation", "refresh");
+ this.onMdpEvent("createAnnotationWidget.addedAnnotation", this.throttledRefresh);
var _events = [
"timeupdate",
"seeked",
- "loadedmetadata"
+ "loadedmetadata",
+ "settimerange"
];
for (var _i = 0; _i < _events.length; _i++) {
this.onMediaEvent(_events[_i], this.throttledRefresh);
@@ -496,9 +835,13 @@
this.throttledRefresh();
+ this.showScreen("Main");
+ this.$.find(".Ldt-AnnotationsList-CancelDelete").click(function(){
+ _this.showScreen("Main")
+ });
+
this.visible = true;
if (!this.start_visible){
this.hide();
}
-
};
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css Fri Sep 18 16:09:40 2015 +0200
@@ -43,7 +43,8 @@
color: #ff3b77
}
-.Ldt-CreateAnnotation-Submit {
+.Ldt-CreateAnnotation-Submit,
+.Ldt-CreateAnnotation-Cancel{
position: absolute;
bottom: 7px;
right: 7px;
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js Fri Sep 18 16:09:40 2015 +0200
@@ -51,7 +51,10 @@
project_id: "",
after_send_timeout: 0,
close_after_send: false,
- tag_prefix: "#"
+ tag_prefix: "#",
+ pause_when_displaying: false,
+ custom_send_button: false,
+ custom_cancel_button: false,
};
IriSP.Widgets.CreateAnnotation.prototype.messages = {
@@ -60,6 +63,7 @@
to_time: "to",
at_time: "at",
submit: "Submit",
+ cancel: "Cancel",
add_keywords_: "Add keywords:",
add_polemic_keywords_: "Add polemic attributes :",
your_name_: "Your name:",
@@ -81,6 +85,7 @@
to_time: "à",
at_time: "à",
submit: "Envoyer",
+ cancel: "Annuler",
add_keywords_: "Ajouter des mots-clés\u00a0:",
add_polemic_keywords_: "Ajouter des attributs polémiques\u00a0:",
your_name_: "Votre nom\u00a0:",
@@ -111,7 +116,8 @@
+ '{{#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>'
+ '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
- + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'
+ + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />'
+ + '<input type="button" class="Ldt-CreateAnnotation-Cancel" value="{{#custom_cancel_button}}{{custom_cancel_button}}{{/custom_cancel_button}}{{^custom_cancel_button}}{{l10n.cancel}}{{/custom_cancel_button}}" />'
+ '{{#show_mic_record}}<div class="Ldt-CreateAnnotation-RecBlock"><div class="Ldt-CreateAnnotation-RecLabel">Add voice annotation</div>'
+ ' <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160">'
+ ' <param name="movie" value="{{record_swf}}" />'
@@ -223,6 +229,9 @@
}
});
}
+ this.$.find(".Ldt-CreateAnnotation-Cancel").click(function() {
+ _this.player.trigger("CreateAnnotation.hide");
+ });
this.$.find(".Ldt-CreateAnnotation-Close").click(function() {
_this.close_after_send
? _this.hide()
@@ -270,6 +279,9 @@
IriSP.Widgets.CreateAnnotation.prototype.show = function() {
if (!this.visible){
this.visible = true;
+ if (this.pause_when_displaying){
+ this.media.pause();
+ }
this.showScreen('Main');
this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty");
if (this.show_title_field) {
--- a/src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.css Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.css Fri Sep 18 16:09:40 2015 +0200
@@ -39,10 +39,96 @@
font-weight: bold;
}
+textarea.Ldt-CurrentSegmentInfobox-DescriptionInput.Ldt-CurrentSegmentInfobox-Description{
+ display: inline-block;
+ width: 95%;
+}
+
.Ldt-CurrentSegmentInfobox-Tags{
}
.Ldt-CurrentSegmentInfobox-NoSegment{
font-size: 15px;
font-weight: bold;
+}
+
+.Ldt-CurrentSegmentInfobox-SubmitButton{
+ display: inline-block;
+ background-color: #d93c71;
+ color: #ffffff;
+ float: right;
+ cursor: pointer;
+ height: 14px;
+ width: 100px;
+ margin: 2px;
+ margin-top: 5px;
+ padding: 2px;
+ font-size: 11px;
+ border: 1px solid;
+ border-color: #eca3bc #631e34 #36101c #e16e93;
+ cursor: pointer;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.Ldt-CurrentSegmentInfobox-CancelButton{
+ display: inline-block;
+ background-color: #d93c71;
+ color: #ffffff;
+ float: right;
+ cursor: pointer;
+ height: 14px;
+ width: 100px;
+ margin: 2px;
+ margin-top: 5px;
+ margin-right: 5px;
+ padding: 2px;
+ font-size: 11px;
+ border: 1px solid;
+ border-color: #eca3bc #631e34 #36101c #e16e93;
+ cursor: pointer;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagButton{
+ display: block;
+ background-color: #d93c71;
+ color: #ffffff;
+ cursor: pointer;
+ height: 14px;
+ width: 75px;
+ margin: 2px;
+ padding: 2px;
+ font-size: 11px;
+ border: 1px solid;
+ border-color: #eca3bc #631e34 #36101c #e16e93;
+ cursor: pointer;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-Input{
+ width: 80px;
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagButton:hover, .Ldt-CurrentSegmentInfobox-CancelButton:hover,
+.Ldt-CurrentSegmentInfobox-SubmitButton:hover{
+ background-color: #e15581;
+ border-color: #222222 #e87d9f #f0adc3 #68273c;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton{
+ font-weight: bold;
+ color: #d93c71
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton:hover{
+ color: #e16e93
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagInput{
+ border: 2px solid #848484;
+ margin: 5px 0;
+ padding: 4px;
}
\ No newline at end of file
--- a/src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.js Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.js Fri Sep 18 16:09:40 2015 +0200
@@ -8,69 +8,296 @@
IriSP.Widgets.CurrentSegmentInfobox.prototype.defaults = {
annotation_type: "chap",
- readonly: true,
- empty_message: false
+ editable_segments: false,
+ empty_message: false,
+ project_id: false,
+ api_serializer: "ldt_annotate",
+ api_method: "PUT",
+ api_endpoint_template: "",
+ new_tag_button: true,
};
IriSP.Widgets.CurrentSegmentInfobox.prototype.template =
- "<div class='Ldt-CurrentSegmentInfobox'>"
- + " <div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title'>{{title}}</div>"
- + " <div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description'>{{description}}</div>"
- + " <div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags'>"
- + ' {{#tags.length}}'
- + ' <ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
- + ' {{#tags}}'
- + ' {{#.}}'
- + ' <li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
- + ' <span>{{.}}</span>'
- + ' </li>'
- + ' {{/.}}'
- + ' {{/tags}}'
- + ' </ul>'
- + ' {{/tags.length}}'
- + " </div>"
- + "</div>"
+ '<div class="Ldt-CurrentSegmentInfobox">'
+ + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>'
+ + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>'
+ + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
+ + '{{#tags.length}}'
+ + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
+ + '{{#tags}}'
+ + '{{#.}}'
+ + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+ + '<span>{{.}}</span>'
+ + '</li>'
+ + '{{/.}}'
+ + '{{/tags}}'
+ + '</ul>'
+ + '{{/tags.length}}'
+ + '</div>'
+ + '</div>'
+IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate =
+ '<div class="Ldt-CurrentSegmentInfobox">'
+ + '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>'
+ + '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>'
+ + '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>'
+ + '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>'
+ + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
+ + '{{#new_tag_button}}'
+ + '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>'
+ + '{{/new_tag_button}}'
+ + '{{^new_tag_button}}'
+ + '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>'
+ + '{{/new_tag_button}}'
+ + '{{#tags.length}}'
+ + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
+ + '{{#tags}}'
+ + '{{#.}}'
+ + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+ + '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="{{.}}"></input>'
+ + '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">{{delete_tag}}</div>'
+ + '</li>'
+ + '{{/.}}'
+ + '{{/tags}}'
+ + '</ul>'
+ + '{{/tags.length}}'
+ + '</div>'
+ + '</div>'
+
IriSP.Widgets.CurrentSegmentInfobox.prototype.messages = {
fr : {
+ submit : "Soumettre",
+ cancel : "Annuler",
+ new_tag : "Nouveau tag",
+ delete_tag : "Supprimer",
empty : "Le player vidéo ne lit actuellement aucun segment"
},
en: {
- empty: "The player currently doesn't read any segment"
+ submit : "Submit",
+ cancel : "Cancel",
+ new_tag : "New tag",
+ delete_tag : "Delete tag",
+ empty : "The player currently doesn't read any segment"
}
}
IriSP.Widgets.CurrentSegmentInfobox.prototype.draw = function() {
var _this = this;
this.segments = this.getWidgetAnnotations();
-
this.renderTemplate();
+ this.currentSegment = false;
+ this.clearBox();
this.refresh();
+ this.onMediaEvent("timeupdate", "refresh");
+ this.onMediaEvent("settimerange", function(_timeRange){
+ var _segmentBegin = _timeRange[0],
+ _segmentEnd = _timeRange[1],
+ _list = _this.segments.filter(function(_segment){
+ return _segment.begin.milliseconds == _segmentBegin.milliseconds && _segment.end.milliseconds == _segmentEnd.milliseconds
+ });
+ if (_list.length >0){
+ _this.$.toggleClass("editing", false);
+ if (_this.currentSegment.id != _list[0].id){
+ _this.currentSegment = _list[0];
+ _data = {
+ title: _this.currentSegment.title,
+ description : _this.currentSegment.description,
+ tags : _this.currentSegment.getTagTexts()
+ }
+ _this.$.html(Mustache.to_html(_this.template, _data))
+ if(_this.editable_segments&&_this.currentSegment){
+ _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));
+ }
+ }
+ }
+ });
- this.onMediaEvent("timeupdate", "refresh");
+ if(this.editable_segments&&this.currentSegment){
+ this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));
+ }
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() {
+ var _this = this;
+ if(this.currentSegment){
+ _data = {
+ title: this.currentSegment.title,
+ description : this.currentSegment.description,
+ tags : this.currentSegment.getTagTexts(),
+ submit : this.l10n.submit,
+ cancel : this.l10n.cancel,
+ new_tag : this.l10n.new_tag,
+ delete_tag : this.l10n.delete_tag,
+ new_tag_button : this.new_tag_button,
+ }
+ this.$.toggleClass("editing", true);
+ this.$.html(Mustache.to_html(this.editTemplate, _data));
+ this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode"));
+ if (this.new_tag_button){
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput"));
+ } else {
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress"));
+ }
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
+ this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit"))
+ }
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.disableEditMode = function() {
+ if(this.currentSegment){
+ data = {
+ title: this.currentSegment.title,
+ description : this.currentSegment.description,
+ tags : this.currentSegment.getTagTexts()
+ }
+ this.$.toggleClass("editing", false);
+ this.$.html(Mustache.to_html(this.template, _data));
+ this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));
+ }
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInput = function() {
+ if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>')
+ }
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
+ '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+ +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value=""></input>'
+ +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>'
+ +'</li>');
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInputKeypress = function(event) {
+ var keycode = (event.keyCode ? event.keyCode : event.which);
+ if(keycode == '13'){
+ if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>')
+ }
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
+ '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+ +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="'+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val() +'"></input>'
+ +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>'
+ +'</li>');
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val("");
+ return false;
+ }
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.deleteTagInput = function(clickEvent) {
+ $(clickEvent.currentTarget).parent().remove();
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.onSubmit = function() {
+ new_tags_titles = this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-Input").map(function(){
+ if($(this).val()){
+ return $(this).val()
+ }
+ });
+ new_title = this.$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val()
+ new_description = this.$.find(".Ldt-CurrentSegmentInfobox-DescriptionInput").val()
+
+ var _this = this,
+ _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
+ _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}),
+ _annotation = new IriSP.Model.Annotation(this.currentSegment.id, _export); /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */
+
+ _annotation.setAnnotationType(this.currentSegment.getAnnotationType().id);
+ _annotation.setMedia(this.currentSegment.getMedia().id);
+ _annotation.setBegin(this.currentSegment.begin);
+ _annotation.setEnd(this.currentSegment.end);
+ _annotation.created = this.currentSegment.created;
+ _annotation.creator = this.currentSegment.creator;
+ _annotation.title = new_title /* Champ titre */
+ _annotation.description = new_description /* Champ description */
+ var _tagIds = IriSP._(new_tags_titles).map(function(_title) {
+ var _tags = _this.source.getTags(true).searchByTitle(_title, true);
+ if (_tags.length) {
+ var _tag = _tags[0];
+ }
+ else {
+ _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'), _this.source);
+ _tag.title = _title;
+ _this.source.getTags().push(_tag);
+ }
+ return _tag.id;
+ });
+ _annotation.setTags(_tagIds);
+ _annotation.project_id = this.project_id;
+
+ _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
+ _export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
+
+ _url = Mustache.to_html(this.api_endpoint_template, {annotation_id: this.currentSegment.id});
+
+ IriSP.jQuery.ajax({
+ url: _url,
+ type: this.api_method,
+ contentType: 'application/json',
+ data: _export.serialize(), /* L'objet Source est sérialisé */
+ success: function(_data) {
+ _export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
+ _export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */
+ _this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */
+ _this.segments.forEach(function(_segment){
+ if (_segment.id == _annotation.id){
+ _this.segments.removeElement(_segment)
+ }
+ })
+ _this.segments.push(_annotation)
+ _this.currentSegment = _annotation
+ _data = {
+ title: _this.currentSegment.title,
+ description : _this.currentSegment.description,
+ tags : _this.currentSegment.getTagTexts()
+ }
+ _this.$.html(Mustache.to_html(_this.template, _data))
+ if(_this.editable_segments&&_this.currentSegment){
+ _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));
+ }
+ _this.$.toggleClass("editing", false);
+ _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
+ },
+ error: function(_xhr, _error, _thrown) {
+ IriSP.log("Error when sending annotation", _thrown);
+ _export.getAnnotations().removeElement(_annotation, true);
+ }
+ });
}
IriSP.Widgets.CurrentSegmentInfobox.prototype.refresh = function() {
- var _list = this.segments;
-
- _currentTime = this.media.getCurrentTime();
- _list = _list.filter(function(_segment){
- return (_segment.begin <= _currentTime && _segment.end >= _currentTime);
- })
- if (_list.length > 0){
- _currentSegment = _list[0];
- _data = {
- title: _currentSegment.title,
- description : _currentSegment.description,
- tags : _currentSegment.getTagTexts()
+ if(!this.media.getTimeRange()){
+ var _currentTime = this.media.getCurrentTime();
+ var _list = this.segments.filter(function(_segment){
+ return (_segment.begin <= _currentTime && _segment.end >= _currentTime);
+ })
+
+ if (_list.length > 0){
+ if (this.currentSegment.id != _list[0].id){
+ this.currentSegment = _list[0];
+ _data = {
+ title: this.currentSegment.title,
+ description : this.currentSegment.description,
+ tags : this.currentSegment.getTagTexts()
+ }
+ this.$.html(Mustache.to_html(this.template, _data))
+ if(this.editable_segments&&this.currentSegment){
+ this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));
+ }
+ }
}
- this.$.html(Mustache.to_html(this.template, _data))
+ else {
+ this.currentSegment = false;
+ this.clearBox();
+ }
}
- else {
- var _empty_message = this.l10n.empty
- if (this.empty_message) {
- _empty_message = this.empty_message
- }
- this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>");
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.clearBox = function(){
+ var _empty_message = this.l10n.empty
+ if (this.empty_message) {
+ _empty_message = this.empty_message
}
+ this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>");
}
\ No newline at end of file
--- a/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css Fri Sep 18 16:09:40 2015 +0200
@@ -25,6 +25,8 @@
}
.Ldt-LatestAnnotation-Content{
+ max-width: 230px;
+ text-align: justify;
}
.Ldt-LatestAnnotation-Title{
@@ -37,3 +39,26 @@
font-size: 14px;
font-weight: bold;
}
+
+.Ldt-LatestAnnotation-CopyEditButton{
+ display: inline-block;
+ background-color: #d93c71;
+ color: #ffffff;
+ float: right;
+ cursor: pointer;
+ height: 14px;
+ width: 100px;
+ margin: 2px;
+ padding: 2px;
+ font-size: 11px;
+ border: 1px solid;
+ border-color: #eca3bc #631e34 #36101c #e16e93;
+ cursor: pointer;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.Ldt-LatestAnnotation-CopyEditButton:hover{
+ background-color: #e15581;
+ border-color: #222222 #e87d9f #f0adc3 #68273c;
+}
\ No newline at end of file
--- a/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js Fri Sep 18 16:09:40 2015 +0200
@@ -7,6 +7,9 @@
IriSP.Widgets.LatestAnnotation.prototype = new IriSP.Widgets.Widget();
IriSP.Widgets.LatestAnnotation.prototype.defaults = {
+ pre_draw_callback: function(){
+ return this.importUsers();
+ },
from_user: false,
filter_by_segment: false,
segments_annotation_type: "chap",
@@ -16,31 +19,142 @@
* Set to a username if you only want to display annotations from a given user
*/
show_only_annotation_from_user: false,
+ /*
+ * Displays a button that copy currently displayed annotation into CreateAnnotation input field
+ */
+ copy_and_edit_button: false,
+ /*
+ * Allows clicks on an annotation from Annotations to display the annotation content into this widget
+ */
+ selectable_annotations: false,
empty_message: false,
starts_hidden: false,
+ show_header: false,
+ custom_header: false,
+ make_name_string_function: function(params){
+ return params.username ? params.username : "Anonymous";
+ },
};
+IriSP.Widgets.LatestAnnotation.prototype.messages = {
+ fr : {
+ copy_and_edit: "Copier et Editer",
+ empty : "Aucune annotation à afficher",
+ header: "Dernière annotation"
+ },
+ en: {
+ copy_and_edit: "Copy and Edit",
+ empty: "No annotation to display",
+ header: "Last annotation"
+ }
+}
+
IriSP.Widgets.LatestAnnotation.prototype.template =
- "<div class='Ldt-LatestAnnotation'>"
+ "{{#show_header}}"
+ + "<p class='Ldt-LatestAnnotation-header'>"
+ + "{{#custom_header}}{{custom_header}}{{/custom_header}}"
+ + "{{^custom_header}}{{l10n.header}}{{/custom_header}}"
+ + "</p>"
+ + "{{/show_header}}"
+ + "<div class='Ldt-LatestAnnotation'>"
+ "</div>";
IriSP.Widgets.LatestAnnotation.prototype.annotationTemplate =
"<div class='Ldt-LatestAnnotation-Box'>"
- + " <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>"
- + " <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>"
- + " <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>"
+ + "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>"
+ + "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>"
+ + "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>"
+ "{{{annotation_content}}}"
- + " </div>"
+ + "</div>"
+ + "{{#copy_and_edit_button}}<div class='Ldt-LatestAnnotation-CopyEditButton'>{{button_text}}</div>{{/copy_and_edit_button}}"
+ "</div>"
+
+IriSP.Widgets.LatestAnnotation.prototype.importUsers = function(){
+ if (!this.source.users_data){
+ this.usernames = Array();
+ var _this = this,
+ _list = this.getWidgetAnnotations(),
+ usernames_list_string = "";
+
+ _list.forEach(function(_annotation){
+ if(_this.usernames.indexOf(_annotation.creator) == -1){
+ _this.usernames.push(_annotation.creator);
+ }
+ });
+ this.usernames.forEach(function(_username){
+ usernames_list_string+=_username+","
+ })
+ usernames_list_string = usernames_list_string.substring(0, usernames_list_string.length - 1);
+ _url = Mustache.to_html(this.api_users_endpoint, {usernames_list_string: encodeURIComponent(usernames_list_string), usernames_list_length: this.usernames.length});
+ return IriSP.jQuery.ajax({
+ async: false,
+ url: _url,
+ type: "GET",
+ success: function(_data) {
+ _this.source.users_data = _data.objects
+ },
+ error: function(_xhr, _error, _thrown) {
+ console.log(_xhr)
+ console.log(_error)
+ console.log(_thrown)
+ }
+ })
+ }
+}
+
IriSP.Widgets.LatestAnnotation.prototype.draw = function(){
var _this = this;
-
this.renderTemplate();
this.annotationContainer_$ = this.$.find('.Ldt-LatestAnnotation');
- this.onMediaEvent("timeupdate", "refresh");
+ if (this.selectable_annotations){
+ this.onMdpEvent("AnnotationsList.refresh", function(){
+ _this.getWidgetAnnotations().forEach(function(_annotation){
+ _annotation.off("click");
+ _annotation.on("click", function(){
+ var _user = {},
+ _user_display_string = "",
+ _users = this.source.users_data.filter(function(_user_data){
+ return _user_data.username == _annotation.creator
+ });
+ if (_users.length == 0){
+ _user.username = _annotation.creator;
+ }
+ else {
+ _user = _users[0];
+ }
+ _user_display_string = _this.make_name_string_function(_user)
+ _html = Mustache.to_html(_this.annotationTemplate, {
+ annotation_created: _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString(),
+ annotation_creator: _user_display_string,
+ annotation_title: _annotation.title,
+ annotation_content: _annotation.description,
+ copy_and_edit_button: _this.copy_and_edit_button,
+ button_text: _this.l10n.copy_and_edit,
+ });
+ _this.annotationContainer_$.html(_html);
+ _this.selectedAnnotation = true;
+ });
+ });
+ });
+
+ this.segments = _this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+ this.segments.forEach(function(_segment){
+ _segment.on("click", function(){
+ _this.selectedAnnotation = false;
+ })
+ })
+ this.currentSegment = false;
+ }
+
+ this.onMediaEvent("timeupdate", function(){
+ _this.refresh();
+ });
+ this.onMediaEvent("settimerange", function(_timeRange){
+ _this.refresh(_timeRange);
+ })
if (this.starts_hidden){
this.visible = true;
@@ -51,40 +165,59 @@
this.show();
}
+ this.selectedAnnotation = false; // This flag tells the widget if it must display last annotation (false) or clicked annotation (true)
+ this.player.trigger("AnnotationsList.refresh");
this.refresh();
}
-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)
- });
+IriSP.Widgets.LatestAnnotation.prototype.refresh = function(_timeRange){
+ _timeRange = typeof _timeRange !== 'undefined' ? _timeRange : false ;
+ var _this = this;
if (this.hide_without_segment){
- if (_currentSegments.length == 0){
+ if (!_timeRange && !this.media.getTimeRange()){
+ var _currentTime = this.media.getCurrentTime();
+ var _currentSegments = this.segments.filter(function(_segment){
+ return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+ });
+ if (_currentSegments.length == 0){
+ this.currentSegment = false;
+ this.selectedAnnotation = false;
+ }
+ else {
+ this.currentSegment = _currentSegments[0]
+ }
+ }
+ else {
+ var _segmentBegin = _timeRange? _timeRange[0] : this.media.getTimeRange()[0],
+ _segmentEnd = _timeRange? _timeRange[1] : this.media.getTimeRange()[1];
+ if ((!this.currentSegment)||(this.currentSegment.begin != _segmentBegin || this.currentSegment.end != _segmentEnd)) {
+ var _currentSegments = this.segments.filter(function(_segment){
+ return _segment.begin == _segmentBegin && _segment.end == _segmentEnd
+ });
+ if (_currentSegments.length > 0){
+ this.selectedAnnotation = false;
+ this.currentSegment = _currentSegments[0];
+ }
+ }
+ }
+ if (!this.currentSegment){
if (this.visible){
- this.hide()
+ this.hide();
}
}
else {
if (!this.visible){
- this.show()
+ this.show();
}
}
}
- if (this.visible){
+
+ if (this.visible && !this.selectedAnnotation){
var _list = this.getWidgetAnnotations();
+
if(this.filter_by_segment){
- if (_currentSegments.length == 0) {
+ if (!this.currentSegment) {
_list = _list.filter(function(_annotation){
return false;
});
@@ -92,40 +225,68 @@
else {
_list = _list.filter(function(_annotation){
_annotationTime = (_annotation.begin+_annotation.end)/2;
- return (_currentSegments[0].begin <= _annotationTime && _currentSegments[0].end >= _annotationTime);
+ return (_this.currentSegment.begin <= _annotationTime && _this.currentSegment.end >= _annotationTime);
});
}
- _list.sortBy(function(_annotation){
- return _annotation.created;
- });
-
- 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,
- });
+ }
+ _list = _list.sortBy(function(_annotation){
+ return _annotation.created;
+ });
+
+ var _latestAnnotation = false,
+ _html="",
+ _user_display_string = "",
+ _user = {};
+ if (_list.length != 0){
+ _latestAnnotation = _list.pop();
+ _users = this.source.users_data.filter(function(_user_data){
+ return _user_data.username == _latestAnnotation.creator
+ })
+ if (_users.length == 0){
+ _user.username = _latestAnnotation.creator;
}
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>";
+ _user = _users[0];
+ }
+ _user_display_string = this.make_name_string_function(_user)
+ _html = Mustache.to_html(this.annotationTemplate, {
+ annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(),
+ annotation_creator: _user_display_string,
+ annotation_title: _latestAnnotation.title,
+ annotation_content: _latestAnnotation.description,
+ copy_and_edit_button: this.copy_and_edit_button,
+ button_text: this.l10n.copy_and_edit,
+ });
+ }
+ else {
+ var _empty_message = this.l10n.empty
+ if (this.empty_message) {
+ _empty_message = this.empty_message
}
- this.annotationContainer_$.html(_html);
-
+ _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>"+_empty_message+"</div>";
}
+ this.annotationContainer_$.html(_html);
}
+
+ if(this.copy_and_edit_button){
+ this.copyAndEditButton_$ = this.$.find('.Ldt-LatestAnnotation-CopyEditButton');
+ this.copyAndEditButton_$.click(this.functionWrapper("copy_and_edit"));
+ }
+}
+
+IriSP.Widgets.LatestAnnotation.prototype.copy_and_edit = function(){
+ this.player.trigger("CreateAnnotation.show");
+ this.player.trigger("AnnotationsList.hide");
+ annotationText = $('.Ldt-LatestAnnotation-Content').get(0).innerHTML;
+
+ $('.Ldt-CreateAnnotation-Description').removeClass('empty');
+ $('.Ldt-CreateAnnotation-Description').val(annotationText);
}
IriSP.Widgets.LatestAnnotation.prototype.hide = function() {
if (this.visible){
this.visible = false;
+ this.$.find('.Ldt-LatestAnnotation-header').hide();
this.annotationContainer_$.hide()
}
}
@@ -133,6 +294,7 @@
IriSP.Widgets.LatestAnnotation.prototype.show = function() {
if(!this.visible){
this.visible = true;
+ this.$.find('.Ldt-LatestAnnotation-header').show();
this.annotationContainer_$.show()
}
}
--- a/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js Fri Sep 18 16:09:40 2015 +0200
@@ -757,6 +757,7 @@
this.volume = .5;
this.paused = true;
this.muted = false;
+ this.timeRange = false;
this.loadedMetadata = false;
var _this = this;
this.on("play", function() {
@@ -781,6 +782,18 @@
_a.trigger("enter");
_this.trigger("enter-annotation",_a);
});
+
+ if (_this.getTimeRange()){
+ if (_this.getTimeRange()[0] > _time) {
+ _this.pause();
+ _this.setCurrentTime(_this.getTimeRange()[0]);
+ }
+ if (_this.getTimeRange()[1] < _time){
+ _this.pause();
+ _this.setCurrentTime(_this.getTimeRange()[1]);
+ }
+ }
+
});
this.on("loadedmetadata", function() {
_this.loadedMetadata = true;
@@ -805,6 +818,10 @@
return this.muted;
};
+Playable.prototype.getTimeRange = function() {
+ return this.timeRange;
+}
+
Playable.prototype.setCurrentTime = function(_time) {
this.trigger("setcurrenttime",_time);
};
@@ -817,6 +834,16 @@
this.trigger("setmuted",_muted);
};
+Playable.prototype.setTimeRange = function(_timeBegin, _timeEnd) {
+ if ((_timeBegin < _timeEnd)&&(_timeBegin >= 0)&&(_timeEnd>0)){
+ return this.trigger("settimerange", [_timeBegin, _timeEnd]);
+ }
+}
+
+Playable.prototype.resetTimeRange = function() {
+ return this.trigger("resettimerange");
+}
+
Playable.prototype.play = function() {
this.trigger("setplay");
};
@@ -840,6 +867,17 @@
};
extendPrototype(Media, Playable);
+/* */
+
+var Media = Model.Media = function(_id, _source) {
+ Playable.call(this, _id, _source);
+ this.elementType = 'media';
+ this.duration = new Time();
+ this.video = '';
+ var _this = this;
+};
+
+extendPrototype(Media, Playable);
/* Default functions to be overriden by players */
@@ -1464,6 +1502,20 @@
}
});
+ media.on("settimerange", function(_timeRange){
+ media.timeRange = _timeRange;
+ try {
+ if (media.getCurrentTime() > _timeRange[0] || media.getCurrentTime() < _timeRange){
+ mediaEl.currentTime = (_timeRange[0] / 1000);
+ }
+ } catch (err) {
+ }
+ })
+
+ media.on("resettimerange", function(){
+ media.timeRange = false;
+ })
+
media.on("setplay", function() {
try {
mediaEl.play();
@@ -1517,7 +1569,6 @@
media.trigger("seeked");
});
-
};
/* START contentapi-serializer.js */
@@ -1913,6 +1964,7 @@
title: _data.title,
audio: _data.audio
},
+ id: _data.id ? _data.id : "", // If annotation is new, id will be undefined
tags: _data.getTagTexts(),
media: _data.getMedia().id,
project: _data.project_id,
@@ -2259,42 +2311,43 @@
Metadataplayer.prototype.loadLibs = function() {
ns.log("IriSP.Metadataplayer.prototype.loadLibs");
var $L = $LAB
- .script(ns.getLib("Mustache"));
+ .queueScript(ns.getLib("Mustache"));
formerJQuery = !!window.jQuery;
former$ = !!window.$;
formerUnderscore = !!window._;
if (typeof ns.jQuery === "undefined") {
- $L.script(ns.getLib("jQuery"));
+ $L.queueScript(ns.getLib("jQuery"));
}
if (typeof ns._ === "undefined") {
- $L.script(ns.getLib("underscore"));
+ $L.queueScript(ns.getLib("underscore"));
}
if (typeof window.JSON == "undefined") {
- $L.script(ns.getLib("json"));
+ $L.queueScript(ns.getLib("json"));
}
- $L.wait()
- .script(ns.getLib("jQueryUI"));
+ $L.queueWait().queueScript(ns.getLib("jQueryUI")).queueWait();
/* widget specific requirements */
for(var _i = 0; _i < this.config.widgets.length; _i++) {
var _t = this.config.widgets[_i].type;
if (typeof ns.widgetsRequirements[_t] !== "undefined" && typeof ns.widgetsRequirements[_t].requires !== "undefined" ) {
for (var _j = 0; _j < ns.widgetsRequirements[_t].requires.length; _j++) {
- $L.script(ns.getLib(ns.widgetsRequirements[_t].requires[_j]));
+ $L.queueScript(ns.getLib(ns.widgetsRequirements[_t].requires[_j]));
}
}
}
var _this = this;
- $L.wait(function() {
+ $L.queueWait(function() {
_this.onLibsLoaded();
});
+
+ $L.runQueue();
};
Metadataplayer.prototype.onLibsLoaded = function() {
@@ -2507,7 +2560,13 @@
_this.media = _this.source.getCurrentMedia(_mediaopts);
}
- _this.draw();
+
+ if (_this.pre_draw_callback){
+ IriSP.jQuery.when(_this.pre_draw_callback()).done(_this.draw());
+ }
+ else {
+ _this.draw();
+ }
_this.player.trigger("widget-loaded");
}
--- a/src/ldt/ldt/static/ldt/metadataplayer/PopcornPlayer.js Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/PopcornPlayer.js Fri Sep 18 16:09:40 2015 +0200
@@ -101,6 +101,20 @@
_popcorn.pause();
});
+ _media.on("settimerange", function(_timeRange){
+ _media.timeRange = _timeRange;
+ try {
+ if (_media.getCurrentTime() > _timeRange[0] || _media.getCurrentTime() < _timeRange){
+ _popcorn.currentTime(_timeRange[0] / 1000);
+ }
+ } catch (err) {
+ }
+ })
+
+ _media.on("resettimerange", function(){
+ _media.timeRange = false;
+ })
+
// Binding Popcorn events to media
function getVolume() {
--- a/src/ldt/ldt/static/ldt/metadataplayer/Segments.js Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Segments.js Fri Sep 18 16:09:40 2015 +0200
@@ -14,8 +14,10 @@
overlap: .25,
found_color: "#FF00FC",
faded_found_color: "#ff80fc",
- // Display creator info in segment tooltip
- show_creator: true
+ selected_color: "#74d600",
+ faded_selected_color: "#baf9b5",
+ no_tooltip: false,
+ use_timerange: false,
};
IriSP.Widgets.Segments.prototype.template =
@@ -79,7 +81,7 @@
color : color,
medcolor: medcolor,
lowcolor: lowcolor,
- text: ((_this.show_creator && _annotation.creator) ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),
+ text: (_annotation.creator ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),
left : _left,
width : _width,
top: _top,
@@ -91,17 +93,40 @@
};
var _html = Mustache.to_html(_this.annotationTemplate, _data),
_el = IriSP.jQuery(_html);
- _el.mouseover(function() {
+ _el.mouseover(function() {
_annotation.trigger("select");
- _this.player.trigger('annotation-select', _annotation);
})
.mouseout(function() {
_annotation.trigger("unselect");
- _this.player.trigger('annotation-unselect', _annotation);
})
.click(function() {
+ if(_this.use_timerange){
+ if(!_this.media.getTimeRange()){
+ _this.media.setTimeRange(_annotation.begin, _annotation.end)
+ _this.$segments.each(function(){
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", lowcolor).removeClass("selected");
+ })
+ _el.css("background", _this.selected_color).addClass("selected");
+ }
+ else if (_this.media.getTimeRange()[0]==_annotation.begin || _this.media.getTimeRange()[1]==_annotation.end){
+ _this.media.resetTimeRange();
+ _this.$segments.each(function(){
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", lowcolor).removeClass("selected");
+ _annotation.trigger("select");
+ })
+ }
+ else {
+ _this.media.setTimeRange(_annotation.begin, _annotation.end);
+ _this.$segments.each(function(){
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", lowcolor).removeClass("selected");
+ })
+ _el.css("background", _this.selected_color).addClass("selected");
+ }
+ }
_annotation.trigger("click");
- _this.player.trigger('annotation-click', _annotation);
})
.appendTo(list_$);
IriSP.attachDndData(_el, {
@@ -118,9 +143,13 @@
_segment.css({
background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")
});
+ _segment.css({
+ background: _segment.hasClass("selected") ? _this.faded_selected_color : _segment.attr("data-low-color")
+ })
});
_el.css({
background: _el.hasClass("found") ? _this.found_color: color,
+ background: _el.hasClass("selected") ? _this.selected_color: color,
"z-index": ++zindex
});
if (_this.tooltip) {
@@ -134,6 +163,7 @@
_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"));
+ _segment.css("background", _segment.hasClass("selected") ? _this.selected_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
});
});
_annotation.on("found", function() {
@@ -150,15 +180,17 @@
background : this.background,
margin: "1px 0"
});
- this.insertSubwidget(
- this.$.find(".Ldt-Segments-Tooltip"),
- {
- type: "Tooltip",
- min_x: 0,
- max_x: this.width
- },
- "tooltip"
- );
+ if (!this.no_tooltip){
+ this.insertSubwidget(
+ this.$.find(".Ldt-Segments-Tooltip"),
+ {
+ type: "Tooltip",
+ min_x: 0,
+ max_x: this.width
+ },
+ "tooltip"
+ );
+ }
this.$segments = this.$.find('.Ldt-Segments-Segment');
this.source.getAnnotations().on("search", function() {
searching = true;
@@ -172,9 +204,10 @@
});
};
-IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
+IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
var _x = Math.floor( this.width * _time / this.media.duration);
this.$.find('.Ldt-Segments-Position').css({
left: _x + "px"
});
};
+