{% extends "base.html" %}
{% load thumbnail %}
{% block js_import %} 
        <script type="text/javascript" src="{{STATIC_URL}}tralalere/metadataplayer/LdtPlayer-core.js"></script>
{% endblock %}
{% block main_content %}
{% thumbnail content.image "135x120" format="PNG" crop="center" as im %}
            <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">
                    <img src="{{im.url}}" />
                    <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>
{% endthumbnail %}
{% endblock %}

{% block end_body %}
    <script type="text/javascript">
    IriSP.libFiles.defaultDir = "{{STATIC_URL}}tralalere/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
            },
            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"
                }
            ]
        },
        player:{
            type: 'jwplayer',
            height: 1, 
            width: 1,
            metadata: _metadata
        }
    };
    var _myPlayer = new IriSP.Metadataplayer(_config);
    </script>
{% endblock %}