Adjustements on Markers scenario (now displays a "teacher" markers row) + Added a new "markers_teacher" scenario to edit the teacher markers and browse user markers
authordurandn
Mon, 02 Nov 2015 16:03:59 +0100
changeset 176 ba9f193121c3
parent 175 21c941c07e7c
child 177 35ee3f9523b7
Adjustements on Markers scenario (now displays a "teacher" markers row) + Added a new "markers_teacher" scenario to edit the teacher markers and browse user markers
server/src/remie/static/remie/css/markers.css
server/src/remie/static/remie/css/markers_student.css
server/src/remie/static/remie/css/markers_teacher.css
server/src/remie/static/remie/metadataplayer/Markers.css
server/src/remie/static/remie/metadataplayer/Markers.js
server/src/remie/templates/remie/iframe_markers.html
server/src/remie/templates/remie/iframe_markers_teacher.html
server/src/remie/views.py
server/src/remieplt/urls.py
--- a/server/src/remie/static/remie/css/markers.css	Mon Nov 02 16:02:47 2015 +0100
+++ b/server/src/remie/static/remie/css/markers.css	Mon Nov 02 16:03:59 2015 +0100
@@ -26,19 +26,37 @@
 /* ----------------- Media Panel ----------------- */
 /* ----------------------------------------------- */
 
-#player_container_widget_Markers_7{
+#markers_upper_container{
     width: 560px !important;
-    height: 50px !important;
     margin: 0 40px !important;
-    top: -35px;
+    background: #FFFFFF none repeat scroll 0% 0%;
 }
 
-#player_container_widget_Markers_7 .Ldt-Markers-Position{
+#markers_upper_container .Ldt-Markers-List,
+#markers_lower_container .Ldt-Markers-List{
+	background-color: #E0E0E0;
+}
+
+#markers_lower_container{
+    width: 560px !important;
+    margin: 0 40px !important;
+    background: #FFFFFF none repeat scroll 0% 0%;
+}
+
+#markers_upper_container .Ldt-Markers-Position,
+#markers_lower_container .Ldt-Markers-Position{
     margin-left: -2px;
     width: 4px;
     background-color: #5a5a5a;
 }
 
+.Ldt-Markers-userFilter-dropdown{
+	position: relative;
+	top: -35px;
+	left: 565px;
+	width: 100px;
+}
+
 /* -------- Override video player style -------- */
 
 #player_container_widget_Slider_3{
@@ -93,9 +111,10 @@
 /*     display: none; */
 /* } */
 
+/* -------- Override Markers style -------- */
+
 .Ldt-Markers-Display, .Ldt-Markers-List {
     display: block;
-    height: 100% !important;
 }
 
 .Ldt-Markers-Marker{
@@ -104,7 +123,6 @@
 }
 
 .Ldt-Markers-MarkerBall {
-    background-color: #1abacc !important;
     border: 3px solid white !important;
     border-radius: 50% !important;
     height: 25px !important;
@@ -156,11 +174,13 @@
     border-radius: 0;
     border-width: 2px;
     font-family: Open-Sans-Light;
-    min-height: 100px;
+    min-height: 25px;
+    max-height: 100px;
     padding: 10px;
     width: 100%;
     box-sizing: border-box;
     max-width: none;
+    margin-right: 5px;
 }
 
 .Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-RoundButton {
@@ -214,17 +234,3 @@
 }
 
 
-#player_container_widget_Markers_7 .Ldt-Markers-Inputs{
-    background-color: rgba(225, 225, 225, 0);
-}
-
-.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Info {
-    position: absolute;
-    left: 0;
-    width: 100%;
-}
-
-.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Info .Ldt-Markers-MarkerEdit,
-.Ldt-Markers-Info .Ldt-Markers-MarkerDescription{
-    margin: 10px 0 0;
-}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/remie/static/remie/css/markers_student.css	Mon Nov 02 16:03:59 2015 +0100
@@ -0,0 +1,35 @@
+/* -------- Override Marker student scenario style -------- */
+
+#markers_upper_container .Ldt-Markers-Marker:not(.Ldt-Markers-PlaceholderMarker)  .Ldt-Markers-MarkerBall {
+	background-color: #a2cf18 !important;
+}
+
+#markers_lower_container .Ldt-Markers-Marker:not(.Ldt-Markers-PlaceholderMarker) .Ldt-Markers-MarkerBall {
+    background-color: #1abacc !important;
+}
+
+#markers_upper_container .Ldt-Markers-RoundButton {
+	display: none !important;
+}
+
+#markers_upper_container .Ldt-Markers-Info{
+	width: 100%;
+}
+
+#markers_upper_container .Ldt-Markers-MarkerDescription{
+	width: calc(100% - 54px);
+	margin-left: 29px;
+	margin-bottom: 10px;
+	margin-top: 10px;
+}
+
+#markers_upper_container .Ldt-Markers-Inputs,
+#markers_lower_container .Ldt-Markers-Inputs{
+    background-color: rgba(225, 225, 225, 0);
+}
+
+
+#markers_lower_container .Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Info .Ldt-Markers-MarkerEdit,
+#markers_lower_container .Ldt-Markers-Info .Ldt-Markers-MarkerDescription{
+    margin: 10px -5px 0;
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/remie/static/remie/css/markers_teacher.css	Mon Nov 02 16:03:59 2015 +0100
@@ -0,0 +1,62 @@
+/* -------- Override Markers teacher scenario style -------- */
+
+
+#markers_upper_container .Ldt-Markers-Marker:not(.Ldt-Markers-PlaceholderMarker)  .Ldt-Markers-MarkerBall {
+	background-color: #a2cf18 !important;
+}
+
+#markers_lower_container .Ldt-Markers-Marker:not(.Ldt-Markers-PlaceholderMarker) .Ldt-Markers-MarkerBall {
+    background-color: #1abacc !important;
+}
+
+#markers_upper_container .Ldt-Markers-Info{
+	width: 100%;
+}
+
+#markers_lower_container .Ldt-Markers-Info{
+	width: 100%;
+}
+
+
+#markers_upper_container .Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Info .Ldt-Markers-MarkerEdit,
+#markers_upper_container .Ldt-Markers-MarkerDescription{
+	width: calc(100% - 54px);
+	margin-left: 29px;
+	margin-bottom: 10px;
+	margin-top: 10px;
+}
+
+#markers_lower_container .Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Info .Ldt-Markers-MarkerEdit,
+#markers_lower_container .Ldt-Markers-MarkerDescription{
+	width: calc(100% - 54px);
+	margin-left: 29px;
+	margin-bottom: 10px;
+	margin-top: -10px;
+}
+
+#markers_upper_container .Ldt-Markers-Inputs,
+#markers_lower_container .Ldt-Markers-Inputs{
+    background-color: rgba(225, 225, 225, 0);
+}
+
+
+#markers_upper_container .Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-RoundButton.Ldt-Markers-Create{
+	background-color: #a2cf18 !important;
+	border-color: #a2cf18 !important;
+}
+
+#markers_upper_container .Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-RoundButton.Ldt-Markers-Create:hover{
+	border-color: #5a5a5a !important;
+}
+
+#markers_lower_container .Ldt-Markers-RoundButton {
+	display: none !important;
+}
+
+#markers_upper_container .Ldt-Markers-ScreenMain {
+	margin-top: -32px;
+}
+
+#markers_upper_container .Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-RoundButton{
+	top: 40px;
+}
\ No newline at end of file
--- a/server/src/remie/static/remie/metadataplayer/Markers.css	Mon Nov 02 16:02:47 2015 +0100
+++ b/server/src/remie/static/remie/metadataplayer/Markers.css	Mon Nov 02 16:03:59 2015 +0100
@@ -19,8 +19,7 @@
 
 .Ldt-Markers-Position {
     background: #fc00ff;
-    position: absolute;
-    top: -1px;
+    position: relative;
     left: 0;
     margin-left: -1px;
     width: 2px;
@@ -56,7 +55,8 @@
 	line-height: 20px;
 }
 
-.Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate{
+.Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate,
+.Ldt-Markers-RoundButton.Ldt-Markers-PreviewDelete{
 	background-color: #999999;
 	border-color: #797979 #444444 #222222 #696969;
 }
@@ -72,14 +72,12 @@
 }
 
 .Ldt-Markers-Info{
-	height: 125px;
 	width: 90%;
 	display: inline-block;
 	margin: 0px;
 }
 
 .Ldt-Markers-Screen{
-	height: 125px;
 	margin: 0px;
 }
 
@@ -101,7 +99,10 @@
 }
 
 a.Ldt-Markers-Close {
-    position: absolute; right: 2px;
+    position: relative; 
+    float: right;
+    right: 2px;
+    top: 2px;
     display: inline-block; width: 17px; height: 17px; margin: 4px;
     background: url(img/widget-control.png);
 }
@@ -116,12 +117,12 @@
 }
 
 .Ldt-Markers-MarkerDescription{
-	height: 45%;
 	width: 90%;
 	border: 1px solid #68273c;
 	margin: 10px;
 	padding: 10px;
 	background: #ffffff;
+	overflow: scroll;
 }
 
 .Ldt-Markers-MarkerDescription:hover{
@@ -129,7 +130,6 @@
 }
 
 .Ldt-Markers-MarkerEdit{
-	height: 70%;
 	width: 100%;
 	margin: 10px;
 }
@@ -179,7 +179,8 @@
 	border-color: #222222 #e87d9f #f0adc3 #68273c;
 }
 
-.Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate:hover{	
+.Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate:hover, 
+.Ldt-Markers-RoundButton.Ldt-Markers-PreviewDelete:hover{	
 	background-color: #999999;
 	border-color: #797979 #444444 #222222 #696969;
 }
\ No newline at end of file
--- a/server/src/remie/static/remie/metadataplayer/Markers.js	Mon Nov 02 16:02:47 2015 +0100
+++ b/server/src/remie/static/remie/metadataplayer/Markers.js	Mon Nov 02 16:03:59 2015 +0100
@@ -6,6 +6,9 @@
 IriSP.Widgets.Markers.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Markers.prototype.defaults = {
+    pre_draw_callback: function(){
+        return this.importUsers();
+    },
     annotation_type: "markers",
     line_height: 8,
     background: "#e0e0e0",
@@ -32,12 +35,18 @@
     custom_send_button: false,
     custom_cancel_button: false,
     preview_mode: false,
+    filter_per_user: false,
+    api_users_endpoint: "",
+    make_username_string_function: function(params){
+        return params.username ? params.username : "Anonymous";
+    },
+    hide_if_empty: false,
 };
 
 IriSP.Widgets.Markers.prototype.template = 
     '<div class="Ldt-Markers-Display" style="height:{{line_height}}px;">'
     +     '<div class="Ldt-Markers-List" style="height:{{line_height}}px; position: relative;"></div>'
-    +     '<div class="Ldt-Markers-Position"></div>'
+    +     '<div class="Ldt-Markers-Position" style="height: {{line_height}}px; top: -{{line_height}};"></div>'
     + '</div>'
     + '<div class="Ldt-Markers-Inputs">'
     +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">'
@@ -45,6 +54,7 @@
     +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>'
     +         '{{^preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">&#10006;</div>{{/preview_mode}}'
     +         '{{#preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-PreviewDelete" title="{{l10n.preview_mode_delete}}">&#10006;</div>{{/preview_mode}}'
+    +         '{{#filter_per_user}}{{#preview_mode}}<select class="Ldt-Markers-userFilter-dropdown" id="Ldt-Markers-userFilter"></select>{{/preview_mode}}{{/filter_per_user}}'
     +         '<div class="Ldt-Markers-Info"></div>'
     +     '</div>'
     +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">'  
@@ -125,41 +135,100 @@
     }
 }
 
+IriSP.Widgets.Markers.prototype.importUsers = function(){
+    if (this.filter_per_user && this.preview_mode){
+        this.usernames = Array();
+        if (!this.source.users_data && this.api_users_endpoint){
+            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.Markers.prototype.draw = function(){
     var _this = this;
-    
     this.renderTemplate();
+    if ((!this.filter_per_user) || (!this.preview_mode) || (this.usernames.length <= 1)){
+        this.$.find(".Ldt-Markers-userFilter-dropdown").hide();
+    }
+    else {
+        this.usernames.forEach(function(_user){
+            var _users = _this.source.users_data.filter(function(_user_data){
+                return _user_data.username == _user;
+            }),
+               _user_data = {};
+            if (_users.length == 0){
+                _user_data.username = _user;
+            }
+            else{
+                _user_data = _users[0];
+            }
+            _this.$.find(".Ldt-Markers-userFilter-dropdown").append("<option value='"+_user+"'>"+_this.make_name_string_function(_user_data)+"</option>")
+        }); 
+        this.$.find(".Ldt-Markers-userFilter-dropdown").change(this.functionWrapper("drawMarkers"))
+        this.$.find(".Ldt-Markers-userFilter-dropdown").change(this.functionWrapper("clearSelectedMarker"))
+        
+    }
     
     this.markers = this.getWidgetAnnotations().filter(function(_ann) {
         return ((_ann.getDuration() == 0) || (_ann.begin == _ann.end));
     });
-    this.drawMarkers();
-    
-    this.$.find(".Ldt-Markers-Create").click(this.functionWrapper("onCreateClick"));
-    this.$.find(".Ldt-Markers-Delete").click(this.functionWrapper("onDeleteClick"));
-    this.$.find(".Ldt-Markers-RoundButton").hide()
-    this.updateCreateButtonState(this.media.getCurrentTime())
-    this.$.find(".Ldt-Markers-Screen-SubmitDelete").click(this.functionWrapper("sendDelete"));
-    this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function(){
-        _this.showScreen("Main");
-        _this.cancelEdit();
-    })
-    this.showScreen("Main");
-    this.$.css({
-        margin: "1px 0",
-        height: this.line_height,
-        background: this.background
-    });
-    
-    this.$.find(".Ldt-Markers-Close").click(this.functionWrapper("revertToMainScreen"));
-    
-    this.onMediaEvent("timeupdate", this.functionWrapper("updatePosition"));
-    this.onMediaEvent("timeupdate", this.functionWrapper("updateCreateButtonState"));
-    this.onMediaEvent("play", this.functionWrapper("clearSelectedMarker"));
-    this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers"));
-   
-    this.newMarkerTimeCode = 0;
-    this.selectedMarker = false;
+    if (this.hide_if_empty && this.markers.length <= 0){
+        this.$.hide();
+    } 
+    else {
+        this.drawMarkers();
+        
+        this.$.find(".Ldt-Markers-Create").click(this.functionWrapper("onCreateClick"));
+        this.$.find(".Ldt-Markers-Delete").click(this.functionWrapper("onDeleteClick"));
+        this.$.find(".Ldt-Markers-RoundButton").hide()
+        this.updateCreateButtonState(this.media.getCurrentTime())
+        this.$.find(".Ldt-Markers-Screen-SubmitDelete").click(this.functionWrapper("sendDelete"));
+        this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function(){
+            _this.showScreen("Main");
+            _this.cancelEdit();
+        })
+        this.showScreen("Main");
+        this.$.css({
+            margin: "1px 0",
+            background: this.background
+        });
+        
+        this.$.find(".Ldt-Markers-Close").click(this.functionWrapper("revertToMainScreen"));
+        
+        this.onMediaEvent("timeupdate", this.functionWrapper("updatePosition"));
+        this.onMediaEvent("timeupdate", this.functionWrapper("updateCreateButtonState"));
+        this.onMediaEvent("play", this.functionWrapper("clearSelectedMarker"));
+        this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers"));
+       
+        this.newMarkerTimeCode = 0;
+        this.selectedMarker = false;
+    }
 }
 
 
@@ -359,11 +428,20 @@
 IriSP.Widgets.Markers.prototype.drawMarkers = function(){
     var _this = this,
         _scale = this.width / this.source.getDuration(),
-        list_$ = this.$.find('.Ldt-Markers-List');
+        list_$ = this.$.find('.Ldt-Markers-List'),
+        _displayed_markers = this.markers;
 
     this.$.remove("Ldt-Markers-Marker");
     list_$.html("");
-    this.markers.forEach(function(_marker){
+    
+    if (this.filter_per_user && this.usernames.length > 1){
+        var _username = this.$.find(".Ldt-Markers-userFilter-dropdown")[0].options[this.$.find(".Ldt-Markers-userFilter-dropdown")[0].selectedIndex].value;
+        _displayed_markers = _displayed_markers.filter(function(_marker){
+            return _marker.creator == _username;
+        })
+    }
+    
+    _displayed_markers.forEach(function(_marker){
         var _left = _marker.begin * _scale -1,
             _data = {
                 left: _left,
--- a/server/src/remie/templates/remie/iframe_markers.html	Mon Nov 02 16:02:47 2015 +0100
+++ b/server/src/remie/templates/remie/iframe_markers.html	Mon Nov 02 16:03:59 2015 +0100
@@ -3,18 +3,14 @@
 <head>
 <title>Test</title>
 <link rel="stylesheet" type="text/css" href="{% static 'remie/css/markers.css' %}" />
+<link rel="stylesheet" type="text/css" href="{% static 'remie/css/markers_student.css' %}" />
 </head>
 <body>
 <div id="remie_player_container">
   <div id="media_panel">  
     <div id="player_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>
+    <div id="markers_upper_container"></div>
+    <div id="markers_lower_container"></div>
   </div>
   <script type="text/javascript" src='{% static "remie/metadataplayer/LdtPlayer-core.js" %}'></script>
   <script type="text/javascript">
@@ -74,16 +70,31 @@
             disable_ctrl_f: true
         },{
             type: "Markers",
+            background: "#ffffff",
+            annotation_type: "teacher_markers",
+            container: "markers_upper_container",
+            line_height: 50,
+            project_id: "{{project_id}}",
+            allow_empty_markers: true,
+            play_on_submit: true,
+            custom_send_button: "Sauver",
+            preview_mode: true,
+            hide_if_empty: true,
+        },{
+            type: "Markers",
+            background: "#ffffff",
             annotation_type: "markers_{{current_user}}",
-            line_height: 24,
+            container: "markers_lower_container",
+            line_height: 50,
+            project_id: "{{project_id}}",
             api_endpoint_template_create: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}",
             api_endpoint_template_edit: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}/",
             api_endpoint_template_delete: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}/{% templatetag openvariable %}project_id{% templatetag closevariable %}/",
             creator_name : "{{current_user}}",
-            project_id: "{{project_id}}",
             allow_empty_markers: true,
             play_on_submit: true,
             custom_send_button: "Sauver",
+            filter_per_user: false,
         }
       ]
     }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/remie/templates/remie/iframe_markers_teacher.html	Mon Nov 02 16:03:59 2015 +0100
@@ -0,0 +1,114 @@
+{% load staticfiles %}
+<html>
+<head>
+<title>Test</title>
+<link rel="stylesheet" type="text/css" href="{% static 'remie/css/markers.css' %}" />
+<link rel="stylesheet" type="text/css" href="{% static 'remie/css/markers_teacher.css' %}" />
+</head>
+<body>
+<div id="remie_player_container">
+  <div id="media_panel">  
+    <div id="player_container"></div>
+    <div id="markers_upper_container"></div>
+    <div id="markers_lower_container"></div>
+  </div>
+  <script type="text/javascript" src='{% static "remie/metadataplayer/LdtPlayer-core.js" %}'></script>
+  <script type="text/javascript">
+    
+    if (typeof jQuery == "undefined") {
+        jQuery = IriSP.jQuery;
+    }
+    var metadatas = {metadata: {url: "{% url 'projectjson_id' id=project_id %}?from_display=false"}};
+    var metadata_key = "metadata"; 
+    
+    IriSP.libFiles.defaultDir = '{% static "remie/js/" %}';
+    IriSP.libFiles.inDefaultDir.jQuery = 'jquery.js';
+    IriSP.libFiles.locations.jwPlayerSWF = '{% static "remie/swf/player.swf" %}';
+    IriSP.libFiles.locations.recordMicSwf = '{% static "remie/swf/record_mic.swf" %}';
+    IriSP.libFiles.locations.zeroClipboardSwf = '{% static "remie/swf/ZeroClipboard10.swf" %}';
+    IriSP.libFiles.locations.cssjQueryUI = '{% static "remie/css/jq-css/themes/base/jquery-ui.css" %}';
+    IriSP.language = 'fr-fr';
+   
+    IriSP.widgetsDir = '{% static "remie/metadataplayer" %}';
+    var _metadata = {
+        url: metadatas[metadata_key].url,
+        format: 'ldt'
+    };
+    var _config = {
+      container: 'player_container',
+      css: '{% static "remie/metadataplayer/LdtPlayer-core.css" %}',
+      default_options: {
+          metadata: _metadata
+      },
+      widgets: 
+      [
+        {
+            type: "AutoPlayer",
+            streamer: function(_url) {
+                var _matches = _url.match(/^[^\/]+\/\/[^\/]+\/[^\/]+\//);
+                if (_matches) {
+                  return _matches[0];
+                } else {
+                  return _url;
+                }
+            },
+            url_transform: function(url) {
+                // Adaptation to jwplayer 6
+                if(url.substr(url.length - 4).toLowerCase()=='.flv'){
+                    return url.replace('/ddc_player/video/','/ddc_player/flv:video/');
+                }
+                return url.replace('/ddc_player/video/','/ddc_player/mp4:video/');
+            },
+            default_type: "AdaptivePlayer",
+            autostart: false
+        },{
+           type: "Slider"
+        },{
+            type: "Controller",
+            disable_annotate_btn: true,
+            disable_search_btn: true,
+            disable_ctrl_f: true
+        },{
+            type: "Markers",
+            background: "#ffffff",
+            annotation_type: "teacher_markers",
+            container: "markers_upper_container",
+            line_height: 50,
+            project_id: "{{project_id}}",
+            api_endpoint_template_create: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}",
+            api_endpoint_template_edit: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}/",
+            api_endpoint_template_delete: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}/{% templatetag openvariable %}project_id{% templatetag closevariable %}/",
+            creator_name : "teacher",
+            allow_empty_markers: true,
+            play_on_submit: true,
+            custom_send_button: "Sauver",
+            filter_per_user: false,
+        },{
+            type: "Markers",
+            background: "#ffffff",
+            annotation_type: "markers_",
+            container: "markers_lower_container",
+            line_height: 50,
+            project_id: "{{project_id}}",
+            allow_empty_markers: true,
+            custom_send_button: "Sauver",
+            filter_per_user: true,
+            preview_mode: true,
+            api_users_endpoint: "{% url 'api_dispatch_list' resource_name='users' api_name='1.0' %}?username__in={% templatetag openvariable %}usernames_list_string{% templatetag closevariable %}&limit={% templatetag openvariable %}usernames_list_length{% templatetag closevariable %}",
+            make_name_string_function: function(params){
+                display_string = params.username;
+                if (params.first_name && params.last_name){
+                    display_string = params.first_name+" "+params.last_name.charAt(0)+"."
+                }
+                return display_string;
+            },
+        }
+      ]
+    }
+    
+    _myPlayer = new IriSP.Metadataplayer(_config);
+  
+  </script>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/server/src/remie/views.py	Mon Nov 02 16:02:47 2015 +0100
+++ b/server/src/remie/views.py	Mon Nov 02 16:03:59 2015 +0100
@@ -77,6 +77,23 @@
         return render_to_response(self.template_name, render_data, context_instance=RequestContext(request))
 
 
+class RemieMarkersTeacherView(View):
+    """
+        The view with the markers-scenario 
+    """
+    template_name = "remie/iframe_markers_teacher.html"
+    
+    def get(self, request):
+        project_id = request.GET.get("project_id", "") # id of the project we're working on
+        current_user = request.user
+        render_data = {
+            "project_id": project_id,
+            "current_user": current_user.username,
+        }
+        return render_to_response(self.template_name, render_data, context_instance=RequestContext(request))
+
+
+
 class RemieMarkersPreviewView(View):
     """
         The view with the markers-scenario 
--- a/server/src/remieplt/urls.py	Mon Nov 02 16:02:47 2015 +0100
+++ b/server/src/remieplt/urls.py	Mon Nov 02 16:03:59 2015 +0100
@@ -26,7 +26,7 @@
 from django.contrib.auth.decorators import login_required
 
 
-from remie.views import RemieSegmentsSingleView, RemieSegmentsGroupView, RemieMarkersView, RemieTeacherView, RemieSegmentsPreviewView, RemieMarkersPreviewView, RemieIframeTesterView
+from remie.views import RemieSegmentsSingleView, RemieSegmentsGroupView, RemieMarkersView, RemieTeacherView, RemieSegmentsPreviewView, RemieMarkersPreviewView, RemieMarkersTeacherView, RemieIframeTesterView
 
 js_info_dict = {
     'packages': ('django.contrib.admin',),
@@ -54,6 +54,7 @@
     url(r'^remie/workunit/segments_group$', login_required(RemieSegmentsGroupView.as_view(), login_url=reverse_lazy('cas_login')), name="remie_segments_group"),
     url(r'^remie/workunit/segments_single$', login_required(RemieSegmentsSingleView.as_view(), login_url=reverse_lazy('cas_login')), name="remie_segments_single"),
     url(r'^remie/workunit/segments_preview$', login_required(RemieSegmentsPreviewView.as_view(), login_url=reverse_lazy('cas_login')), name="remie_segments_preview"),
+    url(r'^remie/workunit/markers_teacher$', login_required(RemieMarkersTeacherView.as_view(), login_url=reverse_lazy('cas_login')), name="remie_markers_teacher"),
     url(r'^remie/workunit/markers$', login_required(RemieMarkersView.as_view(), login_url=reverse_lazy('cas_login')), name="remie_markers"),
     url(r'^remie/workunit/markers_preview$', login_required(RemieMarkersPreviewView.as_view(), login_url=reverse_lazy('cas_login')), name="remie_markers_preview"),
     url(r'^remie/workunit/teacher$', login_required(RemieTeacherView.as_view(), login_url=reverse_lazy('cas_login')), name="remie_teacher"),