MarietjeDjango/marietje/static/js/queue.js

var currentDuration = 0;
var timeOffset = 0;
var timeStarted = 0;
var currentSong = null;
var queue = null;
var songs = [];

var refreshing = false;
var iteration = 0;
var requestViewOpen = false;

$(function () {
    refreshQueue();
    setInterval(updateTime, 1000);

    $('#skip').click(function () {
        $.post('/api/skip', {csrfmiddlewaretoken: csrf_token}, function () {
            refreshQueue();
        });
        return false;
    });

    $('#request-button').click(function () {
        requestViewOpen ? hideRequestTable() : showRequestTable();
    });

    $(document).on('click', '[data-song-id]', function () {
        var songId = $(this).data('song-id');
        $.post('/api/request', {id: songId, csrfmiddlewaretoken: csrf_token}, function () {
            refreshQueue();
        });
        hideRequestTable();
        return false;
    });

    $('#cancel-request').click(function () {
        hideRequestTable();
    });
    
    $('.pagenum').change(function(){
        console.log('Page: ' + $(this).val());
    });
    
    $('#search-artist, #search-title, #search-uploader, .pagenum').change(function(){
        getSongs();
    });
    
    $('.pagesize').change(function(){
        $('.pagenum').val(1);
        getSongs();
    });
    
    $('button.prev').click(function(){
        var pageNumSelect = $('.pagenum');
        pageNumSelect.val(Math.max(parseInt(pageNumSelect.val()) - 1, 1));
        getSongs();
    });
    
    $('button.next').click(function(){
        var pageNumSelect = $('.pagenum');
        pageNumSelect.val(Math.min(parseInt(pageNumSelect.val()) + 1, pageNumSelect.children('option:last-child').val()));
        getSongs();
    });
    
    $('button.first').click(function(){
        $('.pagenum').val(1);
        getSongs();
    });
    
    $('button.last').click(function(){
        var pageNumSelect = $('.pagenum');
        pageNumSelect.val(pageNumSelect.children('option:last-child').val());
        getSongs();
    });

    getSongs();
});

function cancelSong(id)
{
    $.post('/api/cancel', {id: id, csrfmiddlewaretoken: csrf_token}, function () {
        refreshQueue();
    });
    return false;
}

function moveUp(id)
{
    $.post('/api/moveup', {id: id, csrfmiddlewaretoken: csrf_token}, function () {
        refreshQueue();
    });
    return false;
}

function moveDown(id)
{
    $.post('/api/movedown', {id: id, csrfmiddlewaretoken: csrf_token}, function () {
        refreshQueue();
    });
    return false;
}

function updateTime()
{
    var timestamp = Date.now() / 1000 | 0;
    var secondsLeft = currentSong.song.duration - (timestamp - timeStarted) + timeOffset;
    iteration = (iteration + 1) % 10;
    if (secondsLeft >= 0)
    {
        $('.currentsong .timeleft').text(secondsLeft.secondsToHHMMSS());
    }

    // Refresh every ten seconds, or if the song has ended in the last ten
    // seconds. Only if it is not refreshing already.
    if ((iteration === 0 || secondsLeft <= 0 && secondsLeft > -10) && !refreshing)
    {
        refreshQueue();
    }
}

function refreshQueue()
{
    refreshing = true;
    $.get('/api/queue', function (result) {
        var now = Date.now() / 1000 | 0;
        if (timeOffset === 0)
        {
            // Calculate time offset with the server.
            timeOffset = now - result.current_time;
        }

        timeStarted = result.started_at;
        currentSong = result.current_song;
        queue = result.queue;
        var playNextAt = timeStarted + timeOffset + parseInt(currentSong.song.duration);

        var requestedBy = currentSong.requested_by;
        $('.currentsong .artist').text(currentSong.song.artist);
        $('.currentsong .title').text(currentSong.song.title);
        $('.currentsong .requestedby').text(requestedBy);
        if (currentSong.can_skip || canSkip)
        {
            $('#skip').addClass('glyphicon glyphicon-fast-forward');
        }
        else
        {
            $('#skip').removeClass('glyphicon glyphicon-fast-forward');
        }

        $('.queuebody').empty();
        $.each(queue, function (id, song) {
            var requestedBy = song.requested_by;
            var canDelete = song.can_move_down || canMoveSongs;
            var canMoveDown = canDelete && id < queue.length - 1;
            var artist = song.song.artist.trim() === '' ? '?' : song.song.artist;
            var title = song.song.title.trim() === '' ? '?' : song.song.title;

            $('.queuebody:last-child').append('<tr><td>' + artist
                    + '</td><td>' + title + '</td><td>' + requestedBy
                    + '</td><td>' + (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())
                    + '</td><td>' + '<a href="#" class="glyphicon glyphicon-arrow-up'
                    + (canMoveSongs && id !== 0 ? '' : ' invisible')
                    + '" onclick="return moveUp(' + song.id
                    + ')"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="glyphicon glyphicon-arrow-down'
                    + (canMoveDown ? '' : ' invisible') + '" onclick="return moveDown('
                    + song.id + ')"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="glyphicon glyphicon-trash'
                    + (canDelete ? '' : ' invisible') + '" onclick="return cancelSong('
                    + song.id + ')"></a></td></tr>');
            if(playNextAt >= now)
            {
                playNextAt += parseInt(song.song.duration);
            }
        });

        updateTime();
        refreshing = false;
    });
}

function getSongs()
{
    var artist = $('#search-artist').val();
    var title = $('#search-title').val();
    var uploader = $('#search-uploader').val();
    var page = $('.pagenum').val();
    var pagesize = $('.pagesize').val();
    $.post('/api/songs', {artist: artist, title: title, uploader: uploader, page: page, pagesize: pagesize, csrfmiddlewaretoken: csrf_token}, function (result) {
        $('#request-table tbody').empty();
        songs = result.data;
        $.each(songs, function (id, song) {
            var artist = song.artist.trim() === '' ? '?' : song.artist;
            var title = song.title.trim() === '' ? '?' : song.title;
            $('#request-table tbody:last-child').append('<tr><td>' + artist + '</td><td><a href="#" data-song-id="' + song.id + '">' + title + '</a></td><td>' + (song.uploader_name ? song.uploader_name : 'Marietje') + '</td></tr>');
        });
        var pageNumSelect = $('.pagenum');
        pageNumSelect.empty();
        for(var i = 1; i < result.last_page + 1; i++)
        {
            pageNumSelect.append($("<option></option>")
                    .attr("value", i)
                    .text(i));
        }
        pageNumSelect.val(result.current_page);
        $('.pagesize').val(result.per_page);
    });
}

function showRequestTable()
{
    $('#request-button').text('Close');
    $('#queue-container').hide();
    $('#request-container').removeClass('hidden');
    $('#request-container').show();
    requestViewOpen = true;
}

function hideRequestTable()
{
    $('#request-button').text('Request');
    $('#request-container').hide();
    $('#queue-container').show();
    requestViewOpen = false;
}


// For IE8 and earlier.
if (!Date.now) {
    Date.now = function () {
        return new Date().getTime();
    }
}

// Edited from http://stackoverflow.com/a/6313008.
Number.prototype.secondsToHHMMSS = function () {
    var sec_num = this; // don't forget the second param
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours < 10) {
        hours = '0' + hours;
    }
    if (minutes < 10) {
        minutes = '0' + minutes;
    }
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
    return hours + ':' + minutes + ':' + seconds;
}

Number.prototype.timestampToHHMMSS = function () {
    var date = new Date(this * 1000);
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();

    if (hours < 10) {
        hours = '0' + hours;
    }
    if (minutes < 10) {
        minutes = '0' + minutes;
    }
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
    return hours + ':' + minutes + ':' + seconds;
}