MarietjeDjango/marietje/marietje/static/js/queue.js

var currentDuration = 0;
var timeOffset = 0;
var timeStarted = 0;
var currentSong = null;
var queue = null;
var infobar = null;
var songs = [];
var refreshing = false;
var iteration = 0;
var requestViewOpen = false;
var showTimeToPlay = true;
var noRemove = false;
var user_name;
var playNextAt = 0;

$(function () {
    $('.pagesize').val(Cookies.get('pagesize'));
    showTimeToPlay = ((Cookies.get('showtimetoplay') || '1') === '1' ? true : false);
    $('#queue-time-header').text(showTimeToPlay ? 'Plays In' : 'Plays At');
    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 (result) {
            if(result.success) {
                refreshQueue();
            } else {
                // Close request table and show message.
                hideRequestTable();
                createAlert('danger', result.message);
            }
        });
        $(this).parent().text($(this).text());
        return false;
    });

    $(document).on('click', '[data-report-song-id]', function () {
        var songId = $(this).data('report-song-id');
        var message = prompt("What is wrong with the song?");
        if (message === "") {
            createAlert('danger', 'Please enter a message.');
            return false;
        }
        if (message === null) {
            return false;
        }
        $.post('/api/report', {id: songId, msg: message, csrfmiddlewaretoken: csrf_token}, function (result) {
            if (result.success) {
                createAlert('success', 'Thanks for your song report!');
            }
        });
        return false;
    });

    $('#cancel-request').click(function () {
        hideRequestTable();
    });

    $('.pagenum').change(function(){
        getSongs();
    });

    $('#search-all, #search-uploader').change(function(){
        $('.pagenum').val(1);
        getSongs();
    });

    $('.pagesize').change(function(){
        Cookies.set('pagesize', $(this).val(), { expires: 365 });
        $('.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();
    });

    $('#volume_down').click(function(e){
        e.preventDefault();
        $.post('/api/volumedown', {csrfmiddlewaretoken: csrf_token});
    });

    $('#volume_up').click(function(e){
        e.preventDefault();
        $.post('/api/volumeup', {csrfmiddlewaretoken: csrf_token});
    });

    $('#mute').click(function(e){
        e.preventDefault();
        $.post('/api/mute', {csrfmiddlewaretoken: csrf_token});
    });

    $(document).on('touchstart', '.artist, .title', function(){
        noRemove = true;
        setTimeout(function(){ noRemove = false; }, 500);
        $('.song-info').remove();
        var row = $(this).parent();
        var timeLeft = row.find('.time-left');
        var playsAt = row.find('.plays-at');
        var text = (timeLeft[0] ? 'Time Left: ' + timeLeft.text() : 'Plays At: ' + playsAt.text());
        $('body').append('<span class="song-info">Requested By: ' + row.find('.requested-by').text() + '<br>' + text
            + '</span>');
        var offset = row.offset();
        $('.song-info').css('top', offset.top + row.height())
            .css('left', offset.left).css('backgroundColor', '#EEEEEE').width(row.width() - 16);
    });

    $(document).on('click', function(){
        if(!noRemove) {
            $('.song-info').remove();
        }
    });

    $('#timeswitch').click(function(){
        showTimeToPlay = !showTimeToPlay;
        $('.timeswitcher').toggleClass('active');
        $('#timeswitch').text(showTimeToPlay ? 'Plays In' : 'Plays At');
        Cookies.set('showtimetoplay', (showTimeToPlay ? '1' : '0'), { expires: 365 });
        refreshQueue();
    });
    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;
    function showExactOrRelative(time) {
        return (!showTimeToPlay) ? "at: " + (secondsLeft + timestamp + time).timestampToHHMMSS() : "in: " + (secondsLeft + time).secondsToMMSS();

    }
    if (infobar['end_personal_queue'] !== 0){
        $('.start-queue').text("First song starts " + showExactOrRelative(infobar['start_personal_queue']));
        if (infobar['length_personal_queue'] > infobar['max_length'] * 60) {
            $('.duration-queue').addClass('text-danger');
        } else {
            $('.duration-queue').removeClass('text-danger');
        }
        $('.duration-queue').text( " (" + (infobar['length_personal_queue']).secondsToMMSS() + ")");
        $('.end-queue').text("Last song ends " + showExactOrRelative(infobar['end_personal_queue']));
    }
    if (secondsLeft >= 0) {
        $('.currentsong .time-left').text(secondsLeft.secondsToMMSS());
        refreshSeconds(secondsLeft + timestamp, timestamp);
    }
    // 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 renderQueue(playNextAt, now) {
    $('.queuebody').empty();
    var timeToPlay = playNextAt - now;
    var canDeletePrevious = false;
    $.each(queue, function (id, song) {
        var userRequested = user_name;
        var requestedBy = song.requested_by;
        var reqMarietje = requestedBy !== 'Marietje';
        var startMarietje = false;
        var requestNext = false;
        var requestPrev = false;
        //checks if id is the last item and returns false if the next song is Marietje, while the current song is not.
        if(id !== queue.length - 1) {
           requestNext = !((queue[id + 1].requested_by === 'Marietje') && (requestedBy !== 'Marietje'));
        }
        //checks if id is the first item and returns false if the previous song is not Marietje, while the current song is.
        if(id !== 0){
            var prevItem = queue[id - 1].id;
            if(queue[id-1].requested_by !== 'Marietje') {
               requestPrev = false;
                if (requestedBy === 'Marietje') {
                   startMarietje = true;
                } else {
                   requestPrev = true;
                }
            } else {
                requestPrev = true;
            }
        }
        var canDelete = song.can_move_down || canMoveSongs;
        var canMoveUp = canMoveSongs &&  requestPrev || (canDeletePrevious && reqMarietje && requestPrev);
        var canMoveDown = canMoveSongs &&  requestNext || (canDelete && reqMarietje && requestNext);
        var artist = (song.song.artist.trim() === '' ? '?' : song.song.artist);
        var title = (song.song.title.trim() === '' ? '?' : song.song.title);
        var songclass = ' class="normal_song' + (reqMarietje ? '' : ' marietjequeue')
                         + (!requestNext ? ' marietjequeue-pre-start' : '')
                         + (startMarietje ? ' marietjequeue-post-start':'')
                         + (userRequested === requestedBy ? ' requested_song':'');

        var showTime = (showTimeToPlay ? (timeToPlay < 0 ? '' : timeToPlay.secondsToMMSS()) : (playNextAt < now ? '' : playNextAt.timestampToHHMMSS()));

        $('.queuebody:last-child').append('<tr' + songclass + '">' + '<td class="artist">' + artist
                + '</td><td class="title">' + title + '</td><td class="hidden-xs requested-by">' + requestedBy
                + '</td><td class="hidden-xs plays-at" style="text-align: right;">' + showTime
                + '</td><td>' + '<a href="#" class="glyphicon glyphicon-arrow-up'
                + ((canMoveUp && id !== 0) ? '' : ' invisible')
                + '" onclick=" return moveDown(' + prevItem
                + ')"></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>');
        timeToPlay += parseInt(song.song.duration);
        canDeletePrevious = canDelete;
        if(playNextAt >= now)
        {
            playNextAt += parseInt(song.song.duration);
        }
    }
);}
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;
        infobar = result.infobar;
        user_name = result.user_name;
        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 .requested-by').text(requestedBy);
        if (currentSong.can_skip || canSkip) {
            $('#skip').removeClass('hidden');
        }
        else {
            $('#skip').addClass('hidden');
        }

        renderQueue(playNextAt, now);

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

function refreshSeconds(playNextAt, now) {
    if(!showTimeToPlay) {
        return;
    }
    var timeToPlay = playNextAt - now;
    var times = $('.plays-at');
    $.each(queue, function (id, song) {
        $(times[id]).text(timeToPlay < 0 ? '' : timeToPlay.secondsToMMSS());
        timeToPlay += parseInt(song.song.duration);
    });
}

function getSongs() {
    var all = $('#search-all').val();
    var uploader = $('#search-uploader').val();
    var page = $('.pagenum').val();
    var pagesize = $('.pagesize').val();
    $.post('/api/songs', {all: all, 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><td style="text-align: right;">' + song.duration.secondsToMMSS() +
                '</td><td><a href="#" data-report-song-id="'+ song.id + '">⚑</a></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);
        $('button.first').prop('disabled', result.current_page === 1);
        $('button.prev').prop('disabled', result.current_page === 1);
        $('button.next').prop('disabled', result.current_page === result.last_page);
        $('button.last').prop('disabled', result.current_page === result.last_page);
        refreshingSongs = false;
        if(requestViewOpen) {
            window.scrollTo(0, 0);
        }
    });
}
function showRequestTable() {
    $('#request-button').text('Close');
    $('#queue-container').hide();
    $('#request-container').removeClass('hidden');
    $('#request-container').show();
    $('#search-all').focus().select();
    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 https://stackoverflow.com/a/6313008.
Number.prototype.secondsToMMSS = function () {
    var hours = Math.floor(this / 3600);
    var minutes = Math.floor((this - (hours * 3600)) / 60);
    var seconds = this - (hours * 3600) - (minutes * 60);

    var sep1 = '';
    if (hours > 0) {
        hours = hours;
        sep1 = ':';
    } else {
        hours = '';
    }
    if (hours > 0 && minutes < 10) {minutes = '0' + minutes;}
    if (seconds < 10) {seconds = '0' + seconds;}
    return hours + sep1 + 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;
};

function createAlert(type, message) {
    alertText = '<div class="alert alert-' + type + ' alert-dismissable">'+
            '<button type="button" class="close" ' +
                    'data-dismiss="alert" aria-hidden="true">' +
                '&times;' +
            '</button>' +
            message +
         '</div>';
     $('body > div.container > div.alert-location').prepend(alertText);
}