Updated interface

- added a bar on the top which shows some info
- moved mod buttons to the bar
- added some information about your queue to the bar
- merged the table for current song and full queue
- some more small fixes

marietje/api/views.py

@@ -168,12 +168,25 @@ def managesongs(request):
 @api_auth_required
 def queue(request):
     queue = request.user.queue
-    return JsonResponse({
+    infobar = {"start_personal_queue": 0, "length_personal_queue": 0, "length_total_queue": 0, "end_personal_queue": 0}
+    for song in queue.queue():
+        infobar["length_total_queue"] += song.song.duration
+        if song.user == request.user:
+            infobar["length_personal_queue"] += song.song.duration
+            infobar["end_personal_queue"] = infobar["length_total_queue"]
+            if infobar["start_personal_queue"] == 0:
+                infobar["start_personal_queue"] = infobar["length_total_queue"] - song.song.duration
+
+
+    json = {
         'current_song': playlist_song_to_dict(queue.current_song()),
         'queue': [playlist_song_to_dict(playlist_song, user=request.user) for playlist_song in queue.queue()],
         'started_at': 0 if queue.started_at is None else int(queue.started_at.timestamp()),
-        'current_time': int(time.time())
-    })
+        'current_time': int(time.time()),
+        'user_name': request.user.name,
+        'infobar': infobar,
+    }
+    return JsonResponse(json)
 
 
 @api_auth_required
@@ -216,10 +229,10 @@ def request(request):
 
     err = queue.request(song, request.user)
     if err != None:
-        return JsonResponse({ 'success': False, 'message': err })
+        return JsonResponse({'success': False, 'message': err})
 
     request_counter.labels(queue=queue.name).inc()
-    return JsonResponse({ 'success': True })
+    return JsonResponse({'success': True})
 
 
 @require_http_methods(["POST"])
@@ -230,7 +243,8 @@ def report(request):
     msg = request.POST.get('msg')
 
     err = song.report(request.user, msg)
-    return JsonResponse({ 'success': True })
+
+    return JsonResponse({'success': True})
 
 
 @require_http_methods(["POST"])

marietje/marietje/static/css/custom.css

@@ -11,7 +11,7 @@
     padding: 8px;
     background: silver;
     white-space: nowrap;
-    z-index: 9999;
+    z-index: 1;
 }
 
 #queue-time-header {
@@ -26,6 +26,26 @@ footer {
     color: #777777;
 }
 
-.marietjequeue-start {
-    border-top: 4px double #777777;
-}
+.marietjequeue-pre-start td {
+    border-bottom: 3px double #777777;
+}
+
+.block-button {
+    border-color: #cccccc;
+    color: #337ab7;
+    transition: 1s transform ease-in-out;
+}
+
+.currentsong{
+        border-bottom: 1px solid #DDDDDD;
+}
+
+.requested_song .plays-at, .requested_song .requested-by {
+        font-weight: bold;
+}
+
+.table-header-style td, .table-header-style{
+    border-top: 3px solid #FFFFFF;
+    background-color: #f9f9f9;
+    border-bottom: 2px solid #777777;
+}

marietje/marietje/static/js/queue.js

@@ -3,18 +3,19 @@ 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;
+    showTimeToPlay = ((Cookies.get('showtimetoplay') || '1') === '1' ? true : false);
     $('#queue-time-header').text(showTimeToPlay ? 'Plays In' : 'Plays At');
     refreshQueue();
     setInterval(updateTime, 1000);
@@ -48,12 +49,12 @@ $(function () {
     $(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 == "") {
+        if (message === "") {
             createAlert('danger', 'Please enter a message.');
-            return false
+            return false;
         }
-        if (message == null) {
-        return false
+        if (message === null) {
+            return false;
         }
         $.post('/api/report', {id: songId, msg: message, csrfmiddlewaretoken: csrf_token}, function (result) {
             if (result.success) {
@@ -105,12 +106,12 @@ $(function () {
         getSongs();
     });
 
-    $('#volume-down').click(function(e){
+    $('#volume_down').click(function(e){
         e.preventDefault();
         $.post('/api/volumedown', {csrfmiddlewaretoken: csrf_token});
     });
 
-    $('#volume-up').click(function(e){
+    $('#volume_up').click(function(e){
         e.preventDefault();
         $.post('/api/volumeup', {csrfmiddlewaretoken: csrf_token});
     });
@@ -127,7 +128,7 @@ $(function () {
         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();
+        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();
@@ -141,104 +142,107 @@ $(function () {
         }
     });
 
-    $('#queue-time-header').click(function(){
+    $('#timeswitch').click(function(){
         showTimeToPlay = !showTimeToPlay;
-        $('#queue-time-header').text(showTimeToPlay ? 'Plays In' : 'Plays At');
-        Cookies.set('showtimetoplay', showTimeToPlay ? '1' : '0', { expires: 365 });
+        $('.timeswitcher').toggleClass('active');
+        $('#timeswitch').text(showTimeToPlay ? 'Plays In' : 'Plays At');
+        Cookies.set('showtimetoplay', (showTimeToPlay ? '1' : '0'), { expires: 365 });
+        refreshQueue();
     });
     getSongs();
 });
 
-function cancelSong(id)
-{
+function cancelSong(id) {
     $.post('/api/cancel', {id: id, csrfmiddlewaretoken: csrf_token}, function () {
         refreshQueue();
     });
     return false;
 }
 
-function moveUp(id)
-{
+function moveUp(id) {
     $.post('/api/moveup', {id: id, csrfmiddlewaretoken: csrf_token}, function () {
         refreshQueue();
     });
     return false;
 }
 
-function moveDown(id)
-{
+function moveDown(id) {
     $.post('/api/movedown', {id: id, csrfmiddlewaretoken: csrf_token}, function () {
         refreshQueue();
     });
     return false;
 }
 
-function updateTime()
-{
+function updateTime() {
     var timestamp = Date.now() / 1000 | 0;
     var secondsLeft = currentSong.song.duration - (timestamp - timeStarted) + timeOffset;
     iteration = (iteration + 1) % 10;
-    if (secondsLeft >= 0)
-    {
+    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']));
+        $('.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)
-    {
+    if ((iteration === 0 || (secondsLeft <= 0 && secondsLeft > -10)) && !refreshing){
         refreshQueue();
     }
 }
 
-function renderQueue(playNextAt, now)
-{
+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 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){
-            var requestNext = false
-        } else {
-            var requestNext = !((queue[id+1].requested_by === 'Marietje') && (requestedBy !== 'Marietje'))
+        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 requestPrev = false
-        } else {
-            var prevItem = queue[id-1].id
-            if(queue[id-1].requested_by !== 'Marietje'){
-                var requestPrev = false
-                if (requestedBy == 'Marietje'){
-                    var startMarietje = true
+        if(id !== 0){
+            var prevItem = queue[id - 1].id;
+            if(queue[id-1].requested_by !== 'Marietje') {
+               requestPrev = false;
+                if (requestedBy === 'Marietje') {
+                   startMarietje = true;
                 } else {
-                    var requestPrev = true
+                   requestPrev = true;
                 }
-            } else {var 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 marietjeclass = reqMarietje ? '' : ' class="marietjequeue"';
-        var marietjestartclass = startMarietje ? ' class="marietjequeue marietjequeue-start"' : '';
+        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':'');
 
-        showTime = showTimeToPlay ? (timeToPlay < 0 ? '' : timeToPlay.secondsToMMSS()) : (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())
+        var showTime = (showTimeToPlay ? (timeToPlay < 0 ? '' : timeToPlay.secondsToMMSS()) : (playNextAt < now ? '' : playNextAt.timestampToHHMMSS()));
 
-        $('.queuebody:last-child').append('<tr' + marietjestartclass + marietjeclass + '>' + '<td class="artist">' + artist
+        $('.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')
+                + ((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('
@@ -246,21 +250,18 @@ function renderQueue(playNextAt, now)
                 + (canDelete ? '' : ' invisible') + '" onclick="return cancelSong('
                 + song.id + ')"></a></td></tr>');
         timeToPlay += parseInt(song.song.duration);
-        canDeletePrevious = canDelete
+        canDeletePrevious = canDelete;
         if(playNextAt >= now)
         {
             playNextAt += parseInt(song.song.duration);
         }
-    });
-}
-
-function refreshQueue()
-{
+    }
+);}
+function refreshQueue() {
     refreshing = true;
     $.get('/api/queue', function (result) {
         var now = Date.now() / 1000 | 0;
-        if (timeOffset === 0)
-        {
+        if (timeOffset === 0) {
             // Calculate time offset with the server.
             timeOffset = now - result.current_time;
         }
@@ -268,19 +269,19 @@ function refreshQueue()
         timeStarted = result.started_at;
         currentSong = result.current_song;
         queue = result.queue;
-        var playNextAt = timeStarted + timeOffset + parseInt(currentSong.song.duration);
+        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').addClass('glyphicon glyphicon-fast-forward');
+        if (currentSong.can_skip || canSkip) {
+            $('#skip').removeClass('hidden');
         }
-        else
-        {
-            $('#skip').removeClass('glyphicon glyphicon-fast-forward');
+        else {
+            $('#skip').addClass('hidden');
         }
 
         renderQueue(playNextAt, now);
@@ -290,21 +291,19 @@ function refreshQueue()
     });
 }
 
-function refreshSeconds(playNextAt, now)
-{
+function refreshSeconds(playNextAt, now) {
     if(!showTimeToPlay) {
         return;
     }
     var timeToPlay = playNextAt - now;
-    times = $('.plays-at');
+    var times = $('.plays-at');
     $.each(queue, function (id, song) {
         $(times[id]).text(timeToPlay < 0 ? '' : timeToPlay.secondsToMMSS());
         timeToPlay += parseInt(song.song.duration);
     });
 }
 
-function getSongs()
-{
+function getSongs() {
     var all = $('#search-all').val();
     var uploader = $('#search-uploader').val();
     var page = $('.pagenum').val();
@@ -313,38 +312,34 @@ function getSongs()
         $('#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() + 
+            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++)
-        {
+        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);
+        $('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()
-{
+function showRequestTable() {
     $('#request-button').text('Close');
     $('#queue-container').hide();
     $('#request-container').removeClass('hidden');
@@ -353,8 +348,7 @@ function showRequestTable()
     requestViewOpen = true;
 }
 
-function hideRequestTable()
-{
+function hideRequestTable() {
     $('#request-button').text('Request');
     $('#request-container').hide();
     $('#queue-container').show();
@@ -366,7 +360,7 @@ function hideRequestTable()
 if (!Date.now) {
     Date.now = function () {
         return new Date().getTime();
-    }
+    };
 }
 
 // Edited from https://stackoverflow.com/a/6313008.
@@ -375,17 +369,17 @@ Number.prototype.secondsToMMSS = function () {
     var minutes = Math.floor((this - (hours * 3600)) / 60);
     var seconds = this - (hours * 3600) - (minutes * 60);
 
-    var sep1 = ''
+    var sep1 = '';
     if (hours > 0) {
         hours = hours;
         sep1 = ':';
     } else {
         hours = '';
     }
-    if (hours > 0 && minutes < 10) minutes = '0' + minutes;
-    if (seconds < 10) seconds = '0' + seconds;
+    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);
@@ -403,7 +397,7 @@ Number.prototype.timestampToHHMMSS = function () {
         seconds = '0' + seconds;
     }
     return hours + ':' + minutes + ':' + seconds;
-}
+};
 
 function createAlert(type, message) {
     alertText = '<div class="alert alert-' + type + ' alert-dismissable">'+
@@ -413,5 +407,5 @@ function createAlert(type, message) {
             '</button>' +
             message +
          '</div>';
-     $('body > div.container').prepend(alertText);
-}
+     $('body > div.container > div.alert-location').prepend(alertText);
+}

marietje/queues/models.py

@@ -5,7 +5,6 @@ from django.utils import timezone
 
 from songs.models import Song
 
-
 class Playlist(models.Model):
     def __str__(self):
         return 'Playlist #' + str(self.id)

marietje/queues/templates/queues/queue.html

@@ -4,9 +4,47 @@
 {% block title %}Queue{% endblock %}
 
 {% block content %}
-<h1 class="h1">Request</h1>
-<button id="request-button" class="btn btn-primary">Request</button>
+
+
+<nav class="navbar navbar-default navbar-fixed-top" style="top: 50px; border-top: 1px solid #bbbbbb; max-height: 50px;  box-shadow: 2px 2px 4px #BBBBBB;">
+  <div class="container-fluid">
+    <ul class="navbar-nav" style="max-height: 50px; margin: 0;">
+        <li class="btn-toolbar nav navbar-nav" style="margin: 0;">
+            <button id="request-button" class="btn navbar-btn btn-primary">
+                Request
+            </button>
+            <div id="infobar-buttons" class="btn-group">
+                {% if perms.queues.can_control_volume %}
+                <button type="button" id="mute" class="btn navbar-btn btn-sm block-button">
+                    <span id="mute-button-span" class="glyphicon glyphicon-volume-off"></span>
+                </button>
+                <button type="button" id="volume_down" class="btn navbar-btn btn-sm block-button">
+                    <span id="voldown-button-span" class="glyphicon glyphicon-volume-down"></span>
+                </button>
+                <button type="button" id="volume_up" class="btn navbar-btn btn-sm block-button">
+                    <span id="volup-button-span" class="glyphicon glyphicon-volume-up"></span>
+                </button>
+                {% endif %}
+                <button type="button" id="skip" class="btn navbar-btn btn-sm block-button">
+                    <span id="skip-button-span" class="glyphicon glyphicon-fast-forward"></span>
+                </button>
+            </div>
+        </li>
+    </ul>
+    <ul class="nav navbar-nav navbar-right hidden-xs">
+        <li>
+            <div class="infobar">
+                <p class="navbar-text start-queue"></p>
+                <p class="navbar-text end-queue"></p>
+                <p class="navbar-text duration-queue"></p>
+            </div>
+        </li>
+    </ul>
+  </div>
+</nav>
 <br><br>
+<div class="alert-location">
+</div>
 <div id="request-container" class="hidden">
     <table id="request-table" class="table table-striped">
         <thead>
@@ -19,7 +57,7 @@
             </tr>
             <tr>
                 <th colspan="2"><input id="search-all" class="search-input" type="text"></th>
-                <th><input id="search-uploader" class="search-input" type="text"></th>
+                <th colspan="3"><input id="search-uploader" class="search-input" type="text"></th>
             </tr>
         </thead>
         <tfoot>
@@ -39,49 +77,28 @@
                     </select>
                     <select class="pagenum input-mini" title="Select page number"></select>
                 </th>
+                <th colspan="2"></th>
             </tr>
         </tfoot>
         <tbody>
         </tbody>
     </table>
 </div>
-
 <div id="queue-container">
-    <h1 class="h1">
-        Now Playing{% if perms.queues.can_control_volume %}
-        <a id="mute" class="glyphicon glyphicon-volume-off" href="#"></a>{% endif %}
-    </h1>
     <table class="table table-striped">
         <thead>
-            <tr>
-                <th class="col-md-4">Artist</th>
-                <th class="col-md-4">Title</th>
-                <th class="col-md-2 hidden-xs">Requested By</th>
-                <th class="col-md-1 hidden-xs" style="text-align: right;">Time Left</th>
-                <th class="col-md-1 control-icons">Control</th>
+            <tr class="table-header-style">
+                <td class="col-md-4">Artist</td>
+                <td class="col-md-4">Title</td>
+                <td class="col-md-2 hidden-xs">Requested By</td>
+                <td id="timeswitch" class="col-md-1 hidden-xs text-info" >Plays In</td>
+                <td class="col-md-1 control-icons">Control</td>
             </tr>
-        </thead>
-        <tbody>
-            <tr class="currentsong">
+            <tr class="currentsong" style="font-weight: bold">
                 <td class="artist"></td>
                 <td class="title"></td>
                 <td class="requested-by hidden-xs"></td>
-                <td class="time-left hidden-xs" style="text-align: right;"></td>
-                <td>
-                    <a id="skip" href="#"></a>{% if perms.queues.can_control_volume %}&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-down" class="glyphicon glyphicon-volume-down" href="#"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-up" class="glyphicon glyphicon-volume-up" href="#"></a>{% endif %}
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <h1 class="h1">Queue</h1>
-    <table class="table table-striped">
-        <thead>
-            <tr>
-                <th class="col-md-4">Artist</th>
-                <th class="col-md-4">Title</th>
-                <th class="col-md-2 hidden-xs">Requested By</th>
-                <th id="queue-time-header" class="col-md-1 hidden-xs" style="text-align: right;">Plays At</th>
-                <th class="col-md-1 control-icons">Control</th>
+                <td colspan="2"></td>
             </tr>
         </thead>
         <tbody class="queuebody">