Merge
authorAnthony Ly <anthonyly.com@gmail.com>
Fri, 07 Jun 2013 17:56:50 +0200
changeset 103 1c163781996b
parent 102 172abe53cf6c (current diff)
parent 100 2979ff5a8c25 (diff)
child 104 cf1781603b08
child 105 8645721dd9fc
Merge
--- a/integration/js/ldt-serializer.js	Fri Jun 07 17:56:17 2013 +0200
+++ b/integration/js/ldt-serializer.js	Fri Jun 07 17:56:50 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
--- a/src/metadatacomposer/static/metadatacomposer/css/style.css	Fri Jun 07 17:56:17 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/style.css	Fri Jun 07 17:56:50 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/css/styles_player.css	Fri Jun 07 17:56:17 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/styles_player.css	Fri Jun 07 17:56:50 2013 +0200
@@ -287,10 +287,11 @@
 
 .annotation {
     left: 45px; top: 800px; right: 35px;
+    transition: top 0.8s; -webkit-transition: top 0.8s;
 }
 
 .annotation-main:after {
-    content: "."; visibility: hidden; display: block; height: 1px; clear: both;
+    content: "."; visibility: hidden; display: block; height: 0; line-height: 0; clear: both;
 }
 
 /* Narrow annotations */
@@ -348,23 +349,30 @@
 
 .text-contents {
     font-family: Georgia, 'Times New Roman', serif;
-    margin: 0 45px 35px;
+    margin: 0 45px 35px; font-size: 15px;
+    
+}
+
+.text-contents p, .text-contents ul, .text-contents ol {
+/*    column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid; */
+    margin-bottom: 10px;
+}
+
+.text-contents h2, .text-contents h3, .text-contents h4 {
+/*    text-align: center; */
+    font-family: 'Futura-Medium'; margin-bottom: 10px; line-height: 1.1em;
+}
+
+.text-contents img {
+    float: left; margin: 0 5px 2px 0;
+}
+/*
+.column-group {
     column-count: 2; column-gap: 60px;
     -moz-column-count: 2; -moz-column-gap: 60px;
     -webkit-column-count: 2; -webkit-column-gap: 60px;
 }
-
-.text-contents p, .text-contents ul, .text-contents ol {
-    column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid;
-    margin-bottom: 10px; font-size: 15px;
-}
-
-.text-contents h2, .text-contents h3, .text-contents h4 {
-    font-family: 'Futura-Medium'; margin-bottom: 10px; line-height: 1.1em;
-    column-break-after:avoid; -moz-column-break-after:avoid; -webkit-column-break-after:avoid;
-    column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid;
-}
-
+*/
 .text-contents h2 {
     font-size: 21px;
 }
@@ -419,7 +427,7 @@
 /* Audio annotation */
 
 .audio-annotation .media-description {
-    margin: 25px 0 0; font-size: 15px; font-weight: bold;
+    margin: 25px 0 0; font-size: 15px;
 }
 
 .audio-annotation .annotation-main {
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js	Fri Jun 07 17:56:17 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js	Fri Jun 07 17:56:50 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 17:56:17 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/ldt-serializer.js	Fri Jun 07 17:56:50 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/player.js	Fri Jun 07 17:56:17 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/player.js	Fri Jun 07 17:56:50 2013 +0200
@@ -1,6 +1,8 @@
+IriSP.player = function(url) {
+
 var myDir = new IriSP.Model.Directory(),
     myProject = myDir.remoteSource({
-            url: project_url,
+            url: url,
             serializer: IriSP.serializers.ldt
         });
 
@@ -51,10 +53,10 @@
     $(".tags-list").html(tags.map(tagTemplate).join(""));
     
     $(".tags-title").mouseenter(function() {
-        $(".tags-list").slideDown();
+        $(".tags-list").stop().slideDown();
     });
     $(".tags").mouseleave(function() {
-        $(".tags-list").slideUp();
+        $(".tags-list").stop().slideUp();
     });
     
     $("body").click(function() {
@@ -270,15 +272,10 @@
         annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
         
                 
-        var positionDiv = function(anim) {
-            var css = {
+        var positionDiv = function() {
+            annotationDiv.css({
                 top: Math.floor(($(".main-video").height() - annotationDiv.height())/2)+"px"
-            };
-            if (anim) {
-                annotationDiv.animate(css, 800);
-            } else {
-                annotationDiv.css(css);
-            }
+            });
         }
         
         switch (annotationinfo.type) {
@@ -291,36 +288,30 @@
                     loaded = false,
                     slides = annotationinfo.annotation.content.images;
                 
-                var resizeImage = function() {
-                    var imgel = annotationDiv.find(".slideshow-image");
-                    imgel.css("margin-top","");
-                    var w = imgel.width(),
-                        h = imgel.height();
-                    annotationDiv.find(".annotation-main").css("height","");
-                    annotationDiv.find(".slideshow-description").css("margin-left",w);
-                    var h2 = annotationDiv.find(".annotation-main").height();
-                    if (h < h2) {
-                        imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
-                    }
-                    if (+imgel.css("opacity") !== 1) {
-                        imgel.fadeTo(400, 1);
-                    }
-                }
-                
                 var showCurrentImage = function() {
-                    var slide = slides[currentslide];
-                    annotationDiv.find(".slideshow-image").attr({
-                        src: slide.image.src,
+                    $(".slideshow-image").remove();
+                    var slide = slides[currentslide],
+                        srcimg = slide.image,
+                        imgel = $("<img>");
+                    imgel.addClass("slideshow-image");
+                    imgel.attr({
+                        src: srcimg.src,
                         title: slide.title,
                         alt: slide.title
                     });
+                    var wcont = 650, hcont = 452, wsrc = srcimg.width, hsrc = srcimg.height, scale = Math.min(1, Math.min(wcont/wsrc, hcont/hsrc)), h = hsrc * scale;
+                    imgel.css({
+                        opacity: 0,
+                        "margin-top": (h < hcont ? Math.floor((hcont-h)/2)+"px": 0)
+                    });
+                    annotationDiv.find(".slideshow-frame").prepend(imgel);
                     annotationDiv.find(".slideshow-title").text(slide.title);
                     annotationDiv.find(".slideshow-description").html(
                         slide.description.split(/\n/gm).map(function(l) {
                             return '<p>' + _.escape(l) + '</p>';
                         }).join("")
                     );
-                    resizeImage();
+                    imgel.fadeTo(400, 1);
                 }
                 
                 var nextImage = function() {
@@ -346,7 +337,7 @@
                         return;
                     }
                     loaded = slides.reduce(function(mem, slide) {
-                        return (mem && !!slide.image && !!slide.image.width);
+                        return (mem && !!slide.image && !!slide.image.height);
                     }, true);
                     if (loaded) {
                         showCurrentImage();
@@ -359,7 +350,7 @@
                 slides.forEach(function(slide) {
                     slide.image = new Image();
                     slide.image.onload = checkloaded;
-                    slide.image.src = slide.url;
+                    slide.image.src = slide.url + "?maxwidth=650&maxheight=452";
                 });
                 
                 checkloaded();
@@ -436,7 +427,7 @@
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);
-                            positionDiv(true);
+                            positionDiv();
                         }
                     });
                     return;
@@ -454,7 +445,7 @@
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);
-                            positionDiv(true);
+                            positionDiv();
                         }
                     });
                     return;
@@ -474,7 +465,7 @@
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);
-                            positionDiv(true);
+                            positionDiv();
                         }
                     });
                     return;
@@ -498,7 +489,7 @@
                 }));
                 
                 media.on("loadedmetadata", function() {
-                    positionDiv(true);
+                    positionDiv();
                 });
                 
                 annotationDiv.find(".media-frame").html(media);
@@ -513,6 +504,26 @@
                 switch (annotationinfo.annotation.content.markup) {
                     case "html":
                         annotationDiv.find(".text-contents").html(text);
+/*
+                        var ps = annotationDiv.find(".text-contents>p"),
+                            groups = [],
+                            last, group;
+                        ps.each(function(i, e) {
+                            if (last && group && last.nextElementSibling === e) {
+                                group.contents.push(e);
+                            } else {
+                                group = {
+                                    master: e,
+                                    contents: [e.cloneNode(true)]
+                                }
+                                groups.push(group);
+                            }
+                            last = e;
+                        });
+                        groups.forEach(function(g) {
+                            $(g.master).replaceWith($('<div class="column-group">').append(g.contents));
+                        });
+*/
                     break;
                     default:
                         annotationDiv.find(".text-contents").html(
@@ -562,6 +573,7 @@
             myMedia.play();
         }
         return false;
-    }
-   
+    }   
 });
+
+};
\ No newline at end of file
--- a/src/metadatacomposer/templates/metadatacomposer_edit.html	Fri Jun 07 17:56:17 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_edit.html	Fri Jun 07 17:56:50 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>
--- a/src/metadatacomposer/templates/metadatacomposer_project_list.html	Fri Jun 07 17:56:17 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_project_list.html	Fri Jun 07 17:56:50 2013 +0200
@@ -52,7 +52,7 @@
                                         <td><a class="btn btn-delete" data-title="{{ p.title }}" href="{% url 'composer_remove_project' branding=branding %}?ldt_id={{ p.ldt_id }}"><i class="icon-remove"></i></a></td>
                                     </tr>
                                     <tr>
-                                        <td><a class="btn" href="{% url 'composer_preview_player' branding=branding ldt_id=p.ldt_id %}" target="_blank"><i class="icon-eye-open"></i></a></td>
+                                        <td><a class="btn" href="{% url 'composer_preview_player' branding=branding ldt_id=p.ldt_id %}"><i class="icon-eye-open"></i></a></td>
                                         <td><a class="btn" href="{% url 'composer_duplicate_project' branding=branding %}?ldt_id={{ p.ldt_id }}"><i class="icon-copy"></i></a></td>
                                     </tr>
                                 </table>        
--- a/src/metadatacomposer/templates/partial/library_image_list.html	Fri Jun 07 17:56:17 2013 +0200
+++ b/src/metadatacomposer/templates/partial/library_image_list.html	Fri Jun 07 17:56:50 2013 +0200
@@ -1,6 +1,7 @@
 {% load static %}
 {% load i18n %}
 {% load thumbnail %}
+{% load absurl %}
 {% load front_tags %}
         <div class="row">
           {% for i in image_results %}
--- a/src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html	Fri Jun 07 17:56:17 2013 +0200
+++ b/src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html	Fri Jun 07 17:56:50 2013 +0200
@@ -92,12 +92,14 @@
                          
             </div>
         </div>
-        <script type="text/javascript">
-        var project_url = "{% absurl 'projectjson_id' id=ldt_id %}";
-        </script>
         <script type="text/javascript" src="{% static 'metadatacomposer/lib/jquery.min.js' %}"></script>
         <script type="text/javascript" src="{% static 'metadatacomposer/lib/jquery-ui.min.js' %}"></script>
         <script type="text/javascript" src="{% static 'metadatacomposer/lib/underscore-min.js' %}"></script>
         <script src="{% static 'metadatacomposer/js/metadataplayer-core.js' %}"></script>
         <script src="{% static 'metadatacomposer/js/ldt-serializer.js' %}"></script>
-        <script type="text/javascript" src="{% static 'metadatacomposer/js/player.js' %}"></script>
\ No newline at end of file
+        <script type="text/javascript" src="{% static 'metadatacomposer/js/player.js' %}"></script>
+        <script type="text/javascript">
+        $(function() {
+            IriSP.player("{% url 'projectjson_id' id=ldt_id %}");
+        });
+        </script>
\ No newline at end of file
--- a/src/metadatacomposer/views.py	Fri Jun 07 17:56:17 2013 +0200
+++ b/src/metadatacomposer/views.py	Fri Jun 07 17:56:50 2013 +0200
@@ -219,7 +219,10 @@
     for content in results.object_list:
         # We filter the content's projects with the user's ones
         if select_media:
-            content.url = content.videopath.rstrip('/') + "/" + content.src
+            if not content.videopath and content.videopath!="":
+                content.url = content.videopath.rstrip('/') + "/" + content.src
+            else:
+                content.url = content.src
         elif create_empty_project:
             content.url = "create_project_for_me"
         projects = content.project_set.all().filter(owner=user)