# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1370259215 -7200
# Node ID 807525d1ad8e3856083c318b0ebfa8e3c6f0cab9
# Parent  dd2fbf4c998fdddf5c46dc20e01d34143b075214# Parent  1c08f6ef565139a30a35e214dd4f68362bc37c4d
Merge

diff -r dd2fbf4c998f -r 807525d1ad8e src/metadatacomposer/static/metadatacomposer/css/style.css
--- a/src/metadatacomposer/static/metadatacomposer/css/style.css	Mon Jun 03 13:33:16 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/style.css	Mon Jun 03 13:33:35 2013 +0200
@@ -82,9 +82,10 @@
 .close-tab:hover{color:#2c3e50;}
 .html-apercu{overflow: auto; margin-top: 10px;}
 .input-image-url{display: none;}
-.timeline-annotations-wrap{position: relative;background-color: #ecf0f1;}
-.timeline-annotations{width: 460px;height: 40px; position: relative;}
-.timeline-annotations .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:15px;}
+.timeline-annotations-wrap{position: relative;background-color: #202020;}
+.timeline-annotations{width: 460px;height: auto; position: relative; margin: 0; padding: 10px 0;}
+.timeline-annotations li{display: block; width: 460px;height: 10px; position: relative;}
+.timeline-annotations .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:0px;}
 ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;}
@@ -104,6 +105,8 @@
 td.begin, td.duration, td.end{max-width: 40px;}
 
 td.image-slideshow-row img{width: 60px; height: 60px;}
+.project-title-editor input{margin-bottom: 0;}
+#templates{display: none;}
 /* Tangle */
 .time-tangle {
 	color: #2c3e50; cursor: w-resize; position: relative;
diff -r dd2fbf4c998f -r 807525d1ad8e src/metadatacomposer/static/metadatacomposer/js/edition.js
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js	Mon Jun 03 13:33:16 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js	Mon Jun 03 13:33:35 2013 +0200
@@ -7,13 +7,12 @@
 $(function(){
 
 var global = {
-    idAnnotation : null,
     colorsIndex : 0,
     colors : 
         ['#f39c12', '#2ecc71', '#3498db', '#9b59b6',  
-        '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', 
+        '#f1c40f', '#e67e22', '#e74c3c', 
         '#16a085', '#27ae60', '#2980b9', '#8e44ad', 
-        '#f39c12', '#d35400', '#c0392b', '#bdc3c7']
+         '#d35400', '#c0392b', '#bdc3c7']
 };
 
 
@@ -35,7 +34,8 @@
 myProject.onLoad(function() {
 
     $(".project-title").text(myProject.title);
-    
+    $('.project-title-nav').text(myProject.title);
+
     myMedia = myProject.getCurrentMedia();
 
 //load Chapitre
@@ -68,11 +68,6 @@
     });
 }
 
-
-    //chargement des chapitres et annotations existants
-  //  loadInitChapters();
-    //loadInitAnnotation();
-
     IriSP.htmlPlayer(
         myMedia,
         $(".main-video"),
@@ -169,12 +164,7 @@
 //########### modal
 
     $(document).on('click', 'a.open-modal', function(e){
-        var idAnnotation = $(this).attr('data-id');
 
-
-        if(idAnnotation !== undefined){
-            global.idAnnotation = idAnnotation;
-        }
     });
 
 //edition image
@@ -195,35 +185,20 @@
     });
 
 //--title-editor
-$('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()});
-    $('.project-title-editor ._popover').popover({
-        html : true,
-        content : function(){
-            var previousValue = $('.project-title').text(),
-                formInput = 
-                    '<form action="#" class="project-title-editor-form">'+
-                        '<input type="text" class="project-title-editor-input" value="'+previousValue+'">'+
-                    '</form>';
-            return formInput;
-        }
+    $(document).on('click', '.project-title-editor i, .project-title', function () {
+        var html = $('.project-title').html();
+        var input = $('<input type="text" />');
+        input.val(html);
+        $('.project-title').replaceWith(input);
+        input.focus();
+    });
+    $(document).on('blur', '.project-title-editor input', function(){
+        var newTitle = $(this).val();
+        myProject.title = newTitle;
+        $(this).replaceWith('<span class="project-title">'+newTitle+'</span></td>');
+        $('.project-title-nav').text(newTitle);
     });
 
-    $('body').on('click', function (e) {
-        $('._popover').each(function () {
-            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
-                $(this).popover('hide');
-            }
-        });
-    });
-
-    $('body').on('submit', '.project-title-editor-form', function(e){
-        e.preventDefault();
-        $('._popover').popover('hide');
-    });
-
-    $(document).on('keyup', '.project-title-editor-input', function() {
-        $('.project-title').html($(this).val());
-    });
 
 //######################## chapter
 
@@ -265,17 +240,17 @@
         currentChapter.beginTangle = beginTangle;
         currentChapter.endTangle = endTangle;
 
-        $.get('template.html', function(templates){
-            var tpl = $(templates).filter('#tpl-chapter-edit').html();
+        var tpl = getTemplate('#tpl-chapter-edit');
             tpl = Mustache.render(tpl, currentChapter);
             chapterWrap.empty().append(tpl);
             chapterWrap.find('.tag-it').tagit(tagitParam);
-        });
 
         myMedia.setCurrentTime(currentChapter.begin);
     }
 
-
+    function getTemplate(idTpl){
+        return $('#templates').find(idTpl).html();
+    }
 //supprimer
 $('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){
     e.preventDefault();
@@ -362,7 +337,7 @@
 
         chapterSegmentWrap.empty();
         chapterList.empty();
-        $.get('template.html', function(templates){
+       
             $.each(chapters, function(k, v){
 
                 //segments
@@ -375,42 +350,17 @@
                 chapterSegmentWrap.append(segment);
 
                 //liste
-                var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
+                var tplChapterRow = getTemplate('#tpl-chapter-row');
                 tplChapterRow = Mustache.render(tplChapterRow, v);
                 chapterList.append(tplChapterRow);
             });
-        });
+     
     }//renderChapter()
 
-//init
-    function loadInitChapters(){//nouveau projet, 1 chapitre
-        var dataChapter = {
-                title : 'New',
-                begin : 0,
-                end : myMedia.duration,
-                description : 'description',
-                keywords : ['tag1','tag2']
-            };
-
-        newChapter(dataChapter);
-    }
 
 
 //######################## annotation
     
-    function loadInitAnnotation(){//nouveau projet, 1 chapitre
-        var dataAnnotation = {
-                title : 'Titre azerty',
-                begin : myMedia.duration/5,
-                end : myMedia.duration/3,
-                description : 'description',
-                type : 'video',
-                keywords : ['ideal', 'tag']
-            };
-
-        newAnnotation(dataAnnotation);
-        renderAnnotation();
-    }
 
     function newAnnotation(dataAnnotation){
         var annotation = new IriSP.Model.Annotation(false, myProject);
@@ -438,7 +388,7 @@
             return c.begin;
         });
 
-        timeline.empty();
+        timeline.empty().append('<li>');
         annotationList.empty();
 
         $.each(annotations, function(k, v){
@@ -451,19 +401,46 @@
                     width : width,
                     backgroundColor : v.color
                 }).addClass('annotation').attr('id', 'annotation-timeline-'+v.id);
-    
-            timeline.append(segment);
+
+            var isInTimeline = false;
+            $.each(timeline.find('li'), function(a, b){
+                if(isInTimeline) return;
+                var row = $(this);
+                if(row.children().length){
+                    var canBeInRow = true;
+                    $.each(row.find('.annotation'), function(c, d){
+                        var oAL = parseInt($(d).css('left')),
+                            oAR = oAL + $(d).width(),
+                            segmentR = left + width;
+                        if(oAL<=left && oAR>=left || oAL<=segmentR && oAR>= segmentR){
+                            canBeInRow = false;
+                        }
+                    });
+                    if(canBeInRow){
+                        row.append(segment);
+                        isInTimeline = true;
+                    }
+                }else{
+                    row.append(segment);
+                    isInTimeline = true;
+                }
+            });
+
+            if(!isInTimeline){
+                timeline.append('<li>');
+                timeline.find('li:last-child').append(segment);
+            }
+            
            
             //liste
-            $.get('template.html', function(templates){
-                var tplAnnotationRow = $(templates).filter('#tpl-list-annotation-row').html();
+                var tplAnnotationRow = getTemplate('#tpl-list-annotation-row');
                 tplAnnotationRow = Mustache.render(tplAnnotationRow, v);
                 annotationList.append(tplAnnotationRow);
 
-            });
+        });
 
-        });
-    }
+
+    }//renderAnnotation
 
     //edit annotation
     $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
@@ -540,10 +517,10 @@
 
         currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
 
-        $.get('template.html', function(templates){
+      
 
             //head commun à tous
-            var tplHead = $(templates).filter('#tpl-head').html();
+            var tplHead = getTemplate('#tpl-head');
             var output = Mustache.render(tplHead, dataView);
             $(tabContent).append(output);
             $(tabContent).find(".slider-duration").slider(configSlider(dataView));
@@ -553,7 +530,7 @@
                 id : idAnnotation,
                 content : dataView.content
             };
-            var tpl = $(templates).filter('#tpl-'+type).html();
+            var tpl = getTemplate('#tpl-'+type);
 
             tpl = Mustache.render(tpl, viewType);
             $(tabContent).append(tpl);
@@ -566,18 +543,8 @@
                 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');
+                        var videoWrap = $(tabContent).find('.annotation-video-content');
                         renderVideoInfo(videoWrap, viewType.content);
    
                     }
@@ -627,12 +594,12 @@
             }
 
             dataView.iconTab = getIcon(type);
-            var tplOnglet = $(templates).filter('#tpl-onglet').html();
+            var tplOnglet = getTemplate('#tpl-onglet');
             var onglet = Mustache.render(tplOnglet, dataView);
 
             $(".nav-tabs li:last-child").after(onglet);
             $('a[href=#tab-annotation-'+idAnnotation+']').tab('show');
-        });
+  
     }//openTab()
 
     function getIcon(type){
@@ -642,8 +609,7 @@
                 break;
             case 'video': icon = 'film';
                 break;
-            case 'text': 
-                icon = 'align-left';
+            case 'text': icon = 'align-left';
                 break;
             case 'html': icon = 'code';
                 break;
@@ -687,15 +653,15 @@
 
 //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);
+    
+        var tplVideo = getTemplate('#tpl-video-row');
+        tplVideo = Mustache.render(tplVideo, dataVideo);
+        
+        videoWrap.empty().append(tplVideo);
 
-            videoWrap = videoWrap.find(".video-container");
-            getVideoPlayer(dataVideo.url, videoWrap);
-        });
+        videoWrap = videoWrap.find(".video-container");
+        getVideoPlayer(dataVideo.url, videoWrap);
+     
     }
     $('.popup').on('click', '.bibliotheque-video a', function(e){
         e.preventDefault();
@@ -712,18 +678,7 @@
 
         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);
-        });
-*/
         
     });
 
@@ -750,12 +705,12 @@
     });
 
     function addImageToDiaporama(diaporama, dataView){
-        $.get('template.html', function(templates){
-            var tplDiapo = $(templates).filter('#tpl-diaporama-row').html();
-            tplDiapo = Mustache.render(tplDiapo, dataView);
-            diaporama.append(tplDiapo);
-            disabledBtnSortable(diaporama);
-        });
+   
+        var tplDiapo = getTemplate('#tpl-diaporama-row');
+        tplDiapo = Mustache.render(tplDiapo, dataView);
+        diaporama.append(tplDiapo);
+        disabledBtnSortable(diaporama);
+    
     };
 
     //bouton up / down
@@ -801,17 +756,18 @@
 $('.tab-content').on('click', '.delete-link', function(e){
     e.preventDefault();
     var row = $(this).parents('tr'),
-        tbody = $(this).find('tbody');
+        tbody = $(this).parents('tbody');
+
     row.remove();
     updateLinks(tbody);
 });
 function addLinkRow(tbody, dataView){
-    $.get('template.html', function(templates){
+
         //head commun à tous
-        var tplLinkRow = $(templates).filter('#tpl-links-row').html();
+        var tplLinkRow = getTemplate('#tpl-links-row');
         var output = Mustache.render(tplLinkRow, dataView);
         tbody.append(output);
-    });
+
 }
 $('.tab-content').on('keyup', '.links-rows input', function(e){
     var tbody = $(this).parents('.links-rows');
@@ -819,6 +775,7 @@
 });
 function updateLinks(tbody){
     links = new Array();
+
     $.each(tbody.find('tr'), function(k, v){
         var urlLink = $(v).find('.url-link').val(),
             titleLink = $(v).find('.title-link').val(),
@@ -827,23 +784,11 @@
                 title : titleLink
             };
             links.push(link);
+
     });
     currentAnnotation.content.links = links;
 }
 
-
-//annotation html
-/*
-$('.tab-content').on('click', '.btn-html-apercu', function(e){
-    e.preventDefault();
-
-    var apercuWrap = $(this).parents('.edit-annotation-html').find('.html-apercu'),
-        htmlTextarea = $(this).parents('.edit-annotation-html').find('textarea');
-
-    apercuWrap.empty().html(htmlTextarea.val());
-});
-*/
-
 //annotation audio
 $('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){
     var name = $(this).attr('name'),
@@ -860,7 +805,6 @@
     currentAnnotation.content.autostart = autostart;
 });
 
-
 $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
     var value = $(this).val();
     if(!isNaN(value)){
@@ -916,7 +860,6 @@
 
 //slider
 function configSlider(data){
-
     return {
         range: true,
         values: [ data.begin.milliseconds, data.end.milliseconds ],
@@ -942,11 +885,16 @@
                 width :width
             });
 
+
+
+        },
+        stop : function(){
+            renderAnnotation()
         }
     };
-
 }
 
+//init annotation content data
 function getContentAnnotationByType(type){
     var content;
     switch(type){
@@ -993,21 +941,6 @@
 
 
 //test
-//a = $(".wysiwyg").cleditor(wysiwygConfig);
-
-
-$('.number-spin').spin(spinParam);
-
-disabledBtnSortable($('.ui-sortable'))
-$('.ui-sortable').sortable({
-    stop : function(event, ui){
-        disabledBtnSortable($(this));
-    }
-});
-
-$('.slider-duration').slider(configSlider);
-
-$(".tag-it").tagit();
 
 $('.log-annotations').bind('click', function(e){
     e.preventDefault();
@@ -1018,8 +951,10 @@
     e.preventDefault();
     console.log(chapters.length + ' chapitres',chapters);
 });
+
 });//ready
 
+//Utilitaires
 Array.prototype.move = function (old_index, new_index) {
     if (new_index >= this.length) {
         var k = new_index - this.length;
@@ -1028,7 +963,7 @@
         }
     }
     this.splice(new_index, 0, this.splice(old_index, 1)[0]);
-    return this; // for testing purposes
+    return this; 
 };
 
 
@@ -1144,4 +1079,4 @@
         autoplay: "" + autoplay
     }));
                 
-}
\ No newline at end of file
+}//getVideoPlayer
\ No newline at end of file
diff -r dd2fbf4c998f -r 807525d1ad8e src/metadatacomposer/static/metadatacomposer/js/tangle.js
--- a/src/metadatacomposer/static/metadatacomposer/js/tangle.js	Mon Jun 03 13:33:16 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/tangle.js	Mon Jun 03 13:33:35 2013 +0200
@@ -54,7 +54,7 @@
     }
 
     function updateChapterDuration(val, chapterBefore, chapterAfter){
-        if (val<chapterAfter.end && val>chapterBefore.begin) {
+        if (val<=chapterAfter.end && val>=chapterBefore.begin) {
             chapterAfter.setBegin(val);
             chapterBefore.setEnd(val);
 
diff -r dd2fbf4c998f -r 807525d1ad8e src/metadatacomposer/templates/metadatacomposer_player.html
--- a/src/metadatacomposer/templates/metadatacomposer_player.html	Mon Jun 03 13:33:16 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_player.html	Mon Jun 03 13:33:35 2013 +0200
@@ -7,114 +7,12 @@
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-
         <title>Festival d’Art Lyrique d'Aix en Provence › Webdoc player</title>
-        
         {% include player_css %}
-        
-        <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>
     </head>
 
     <body>
-        <div class="top-bar">
-            <div class="tags">
-                <h3 class="tags-title">Tags</h3>
-                <ul class="tags-list"></ul>
-            </div>
-            <h1 class="project-title"></h1>
-        </div>
-        <div class="main-video" style="background:#101010;">
-            <div class="video-container"></div>
-            <ul class="pictolist"></ul>
-            
-        </div>
-        <div class="bottom-bar">
-            <div class="play-button">
-                <a href="#"></a>
-            </div>
-            <div class="chapters-bar">
-                <ul class="chapters-list"></ul>
-                <ul class="chips-list"></ul>
-                <div class="left-hiding-block"></div>
-                <div class="right-hiding-block"></div>
-                <div class="progress-indicator"></div>
-            </div>
-            <div class="chapter-nav">
-                <div class="prev-chapter inactive"></div>
-                <div class="next-chapter"></div>
-            </div>
-        </div>
-        <div class="annotation-templates">
-            <div class="annotations">
-                
-                <div class="annotation text-annotation white-annotation">
-                    <a href="#" class="close-annotation"></a>
-                    <h2 class="annotation-title"></h2>
-                    <div class="text-contents"></div>
-                </div>
-                
-                <div class="annotation link-annotation white-annotation narrow-annotation">
-                    <a href="#" class="close-annotation"></a>
-                    <h2 class="annotation-title"></h2>
-                    <div class="link-contents">
-                        
-                    </div>
-                </div>
-
-                <div class="annotation slideshow-annotation black-annotation">
-                    <a href="#" class="close-annotation"></a>
-                    <h2 class="annotation-title"></h2>
-                    <div class="annotation-main">
-                        <div class="slideshow-frame">
-                            <img class="slideshow-image" />
-                            <div class="slideshow-arrow slideshow-previous">
-                                <a href="#"></a>
-                            </div>
-                            <div class="slideshow-arrow slideshow-next">
-                                <a href="#"></a>
-                            </div>
-                        </div>
-                        <div class="slideshow-description">
-                        </div>
-                    </div>
-                    <div class="slideshow-bottom">
-                        <div class="slideshow-play-pause">
-                            <a href="#"></a>
-                        </div>
-                        <div class="slideshow-title"></div>
-                    </div>
-                </div>
-                
-                <div class="annotation audio-annotation black-annotation narrow-annotation">
-                    <a href="#" class="close-annotation"></a>
-                    <h2 class="annotation-title"></h2>
-                    <div class="annotation-main">
-                        <div class="media-frame"></div>
-                        <div class="media-description"></div>
-                    </div>
-                </div>
-
-                <div class="annotation video-annotation black-annotation">
-                    <a href="#" class="close-annotation"></a>
-                    <h2 class="annotation-title"></h2>
-                    <div class="annotation-main">
-                        <div class="media-frame">
-                        </div>
-                        <div class="media-description">
-                        </div>
-                    </div>
-                </div>
-                         
-            </div>
-        </div>
+    {% include "partial/metadatacomposer_partial_player.html" %}
     {% analytics %}
     </body>
 </html>
diff -r dd2fbf4c998f -r 807525d1ad8e src/metadatacomposer/templates/metadatacomposer_preview_player.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/metadatacomposer/templates/metadatacomposer_preview_player.html	Mon Jun 03 13:33:35 2013 +0200
@@ -0,0 +1,11 @@
+{% extends "metadatacomposer_home.html" %}
+{% load static %}
+{% load i18n %}
+
+{% block title %}{% trans "Project preview" %}{% endblock %}
+
+{% block containers %}
+            <article class="container">
+            <iframe src="{% url 'composer_player' branding=branding ldt_id=ldt_id %}" width="1000" height="700" frameborder="0"></iframe>
+            </article>
+{% endblock %}
diff -r dd2fbf4c998f -r 807525d1ad8e src/metadatacomposer/templates/metadatacomposer_project_list.html
--- a/src/metadatacomposer/templates/metadatacomposer_project_list.html	Mon Jun 03 13:33:16 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_project_list.html	Mon Jun 03 13:33:35 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_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 %}" target="_blank"><i class="icon-eye-open"></i></a></td>
                                         <td><a class="btn" href="#"><i class="icon-copy"></i></a></td>
                                     </tr>
                                 </table>        
diff -r dd2fbf4c998f -r 807525d1ad8e src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html	Mon Jun 03 13:33:35 2013 +0200
@@ -0,0 +1,103 @@
+
+{% load static %}
+{% load absurl %}
+        <div class="top-bar">
+            <div class="tags">
+                <h3 class="tags-title">Tags</h3>
+                <ul class="tags-list"></ul>
+            </div>
+            <h1 class="project-title"></h1>
+        </div>
+        <div class="main-video" style="background:#101010;">
+            <div class="video-container"></div>
+            <ul class="pictolist"></ul>
+            
+        </div>
+        <div class="bottom-bar">
+            <div class="play-button">
+                <a href="#"></a>
+            </div>
+            <div class="chapters-bar">
+                <ul class="chapters-list"></ul>
+                <ul class="chips-list"></ul>
+                <div class="left-hiding-block"></div>
+                <div class="right-hiding-block"></div>
+                <div class="progress-indicator"></div>
+            </div>
+            <div class="chapter-nav">
+                <div class="prev-chapter inactive"></div>
+                <div class="next-chapter"></div>
+            </div>
+        </div>
+        <div class="annotation-templates">
+            <div class="annotations">
+                
+                <div class="annotation text-annotation white-annotation">
+                    <a href="#" class="close-annotation"></a>
+                    <h2 class="annotation-title"></h2>
+                    <div class="text-contents"></div>
+                </div>
+                
+                <div class="annotation link-annotation white-annotation narrow-annotation">
+                    <a href="#" class="close-annotation"></a>
+                    <h2 class="annotation-title"></h2>
+                    <div class="link-contents">
+                        
+                    </div>
+                </div>
+
+                <div class="annotation slideshow-annotation black-annotation">
+                    <a href="#" class="close-annotation"></a>
+                    <h2 class="annotation-title"></h2>
+                    <div class="annotation-main">
+                        <div class="slideshow-frame">
+                            <img class="slideshow-image" />
+                            <div class="slideshow-arrow slideshow-previous">
+                                <a href="#"></a>
+                            </div>
+                            <div class="slideshow-arrow slideshow-next">
+                                <a href="#"></a>
+                            </div>
+                        </div>
+                        <div class="slideshow-description">
+                        </div>
+                    </div>
+                    <div class="slideshow-bottom">
+                        <div class="slideshow-play-pause">
+                            <a href="#"></a>
+                        </div>
+                        <div class="slideshow-title"></div>
+                    </div>
+                </div>
+                
+                <div class="annotation audio-annotation black-annotation narrow-annotation">
+                    <a href="#" class="close-annotation"></a>
+                    <h2 class="annotation-title"></h2>
+                    <div class="annotation-main">
+                        <div class="media-frame"></div>
+                        <div class="media-description"></div>
+                    </div>
+                </div>
+
+                <div class="annotation video-annotation black-annotation">
+                    <a href="#" class="close-annotation"></a>
+                    <h2 class="annotation-title"></h2>
+                    <div class="annotation-main">
+                        <div class="media-frame">
+                        </div>
+                        <div class="media-description">
+                        </div>
+                    </div>
+                </div>
+                         
+            </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
diff -r dd2fbf4c998f -r 807525d1ad8e src/metadatacomposer/urls.py
--- a/src/metadatacomposer/urls.py	Mon Jun 03 13:33:16 2013 +0200
+++ b/src/metadatacomposer/urls.py	Mon Jun 03 13:33:35 2013 +0200
@@ -5,7 +5,8 @@
     MetadataComposerImagePagination, MetadataComposerModalImageLibrary,\
     MetadataComposerRemoveImage, MetadataComposerRemoveContent,\
     MetadataComposerRemoveProject, MetadataComposerImage,\
-    MetadataComposerModalContentLibrary, MetadataComposerPlayer
+    MetadataComposerModalContentLibrary, MetadataComposerPlayer,\
+    MetadataComposerPreviewPlayer
 
 urlpatterns = patterns('',
     url(r'^jsi18n/(?P<packages>\S+?)/$', 'django.views.i18n.javascript_catalog', name='jsi18n'),
@@ -23,6 +24,7 @@
     url(r'^(?P<branding>.*)/removeproject/$', MetadataComposerRemoveProject.as_view(), name="composer_remove_project"),
     url(r'^(?P<branding>.*)/image/(?P<image_pk>[\w-]+)/$', MetadataComposerImage.as_view(), name="composer_image"),
     url(r'^(?P<branding>.*)/player/(?P<ldt_id>[\w-]+)/$', MetadataComposerPlayer.as_view(), name="composer_player"),
+    url(r'^(?P<branding>.*)/previewplayer/(?P<ldt_id>[\w-]+)/$', MetadataComposerPreviewPlayer.as_view(), name="composer_preview_player"),
     url(r'^(?P<branding>.*)/$', MetadataComposerHome.as_view(), name="composer_home"),
     url(r'^$', MetadataComposerHome.as_view(), name="composer_home"),
 )
diff -r dd2fbf4c998f -r 807525d1ad8e src/metadatacomposer/views.py
--- a/src/metadatacomposer/views.py	Mon Jun 03 13:33:16 2013 +0200
+++ b/src/metadatacomposer/views.py	Mon Jun 03 13:33:35 2013 +0200
@@ -382,7 +382,6 @@
 
 class MetadataComposerImage(View):
     
-    @method_decorator(login_required)
     def get(self, request, branding="iri", image_pk=None, **kwargs):
         self.branding = branding
         image_data = None
@@ -460,7 +459,7 @@
         self.branding = branding
         
         if not ldt_id:
-            return HttpResponseBadRequest("height parameter must be integer.")
+            return HttpResponseBadRequest("ldt_id parameter must be set.")
         
         context = self.get_context_dict(request)
         context.update({"ldt_id": ldt_id})
@@ -468,3 +467,28 @@
 
 
 
+class MetadataComposerPreviewPlayer(TemplateResponseMixin, MetadataComposerContextView):
+    
+    def get_template_names(self):
+        if self.template_name and self.template_name!="":
+            return self.template_name
+        else:
+            return "metadatacomposer_preview_player.html"
+    
+    @method_decorator(login_required)
+    @method_decorator(never_cache)
+    def dispatch(self, *args, **kwargs):
+        return super(MetadataComposerPreviewPlayer, self).dispatch(*args, **kwargs)
+    
+    def get(self, request, branding="iri", ldt_id=None, **kwargs):
+        self.branding = branding
+        
+        if not ldt_id:
+            return HttpResponseBadRequest("ldt_id parameter must be set.")
+        
+        context = self.get_context_dict(request)
+        context.update({"ldt_id": ldt_id})
+        return self.render_to_response(context)
+
+
+