add library content and data to a in image library
authorcavaliet
Thu, 30 May 2013 13:32:05 +0200
changeset 60 58f5d9d76fad
parent 59 4f0e84a8fff8
child 61 ea7bc25db1b7
add library content and data to a in image library
src/metadatacomposer/static/metadatacomposer/css/style.css
src/metadatacomposer/static/metadatacomposer/js/common.js
src/metadatacomposer/static/metadatacomposer/js/edition.js
src/metadatacomposer/templates/metadatacomposer_modal_content.html
src/metadatacomposer/templates/metadatacomposer_modal_content_library.html
src/metadatacomposer/templates/metadatacomposer_resource_list.html
src/metadatacomposer/templates/partial/library_content_list.html
src/metadatacomposer/templates/partial/library_image_list.html
src/metadatacomposer/urls.py
src/metadatacomposer/views.py
--- a/src/metadatacomposer/static/metadatacomposer/css/style.css	Wed May 29 18:40:39 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/style.css	Thu May 30 13:32:05 2013 +0200
@@ -22,6 +22,7 @@
 .tab-behavior{text-align: center;}
 .tab-behavior li{display: inline-block; float: none;}
 td ul{margin-bottom: 0;}
+.bibliotheque-image img{width: 140px; height: 140px;}
 .bibliotheque-image .span2:nth-child(4n+1), .bibliotheque-video .span2:nth-child(4n+1){clear: left;}
 .modal.popup{width: 970px; margin-left: -485px; height: 80%;}
 .popup .modal-body{max-height: none; background-color: #fff; height: 80%;}
@@ -46,7 +47,7 @@
 .chapter-widget table td{}
 .chapter-widget textarea:focus{height: 100px;}
 .chapitre-cut-wrap{position: relative; height: 50px; margin-bottom: 10px;}
-.btn-cut-chapter{position: absolute;top: 20px;left: 11px;}
+.btn-cut-chapter{position: absolute;top: 20px;left: 11px; width: 40px;}
 .indicateur-chapter, .indicateur-annotation{z-index:100; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;}
 .chapter-segments {width: 100%; height: 20px; margin: 0;}
 .chapter-segments li{cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;}
@@ -99,6 +100,10 @@
 
 .annotation-links-content .links-form:nth-child(n+2){border-top:1px solid; padding-top: 20px;}
 
+td.list-chapter-tags, td.list-chapter-title, #list-annotations-rows > tr td:first-child{word-wrap: break-word; max-width: 75px;}
+td.begin, td.duration, td.end{max-width: 40px;}
+
+td.image-slideshow-row img{width: 60px; height: 60px;}
 /* Tangle */
 .time-tangle {
 	color: #2c3e50; cursor: w-resize; position: relative;
--- a/src/metadatacomposer/static/metadatacomposer/js/common.js	Wed May 29 18:40:39 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/common.js	Thu May 30 13:32:05 2013 +0200
@@ -43,9 +43,6 @@
         e.preventDefault();
         var titleMedia = $(this).attr('data-title'),
             urlDelete = $(this).attr('href');
-        console.log("coucou");
-        console.log(titleMedia);
-        console.log($("#modal-confirm .modal-body").find('.titleMedia'));
         $("#modal-confirm #btn-delete-modal").attr('href', urlDelete).focus();
         $("#modal-confirm .modal-body").find('.titleMedia').text(titleMedia);
         $("#modal-confirm").modal('show');
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js	Wed May 29 18:40:39 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js	Thu May 30 13:32:05 2013 +0200
@@ -17,17 +17,23 @@
 };
 
 
+//position de la video setCurrentTime
+$(".indicateur-annotation").draggable({
+    axis: "x",
+    containment: "parent",
+    drag: function(e, ui) {
+        var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".timeline-annotations").width() - 2 * ui.helper.width() );
+        myMedia.setCurrentTime(t);
+    }
+});
 
+$('.timeline-annotations').bind('click', function(e){
+    var x = e.pageX - $(this).offset().left;
+    myMedia.setCurrentTime(myMedia.duration * x / $(this).width());
+});
 
 myProject.onLoad(function() {
 
-
-
-
-//load Annotations
-myProject.getAnnotationsByTypeTitle("annotations");
-
-
     $(".project-title").text(myProject.title);
     
     myMedia = myProject.getCurrentMedia();
@@ -36,20 +42,36 @@
 var _chapters = myProject.getAnnotationsByTypeTitle("chapitrage");
 if(_chapters.length){
     $.each(_chapters, function(k, v){
-        var render = false;
+        v.color = getRandomColor();
+        chapters.push(v);
         if((k+1) == _chapters.length){
-            render = true;
+            renderChapter();
         }
-        newChapter(v, render);
+    });
+}
+
+//load Annotations
+var _annotations = myProject.getAnnotationsByTypeTitle("annotations");
+if(_annotations.length){
+    $.each(_annotations, function(k, v){
+
+        v.color = getRandomColor();
+        var type = v.content.mimetype.split('-');
+        type = type[type.length-1]
+        v.type = type;
+
+        annotations.push(v);
+        if((k+1) == _annotations.length){
+            renderAnnotation();
+        }
+
     });
 }
 
 
-
-
     //chargement des chapitres et annotations existants
   //  loadInitChapters();
-    loadInitAnnotation();
+    //loadInitAnnotation();
 
     IriSP.htmlPlayer(
         myMedia,
@@ -164,21 +186,7 @@
 
 //select on bibliotheque
 
-    //video
-    $('.popup').on('click', '.bibliotheque-video a', function(e){
-        e.preventDefault();
-
-        var url = $(this).attr('href');
-        currentAnnotation.content.url = url;
-
-        $('.popup').modal('hide');
-        $.get('template.html', function(templates){
-            var videoWrap = $('#tab-'+global.idAnnotation).find('.annotation-video-content'),
-                tplVideo = $(templates).filter('#tpl-video-row').html();
-            videoWrap.empty().append(tplVideo);
-        });
-        
-    });
+    
     
 
     //confirmation suppression
@@ -245,6 +253,9 @@
 
 
     function loadFormChapter(idChapter){
+
+        
+
         currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
         var chapterWrap = $('.chapter-widget-info'),
             indexChapter = _.indexOf(chapters, currentChapter),
@@ -260,6 +271,8 @@
             chapterWrap.empty().append(tpl);
             chapterWrap.find('.tag-it').tagit(tagitParam);
         });
+
+        myMedia.setCurrentTime(currentChapter.begin);
     }
 
 
@@ -289,6 +302,9 @@
     }
 });
 
+function getRandomColor(){
+    return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
+}
 //nouveau chapitre
     function newChapter(dataChapter, render){
         var chapter = new IriSP.Model.Annotation(false, myProject);
@@ -298,10 +314,10 @@
             chapter.title = dataChapter.title;
             chapter.description = dataChapter.description;
             chapter.keywords = dataChapter.keywords;
-            chapter.color = global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
+            chapter.color = getRandomColor();
     
         chapters.push(chapter);
-        if(render){renderChapter();}
+        renderChapter();
         loadFormChapter(chapter.id);
     }
 
@@ -346,30 +362,25 @@
 
         chapterSegmentWrap.empty();
         chapterList.empty();
+        $.get('template.html', function(templates){
+            $.each(chapters, function(k, v){
 
-        $.each(chapters, function(k, v){
-            //form
-            if($('#form-chapter-edit-'+v.id).length){
-                loadFormChapter(v.id);
-            }
-            //segments
-            var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration),
-                segment = $('<li>'+v.title+'</li>').css({
-                    width : width,
-                    backgroundColor : v.color
-                }).attr('id', v.id);
-    
-            chapterSegmentWrap.append(segment);
+                //segments
+                var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration),
+                    segment = $('<li>'+v.title+'</li>').css({
+                        width : width,
+                        backgroundColor : v.color
+                    }).attr('id', v.id);
+        
+                chapterSegmentWrap.append(segment);
 
-            //liste
-            $.get('template.html', function(templates){
+                //liste
                 var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
                 tplChapterRow = Mustache.render(tplChapterRow, v);
                 chapterList.append(tplChapterRow);
-
             });
         });
-    }
+    }//renderChapter()
 
 //init
     function loadInitChapters(){//nouveau projet, 1 chapitre
@@ -555,11 +566,24 @@
                 case 'video':
                     
                     if(viewType.content.url != ""){
+                   /*
                         var videoWrap = $(tabContent).find('.annotation-video-content'),
                             tplVideo = $(templates).filter('#tpl-video-row').html();
+                        tplVideo = Mustache.render(tplVideo, viewType.content);
                         videoWrap.empty().append(tplVideo);
+
+    
+                        var videoWrap = $(tabContent).find(".video-container"),
+                            src = viewType.content.url;
+                        getVideoPlayer(src, videoWrap);
+*/
+ var videoWrap = $(tabContent).find('.annotation-video-content');
+                        renderVideoInfo(videoWrap, viewType.content);
+   
                     }
 
+                    
+
                     break;
                 case 'text': 
                     var cledit = $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig)[0];
@@ -580,9 +604,17 @@
 
                     $(tabContent).find('.number-spin').spin(spinParam);
                     $(tabContent).find('.ui-sortable').sortable({
+                        start: function (event, ui) {
+                            $(ui.item).data("startindex", ui.item.index());
+                        },
                         stop : function(event, ui){
                             disabledBtnSortable($(this));
-                        }
+                        },
+                        update : function(event, ui){
+                            var oldIndex = ui.item.data("startindex"),
+                                newIndex = ui.item.index();
+                            currentAnnotation.content.images.move(oldIndex, newIndex);
+                        },
                     });
                     var diaporama = $(tabContent).find('#diaporama-'+idAnnotation),
                         images = viewType.content.images;
@@ -653,18 +685,62 @@
         $('#tab-list-annotation').tab('show');
     }
 
+//video
+    function renderVideoInfo(videoWrap, dataVideo){
+        $.get('template.html', function(templates){
+            var tplVideo = $(templates).filter('#tpl-video-row').html();
+            tplVideo = Mustache.render(tplVideo, dataVideo);
+            
+            videoWrap.empty().append(tplVideo);
+
+            videoWrap = videoWrap.find(".video-container");
+            getVideoPlayer(dataVideo.url, videoWrap);
+        });
+    }
+    $('.popup').on('click', '.bibliotheque-video a', function(e){
+        e.preventDefault();
+
+        var url = $(this).attr('data-url'),
+            title = $(this).attr('data-title'),
+            description = $(this).attr('data-description');
+
+        currentAnnotation.content.url = url;
+        currentAnnotation.content.title = title;
+        currentAnnotation.content.description = description;
+
+        $('.popup').modal('hide');
+
+        var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content');
+        renderVideoInfo(videoWrap, currentAnnotation.content);
+/*
+        $.get('template.html', function(templates){
+            var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content'),
+                tplVideo = $(templates).filter('#tpl-video-row').html();
+            tplVideo = Mustache.render(tplVideo, currentAnnotation.content);
+            videoWrap.empty().append(tplVideo);
+
+            var videoWrap = videoWrap.find(".video-container"),
+                src = url;
+            getVideoPlayer(src, videoWrap);
+        });
+*/
+        
+    });
+
 //diaporama
 
     //bibliotheque
     $('.popup').on('click', '.bibliotheque-image a', function(e){
         e.preventDefault();
 
-        var url = $(this).attr('href'),
+        var url = $(this).attr('data-url'),
+            title = $(this).attr('data-title'),
+            description = $(this).attr('data-description'),
             image = {
                 id : currentAnnotation.id,
                 url : url,
-                title : 'titre image',
-                description : 'description azerty'
+                title : title,
+                description : description
             };
         currentAnnotation.content.images.push(image);
 
@@ -686,6 +762,7 @@
     $(document).on('click', '.ui-sortable .btn-sort', function(e){
         e.preventDefault();
         var row = $(this).parents('tr.row-image-diaporama'),
+            oldIndex = row.index(),
             listDiaporama = $(this).parents('.list-image-diaporama');
 
         if($(this).hasClass('down'))
@@ -693,9 +770,21 @@
         else if($(this).hasClass('up'))
             row.insertBefore(row.prev());
 
+        var newIndex = row.index();
+        currentAnnotation.content.images.move(oldIndex, newIndex);
+
         disabledBtnSortable(listDiaporama);
     });
 
+    $('.tab-content').on('click','.btn-delete-image', function(e){
+        e.preventDefault();
+        var rowImage = $(this).parents('tr.row-image-diaporama'),
+            index = rowImage.index();
+
+        rowImage.remove();
+        currentAnnotation.content.images.splice(index, 1);
+    });
+
     function disabledBtnSortable(listDiaporama){
         listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
         listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
@@ -734,7 +823,7 @@
         var urlLink = $(v).find('.url-link').val(),
             titleLink = $(v).find('.title-link').val(),
             link = {
-                uri : urlLink,
+                url : urlLink,
                 title : titleLink
             };
             links.push(link);
@@ -901,6 +990,8 @@
 }//getContentAnnotationByType
 
 
+
+
 //test
 //a = $(".wysiwyg").cleditor(wysiwygConfig);
 
@@ -927,4 +1018,130 @@
     e.preventDefault();
     console.log(chapters.length + ' chapitres',chapters);
 });
-});//ready
\ No newline at end of file
+});//ready
+
+Array.prototype.move = function (old_index, new_index) {
+    if (new_index >= this.length) {
+        var k = new_index - this.length;
+        while ((k--) + 1) {
+            this.push(undefined);
+        }
+    }
+    this.splice(new_index, 0, this.splice(old_index, 1)[0]);
+    return this; // for testing purposes
+};
+
+
+function getVideoPlayer(src, videoWrap){
+
+    var youtubeTemplate = _.template(
+        '<iframe width="<%- width %>" height="<%- height %>" src="http://www.youtube.com/embed/<%- ytid %>?rel=0&autoplay=<%- autoplay %>" frameborder="0"></iframe>'
+    );
+    
+    var htmlTemplate = _.template(
+        '<<%- type %> width="<%- width %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>'
+    );
+    
+    var mediaW = 460,
+        mediaH = 345,
+        autoplay = false;
+
+    
+    if (/^(https?:\/\/)?(www\.)?youtu\.?be/.test(src)) {
+        var urlparts = src.split(/[?&]/g),
+            ytid = "",
+            vtest = /^v=/;
+        urlparts.slice(1).forEach(function(p) {
+            if (/^v=/.test(p)) {
+                ytid = p.replace(vtest,"");
+            }
+        });
+        if (!ytid) {
+            ytid = (urlparts[0].match(/[^\/]+$/) || [""])[0];
+        }
+        videoWrap.html(youtubeTemplate({
+            ytid: ytid,
+            width: mediaW,
+            height: mediaH,
+            autoplay: autoplay
+        }));
+        return;
+    }
+    
+    if (/^(https?:\/\/)?(www\.)?vimeo/.test(src)) {
+        $.ajax({
+            url: "http://vimeo.com/api/oembed.json",
+            dataType: "jsonp",
+            data: {
+                width: mediaW,
+                height: mediaH,
+                url: src,
+                autoplay: autoplay,
+                color: "be4477",
+                portrait: false,
+                title: false,
+                byline: false
+            },
+            success: function(data) {
+                videoWrap.html(data.html);
+            }
+        });
+        return;
+    }
+    
+    if (/^(https?:\/\/)?(www\.)?dailymotion/.test(src)) {
+        $.ajax({
+            url: "http://www.dailymotion.com/services/oembed",
+            dataType: "jsonp",
+            data: {
+                format: "json",
+                maxwidth: mediaW,
+                maxheight: mediaH,
+                url: src
+            },
+            success: function(data) {
+                videoWrap.html(data.html);
+            }
+        });
+        return;
+    }
+    
+    if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(src)) {
+        $.ajax({
+            url: "http://soundcloud.com/oembed",
+            dataType: "jsonp",
+            data: {
+                format: "js",
+                show_comments: false,
+                auto_play: autoplay,
+                show_artwork: false,
+                url: src,
+                color: "63be6c"
+            },
+            success: function(data) {
+                videoWrap.html(data.html);
+            }
+        });
+        return;
+    }
+    
+    var extension = (src.match(/\.([\d\w]+)$/) || ["",""])[1],
+        mimetype = 'video' + "/" + extension,
+        fallbacks = { "video/webm": "mp4", "video/mp4": "webm" },
+        canPlay = document.createElement("video").canPlayType(mimetype);
+    
+    if (!canPlay) {
+        src = src.replace(/\.[\d\w]+$/,"." + fallbacks[mimetype]);
+    }
+    
+    console.log(mimetype, canPlay, src);
+    
+    videoWrap.html(htmlTemplate({
+        type: 'video',
+        src: src,
+        width: mediaW,
+        height: mediaH,
+        autoplay: "" + autoplay
+    }));
+                
+}
\ No newline at end of file
--- a/src/metadatacomposer/templates/metadatacomposer_modal_content.html	Wed May 29 18:40:39 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_modal_content.html	Thu May 30 13:32:05 2013 +0200
@@ -4,7 +4,7 @@
 <div class="row">
     <div class="span3">
         <ul class="modal-menu">
-            <li class="bibliotheque-link"><a data-type-media="video" data-title="Bibliothèque" class="btn open-modal" href="modal-bibliotheque-video.html"><i class="icon-folder-open"></i> Bibliothèque</a></li>
+            <li class="bibliotheque-link"><a data-type-media="video" data-title="Bibliothèque" class="btn open-modal" href="{% url 'composer_modal_content_library' branding=branding %}"><i class="icon-folder-open"></i> Bibliothèque</a></li>
             <li><a class="btn active" tabindex="-1" href="#"><i class="icon-plus-sign"></i> Ajouter une video</a></li>
         </ul>
     </div>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/metadatacomposer/templates/metadatacomposer_modal_content_library.html	Thu May 30 13:32:05 2013 +0200
@@ -0,0 +1,13 @@
+{% load static %}
+{% load thumbnail %}
+<div class="row">
+    <div class="span3">
+        <ul class="modal-menu">
+            <li><a class="btn active" tabindex="-1" href="#"><i class="icon-folder-open"></i> Bibliothèque</a></li>
+            <li><a class="btn open-modal" data-type-media="video" data-title="Ajouter une vidéo" tabindex="-1" href="{% url 'composer_modal_content' branding=branding %}"><i class="icon-plus-sign"></i> Ajouter une vidéo</a></li>
+        </ul>
+    </div>
+    <div class="span8 popup-content bibliotheque-video" id="content_list_container_library">
+        {% include 'partial/library_content_list.html' %}
+    </div>
+</div>
\ No newline at end of file
--- a/src/metadatacomposer/templates/metadatacomposer_resource_list.html	Wed May 29 18:40:39 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_resource_list.html	Thu May 30 13:32:05 2013 +0200
@@ -125,5 +125,22 @@
             }
         });
     });
+    $(document).on('click', 'a.content_pagination_library', function(e){
+        e.preventDefault();e.stopPropagation();
+        var url = $(this).attr('href');
+        $(this).addClass("loader");
+        $.ajax({
+            url: url,
+            cache: false,
+            type: 'GET',
+            success: function(data, status, request) {
+                $("#content_list_container_library").html(data);
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                resp = $.parseJSON(jqXHR.responseText);
+                alert(resp.message);
+            }
+        });
+    });
     </script>
 {% endblock %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/metadatacomposer/templates/partial/library_content_list.html	Thu May 30 13:32:05 2013 +0200
@@ -0,0 +1,41 @@
+{% load static %}
+{% load i18n %}
+{% load thumbnail %}
+{% load front_tags %}
+        <div class="row">
+          {% for res in content_results %}
+            <div class="span2">
+                <a data-url="{{ res.content.url }}"
+                   data-title="{{ res.content.title }}"
+                   data-description="{{ res.content.description|default_if_none:"" }}" href="#">
+                   {% thumbnail res.content.image "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
+                <h5>{{ res.content.title }}</h5></a>
+            </div>
+          {% endfor %}
+        </div>
+        <div class="pagination">
+            <ul>
+            {% if content_results.has_previous %}
+                <li><a href="{% url 'composer_content_page' branding=branding %}?page={{ content_results.previous_page_number }}&mode=library" class="content_pagination_library">{% trans "Previous" %}</a></li>
+            {% else %}
+               <li class="disabled"><a>{% trans "Previous" %}</a></li>
+            {% endif %}
+            {% if content_results.paginator.num_pages > 1 %}
+             {% for i in content_results.paginator.num_pages|get_range %}
+              {% if i|add:'1' == content_results.number %}
+                <li class="active"><a href="#">{{i|add:'1'}}</a></li>
+              {% else %}
+                <li><a href="{% url 'composer_content_page' branding=branding %}?page={{i|add:'1'}}&mode=library" class="content_pagination_library">{{i|add:'1'}}</a></li>
+              {% endif %}
+             {% endfor %}
+            {% endif %}
+            {% if content_results.has_next %}
+                <li><a href="{% url 'composer_content_page' branding=branding %}?page={{ content_results.next_page_number }}&mode=library" class="content_pagination_library">{% trans "Next" %}</a></li>
+            {% else %}
+               <li class="disabled"><a>{% trans "Next" %}</a></li>
+            {% endif %}
+            {% if content_results.paginator.num_pages > 1 %}
+                <li><a href="{% url 'composer_content_page' branding=branding %}?page=x&mode=library" class="content_pagination_library">({% trans "All" %})</a></li>
+            {% endif %}
+            </ul>
+        </div>
\ No newline at end of file
--- a/src/metadatacomposer/templates/partial/library_image_list.html	Wed May 29 18:40:39 2013 +0200
+++ b/src/metadatacomposer/templates/partial/library_image_list.html	Thu May 30 13:32:05 2013 +0200
@@ -5,8 +5,11 @@
         <div class="row">
           {% for i in image_results %}
             <div class="span2">
-                <a href="">{% thumbnail i.image_file "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
-                <h5><a href="#">{{ i.title }}</a></h5>
+                <a data-url="{% url 'composer_image' branding=branding image_pk=i.pk %}"
+                   data-title="{{ i.title }}"
+                   data-description="{{ i.description }}" href="#">
+                   {% thumbnail i.image_file "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
+                <h5>{{ i.title }}</h5></a>
             </div>
           {% endfor %}
         </div>
--- a/src/metadatacomposer/urls.py	Wed May 29 18:40:39 2013 +0200
+++ b/src/metadatacomposer/urls.py	Thu May 30 13:32:05 2013 +0200
@@ -4,7 +4,8 @@
     MetadataComposerModalContent, MetadataComposerModalImage,\
     MetadataComposerImagePagination, MetadataComposerModalImageLibrary,\
     MetadataComposerRemoveImage, MetadataComposerRemoveContent,\
-    MetadataComposerRemoveProject, MetadataComposerImage
+    MetadataComposerRemoveProject, MetadataComposerImage,\
+    MetadataComposerModalContentLibrary
 
 urlpatterns = patterns('',
     url(r'^jsi18n/(?P<packages>\S+?)/$', 'django.views.i18n.javascript_catalog', name='jsi18n'),
@@ -14,6 +15,7 @@
     url(r'^(?P<branding>.*)/contentpage/$', MetadataComposerContentPagination.as_view(), name="composer_content_page"),
     url(r'^(?P<branding>.*)/modalcontent/(?P<iri_id>[\w-]+)/$', MetadataComposerModalContent.as_view(), name="composer_modal_content"),
     url(r'^(?P<branding>.*)/modalcontent/$', MetadataComposerModalContent.as_view(), name="composer_modal_content"),
+    url(r'^(?P<branding>.*)/modalcontentlibrary/$', MetadataComposerModalContentLibrary.as_view(), name="composer_modal_content_library"),
     url(r'^(?P<branding>.*)/modalimage/$', MetadataComposerModalImage.as_view(), name="composer_modal_image"),
     url(r'^(?P<branding>.*)/modalimagelibrary/$', MetadataComposerModalImageLibrary.as_view(), name="composer_modal_image_library"),
     url(r'^(?P<branding>.*)/removecontent/$', MetadataComposerRemoveContent.as_view(), name="composer_remove_content"),
--- a/src/metadatacomposer/views.py	Wed May 29 18:40:39 2013 +0200
+++ b/src/metadatacomposer/views.py	Thu May 30 13:32:05 2013 +0200
@@ -143,7 +143,10 @@
 class MetadataComposerContentPagination(TemplateResponseMixin, MetadataComposerContextView):
     
     def get_template_names(self):
-        return "partial/resource_content_list.html"
+        if self.template_name and self.template_name!="":
+            return self.template_name
+        else:
+            return "partial/resource_content_list.html"
     
     @method_decorator(login_required)
     @method_decorator(never_cache)
@@ -153,8 +156,14 @@
     def get(self, request, branding="iri", **kwargs):
         self.branding = branding
         page = request.GET.get("page") or 1
+        mode = request.GET.get("mode") or "resource"
+        select_media = False
+        if mode=="library":
+            self.template_name = "partial/library_content_list.html"
+            select_media = True
+        
         # Get current contents page and theirs projects
-        content_results = get_contents_and_projects(page, request.user)
+        content_results = get_contents_and_projects(page, request.user, select_media)
         
         context = self.get_context_dict(request)
         context.update({"content_results":content_results})
@@ -180,12 +189,16 @@
 
 
 
-def get_contents_and_projects(page, user):
+def get_contents_and_projects(page, user, select_media=False):
     
     # We get the current's page contents
     # prefetch_related("project_set") is unfortunately useless because we have to filter the project queryset later
-    contents = Content.safe_objects.order_by('-update_date')
-    nb = getattr(settings, 'METADATACOMPOSER_ELEMENTS_PER_PAGE', 9)
+    if select_media:
+        contents = Content.safe_objects.select_related("media_obj").order_by('-update_date')
+        nb = 8
+    else:
+        nb = getattr(settings, 'METADATACOMPOSER_ELEMENTS_PER_PAGE', 9)
+        contents = Content.safe_objects.order_by('-update_date')
     if page=="x":
         nb = contents.count()
     paginator = Paginator(contents, nb)
@@ -198,6 +211,8 @@
     results_object_list = []
     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
         projects = content.project_set.all().filter(owner=user)
         results_object_list.append({"content":content, "projects":projects})
     
@@ -306,10 +321,26 @@
 
 
 
-class MetadataComposerRemoveImage(View):
+class MetadataComposerModalContentLibrary(TemplateResponseMixin, MetadataComposerContextView):
     
     def get_template_names(self):
-        return "metadatacomposer_modal_image_library.html"
+        return "metadatacomposer_modal_content_library.html"
+    
+    @method_decorator(login_required)
+    @method_decorator(never_cache)
+    def dispatch(self, *args, **kwargs):
+        return super(MetadataComposerModalContentLibrary, self).dispatch(*args, **kwargs)
+    
+    def get(self, request, branding="iri", **kwargs):
+        self.branding = branding
+        
+        context = self.get_context_dict(request)
+        context.update({"content_results":get_contents_and_projects(1, request.user, True)})
+        return self.render_to_response(context)
+
+
+
+class MetadataComposerRemoveImage(View):
     
     @method_decorator(login_required)
     def get(self, request, branding="iri", **kwargs):