technicie/MarietjeDjango
1
0
Fork 0
mirror of https://gitlab.science.ru.nl/technicie/MarietjeDjango.git synced 2025-12-09 18:52:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Better mobile queue.

Browse Source
This commit is contained in:
Jim Driessen
2017-02-01 14:08:35 +01:00
parent 7339c897f9
commit e90cf4cdef
3 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
marietje/marietje/static/css/custom.css
View File

@ -5,3 +5,11 @@
.control-icons {
min-width: 90px;
}
.song-info {
position: absolute;
padding: 8px;
background: silver;
white-space: nowrap;
z-index: 9999;
}

29
marietje/marietje/static/js/queue.js
View File

@ -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('<span class="song-info">Requested By: ' + row.find('.requested-by').text() + '<br>' + text
+ '</span>');
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('<tr><td>' + artist
+ '</td><td>' + title + '</td><td>' + requestedBy
+ '</td><td>' + (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())
$('.queuebody:last-child').append('<tr><td class="artist">' + artist
+ '</td><td class="title">' + title + '</td><td class="hidden-xs requested-by">' + requestedBy
+ '</td><td class="hidden-xs plays-at">' + (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())
+ '</td><td>' + '<a href="#" class="glyphicon glyphicon-arrow-up'
+ (canMoveSongs && id !== 0 ? '' : ' invisible')
+ '" onclick="return moveUp(' + song.id

12
marietje/queues/templates/queues/queue.html
View File

@ -51,8 +51,8 @@
<tr>
<th class="col-md-4">Artist</th>
<th class="col-md-4">Title</th>
<th class="col-md-2">Requested By</th>
<th class="col-md-1">Time Left</th>
<th class="col-md-2 hidden-xs">Requested By</th>
<th class="col-md-1 hidden-xs">Time Left</th>
<th class="col-md-1 control-icons">Control</th>
</tr>
</thead>
@ -60,8 +60,8 @@
<tr class="currentsong">
<td class="artist"></td>
<td class="title"></td>
<td class="requestedby"></td>
<td class="timeleft"></td>
<td class="requested-by hidden-xs"></td>
<td class="time-left hidden-xs"></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>
@ -74,8 +74,8 @@
<tr>
<th class="col-md-4">Artist</th>
<th class="col-md-4">Title</th>
<th class="col-md-2">Requested By</th>
<th class="col-md-1">Plays At</th>
<th class="col-md-2 hidden-xs">Requested By</th>
<th class="col-md-1 hidden-xs">Plays At</th>
<th class="col-md-1 control-icons">Control</th>
</tr>
</thead>