{% extends "iri_mashup_home.html" %}

{% load static %}

{% load i18n %}

{% load analytics %}

{% load thumbnail %}

    {% block title %}Création de Hashcut{% endblock %}

    {% block css_page %}

    <link rel="stylesheet" href="{% static 'hashcut/lib/jquery.tagit.css' %}" />

    <link rel="stylesheet" href="{% static 'hashcut/iri/css/edition.css' %}" />

    {% endblock %}

{% block wrap_header %}

<div class="wrap-header"> 

    <div class="header">

    {% include 'partial/iri_mashup_popin_user.html' %}

    <!-- popin update-title -->

        <div class="popin update-title" id="update-title">

            <div class="pointer"></div>

            <div class="popin-content">

                <form class="clearfix" action="#" id="hashcut-form" method="">

                    <p>

                        <label for="hashcut-title">Titre :</label>

                        <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />

                    </p>

                    <p>

                        <label for="hashcut-description">Description :</label>

                        <textarea name="" id="hashcut-description"></textarea>

                    </p>

                </form>

            </div>

        </div>

    <!-- /popin update-title -->

    {% include 'partial/iri_hashcut_logo.html' %}

        <div class="title-video-wrap">

            <p class="title-video">

                <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>

            </p>

            <p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p>

        </div>

        <div class="profil-wrap">

	        <ul class="space-top">

	            <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>

	        </ul>

	    </div>

    </div><!-- header -->

</div> <!-- wrap-header -->

{% endblock %}

{% block content %}

<div class="content clearfix">

    <div class="col-left">

        <div class="left-head">

            <h2>Sélectionner les vidéos</h2>

            <input type="text" name="" placeholder="Rechercher une vidéo" />

        </div>

        <ul class="list-video">

        </ul>

    </div><!-- col-left -->

    <div class="col-middle empty-mode">

        <div class="col-middle-header">

            <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></span></a>

            <a href="#" class="tab tab-pvw">Prévisualiser</a>

        </div>

        <div class="video">

            <div class="tutorial">

                <h2>Créer un Hashcut, c’est facile !</h2>

                <ol>

                    <li>Commencez par choisir une vidéo dans le volet de gauche</li>

                    <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>

                    <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>

                    <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>

                </ol>

            </div>

            <div class="video-wait"></div>

            <a class="publier-button disable" title="Publier" href="#"></a>

        </div>

        <div class="widget">

            <div class="Ldt-Slider-Container">

                <div class="Ldt-Slider"></div>

            </div>

            <div class="Ldt-Slider-Time">00:00</div>

            <div class="Ldt-Ctrl">

                <div class="Ldt-Ctrl-Left">

                    <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div>

                    <div class="Ldt-Ctrl-spacer"></div>

                    <div class="Ldt-Ctrl-InOutBlock">

                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div>

                        <div class="Ldt-Ctrl-spacer"></div>

                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></div>

                        <div class="Ldt-Ctrl-spacer"></div>

                    </div>

                </div>

                <div class="Ldt-Ctrl-Right">

                   <div class="Ldt-Ctrl-spacer"></div>

                   <div class="Ldt-Ctrl-Time">

                       <div class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div>

                       <div class="Ldt-Ctrl-Time-Separator">/</div>

                       <div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div>

                   </div>

                   <div class="Ldt-Ctrl-spacer"></div>

                   <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div>

                </div>

                <div class="Ldt-Ctrl-Volume-Control" title="Changer le volume">

                   <div class="Ldt-Ctrl-Volume-Bar"></div>

                </div>

            </div>

        </div>

        <div class="bloc-segmentation">

            <div class="Ldt-Slice"></div>

            <div class="segmentation">

                <div class="pointer-padder">

                    <div class="pointer"></div>

                </div>

                <div class="popin-content">

                    <div class="validate">

                        <div class="validate-tooltip"></div>

                    </div>

                    <h2>

                        <span class="create-or-edit">Créer un nouveau segment</span>

                        de

                        <span class="time-tangle tangle-start"></span>

                        à

                        <span class="time-tangle tangle-end"></span>

                        (durée:

                        <span class="time-tangle tangle-duration"></span>)

                    </h2>

                    <form action="#" id="segment-form">

                        <div class="form-segment-left">

                            <p>

                                <label for="segment-title">Titre :</label>

                                <input type="text" id="segment-title" />

                            </p>

                            <p>

                                <label for="segment-tags">Tags :</label>

                                <ul id="segment-tags"></ul>

                            </p>

                        </div>

                        <div class="form-segment-right">

                            <p>

                                <label for="segment-description">Description :</label>

                                <textarea id="segment-description"></textarea>

                            </p>

                        </div>

                        <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />

                    </form>

                </div>

            </div><!-- popin segmentation -->

            <div class="media-segments self-media-segments">

                <h2>Mes segments sur ce média :</h2>

                <div class="media-segments-list">

                </div>

            </div>

            <div class="media-segments other-media-segments">

                <h2>Segments existants sur ce média :</h2>

                <div class="media-segments-list">

                </div>

            </div>

        </div><!-- bloc-segmentation -->

        <div class="bloc-pvw">

            <div class="frise mashup-frise">

                <div class="frise-overflow">

                    <div class="frise-segments">

                    </div>

                    <div class="frise-indications">

                    </div>

                </div>

                <div class="frise-position"></div>

                <div class="mashup-tooltip segment-tooltip-wrapper">

                    <div class="segment-tooltip"></div>

                    <div class="segment-tooltip-tip"></div>

                </div>

            </div>

                <div class="segment-info mashup-description">

                    <div class="pointer-padder">

                        <div class="pointer"></div>

                    </div>

                    <div class="popin-content">

                        <ul class="tools">

                            <li><a title="Éditer" class="edit" href="#"></a></li>

                        </ul>

                        <h2><span class="annotation-title"></span></h2>

                        <table>

                            <tbody>

                                <tr>

                                    <th>Extrait de :</th>

                                    <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td>

                                </tr>

                                <tr>

                                    <th>Description :</th>

                                    <td><span class="annotation-description"></span></td>

                                </tr>

                                <tr>

                                    <th>Tags :</th>

                                    <td><span class="annotation-tags"></span></td>

                                </tr>

                            </tbody>

                        </table>

                    </div>

                </div>

        </div><!-- bloc-pvw -->

    </div><!-- col-middle -->

    <div class="col-right">

        <div class="liste-segment">

            <div class="validate critical">

                <div class="validate-tooltip"></div>

            </div>

            <h2>Liste des segments</h2>

            <div class="frise mashup-frise">

                <p class="aucun-segment">Aucun segment</p>

                <div class="frise-overflow">

                    <div class="frise-segments">

                    </div>

                    <div class="frise-indications">

                    </div>

                </div>

                <div class="mashup-tooltip segment-tooltip-wrapper">

                    <div class="segment-tooltip"></div>

                    <div class="segment-tooltip-tip"></div>

                </div>

            </div>

        </div>

        <ul class="list-video organize-segments">

        </ul>

    </div><!-- col-right -->

</div><!-- content -->

{% endblock %}

<!-- JavaScript -->

{% block js_import %}

{{ block.super }}

<script type="text/javascript" src="{% static 'hashcut/lib/tag-it.js' %}"></script>

<script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>

<script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>

<script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>

<script type="text/javascript">

    IriSP.endpoints = {

        content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",

        //project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",

        project: "{% url mashup_save branding=branding %}",

        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",

        ldt: "{% url projectjson_id id='' %}",

        hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"

    };

    $(function() {

   	    IriSP.video_url_transform = function(oldurl) {

   		    var newurl = oldurl.replace(/mp4:/i,'');

   		    newurl = newurl.replace(/ddc_player\//i,'');

   		    newurl = newurl.replace(/rtmp/i,'http');

   		    return newurl;

   		};

        var hashcut = IriSP.editor({

            creator: "{{creator}}",

            csrf_token: "{{csrf_token}}",

            filter: {

                tags__icontains: "BPI"

            }

       });

    });

</script>

{% endblock %}