Merge with 807525d1ad8e3856083c318b0ebfa8e3c6f0cab9
authorcavaliet
Mon, 03 Jun 2013 16:39:52 +0200
changeset 69 31b0ac589b45
parent 68 6af3780b0719 (diff)
parent 67 807525d1ad8e (current diff)
child 71 79974d302930
Merge with 807525d1ad8e3856083c318b0ebfa8e3c6f0cab9
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js	Mon Jun 03 13:33:35 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js	Mon Jun 03 16:39:52 2013 +0200
@@ -79,10 +79,10 @@
             url_transform: function(src) {
                 return [{
                     type: "video/mp4",
-                    src: src.replace(/\.[\d\w]+$/,'.mp4')
+                    src: src.replace(/\.[\d\w]+$/,'.mp4').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
                 }, {
                     type: "video/webm",
-                    src: src.replace(/\.[\d\w]+$/,'.webm')
+                    src: src.replace(/\.[\d\w]+$/,'.webm').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
                 }];
             }
         }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/metadatacomposer/templates/metadatacomposer_edit.html	Mon Jun 03 16:39:52 2013 +0200
@@ -0,0 +1,863 @@
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+{% load front_tags %}
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Aix - Back office > Edition</title>
+    <!--[if lt IE 9]>
+        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link href="{% static 'metadatacomposer/lib/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
+    <link href="{% static 'metadatacomposer/lib/jquery-ui/themes/base/minified/jquery-ui.min.css' %}" rel="stylesheet">
+    <link href="{% static 'metadatacomposer/lib/CLEditor/jquery.cleditor.css' %}" rel="stylesheet">
+    <link href="{% static 'metadatacomposer/lib/tag-it/css/jquery.tagit.css' %}" rel="stylesheet">
+    <link href="{% static 'metadatacomposer/css/style.css' %}" rel="stylesheet">
+</head>
+<body>
+    <div class="wrap">
+        <header>
+            <div class="container">
+                <div class="row">
+                    <div class="span3"><h1><a class="clearfix" href="{% url 'composer_home' branding=branding %}">
+                        {% include top_header_partial %}
+                    </a></h1></div>
+                    <div class="span9">
+                        <ul class="breadcrumb nav-bar">
+                        <li><a href="{% url 'composer_project_list' branding=branding %}"><i class="icon-file"></i> Projets</a></li>
+                        <li><span class="divider">></span></li>
+                        <li class="active"><i class="icon-folder-close-alt"></i> <span class="project-title-nav">{{ project.title }}</span></li>
+                        <li><span class="divider">/</span></li>
+                        <li><a href="{% url 'composer_resource_list' branding=branding %}"><i class="icon-folder-close-alt"></i>Ressources</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <section>
+            <div class="container">
+                <div class="row project-head">
+                    <div class="span7">
+
+                        <div class="project-title-editor">
+                            <i class="icon-folder-close-alt"></i> 
+                            <span class="project-title">{{ project.title }}</span> <i class="icon-pencil"></i> 
+                        </div>
+
+                    </div>
+                    <div class="span5 text-right project-action">
+                        <a href="{% url 'composer_preview_player' branding=branding ldt_id=ldt_id %}" class="btn"><i class="icon-eye-open"></i> Voir aperçu</a>
+                        <a href="#" class="btn btn-success"><i class="icon-save"></i> Sauvegarder le projet</a>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="span6">
+                        <div class="video-wrap">
+                            <div class="main-video"></div>
+                            <div class="annotations-display">
+                                <div class="annotation-display-view"></div>
+                                <ul class="list-current-annotations">
+
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="timeline-annotations-wrap">
+                            <div class="indicateur-annotation"></div>
+                            <!--<div class="timeline-annotations"></div>-->
+                            <ul class="timeline-annotations">
+        
+                            </ul>
+                        </div>
+<!-- chapter-widget -->
+                        <div class="chapter-widget">
+                            <div class="row">
+                                
+                                <div class="span6 chapitre-cut-wrap">
+                                    <div class="indicateur-chapter"></div>
+                                    <ul class="chapter-segments"></ul>
+                                    
+                                    <a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> <i class="icon-cut"></i></a>
+                                </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>
+                                <table class="table" width="5000">
+                                    <thead>
+                                        <tr>
+                                            <th>Titre</th>
+                                            <th>Tags</th>
+                                            <th class="wDuration">Début</th>
+                                            <th class="wDuration">Durée</th>
+                                            <th class="wDuration">Fin</th>
+                                            <th>Actions</th>
+                                        </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>
+                            
+                        </div><!-- /.chapter-widget -->
+                    </div>
+                    <div class="span6 col-right">
+<!-- tab -->
+                        <ul class="nav nav-tabs" id="onglet-annotations">
+                            <li class="active"><a data-toggle="list-annotations" id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
+                            <!--<li><a href="#annotation-azerty"><i class="icon-film"></i> All <span class="close-tab">&times;</span></a> </li>-->
+                        </ul>
+
+                        <div class="tab-content">
+<!-- liste annotations -->
+                            <div class="tab-pane active" id="list-annotations">
+                                <div class="add-annotation-wrap section">
+                                    <h4 class="title-section"><i class="icon-bookmark"></i> <i class="icon-plus"></i> Ajouter une annotation de type</h4>
+                                    <div class="text-center">
+                                        <a href="#" title="Son" data-type="audio" class="btn open-tab"><i class="icon-volume-up"></i> Son</a>
+                                        <a href="#" title="Vidéo" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a>
+                                        <a href="#" title="Diaporama" data-type="slideshow" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a>
+                                        <a href="#" title="Texte" data-type="text" class="btn open-tab"><i class="icon-align-left"></i> Texte</a>
+                                        <a href="#" title="Lien" data-type="links" class="btn open-tab"><i class="icon-link"></i> Liens</a>
+                                    </div>
+                                </div>
+                                <div class="list-annotation-wrap">
+                                    <h4><i class="icon-bookmark"></i> <i class="icon-th-list"></i> Liste des annotations</h4>
+                                    <table class="table">
+                                        <thead>
+                                            <tr>
+                                                <th>Titre</th>
+                                                <th>Type</th>
+                                                <th>Début</th>
+                                                <th>Durée</th>
+                                                <th>Fin</th>
+                                                <th>Actions</th>
+                                            </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>
+                            </div>
+<!-- exemple annotation all -->
+                            <div class="tab-pane" id="annotation-azerty">
+    <!-- head -->
+                                <form action="#" class="form-info-general-annotation">
+                                    <div class="row">
+                                        <div class="span3 text-right">
+                                            <input type="text" placeholder="Titre de l'annotation..">
+                                            <textarea name="" id=""></textarea>
+                                        </div>
+                                        <div class="span3">
+                                            <input type="text" placeholder="Titre de l'annotation..">
+                                            <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 id="id741-begin" class="span1">4:20</td>
+                                                        <td id="id741-duration" class="span1">4:20</td>
+                                                        <td id="id741-end" class="span1">4:20</td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="span6 text-center">
+                                            <div data-id="id741" id="id741" class="slider-duration"></div>
+                                        </div>
+                                        <div class="span6 text-right">
+                                            <button data-id="id741" type="submit" class="btn btn-primary btn-save-annotation">
+                                                <i class="icon-save"></i> Enregistrer l'annotation
+                                            </button>
+                                        </div>
+                                    </div>
+                                </form>
+    <!-- Liens -->
+                                <div class="edit-annotation-title row">
+                                    <h3 class="span3"><i class="icon-link"></i> Liens</h3>
+                                </div>
+                                <div class="row annotation-links-content">
+                                        <div class="span6">
+                                            <form class="form-horizontal">
+                                                <table class="table">
+                                                    <thead>
+                                                        <tr>
+                                                            <th>URL</th>
+                                                            <th>Titre du lien</th>
+                                                            <th>Actions</th>
+                                                        </tr>
+                                                    </thead>
+                                                    <tbody>
+                                                        <tr>
+                                                            <td><input class="input-medium" type="text" placeholder="http://"></td>
+                                                            <td><input class="input-medium" type="text" placeholder="Titre du lien"></td>
+                                                            <td>
+                                                                <a class="btn" href="#"><i class="icon-trash"></i></a>
+                                                                <a class="btn" href="#"><i class="icon-plus"></i></a>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td><input class="input-medium" type="text" placeholder="http://"></td>
+                                                            <td><input class="input-medium" type="text" placeholder="Titre du lien"></td>
+                                                            <td>
+                                                                <a class="btn" href="#"><i class="icon-trash"></i></a>
+                                                                <a class="btn" href="#"><i class="icon-plus"></i></a>
+                                                            </td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                            </form>
+                                        </div>
+
+                                </div>
+    <!-- Son -->
+                                <div class="edit-annotation-title row">
+                                    <h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
+                                </div>
+                                <div class="row annotation-audio-content">
+                                        <div class="span6">
+                                            <form class="form-horizontal">
+                                                <div class="control-group">
+                                                    <label class="control-label" for="url-source">URL source :</label>
+                                                    <div class="controls">
+                                                        <input type="text" id="url-source" placeholder="http://">
+                                                    </div>
+                                                </div>
+                                                <div class="control-group">
+                                                    <label class="control-label" for="embed">Code embed :</label>
+                                                    <div class="controls">
+                                                        <textarea name="" id="embed" cols="30" rows="10"></textarea>
+                                                    </div>
+                                                </div>
+                                            </form>
+                                        </div>
+                                </div>
+
+    <!-- vidéo -->
+                                <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-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
+                                    </span>
+                                </div>
+                                <div class="row annotation-video-content">
+                                    <div class="span6">
+                                        <img src="img/460x345.gif" alt="">
+                                        <table class="table">
+                                            <tbody>
+                                                <tr>
+                                                    <th>Titre</th>
+                                                    <td>Titre de la vidéo Azerty</td>
+                                                </tr>
+                                                <tr>
+                                                    <th>Date</th>
+                                                    <td>14 / 05 / 2016</td>
+                                                </tr>
+                                                <tr>
+                                                    <th>Durée</th>
+                                                    <td>25 m 35 s</td>
+                                                </tr>
+                                                <tr>
+                                                    <th>Description</th>
+                                                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste blanditiis ducimus sint nemo aspernatur rem hic facere culpa dolore quis itaque magni voluptates aliquid veritatis non harum quo libero.</td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            
+    <!-- html -->
+                                <div class="edit-annotation-title row">
+                                    <h3 class="span3"><i class="icon-link"></i> Html</h3>
+                                </div>
+                                <div class="row edit-annotation-html">
+                                    <div class="span6">
+                                        <textarea class="" name="" id="" cols="30" rows="10"></textarea>
+                                        
+                                    </div>
+                                    <div class="span6 text-right">
+                                        <a href="#" class="btn btn-html-apercu"><i class="icon-eye-open"></i> Aperçu</a>
+                                    </div>
+                                    <div class="html-apercu span6"></div>
+                                </div>
+                            
+
+    <!-- text -->
+                                <div class="edit-annotation-title row">
+                                    <h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
+                                </div>
+                                <div class="row">
+                                    <div class="span6 wysiwyg-wrap">
+                                        <textarea class="wysiwyg" name="" id="" cols="30" rows="10"></textarea>
+                                    </div>
+                                </div>
+    <!-- diaporama -->
+                        
+                                <div class="edit-annotation-title row">
+                                    <h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
+                                    <span class="span3">
+                                        Ajouter une image 
+                                        <a data-type-media="image" data-diaporama="diaporama-id1" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
+                                    </span>
+                                </div>
+                                <div class="row config-diaporama">
+                                    <form action="">
+                                        <div class="span3">
+                                            <label for="">Diaporama :</label>
+                                            <div class="btn-group" data-toggle="buttons-radio">
+                                                <button type="button" class="btn btn-primary">Manuel</button>
+                                                <button type="button" class="btn btn-primary active">Auto</button>
+                                            </div>  
+                                        </div>
+                                        <div class="span3">
+                                            <label for="">Durée image : </label>
+                                            <input pattern="[0-9]*" class="span1 number-spin" type="text" value="1"> sec
+                                        </div>
+                                    </form>
+                                </div>
+                                <div class="row">
+                                    <div class="span6">
+                                        <table class="table">
+                                            <thead>
+                                                <tr>
+                                                    <th>Aperçu</th>
+                                                    <th>Titre</th>
+                                                    <th>Description</th>
+                                                    <th>Actions</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="diaporama-id1" class="list-image-diaporama ui-sortable">
+                                                <tr id="rid-id1" class="row-image-diaporama">
+                                                    <td><img src="img/60x60.gif" alt=""> </td>
+                                                    <td>Titre annotation 1</td>
+                                                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
+                                                    <td>
+                                                        <table>
+                                                            <tr>
+                                                                <td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td>
+                                                                <td><a data-title="une image" href="#rid-id1" class="btn btn-delete"><i class="icon-trash"></i></a></td>
+                                                            </tr>
+                                                            <tr>
+                                                                <td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
+                                                                <td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+                                                            </tr>
+                                                        </table>
+                                                    </td>
+                                                </tr>
+                                                <tr id="rid-id2" class="row-image-diaporama">
+                                                    <td><img src="img/60x60.gif" alt=""> </td>
+                                                    <td>Titre annotation 2</td>
+                                                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
+                                                    <td>
+                                                        <table>
+                                                            <tr>
+                                                                <td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
+                                                                <td><a href="" class="btn"><i class="icon-trash"></i></a></td>
+                                                            </tr>
+                                                            <tr>
+                                                                <td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
+                                                                <td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+                                                            </tr>
+                                                        </table>
+                                                    </td>
+                                                </tr>
+                                                <tr id="rid-id3" class="row-image-diaporama">
+                                                    <td><img src="img/60x60.gif" alt=""> </td>
+                                                    <td>Titre annotation 3</td>
+                                                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
+                                                    <td>
+                                                        <table>
+                                                            <tr>
+                                                                <td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
+                                                                <td><a href="" class="btn"><i class="icon-trash"></i></a></td>
+                                                            </tr>
+                                                            <tr>
+                                                                <td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
+                                                                <td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+                                                            </tr>
+                                                        </table>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                        
+                            </div><!-- /exemple annotation all -->
+
+                        </div><!-- /.tab-content -->
+                    </div><!-- /.col-right -->
+                </div>
+            </div><!-- /.container -->
+        </section>
+        <footer>
+            <a href="#" class="log-annotations">Log annotations</a> - <a href="#" class="log-chapters">Log chapitres</a>
+        </footer>
+    </div>
+
+<!-- modal -->
+    <div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            <h3></h3>
+        </div>
+        <div class="modal-body">
+
+        </div>
+    </div>
+
+    <div id="modal-confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            <h3><i class="icon-warning-sign"></i> Confirmation de la suppression</h3>
+        </div>
+        <div class="modal-body">
+            <p>Êtes-vous sûr de vouloir supprimer <strong class="titleMedia"></strong> ?</p>
+        </div>
+        <div class="modal-footer">
+            <button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
+            <button id="btn-delete-modal" class="btn btn-primary">Supprimer</button>
+        </div>
+    </div>
+
+<div id="templates">
+<script id="tpl-head" type="text/html">
+<form action="#" class="form-info-general-annotation" style="background-color:{% templatetag openvariable %}color{% templatetag closevariable %}" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
+
+    <div class="row">
+        <div class="span3 text-right">
+            <input type="text" placeholder="Titre de l'annotation.." name="title" value="{% templatetag openvariable %}title{% templatetag closevariable %}">
+            <textarea id="" name="description">{% templatetag openvariable %}description{% templatetag closevariable %}</textarea>
+        </div>
+        <div class="span3">
+            <input type="text" class="tag-it" data-type="annotation" value="{% templatetag openvariable %}keywords{% templatetag closevariable %}">
+            <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 id="{% templatetag openvariable %}id{% templatetag closevariable %}-begin" class="span1">{% templatetag openvariable %}begin{% templatetag closevariable %}</td>
+                        <td id="{% templatetag openvariable %}id{% templatetag closevariable %}-duration" class="span1">{% templatetag openvariable %}getDuration{% templatetag closevariable %}</td>
+                        <td id="{% templatetag openvariable %}id{% templatetag closevariable %}-end" class="span1">{% templatetag openvariable %}end{% templatetag closevariable %}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="row">
+        <div class="span6 text-center">
+            <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-annotation" 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 %}">
+                <i class="icon-ok"></i> Ok
+            </a>
+        </div>
+    </div>
+</form>
+</script>
+
+<script id="tpl-onglet" type="text/html">
+<li id="onglet-{% templatetag openvariable %}id{% templatetag closevariable %}">
+    <a data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" data-toggle="annotation" href="#tab-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}">
+        <i class="icon-{% templatetag openvariable %}iconTab{% templatetag closevariable %}"></i> 
+        <span id="onglet-title-{% templatetag openvariable %}id{% templatetag closevariable %}">{% templatetag openvariable %}title{% templatetag closevariable %}</span> 
+        <span class="close-tab">&times;</span>
+    </a>
+</li>
+</script>
+
+<script id="tpl-audio" type="text/html">
+<div class="edit-annotation-title row">
+    <h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
+</div>
+<div class="row annotation-audio-content">
+        <div class="span6">
+            <form class="form-horizontal">
+                <div class="control-group">
+                    <label class="control-label" for="url-source-{% templatetag openvariable %}id{% templatetag closevariable %}">URL source :</label>
+                    <div class="controls">
+                        <input type="text" value="{% templatetag openvariable %}content.url{% templatetag closevariable %}" name="url" id="url-source-{% templatetag openvariable %}id{% templatetag closevariable %}" placeholder="http://">
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label class="control-label" for="embed-{% templatetag openvariable %}id{% templatetag closevariable %}">Code embed :</label>
+                    <div class="controls">
+                        <textarea name="embedcode" id="embed-{% templatetag openvariable %}id{% templatetag closevariable %}" cols="30" rows="10">{% templatetag openvariable %}content.embedcode{% templatetag closevariable %}</textarea>
+                    </div>
+                </div>
+            </form>
+        </div>
+</div>
+</script>
+
+<script id="tpl-video" type="text/html">
+<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="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
+    </span>
+</div>
+<div class="row annotation-video-content">
+
+</div>
+</script>
+
+<script id="tpl-html" type="text/html">
+<div class="edit-annotation-title row">
+    <h3 class="span3"><i class="icon-link"></i> Html</h3>
+</div>
+<div class="row edit-annotation-html">
+    <div class="span6">
+        <textarea class="" name="" id="" cols="30" rows="10"></textarea>
+    </div>
+    <div class="span6 text-right">
+        <a href="#" class="btn btn-html-apercu"><i class="icon-eye-open"></i> Aperçu</a>
+    </div>
+    <div class="html-apercu span6"></div>
+</div>
+</script>
+
+<script id="tpl-text" type="text/html">
+<div class="edit-annotation-title row">
+    <h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
+</div>
+<div class="row">
+    <div class="span6 wysiwyg-wrap">
+        <textarea class="wysiwyg" name="" id="" cols="30" rows="10">{% templatetag openvariable %}content.text{% templatetag closevariable %}</textarea>
+    </div>
+</div>
+</script>
+
+<script id="tpl-slideshow" type="text/html">
+<div class="edit-annotation-title row">
+    <h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
+    <span class="span3">
+        Ajouter une image 
+        <a data-type-media="image" data-diaporama="diaporama-{% templatetag openvariable %}id{% templatetag closevariable %}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
+    </span>
+</div>
+<div class="row config-diaporama">
+    <form action="">
+        <div class="span3">
+            <label for="">Diaporama :</label>
+            <div class="btn-group" data-toggle="buttons-radio">
+                <button type="button" data-autostart="false" class="{% templatetag openvariable %}^content.autostart{% templatetag closevariable %}active{% templatetag openvariable %}/content.autostart{% templatetag closevariable %} btn btn-primary btn-autostart">Manuel</button>
+                <button type="button" class="{% templatetag openvariable %}#content.autostart{% templatetag closevariable %}active{% templatetag openvariable %}/content.autostart{% templatetag closevariable %} btn btn-primary  btn-autostart" data-autostart="true">Auto</button>
+            </div>  
+        </div>
+        <div class="span3">
+            <label for="">Durée image : </label>
+            <input pattern="[0-9]*" class="span1 number-spin" type="text" name="duration" value="1"> sec
+        </div>
+    </form>
+</div>
+<div class="row">
+    <div class="span6">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Aperçu</th>
+                    <th>Titre</th>
+                    <th>Description</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody id="diaporama-{% templatetag openvariable %}id{% templatetag closevariable %}" class="list-image-diaporama ui-sortable">
+
+            </tbody>
+        </table>
+    </div>
+</div>
+</script>
+
+<script id="tpl-links" type="text/html">
+<div class="edit-annotation-title row">
+    <h3 class="span3"><i class="icon-link"></i> Liens</h3>
+</div>
+<div class="row annotation-links-content">
+    <div class="span6">
+        <form class="form-horizontal">
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>URL</th>
+                        <th>Titre du lien</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" class="links-rows">
+
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="3"><a class="btn btn-success add-link" href="#"><i class="icon-plus"></i> Ajouter un lien</a></td>
+                    </tr>
+                </tfoot>
+            </table>
+        </form>
+    </div>
+</div>
+</script>
+
+<script id="tpl-links-row" type="text/html">
+<tr>
+    <td><input class="input-medium url-link" type="text" value="{% templatetag openvariable %}url{% templatetag closevariable %}" placeholder="http://"></td>
+    <td><input class="input-medium title-link" type="text" value="{% templatetag openvariable %}title{% templatetag closevariable %}" placeholder="Titre du lien"></td>
+    <td>
+        <a class="btn delete-link" href="#"><i class="icon-trash"></i> </a>
+    </td>
+</tr>
+</script>
+
+<script id="tpl-diaporama-row" type="text/html">
+<tr id="rid-{% templatetag openvariable %}ridid{% templatetag closevariable %}" class="row-image-diaporama">
+    <td class="image-slideshow-row"><img data-url="{% templatetag openvariable %}url{% templatetag closevariable %}" src="{% templatetag openvariable %}url{% templatetag closevariable %}" alt=""> </td>
+    <td class="title-slideshow-row">{% templatetag openvariable %}title{% templatetag closevariable %}</td>
+    <td class="description-slideshow-row">{% templatetag openvariable %}description{% templatetag closevariable %}</td>
+    <td>
+        <table>
+            <tr>
+                <td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td>
+                <td><a data-title="une image" href="#rid-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-image"><i class="icon-trash"></i></a></td>
+            </tr>
+            <tr>
+                <td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
+                <td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+            </tr>
+        </table>
+    </td>
+</tr>
+</script>
+
+<script id="tpl-video-row" type="text/html">
+<div class="span6">
+    <div class="video-container"></div>
+    <table class="table">
+        <tbody>
+            <tr>
+                <th>Titre</th>
+                <td>{% templatetag openvariable %}title{% templatetag closevariable %}</td>
+            </tr>
+            <tr>
+                <th>Description</th>
+                <td>{% templatetag openvariable %}description{% templatetag closevariable %}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+</script>
+
+<script id="tpl-list-annotation-row" type="text/html">
+<tr id="row-list-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color : {% templatetag openvariable %}color{% templatetag closevariable %};">
+    <td>{% templatetag openvariable %}title{% templatetag closevariable %}</td>
+    <td>{% templatetag openvariable %}type{% templatetag closevariable %}</td>
+    <td>{% templatetag openvariable %}begin{% templatetag closevariable %}</td>
+    <td>{% templatetag openvariable %}getDuration{% templatetag closevariable %}</td>
+    <td>{% templatetag openvariable %}end{% templatetag closevariable %}</td>
+    <td>
+        <a href="#" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-edit-annotation" data-type="{% templatetag openvariable %}type{% templatetag closevariable %}">
+            <i class="icon-pencil"></i></a>
+        <a data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" data-type="annotation" data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" href="#row-list-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-annotation">
+            <i class="icon-trash delete-annotation"></i>
+        </a>
+    </td>
+</tr>
+</script>
+
+<script id="tpl-chapter-row" type="text/html">
+<tr id="row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color : {% templatetag openvariable %}color{% templatetag closevariable %};">
+    <td class="list-chapter-title">{% templatetag openvariable %}title{% templatetag closevariable %}</td>
+    <td class="list-chapter-tags">{% templatetag openvariable %}keywords{% templatetag closevariable %}</td>
+    <td class="begin">{% templatetag openvariable %}begin{% templatetag closevariable %}</td>
+    <td class="duration">{% templatetag openvariable %}getDuration{% templatetag closevariable %}</td>
+    <td class="end">{% templatetag openvariable %}end{% templatetag closevariable %}</td>
+    <td>
+        <table>
+            <tr>
+                <td>
+                    <a href="#" class="btn btn-edit-chapter" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}"><i class="icon-pencil"></i></a>
+                </td>
+                <td>
+                    <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>
+</script>
+
+<script id="tpl-chapter-edit" type="text/html">
+<form data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="form-chapter-edit-{% templatetag openvariable %}id{% templatetag closevariable %}" action="#" class="form-chapter-edit" style="background-color:{% templatetag openvariable %}color{% templatetag closevariable %}">
+    <h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4>
+    <div class="row">
+        <div class="span3 text-right">
+            <input name="title" type="text" value="{% templatetag openvariable %}title{% templatetag closevariable %}">
+            <input name="keywords" type="text" class="tag-it" data-type="chapter" value="{% templatetag openvariable %}keywords{% templatetag closevariable %}">
+        </div>
+        <div class="span3">
+            <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"><span {% templatetag openvariable %}#beginTangle{% templatetag closevariable %}class="time-tangle tangle-start begin" data-milliseconds="{% templatetag openvariable %}begin.milliseconds{% templatetag closevariable %}"{% templatetag openvariable %}/beginTangle{% templatetag closevariable %}>{% templatetag openvariable %}begin{% templatetag closevariable %}</span></td>
+                        <td class="span1"><span>{% templatetag openvariable %}getDuration{% templatetag closevariable %}</span></td>
+                        <td class="span1"><span {% templatetag openvariable %}#endTangle{% templatetag closevariable %}class="time-tangle tangle-end end" data-milliseconds="{% templatetag openvariable %}end.milliseconds{% templatetag closevariable %}"{% templatetag openvariable %}/endTangle{% templatetag closevariable %}>{% templatetag openvariable %}end{% templatetag closevariable %}</span></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="row">
+        <div class="span6 text-center">
+            <textarea class="" name="description" id="">{% templatetag openvariable %}description{% templatetag closevariable %}</textarea>
+        </div>
+    </div>
+</form>
+</script>   
+</div><!-- /#templates -->
+
+    <script src="{% static 'metadatacomposer/lib/jquery-1.9.1.min.js' %}"></script>
+    <script src="{% static 'metadatacomposer/lib/jquery-migrate-1.1.1.js' %}"></script>
+    <script src="{% static 'metadatacomposer/lib/jquery-ui/ui/minified/jquery-ui.min.js' %}"></script>
+    <script src="{% static 'metadatacomposer/lib/bootstrap/js/bootstrap.min.js' %}"></script>
+    <script src="{% static 'metadatacomposer/lib/spin/jquery.spin-1.0.2.js' %}"></script>
+    <script src="{% static 'metadatacomposer/lib/cleditor/jquery.cleditor.min.js' %}"></script>
+    <script src="{% static 'metadatacomposer/lib/tag-it/js/tag-it.min.js' %}"></script>
+    <script src="{% static 'metadatacomposer/lib/mustache.js' %}"></script>
+    <script 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 src="{% static 'metadatacomposer/js/common.js' %}"></script>
+    <script src="{% static 'metadatacomposer/js/tangle.js' %}"></script>
+    <script src="{% static 'metadatacomposer/js/edition.js' %}"></script>
+    <script>
+    var spinParam = {
+            imageBasePath :"{% static 'metadatacomposer/lib/spin/img/' %}",
+            max:60,
+            min:0
+        };
+        /* Initialisation du metadataplayer avec un projet vide */
+        var myDir = new IriSP.Model.Directory(),
+            myProject = myDir.remoteSource({
+                url: "{% url 'projectjson_id' id=ldt_id %}",
+                serializer: IriSP.serializers.ldt
+            });
+    </script>
+{% analytics %}
+</body>
+</html>
\ No newline at end of file
--- a/src/metadatacomposer/templates/metadatacomposer_home.html	Mon Jun 03 13:33:35 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_home.html	Mon Jun 03 16:39:52 2013 +0200
@@ -25,7 +25,7 @@
 </head>
 <body>
 {% block body %}
-{% block wrapper %}
+  {% block wrapper %}
     <div class="wrap">
         <header>
             <div class="container">
@@ -100,6 +100,8 @@
         </section>
         <footer></footer>
     </div><!-- wrap -->
+  {% endblock %}
+  {% block modal_divs %}
     <div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
@@ -107,18 +109,16 @@
         </div>
         <div class="modal-body"></div>
     </div>
-{% endblock %}
-    {% block modal_divs %}
-    {% endblock %}
-    {% block js_common %}
+  {% endblock %}
+  {% block js_common %}
     <script src="{% static 'metadatacomposer/lib/jquery-1.9.1.min.js' %}"></script>
     <script src="{% static 'metadatacomposer/lib/bootstrap/js/bootstrap.min.js' %}"></script>
     <script src="{% static 'metadatacomposer/lib/spin/jquery.spin-1.0.2.js' %}"></script>
     <script src="{% static 'metadatacomposer/js/common.js' %}"></script>
-    {% endblock %}
-    {% block js_page %}
+  {% endblock %}
+  {% block js_page %}
     <script src="{% static 'metadatacomposer/js/home.js' %}"></script>
-    {% endblock %}
+  {% endblock %}
 {% endblock %}
 {% analytics %}
 </body>
--- a/src/metadatacomposer/templates/metadatacomposer_project_list.html	Mon Jun 03 13:33:35 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_project_list.html	Mon Jun 03 16:39:52 2013 +0200
@@ -48,7 +48,7 @@
                             <td class="actions">
                                 <table>
                                     <tr>
-                                        <td><a class="btn" href="#"><i class="icon-pencil"></i></a></td>
+                                        <td><a class="btn" href="{% url 'composer_edit' branding=branding ldt_id=p.ldt_id %}"><i class="icon-pencil"></i></a></td>
                                         <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>
--- a/src/metadatacomposer/urls.py	Mon Jun 03 13:33:35 2013 +0200
+++ b/src/metadatacomposer/urls.py	Mon Jun 03 16:39:52 2013 +0200
@@ -6,7 +6,7 @@
     MetadataComposerRemoveImage, MetadataComposerRemoveContent,\
     MetadataComposerRemoveProject, MetadataComposerImage,\
     MetadataComposerModalContentLibrary, MetadataComposerPlayer,\
-    MetadataComposerPreviewPlayer
+    MetadataComposerPreviewPlayer, MetadataComposerEdit
 
 urlpatterns = patterns('',
     url(r'^jsi18n/(?P<packages>\S+?)/$', 'django.views.i18n.javascript_catalog', name='jsi18n'),
@@ -25,6 +25,7 @@
     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>.*)/edit/(?P<ldt_id>[\w-]+)/$', MetadataComposerEdit.as_view(), name="composer_edit"),
     url(r'^(?P<branding>.*)/$', MetadataComposerHome.as_view(), name="composer_home"),
     url(r'^$', MetadataComposerHome.as_view(), name="composer_home"),
 )
--- a/src/metadatacomposer/views.py	Mon Jun 03 13:33:35 2013 +0200
+++ b/src/metadatacomposer/views.py	Mon Jun 03 16:39:52 2013 +0200
@@ -446,10 +446,7 @@
 class MetadataComposerPlayer(TemplateResponseMixin, MetadataComposerContextView):
     
     def get_template_names(self):
-        if self.template_name and self.template_name!="":
-            return self.template_name
-        else:
-            return "metadatacomposer_player.html"
+        return "metadatacomposer_player.html"
     
     @method_decorator(never_cache)
     def dispatch(self, *args, **kwargs):
@@ -470,10 +467,7 @@
 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"
+        return "metadatacomposer_preview_player.html"
     
     @method_decorator(login_required)
     @method_decorator(never_cache)
@@ -492,3 +486,31 @@
 
 
 
+class MetadataComposerEdit(TemplateResponseMixin, MetadataComposerContextView):
+    
+    def get_template_names(self):
+        return "metadatacomposer_edit.html"
+    
+    @method_decorator(login_required)
+    @method_decorator(never_cache)
+    def dispatch(self, *args, **kwargs):
+        return super(MetadataComposerEdit, self).dispatch(*args, **kwargs)
+    
+    def get(self, request, branding="iri", ldt_id=None, **kwargs):
+        self.branding = branding
+        
+        project = None
+        if not ldt_id:
+            return HttpResponseBadRequest("ldt_id parameter must be set.")
+        else:
+            project = get_object_or_404(Project.safe_objects, ldt_id=ldt_id)
+        if project:
+            if not check_object_perm_for_user(project, "change_project", request.user):
+                return HttpResponseBadRequest("Current user has no right to edit this project.")
+        
+        context = self.get_context_dict(request)
+        context.update({"ldt_id": ldt_id, "project":project})
+        return self.render_to_response(context)
+
+
+