# HG changeset patch
# User durandn
# Date 1446476567 -3600
# Node ID 21c941c07e7cc2976730b15bc425f4dceca04af6
# Parent  69fb08fbc4b13ca0d15f44ea9939dfbad45b4def
Changes and fixes for Segments scenarii (segment boxes colors and position, annotations list improvements)

diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/css/style.css
--- a/server/src/remie/static/remie/css/style.css	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/css/style.css	Mon Nov 02 16:02:47 2015 +0100
@@ -48,6 +48,7 @@
 
 #LatestAnnotation_container{
     margin-top: 10px;
+    margin-left: 40px;
 }
 
 #CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox,
@@ -70,7 +71,6 @@
 
 #CurrentSegmentInfobox_container.editing .Ldt-CurrentSegmentInfobox{
     background-color: #FFFFFF;
-    padding-bottom: 40px;
 }
 
 .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-NoSegment{
@@ -97,13 +97,20 @@
     font-family: Open-Sans-Light;
     position: absolute;
     left: -655px;
-    top: 461;
+    top: 437px;
     width: 560px;
     margin:0 0 0 40px;
     font-weight: normal;
     text-indent:10px;
 }
 
+.Ldt-CurrentSegmentInfobox-SelectedSegment,
+.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Title{
+	border: solid 3px #A2CF18 !important;
+	background-color: #A2CF18 !important;
+	color: #ffffff;
+}
+
 #CurrentSegmentInfobox_container.editing .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Title{
     background: #ffffff !important;
     border: 2px solid #848484;
@@ -112,11 +119,10 @@
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton,
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton {
     float: left;
-    position: absolute;
     bottom: 0;
     height: 27px;
     line-height: 27px;
-    margin: 10px 0 0;
+    margin: 5px 5px 5px 0px
     width: 86px;
 }
 
@@ -139,6 +145,7 @@
 .Ldt-CurrentSegmentInfobox-Tags-Ul .Ldt-CurrentSegmentInfobox-Tags-Li{
     border:none;
     font-size:16px;
+    color: #AEAEAE;
 }
 
 #info_panel p{
@@ -163,7 +170,9 @@
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton,
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton,
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-EditButton,
-.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CreateTagInput-Add {
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CreateTagInput-Add,
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-ConfirmDelete,
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-CancelDelete {
     background: inherit;
     border: none;
     background-color: #848484;
@@ -172,6 +181,50 @@
     border-radius: 0 0 3px 0;
 }
 
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-ConfirmDelete,
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-CancelDelete{
+	display: inline-block;
+    color: #ffffff;
+    cursor: pointer;
+    height: 25px;
+    width: 150px;
+    border: 1px solid;
+    cursor: pointer;
+    margin-right: 10px;
+    margin-left: 10px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding: 4px;
+    text-align: center;
+	vertical-align: middle;
+	font-weight: normal;
+	line-height: 30px;
+}
+
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-ConfirmDelete{
+	background-color: #A2CF18;
+	margin-right: 0px;
+}
+
+
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-CancelDelete{
+	background-color: #cd000b;
+	margin-left: 0px;
+}
+
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-ScreenDelete,
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-ScreenSending,
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-ScreenError,
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-ScreenSuccess{
+	padding:5px;
+	border: 3px solid #cd000b;
+	color: #848484;
+}
+
+.Ldt-AnnotationsController-ShowAnnotationsListButton{
+	visibility: hidden;
+}
+
 .Ldt-LatestAnnotation-box .Ldt-LatestAnnotation-CopyEditButton:hover,
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowAnnotationsListButton:hover,
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowCreateAnnotationButton:hover,
@@ -180,13 +233,16 @@
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-EditButton:hover,
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton:hover,
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton:hover,
-.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CreateTagInput-Add:hover {
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CreateTagInput-Add:hover,
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-ConfirmDelete:hover,
+.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-CancelDelete:hover {
     background-color: #b7b7b7;
 }
 
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton,
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CreateTagInput-Add {
     background-color: #a2cf18;
+    border: 1px solid #ffffff !important
 }
 
 .Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton {
@@ -196,9 +252,20 @@
 
 /* -------- Override LatestAnnotation style -------- */
 
+
+#LatestAnnotation_container{
+    margin-top: 110px;
+    width: 600px;
+}
+
 #LatestAnnotation_container .Ldt-LatestAnnotation-Box {
     background: inherit;
 }
+
+.Ldt-LatestAnnotation{
+	width: 565px !important;
+}
+
 .Ldt-LatestAnnotation-Element.Ldt-LatestAnnotation-CreationDate,
 .Ldt-LatestAnnotation-Element.Ldt-LatestAnnotation-Title,
 .Ldt-LatestAnnotation-Element.Ldt-LatestAnnotation-Content{
@@ -250,16 +317,21 @@
 
 .Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main .Ldt-CreateAnnotation-Submit{
     background-color: #a2cf18;
+    border: 1px solid #ffffff;
     left: 0;
+    margin-left: 5px;
 }
 
 .Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main .Ldt-CreateAnnotation-PreviewSubmit{
 	left: 0;
+    margin-left: 5px;
 }
 
 .Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main .Ldt-CreateAnnotation-Cancel{
     background-color: #CD000B;
+    border: 1px solid #ffffff;
     left: 95px;
+    margin-left: 5px;
 }
 
 #AnnotationsController_container .Ldt-AnnotationsController{
@@ -289,7 +361,15 @@
 }
 
 .Ldt-CreateAnnotation-Inner .Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main{
-    margin-top: 30px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    background-color: #a2cf18;
+}
+
+.Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main textarea{
+	margin-top: 5px !important;
+	margin-left: 5px !important;
+	width: calc(100% - 10px) !important;
 }
 
 #CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox textarea,
@@ -315,6 +395,11 @@
     overflow-x: hidden;
 }
 
+.Ldt-AnnotationsList-header{
+	margin-top: 5px;
+	width: 400px !important;
+}
+
 ul.Ldt-AnnotationsList-ul li:nth-child(2n+1){
     background-color: #f0f5f6;
 }
@@ -325,6 +410,7 @@
     line-height: 30px;
     cursor: pointer;
     height: 30px;
+    overflow: hidden;
 }
 li.Ldt-AnnotationsList-li:hover{
     background: none;
@@ -348,9 +434,19 @@
     color: #848484;
 }
 
-.Ldt-AnnotationsList-li .Ldt-AnnotationsList-Creator{
+.Ldt-AnnotationsList-li span.Ldt-AnnotationsList-Creator{
 	color: #848484;
 	margin-right: 35px;
+	width: 90px;
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	text-align: right;
+}
+
+ul.Ldt-AnnotationsList-ul-ToDelete span.Ldt-AnnotationsList-Creator{
+	margin-right: 5px;
 }
 
 .Ldt-AnnotationsList-li.Ldt-TraceMe .Ldt-AnnotationsList-Description{
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/css/teacher.css
--- a/server/src/remie/static/remie/css/teacher.css	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/css/teacher.css	Mon Nov 02 16:02:47 2015 +0100
@@ -16,13 +16,22 @@
 }
 
 .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Tags .Ldt-CurrentSegmentInfobox-Tags-Ul{
-    margin-left: 0;
+    margin: 5px;
 }
 
 .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Tags {
     margin-left: 0;
 }
 
+.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-DescriptionInput {
+	margin: 5px !important;
+	width: calc(100% - 10px) !important;
+}
+
+.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-TitleInput{
+	color: #848484;
+}
+
 .Ldt-AnnotationsList-DeleteButton {
 	position: relative;
 	top: 0px !important;
@@ -98,4 +107,4 @@
 
 .Ldt-AnnotationsList-filter-checkbox #Ldt-AnnotationsList-ignoreSegmentsFilter{
     margin-left: 0;
-}
\ No newline at end of file
+}
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/metadataplayer/AnnotationsController.js
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsController.js	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsController.js	Mon Nov 02 16:02:47 2015 +0100
@@ -13,8 +13,12 @@
 IriSP.Widgets.AnnotationsController.prototype.defaults = {
     // If true, displaying AnnotationList will hide CreateAnnotation and vice versa.
     display_or_write: false,
+    toggle_widgets: false,
     starts_hidden: false,
     hide_without_segment: false,
+    hide_when_writing: true,
+    starting_widget: false,
+    always_show_widget: false,
     segments_annotation_type: "chap",
 };
 
@@ -48,24 +52,37 @@
     this.writeButton_$.click(function(){
         if (!_this.writeButton_$.hasClass("selected")){
             _this.player.trigger("CreateAnnotation.show")
+            if (_this.display_or_write){
+                _this.player.trigger("AnnotationsList.hide");
+            }
         }
         else {
             _this.player.trigger("CreateAnnotation.hide")
-        }
-        if (_this.display_or_write){
-            _this.player.trigger("AnnotationsList.hide");
+            if (_this.toggle_widgets){
+                _this.player.trigger("AnnotationsList.show")
+            }
+            else if (_this.display_or_write){
+                _this.player.trigger("AnnotationsList.hide");
+            }
         }
     });
     this.displayButton_$.click(function(){
         if (!_this.displayButton_$.hasClass("selected")){
             _this.player.trigger("AnnotationsList.show")
+            if (_this.display_or_write){
+                _this.player.trigger("CreateAnnotation.hide");
+            }
         }
         else {
             _this.player.trigger("AnnotationsList.hide")
+            if (_this.toggle_widgets){
+                _this.player.trigger("CreateAnnotation.show")
+            }
+            else if (_this.display_or_write){
+                _this.player.trigger("CreateAnnotation.hide");
+            }
         }
-        if (_this.display_or_write){
-            _this.player.trigger("CreateAnnotation.hide");
-        }
+        
     })
     
     if(this.hide_without_segment){
@@ -79,10 +96,20 @@
         this.currentSegment = false
     }
     
+
+    this.createAnnotationEnabled = false;
     this.onMdpEvent("CreateAnnotation.hide", function(){
+        if (_this.hide_when_writing){
+            _this.show()
+        }
+        _this.createAnnotationEnabled = false;
         _this.writeButton_$.toggleClass("selected", false);
     })
     this.onMdpEvent("CreateAnnotation.show", function(){
+        if (_this.hide_when_writing){
+            _this.hide()
+        }
+        _this.createAnnotationEnabled = true;
         _this.writeButton_$.toggleClass("selected", true);
     })
     this.onMdpEvent("AnnotationsList.hide", function(){
@@ -101,6 +128,15 @@
         this.show();
     }
     
+    if (this.starting_widget && this.visible){
+        if (this.starting_widget == "AnnotationsList"){
+            this.player.trigger("AnnotationsList.show")
+        }
+        else if (this.starting_widget == "CreateAnnotation"){
+            this.player.trigger("CreateAnnotation.show")
+        }
+    }
+    
 };
 
 IriSP.Widgets.AnnotationsController.prototype.refresh = function(_timeRange){
@@ -139,22 +175,29 @@
             }
         }
         if (!currentSegment && _currentSegments.length == 0){
-            if (this.visible){
-                this.hide();
+            if (this.visible || this.hide_when_writing){
                 this.writeButton_$.toggleClass("selected", false);
                 this.displayButton_$.toggleClass("selected", false);
                 this.player.trigger("CreateAnnotation.hide");
                 this.player.trigger("AnnotationsList.hide");
+                this.hide();
             }
         }
         else {
             if (!this.visible){
-                this.show();
+                if (!this.createAnnotationEnabled){
+                    this.show();
+                }
                 this.writeButton_$.toggleClass("selected", false);
                 this.displayButton_$.toggleClass("selected", false);
-                this.player.trigger("CreateAnnotation.hide");
-                this.player.trigger("AnnotationsList.hide");
+                if (this.starting_widget == "AnnotationsList"){
+                    this.player.trigger("AnnotationsList.show")
+                }
+                if (this.starting_widget == "CreateAnnotation"){
+                    this.player.trigger("CreateAnnotation.show")
+                }
             }
+            
         }
     }
 }
@@ -162,13 +205,13 @@
 IriSP.Widgets.AnnotationsController.prototype.hide = function() {
     if (this.visible){
         this.visible = false;
-        this.element_$.hide()
+        this.element_$.hide();
     }
 }
 
 IriSP.Widgets.AnnotationsController.prototype.show = function() {
     if(!this.visible){
         this.visible = true;
-        this.element_$.show()
+        this.element_$.show();
     }
 }
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/metadataplayer/AnnotationsList.css
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsList.css	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsList.css	Mon Nov 02 16:02:47 2015 +0100
@@ -223,12 +223,13 @@
     background: url(img/published_annotation.png);
 }
 
-.editing {
+.Ldt-AnnotationsList .editing {
     display: none;
 }
 
-.editableInput {
+.Ldt-AnnotationsList .editableInput {
     width: 80%;
+}
 
 .Ldt-AnnotationsList-ScreenMain{
 	margin: 0px;
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/metadataplayer/AnnotationsList.js
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsList.js	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsList.js	Mon Nov 02 16:02:47 2015 +0100
@@ -70,6 +70,7 @@
     show_header : false,
     custom_header : false,
     annotations_count_header : true,
+    annotations_count_header_string: "annotations",
     show_creation_date : false,
     show_timecode : true,
     show_end_time : true,
@@ -170,7 +171,7 @@
         close_widget: "Close",
         confirm: "Confirm",
         cancel: "Cancel",
-        annotation_deletion_delete: "You will delete this annotation : ",
+        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."
@@ -196,7 +197,7 @@
         close_widget: "Fermer",
         confirm: "Confirmer",
         cancel: "Annuler",
-        annotation_deletion_delete: "Vous allez supprimer cette annotation: ",
+        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."
@@ -227,8 +228,9 @@
     +     '{{#allow_annotations_deletion}}'
     +     '<div data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenDelete">'
     +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>' 
+    +         '{{l10n.annotation_deletion_delete}}'
     +         '<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>'
+    +         '<a class="Ldt-AnnotationsList-ConfirmDelete">{{l10n.confirm}}</a> <a class="Ldt-AnnotationsList-CancelDelete">{{l10n.cancel}}</a>'
     +     '</div>'
     +     '<div data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSending">'
     +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
@@ -909,16 +911,16 @@
 };
 
 IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event){
-    
+    _list = this.getWidgetAnnotations();
     ann_id = event.target.dataset.annotation;
     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 = "",
+        _creator = "",
         _this = this;
     if (_annotation.creator) {
         var _users = [],
@@ -934,7 +936,7 @@
         else{
             _user = _users[0]
         }
-        _title = _this.make_name_string_function(_user);
+        _creator = _this.make_name_string_function(_user);
     }
     if (_annotation.title) {
         var tempTitle = _annotation.title;
@@ -956,6 +958,8 @@
             end : _annotation.end.toString(),
             created : _created,
             show_timecode : this.show_timecode,
+            show_creator : this.show_creator,
+            creator : _creator,
             tags : false,
             l10n: this.l10n,
             allow_annotations_deletion: false
@@ -971,7 +975,7 @@
 }
 
 IriSP.Widgets.AnnotationsList.prototype.refreshHeader = function() {
-    var annotation_count_string = " (" + this.annotations_count +" annotations)";
+    var annotation_count_string = " (" + this.annotations_count +" "+this.annotations_count_header_string+")";
     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
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css
--- a/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css	Mon Nov 02 16:02:47 2015 +0100
@@ -16,7 +16,11 @@
 
 .Ldt-CurrentSegmentInfobox-Tags-Ul{
 	list-style: none;
-	margin: 2px;
+	margin: 0px;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags{
+	margin: 0px;
 }
 
 .Ldt-CurrentSegmentInfobox-Tags-Li{
@@ -56,7 +60,6 @@
 	display: inline-block;
     background-color: #d93c71;
     color: #ffffff;
-    float: right;
     cursor: pointer;
     height: 14px;
     width: 100px;
@@ -75,7 +78,6 @@
 	display: inline-block;
     background-color: #d93c71;
     color: #ffffff;
-    float: right;
     cursor: pointer;
     height: 14px;
     width: 100px;
@@ -165,7 +167,7 @@
 
 .Ldt-CurrentSegmentInfobox-CreateTagInput{
     border: 2px solid #848484;
-    margin: 5px 0;
+    margin: 5px 2px;
     padding: 4px;
 }
 
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js
--- a/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js	Mon Nov 02 16:02:47 2015 +0100
@@ -20,6 +20,7 @@
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = 
       '<div class="Ldt-CurrentSegmentInfobox">'
+    +   '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">'
     +     '{{#editable_segments}}<div class="Ldt-CurrentSegmentInfobox-EditButton">{{edit}}</div>{{/editable_segments}}'
     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>'
     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>' 
@@ -36,14 +37,14 @@
     +         '</ul>'
     +         '{{/tags.length}}'
     +     '</div>'
+    +   '</div>'
     + '</div>'
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate = 
       '<div class="Ldt-CurrentSegmentInfobox">'
+    +   '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">'
     +     '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}'
     +     '<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">'
     +         '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}'
@@ -54,7 +55,6 @@
     +         '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>'
     +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagInput-Add">+</div>'
     +     '{{/new_tag_button}}'
-    +         '{{#tags.length}}'
     +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
     +         '{{#tags}}'
     +             '{{#.}}'
@@ -65,8 +65,10 @@
     +             '{{/.}}'
     +         '{{/tags}}'
     +         '</ul>'
-    +         '{{/tags.length}}'
     +     '</div>'
+    +     '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>'
+    +     '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>'
+    +   '</div>'
     + '</div>'
     
 IriSP.Widgets.CurrentSegmentInfobox.prototype.messages = {
@@ -76,8 +78,8 @@
         edit : "Editer",
         new_tag : "Nouveau tag",
         delete_tag : "Supprimer",
-        fields_header : "Contenu du segment courant",
-        tags_header : "Mots-clés du segment courant",
+        fields_header : "Commentaire associé à ce segment",
+        tags_header : "Mots-clés associés à ce segment",
         empty : "Le player vidéo ne lit actuellement aucun segment"
     },
     en: {
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/metadataplayer/LatestAnnotation.css
--- a/server/src/remie/static/remie/metadataplayer/LatestAnnotation.css	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/LatestAnnotation.css	Mon Nov 02 16:02:47 2015 +0100
@@ -25,7 +25,6 @@
 }
 
 .Ldt-LatestAnnotation-Content{
-	max-width: 230px;
 	text-align: justify;
 }
 
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/metadataplayer/LatestAnnotation.js
--- a/server/src/remie/static/remie/metadataplayer/LatestAnnotation.js	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/LatestAnnotation.js	Mon Nov 02 16:02:47 2015 +0100
@@ -23,6 +23,7 @@
      * Displays a button that copy currently displayed annotation into CreateAnnotation input field
      */
     copy_and_edit_button: false,
+    hide_annotations_list: false,
     /*
      * Allows clicks on an annotation from Annotations to display the annotation content into this widget
      */
@@ -61,12 +62,12 @@
 
 IriSP.Widgets.LatestAnnotation.prototype.annotationTemplate =
     "<div class='Ldt-LatestAnnotation-Box'>"
+    + "{{#copy_and_edit_button}}<div class='Ldt-LatestAnnotation-CopyEditButton'>{{button_text}}</div>{{/copy_and_edit_button}}"
     +     "<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>"
-    + "{{#copy_and_edit_button}}<div class='Ldt-LatestAnnotation-CopyEditButton'>{{button_text}}</div>{{/copy_and_edit_button}}"
     + "</div>"
 
 
@@ -276,7 +277,9 @@
 
 IriSP.Widgets.LatestAnnotation.prototype.copy_and_edit = function(){
     this.player.trigger("CreateAnnotation.show");
-    this.player.trigger("AnnotationsList.hide");
+    if (this.hide_annotations_list){
+        this.player.trigger("AnnotationsList.hide");
+    }
     annotationText = $('.Ldt-LatestAnnotation-Content').get(0).innerHTML;
     
     $('.Ldt-CreateAnnotation-Description').removeClass('empty');
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/metadataplayer/MultiSegments.js
--- a/server/src/remie/static/remie/metadataplayer/MultiSegments.js	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/MultiSegments.js	Mon Nov 02 16:02:47 2015 +0100
@@ -27,7 +27,7 @@
     });
     this.source.getAnnotationTypes().forEach(function(_anntype) {
         var segments = _anntype.getAnnotations().filter(function(_ann) {
-            return _ann.getDuration() > 0;
+            return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id;
         });
         if (segments.length) {
             
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/static/remie/metadataplayer/Segments.js
--- a/server/src/remie/static/remie/metadataplayer/Segments.js	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/Segments.js	Mon Nov 02 16:02:47 2015 +0100
@@ -37,10 +37,10 @@
         this.width = this.$.parent().width();
         this.$.css({ width : this.width + "px" });
     }
-    var _list = this.getWidgetAnnotations().filter(function(_ann) {
-        return _ann.getDuration() > 0;
-    }),
-        _this = this,
+    var _this = this,
+        _list = this.getWidgetAnnotations().filter(function(_ann) {
+            return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id;
+        }),
         _scale = this.width / this.source.getDuration(),
         list_$ = this.$.find('.Ldt-Segments-List'),
         lines = [],
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/templates/remie/iframe_segments_group.html
--- a/server/src/remie/templates/remie/iframe_segments_group.html	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_segments_group.html	Mon Nov 02 16:02:47 2015 +0100
@@ -8,10 +8,10 @@
 <div id="remie_player_container">
   <div id="media_panel">  
     <div id="player_container"></div>
+    <div id="LatestAnnotation_container"></div>
   </div>
   <div id="info_panel">
     <div id="CurrentSegmentInfobox_container"></div>
-    <div id="LatestAnnotation_container"></div>
     <div id="AnnotationsController_container"></div>
     <div id="CreateAnnotation_container"></div>
     <div id="AnnotationsList_container"></div>
@@ -85,10 +85,13 @@
         },{
             type: "AnnotationsController",
             container: "AnnotationsController_container",
-            display_or_write: true,
+            display_or_write: false,
             starts_hidden: true,
             hide_without_segment: true,
-           	segments_annotation_type: "découpage",
+            segments_annotation_type: "découpage",
+            starting_widget: "AnnotationsList",
+            toggle_widgets: false,
+            hide_when_writing: true,
         },{
             type: "CreateAnnotation",
             container: "CreateAnnotation_container",
@@ -123,7 +126,7 @@
             project_id: "{{project_id}}",
             pause_when_displaying: true,
             custom_send_button: "Sauver",
-            custom_description_placeholder: " ",
+            custom_description_placeholder: "Je rédige une annotation ...",
         },{
             type: "AnnotationsList",
             container: "AnnotationsList_container",
@@ -143,6 +146,7 @@
             latest_contributions_filter: true,
             show_header: true,
             custom_header: "Travail du groupe",
+            annotations_count_header_string: "annotations sur ce segment",
             limit_count: false,
             start_visible: false,
             newest_first: true,
@@ -150,7 +154,7 @@
             make_name_string_function: function(params){
                 display_string = params.username;
                 if (params.first_name && params.last_name){
-                    display_string = params.first_name.charAt(0)+". "+params.last_name
+                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                 }
                 return display_string;
             },
@@ -167,13 +171,13 @@
            	selectable_annotations: true,
            	copy_and_edit_button: true,
            	show_header: false,
-            make_name_string_function: function(params){
+           	make_name_string_function: function(params){
                 display_string = params.username;
                 if (params.first_name && params.last_name){
-                    display_string = params.first_name.charAt(0)+". "+params.last_name
+                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                 }
                 return display_string;
-            }
+            },
         },{
          	type: "CurrentSegmentInfobox",
          	annotation_type: "découpage",
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/templates/remie/iframe_segments_preview.html
--- a/server/src/remie/templates/remie/iframe_segments_preview.html	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_segments_preview.html	Mon Nov 02 16:02:47 2015 +0100
@@ -8,10 +8,10 @@
 <div id="remie_player_container">
   <div id="media_panel">  
     <div id="player_container"></div>
+    <div id="LatestAnnotation_container"></div>
   </div>
   <div id="info_panel">
     <div id="CurrentSegmentInfobox_container"></div>
-    <div id="LatestAnnotation_container"></div>
     <div id="AnnotationsController_container"></div>
     <div id="CreateAnnotation_container"></div>
     <div id="AnnotationsList_container"></div>
@@ -85,10 +85,13 @@
         },{
             type: "AnnotationsController",
             container: "AnnotationsController_container",
-            display_or_write: true,
+            display_or_write: false,
             starts_hidden: true,
             hide_without_segment: true,
            	segments_annotation_type: "découpage",
+            starting_widget: "AnnotationsList",
+            toggle_widgets: false,
+            hide_when_writing: true,
         },{
             type: "CreateAnnotation",
             container: "CreateAnnotation_container",
@@ -120,7 +123,7 @@
             project_id: "{{project_id}}",
             pause_when_displaying: true,
             custom_send_button: "Sauver",
-            custom_description_placeholder: " ",
+            custom_description_placeholder: "Je rédige une annotation ...",
             preview_mode: true,
         },{
             type: "AnnotationsList",
@@ -141,6 +144,7 @@
             latest_contributions_filter: true,
             show_header: true,
             custom_header: "Travail du groupe",
+            annotations_count_header_string: "annotations sur ce segment",
             limit_count: false,
             start_visible: false,
             newest_first: true,
@@ -148,7 +152,7 @@
             make_name_string_function: function(params){
                 display_string = params.username;
                 if (params.first_name && params.last_name){
-                    display_string = params.first_name.charAt(0)+". "+params.last_name
+                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                 }
                 return display_string;
             },
@@ -165,13 +169,13 @@
            	selectable_annotations: true,
            	copy_and_edit_button: true,
            	show_header: false,
-            make_name_string_function: function(params){
+           	make_name_string_function: function(params){
                 display_string = params.username;
                 if (params.first_name && params.last_name){
-                    display_string = params.first_name.charAt(0)+". "+params.last_name
+                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                 }
                 return display_string;
-            }
+            },
         },{
          	type: "CurrentSegmentInfobox",
          	annotation_type: "découpage",
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/templates/remie/iframe_segments_single.html
--- a/server/src/remie/templates/remie/iframe_segments_single.html	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_segments_single.html	Mon Nov 02 16:02:47 2015 +0100
@@ -8,10 +8,10 @@
 <div id="remie_player_container">
   <div id="media_panel">  
     <div id="player_container"></div>
+    <div id="LatestAnnotation_container"></div>
   </div>
   <div id="info_panel">
     <div id="CurrentSegmentInfobox_container"></div>
-    <div id="LatestAnnotation_container"></div>
     <div id="AnnotationsController_container"></div>
     <div id="CreateAnnotation_container"></div>
     <div id="AnnotationsList_container"></div>
@@ -84,10 +84,13 @@
         },{
             type: "AnnotationsController",
             container: "AnnotationsController_container",
-            display_or_write: true,
+            display_or_write: false,
             starts_hidden: true,
             hide_without_segment: true,
             segments_annotation_type: "découpage",
+            starting_widget: "AnnotationsList",
+            toggle_widgets: false,
+            hide_when_writing: true,
         },{
             type: "CreateAnnotation",
             container: "CreateAnnotation_container",
@@ -122,7 +125,7 @@
             project_id: "{{project_id}}",
             pause_when_displaying: true,
             custom_send_button: "Sauver",
-            custom_description_placeholder: " ",
+            custom_description_placeholder: "Je rédige une annotation ...",
         },{
             type: "AnnotationsList",
             container: "AnnotationsList_container",
@@ -137,6 +140,7 @@
             show_title: false,
             show_creator: true,
             custom_header: "Ce que j'ai écrit",
+            annotations_count_header_string: "annotations sur ce segment",
             limit_count: false,
             start_visible: false,
             newest_first: true,
@@ -145,7 +149,7 @@
             make_name_string_function: function(params){
                 display_string = params.username;
                 if (params.first_name && params.last_name){
-                    display_string = params.first_name.charAt(0)+". "+params.last_name
+                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                 }
                 return display_string;
             },
@@ -165,10 +169,10 @@
             make_name_string_function: function(params){
                 display_string = params.username;
                 if (params.first_name && params.last_name){
-                    display_string = params.first_name.charAt(0)+". "+params.last_name
+                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                 }
                 return display_string;
-            }
+            },
         },{
           type: "CurrentSegmentInfobox",
           annotation_type: "découpage",
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/templates/remie/iframe_teacher.html
--- a/server/src/remie/templates/remie/iframe_teacher.html	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_teacher.html	Mon Nov 02 16:02:47 2015 +0100
@@ -9,12 +9,12 @@
 <div id="remie_player_container">
   <div id="media_panel">  
     <div id="player_container"></div>
+    <div id="LatestAnnotation_container"></div>
   </div>
   <div id="info_panel">
     <div id="CurrentSegmentInfobox_container"></div>
-    <div id="LatestAnnotation_container"></div>
+    <div id="CreateAnnotation_container"></div>
     <div id="AnnotationsController_container"></div>
-    <div id="CreateAnnotation_container"></div>
     <div id="AnnotationsList_container"></div>
   </div>
   <script type="text/javascript" src='{% static "remie/metadataplayer/LdtPlayer-core.js" %}'></script>
@@ -84,10 +84,13 @@
         },{
             type: "AnnotationsController",
             container: "AnnotationsController_container",
-            display_or_write: true,
+            display_or_write: false,
             starts_hidden: true,
             hide_without_segment: true,
             segments_annotation_type: "découpage",
+            starting_widget: "AnnotationsList",
+            toggle_widgets: false,
+            hide_when_writing: true,
         },{
             type: "CreateAnnotation",
             container: "CreateAnnotation_container",
@@ -122,7 +125,7 @@
             project_id: "{{project_id}}",
             pause_when_displaying: true,
             custom_send_button: "Sauver",
-            custom_description_placeholder: " ",
+            custom_description_placeholder: "Je rédige une annotation ...",
         },{
             type: "AnnotationsList",
             container: "AnnotationsList_container",
@@ -133,10 +136,12 @@
             show_only_annotation_from_user: false,
             show_timecode: false,
             show_filters: true,
+            current_day_filter: false,
             show_header: true,
             show_title: false,
             show_creator: true,
             custom_header: "Travail du groupe",
+            annotations_count_header_string: "annotations sur ce segment",
             limit_count: false,
             start_visible: false,
             newest_first: true,
@@ -148,7 +153,7 @@
             make_name_string_function: function(params){
                 display_string = params.username;
                 if (params.first_name && params.last_name){
-                    display_string = params.first_name.charAt(0)+". "+params.last_name
+                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                 }
                 return display_string;
             },
@@ -168,7 +173,7 @@
             make_name_string_function: function(params){
                 display_string = params.username;
                 if (params.first_name && params.last_name){
-                    display_string = params.first_name.charAt(0)+". "+params.last_name
+                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
                 }
                 return display_string;
             },
diff -r 69fb08fbc4b1 -r 21c941c07e7c server/src/remie/templates/remie/iframe_tester.html
--- a/server/src/remie/templates/remie/iframe_tester.html	Mon Oct 12 11:46:23 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_tester.html	Mon Nov 02 16:02:47 2015 +0100
@@ -14,6 +14,7 @@
 	        var segments_single_url = "{% url 'remie_segments_single' %}",
 	            segments_group_url = "{% url 'remie_segments_group' %}",
 	            markers_url = "{% url 'remie_markers' %}",
+	            markers_teacher_url = "{% url 'remie_markers_teacher' %}",
 	            teacher_url = "{% url 'remie_teacher' %}",
 	            segments_preview_url = "{% url 'remie_segments_preview' %}",
 	            markers_preview_url = "{% url 'remie_markers_preview' %}",
@@ -28,6 +29,9 @@
 	            case 'markers':
 	                scenario_url = markers_url;
 	            	break;    
+	            case 'markers_teacher':
+	                scenario_url = markers_teacher_url;
+	            	break; 
 	            case 'teacher':
 	                scenario_url = teacher_url;
 	            	break;
@@ -123,6 +127,7 @@
   <input id="segments_single" name="scenario" type="radio" value="segments_single" >Elève - Segments, individuel</input><br>
   <input id="segments_group" name="scenario" type="radio" value="segments_group">Elève - Segments, groupe</input><br>
   <input id="markers" name="scenario" type="radio" value="markers">Elève - Marqueurs</input><br>
+  <input id="markers_teacher" name="scenario" type="radio" value="markers">Professeur - Marqueurs</input><br>
   <input id="teacher" name="scenario" type="radio" value="teacher">Professeur - Segments</input><br>
   <input id="segments_preview" name="scenario" type="radio" value="segments_preview">Aperçu - Segments</input><br>
   <input id="markers_preview" name="scenario" type="radio" value="markers_preview">Aperçu - Marqueurs</input><br>