debug and update from integration
authorcavaliet
Fri, 07 Jun 2013 15:41:12 +0200
changeset 97 f0d132d6beed
parent 96 7cbaa8d0a7a6
child 98 aa57d0d436d6
debug and update from integration
src/metadatacomposer/static/metadatacomposer/css/style.css
src/metadatacomposer/static/metadatacomposer/js/edition.js
src/metadatacomposer/static/metadatacomposer/js/ldt-serializer.js
src/metadatacomposer/static/metadatacomposer/js/metadataplayer-core.js
src/metadatacomposer/templates/metadatacomposer_edit.html
--- a/src/metadatacomposer/static/metadatacomposer/css/style.css	Fri Jun 07 13:02:19 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/style.css	Fri Jun 07 15:41:12 2013 +0200
@@ -10,6 +10,7 @@
 h1 img{margin-right: 8px;}
 h1 a span{font-size: 16px; line-height: 20px; color: #FFF;}
 h1 span{font-size: 24px;}
+.btn-ok-chapter{margin-right: 10px;}
 .nav-bar{margin-top: 10px; }
 .nav-bar a:hover{text-decoration: none; color: #34495e;}
 section{padding-top: 20px;}
@@ -43,9 +44,9 @@
 .project-title-editor-form{margin: 0;}
 .project-action a:last-child{margin-right: 20px;}
 .chapter-widget-info{margin-bottom: 20px;}
-.chapter-widget form{ margin: 0;}
+.chapter-widget form{ margin: 0; padding-bottom: 10px;}
 #list-annotations{ background-color: #fff;}
-.form-info-general-annotation{ border-bottom: 1px solid #bdc3c7;}
+.form-info-general-annotation{ }
 .chapter-widget input, .form-info-general-annotation input, .form-info-general-annotation textarea{width: 196px; max-width: 196px;	}
 .chapter-widget textarea{width: 426px; max-width: 426px; min-width: 426px; height: 20px;-webkit-transition: height .3s ease;-moz-transition: height .3s ease;transition: height .3s ease;}
 .form-chapter-edit{}
@@ -92,7 +93,11 @@
 .timeline-annotations-wrap{position: relative;background-color: #202020;}
 .timeline-annotations{width: 460px;height: auto; position: relative; margin: 0; padding-top: 4px;}
 .timeline-annotations li{display: block; width: 460px;height: 12px; position: relative; padding-bottom: 4px;}
-.timeline-annotations .annotation{ color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 12px; width: 10px; height: 12px; background-color: #c0392b; position: absolute; top:0px;}
+.timeline-annotations .annotation{cursor: pointer; display:block; text-decoration:none; color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 12px; width: 10px; height: 12px; background-color: #c0392b; position: absolute; top:0px;}
+.timeline-annotations .annotation span, .timeline-annotations .annotation i{display: none;}
+.timeline-annotations .annotation:hover span,
+.annotation.editing span, 
+.annotation.editing i{display: inline;}
 ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;}
@@ -120,6 +125,7 @@
 .description-slideshow-row{word-wrap: break-word; width: 180px; }
 .description-slideshow-row span{max-height: 100px; display: inline-block; overflow: auto;}
 .description-slideshow-row textarea{width: 164px; max-width: 164px; height: 100px;}
+.label-modify-video, .label-add-video{display: none;}
 /* Tangle */
 .time-tangle {
 	color: #2c3e50; cursor: w-resize; position: relative;
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js	Fri Jun 07 13:02:19 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js	Fri Jun 07 15:41:12 2013 +0200
@@ -24,12 +24,20 @@
     }
 });
 
-$('.timeline-annotations').bind('click', function(e){
-    var x = e.pageX - $(this).offset().left;
-    myMedia.setCurrentTime(myMedia.duration * x / $(this).width());
+$('.timeline-annotations').on('click', '.annotation', function(e){
+    e.preventDefault();
+    var idAnnotation = $(this).attr('data-id'),
+        annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
+    myMedia.setCurrentTime(annotation.begin);
+    if($('#tab-annotation-'+idAnnotation).length){
+        $('a[href=#tab-annotation-'+idAnnotation+']').tab('show');
+    }else{
+        openTab(annotation.type, annotation);
+    }
 });
 
 myProject.onLoad(function() {
+    myProject.regenerateTags = true;
 
     $(".project-title").text(myProject.title);
     $('.project-title-nav').text(myProject.title);
@@ -121,19 +129,8 @@
         if(v.begin <= t && v.end >= t){
             currentAnnotationsDisplay.push(v.id);
             if(!$('#item-current-annotation-'+v.id).length){
-                var itemAnnotation = 
-                    $('<li>')
-                        .attr('id', 'item-current-annotation-'+v.id)
-                        .attr('data-id', v.id)
-                        .append(
-                            $('<a>')
-                                .css('backgroundColor', v.color)
-                                .attr('data-id', v.id)
-                                .attr('href', '#')
-                                .append(
-                                    $('<i>').addClass('icon-'+getIcon(v.type))
-                                )
-                        );
+                var itemAnnotation = getTemplate('#tpl-item-annotation-display');
+                itemAnnotation = Mustache.render(itemAnnotation, v);
                 $('.list-current-annotations').append(itemAnnotation)
             }
         }
@@ -154,8 +151,8 @@
 }
 
 function showCurrentAnnotationInTimeline(idAnnotation){
-    $('.timeline-annotations .annotation').empty();
-    $('#annotation-timeline-'+idAnnotation).html('<i class="icon-pencil"></i> '+textCurrentAnnotationEditT);
+    $('.annotation').removeClass('editing');
+    $('#annotation-timeline-'+idAnnotation).addClass('editing');
 }
 //display annotation view
 $('.list-current-annotations').on('click', 'a', function(e){
@@ -245,6 +242,7 @@
             var idChapter = $(this).parents('form').attr('data-chapter-id');
             $('.chapter-segments').find('#'+idChapter).text(value);
             $('#row-list-chapter-'+idChapter).find('td:first').text(value);
+            $(this).parents('form').find('.btn-delete-chapter').attr('data-title', value);
         }
     });
 
@@ -276,7 +274,7 @@
         return $('#templates').find(idTpl).html();
     }
 //supprimer
-$('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){
+$(document).on('click', '.btn-delete-chapter', function(e){
     e.preventDefault();
 
     if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;}
@@ -286,6 +284,10 @@
     btnDeleteModal.attr('data-id', idChapter);
 
 });
+$(document).on('click', '.btn-ok-chapter', function(e){
+    e.preventDefault();
+    $('.form-chapter-edit').remove();
+})
 
 function deleteChapter(idChapter){
     disabledPreview();
@@ -301,7 +303,8 @@
         //var newEnd = new IriSP.Model.Time(chapter.end)
         chapterModify.setEnd(chapter.end);
     }
-    chapters = _(chapters).reject(function(c) { return c.id == idChapter; });
+    chapters.removeId(idChapter);
+    myProject.getAnnotations().removeId(idChapter, true);
     renderChapter();
     //si le formulaire est visible
     if($('#form-chapter-edit-'+idChapter).length){
@@ -325,6 +328,7 @@
             chapter.color = getRandomColor();
     
         chapters.push(chapter);
+        myProject.getAnnotations().push(chapter);
         renderChapter();
         loadFormChapter(chapter.id);
     }
@@ -333,12 +337,12 @@
         e.preventDefault();
 
         var dataChapter = {
-                title : 'New',
-                begin : myMedia.currentTime,
-                end : organizeNewChapter(myMedia.currentTime),
-                description : 'description',
-                keywords : ['tag1','tag2']
-            };
+            title : 'New',
+            begin : myMedia.currentTime,
+            end : organizeNewChapter(myMedia.currentTime),
+            description : 'description',
+            keywords : ['tag1','tag2']
+        };
 
         newChapter(dataChapter, true);
 
@@ -366,7 +370,7 @@
             wChapterSegmentWrap = chapterSegmentWrap.width(),
             chapterList = $('.list-chapter-rows-wrap');
 
-        chapters = _.sortBy(chapters, function(c){
+        chapters = chapters.sortBy(function(c){
             return c.begin;
         });
 
@@ -412,6 +416,7 @@
             annotation.keywords = dataAnnotation.keywords;
             annotation.content = getContentAnnotationByType(dataAnnotation.type);
 
+        myProject.getAnnotations().push(annotation);
         annotations.push(annotation);
         
         return annotation;
@@ -424,7 +429,7 @@
             wTimeline = timeline.width(),
             annotationList = $('#list-annotations-rows');
 
-        annotations = _.sortBy(annotations, function(c){
+        annotations = annotations.sortBy(function(c){
             return c.begin;
         });
 
@@ -436,11 +441,16 @@
             //timeline
             var width = Math.floor(v.getDuration() * wTimeline / myMedia.duration),
                 left = Math.floor(v.begin * wTimeline / myMedia.duration),
-                segment = $('<div>').css({
+                dataAnntim = {
                     left : left,
                     width : width,
-                    backgroundColor : v.color
-                }).addClass('annotation').attr('id', 'annotation-timeline-'+v.id);
+                    color : v.color,
+                    id : v.id,
+                    title : v.title
+                },
+                segment = getTemplate('#tpl-annotation-in-timeline');
+                segment = Mustache.render(segment, dataAnntim);
+
 
             var isInTimeline = false;
             $.each(timeline.find('li'), function(a, b){
@@ -505,6 +515,8 @@
         if(name == 'title'){
             var idAnnotation = $(this).parents('form').attr('data-id');
             $('#onglet-title-'+idAnnotation).text(value);
+            $(this).parents('form').find('.btn-delete-annotation').attr('data-title', value);
+            $('#annotation-timeline-'+ idAnnotation+' span').text(value);
         }
     });
 
@@ -521,7 +533,8 @@
     function deleteAnnotation(idAnnotation){
         disabledPreview();
         $("#modal-confirm").modal('hide');
-        annotations = _(annotations).reject(function(c) { return c.id == idAnnotation; });
+        annotations.removeId(idAnnotation);
+        myProject.getAnnotations().removeId(idAnnotation, true);
         closeTab(idAnnotation);
         renderAnnotation();
     }
@@ -543,6 +556,7 @@
         
         var dataView;
         if(_.isUndefined(data)){//nouveau
+
             var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
                 endAnnotation = (currentTimePlusUnMin<myMedia.duration) ? currentTimePlusUnMin : myMedia.duration;
             var dataAnnotation = {
@@ -588,9 +602,14 @@
                 case 'audio':
                     break;
                 case 'video':
+                    var labelModify = $(tabContent).find('.label-modify-video'),
+                        labelAdd = $(tabContent).find('.label-add-video');
                     if(viewType.content.url != ""){
                         var videoWrap = $(tabContent).find('.annotation-video-content');
                         renderVideoInfo(videoWrap, viewType.content);
+                        labelModify.show();
+                    }else{
+                        labelAdd.show();
                     }
                     break;
                 case 'text': 
@@ -609,6 +628,7 @@
                     break;
 
                 case 'slideshow': 
+                    console.log(currentAnnotation)
                     $(tabContent).find('.number-spin').val(dataView.content.slideduration/1000);
                     $(tabContent).find('.number-spin').spin(spinParam);
                     $(tabContent).find('.ui-sortable').sortable({
@@ -706,7 +726,7 @@
         getVideoPlayer(dataVideo.url, videoWrap);
      
     }
-    $('.popup').on('click', '.bibliotheque-video a', function(e){
+    $('.popup').on('click', '.bibliotheque-video a:not(.pagination a)', function(e){
         e.preventDefault();
 
         var url = $(this).attr('data-url'),
@@ -722,13 +742,18 @@
         var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content');
         renderVideoInfo(videoWrap, currentAnnotation.content);
 
+        var labelModify = $('#tab-annotation-'+currentAnnotation.id).find('.label-modify-video'),
+            labelAdd = $('#tab-annotation-'+currentAnnotation.id).find('.label-add-video');
+
+        labelModify.show();
+        labelAdd.hide();
         
     });
 
 //diaporama
 
     //bibliotheque
-    $('.popup').on('click', '.bibliotheque-image a', function(e){
+    $('.popup').on('click', '.bibliotheque-image a:not(.pagination a)', function(e){
         e.preventDefault();
 
         var url = $(this).attr('data-url'),
@@ -838,10 +863,10 @@
 });
 function addLinkRow(tbody, dataView){
 
-        //head commun à tous
-        var tplLinkRow = getTemplate('#tpl-links-row');
-        var output = Mustache.render(tplLinkRow, dataView);
-        tbody.append(output);
+    //head commun à tous
+    var tplLinkRow = getTemplate('#tpl-links-row');
+    var output = Mustache.render(tplLinkRow, dataView);
+    tbody.append(output);
 
 }
 $('.tab-content').on('keyup', '.links-rows input', function(e){
@@ -950,7 +975,7 @@
     fonts:        "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
                     "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
     sizes:        "1,2,3,4,5,6,7",
-    styles:       [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
+    styles:       [["Paragraph", "<p>"], ["Header 2", "<h2>"],
                     ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
                     ["Header 6","<h6>"]],
     docType:      '<!DOCTYPE HTML>',
@@ -1026,7 +1051,7 @@
             content = {
                 mimetype : "application/x-ldt-text",
                 markup : "html",
-                text : "azerty"
+                text : ""
             };
             break;
         case 'links': 
--- a/src/metadatacomposer/static/metadatacomposer/js/ldt-serializer.js	Fri Jun 07 13:02:19 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/ldt-serializer.js	Fri Jun 07 15:41:12 2013 +0200
@@ -58,7 +58,22 @@
                         "id-ref": _data.id
                     },
                     items: _source.getAnnotationTypes().filter(function(_at) {
-                        return _at.media === _data;
+                        switch (typeof _at.media) {
+                            case "object":
+                                return (_at.media === _data);
+                            case "string":
+                                return (_at.media === _data.id);
+                            default:
+                                var _ann = _at.getAnnotations();
+                                if (_ann) {
+                                    for (var i = 0; i < _ann.length; i++) {
+                                        if (_ann[i].getMedia() === _data) {
+                                            return true;
+                                        }
+                                    }
+                                }
+                        }
+                        return false;
                     }).map(function(_at) {
                         return {
                             "id-ref": _at.id
@@ -78,6 +93,9 @@
                 return _res;        
             },
             serializer : function(_data, _source, _dest) {
+                if (_source.regenerateTags && !_data.regenerated) {
+                    return;
+                }
                 var _res = {
                     id : _data.id,
                     meta : {
@@ -179,12 +197,20 @@
                         "dc:creator" : _data.creator || _source.creator,
                         "dc:contributor" : _data.contributor || _source.contributor || _data.creator || _source.creator,
 //                        project : _source.projectId
-                    },
-                    tags : IriSP._(_data.tag.id).map(function(_id) {
+                    }
+                }
+                if (_source.regenerateTags) {
+                    _res.tags = IriSP._(_data.keywords).map(function(_kw) {
+                        return {
+                            "id-ref": _source.__keywords[_kw.toLowerCase()].id
+                        } 
+                    });
+                } else {
+                    _res.tags = IriSP._(_data.tag.id).map(function(_id) {
                        return {
                            "id-ref" : _id
                        } 
-                    })
+                    });
                 }
                 _res.content.title = _data.title || _res.content.title || "";
                 _dest.annotations.push(_res);
@@ -248,6 +274,24 @@
                 annotations: []
             },
             _this = this;
+        if (_source.regenerateTags) {
+            _source.__keywords = {};
+            _source.getAnnotations().forEach(function(a) {
+                IriSP._(a.keywords).each(function(kw) {
+                    var lkw = kw.toLowerCase();
+                    if (typeof _source.__keywords[lkw] === "undefined") {
+                        _source.__keywords[lkw] = {
+                            id: IriSP.Model.getUID(),
+                            title: kw,
+                            regenerated: true
+                        }
+                    }
+                });
+            });
+            IriSP._(_source.__keywords).each(function(kw) {
+                _this.types.tag.serializer(kw, _source, _res);
+            })
+        }
         _source.forEach(function(_list, _typename) {
             if (typeof _this.types[_typename] !== "undefined") {
                 _list.forEach(function(_el) {
@@ -287,6 +331,9 @@
             _source.projectId = _data.meta.id;
             _source.title = _data.meta["dc:title"] || _data.meta.title || "";
             _source.description = _data.meta["dc:description"] || _data.meta.description || "";
+            _source.creator = _data.meta["dc:creator"] || _data.meta.creator || "";
+            _source.contributor = _data.meta["dc:contributor"] || _data.meta.contributor || _source.creator;
+            _source.created = IriSP.Model.isoToDate(_data.meta["dc:created"] || _data.meta.created);
         }
         
         if (typeof _data.meta !== "undefined" && typeof _data.meta.main_media !== "undefined" && typeof _data.meta.main_media["id-ref"] !== "undefined") {
--- a/src/metadatacomposer/static/metadatacomposer/js/metadataplayer-core.js	Fri Jun 07 13:02:19 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/metadataplayer-core.js	Fri Jun 07 15:41:12 2013 +0200
@@ -1180,7 +1180,10 @@
             return (_e.elementType === _listId);
         });
     } else {
-        return this.contents[_listId] || new IriSP.List(this.directory);
+        if (typeof this.contents[_listId] === "undefined") {
+            this.contents[_listId] = new IriSP.List(this.directory);
+        }
+        return this.contents[_listId];
     }
 };
 
--- a/src/metadatacomposer/templates/metadatacomposer_edit.html	Fri Jun 07 13:02:19 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_edit.html	Fri Jun 07 15:41:12 2013 +0200
@@ -85,42 +85,6 @@
                                 </div>
                             </div>
                             <div class="chapter-widget-info">
-                                <!--
-                                <form action="#" class="form-chapter-edit">
-                                    <div class="row">
-                                        <div class="span3 text-right">
-                                            <input name="title" type="text">
-                                            <input name="tags" type="text" class="tag-it">
-                                        </div>
-                                        <div class="span3">
-                                            <input type="hidden" name="begin">
-                                            <input type="hidden" name="duration">
-                                            <input type="hidden" name="end">
-                                            <table class="table text-right">
-                                                <thead>
-                                                    <tr>
-                                                        <th class="span1">Début</th>
-                                                        <th class="span1">Durée</th>
-                                                        <th class="span1">Fin</th>
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    <tr>
-                                                        <td class="span1 begin">4:20</td>
-                                                        <td class="span1 duration">4:20</td>
-                                                        <td class="span1 end">4:20</td>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="span6 text-center">
-                                            <textarea class="" name="description" id=""></textarea>
-                                        </div>
-                                    </div>
-                                </form>
-                            -->
                             </div>
                             <div class="list-chapter-wrap">
                                 <h4><i class="icon-flag"></i> <i class="icon-th-list"></i> Liste des chapitres</h4>
@@ -136,27 +100,6 @@
                                         </tr>
                                     </thead>
                                     <tbody class="list-chapter-rows-wrap">
-                                        <!--
-                                        <tr id="row-list-chapter-id1">
-                                            <td>Titre d'un chapitre</td>
-                                            <td>Tags, Tags, Tags</td>
-                                            <td>79:55</td>
-                                            <td>79:55</td>
-                                            <td>79:55</td>
-                                            <td>
-                                                <table>
-                                                    <tr>
-                                                        <td>
-                                                            <a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a>
-                                                        </td>
-                                                        <td>
-                                                            <a data-title="Chapitre 1" href="#row-list-chapter-id1" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a>
-                                                        </td>
-                                                    </tr>
-                                                </table>
-                                            </td>
-                                        </tr>
-                                    -->
                                     </tbody>
                                 </table>
                             </div>
@@ -197,36 +140,6 @@
                                             </tr>
                                         </thead>
                                         <tbody id="list-annotations-rows">
-                                            <!--
-                                            <tr id="row-list-annotation-id1">
-                                                <td>Titre annotation</td>
-                                                <td>Vidéo</td>
-                                                <td>4:26</td>
-                                                <td>4:26</td>
-                                                <td>4:26</td>
-                                                <td>
-                                                    <a href="#" data-id="annotation-123" class="btn btn-edit-annotation" data-type="video">
-                                                        <i class="icon-pencil"></i></a>
-                                                    <a data-id="annotation-123" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete">
-                                                        <i class="icon-trash delete-annotation"></i>
-                                                    </a>
-                                                </td>
-                                            </tr>
-                                            <tr id="row-list-annotation-id2">
-                                                <td>Titre annotation</td>
-                                                <td>Diaporama</td>
-                                                <td>4:26</td>
-                                                <td>4:26</td>
-                                                <td>4:26</td>
-                                                <td>
-                                                    <a href="#" data-id="annotation-456" class="btn btn-edit-annotation" data-type="diaporama">
-                                                        <i class="icon-pencil "></i></a>
-                                                    <a data-id="annotation-456" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete">
-                                                        <i class="icon-trash delete-annotation"></i>
-                                                    </a>
-                                                </td>
-                                            </tr>
-                                        -->
                                         </tbody>
                                     </table>
                                 </div>
@@ -338,7 +251,7 @@
                                     <span class="span3">
                                         Ajouter une vidéo 
                                         <a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" 
-                                           href="{% url 'composer_modal_content_library' branding=branding %}"><i class="icon-plus"></i></a>
+                                           href="{% url 'composer_modal_content_library' branding=branding %}?mode=library"><i class="icon-plus"></i></a>
                                     </span>
                                 </div>
                                 <div class="row annotation-video-content">
@@ -522,7 +435,7 @@
             <div data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="" class="slider-duration"></div>
         </div>
         <div class="span6 text-right">
-            <a class="btn btn-danger btn-delete btn-delete-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" data-no-render>
+            <a class="btn btn-danger btn-delete btn-delete-annotation" data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" data-no-render>
                 <i class="icon-trash"></i> Delete
             </a>
             <a class="btn btn-primary btn-save-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
@@ -571,8 +484,9 @@
 <div class="edit-annotation-title row">
     <h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
     <span class="span3">
-        Ajouter une vidéo 
-        <a data-id="annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="{% url 'composer_modal_content_library' branding=branding %}" data-hide-add-new><i class="icon-plus"></i></a>
+        <span class="label-add-video">Ajouter une vidéo</span>
+        <span class="label-modify-video">Modifier la vidéo</span> 
+        <a data-id="annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="{% url 'composer_modal_content_library' branding=branding %}?mode=library" data-hide-add-new><i class="icon-plus"></i></a>
     </span>
 </div>
 <div class="row annotation-video-content">
@@ -808,8 +722,29 @@
             <textarea class="" name="description" id="">{% templatetag openvariable %}description{% templatetag closevariable %}</textarea>
         </div>
     </div>
+    <div class="row">
+        <div class="span6 text-right">
+            <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" title="Supprimer le chapitre" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete btn-danger btn-delete-chapter">
+                <i class="icon-trash"></i> Delete
+            </a>
+            <a class="btn btn-primary btn-ok-chapter" href="#" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
+                <i class="icon-ok"></i> Ok
+            </a>
+        </div>
+    </div>
 </form>
 </script>   
+
+<script id="tpl-annotation-in-timeline" type="text/html">
+<a style="left:{% templatetag openvariable %}left{% templatetag closevariable %}px; width:{% templatetag openvariable %}width{% templatetag closevariable %}px; background-color:{% templatetag openvariable %}color{% templatetag closevariable %};" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="annotation-timeline-{% templatetag openvariable %}id{% templatetag closevariable %}" class="annotation">
+    <i class="icon-pencil"></i> <span>{% templatetag openvariable %}title{% templatetag closevariable %}</span>
+</a>
+</script>   
+
+<script id="tpl-item-annotation-display" type="text/html">
+<li id="item-current-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}"><a style="background-color: {% templatetag openvariable %}color{% templatetag closevariable %};" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#" title="{% templatetag openvariable %}title{% templatetag closevariable %}"><i class="icon-align-left"></i></a></li>
+</script>
+
 </div><!-- /#templates -->
 
     <script src="{% static 'metadatacomposer/lib/jquery-1.9.1.min.js' %}"></script>