diff --git a/marietje/api/views.py b/marietje/api/views.py index 9df9c58..5dc453e 100644 --- a/marietje/api/views.py +++ b/marietje/api/views.py @@ -168,25 +168,12 @@ def managesongs(request): @api_auth_required def queue(request): queue = request.user.queue - 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 = { + return JsonResponse({ '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()), - 'user_name': request.user.name, - 'infobar': infobar, - } - return JsonResponse(json) + 'current_time': int(time.time()) + }) @api_auth_required @@ -229,10 +216,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"]) @@ -243,8 +230,7 @@ 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"]) diff --git a/marietje/marietje/static/css/custom.css b/marietje/marietje/static/css/custom.css index a542c6f..c9e8d79 100644 --- a/marietje/marietje/static/css/custom.css +++ b/marietje/marietje/static/css/custom.css @@ -11,7 +11,7 @@ padding: 8px; background: silver; white-space: nowrap; - z-index: 1; + z-index: 9999; } #queue-time-header { @@ -26,26 +26,6 @@ footer { color: #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; -} +.marietjequeue-start { + border-top: 4px double #777777; +} \ No newline at end of file diff --git a/marietje/marietje/static/js/queue.js b/marietje/marietje/static/js/queue.js index 79df584..7fc0758 100644 --- a/marietje/marietje/static/js/queue.js +++ b/marietje/marietje/static/js/queue.js @@ -3,19 +3,18 @@ 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); @@ -49,12 +48,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) { @@ -106,12 +105,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}); }); @@ -128,7 +127,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('Requested By: ' + row.find('.requested-by').text() + '
' + text + ''); var offset = row.offset(); @@ -142,107 +141,104 @@ $(function () { } }); - $('#timeswitch').click(function(){ + $('#queue-time-header').click(function(){ showTimeToPlay = !showTimeToPlay; - $('.timeswitcher').toggleClass('active'); - $('#timeswitch').text(showTimeToPlay ? 'Plays In' : 'Plays At'); - Cookies.set('showtimetoplay', (showTimeToPlay ? '1' : '0'), { expires: 365 }); - refreshQueue(); + $('#queue-time-header').text(showTimeToPlay ? 'Plays In' : 'Plays At'); + Cookies.set('showtimetoplay', showTimeToPlay ? '1' : '0', { expires: 365 }); }); 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; - 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) { + 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 requestNext = false; - var requestPrev = false; + var reqMarietje = requestedBy != 'Marietje'; + var startMarietje = 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')); + if(id === queue.length-1){ + var requestNext = false + } else { + var 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; + 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 } else { - requestPrev = true; + var requestPrev = true } - } else { - requestPrev = true; - } + } else {var 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 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 showTime = (showTimeToPlay ? (timeToPlay < 0 ? '' : timeToPlay.secondsToMMSS()) : (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())); + showTime = showTimeToPlay ? (timeToPlay < 0 ? '' : timeToPlay.secondsToMMSS()) : (playNextAt < now ? '' : playNextAt.timestampToHHMMSS()) - $('.queuebody:last-child').append('' + '' + artist + $('.queuebody:last-child').append('' + '' + artist + '' + title + '' + requestedBy + '' + showTime + '' + '    '); 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; } @@ -269,19 +268,19 @@ function refreshQueue() { 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 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'); + if (currentSong.can_skip || canSkip) + { + $('#skip').addClass('glyphicon glyphicon-fast-forward'); } - else { - $('#skip').addClass('hidden'); + else + { + $('#skip').removeClass('glyphicon glyphicon-fast-forward'); } renderQueue(playNextAt, now); @@ -291,19 +290,21 @@ function refreshQueue() { }); } -function refreshSeconds(playNextAt, now) { +function refreshSeconds(playNextAt, now) +{ if(!showTimeToPlay) { return; } var timeToPlay = playNextAt - now; - var times = $('.plays-at'); + 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(); @@ -312,34 +313,38 @@ 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('' + artist + - '' + title + - '' + ((song.uploader_name) ? song.uploader_name : 'Marietje') + - '' + song.duration.secondsToMMSS() + + var artist = song.artist.trim() === '' ? '?' : song.artist; + var title = song.title.trim() === '' ? '?' : song.title; + $('#request-table tbody:last-child').append('' + artist + + '' + title + + '' + (song.uploader_name ? song.uploader_name : 'Marietje') + + '' + song.duration.secondsToMMSS() + '⚑'); }); 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($("") .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'); @@ -348,7 +353,8 @@ function showRequestTable() { requestViewOpen = true; } -function hideRequestTable() { +function hideRequestTable() +{ $('#request-button').text('Request'); $('#request-container').hide(); $('#queue-container').show(); @@ -360,7 +366,7 @@ function hideRequestTable() { if (!Date.now) { Date.now = function () { return new Date().getTime(); - }; + } } // Edited from https://stackoverflow.com/a/6313008. @@ -369,17 +375,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); @@ -397,7 +403,7 @@ Number.prototype.timestampToHHMMSS = function () { seconds = '0' + seconds; } return hours + ':' + minutes + ':' + seconds; -}; +} function createAlert(type, message) { alertText = '
'+ @@ -407,5 +413,5 @@ function createAlert(type, message) { '' + message + '
'; - $('body > div.container > div.alert-location').prepend(alertText); -} \ No newline at end of file + $('body > div.container').prepend(alertText); +} diff --git a/marietje/queues/models.py b/marietje/queues/models.py index 962512b..ca07298 100644 --- a/marietje/queues/models.py +++ b/marietje/queues/models.py @@ -5,6 +5,7 @@ from django.utils import timezone from songs.models import Song + class Playlist(models.Model): def __str__(self): return 'Playlist #' + str(self.id) diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html index 0eb0ef6..a9475c5 100644 --- a/marietje/queues/templates/queues/queue.html +++ b/marietje/queues/templates/queues/queue.html @@ -4,47 +4,9 @@ {% block title %}Queue{% endblock %} {% block content %} - - - +

Request

+

-
-
+
+

+ Now Playing{% if perms.queues.can_control_volume %} + {% endif %} +

- - - - - - + + + + + + - + + + - + + + + +
ArtistTitleControl
ArtistTitleControl
+ {% if perms.queues.can_control_volume %}        {% endif %} +
+

Queue

+ + + + + + + +
ArtistTitleControl