{% extends "mashup_home.html" %}

{% load static %}

{% load i18n %}

{% load analytics %}

{% load thumbnail %}

    {% block title %}{% blocktrans with title=proj.title %}Playing hashcut {{title}}{% endblocktrans %}{% endblock %}

    {% block css_page %}

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

    {% endblock %}

    {% block js_import %}

    {{ block.super }}

    <script type="text/javascript" src="{% static 'hashcut/lib/underscore-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' %}",

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

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

            media_page: "{% url mashup_content branding=branding ctt_id='__CONTENT_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;

            };

            IriSP.mashupplayer({

                id: "{{ldt_id}}"

            });

        });

    </script>

    {% endblock %}

{% block wrap_header %}

<div class="wrap-header">  

    <div class="header">

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

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

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

            <p class="title-video" href="#">

                <span class="category">{% trans 'Hashcut' %}</span>

                <span class="separator">&raquo;</span>

                {{proj.title}}

            </p>

        </div>

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

        <div class="profil-wrap">

            <ul>

                <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>

                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>

                <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="left-content">

        <div class="bloc-video">

            <div class="video">

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

            </div>

            <div class="widget">

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

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

            </div>

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

            <div class="Ldt-Ctrl">

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

                    <div title="{% trans 'Play/Pause' %}" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div>

                    <div class="Ldt-Ctrl-spacer"></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="{% trans 'Elapsed time' %}">00:00</div>

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

                       <div class="Ldt-Ctrl-Time-Total" title="{% trans 'Total time' %}">00:00</div>

                   </div>

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

                   <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="{% trans 'Mute/Unmute' %}"></div>

                </div>

                <div class="Ldt-Ctrl-Volume-Control" title="{% trans 'Set volume' %}">

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

                </div>

            </div>

        </div>

            <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" style="left: 50%;"></div>

                <div class="popin-content">

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

                    <table>

                        <tbody>

                            <tr>

                                <th>{% trans 'Excerpt from:' %}</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>{% trans 'Description:' %}</th>

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

                            </tr>

                            <tr>

                                <th>{% trans 'Tags:' %}</th>

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

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

        </div><!-- bloc-video -->

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

    <div class="right-content">

        <h2>{% trans 'More information' %}</h2>

        <div class="more-info-wrap">

            <table class="more-info ">

                <tbody>

                    <tr class="info-title">

                        <th>{% trans 'Title:' %}</th>

                        <td>{{proj.title}}</td>

                    </tr>

                    <tr class="info-duration">

                        <th>{% trans 'Duration:' %}</th>

                        <td></td>

                    </tr>

                    <tr class="info-author">

                        <th>{% trans 'Author:' %}</th>

                        <td><a href="{% url mashup_profile branding=branding username=proj.created_by %}">{{proj.created_by}}</a></td>

                    </tr>

                    <tr class="info-description">

                        <th>{% trans 'Description:' %}</th>

                        <td></td>

                    </tr>

                </tbody>

            </table>

        </div>

        <h2>{% trans 'Videos used in this Hashcut' %}</h2>

        <ul class="list-video">

        </ul>

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

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

{% endblock %}