{% extends "base.html" %}
{% block content %}
    <h1>{{ song.name }}</h1>
    {% if song.original %}
    <p><b>Original:</b> {{ song.original }}</p>
    {% endif %}
    {% if song.author %}
    <p><b>Autoría:</b> {{ song.author }}</p>
    {% endif %}
    {% if song.video %}
    <video id="song-{{ song.path.name }}-video" class="video-js"
        controls preload="auto" width="640" height="264"
        {% if song.cover %}poster="{{ song.cover|url }}"{% endif %}>
        <source src="{{ song.video|url }}" type='{{ song.video_type }}'>
        {% if not song.ass and song.vtt %}
        <track kind="captions" src="{{ song.vtt|url }}" srclang="nm" label="Negro mate" default>
        {% endif %}
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>
    {% endif %}

    <script>
    let player = videojs('song-{{ song.path.name }}-video');
    {% if song.karaoke_ass or song.ass %}
    player.ready(function () {
        var video = this.tech_.el_;
        window.SubtitlesOctopusOnLoad = function () {
            var options = {
                video: video,
                {% if song.karaoke_ass %}
                subUrl: window.location + '{{ song.karaoke_ass|url }}',
                {% else %}
                subUrl: window.location + '{{ song.ass|url }}',
                {% endif %}
                fonts: [window.location + '{{ root_path }}/static/css/CyrBit.ttf'],
                debug: false,
                workerUrl: window.location + '{{ root_path }}/static/js/JavascriptSubtitlesOctopus-4.0.0/dist/js/subtitles-octopus-worker.js'
            };
            new SubtitlesOctopus(options);
        };
        if (SubtitlesOctopus) {
            SubtitlesOctopusOnLoad();
        }
    });
    {% endif %}
    </script>

    {% if parsed_srt %}
    <p class="lyrics">
    {% for line in parsed_srt %}
        {{ line.content }}<br/>
    {% endfor %}
    </p>
    {% endif %}

    {% if song.files %}
    <ul class="files">
        {% for entry in song.files %}
            <li><a href="{{ entry|url }}">{{ entry.name }}</a></li>
        {% endfor %}
    </ul>
    {% endif %}
{% endblock %}