diff --git a/marietje/marietje/static/css/custom.css b/marietje/marietje/static/css/custom.css index f5a1514..2971a82 100644 --- a/marietje/marietje/static/css/custom.css +++ b/marietje/marietje/static/css/custom.css @@ -5,3 +5,11 @@ .control-icons { min-width: 90px; } + +.song-info { + position: absolute; + padding: 8px; + background: silver; + white-space: nowrap; + z-index: 9999; +} diff --git a/marietje/marietje/static/js/queue.js b/marietje/marietje/static/js/queue.js index aa284a5..554b31a 100644 --- a/marietje/marietje/static/js/queue.js +++ b/marietje/marietje/static/js/queue.js @@ -48,7 +48,7 @@ $(function () { }); $('.pagesize').change(function(){ - Cookies.set('pagesize', $(this).val(), { expires: 365 }); + Cookies.set('pagesize', $(this).val()); $('.pagenum').val(1); getSongs(); }); @@ -86,6 +86,23 @@ $(function () { $.post('/api/volumeup', {csrfmiddlewaretoken: csrf_token}); }); + $(document).on('touchstart', '.artist, .title', function(){ + $('.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('Requested By: ' + row.find('.requested-by').text() + '
' + text + + '
'); + var offset = row.offset(); + $('.song-info').css('top', offset.top - $(document).scrollTop() + row.height()) + .css('left', offset.left).css('backgroundColor', '#EEEEEE').width(row.width() - 16); + }); + + $(document).on('click', '.song-info', function(){ + $(this).remove(); + }); + getSongs(); }); @@ -120,7 +137,7 @@ function updateTime() iteration = (iteration + 1) % 10; if (secondsLeft >= 0) { - $('.currentsong .timeleft').text(secondsLeft.secondsToHHMMSS()); + $('.currentsong .time-left').text(secondsLeft.secondsToHHMMSS()); } // Refresh every ten seconds, or if the song has ended in the last ten @@ -150,7 +167,7 @@ function refreshQueue() var requestedBy = currentSong.requested_by; $('.currentsong .artist').text(currentSong.song.artist); $('.currentsong .title').text(currentSong.song.title); - $('.currentsong .requestedby').text(requestedBy); + $('.currentsong .requested-by').text(requestedBy); if (currentSong.can_skip || canSkip) { $('#skip').addClass('glyphicon glyphicon-fast-forward'); @@ -168,9 +185,9 @@ function refreshQueue() var artist = song.song.artist.trim() === '' ? '?' : song.song.artist; var title = song.song.title.trim() === '' ? '?' : song.song.title; - $('.queuebody:last-child').append('' + artist - + '' + title + '' + requestedBy - + '' + (playNextAt < now ? '' : playNextAt.timestampToHHMMSS()) + $('.queuebody:last-child').append('' + artist + + '' + title + '' + requestedBy + + '' + (playNextAt < now ? '' : playNextAt.timestampToHHMMSS()) + '' + 'Artist Title - Requested By - Time Left + Requested By + Time Left Control @@ -60,8 +60,8 @@ - - + + {% if perms.queues.can_control_volume %}        {% endif %} @@ -74,8 +74,8 @@ Artist Title - Requested By - Plays At + Requested By + Plays At Control