{% extends "base.html" %}
{% load thumbnail %}
{% load i18n %}
{% block js_import %} 
        <script type="text/javascript" src="{{STATIC_URL}}tralalere/metadataplayer/LdtPlayer-core.js"></script>
{% endblock %}
{% block main_content %}
            <div class="player-header">
                <div class="player-topleft">
                    <h1>Musitag</h1>
                    <div class="back-home">
                        <a href="{% url home %}">Liste des chansons</a>
                    </div>
                </div>
                <div class="player-album">
                    {% thumbnail content.image "213x190" format="PNG" crop="center" as im %}
                    <img src="{{im.url}}" />
                    {% endthumbnail %}
                    <h2>{{content.title}}</h2>
                    <h3>{{content.description}}</h3>
                    <div id="player-elements"></div>
                </div>
            </div>
            
            <div class="player-timeline">
                <div id="controller-widget"></div>
                <div id="slider-widget"></div>
            </div>
            <div class="player-belowtl">
                <div id="player-annotations"></div>
                <div id="player-andyou"></div>
                <div id="player-annotator"></div>
            </div>
{% endblock %}

{% block end_body %}
    <script type="text/javascript">
    IriSP.language = "{{ LANGUAGE_CODE }}";
    IriSP.libFiles.defaultDir = "{{STATIC_URL}}tralalere/js";
    IriSP.libFiles.locations.jwplayer = "{{STATIC_URL}}tralalere/js/jwplayer.js";
    IriSP.widgetsDir = "{{STATIC_URL}}tralalere/metadataplayer";
    var _metadata = {
        url: '{% url ldt.ldt_utils.views.json.project_json_id content.front_project.ldt_id %}',
        format: 'ldt'
    };
    var _config = {
        gui: {
            width : 1,
            height : 1,
            container : 'player-elements',
            default_options: {
                metadata: _metadata,
                colors: [{% for color in colors %}
                    { tag: "{{color}}", name: "{% trans color %}"}{% if not forloop.last %}, {% endif %}{% endfor %}
                ],
                emoticons: [{% for emoticon in emoticons %}
                    { tag: "{{emoticon}}", name: "{% trans emoticon %}"}{% if not forloop.last %}, {% endif %}{% endfor %}
                ]
            },
            css : '{{STATIC_URL}}tralalere/metadataplayer/LdtPlayer-core.css',
            widgets: [
                {
                    type: "Controller",
                    container: "controller-widget"
                },
                {
                    type: "Slider",
                    container: "slider-widget",
                    minimize_timeout: false
                },
                {
                    type: "MusitagAnnotations",
                    container: "player-annotations"
                },
                {
                    type: "MusitagAndYou",
                    container: "player-andyou"
                },
                {
                    type: "MusitagAnnotator",
                    container: "player-annotator",
                    record_swf: "{{STATIC_URL}}tralalere/swf/record_mic.swf",
                    api_endpoint_template: "{% url annotation_api_empty %}{% templatetag openvariable %}id{% templatetag closevariable %}.json"
                }
            ]
        },
        player:{
            type: 'jwplayer',
            flashplayer: false,
            height: 1, 
            width: 1,
            metadata: _metadata,
            //provider: "html5",
            live: true,
            autostart: true
        }
    };
    var _myPlayer = new IriSP.Metadataplayer(_config);
    </script>
{% endblock %}