negromate/web/templates/playlist.html

{% extends "base.html" %}
{% block page %}
    <div id="controls">
        <button id="previous-button" type="button">&lArr;</button>
        <button id="play-button" type="button">&rtri;</button>
        <button id="next-button" type="button">&rArr;</button>
        <button id="full-button" type="button">&timesb;</button>
    </div>
    <div id="song-playlist">
        <video id="video-playlist" class="video-js"
            controls preload="auto" width="600" height="400"
            >
            <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>
        <div class="vjs-playlist"></div>
    </div>

    <script>
        var player = videojs('video-playlist', {
            userActions: {
                hotkeys: true,
            }
        });

        player.playlist([
        {% for song in songs %}
        {% if song.video %}
        {
            sources: [{
                src: '{{ song.video|url }}',
                type: '{{ song.video_type }}'
            }],
            poster: '{{ song.cover|url }}',
            thumbnail: '{{ song.thumbnail|url }}',
            name: '{{ song.name }}',
            {% if song.vtt %}
            textTracks:[ { "kind":"captions", "label":"Negro mate", "src":"{{ song.vtt|url}}", "default":true } ]
            {% endif %}
        },
        {% endif %}
        {% endfor %}
        ]);

        // Play through the playlist automatically.
        player.playlist.autoadvance(0);
        player.playlistUi();

        var previousButton = document.getElementById('previous-button'),
            playButton = document.getElementById('play-button'),
            nextButton = document.getElementById('next-button'),
            fullButton = document.getElementById('full-button');

        previousButton.addEventListener('click', function() { player.playlist.previous(); });
        playButton.addEventListener('click', function() {
            if (player.paused()) {
                player.play();
                playButton.innerHTML = '&#9643;';
            } else {
                player.pause(); 
                playButton.innerHTML = '&rtri;';
            }
        });
        nextButton.addEventListener('click', function() { player.playlist.next(); });
        fullButton.addEventListener('click', function() { player.requestFullscreen(); });

        var body = document.getElementsByTagName('body')[0];
        body.addEventListener('keypress', function(event) {
            switch(event.key) {
                case "a":
                    player.playlist.previous();
                    break;
                case "s":
                    if (player.paused()) {
                        player.play();
                        playButton.innerHTML = '&#9643;';
                    } else {
                        player.pause(); 
                        playButton.innerHTML = '&rtri;';
                    }
                    break;
                case "d":
                    player.playlist.next();
                    break;
                case "f":
                    if (player.isFullscreen()) {
                        player.exitFullscreen();
                    } else {
                        player.requestFullscreen();
                    }
            }
            console.log(event.key);
        });

    </script>
{% endblock %}