diff -r 539c9bee5372 -r 7623f9af9272 src/widgets/AnnotationsList.js
--- a/src/widgets/AnnotationsList.js	Fri Sep 25 14:45:38 2015 +0200
+++ b/src/widgets/AnnotationsList.js	Fri Oct 02 11:27:17 2015 +0200
@@ -2,11 +2,12 @@
     IriSP.Widgets.Widget.call(this, player, config);
     this.lastIds = [];
     var _this = this;
-    this.throttledRefresh = IriSP._.throttle(function() {
-        _this.refresh(false);
+    this.throttledRefresh = IriSP._.throttle(function(full) {
+        _this.refresh(full);
     }, 800);
     this.searchString = false;
     this.lastSearch = false;
+    this.localSource = undefined;
 };
 
 IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
@@ -25,7 +26,7 @@
      * number of milliseconds before/after the current timecode when calling the
      * segment API
      */
-    ajax_granularity : 600000, 
+    ajax_granularity : 600000,
     default_thumbnail : "",
     /*
      * URL when the annotation is not in the current project, e.g.
@@ -36,6 +37,25 @@
     refresh_interval : 0,
     limit_count : 20,
     newest_first : false,
+
+    show_audio: true,
+    show_creator: false,
+    show_controls: false,
+    show_end_time: true,
+    show_publish: false,
+    show_twitter: false,
+    twitter_hashtag: '',
+    // Callback for Edit action. Leave undefined for default action.
+    on_edit: undefined,
+    publish_type: "PublicContribution",
+    // Used to publish annotations
+    api_endpoint_template: "",
+    api_serializer: "ldt_annotate",
+    api_method: "POST",
+    editable: false,
+    // Id that will be used as localStorage key
+    editable_storage: "",
+
     always_visible : false,
     start_visible: true,
     show_audio : true,
@@ -77,6 +97,7 @@
      * Show a text field that filter annotations by username
      */
     tags : true,
+
     polemics : [{
         keyword: "++",
         background_color: "#c9ecc6"
@@ -93,12 +114,12 @@
 };
 
 IriSP.Widgets.AnnotationsList.prototype.importUsers = function(){
-    if (!this.source.users_data){
+    if (!this.source.users_data && this.api_users_endpoint){
         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);
@@ -129,6 +150,16 @@
     en: {
         voice_annotation: "Voice Annotation",
         now_playing: "Now playing...",
+        previous: "Previous",
+        next: "Next",
+        set_time: "Double-click to update to current player time",
+        edit_annotation: "Edit note",
+        delete_annotation: "Delete note",
+        publish_annotation: "Make note public",
+        import_annotations: "Paste or load notes in this field and press Import.",
+        confirm_delete_message: "You are about to delete {{ annotation.title }}. Are you sure you want to delete it?",
+        confirm_publish_message: "You are about to publish {{ annotation.title }}. Are you sure you want to make it public?",
+        tweet_annotation: "Tweet annotation",
         everyone: "Everyone",
         header: "Annotations for this content",
         segment_filter: "All cuttings",
@@ -144,6 +175,16 @@
     fr: {
         voice_annotation: "Annotation Vocale",
         now_playing: "Lecture en cours...",
+        previous: "Précédent",
+        next: "Suivant",
+        set_time: "Double-cliquer pour fixer au temps du lecteur",
+        edit_annotation: "Éditer la note",
+        delete_annotation: "Supprimer la note",
+        publish_annotation: "Rendre la note publique",
+        import_annotations: "Copiez ou chargez des notes dans ce champ et appuyez sur Import",
+        confirm_delete_message: "Vous allez supprimer {{ annotation.title }}. Êtes-vous certain(e) ?",
+        confirm_publish_message: "Vous allez publier {{ annotation.title }}. Êtes-vous certain(e) ?",
+        tweet_annotation: "Tweeter l'annotation",
         everyone: "Tous",
         header: "Annotations sur ce contenu",
         segment_filter: "Tous les segments",
@@ -174,61 +215,69 @@
     +             '{{#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_controls}}<div class="Ldt-AnnotationsList-Controls"><span class="Ldt-AnnotationsList-Control-Prev">{{ l10n.previous }}</span> | <span class="Ldt-AnnotationsList-Control-Next">{{ l10n.next }}</span></div>{{/show_controls}}'
     +         '{{#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">'
+    +     '<div data-annotation="{{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">'
+    +     '<div data-annotation="{{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">'
+    +     '<div data-annotation="{{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">'
+    +     '<div data.annotation="{{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 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>'
+IriSP.Widgets.AnnotationsList.prototype.annotationTemplate =
+    '<li class="Ldt-AnnotationsList-li Ldt-Highlighter-Annotation Ldt-TraceMe" data-annotation="{{ id }}" data-begin="{{ begin_ms }}" data-end="{{ end_ms }}" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
+    + '<div data-annotation="{{ id }}" class="Ldt-AnnotationsList-ThumbContainer Ldt-AnnotationsList-Annotation-Screen Ldt-AnnotationsList-Annotation-ScreenMain">'
+    +   '<a href="{{url}}" draggable="true">'
+    +     '<img title="{{ begin }} - {{ title }}" class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
+    +   '</a>'
     + '</div>'
     + '{{#allow_annotations_deletion}}'
-    + '<div id={{id}} class="Ldt-AnnotationsList-DeleteButton">&#10006;</div>'
+    + '<div data-annotation="{{ id }}" class="Ldt-AnnotationsList-DeleteButton">&#10006;</div>'
     + '{{/allow_annotations_deletion}}'
-    + '{{#show_timecode}}<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>{{/show_timecode}}'
-    + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
-    + '<a {{#url}} href="{{url}}" {{/url}}>{{{htitle}}}</a>'
+    + '{{#show_timecode}}<div title="{{l10n.set_time}}" class="Ldt-AnnotationsList-Duration"><span class="Ldt-AnnotationsList-Begin Ldt-live-editable Ldt-AnnotationsList-TimeEdit" data-editable_value="{{begin}}" data-editable_id="{{id}}" data-editable_field="begin" data-editable_type="timestamp">{{begin}}</span>{{#show_end_time}} - <span class="Ldt-AnnotationsList-End Ldt-live-editable" data-editable_value="{{end}}" data-editable_id="{{id}}" data-editable_field="end" data-editable_type="timestamp">{{end}}</span>{{/show_end_time}}</div>{{/show_timecode}}'
+    + '<h3 class="Ldt-AnnotationsList-Title Ldt-Annotation-Timecode" data-timecode="{{ begin_ms }}" draggable="true">'
+    +   '<span class="Ldt-AnnotationsList-TitleContent Ldt-live-editable" data-editable_value="{{title}}" data-editable_type="multiline" data-editable_id="{{id}}" data-editable_field="title">{{{htitle}}}</span>'
+    + '{{#show_creator}}<span class="Ldt-AnnotationsList-Creator">{{ creator }}</span>{{/show_creator}}'
     + '</h3>'
-    + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
+    + '<p class="Ldt-AnnotationsList-Description Ldt-live-editable" data-editable_type="multiline" data-editable_value="{{description}}" data-editable_id="{{id}}" data-editable_field="description">{{{hdescription}}}</p>'
     + '{{#created}}'
     + '<div class="Ldt-AnnotationsList-CreationDate">{{{created}}}</div>'
     + '{{/created}}'
     + '{{#tags.length}}'
     + '<ul class="Ldt-AnnotationsList-Tags">'
-    + '{{#tags}}'
-    + '{{#.}}'
-    + '<li class="Ldt-AnnotationsList-Tag-Li">'
-    + '<span>{{.}}</span>'
-    + '</li>'
-    + '{{/.}}'
-    + '{{/tags}}'
+    +   '{{#tags}}'
+    +   '{{#.}}'
+    +   '<li class="Ldt-AnnotationsList-Tag-Li">'
+    +     '<span>{{.}}</span>'
+    +   '</li>'
+    +   '{{/.}}'
+    +   '{{/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}}'
+    + '<div class="Ldt-AnnotationsList-EditControls">'
+    +    '{{#show_twitter}}<a title="{{l10n.tweet_annotation}}" target="_blank" href="https://twitter.com/intent/tweet?{{twitter_param}}"><img width="16" height="16" src="metadataplayer/img/twitter.svg"></a>{{/show_twitter}}'
+    +    '{{#show_publish}}<div title="{{l10n.publish_annotation}}" class="Ldt-AnnotationsList-PublishAnnotation" data-editable_id="{{id}}"></div>{{/show_publish}}'
+    +    '{{#editable}}<div title="{{l10n.edit_annotation}}" class="Ldt-AnnotationsList-Edit" data-editable_id="{{id}}"></div>'
+    +    '<div title="{{l10n.delete_annotation}}" class="Ldt-AnnotationsList-Delete" data-editable_id="{{id}}"></div>{{/editable}}'
+    + '</div>'
     + '</li>';
 
 // obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project
@@ -270,6 +319,78 @@
     }
 };
 
+/*
+ * Import annotations
+ */
+IriSP.Widgets.AnnotationsList.prototype.importAnnotations = function () {
+    var widget = this;
+    var $ = IriSP.jQuery;
+    var textarea = $("<textarea>");
+    var el = $("<div>")
+            .append($("<span>")
+                    .addClass("importAnnotationsLabel")
+                    .text(widget.messages.import_annotations))
+            .addClass("importContainer")
+            .dialog({
+                title: "Annotation import",
+                autoOpen: true,
+                width: '80%',
+                minHeight: '400',
+                height: 400,
+                buttons: [ { text: "Close", click: function() { $( this ).dialog( "close" ); } },
+                           // { text: "Load", click: function () {
+                           //     // TODO
+                           //     // http://www.html5rocks.com/en/tutorials/file/dndfiles/?redirect_from_locale=fr
+                           //     console.log("Load from a file");
+                           // } },
+                           { text: "Import", click: function () {
+                               // FIXME: this should be a model.Source method
+                               var time_regexp = /(\[[\d:]+\])/;
+                               console.log("Import data");
+                               // widget.localSource
+                               // Dummy parsing for the moment
+                               var data = textarea[0].value
+                                       .split(time_regexp)
+                                       .filter( function (s) { return ! s.match(/^\s*$/)});
+                               var begin = null,
+                                   end = null,
+                                   content = null,
+                                   // Previous is either null, timestamp or text
+                                   previous = null;
+                               for (var i = 0; i < data.length; i++) {
+                                   var el = data[i];
+                                   if (el.match(time_regexp)) {
+                                       if (previous == 'text') {
+                                           // Timestamp following text. Let's make it an annotation
+                                           end = IriSP.timestamp2ms(el.slice(1, -1));
+                                           TODO.createAnnotation(begin, end, content);
+                                           // Preserve the end value, which may be the begin value of the next annotation.
+                                           begin = end;
+                                           end = null;
+                                           content = null;
+                                       } else {
+                                           //  (previous == 'timestamp' || previous == null)
+                                           // 2 consecutive timestamps. Let's start a new annotation
+                                           content = null;
+                                           begin = IriSP.timestamp2ms(el.slice(1, -1));
+                                           end = null;
+                                       };
+                                       previous = 'timestamp';
+                                   } else {
+                                       // Text content
+                                       content = el;
+                                       previous = 'text';
+                                   }
+                                   // Last textual value
+                                   if (previous == 'text' && begin !== null) {
+                                       TODO.createAnnotation(begin, begin, content);
+                                   }
+                               }
+                           } } ]
+            });
+
+}
+
 IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
     _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw);
     if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) {
@@ -390,7 +511,7 @@
     }
     
     var _ids = _list.idIndex;
-    
+
     if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) {
         /* This part only gets executed if the list needs updating */
         this.lastSearch = this.searchString;
@@ -411,19 +532,22 @@
                             annotationType : _annotation.annotationType.id
                         }
                     )
-                    : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id
+                    : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id + '&t=' + (_annotation.begin / 1000.0)
                     )
             );
             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) {
-                var _users = _this.source.users_data.filter(function(_user_data){
-                    return _user_data.username == _annotation.creator
-                }),
+                var _users = [],
                     _user = {};
+                if (_this.source.users_data) {
+                    _users = _this.source.users_data.filter(function(_user_data){
+                        return _user_data.username == _annotation.creator;
+                    });
+                }
                 if (_users.length == 0){
                     _user.username = _annotation.creator
                 }
@@ -460,7 +584,10 @@
                 id : _annotation.id,
                 media_id : _annotation.getMedia().id,
                 htitle : IriSP.textFieldHtml(_title),
+                title: _title,
+                creator: _annotation.creator ? ' (' + _annotation.creator + ')' : "",
                 hdescription : IriSP.textFieldHtml(_description),
+                description: _description,
                 begin : _annotation.begin.toString(),
                 end : _annotation.end.toString(),
                 created : _created,
@@ -470,6 +597,11 @@
                 tags : _tags,
                 specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
                 l10n: _this.l10n,
+                editable: _this.editable,
+                show_publish: _this.show_publish,
+                show_creator: _this.show_creator,
+                show_twitter: _this.show_twitter,
+                twitter_param: IriSP.jQuery.param({ url: _url, text: IriSP.textFieldHtml(_title) + (_this.twitter_hashtag ? ' #' + _this.twitter_hashtag : "") }),
                 allow_annotations_deletion: _this.allow_annotations_deletion
             };
             if (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null") {
@@ -521,10 +653,11 @@
                 })
                 .appendTo(_this.list_$);
             IriSP.attachDndData(_el.find("[draggable]"), {
-                title: _title,
-                description: _description,
-                uri: _url,
-                image: _annotation.thumbnail
+            	title: _title,
+            	description: _description,
+            	uri: _url,
+                image: _annotation.thumbnail,
+                text: '[' + _annotation.begin.toString() + '] ' + _title
             });
             _el.on("remove", function() {
                 _annotation.off("select", _onselect);
@@ -533,7 +666,7 @@
             _annotation.on("select", _onselect);
             _annotation.on("unselect", _onunselect);
         });
-        
+
         /* Correct the empty tag bug */
         this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() {
             var _el = IriSP.jQuery(this);
@@ -541,11 +674,201 @@
                 _el.remove();
             }
         });
-    
+
+        if (this.editable) {
+            var widget = _this;
+            var $ = IriSP.jQuery;
+
+            var edit_element = function (_this, insertion_point) {
+                var feedback_wrong = "#FF9999";
+                var feedback_ok = "#99FF99";
+
+                // insertion_point can be used to specify where to
+                // insert the input field.  Firefox is buggy wrt input
+                // fields inside <a> or <h?> tags, it does not
+                // propagate mouse clicks. If _this is a <a> then we
+                // have to specify the ancestor before which we can
+                // insert the input widget.
+                if (insertion_point === undefined)
+                    insertion_point = _this;
+
+                // Insert input element
+                var input_element = $(_this.dataset.editable_type === 'multiline' ? "<textarea>" : "<input>")
+                        .addClass("editableInput")
+                        .insertBefore($(insertion_point));
+                input_element[0].value = _this.dataset.editable_value;
+                $(input_element).show().focus();
+                $(_this).addClass("editing");
+
+                function feedback(color) {
+                    // Give some feedback
+                    $(_this).removeClass("editing");
+                    input_element.remove();
+                    var previous_color = $(_this).css("background-color");
+                    $(_this).stop().css("background-color", color)
+                        .animate({ backgroundColor: previous_color}, 1000);
+                }
+
+                function cancelChanges(s) {
+                    feedback(feedback_wrong);
+                }
+                function validateChanges() {
+                    var n = input_element[0].value;
+                    if (n == _this.dataset.editable_value) {
+                        // No change
+                        feedback(feedback_ok);
+                        return;
+                    }
+                    if (n == '') {
+                        // Delete annotation
+                        delete_local_annotation(_this.dataset.editable_id);
+                        widget.player.trigger("Annotation.delete", _this.dataset.editable_id);
+                        return;
+                    } else {
+                        // Convert value if necessary.
+                        var val = n;
+                        if (_this.dataset.editable_type == 'timestamp') {
+                            val = IriSP.timestamp2ms(n);
+                            if (Number.isNaN(val)) {
+                                // Invalid value. Cancel changes
+                                cancelChanges();
+                                return;
+                            }
+                        }
+                        _this.dataset.editable_value = n;
+                        n = val;
+                        $(_this).text(val);
+                    }
+
+                    // We cannot use .getElement since it fetches
+                    // elements from the global Directory
+                    var an = get_local_annotation(_this.dataset.editable_id);
+                    if (an === undefined) {
+                        console.log("Strange error: cannot find edited annotation");
+                        feedback(feedback_wrong);
+                    } else {
+                        _this.dataset.editable_value = n;
+                        // Update annotation for storage
+                        if (_this.dataset.editable_field == 'begin')
+                            an.setBegin(n);
+                        else if (_this.dataset.editable_field == 'end')
+                            an.setEnd(n);
+                        else
+                            an[_this.dataset.editable_field] = n;
+                        an.modified = new Date();
+                        // FIXME: use user name, when available
+                        an.contributor = widget.player.config.username || "COCo User";
+                        widget.player.addLocalAnnotation(an);
+                        widget.player.trigger("Annotation.update", an);
+                        feedback(feedback_ok);
+                    }
+                }
+                $(input_element).bind('keydown', function(e) {
+                    if (e.which == 13) {
+                        e.preventDefault();
+                        validateChanges();
+                    } else if (e.which == 27) {
+                        e.preventDefault();
+                        cancelChanges();
+                    }
+                }).bind("blur", function (e) {
+                    validateChanges();
+                });
+            };
+
+            var get_local_annotation = function (ident) {
+                return widget.player.getLocalAnnotation(ident);
+            };
+
+            var save_local_annotations = function() {
+                widget.player.saveLocalAnnotations();
+                // Merge modifications into widget source
+                widget.source.merge(widget.player.localSource);
+            };
+
+            var delete_local_annotation = function(ident) {
+                widget.source.getAnnotations().removeId(ident, true);
+                widget.player.deleteLocalAnnotation(ident);
+                widget.refresh(true);
+            };
+
+            this.$.find('.Ldt-AnnotationsList-Delete').click(function(e) {
+                // Delete annotation
+                var _annotation = get_local_annotation(this.dataset.editable_id);
+                if (confirm(Mustache.to_html(widget.l10n.confirm_delete_message, { annotation: _annotation })))
+                    delete_local_annotation(this.dataset.editable_id);
+                widget.refresh(true);
+            });
+            this.$.find('.Ldt-AnnotationsList-Edit').click(function(e) {
+                if (widget.on_edit) {
+                    var _annotation = get_local_annotation(this.dataset.editable_id);
+                    widget.on_edit(_annotation);
+                } else {
+                    // Edit annotation title. We have to specify the insertion point.
+                    var element = $(this).parents(".Ldt-AnnotationsList-li").find(".Ldt-AnnotationsList-TitleContent.Ldt-live-editable");
+                    edit_element(element[0]);
+                }
+            });
+            this.$.find('.Ldt-AnnotationsList-PublishAnnotation').click(function(e) {
+                var _annotation = get_local_annotation(this.dataset.editable_id);
+                // Publish annotation to the server
+                if (!confirm(Mustache.to_html(widget.l10n.confirm_publish_message, { annotation: _annotation })))
+                    return;
+                var _url = Mustache.to_html(widget.api_endpoint_template, {id: widget.source.projectId});
+                if (_url !== "") {
+                    var _export = widget.player.sourceManager.newLocalSource({serializer: IriSP.serializers[widget.api_serializer]});
+
+                    if (widget.publish_type) {
+                        // If publish_type is specified, try to set the annotation type of the exported annotation
+                        var at = widget.source.getAnnotationTypes().filter(function(at) { return at.title == widget.publish_type; });
+                        if (at.length == 1) {
+                            _annotation.setAnnotationType(at[0].id);
+                        }
+                    }
+                    var _exportedAnnotations = new IriSP.Model.List(widget.player.sourceManager);
+                    _exportedAnnotations.push(_annotation);
+                    _export.addList("annotation", _exportedAnnotations);
+                    IriSP.jQuery.ajax({
+                        url: _url,
+                        type: widget.api_method,
+                        contentType: 'application/json',
+                        data: _export.serialize(),
+                        success: function(_data) {
+                            $(this).addClass("published");
+                            // Save the published information
+                            var an = get_local_annotation(_annotation.id);
+                            // FIXME: handle "published" tag
+                            an.setTags( [ "published" ]);
+                            save_local_annotations();
+                            widget.player.trigger("Annotation.publish", _annotation);
+                        },
+                        error: function(_xhr, _error, _thrown) {
+                            IriSP.log("Error when sending annotation", _thrown);
+                        }
+                    });
+                }
+            });
+            this.$.find('.Ldt-AnnotationsList-TimeEdit').dblclick(function(e) {
+                var _this = this;
+                // Use current player time
+                var an = get_local_annotation(_this.dataset.editable_id);
+                if (an !== undefined) {
+                    // FIXME: implement Undo feature
+                    an.setBegin(widget.media.getCurrentTime().milliseconds);
+                    save_local_annotations();
+                    widget.player.trigger("Annotation.update", an);
+                    widget.refresh(true);
+                }
+            });
+        };
+
         this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
             _this.source.getAnnotations().search(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
         });
-        
+        this.$.find('.Ldt-Annotation-Timecode').click(function () {
+            _this.media.setCurrentTime(Number(this.dataset.timecode));
+        });
+
         this.$.find(".Ldt-AnnotationsList-Play").click(function() {
             var _el = IriSP.jQuery(this),
                 _annid = _el.attr("data-annotation-id");
@@ -554,7 +877,7 @@
             }
             _this.media.pause();
         });
-        
+
         if (this.source.getAnnotations().searching) {
             var rx = _this.source.getAnnotations().regexp || false;
             this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() {
@@ -565,7 +888,7 @@
 
         this.$.find(".Ldt-AnnotationsList-DeleteButton").click(_this.functionWrapper("onDeleteClick"))
     }
-    
+
     if (this.ajax_url) {
         if (this.mashupMode) {
             this.ajaxMashup();
@@ -581,7 +904,7 @@
 
 IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event){
     
-    ann_id = event.target.id;
+    ann_id = event.target.dataset.annotation;
     delete_preview_$ = this.$.find(".Ldt-AnnotationsList-ul-ToDelete");
     delete_preview_$.html("");
     _list = this.getWidgetAnnotations()
@@ -592,10 +915,13 @@
         _title = "",
         _this = this;
     if (_annotation.creator) {
-        var _users = _this.source.users_data.filter(function(_user_data){
-            return _user_data.username == _annotation.creator
-        }),
+        var _users = [],
             _user = {};
+        if (_this.source.users_data) {
+            _users = _this.source.users_data.filter(function(_user_data){
+                return _user_data.username == _annotation.creator;
+            });
+        }
         if (_users.length == 0){
             _user.username = _annotation.creator
         }
@@ -709,11 +1035,10 @@
 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");
     
@@ -797,7 +1122,7 @@
     this.source.getAnnotations().on("search-cleared", function() {
         _this.throttledRefresh();
     });
-    
+
     this.onMdpEvent("AnnotationsList.refresh", function() {
         if (_this.ajax_url) {
             if (_this.mashupMode) {
@@ -806,9 +1131,20 @@
                 _this.ajaxSource();
             }
         }
-        _this.throttledRefresh();
+        _this.throttledRefresh(false);
     });
-    
+
+    this.onMdpEvent("AnnotationsList.update", function() {
+        if (_this.ajax_url) {
+            if (_this.mashupMode) {
+                _this.ajaxMashup();
+            } else {
+                _this.ajaxSource();
+            }
+        }
+        _this.throttledRefresh(true);
+    });
+
     if (this.ajax_url) {
         if (this.mashupMode) {
             this.ajaxMashup();
@@ -818,7 +1154,7 @@
     } else {
         this.currentSource = this.source;
     }
-    
+
     if (this.refresh_interval) {
         window.setInterval(function() {
             _this.currentSource.get();
@@ -843,7 +1179,7 @@
     for (var _i = 0; _i < _events.length; _i++) {
         this.onMediaEvent(_events[_i], this.throttledRefresh);
     }
-    
+
     this.throttledRefresh();
     
     this.showScreen("Main");